@supersoniks/concorde 5.0.2 → 5.0.4

package/docs/svg/regular/plane.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M576 256C576 305 502.1 336 464.2 336H382.2L282.4 496C276.4 506 266.4 512 254.4 512H189.5C179.5 512 169.5 508 163.5 500C157.6 492 155.6 480.1 158.6 471L201.5 336H152.5L113.6 388C107.6 396 98.61 400 88.62 400H31.7C22.72 400 12.73 396 6.74 388C.7485 380-1.248 370 1.747 360L31.7 256L.7488 152C-1.248 143 .7488 133 6.74 125C12.73 117 22.72 112 31.7 112H88.62C98.61 112 107.6 117 113.6 125L152.5 176H201.5L158.6 41C155.6 32 157.6 21 163.5 13C169.5 5 179.5 0 189.5 0H254.4C265.4 0 277.4 7 281.4 16L381.2 176H463.2C502.1 176 576 208 576 256H576zM527.1 256C525.1 246 489.1 224 463.2 224H355.3L245.4 48H211.5L266.4 224H128.6L80.63 160H53.67L81.63 256L53.67 352H80.63L128.6 288H266.4L211.5 464H245.4L355.3 288H463.2C490.1 288 526.1 267 527.1 256V256z"/></svg>

package/docs/svg/solid/plane.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64l-116.6 0L265.2 495.9c-5.7 10-16.3 16.1-27.8 16.1l-56.2 0c-10.6 0-18.3-10.2-15.4-20.4l49-171.6L112 320 68.8 377.6c-3 4-7.8 6.4-12.8 6.4l-42 0c-7.8 0-14-6.3-14-14c0-1.3 .2-2.6 .5-3.9L32 256 .5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-7.8 6.3-14 14-14l42 0c5 0 9.8 2.4 12.8 6.4L112 192l102.9 0-49-171.6C162.9 10.2 170.6 0 181.2 0l56.2 0c11.5 0 22.1 6.2 27.8 16.1L365.7 192l116.6 0z"/></svg>

package/gitlab/job_github_mirror.sh

@@ -0,0 +1,39 @@
+#!/usr/bin/env bash
+# Pousse un export filtré (lib publique) vers GitHub.
+# Remplace le push mirror « tout le dépôt » : pas de doc, pas de captcha, pas de gitlab/.
+#
+# Variables CI requises :
+#   GITHUB_REPO_URL  — ex. https://github.com/supersoniks/concorde.git
+#   GITHUB_TOKEN     — PAT avec scope repo (masqué)
+#
+# Usage manuel (hors CI) :
+#   GITHUB_REPO_URL=https://github.com/supersoniks/concorde.git \
+#   GITHUB_TOKEN=ghp_… \
+#   bash gitlab/job_github_mirror.sh
+#
+set -euo pipefail
+
+EXPORT_DIR="${CI_PROJECT_DIR:-$(cd "$(dirname "$0")/.." && pwd)}/.github-export"
+BRANCH="${GITHUB_BRANCH:-master}"
+
+if [[ -z "${GITHUB_REPO_URL:-}" || -z "${GITHUB_TOKEN:-}" ]]; then
+  echo "❌ GITHUB_REPO_URL et GITHUB_TOKEN sont requis."
+  exit 1
+fi
+
+echo "=== Export filtré ==="
+node "${CI_PROJECT_DIR:-.}/scripts/github-export.mjs" "$EXPORT_DIR"
+
+echo "=== Push vers GitHub ($BRANCH) ==="
+cd "$EXPORT_DIR"
+git init -q
+git config user.email "ci@supersoniks.org"
+git config user.name "GitLab CI"
+git add -A
+git commit -q -m "sync: export lib depuis GitLab ${CI_COMMIT_SHORT_SHA:-local}"
+
+PUSH_URL="${GITHUB_REPO_URL/https:\/\//https://${GITHUB_TOKEN}@}"
+git branch -M "$BRANCH"
+git push -f "$PUSH_URL" "$BRANCH"
+
+echo "=== Miroir GitHub à jour ==="

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "5.0.2",
+  "version": "5.0.4",
   "license": "MIT",
   "type": "module",
   "main": "",

