@faqir-ui/core 1.1.1 → 1.1.2

package/dist/faqir-core.js

@@ -10,7 +10,7 @@
 // PRODUCTION BUILD — dev-only diagnostics stripped at assembly time.
 // Load faqir-core.dev.js instead while developing for full warnings.
 // Regenerate with: bun run build:core
-// Package version: 1.1.1
+// Package version: 1.1.2
 // ============================================================================
 
 /**
@@ -227,7 +227,7 @@
   function evaluate(expression, scope, el) {
     try {
       const fn = compileExpression(expression);
-      return fn.call(scope, scope, el);
+      return fn.call(scope, scope, el, el);
     } catch (e) {
       console.warn('[Faqir] Expression error: "' + expression + '"', e);
       return undefined;
@@ -237,7 +237,7 @@
   function evaluateAssignment(expression, scope, el) {
     try {
       const fn = compileStatement(expression);
-      fn.call(scope, scope, el);
+      fn.call(scope, scope, el, el);
     } catch (e) {
       console.warn('[Faqir] Statement error: "' + expression + '"', e);
     }
@@ -261,12 +261,17 @@
     }
   }
 
+  // `$el` and `$this` are both the element the directive is written on. Inside
+  // `with($scope)` the scope's own `$el` magic (the root) wins, so `$el` only
+  // reaches this parameter where nothing shadows it: a top-level `l-data`,
+  // evaluated against `{}`. `$this` is never a scope key, so it always reaches
+  // it. [1.1F-06]
   function compileExpression(expr) {
     var key = 'expr:' + expr;
     if (expressionCache.has(key)) return expressionCache.get(key);
 
     var fn = new Function(
-      '$scope', '$el',
+      '$scope', '$el', '$this',
       'with($scope) { return (' + expr + ') }'
     );
     expressionCache.set(key, fn);
@@ -278,7 +283,7 @@
     if (expressionCache.has(key)) return expressionCache.get(key);
 
     var fn = new Function(
-      '$scope', '$el',
+      '$scope', '$el', '$this',
       'with($scope) { ' + expr + ' }'
     );
     expressionCache.set(key, fn);
@@ -316,21 +321,21 @@
   // (§3.9) and MOTION_PRESETS (§3.14) — are read from the code itself, not
   // repeated here.
   //
-  // @ui:directive l-data | — | any element, which becomes the scope root | l-data="{ count: 0 }" | Declares a reactive scope from an object literal, or from a name registered with `Faqir.data()`. `data-prop-*` attributes are JSON-parsed and merged over it. Descendants share the scope until the next `l-data`.
-  // @ui:directive l-init | — | a scope root, beside `l-data` | l-init="load()" | Runs once, after the scope exists and its `l-source` bindings are injected.
+  // @ui:directive l-data | — | any element, which becomes the scope root | l-data="{ count: 0 }" | Declares a reactive scope from an object literal, or from a name registered with `Faqir.data()`. `data-prop-*` attributes are JSON-parsed and merged over it. Descendants share the scope until the next `l-data`. Its methods are bound to the scope, so `this` is the component even when an `l-for` row calls them; a function assigned later is not bound.
+  // @ui:directive l-init | — | a scope root, beside `l-data` | l-init="load()" | Runs once, after the scope exists and its `l-source` bindings are injected, with the subtree's controllers already started. In `l-if` / `l-for` content it runs after insertion: bindings, insert, controllers, then `l-init` / first `l-effect`.
   // @ui:directive l-source:<name> | — | a scope root, beside `l-data` | l-source:tasks="/api/tasks" | Binds a REST collection into the scope as `<name>`, `<name>Loading`, `<name>Error` and the `$<name>` CRUD controller. See below.
   // @ui:directive l-text | — | any element | l-text="count" | Writes the value to `textContent`; `null` and `undefined` write an empty string.
   // @ui:directive l-html | — | any element | l-html="body" | Writes the value to `innerHTML`, unsanitized — never pass user input. The dev engine reports every use.
-  // @ui:directive l-bind:<attr> | :<attr> | any element | :disabled="loading" | Binds one attribute. `class` and `style` take a string, an array or an object; boolean attributes are added or removed; `null`, `undefined` and `false` remove the attribute.
+  // @ui:directive l-bind:<attr> | :<attr> | any element | :disabled="loading" | Binds one attribute. `class` and `style` take a string, an array or an object and merge with what is there: each run removes only what its previous run set, so static markup, `l-show` and controllers keep theirs. Boolean attributes are added or removed; `null`, `undefined` and `false` remove the attribute.
   // @ui:directive l-on:<event> | @<event> | any element | @click="count++" | Adds a listener for `<event>`. Inside the expression `$event` is the DOM event.
   // @ui:directive l-model | — | an input, textarea or select, or `[data-ui="switch"]` | l-model="name" | Two-way binding. A checkbox bound to an array is a checkbox group; radios bind by value; `<select multiple>` is not handled. The modifiers below apply to the text-like branch (input, textarea, number) only.
   // @ui:directive l-show | — | any element | l-show="open" | Toggles `display: none`, leaving the element in the DOM. Runs `l-transition` on each flip.
   // @ui:directive l-if | — | a `<template>` element | <template l-if="open"> | Inserts and removes the template's content. Removal tears the subtree down: cleanups run and in-flight `l-source` requests abort.
   // @ui:directive l-for | — | a `<template>` element | <template l-for="(task, i) in tasks"> | Repeats the template's content once per item, with the item and index names bound in a child scope.
   // @ui:directive l-key | — | the same `<template>` as `l-for` | l-key="task.id" | The reconciliation key. Without it items are matched by position, so a reorder re-renders rather than moves; the dev engine reports that case.
-  // @ui:directive l-ref | — | any element | l-ref="field" | Registers the element on the scope's `$refs` under that name.
+  // @ui:directive l-ref | — | any element | l-ref="field" | Registers the element on the scope's `$refs` under that name — also from inside `l-if`, `l-for` and `l-teleport`, where the scope is the enclosing one. In an `l-for` the last row rendered wins, and the ref is cleared when that row goes. Effects that read it re-run when it appears or goes.
   // @ui:directive l-effect | — | any element | l-effect="document.title = title" | Runs the expression immediately, then again whenever a value it read changes.
-  // @ui:directive l-cloak | — | any element | l-cloak | Removed from every element once the tree is initialized. Pair with `[l-cloak] { display: none }` to hide markup before it binds.
+  // @ui:directive l-cloak | — | any element | l-cloak | Removed from every element once the tree is initialized. Faqir's CSS (`base/reset.css`) hides `[l-cloak]` until then; the engine injects no style, so a page without that CSS needs its own `[l-cloak] { display: none }` rule.
   // @ui:directive l-transition | — | an `l-show` element, or a top-level element inside a `<template l-if>` | l-transition="slide-up" | Names the motion preset for that element's enter/leave cycle. The engine only stamps `data-motion`; the CSS animates.
   // @ui:directive l-teleport | — | any element | l-teleport="body" | Moves the element into the first element matching the value, which is a plain CSS selector rather than an expression.
   //
@@ -354,6 +359,7 @@
   // @ui:modifier l-source .key | Names the identity property, `id` by default: `.key.uuid`.
   //
   // @ui:magic $el | every expression | The scope ROOT — the element carrying `l-data`, not the element the expression is written on. Every magic that walks the DOM starts from here.
+  // @ui:magic $this | every expression | The element the directive is written on — the `<input>` carrying `l-init`, the button carrying `@click`. In `l-data` and a root's `l-init` it is the root; in `l-for`'s list and `l-key` expressions, the `<template>`. Not a scope key, so `Faqir.magic()` cannot shadow it.
   // @ui:magic $refs | every expression | The scope's `l-ref` elements, keyed by name. Cleared entry by entry as elements are destroyed.
   // @ui:magic $store | every expression | Every store registered with `Faqir.store()`.
   // @ui:magic $state | every expression | `data-state` of the `[data-ui]` closest to the scope root. Writable — assigning sets the attribute — and reads re-run when a controller changes it.
@@ -478,6 +484,37 @@
   // point authors at ("a scope root, beside `l-data`"). [W2-1]
   var ROOT_CONSUMED = { data: 1, source: 1, init: 1 };
 
+  // `l-init` and each `l-effect`'s first run, held back while a structural
+  // render builds content that is not in the document yet. [1.1F-03]
+  var pendingInits = null;
+
+  function runInit(fn) {
+    if (pendingInits) pendingInits.push(fn); else fn();
+  }
+
+  // `l-if` / `l-for` content ran its `l-init` and its effects' first pass while
+  // still detached — before insertion, and before any controller inside it had
+  // started — so `$ui('#x')` there was null, and an effect that read nothing
+  // reactive never ran again. `render` binds and inserts, and returns the nodes
+  // it inserted; their controllers start next, and only then does the held work
+  // run: bindings → insertion → controllers → `l-init` / `l-effect`. A render
+  // nested inside another (an `l-if` in an `l-for` row) joins the outer one,
+  // which alone knows when the content is attached. Controllers are not started
+  // on content that is still detached. Untracked, so nothing the held work reads
+  // subscribes the structural effect that rendered it. [1.1F-03]
+  function renderThenInit(render) {
+    if (pendingInits) return render();
+    var queue = pendingInits = [];
+    var nodes;
+    try { nodes = render(); } finally { pendingInits = null; }
+    untrack(function() {
+      for (var i = 0; i < nodes.length; i++) {
+        if (nodes[i].nodeType === 1 && nodes[i].isConnected) startControllers(nodes[i]);
+      }
+      for (var q = 0; q < queue.length; q++) queue[q]();
+    });
+  }
+
   function initTree(root, parentScope) {
     var scope = initScope(root, parentScope);
 
@@ -558,6 +595,17 @@
   // at `<body>`. Created once, on first use, so a page with no stray directive
   // pays nothing for it.
   var strayScope = null;
+
+  // The element a scope's `$refs` live on, keyed by the scope object. Not
+  // `findScopeRoot`: `__faqirScope` also marks "already initialised", so an
+  // `l-if` clone or an `l-for` row carries it too, and a ref resolved by walking
+  // up landed on the clone while `$refs` read the real root — invisible. A
+  // teleported element has left the root's subtree, and a stray element has no
+  // stamped ancestor at all. A WeakMap rather than a scope property, because a
+  // read through the reactive scope inside a structural effect would subscribe
+  // it. [1.1F-01]
+  var scopeRoots = new WeakMap();
+
   function getStrayScope() {
     if (!strayScope) {
       if (!document.body.__scopeId) document.body.__scopeId = ++scopeCounter;
@@ -567,6 +615,7 @@
       // MutationObserver would stop giving standalone `[data-ui]` islands their
       // own scope.
       strayScope = createScopeWithMagics({}, document.body, document.body);
+      scopeRoots.set(strayScope, document.body);
     }
     return strayScope;
   }
@@ -619,6 +668,7 @@
 
     var scopeId = ++scopeCounter;
     var scope = createScopeWithMagics(userData, root, root);
+    scopeRoots.set(scope, root);
     root.__faqirScope = scope;
     root.__scopeId = scopeId;
     root.__faqirCleanups = [];
@@ -643,7 +693,7 @@
 
     var initExpr = root.getAttribute('l-init');
     if (initExpr) {
-      evaluateAssignment(initExpr, scope, root);
+      runInit(function() { evaluateAssignment(initExpr, scope, root); });
     }
 
     return scope;
@@ -733,6 +783,15 @@
     Object.defineProperties(target, descriptors);
 
     var scope = reactive(target);
+    // A bare call `pick()` inside `with(rowScope)` gets the l-for row scope as
+    // `this`, and that scope owns the loop variable and index: `this.item = x`
+    // wrote the row instead of the component. Bind each own method to the
+    // scope. Getters keep their receiver; functions assigned later stay
+    // unbound. Written to the target, so nothing is triggered. [1.1F-05]
+    for (var k in descriptors) {
+      var d = descriptors[k];
+      if (d.writable && typeof d.value === 'function') target[k] = d.value.bind(scope);
+    }
     return scope;
   }
 
@@ -751,8 +810,10 @@
 
   // --- Scope utilities ---
 
+  // Created on first read, so an effect that reads a ref before it exists
+  // subscribes to the same object `handleRef` later writes through.
   function getScopeRefs(root) {
-    return root.__faqirRefs || {};
+    return root.__faqirRefs || (root.__faqirRefs = {});
   }
 
   function findScopeRoot(el) {
@@ -1185,16 +1246,38 @@
     'open', 'novalidate', 'formnovalidate', 'inert'
   ]);
 
+  // Properties whose live state stops following the attribute once the user
+  // has touched the control (the "dirty" flag), so an attribute-only write
+  // leaves a stale control. `muted` and `indeterminate` have no attribute at all.
+  var PROPS = new Set(['checked', 'selected', 'muted', 'indeterminate', 'value']);
+
+  // Write a DOM property only when it differs. `checked`/`selected` writes
+  // notify with a bubbling `faqir:model` — never a native `change`, which would
+  // re-enter l-model's own listener and fire user `@change` handlers on a
+  // store-driven write.
+  function writeProp(el, name, value) {
+    if (!(name in el) || el[name] === value) return;
+    el[name] = value;
+    if (name === 'checked' || name === 'selected') {
+      el.dispatchEvent(new CustomEvent('faqir:model', { bubbles: true }));
+    }
+  }
+
   function handleBind(el, dir, scope) {
     var attrName = dir.arg;
+    // What this binding's last run set on `class`/`style`. Both merge: a run
+    // applies its own classes/declarations and removes only the ones its
+    // previous run set and this one dropped, so static markup, `l-show` and
+    // controller writes survive a re-run. [1.1F-04]
+    var prev = {};
 
     var cl = effect(function() {
       var value = evaluate(dir.expression, scope, el);
 
       if (attrName === 'class') {
-        applyClassBinding(el, value);
+        prev = applyClassBinding(el, value, prev);
       } else if (attrName === 'style') {
-        applyStyleBinding(el, value);
+        prev = applyStyleBinding(el, value, prev);
       } else if (BOOLEAN_ATTRS.has(attrName)) {
         if (value) {
           el.setAttribute(attrName, '');
@@ -1208,41 +1291,66 @@
           el.setAttribute(attrName, String(value));
         }
       }
+      if (PROPS.has(attrName)) {
+        writeProp(el, attrName, attrName === 'value'
+          ? (value == null || value === false ? '' : String(value))
+          : !!value);
+      }
     });
 
     addCleanup(el, cl);
   }
 
-  function applyClassBinding(el, value) {
-    if (typeof value === 'string') {
-      el.className = value;
-    } else if (Array.isArray(value)) {
-      el.className = value.filter(Boolean).join(' ');
-    } else if (typeof value === 'object' && value !== null) {
-      for (var cls in value) {
-        if (value.hasOwnProperty(cls)) {
-          el.classList.toggle(cls, !!value[cls]);
-        }
-      }
+  // A `:class` value as { class: on }. Strings and arrays turn classes on; an
+  // object entry sets its own, so a falsy one removes a class markup set.
+  function classMap(v, out, on) {
+    if (typeof v === 'string') {
+      v.split(/\s+/).forEach(function(c) { if (c) out[c] = on; });
+    } else if (Array.isArray(v)) {
+      v.forEach(function(x) { if (x) classMap(x, out, true); });
+    } else if (v && typeof v === 'object') {
+      for (var k in v) classMap(k, out, !!v[k]);
     }
+    return out;
   }
 
-  function applyStyleBinding(el, value) {
-    if (typeof value === 'string') {
-      el.style.cssText = value;
-    } else if (typeof value === 'object' && value !== null) {
-      for (var prop in value) {
-        if (value.hasOwnProperty(prop)) {
-          var cssProp = prop.replace(/[A-Z]/g, function(m) { return '-' + m.toLowerCase(); });
-          var val = value[prop];
-          if (val === null || val === undefined || val === false) {
-            el.style.removeProperty(cssProp);
-          } else {
-            el.style.setProperty(cssProp, String(val));
-          }
-        }
+  function applyClassBinding(el, value, prev) {
+    var next = classMap(value, {}, true), c;
+    for (c in prev) if (prev[c] && !(c in next)) el.classList.remove(c);
+    for (c in next) el.classList.toggle(c, next[c]);
+    return next;
+  }
+
+  // A `:style` value as { property: [value, priority] }, or null to remove it.
+  // A string is parsed by a detached element's CSSOM, which handles custom
+  // properties, `!important`, shorthands and `;` inside `url()`.
+  var styleScratch;
+  function styleMap(v, out) {
+    if (typeof v === 'string') {
+      var s = (styleScratch || (styleScratch = document.createElement('div'))).style;
+      s.cssText = v;
+      for (var i = 0; i < s.length; i++) {
+        out[s[i]] = [s.getPropertyValue(s[i]), s.getPropertyPriority(s[i])];
+      }
+    } else if (Array.isArray(v)) {
+      v.forEach(function(x) { styleMap(x, out); });
+    } else if (v && typeof v === 'object') {
+      for (var k in v) {
+        out[/^--/.test(k) ? k : k.replace(/[A-Z]/g, '-$&').toLowerCase()] =
+          v[k] == null || v[k] === false ? null : [String(v[k]), ''];
       }
     }
+    return out;
+  }
+
+  function applyStyleBinding(el, value, prev) {
+    var next = styleMap(value, {}), p;
+    for (p in prev) if (prev[p] && !(p in next)) el.style.removeProperty(p);
+    for (p in next) {
+      if (next[p]) el.style.setProperty(p, next[p][0], next[p][1]);
+      else el.style.removeProperty(p);
+    }
+    return next;
   }
 
   // --- 3.9 l-on / @event ---
@@ -1344,13 +1452,17 @@
 
   function handleRef(el, dir, scope) {
     var name = dir.expression;
-    var root = findScopeRoot(el);
-    if (!root.__faqirRefs) root.__faqirRefs = {};
-    root.__faqirRefs[name] = el;
+    // Written through the reactive proxy, so an effect that read `$refs.name`
+    // re-runs when the ref appears or goes. [1.1F-01]
+    var refs = reactive(getScopeRefs(scopeRoots.get(scope) || findScopeRoot(el)));
+    refs[name] = el;
 
     addCleanup(el, function() {
-      if (root.__faqirRefs && root.__faqirRefs[name] === el) {
-        delete root.__faqirRefs[name];
+      // `__target`: a tracked read here would subscribe whichever structural
+      // effect is tearing this element down.
+      if (refs.__target[name] === el) {
+        refs[name] = undefined;
+        delete refs.__target[name];
       }
     });
   }
@@ -1358,29 +1470,24 @@
   // --- 3.11 l-init ---
 
   function handleInit(el, dir, scope) {
-    evaluateAssignment(dir.expression, scope, el);
+    runInit(function() { evaluateAssignment(dir.expression, scope, el); });
   }
 
   // --- 3.12 l-effect ---
 
   function handleEffect(el, dir, scope) {
-    var cl = effect(function() {
-      evaluateAssignment(dir.expression, scope, el);
+    runInit(function() {
+      addCleanup(el, effect(function() {
+        evaluateAssignment(dir.expression, scope, el);
+      }));
     });
-    addCleanup(el, cl);
   }
 
   // --- 3.13 l-cloak ---
-
-  function injectCloakStyle() {
-    // Once per document. A second `Faqir.start()` used to append another
-    // identical <style> to <head>, and nothing ever removed either. [W3-1]
-    if (document.querySelector('style[data-faqir-cloak]')) return;
-    var style = document.createElement('style');
-    style.setAttribute('data-faqir-cloak', '');
-    style.textContent = '[l-cloak] { display: none !important; }';
-    document.head.appendChild(style);
-  }
+  //
+  // The engine injects no stylesheet. The `[l-cloak]` rule ships in
+  // `base/reset.css` (so in every bundle); the injected copy it used to append
+  // at boot was redundant, and the only inline style a CSP had to allow. [1.1F-07]
 
   /**
    * Strip `l-cloak` from `within` and everything under it (the whole document
@@ -1389,7 +1496,7 @@
    * The sweep used to run exactly once, at the end of bootstrap, against a
    * document-wide selector. Anything inserted afterwards — an `l-if` branch, an
    * `l-for` row, a fragment an application appended — kept the attribute, and
-   * the injected `[l-cloak] { display: none !important }` rule then hid it
+   * the `[l-cloak] { display: none !important }` rule then hid it
    * permanently: content that had bound correctly and could never be seen. The
    * MutationObserver runs this over every node it is handed. [W3-1]
    */
@@ -1546,7 +1653,7 @@
     if (isFaqirSwitch) {
       var cl = effect(function() {
         var value = evaluate(prop, scope, el);
-        el.checked = !!value;
+        writeProp(el, 'checked', !!value);
         el.dataset.state = value ? 'on' : 'off';
         el.setAttribute('aria-checked', value ? 'true' : 'false');
       });
@@ -1558,11 +1665,9 @@
     } else if (tag === 'input' && type === 'checkbox') {
       var cl = effect(function() {
         var current = evaluate(prop, scope, el);
-        if (Array.isArray(current)) {
-          el.checked = current.indexOf(el.value) >= 0;
-        } else {
-          el.checked = !!current;
-        }
+        writeProp(el, 'checked', Array.isArray(current)
+          ? current.indexOf(el.value) >= 0
+          : !!current);
       });
       bind('change', function() {
         var current = evaluate(prop, scope, el);
@@ -1580,7 +1685,7 @@
 
     } else if (tag === 'input' && type === 'radio') {
       var cl = effect(function() {
-        el.checked = evaluate(prop, scope, el) === el.value;
+        writeProp(el, 'checked', evaluate(prop, scope, el) === el.value);
       });
       bind('change', function() {
         if (el.checked) {
@@ -1591,7 +1696,7 @@
 
     } else if (tag === 'select') {
       var cl = effect(function() {
-        el.value = evaluate(prop, scope, el) || '';
+        writeProp(el, 'value', evaluate(prop, scope, el) || '');
       });
       bind('change', function() {
         writeModel(prop, el.value, scope, el);
@@ -1684,7 +1789,7 @@
       var value = evaluate(dir.expression, scope, el);
 
       if (value) {
-        if (insertedNodes.length === 0) {
+        if (insertedNodes.length === 0) renderThenInit(function() {
           var fragment = el.content.cloneNode(true);
           var nodes = [].slice.call(fragment.childNodes);
 
@@ -1727,7 +1832,8 @@
               runEnterTransition(insertedNodes[i]);
             }
           }
-        }
+          return insertedNodes;
+        });
       } else {
         for (var i = 0; i < insertedNodes.length; i++) {
           var node = insertedNodes[i];
@@ -1843,6 +1949,8 @@
     var indexName = match[2] || 'index';
     var listExpr = match[3];
     var keyExpr = el.getAttribute('l-key');
+    // Dev hint: a loop variable that shadows a name the scope already has. Only
+    // names the author wrote; `in` reads no reactive dependency. [1.1F-05]
 
     var anchor = document.createComment('l-for');
     el.parentNode.insertBefore(anchor, el);
@@ -1877,6 +1985,7 @@
       own[itemName] = item;
       own[indexName] = i;
       var childScope = createForItemScope(own, scope);
+      scopeRoots.set(childScope, scopeRoots.get(scope));
       for (var j = 0; j < nodes.length; j++) {
         if (nodes[j].nodeType !== 1) continue;
         // A row whose top node declares `l-data` is a scope root: build it with
@@ -1901,7 +2010,9 @@
 
     var currentEntries = [];
 
-    var cl = effect(function() {
+    // One reconciliation. Returns the rows it built, for `renderThenInit` to
+    // start their controllers and run their held inits. [1.1F-03]
+    function renderList() {
       var list = evaluate(listExpr, scope, el);
       var items = Array.isArray(list) ? list :
                   typeof list === 'number' ? Array.from({ length: list }, function(_, i) { return i + 1; }) :
@@ -1974,7 +2085,12 @@
       }
 
       currentEntries = newEntries;
-    });
+      var fresh = [];
+      for (var i = 0; i < n; i++) if (!source[i]) fresh.push.apply(fresh, newEntries[i].nodes);
+      return fresh;
+    }
+
+    var cl = effect(function() { renderThenInit(renderList); });
 
     addCleanup(el, cl, anchor);
   }
@@ -2113,41 +2229,20 @@
   // ═══════════════════════════════════════════════════════
 
   // --- From dom.js ---
-  var $ = function(selector, scope) { return (scope || document).querySelector(selector); };
   var $$ = function(selector, scope) { return [].slice.call((scope || document).querySelectorAll(selector)); };
 
-  function create(tag, attrs) {
-    var el = document.createElement(tag);
-    if (attrs) {
-      var keys = Object.keys(attrs);
-      for (var i = 0; i < keys.length; i++) {
-        el.setAttribute(keys[i], attrs[keys[i]]);
-      }
-    }
-    for (var j = 2; j < arguments.length; j++) {
-      var child = arguments[j];
-      el.append(typeof child === 'string' ? document.createTextNode(child) : child);
-    }
-    return el;
-  }
-
-  // --- From events.js ---
-  function delegate(root, event, selector, handler) {
-    function listener(e) {
-      var target = e.target.closest(selector);
-      if (target && root.contains(target)) handler(e, target);
-    }
-    root.addEventListener(event, listener);
-    return function() { root.removeEventListener(event, listener); };
-  }
+  // A part's owner is its nearest [data-ui] above it that is not a layout
+  // primitive, starting from the parent since a part may carry data-ui itself.
+  // Same selector as registry/core/dom.js `owns`.
+  var OWNER = '[data-ui]:not([data-ui=stack],[data-ui=cluster],[data-ui=grid],[data-ui=container],[data-ui=surface],[data-ui=switcher],[data-ui=aspect-ratio])';
 
-  function once(el, event, handler) {
-    function listener(e) { cleanupOnce(); handler(e); }
-    function cleanupOnce() { el.removeEventListener(event, listener); }
-    el.addEventListener(event, listener);
-    return cleanupOnce;
+  function ownParts(root, part) {
+    return $$("[data-part='" + part + "']", root).filter(function(el) {
+      return el.parentElement.closest(OWNER) === root;
+    });
   }
 
+  // --- From events.js ---
   function onOutsideClick(el, handler) {
     function listener(e) { if (!el.contains(e.target)) handler(e); }
     document.addEventListener('pointerdown', listener);
@@ -2192,25 +2287,14 @@
     return function() { container.removeEventListener('keydown', onKeyDown); };
   }
 
-  // --- From motion.js (prefersReducedMotion already defined in Section 3.14) ---
-  function waitForTransition(el) {
-    if (prefersReducedMotion()) return Promise.resolve();
-    var style = getComputedStyle(el);
-    var hasDuration = parseFloat(style.transitionDuration) > 0 ||
-      (style.animationName !== 'none' && parseFloat(style.animationDuration) > 0);
-    if (!hasDuration) return Promise.resolve();
-    return new Promise(function(resolve) {
-      function done(e) {
-        if (e.target !== el) return;
-        el.removeEventListener('transitionend', done);
-        el.removeEventListener('animationend', done);
-        resolve();
-      }
-      el.addEventListener('transitionend', done);
-      el.addEventListener('animationend', done);
-    });
+  // Back to the opener once an overlay has closed, unless focus moved on while
+  // it closed (`active` was read before the panel hid) or the opener is gone.
+  function returnFocus(root, target, active) {
+    if ((!active || active === document.body || root.contains(active)) &&
+        target && target.isConnected && !target.closest('[hidden]')) target.focus();
   }
 
+  // --- From motion.js (prefersReducedMotion already defined in Section 3.14) ---
   // The four events an exit can end with, in one list: bound and unbound
   // together, so neither half can drift from the other.
   var EXIT_EVENTS = ['transitionend', 'transitioncancel', 'animationend', 'animationcancel'];
@@ -2513,7 +2597,8 @@ function createAccordion(root) {
   // Prevent double-init
   if (root._faqirAccordion) return root._faqirAccordion;
 
-  const getItems = () => [...root.querySelectorAll("[data-part='item']")];
+  // Direct children only: a nested accordion's items are its own.
+  const getItems = () => [...root.querySelectorAll(":scope > [data-part='item']")];
   const isSingle = () => root.dataset.variant === "single";
 
   function expand(index) {
@@ -2573,26 +2658,30 @@ function createAccordion(root) {
     if (content) content.hidden = true;
   }
 
-  function onTriggerClick(e) {
+  /**
+   * The index of the item whose own trigger `e` came from, or -1. A trigger of
+   * a component nested in the content (a dropdown, another accordion) is not
+   * the item's: an item's own trigger is the first one in it, since it comes
+   * before the content.
+   */
+  function triggerIndex(e) {
     const trigger = e.target.closest("[data-part='trigger']");
-    if (!trigger) return;
-    const item = trigger.closest("[data-part='item']");
-    if (!item) return;
-    const items = getItems();
-    const index = items.indexOf(item);
+    const item = trigger?.closest("[data-part='item']");
+    if (!item || item.querySelector("[data-part='trigger']") !== trigger) return -1;
+    return getItems().indexOf(item);
+  }
+
+  function onTriggerClick(e) {
+    const index = triggerIndex(e);
     if (index >= 0) toggle(index);
   }
 
   function onKeyDown(e) {
     if (e.key === "Enter" || e.key === " ") {
-      const trigger = e.target.closest("[data-part='trigger']");
-      if (trigger) {
+      const index = triggerIndex(e);
+      if (index >= 0) {
         e.preventDefault();
-        const item = trigger.closest("[data-part='item']");
-        if (!item) return;
-        const items = getItems();
-        const index = items.indexOf(item);
-        if (index >= 0) toggle(index);
+        toggle(index);
       }
     }
   }
@@ -3367,12 +3456,14 @@ function createCarousel(root) {
   if (!viewport) return null;
 
   const loop = root.hasAttribute("data-loop");
-  const slides = () => [...viewport.querySelectorAll("[data-part='slide']")];
-  const dots = () => [...root.querySelectorAll("[data-part='dot']")];
-  const prevBtn = root.querySelector("[data-part='prev']");
-  const nextBtn = root.querySelector("[data-part='next']");
-  const status = root.querySelector("[data-part='status']");
-  const enhanced = [...root.querySelectorAll("[data-part='controls'], [data-part='dots']")];
+  // A carousel nested in a slide brings its own slides, buttons and dots:
+  // slides are the viewport's children, the rest go through the owner guard.
+  const slides = () => [...viewport.querySelectorAll(":scope > [data-part='slide']")];
+  const dots = () => ownParts(root, "dot");
+  const [prevBtn] = ownParts(root, "prev");
+  const [nextBtn] = ownParts(root, "next");
+  const [status] = ownParts(root, "status");
+  const enhanced = [...ownParts(root, "controls"), ...ownParts(root, "dots")];
 
   let index = 0;
 
@@ -3468,12 +3559,13 @@ function createCarousel(root) {
 
   // ── events ──────────────────────────────────────────────────────────────────
   function onClick(e) {
-    const btn = e.target.closest && e.target.closest("[data-part]");
-    if (!btn || !root.contains(btn)) return;
-    const part = btn.dataset.part;
-    if (part === "next") next();
-    else if (part === "prev") prev();
-    else if (part === "dot") goTo(dots().indexOf(btn));
+    // Matched by identity, so a nested carousel's buttons are not these. A
+    // missing button is `undefined`, never equal to a `null` miss here.
+    const btn = e.target.closest("[data-part]");
+    const dot = dots().indexOf(btn);
+    if (btn === nextBtn) next();
+    else if (btn === prevBtn) prev();
+    else if (dot >= 0) goTo(dot);
   }
 
   // One rAF-throttled measurement per scroll burst keeps tracking cheap.
@@ -3824,8 +3916,11 @@ function createCommandPalette(root) {
   }
 
   function close() {
+    const active = document.activeElement;
     dismiss();
-    previouslyFocused?.focus();
+    // The opener may have left with another overlay — the downstream palette
+    // was opened from inside a dialog that closed underneath it.
+    returnFocus(root, previouslyFocused, active);
   }
 
   /**
@@ -4019,14 +4114,29 @@ function createCommandPalette(root) {
     }
   }
 
+  /**
+   * Cmd/Ctrl+K — one owner per press.
+   *
+   * Every instance listens on `document`, so a page with three palettes used to
+   * open three stacked focus traps. The first instance to act prevents default
+   * and every later one (or one an app handler pre-empted) stands down;
+   * `data-no-shortcut` opts an instance out entirely, read live, and a palette
+   * whose root has left the document without `destroy()` (an SPA route change)
+   * no longer claims the press from the live one. The key is
+   * matched case-insensitively (Caps Lock sends "K"), falling back to the
+   * physical key on a non-Latin layout; Shift is left alone because Cmd+Shift+K
+   * is a browser and app chord of its own.
+   */
   function onGlobalKeyDown(e) {
-    if ((e.metaKey || e.ctrlKey) && e.key === "k") {
-      e.preventDefault();
-      if (root.dataset.state === "open") {
-        close();
-      } else {
-        open();
-      }
+    if (e.defaultPrevented || !root.isConnected || root.hasAttribute("data-no-shortcut")) return;
+    if (!(e.metaKey || e.ctrlKey) || e.altKey || e.shiftKey || e.repeat || e.isComposing) return;
+    const k = (e.key || "").toLowerCase();
+    if (k !== "k" && (/^[a-z]$/.test(k) || e.code !== "KeyK")) return;
+    e.preventDefault();
+    if (root.dataset.state === "open") {
+      close();
+    } else {
+      open();
     }
   }
 
@@ -4062,8 +4172,10 @@ function createCommandPalette(root) {
 function createContextMenu(root) {
   if (root._faqirContextMenu) return root._faqirContextMenu;
 
-  const target = root.querySelector("[data-part='target']");
-  const menu = root.querySelector("[data-part='menu']");
+  // Matched by owner: a dropdown inside the target has a `menu` part too, and
+  // it comes first in document order.
+  const [target] = ownParts(root, "target");
+  const [menu] = ownParts(root, "menu");
 
   // Same as `dropdown`: a missing part must name itself rather than throwing a
   // TypeError out of `createMenuNavigation(null)`. [W3-2]
@@ -4367,17 +4479,24 @@ function createDialog(root) {
   // Prevent double-init
   if (root._faqirDialog) return root._faqirDialog;
 
-  const trigger = root.querySelector("[data-part='trigger']");
-  const overlay = root.querySelector("[data-part='overlay']");
-  const panel = root.querySelector("[data-part='panel']");
-  const closeButtons = root.querySelectorAll("[data-part='close']");
-  const confirmButtons = root.querySelectorAll("[data-part='confirm']");
-  const cancelButtons = root.querySelectorAll("[data-part='cancel']");
+  // Overlay and panel are direct children. Trigger and actions may be wrapped
+  // in layout primitives, so they are matched by owner: a popover's close
+  // button inside the panel belongs to the popover and must not close this.
+  const [trigger] = ownParts(root, "trigger");
+  const overlay = root.querySelector(":scope > [data-part='overlay']");
+  const panel = root.querySelector(":scope > [data-part='panel']");
+  const closeButtons = ownParts(root, "close");
+  const confirmButtons = ownParts(root, "confirm");
+  const cancelButtons = ownParts(root, "cancel");
 
   // The role is the seam between `dialog` and `alert-dialog` — read it from the
   // markup so a single controller serves both recipes.
   const isAlert = !!panel && panel.getAttribute("role") === "alertdialog";
 
+  // `panel.focus()` on open does nothing without a tabindex: focus stayed on
+  // `body`, out of reach of the trap and the root's Escape listener.
+  if (panel && !panel.hasAttribute("tabindex")) panel.setAttribute("tabindex", "-1");
+
   let focusCleanup = null;
   let previouslyFocused = null;
 
@@ -4400,10 +4519,7 @@ function createDialog(root) {
   /** On open, focus the least-destructive action for an alert, else the panel. */
   function focusInitial() {
     if (isAlert) {
-      const target =
-        root.querySelector("[data-part='cancel']") ||
-        root.querySelector("[data-part='close']") ||
-        panel;
+      const target = cancelButtons[0] || closeButtons[0] || panel;
       target?.focus?.();
     } else {
       panel?.focus?.();
@@ -4437,12 +4553,13 @@ function createDialog(root) {
 
     const onEnd = () => {
       cancelExitWait = null;
+      const active = document.activeElement;
       root.dataset.state = "closed";
       overlay.hidden = true;
       panel.hidden = true;
       if (focusCleanup) focusCleanup();
       focusCleanup = null;
-      previouslyFocused?.focus();
+      returnFocus(root, previouslyFocused, active);
     };
 
     // The panel's own exit motion. A footer button's `background` transitionend
@@ -4575,10 +4692,16 @@ function createDrawer(root) {
   // Prevent double-init
   if (root._faqirDrawer) return root._faqirDrawer;
 
-  const trigger = root.querySelector("[data-part='trigger']");
-  const overlay = root.querySelector("[data-part='overlay']");
-  const panel = root.querySelector("[data-part='panel']");
-  const closeButtons = root.querySelectorAll("[data-part='close']");
+  // Overlay and panel are direct children; trigger and close buttons are
+  // matched by owner, so a nested component's close leaves this one alone.
+  const [trigger] = ownParts(root, "trigger");
+  const overlay = root.querySelector(":scope > [data-part='overlay']");
+  const panel = root.querySelector(":scope > [data-part='panel']");
+  const closeButtons = ownParts(root, "close");
+
+  // `panel.focus()` on open does nothing without a tabindex: focus stayed on
+  // `body`, out of reach of the trap and the root's Escape listener.
+  if (panel && !panel.hasAttribute("tabindex")) panel.setAttribute("tabindex", "-1");
 
   let focusCleanup = null;
   let previouslyFocused = null;
@@ -4622,13 +4745,14 @@ function createDrawer(root) {
 
     const onEnd = () => {
       cancelExitWait = null;
+      const active = document.activeElement;
       root.dataset.state = "closed";
       overlay.hidden = true;
       panel.hidden = true;
       unlockScroll();
       if (focusCleanup) focusCleanup();
       focusCleanup = null;
-      previouslyFocused?.focus();
+      returnFocus(root, previouslyFocused, active);
     };
 
     // The panel's OWN `transform` — not the close button's `background`, which
@@ -6103,7 +6227,8 @@ function createPopover(root) {
 
   const trigger = root.querySelector("[data-part='trigger']");
   const content = root.querySelector("[data-part='content']");
-  const closeBtn = root.querySelector("[data-part='close']");
+  // Not a close button belonging to a dialog or popover inside the content.
+  const [closeBtn] = ownParts(root, "close");
 
   let outsideClickCleanup = null;
 
@@ -6995,10 +7120,16 @@ function createSheet(root) {
   // Prevent double-init
   if (root._faqirSheet) return root._faqirSheet;
 
-  const trigger = root.querySelector("[data-part='trigger']");
-  const overlay = root.querySelector("[data-part='overlay']");
-  const panel = root.querySelector("[data-part='panel']");
-  const closeButtons = root.querySelectorAll("[data-part='close']");
+  // Overlay and panel are direct children; trigger and close buttons are
+  // matched by owner, so a nested component's close leaves this one alone.
+  const [trigger] = ownParts(root, "trigger");
+  const overlay = root.querySelector(":scope > [data-part='overlay']");
+  const panel = root.querySelector(":scope > [data-part='panel']");
+  const closeButtons = ownParts(root, "close");
+
+  // `panel.focus()` on open does nothing without a tabindex: focus stayed on
+  // `body`, out of reach of the trap and the root's Escape listener.
+  if (panel && !panel.hasAttribute("tabindex")) panel.setAttribute("tabindex", "-1");
 
   let focusCleanup = null;
   let previouslyFocused = null;
@@ -7042,13 +7173,14 @@ function createSheet(root) {
 
     const onEnd = () => {
       cancelExitWait = null;
+      const active = document.activeElement;
       root.dataset.state = "closed";
       overlay.hidden = true;
       panel.hidden = true;
       unlockScroll();
       if (focusCleanup) focusCleanup();
       focusCleanup = null;
-      previouslyFocused?.focus();
+      returnFocus(root, previouslyFocused, active);
     };
 
     // The panel's OWN `transform` — not a close button's `background`, which
@@ -7158,12 +7290,14 @@ function createSidebar(root) {
   // Prevent double-init.
   if (root._faqirSidebar) return root._faqirSidebar;
 
-  const overlay = root.querySelector("[data-part='overlay']");
-  const panel = root.querySelector("[data-part='panel']") || root;
+  const overlay = root.querySelector(":scope > [data-part='overlay']");
+  const panel = root.querySelector(":scope > [data-part='panel']") || root;
 
-  // Toggle buttons: any `[data-part='trigger']` inside the sidebar, plus external
-  // triggers in the app shell that point at this sidebar by id. Both call toggle().
-  const internalTriggers = [...root.querySelectorAll("[data-part='trigger']")];
+  // Toggle buttons: the sidebar's own `[data-part='trigger']`s, plus external
+  // triggers in the app shell that point at this sidebar by id. Both call
+  // toggle(). A dropdown's trigger in the footer belongs to the dropdown: it
+  // used to have its aria-expanded forced and its click rail the sidebar.
+  const internalTriggers = ownParts(root, "trigger");
   const externalTriggers = root.id
     ? [...document.querySelectorAll(`[data-sidebar-toggle="${root.id}"]`)]
     : [];
@@ -7773,10 +7907,13 @@ function createTable(root) {
   // Prevent double-init
   if (root._faqirTable) return root._faqirTable;
 
+  // A table nested in a detail row keeps its own parts and events: `tbody`
+  // contains it, so every deep lookup and delegated handler checks `mine`.
+  const mine = (el) => el.closest("[data-ui='table']") === root;
   const table = root.querySelector("[data-part='table']");
   const thead = root.querySelector("[data-part='thead']");
   const tbody = root.querySelector("[data-part='tbody']");
-  const tfoot = root.querySelector("[data-part='tfoot']");
+  const tfoot = [...root.querySelectorAll("[data-part='tfoot']")].find(mine);
   const headerCheckbox = thead?.querySelector("[data-part='checkbox']");
 
   // ── Options (read once from the root's opt-in attributes) ──
@@ -7996,23 +8133,14 @@ function createTable(root) {
 
   // ── Intl formatting ──
   function formatValue(n, fmt) {
+    const o =
+      fmt === "currency"
+        ? { style: fmt, currency: opts.currency, currencySign: accounting ? "accounting" : "standard" }
+        : fmt === "percent"
+          ? { style: fmt, maximumFractionDigits: 2 }
+          : fmt === "number" && { maximumFractionDigits: 2 };
     try {
-      if (fmt === "currency") {
-        return new Intl.NumberFormat(opts.locale, {
-          style: "currency",
-          currency: opts.currency,
-          currencySign: accounting ? "accounting" : "standard",
-        }).format(n);
-      }
-      if (fmt === "percent") {
-        return new Intl.NumberFormat(opts.locale, {
-          style: "percent",
-          maximumFractionDigits: 2,
-        }).format(n / 100);
-      }
-      if (fmt === "number") {
-        return new Intl.NumberFormat(opts.locale, { maximumFractionDigits: 2 }).format(n);
-      }
+      if (o) return new Intl.NumberFormat(opts.locale, o).format(fmt === "percent" ? n / 100 : n);
     } catch {
       /* unknown locale/currency — fall through to raw */
     }
@@ -8253,13 +8381,17 @@ function createTable(root) {
     refreshStripes();
   }
 
+  function sortChanged() {
+    applySorts();
+    emit("sort", { sorts: sorts.map((s) => ({ column: s.index, direction: s.dir })) });
+    scheduleStateSave();
+  }
+
   /** Legacy API: sort one column with an explicit direction. */
   function sort(columnIndex, direction) {
     if (!tbody || bodyRows().length === 0) return;
     sorts = [{ index: columnIndex, dir: direction }];
-    applySorts();
-    emit("sort", { sorts: sorts.map((s) => ({ column: s.index, direction: s.dir })) });
-    scheduleStateSave();
+    sortChanged();
   }
 
   /** Multi-sort API: sortBy([{ column, direction }...]). */
@@ -8271,17 +8403,13 @@ function createTable(root) {
         dir: s.direction || s.dir || "ascending",
       }))
       .filter((s) => Number.isInteger(s.index) && s.index >= 0 && s.index < columnCount());
-    applySorts();
-    emit("sort", { sorts: sorts.map((s) => ({ column: s.index, direction: s.dir })) });
-    scheduleStateSave();
+    sortChanged();
   }
 
   function clearSort() {
     if (!sorts.length) return;
     sorts = [];
-    applySorts();
-    emit("sort", { sorts: [] });
-    scheduleStateSave();
+    sortChanged();
   }
 
   function handleSortRequest(idx, additive) {
@@ -8298,9 +8426,7 @@ function createTable(root) {
     } else {
       sorts = dir === null ? [] : [{ index: idx, dir }];
     }
-    applySorts();
-    emit("sort", { sorts: sorts.map((s) => ({ column: s.index, direction: s.dir })) });
-    scheduleStateSave();
+    sortChanged();
   }
 
   // ── Selection ──
@@ -8316,8 +8442,7 @@ function createTable(root) {
     const row = rows[index];
     setRowSelected(row, !row.hasAttribute("data-selected"));
     lastSelectedIndex = index;
-    updateHeaderCheckbox();
-    emit("selection-change", { selected: getSelected() });
+    selectionChanged();
   }
 
   function selectAll() {
@@ -8326,15 +8451,13 @@ function createTable(root) {
       if (filtered && row.hasAttribute("data-filtered")) continue;
       setRowSelected(row, true);
     }
-    updateHeaderCheckbox();
-    emit("selection-change", { selected: getSelected() });
+    selectionChanged();
   }
 
   function deselectAll() {
     for (const row of bodyRows()) setRowSelected(row, false);
     lastSelectedIndex = -1;
-    updateHeaderCheckbox();
-    emit("selection-change", { selected: getSelected() });
+    selectionChanged();
   }
 
   function getSelected() {
@@ -8351,23 +8474,19 @@ function createTable(root) {
     for (let i = start; i <= end; i++) {
       if (i >= 0 && i < rows.length && isRowVisible(rows[i])) setRowSelected(rows[i], true);
     }
+  }
+
+  function selectionChanged() {
     updateHeaderCheckbox();
+    emit("selection-change", { selected: getSelected() });
   }
 
   function updateHeaderCheckbox() {
     if (!headerCheckbox) return;
     const rows = visibleBodyRows();
-    const selected = rows.filter((r) => r.hasAttribute("data-selected"));
-    if (selected.length === 0) {
-      headerCheckbox.checked = false;
-      headerCheckbox.indeterminate = false;
-    } else if (selected.length === rows.length) {
-      headerCheckbox.checked = true;
-      headerCheckbox.indeterminate = false;
-    } else {
-      headerCheckbox.checked = false;
-      headerCheckbox.indeterminate = true;
-    }
+    const n = rows.filter((r) => r.hasAttribute("data-selected")).length;
+    headerCheckbox.checked = n > 0 && n === rows.length;
+    headerCheckbox.indeterminate = n > 0 && n < rows.length;
   }
 
   // ── Filtering ──
@@ -8456,6 +8575,7 @@ function createTable(root) {
     refreshStripes();
     updateHeaderCheckbox();
     computeAggregates();
+    setupNavigability();
     emit("filter", { query: globalFilter, visible, total: rows.length });
     scheduleStateSave();
   }
@@ -8476,7 +8596,7 @@ function createTable(root) {
     applyFilters();
   }
   function syncFilterInputs() {
-    const g = root.querySelector("[data-part='filter']");
+    const g = [...root.querySelectorAll("[data-part='filter']")].find(mine);
     if (g && g.value !== globalFilter) g.value = globalFilter;
     const fr = filterRowEl();
     if (!fr) return;
@@ -8499,6 +8619,7 @@ function createTable(root) {
     for (const m of groupMembers(gh)) toggleAttr(m, "data-collapsed", !expand);
     refreshStripes();
     updateHeaderCheckbox();
+    setupNavigability();
     emit("group-toggle", { group: gh, expanded: expand });
   }
 
@@ -8527,6 +8648,7 @@ function createTable(root) {
     }
     refreshStripes();
     updateHeaderCheckbox();
+    setupNavigability();
     emit("tree-toggle", { row, expanded: expand });
   }
 
@@ -8541,20 +8663,15 @@ function createTable(root) {
     emit("row-expand", { row, detail, expanded: expand });
   }
 
-  function expandAll() {
+  function setAllExpanded(expand) {
     mutedRun(() => {
-      for (const gh of groupHeaders()) toggleGroup(gh, true);
-      if (opts.tree) for (const r of bodyRows()) if (isTreeParent(r)) toggleRow(r, true);
-    });
-    refreshStripes();
-  }
-  function collapseAll() {
-    mutedRun(() => {
-      for (const gh of groupHeaders()) toggleGroup(gh, false);
-      if (opts.tree) for (const r of bodyRows()) if (isTreeParent(r)) toggleRow(r, false);
+      for (const gh of groupHeaders()) toggleGroup(gh, expand);
+      if (opts.tree) for (const r of bodyRows()) if (isTreeParent(r)) toggleRow(r, expand);
     });
     refreshStripes();
   }
+  const expandAll = () => setAllExpanded(true);
+  const collapseAll = () => setAllExpanded(false);
 
   // ── Aggregates (tfoot, group headers, tree parents) ──
   function writeAggregate(cell, rows, ownIndex) {
@@ -8589,7 +8706,7 @@ function createTable(root) {
     const fmt =
       fn === "count"
         ? cell.getAttribute("data-format")
-        : cell.getAttribute("data-format") || headerCells()[col]?.getAttribute("data-format") || "number";
+        : cellFormatOf(cell, col) || "number";
     cell.textContent = fmt ? formatValue(out, fmt) : String(out);
     applyNegativeFlag(cell);
   }
@@ -8773,17 +8890,15 @@ function createTable(root) {
 
   function onEditorKeydown(e) {
     if (!editing) return;
+    e.stopPropagation(); // keep grid navigation away from typing
     if (e.key === "Enter") {
       e.preventDefault();
-      e.stopPropagation();
       commitEdit(true);
     } else if (e.key === "Escape") {
       e.preventDefault();
-      e.stopPropagation();
       cancelEdit(true);
     } else if (e.key === "Tab") {
       e.preventDefault();
-      e.stopPropagation();
       const from = editing.cell;
       if (commitEdit()) {
         const next = nextEditableCell(from, e.shiftKey ? -1 : 1);
@@ -8791,7 +8906,6 @@ function createTable(root) {
       }
     } else {
       e.target.removeAttribute("data-invalid");
-      e.stopPropagation(); // keep grid navigation away from typing
     }
   }
   function onEditorBlur(e) {
@@ -8832,6 +8946,7 @@ function createTable(root) {
     if (!th) return;
     forEachColumnCell(i, (cell) => toggleAttr(cell, "data-col-hidden", hidden));
     refreshPins();
+    setupNavigability();
     emit("col-visibility", { column: i, hidden: !!hidden });
     scheduleStateSave();
   }
@@ -8943,14 +9058,11 @@ function createTable(root) {
   }
 
   function elementAt(e) {
-    if (document.elementFromPoint) {
-      try {
-        return document.elementFromPoint(e.clientX, e.clientY);
-      } catch {
-        return null;
-      }
+    try {
+      return document.elementFromPoint(e.clientX, e.clientY);
+    } catch {
+      return null; // elementFromPoint missing or throwing (headless)
     }
-    return null;
   }
 
   function resolveRowAt(e) {
@@ -8959,16 +9071,13 @@ function createTable(root) {
     return row && tbody?.contains(row) ? row : null;
   }
 
-  function dropPos(e, el) {
+  /** "before"/"after" the pointer's half of el: vertical for rows, horizontal (RTL-aware) for columns. */
+  function dropPos(e, el, horizontal) {
     const rect = el.getBoundingClientRect?.();
-    if (!rect || !rect.height) return "after";
-    return e.clientY < rect.top + rect.height / 2 ? "before" : "after";
-  }
-  function dropPosX(e, el) {
-    const rect = el.getBoundingClientRect?.();
-    if (!rect || !rect.width) return "after";
-    const before = e.clientX < rect.left + rect.width / 2;
-    return before !== isRTL ? "before" : "after";
+    const size = rect && (horizontal ? rect.width : rect.height);
+    if (!size) return "after";
+    const before = horizontal ? e.clientX < rect.left + size / 2 !== isRTL : e.clientY < rect.top + size / 2;
+    return before ? "before" : "after";
   }
 
   function bindDocDrag() {
@@ -9068,7 +9177,7 @@ function createTable(root) {
       if (!th) th = e.target?.closest?.("[data-part='th']");
       if (!th || th === drag.th || !headerRowEl()?.contains(th)) return;
       th.setAttribute("data-drop-target", "");
-      th.setAttribute("data-drop-pos", dropPosX(e, th));
+      th.setAttribute("data-drop-pos", dropPos(e, th, true));
     }
   }
 
@@ -9290,15 +9399,11 @@ function createTable(root) {
       existing.remove();
       existing = null;
     }
-    let el;
-    if (isParent) {
-      el = document.createElement("button");
-      el.type = "button";
-      el.setAttribute("data-part", "expander");
-      el.setAttribute("aria-label", "Toggle");
-    } else {
-      el = document.createElement("span");
-      el.setAttribute("data-part", "expander");
+    const el = document.createElement(isParent ? "button" : "span");
+    if (isParent) el.type = "button";
+    el.setAttribute("data-part", "expander");
+    if (isParent) el.setAttribute("aria-label", "Toggle");
+    else {
       el.setAttribute("data-leaf", "");
       el.setAttribute("aria-hidden", "true");
     }
@@ -9394,14 +9499,35 @@ function createTable(root) {
     return rows;
   }
 
+  // APG grid: links, buttons and fields inside a navigable grid's cells leave the
+  // Tab order (Enter/F2 reaches them, Escape comes back). The table's own controls
+  // stay focusable. destroy() puts the original tabindex back.
+  const demoted = new WeakMap();
+  const cellControls = (cell) =>
+    [...cell.querySelectorAll("input,select,textarea,button,a[href],[tabindex]")].filter(
+      (el) => mine(el) && !el.closest("[data-part='checkbox'],[data-part='drag-handle'],[data-part='expander'],[data-part='row-toggle']")
+    );
+
+  // Re-run after anything that can take the Tab stop away (refresh, filter,
+  // collapse, column hide): only the Tab stop moves, never focus.
   function setupNavigability() {
     if (opts.navigable) {
+      const rows = navMatrix();
+      // A stale stop — its row removed, filtered or collapsed, or its column hidden —
+      // is dropped so the first visible cell takes over.
+      if (activeCell && (!rows.includes(activeCell.parentElement) || activeCell.hasAttribute("data-col-hidden"))) {
+        activeCell.setAttribute("tabindex", "-1");
+        activeCell = null;
+      }
       let first = null;
-      for (const row of navMatrix()) {
+      for (const row of rows) {
         for (const cell of cellsOf(row)) {
-          if (cell.hasAttribute("data-col-hidden")) continue;
-          if (!first && !activeCell) first = cell;
+          if (!first && !activeCell && !cell.hasAttribute("data-col-hidden")) first = cell;
           cell.setAttribute("tabindex", cell === (activeCell || first) ? "0" : "-1");
+          for (const el of cellControls(cell)) {
+            if (!demoted.has(el)) demoted.set(el, el.getAttribute("tabindex"));
+            el.setAttribute("tabindex", "-1");
+          }
         }
       }
       if (!activeCell) activeCell = first;
@@ -9416,11 +9542,7 @@ function createTable(root) {
     if (activeCell && activeCell !== cell) activeCell.setAttribute("tabindex", "-1");
     activeCell = cell;
     cell.setAttribute("tabindex", "0");
-    try {
-      cell.focus();
-    } catch {
-      /* unfocusable */
-    }
+    cell.focus();
   }
 
   function moveFocus(rowDelta, colDelta, edge) {
@@ -9460,7 +9582,7 @@ function createTable(root) {
     if (!opts.navigable) return;
     const cell = e.target.closest("[data-part='td'],[data-part='th']");
     if (!cell || cell === activeCell || !root.contains(cell)) return;
-    if (e.target !== cell) return; // focus landed on inner control, not the cell
+    if (e.target !== cell && !demoted.has(e.target)) return; // the table's own control, not the cell
     if (activeCell) activeCell.setAttribute("tabindex", "-1");
     activeCell = cell;
     cell.setAttribute("tabindex", "0");
@@ -9495,13 +9617,12 @@ function createTable(root) {
     if (e.shiftKey && lastSelectedIndex >= 0) {
       e.preventDefault();
       selectRange(lastSelectedIndex, index);
-      emit("selection-change", { selected: getSelected() });
+      selectionChanged();
       return;
     }
     toggleAttr(row, "data-selected", checkbox.checked);
     lastSelectedIndex = index;
-    updateHeaderCheckbox();
-    emit("selection-change", { selected: getSelected() });
+    selectionChanged();
   }
 
   function onRootClick(e) {
@@ -9541,7 +9662,7 @@ function createTable(root) {
     if (index < 0) return;
     if (e.shiftKey && lastSelectedIndex >= 0) {
       selectRange(lastSelectedIndex, index);
-      emit("selection-change", { selected: getSelected() });
+      selectionChanged();
       return;
     }
     if (opts.selectable != null) {
@@ -9553,8 +9674,7 @@ function createTable(root) {
         setRowSelected(row, !row.hasAttribute("data-selected"));
       }
       lastSelectedIndex = index;
-      updateHeaderCheckbox();
-      emit("selection-change", { selected: getSelected() });
+      selectionChanged();
     }
   }
 
@@ -9614,10 +9734,18 @@ function createTable(root) {
       return;
     }
 
+    const cell = target.closest?.("[data-part='td'],[data-part='th']");
+
+    // Escape in a cell's control returns to the cell.
+    if (e.key === "Escape" && demoted.has(target)) {
+      e.preventDefault();
+      focusCell(cell);
+      return;
+    }
+
     // Never hijack typing or native control activation (buttons own Enter/Space via click).
     if (target.closest?.("input,select,textarea,button,a")) return;
 
-    const cell = target.closest?.("[data-part='td'],[data-part='th']");
     const inHeader = cell && thead?.contains(cell);
 
     // Sortable header keyboard activation.
@@ -9708,6 +9836,12 @@ function createTable(root) {
         if (isCellEditable(cell)) {
           e.preventDefault();
           startEdit(cell);
+          return;
+        }
+        const ctl = cellControls(cell)[0];
+        if (ctl) {
+          e.preventDefault();
+          ctl.focus();
         }
         return;
       }
@@ -9755,7 +9889,7 @@ function createTable(root) {
 
   function measureSticky() {
     const needsHeaderVar =
-      root.hasAttribute("data-sticky-header") || !!tbody?.querySelector("[data-part='tr'][data-pin='top']");
+      root.hasAttribute("data-sticky-header") || bodyRows().some((r) => r.dataset.pin === "top");
     if (needsHeaderVar && thead && thead.offsetHeight) {
       root.style.setProperty("--table-thead-h", thead.offsetHeight + "px");
     }
@@ -9794,6 +9928,12 @@ function createTable(root) {
     cleanups.length = 0;
     observer?.disconnect();
     observer = null;
+    for (const el of root.querySelectorAll("[tabindex]")) {
+      if (demoted.has(el)) {
+        const t = demoted.get(el);
+        t == null ? el.removeAttribute("tabindex") : el.setAttribute("tabindex", t);
+      }
+    }
     for (const t of timers) clearTimeout(t);
     timers.clear();
     clearTimeout(saveTimer);
@@ -9803,13 +9943,14 @@ function createTable(root) {
   // ── Wire up ──
   if (thead) on(thead, "click", onHeaderClick);
   if (headerCheckbox) on(headerCheckbox, "change", onHeaderCheckboxChange);
-  if (tbody) on(tbody, "change", onRowCheckboxChange);
-  on(root, "click", onRootClick);
-  on(root, "dblclick", onDblClick);
-  on(root, "keydown", onKeydown);
-  on(root, "input", onFilterInput);
-  on(root, "pointerdown", onPointerDown);
-  on(root, "focusin", onFocusIn);
+  const onOwn = (target, ev, fn) => on(target, ev, (e) => mine(e.target) && fn(e));
+  if (tbody) onOwn(tbody, "change", onRowCheckboxChange);
+  onOwn(root, "click", onRootClick);
+  onOwn(root, "dblclick", onDblClick);
+  onOwn(root, "keydown", onKeydown);
+  onOwn(root, "input", onFilterInput);
+  onOwn(root, "pointerdown", onPointerDown);
+  onOwn(root, "focusin", onFocusIn);
   if (typeof window !== "undefined") {
     let resizeTimer = null;
     const onWinResize = () => {
@@ -9894,9 +10035,14 @@ function createTabs(root) {
   // Prevent double-init
   if (root._faqirTabs) return root._faqirTabs;
 
-  const list = root.querySelector("[data-part='list']");
-  const triggers = () => [...root.querySelectorAll("[data-part='trigger']")];
-  const panels = () => [...root.querySelectorAll("[data-part='panel']")];
+  // Direct children only: a component nested in a panel (a collapsible's
+  // summary, another tabs) has parts of the same names, and a deep query took
+  // them for this component's tabs and shifted the trigger↔panel pairing.
+  const list = root.querySelector(":scope > [data-part='list']");
+  const triggers = () => [
+    ...root.querySelectorAll(":scope > [data-part='list'] > [data-part='trigger']"),
+  ];
+  const panels = () => [...root.querySelectorAll(":scope > [data-part='panel']")];
 
   function activate(index) {
     const allTriggers = triggers();
@@ -10565,8 +10711,11 @@ function createToastContainer(root) {
  * exclusivity when the controls are used standalone (no `l-model`), the
  * `[data-state]` styling hook, and a `faqir:change` notification.
  *
- * Every state mutation funnels through a native `change` event on the affected
+ * Every user mutation funnels through a native `change` event on the affected
  * input, so the engine's `l-model` listener and this controller stay in lockstep.
+ * Store-driven `l-model` writes arrive as the engine's `faqir:model` event (and
+ * a form `reset`); both re-sync state without a `faqir:change`. A plain script
+ * write (`input.checked = x`) is silent and is not observed — use `setValue()`.
  */
 function createToggleGroup(root) {
   // Prevent double-init.
@@ -10727,13 +10876,23 @@ function createToggleGroup(root) {
     if (el) select(el);
   }
 
+  // A store-driven `l-model` write sets `.checked` silently and announces it
+  // with `faqir:model`; follow it without re-emitting `faqir:change` (the user
+  // did not act). A form reset restores defaults silently the same way.
+  const form = root.closest("form");
+  const onReset = () => setTimeout(syncState, 0);
+
   root.addEventListener("change", onChange);
+  root.addEventListener("faqir:model", syncState);
   root.addEventListener("keydown", onKeyDown);
+  if (form) form.addEventListener("reset", onReset);
   syncState();
 
   function destroy() {
     root.removeEventListener("change", onChange);
+    root.removeEventListener("faqir:model", syncState);
     root.removeEventListener("keydown", onKeyDown);
+    if (form) form.removeEventListener("reset", onReset);
     delete root._faqirToggleGroup;
   }
 
@@ -10754,7 +10913,8 @@ function createTooltip(root) {
   if (root._faqirTooltip) return root._faqirTooltip;
 
   const trigger = root.querySelector("[data-part='trigger']");
-  const content = root.querySelector("[data-part='content']");
+  // Not the content of a collapsible or popover used as the trigger.
+  const [content] = ownParts(root, "content");
 
   let showTimer = null;
   let hideTimer = null;
@@ -11352,7 +11512,9 @@ function createTreeView(root) {
   /** One value, deep-copied into something plain, finite and printable. */
   function snapshotValue(value, stack, depth) {
     if (typeof value === 'function') {
-      return '[Function' + (value.name ? ' ' + value.name : '') + ']';
+      // Scope methods are bound [1.1F-05]; report the name the author wrote.
+      var name = String(value.name || '').replace(/^bound /, '');
+      return '[Function' + (name ? ' ' + name : '') + ']';
     }
     if (value === null || typeof value !== 'object') return value;
     if (value.nodeType === 1 && value.tagName) {
@@ -11596,22 +11758,35 @@ function createTreeView(root) {
     }
   }
 
+  // Every controller inside `root` (a document or an element), `root` included.
+  // Controllers are double-init guarded, so a second call is a no-op.
+  function startControllers(root) {
+    var own = root.getAttribute && root.getAttribute('data-ui');
+    if (own && controllerRegistry[own]) initController(own, root);
+    var names = Object.keys(controllerRegistry);
+    for (var n = 0; n < names.length; n++) {
+      var els = root.querySelectorAll('[data-ui="' + names[n] + '"]');
+      for (var e = 0; e < els.length; e++) initController(names[n], els[e]);
+    }
+  }
+
+  // `Faqir.initTree` — the same order bootstrap uses: a connected subtree's
+  // controllers start first, so its `l-init` / first `l-effect` reach them
+  // through `$ui`. A detached subtree's controllers wait for the
+  // MutationObserver, as before. [1.1F-03]
+  function publicInitTree(root, parentScope) {
+    if (root.isConnected) startControllers(root);
+    initTree(root, parentScope);
+  }
+
   // The document's one MutationObserver, or null before the first bootstrap,
   // and the <body> it is currently watching.
   var mutationObserver = null;
   var observedBody = null;
 
   function bootstrap() {
-    injectCloakStyle();
-
     // Auto-init controllers for all [data-ui] elements
-    var names = Object.keys(controllerRegistry);
-    for (var n = 0; n < names.length; n++) {
-      var els = document.querySelectorAll('[data-ui="' + names[n] + '"]');
-      for (var e = 0; e < els.length; e++) {
-        initController(names[n], els[e]);
-      }
-    }
+    startControllers(document);
 
     // Find all scope roots.
     // l-data elements always create a scope.
@@ -11684,12 +11859,7 @@ function createTreeView(root) {
     // after the first sweep ran and before the MutationObserver below starts.
     // Controllers are double-init guarded, so re-invoking is a no-op for
     // elements initialized by the first sweep.
-    for (var n2 = 0; n2 < names.length; n2++) {
-      var els2 = document.querySelectorAll('[data-ui="' + names[n2] + '"]');
-      for (var e2 = 0; e2 < els2.length; e2++) {
-        initController(names[n2], els2[e2]);
-      }
-    }
+    startControllers(document);
 
     removeCloaks();
 
@@ -11715,14 +11885,14 @@ function createTreeView(root) {
           if (node.nodeType !== 1) continue;
 
           // Content that arrives after bootstrap has already bound by the time
-          // it is here; leaving `l-cloak` on it means the injected rule hides
-          // it forever. [W3-1]
+          // it is here; leaving `l-cloak` on it means the cloak rule hides it
+          // forever. [W3-1]
           removeCloaks(node);
 
-          var uiName = node.getAttribute ? node.getAttribute('data-ui') : null;
-          if (uiName && controllerRegistry[uiName]) {
-            initController(uiName, node);
-          }
+          // Controllers first — the node's own and every one inside it — so
+          // the `l-init` / first `l-effect` that `initTree` runs below reach
+          // them through `$ui`. They used to start after it. [1.1F-03]
+          startControllers(node);
 
           // Already initialized — by `Faqir.start()` / `Faqir.initTree()` in the
           // same task that inserted it (the record is only delivered on the
@@ -11739,11 +11909,6 @@ function createTreeView(root) {
           }
 
           if (node.querySelectorAll) {
-            var cNames = Object.keys(controllerRegistry);
-            for (var cn = 0; cn < cNames.length; cn++) {
-              var cEls = node.querySelectorAll('[data-ui="' + cNames[cn] + '"]');
-              for (var ce = 0; ce < cEls.length; ce++) initController(cNames[cn], cEls[ce]);
-            }
             var scopeEls = node.querySelectorAll('[l-data]');
             for (var se = 0; se < scopeEls.length; se++) {
               if (!scopeEls[se].__faqirScope) {
@@ -11814,7 +11979,7 @@ function createTreeView(root) {
     // one time it was hand-maintained (0.1.0 in a package versioned 0.2.4), so
     // the built artifact is now the only place the number is authoritative and
     // the build fails if this marker goes missing.
-    version: '1.1.1', // @faqir:version
+    version: '1.1.2', // @faqir:version
     reactive: reactive,
     effect: effect,
     batch: batch,
@@ -11825,11 +11990,14 @@ function createTreeView(root) {
     data: function(name, factory) { dataRegistry.set(name, factory); },
     store: function(name, obj) { globalStores[name] = reactive(obj); },
     directive: function(name, handler) { customDirectives.set(name, handler); },
-    magic: function(name, callback) { customMagics.set(name, callback); },
+    magic: function(name, callback) {
+      if (name === 'this') throw new Error('[Faqir] "this" is reserved: $this is the directive element');
+      customMagics.set(name, callback);
+    },
     plugin: function(fn) { fn(Faqir); },
     controller: function(name, factory) { controllerRegistry[name] = factory; },
     start: bootstrap,
-    initTree: initTree,
+    initTree: publicInitTree,
     // Snapshot of Faqir's view of one element — scope, directives, controller,
     // protocol attributes. [0.7-12]
     inspect: inspect,