package/scripts/github-export.mjs

@@ -0,0 +1,150 @@
+#!/usr/bin/env node
+/**
+ * Prépare une arborescence « lib publique » pour GitHub :
+ * - sans site doc (src/docs, index.html, …)
+ * - sans sonic-captcha (altcha.supersoniks.org)
+ * - sans scripts / jobs GitLab internes
+ *
+ * Usage :
+ *   node scripts/github-export.mjs [répertoire_cible]
+ *
+ * Par défaut : ../concorde-github-export
+ */
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.resolve(__dirname, "..");
+const IGNORE_FILE = path.join(ROOT, ".github-export-ignore");
+const DEFAULT_OUT = path.resolve(ROOT, "../concorde-github-export");
+
+const EXPORT_FILTER_KEY =
+  /(?:^|\/)(?:docs|mock-api|undefined)(?:\/|$)|captcha|\.demo\.|\.stories\.|TestUtils|\/prism\/|\/search\/|\/tailwind\/|\/header\/|\/navigation\/|\/layout\.ts$|\/code\.ts$|^code$|^docs$|^layout$/;
+
+function readIgnorePatterns() {
+  if (!fs.existsSync(IGNORE_FILE)) return [];
+  return fs
+    .readFileSync(IGNORE_FILE, "utf8")
+    .split("\n")
+    .map((l) => l.trim())
+    .filter((l) => l && !l.startsWith("#"));
+}
+
+function globToRegExp(pattern) {
+  const escaped = pattern
+    .replace(/[.+^${}()|[\]\\]/g, "\\$&")
+    .replace(/\*\*/g, "{{GLOBSTAR}}")
+    .replace(/\*/g, "[^/]*")
+    .replace(/\{\{GLOBSTAR\}\}/g, ".*");
+  return new RegExp(`^${escaped}$`);
+}
+
+function shouldExclude(relativePath, patterns) {
+  const normalized = relativePath.replace(/\\/g, "/");
+  for (const pattern of patterns) {
+    const re = globToRegExp(pattern);
+    if (re.test(normalized)) return true;
+    if (normalized.startsWith(pattern.endsWith("/") ? pattern : `${pattern}/`))
+      return true;
+    if (normalized === pattern) return true;
+  }
+  return false;
+}
+
+function listAllFiles(dir, base = dir) {
+  const out = [];
+  for (const name of fs.readdirSync(dir, { withFileTypes: true })) {
+    if (name.name === ".git" || name.name === "node_modules") continue;
+    const full = path.join(dir, name.name);
+    const rel = path.relative(base, full).replace(/\\/g, "/");
+    if (name.isDirectory()) {
+      if (shouldExclude(rel, ignorePatterns)) continue;
+      out.push(...listAllFiles(full, base));
+    } else {
+      if (!shouldExclude(rel, ignorePatterns)) out.push(rel);
+    }
+  }
+  return out;
+}
+
+function copyFile(rel, destRoot) {
+  const src = path.join(ROOT, rel);
+  const dest = path.join(destRoot, rel);
+  fs.mkdirSync(path.dirname(dest), { recursive: true });
+  fs.copyFileSync(src, dest);
+}
+
+function patchUiTs(destRoot) {
+  const uiPath = path.join(
+    destRoot,
+    "src/core/components/ui/ui.ts",
+  );
+  if (!fs.existsSync(uiPath)) return;
+  const content = fs.readFileSync(uiPath, "utf8");
+  const patched = content.replace(
+    /import "\.\/captcha\/captcha";\n?/,
+    "",
+  );
+  fs.writeFileSync(uiPath, patched);
+}
+
+function exportHaystack(value) {
+  if (typeof value === "string") return value;
+  if (value && typeof value === "object") {
+    return `${value.types ?? ""}${value.default ?? ""}`;
+  }
+  return String(value);
+}
+
+function filterPackageJson(destRoot) {
+  const pkgPath = path.join(destRoot, "package.json");
+  if (!fs.existsSync(pkgPath)) return;
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
+  if (pkg.exports && typeof pkg.exports === "object") {
+    const next = {};
+    for (const [key, value] of Object.entries(pkg.exports)) {
+      const hay = `${key}:${exportHaystack(value)}`;
+      if (EXPORT_FILTER_KEY.test(hay)) continue;
+      if (exportHaystack(value).includes("/captcha/")) continue;
+      if (exportHaystack(value).includes("/docs/")) continue;
+      if (exportHaystack(value).includes(".demo.")) continue;
+      if (exportHaystack(value).includes(".stories.")) continue;
+      next[key] = value;
+    }
+    pkg.exports = next;
+  }
+  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
+}
+
+function patchReadme(destRoot) {
+  const readmePath = path.join(destRoot, "README.md");
+  if (!fs.existsSync(readmePath)) return;
+  let text = fs.readFileSync(readmePath, "utf8");
+  text = text.replace(
+    /Le dépôt GitHub est un \*\*miroir\*\* synchronisé depuis GitLab \(voir \[OPEN_SOURCE_CHECKPOINT\.md\]\(OPEN_SOURCE_CHECKPOINT\.md\)\)\./,
+    "Le dépôt GitHub est un **export filtré** depuis GitLab (librairie uniquement, sans site doc ni composant captcha — voir [OPEN_SOURCE_CHECKPOINT.md](OPEN_SOURCE_CHECKPOINT.md)).",
+  );
+  fs.writeFileSync(readmePath, text);
+}
+
+const ignorePatterns = readIgnorePatterns();
+const outDir = path.resolve(process.argv[2] || DEFAULT_OUT);
+
+if (fs.existsSync(outDir)) {
+  fs.rmSync(outDir, { recursive: true, force: true });
+}
+fs.mkdirSync(outDir, { recursive: true });
+
+const files = listAllFiles(ROOT);
+for (const rel of files) {
+  copyFile(rel, outDir);
+}
+
+patchUiTs(outDir);
+filterPackageJson(outDir);
+patchReadme(outDir);
+
+console.log(`✅ Export GitHub : ${files.length} fichiers → ${outDir}`);
+console.log("   Exclusions : .github-export-ignore");
+console.log("   Patches    : ui.ts (sans captcha), package.json exports");

package/src/core/decorators/subscriber/ancestorAttribute.spec.ts

@@ -236,4 +236,30 @@ describe("ancestorAttribute", () => {
 
     expect(el.dataProvider).toBe("scope-a");
   });
+
+  it("suit un wrapper plus proche après reparent (sans opt-in)", async () => {
+    const tag = "test-ancestor-attr-dynamic-reparent";
+    class C extends HTMLElement {
+      @ancestorAttribute("dataProvider", { dynamic: true })
+      dataProvider: string | null = null;
+    }
+    if (!customElements.get(tag)) {
+      customElements.define(tag, C);
+    }
+
+    const outer = document.createElement("div");
+    outer.setAttribute("dataProvider", "from-outer");
+    const el = document.createElement(tag) as InstanceType<typeof C>;
+    outer.appendChild(el);
+    document.body.appendChild(outer);
+    expect(el.dataProvider).toBe("from-outer");
+
+    const closer = document.createElement("div");
+    closer.setAttribute("dataProvider", "from-closer");
+    closer.appendChild(el);
+    outer.appendChild(closer);
+    await flushFrames();
+
+    expect(el.dataProvider).toBe("from-closer");
+  });
 });

package/src/core/decorators/subscriber/ancestorAttribute.ts

@@ -5,10 +5,9 @@ import { ConnectedComponent, setSubscribable } from "./common";
 
 export type AncestorAttributeOptions = {
   /**
-   * Si true, le composant reste synchronisé avec les attributs ancêtres via
-   * `AncestorAttributeObserver` (mutations + reparenting). Requis pour que
-   * `@bind` / `@subscribe` avec `${dataProvider}` se re-lient quand le scope change.
-   * Défaut : false (lecture unique au connect, rétrocompat).
+   * Si true, reste synchronisé quand un attribut ancêtre change **et** au
+   * reparenting (sans flag séparé). MO attributs partagés ; childList seulement
+   * sur le parent direct (ignoré pour les siblings). Défaut : false.
    */
   dynamic?: boolean;
 };

package/src/core/utils/AncestorAttributeObserver.ts

@@ -3,13 +3,14 @@ import HTML, { SearchableDomElement } from "./HTML";
 /**
  * Observateur pour `@ancestorAttribute({ dynamic: true })`.
  *
- * Un MutationObserver sur `document` ne voit pas les mutations dans les shadow
- * roots (Lit par défaut). Chaque abonnement observe donc directement les nœuds
- * de sa chaîne d'ancêtres (composant → parent → … → host shadow), comme
- * `watchScopedConfiguration` dans `api.ts`.
+ * ## Perf (FF / listes denses d'icônes)
+ * Ancien modèle : 1 MO/abonnement avec `childList` sur **toute** la chaîne +
+ * `reconnect()` à chaque mutation → O(n²) quand une list insert des siblings.
  *
- * Après un `childList` (wrapper plus proche, reparenting), la chaîne est
- * recalculée pour écouter les nouveaux ancêtres.
+ * Modèle actuel :
+ * 1. **MO attributs partagés** — 1 observer par `(ancêtre, attributeName)`.
+ * 2. **Reparent** — 1 MO `childList` partagé sur le parent direct ; on ne
+ *    réagit que si *notre* nœud est dans added/removed (insert sibling → no-op).
  */
 
 type SyncOptions = {
@@ -22,7 +23,18 @@ type Subscription = {
   attributeName: string;
   propertyKey: string;
   syncOptions: SyncOptions;
-  disconnectObservers: (() => void) | null;
+  watchedAncestors: Element[];
+  parentForReparent: Element | null;
+};
+
+type AttrSlot = {
+  observer: MutationObserver;
+  subscriptions: Set<Subscription>;
+};
+
+type ParentSlot = {
+  observer: MutationObserver;
+  byComponent: Map<Element, Set<Subscription>>;
 };
 
 /** Chaîne composant → ancêtres, en traversant les shadow roots. */
@@ -40,58 +52,17 @@ function walkAncestorElements(node: Node): Element[] {
   return elements;
 }
 
-/**
- * Observe attributs + enfants directs de chaque ancêtre.
- * Retourne une fonction de nettoyage (disconnect).
- */
-function attachAncestorChainObservers(
-  subscription: Subscription,
-  onMutation: () => void,
-): () => void {
-  const observers: MutationObserver[] = [];
-  let disconnected = false;
-  const attributeFilter = HTML.scopeAttributeNames(subscription.attributeName);
-
-  const reconnect = () => {
-    for (const observer of observers) {
-      observer.disconnect();
-    }
-    observers.length = 0;
-    if (disconnected) return;
-
-    for (const element of walkAncestorElements(subscription.component)) {
-      const observer = new MutationObserver((records) => {
-        if (disconnected) return;
-        if (records.some((record) => record.type === "childList")) {
-          reconnect();
-        }
-        onMutation();
-      });
-      observer.observe(element, {
-        attributes: true,
-        attributeFilter,
-        childList: true,
-        subtree: false,
-      });
-      observers.push(observer);
-    }
-  };
-
-  reconnect();
-
-  return () => {
-    disconnected = true;
-    for (const observer of observers) {
-      observer.disconnect();
-    }
-    observers.length = 0;
-  };
+function directParentElement(component: HTMLElement): Element | null {
+  const parent =
+    component.parentNode ||
+    ((component.getRootNode() as ShadowRoot)?.host ?? null);
+  return parent instanceof Element ? parent : null;
 }
 
 /**
  * Point unique de synchronisation DOM → propriété du composant.
  * N'assigne que si la valeur change (`Object.is`) pour limiter les re-renders Lit
- * et éviter de reboucler inutilement `observeDynamicProperty` (@bind / @subscribe).
+ * et éviter de reboucler inutilement `observeDynamicProperty` (@bind / `@subscribe`).
  */
 export function syncAncestorAttributeValue(
   component: object,
@@ -115,8 +86,11 @@ export default class AncestorAttributeObserver {
   private static pendingRefresh = new Set<Subscription>();
   private static animationFrameId: number | null = null;
 
+  private static attrSlots = new WeakMap<Element, Map<string, AttrSlot>>();
+  private static parentSlots = new WeakMap<Element, ParentSlot>();
+
   /**
-   * Enregistre un composant en mode `{ dynamic: true }`.
+   * Enregistre un composant en mode `{ dynamic: true }` (attributs + reparent).
    * Le `unsubscribe` retourné doit être appelé au `disconnectedCallback`.
    */
   static subscribe(
@@ -130,32 +104,172 @@ export default class AncestorAttributeObserver {
       attributeName,
       propertyKey,
       syncOptions,
-      disconnectObservers: null,
+      watchedAncestors: [],
+      parentForReparent: null,
     };
 
-    subscription.disconnectObservers = attachAncestorChainObservers(
-      subscription,
-      () => {
-        if (!AncestorAttributeObserver.subscriptions.has(subscription)) return;
-        AncestorAttributeObserver.pendingRefresh.add(subscription);
-        AncestorAttributeObserver.scheduleRefresh();
-      },
-    );
-
     AncestorAttributeObserver.subscriptions.add(subscription);
+    AncestorAttributeObserver.bindSubscription(subscription);
 
     return () => {
       AncestorAttributeObserver.unsubscribe(subscription);
     };
   }
 
-  /** Coupe les observateurs et retire l'abonnement (pas de fuite après disconnect). */
+  private static bindSubscription(subscription: Subscription): void {
+    AncestorAttributeObserver.unbindWatchers(subscription);
+
+    const ancestors = walkAncestorElements(subscription.component);
+    subscription.watchedAncestors = ancestors;
+
+    for (const ancestor of ancestors) {
+      AncestorAttributeObserver.addAttrSlot(
+        ancestor,
+        subscription.attributeName,
+        subscription,
+      );
+    }
+
+    const parent = directParentElement(subscription.component);
+    subscription.parentForReparent = parent;
+    if (parent) {
+      AncestorAttributeObserver.addParentSlot(parent, subscription);
+    }
+
+    AncestorAttributeObserver.pendingRefresh.add(subscription);
+    AncestorAttributeObserver.scheduleRefresh();
+  }
+
+  private static unbindWatchers(subscription: Subscription): void {
+    for (const ancestor of subscription.watchedAncestors) {
+      AncestorAttributeObserver.removeAttrSlot(
+        ancestor,
+        subscription.attributeName,
+        subscription,
+      );
+    }
+    subscription.watchedAncestors = [];
+
+    if (subscription.parentForReparent) {
+      AncestorAttributeObserver.removeParentSlot(
+        subscription.parentForReparent,
+        subscription,
+      );
+      subscription.parentForReparent = null;
+    }
+  }
+
+  private static addAttrSlot(
+    element: Element,
+    attributeName: string,
+    subscription: Subscription,
+  ): void {
+    let byAttr = AncestorAttributeObserver.attrSlots.get(element);
+    if (!byAttr) {
+      byAttr = new Map();
+      AncestorAttributeObserver.attrSlots.set(element, byAttr);
+    }
+
+    let slot = byAttr.get(attributeName);
+    if (!slot) {
+      const attributeFilter = HTML.scopeAttributeNames(attributeName);
+      const subscriptions = new Set<Subscription>();
+      const observer = new MutationObserver(() => {
+        for (const sub of subscriptions) {
+          if (!AncestorAttributeObserver.subscriptions.has(sub)) continue;
+          AncestorAttributeObserver.pendingRefresh.add(sub);
+        }
+        AncestorAttributeObserver.scheduleRefresh();
+      });
+      observer.observe(element, {
+        attributes: true,
+        attributeFilter,
+      });
+      slot = { observer, subscriptions };
+      byAttr.set(attributeName, slot);
+    }
+
+    slot.subscriptions.add(subscription);
+  }
+
+  private static removeAttrSlot(
+    element: Element,
+    attributeName: string,
+    subscription: Subscription,
+  ): void {
+    const byAttr = AncestorAttributeObserver.attrSlots.get(element);
+    if (!byAttr) return;
+    const slot = byAttr.get(attributeName);
+    if (!slot) return;
+
+    slot.subscriptions.delete(subscription);
+    if (slot.subscriptions.size > 0) return;
+
+    slot.observer.disconnect();
+    byAttr.delete(attributeName);
+  }
+
+  private static addParentSlot(
+    parent: Element,
+    subscription: Subscription,
+  ): void {
+    let slot = AncestorAttributeObserver.parentSlots.get(parent);
+    if (!slot) {
+      const byComponent = new Map<Element, Set<Subscription>>();
+      const observer = new MutationObserver((records) => {
+        const touched = new Set<Element>();
+        for (const record of records) {
+          record.removedNodes.forEach((n) => {
+            if (n instanceof Element) touched.add(n);
+          });
+          record.addedNodes.forEach((n) => {
+            if (n instanceof Element) touched.add(n);
+          });
+        }
+        for (const el of touched) {
+          const subs = byComponent.get(el);
+          if (!subs) continue;
+          for (const sub of [...subs]) {
+            if (!AncestorAttributeObserver.subscriptions.has(sub)) continue;
+            AncestorAttributeObserver.bindSubscription(sub);
+          }
+        }
+      });
+      observer.observe(parent, { childList: true });
+      slot = { observer, byComponent };
+      AncestorAttributeObserver.parentSlots.set(parent, slot);
+    }
+
+    let set = slot.byComponent.get(subscription.component);
+    if (!set) {
+      set = new Set();
+      slot.byComponent.set(subscription.component, set);
+    }
+    set.add(subscription);
+  }
+
+  private static removeParentSlot(
+    parent: Element,
+    subscription: Subscription,
+  ): void {
+    const slot = AncestorAttributeObserver.parentSlots.get(parent);
+    if (!slot) return;
+
+    const set = slot.byComponent.get(subscription.component);
+    if (set) {
+      set.delete(subscription);
+      if (set.size === 0) slot.byComponent.delete(subscription.component);
+    }
+
+    if (slot.byComponent.size > 0) return;
+    slot.observer.disconnect();
+    AncestorAttributeObserver.parentSlots.delete(parent);
+  }
+
   private static unsubscribe(subscription: Subscription): void {
     if (!AncestorAttributeObserver.subscriptions.has(subscription)) return;
 
-    subscription.disconnectObservers?.();
-    subscription.disconnectObservers = null;
-
+    AncestorAttributeObserver.unbindWatchers(subscription);
     AncestorAttributeObserver.subscriptions.delete(subscription);
     AncestorAttributeObserver.pendingRefresh.delete(subscription);
 
@@ -187,7 +301,6 @@ export default class AncestorAttributeObserver {
 
     for (const subscription of subscriptions) {
       if (!AncestorAttributeObserver.subscriptions.has(subscription)) continue;
-      if (!subscription.component.isConnected) continue;
       syncAncestorAttributeValue(
         subscription.component,
         subscription.attributeName,

package/src/css.d.ts

@@ -0,0 +1,19 @@
+declare module "*.css" {
+  const css: import("lit").CSSResult;
+  export default css;
+}
+
+declare module "*.css?inline" {
+  const css: string;
+  export default css;
+}
+
+declare module "*.scss" {
+  const css: import("lit").CSSResult;
+  export default css;
+}
+
+declare module "*.scss?inline" {
+  const css: string;
+  export default css;
+}

package/src/docs/_decorators/ancestor-attribute.md

@@ -69,8 +69,9 @@ This decorator is particularly useful for:
 - By default (`dynamic: false`), the value is read once at connect time and is not updated afterward
 - With `{ dynamic: true }`, the property stays in sync when:
   - an ancestor **changes** the attribute value
-  - a **closer** ancestor **gains** the attribute (that value wins)
-  - the **nearest** ancestor **loses** the attribute (falls back to the next one up, or `null`)
+  - a **closer** ancestor **gains** / **loses** the attribute (fallback / `null`)
+  - the component is **reparented** (no extra opt-in) — parent `childList` only reacts if *this* node moves
+- Observers are **shared** (one per ancestor attribute / one per parent) so large lists of `sonic-icon` stay cheap on Firefox.
 - When `dynamic` is enabled, updates also propagate to `@subscribe` / `@bind` paths that depend on the decorated property (e.g. `${dataProvider}`)
 
 ### Dynamic mode