@supersoniks/concorde 4.2.1 → 4.4.0

package/src/docs/search/docs-search.json

@@ -3000,12 +3000,12 @@
     }
   },
   {
-    "search": "Installation",
+    "search": "@ancestorAttribute",
     "files": {
-      "docs/_getting-started/concorde-outside.md": {
-        "title": "Installation",
+      "docs/_decorators/ancestor-attribute.md": {
+        "title": "@ancestorAttribute",
         "hashes": {
-          "installation": {
+          "ancestorattribute": {
             "count": 1,
             "title": "",
             "type": "page"
@@ -3015,14 +3015,14 @@
     }
   },
   {
-    "search": "The easiest way to use Concorde is by using the Concorde starter.The following command creates a new Vite project in TypeScript mode with Tailwind and an example component to get started.\n",
+    "search": "The @ancestorAttribute decorator automatically injects the value of an ancestor's attribute into a class property at the time of connectedCallback.\n",
     "files": {
-      "docs/_getting-started/concorde-outside.md": {
-        "title": "Installation",
+      "docs/_decorators/ancestor-attribute.md": {
+        "title": "@ancestorAttribute",
         "hashes": {
-          "starter": {
+          "ancestorattribute": {
             "count": 1,
-            "title": "Starter",
+            "title": "",
             "type": "paragraph"
           }
         }
@@ -3030,14 +3030,14 @@
     }
   },
   {
-    "search": "For a more manual configuration, you can refer to the following sections. \nHowever, the Tailwind configuration is not mentioned at the moment.\n",
+    "search": "This decorator uses HTML.getAncestorAttributeValue to traverse up the DOM tree from the current element and find the first ancestor that has the specified attribute. The value of this attribute is then assigned to the decorated property.\n",
     "files": {
-      "docs/_getting-started/concorde-outside.md": {
-        "title": "Installation",
+      "docs/_decorators/ancestor-attribute.md": {
+        "title": "@ancestorAttribute",
         "hashes": {
-          "brand-new-vite-project": {
+          "principle": {
             "count": 1,
-            "title": "Brand New Vite Project",
+            "title": "Principle",
             "type": "paragraph"
           }
         }
@@ -3045,14 +3045,14 @@
     }
   },
   {
-    "search": "Using Lit with TypeScript requires the following configuration in the "compilerOptions" section of the tsconfig.json file:\n",
+    "search": "The component reads dataProvider and testAttribute from its ancestor wrapper.\n",
     "files": {
-      "docs/_getting-started/concorde-outside.md": {
-        "title": "Installation",
+      "docs/_decorators/ancestor-attribute.md": {
+        "title": "@ancestorAttribute",
         "hashes": {
-          "creating-the-project": {
+          "basic-example": {
             "count": 1,
-            "title": "Creating the Project",
+            "title": "Basic example",
             "type": "paragraph"
           }
         }
@@ -3060,29 +3060,34 @@
     }
   },
   {
-    "search": "Navigate to the project folder created and perform the installation:\n",
+    "search": "This decorator is particularly useful for:\n",
     "files": {
-      "docs/_getting-started/concorde-outside.md": {
-        "title": "Installation",
+      "docs/_decorators/ancestor-attribute.md": {
+        "title": "@ancestorAttribute",
         "hashes": {
-          "installing-concorde": {
+          "use-cases": {
             "count": 1,
-            "title": "Installing Concorde",
+            "title": "Use cases",
             "type": "paragraph"
           }
         }
-      }
-    }
-  },
-  {
-    "search": "Shortcut imports work by default in JavaScript, but in TypeScript, they are activated by choice as they inject data into tsconfig.json. Here is the command:\n",
-    "files": {
-      "docs/_getting-started/concorde-outside.md": {
-        "title": "Installation",
+      },
+      "docs/_decorators/auto-subscribe.md": {
+        "title": "@autoSubscribe",
         "hashes": {
-          "shortcut-imports": {
+          "use-cases": {
             "count": 1,
-            "title": "Shortcut Imports",
+            "title": "Use cases",
+            "type": "paragraph"
+          }
+        }
+      },
+      "docs/_decorators/on-assign.md": {
+        "title": "@onAssign",
+        "hashes": {
+          "use-cases": {
+            "count": 1,
+            "title": "Use cases",
             "type": "paragraph"
           }
         }
@@ -3090,29 +3095,29 @@
     }
   },
   {
-    "search": "Shortcut imports replace the actual paths with aliases as follows:\n",
+    "search": "@autoSubscribe",
     "files": {
-      "docs/_getting-started/concorde-outside.md": {
-        "title": "Installation",
+      "docs/_decorators/auto-subscribe.md": {
+        "title": "@autoSubscribe",
         "hashes": {
-          "shortcut-imports": {
+          "autosubscribe": {
             "count": 1,
-            "title": "Shortcut Imports",
-            "type": "paragraph"
+            "title": "",
+            "type": "page"
           }
         }
       }
     }
   },
   {
-    "search": "The original paths remain accessible. Shortcut imports are used for the examples later in this documentation.\n",
+    "search": "The @autoSubscribe decorator automatically detects which publishers are accessed within a method and subscribes to them. When any of these publishers change, the method is automatically re-executed.\n",
     "files": {
-      "docs/_getting-started/concorde-outside.md": {
-        "title": "Installation",
+      "docs/_decorators/auto-subscribe.md": {
+        "title": "@autoSubscribe",
         "hashes": {
-          "shortcut-imports": {
+          "autosubscribe": {
             "count": 1,
-            "title": "Shortcut Imports",
+            "title": "",
             "type": "paragraph"
           }
         }
@@ -3120,14 +3125,14 @@
     }
   },
   {
-    "search": "Import needed component in main.ts or wherever you want to use it:\n",
+    "search": "This decorator wraps a method to track which publishers are accessed during its execution. It then subscribes to all accessed publishers, and when any of them change, the method is re-executed. This provides automatic reactivity without manually managing subscriptions.\n",
     "files": {
-      "docs/_getting-started/concorde-outside.md": {
-        "title": "Installation",
+      "docs/_decorators/auto-subscribe.md": {
+        "title": "@autoSubscribe",
         "hashes": {
-          "simple-integration-in-html": {
+          "principle": {
             "count": 1,
-            "title": "Simple Integration in HTML",
+            "title": "Principle",
             "type": "paragraph"
           }
         }
@@ -3135,29 +3140,29 @@
     }
   },
   {
-    "search": "Then in the render function ofyour component or in the HTML of the web page that includes the compiled JS, use the component as follows:\n",
+    "search": "@bind",
     "files": {
-      "docs/_getting-started/concorde-outside.md": {
-        "title": "Installation",
+      "docs/_decorators/bind.md": {
+        "title": "@bind",
         "hashes": {
-          "simple-integration-in-html": {
+          "bind": {
             "count": 1,
-            "title": "Simple Integration in HTML",
-            "type": "paragraph"
+            "title": "",
+            "type": "page"
           }
         }
       }
     }
   },
   {
-    "search": "For example, create a file my-element.ts at the root:\n",
+    "search": "Binds a class property to a path in a publisher. The property updates when publisher data changes.\n",
     "files": {
-      "docs/_getting-started/concorde-outside.md": {
-        "title": "Installation",
+      "docs/_decorators/bind.md": {
+        "title": "@bind",
         "hashes": {
-          "using-a-mixin-to-create-a-new-lit-component": {
+          "bind": {
             "count": 1,
-            "title": "Using a Mixin to Create a New Lit Component",
+            "title": "",
             "type": "paragraph"
           }
         }
@@ -3165,14 +3170,14 @@
     }
   },
   {
-    "search": "@customElement("my-element")\nexport class SonicComponent extends Fetcher(Subscriber(LitElement)) {\n  @property() email = "";\n  @property() first_name = "";\n  @property() last_name = "";\n",
+    "search": "For Lit re-renders, also add @state() on the same property.\n",
     "files": {
-      "docs/_getting-started/concorde-outside.md": {
-        "title": "Installation",
+      "docs/_decorators/bind.md": {
+        "title": "@bind",
         "hashes": {
-          "using-a-mixin-to-create-a-new-lit-component": {
+          "bind": {
             "count": 1,
-            "title": "Using a Mixin to Create a New Lit Component",
+            "title": "",
             "type": "paragraph"
           }
         }
@@ -3180,14 +3185,14 @@
     }
   },
   {
-    "search": "  render() {\n    return html<div>       ${this.first_name} ${this.last_name} : ${this.email}     </div>;\n  }\n}\n  \n\n",
+    "search": "See also: @subscribe, @publish, @get.\n",
     "files": {
-      "docs/_getting-started/concorde-outside.md": {
-        "title": "Installation",
+      "docs/_decorators/bind.md": {
+        "title": "@bind",
         "hashes": {
-          "using-a-mixin-to-create-a-new-lit-component": {
+          "bind": {
             "count": 1,
-            "title": "Using a Mixin to Create a New Lit Component",
+            "title": "",
             "type": "paragraph"
           }
         }
@@ -3195,14 +3200,14 @@
     }
   },
   {
-    "search": "Import component main.ts or main.js or any other component that uses it to be compiled\n",
+    "search": "The decorator subscribes via PublisherManager using dot notation. Publisher updates flow into the decorated property.\n",
     "files": {
-      "docs/_getting-started/concorde-outside.md": {
-        "title": "Installation",
+      "docs/_decorators/bind.md": {
+        "title": "@bind",
         "hashes": {
-          "using-a-mixin-to-create-a-new-lit-component": {
+          "principle": {
             "count": 1,
-            "title": "Using a Mixin to Create a New Lit Component",
+            "title": "Principle",
             "type": "paragraph"
           }
         }
@@ -3210,14 +3215,14 @@
     }
   },
   {
-    "search": "In the HTML of a JS or TS component or in the HTML of the web page containing the compiled JS:\n",
+    "search": "@bind accepts either a string path (legacy) or a DataProviderKey<T>. The property type must match T. Use reflect: true to push local writes back to the publisher (see below). See DataProviderKey.\n",
     "files": {
-      "docs/_getting-started/concorde-outside.md": {
-        "title": "Installation",
+      "docs/_decorators/bind.md": {
+        "title": "@bind",
         "hashes": {
-          "using-a-mixin-to-create-a-new-lit-component": {
+          "dataproviderkey-strict-typing": {
             "count": 1,
-            "title": "Using a Mixin to Create a New Lit Component",
+            "title": "`DataProviderKey` (strict typing)",
             "type": "paragraph"
           }
         }
@@ -3225,29 +3230,29 @@
     }
   },
   {
-    "search": "Creating components",
+    "search": "Two-way sync: reads from the publisher and local assignments call publisher.set(...). An internal guard avoids infinite loops.\n",
     "files": {
-      "docs/_getting-started/create-a-component.md": {
-        "title": "Creating components",
+      "docs/_decorators/bind.md": {
+        "title": "@bind",
         "hashes": {
-          "creating-components": {
+          "reflect-reflect-true": {
             "count": 1,
-            "title": "",
-            "type": "page"
+            "title": "Reflect (`reflect: true`)",
+            "type": "paragraph"
           }
         }
       }
     }
   },
   {
-    "search": "In this document, we consider the src directory of the project as the root.\nWe describe how we organize our components as an example, however it depends on your project.\n",
+    "search": "Use ${prop} or ${this.prop} inside a normal string literal (not a JS template literal with backticks). @bind re-subscribes when a reactive dependency changes.\n",
     "files": {
-      "docs/_getting-started/create-a-component.md": {
-        "title": "Creating components",
+      "docs/_decorators/bind.md": {
+        "title": "@bind",
         "hashes": {
-          "where-to-put-it": {
+          "dynamic-paths": {
             "count": 1,
-            "title": "Where to put it?",
+            "title": "Dynamic paths",
             "type": "paragraph"
           }
         }
@@ -3255,14 +3260,14 @@
     }
   },
   {
-    "search": "In concorde each component is currently organized in the following directory structure (at least we try):\n",
+    "search": "Properties referenced in the pattern must be reactive (@property, etc.) or you must call requestUpdate manually.\n",
     "files": {
-      "docs/_getting-started/create-a-component.md": {
-        "title": "Creating components",
+      "docs/_decorators/bind.md": {
+        "title": "@bind",
         "hashes": {
-          "where-to-put-it": {
+          "dynamic-paths": {
             "count": 1,
-            "title": "Where to put it?",
+            "title": "Dynamic paths",
             "type": "paragraph"
           }
         }
@@ -3270,14 +3275,14 @@
     }
   },
   {
-    "search": "You can copy example.ts from the source to the desired destination to start with.\nThis file contains a web component in the form of a class that extends the Subscriber mixin, with a reactive property and a render function.\n",
+    "search": "Works with any component that has the usual DOM lifecycle (LitElement, Subscriber mixin, etc.).\n",
     "files": {
-      "docs/_getting-started/create-a-component.md": {
-        "title": "Creating components",
+      "docs/_decorators/bind.md": {
+        "title": "@bind",
         "hashes": {
-          "starting-from-a-simple-model": {
+          "notes": {
             "count": 1,
-            "title": "Starting from a Simple Model",
+            "title": "Notes",
             "type": "paragraph"
           }
         }
@@ -3285,14 +3290,14 @@
     }
   },
   {
-    "search": "@customElement("sonic-example")\nexport class SonicComponent extends Subscriber(LitElement) {\n  @property() text = "Example";\n  render() {\n    return html${this.text};\n  }\n}\n  \n\n",
+    "search": "Shared data: Sharing data.\n",
     "files": {
-      "docs/_getting-started/create-a-component.md": {
-        "title": "Creating components",
+      "docs/_decorators/bind.md": {
+        "title": "@bind",
         "hashes": {
-          "starting-from-a-simple-model": {
+          "notes": {
             "count": 1,
-            "title": "Starting from a Simple Model",
+            "title": "Notes",
             "type": "paragraph"
           }
         }
@@ -3300,29 +3305,29 @@
     }
   },
   {
-    "search": "You can remove the dependency on Subscriber if automatic population of the component with external data is not required.\nFor example, for a UI component:\n",
+    "search": "@get",
     "files": {
-      "docs/_getting-started/create-a-component.md": {
-        "title": "Creating components",
+      "docs/_decorators/get.md": {
+        "title": "@get",
         "hashes": {
-          "starting-from-a-simple-model": {
+          "get": {
             "count": 1,
-            "title": "Starting from a Simple Model",
-            "type": "paragraph"
+            "title": "",
+            "type": "page"
           }
         }
       }
     }
   },
   {
-    "search": "@customElement("sonic-example")\nexport class SonicComponent extends LitElement {\n  @property() text = "Example";\n  render() {\n    return html${this.text};\n  }\n}\n  \n\n",
+    "search": "Loads data through API.getDetailed. The decorated property is ApiGetResult<T> | null: request, response (or null for dataProvider(...) resolution without HTTP), and typed result.\n",
     "files": {
-      "docs/_getting-started/create-a-component.md": {
-        "title": "Creating components",
+      "docs/_decorators/get.md": {
+        "title": "@get",
         "hashes": {
-          "starting-from-a-simple-model": {
+          "get": {
             "count": 1,
-            "title": "Starting from a Simple Model",
+            "title": "",
             "type": "paragraph"
           }
         }
@@ -3330,14 +3335,14 @@
     }
   },
   {
-    "search": "Regarding Subscriber, see:\n",
+    "search": "Pass an Endpoint<T> as the first argument. Import get and ApiGetResult from @supersoniks/concorde/decorators, and Endpoint from @supersoniks/concorde/utils/endpoint.\n",
     "files": {
-      "docs/_getting-started/create-a-component.md": {
-        "title": "Creating components",
+      "docs/_decorators/get.md": {
+        "title": "@get",
         "hashes": {
-          "starting-from-a-simple-model": {
+          "get": {
             "count": 1,
-            "title": "Starting from a Simple Model",
+            "title": "",
             "type": "paragraph"
           }
         }
@@ -3345,14 +3350,14 @@
     }
   },
   {
-    "search": "The class name is not necessarily important. However, it is important to give it a component name prefixed with "sonic" (or a prefix of your own) using the dedicated metadata already present in the copied document. For example, a button component would be named as follows:\n",
+    "search": "Same demo service as sonic-queue (geo.api.gouv.fr). Publisher setup lives in decorators-demo-geo.ts and decorators-demo-subscribe-publish-get-demos.ts.\n",
     "files": {
-      "docs/_getting-started/create-a-component.md": {
-        "title": "Creating components",
+      "docs/_decorators/get.md": {
+        "title": "@get",
         "hashes": {
-          "naming-the-component": {
+          "minimal-example": {
             "count": 1,
-            "title": "Naming the Component",
+            "title": "Minimal example",
             "type": "paragraph"
           }
         }
@@ -3360,14 +3365,14 @@
     }
   },
   {
-    "search": "For less generic components with a specific destination, we advise to include the destination in the name.\nFor example, for a "title" component in the "event" destination, the name would be simply:\n",
+    "search": "Dynamic config and endpoint path (demo-api-get-configuration-key in doc sources):\n",
     "files": {
-      "docs/_getting-started/create-a-component.md": {
-        "title": "Creating components",
+      "docs/_decorators/get.md": {
+        "title": "@get",
         "hashes": {
-          "naming-the-component": {
+          "live-demos": {
             "count": 1,
-            "title": "Naming the Component",
+            "title": "Live demos",
             "type": "paragraph"
           }
         }
@@ -3375,14 +3380,14 @@
     }
   },
   {
-    "search": "To do this, study the functioning of https://lit.dev and also refer to Subscriber.\n",
+    "search": "Scoped @get with @publish / @subscribe on the payload (see @publish and @subscribe) — wrap under an ancestor with serviceURL="https://geo.api.gouv.fr/":\n",
     "files": {
-      "docs/_getting-started/create-a-component.md": {
-        "title": "Creating components",
+      "docs/_decorators/get.md": {
+        "title": "@get",
         "hashes": {
-          "creating-reactive-properties-and-modifying-the-render-function": {
+          "live-demos": {
             "count": 1,
-            "title": "Creating Reactive Properties and Modifying the Render Function",
+            "title": "Live demos",
             "type": "paragraph"
           }
         }
@@ -3390,14 +3395,14 @@
     }
   },
   {
-    "search": "The HTML structure of a component should remain as simple as possible.\n",
+    "search": "Stale responses are ignored if the path or generation changed before the request finished.\n",
     "files": {
-      "docs/_getting-started/create-a-component.md": {
-        "title": "Creating components",
+      "docs/_decorators/get.md": {
+        "title": "@get",
         "hashes": {
-          "html-structure-of-a-component": {
+          "live-demos": {
             "count": 1,
-            "title": "HTML Structure of a Component",
+            "title": "Live demos",
             "type": "paragraph"
           }
         }
@@ -3405,29 +3410,29 @@
     }
   },
   {
-    "search": "Ideally, there should be only one additional level of elements in addition to slots.\n",
+    "search": "@onAssign",
     "files": {
-      "docs/_getting-started/create-a-component.md": {
-        "title": "Creating components",
+      "docs/_decorators/on-assign.md": {
+        "title": "@onAssign",
         "hashes": {
-          "html-structure-of-a-component": {
+          "onassign": {
             "count": 1,
-            "title": "HTML Structure of a Component",
-            "type": "paragraph"
+            "title": "",
+            "type": "page"
           }
         }
       }
     }
   },
   {
-    "search": "This leads to the creation of more components and thus raises questions about the hierarchical organization of files. However, this tends to atomize their roles.\n",
+    "search": "The @onAssign decorator allows you to execute a method when one or more publishers are updated. The method is called only when all specified publishers have been assigned values.\n",
     "files": {
-      "docs/_getting-started/create-a-component.md": {
-        "title": "Creating components",
+      "docs/_decorators/on-assign.md": {
+        "title": "@onAssign",
         "hashes": {
-          "html-structure-of-a-component": {
+          "onassign": {
             "count": 1,
-            "title": "HTML Structure of a Component",
+            "title": "",
             "type": "paragraph"
           }
         }
@@ -3435,14 +3440,14 @@
     }
   },
   {
-    "search": "To compile the component, it needs to be referenced somewhere through an import statement. In particular, it is important to reference it in any component that uses it.\n",
+    "search": "This decorator subscribes to one or more publishers via the PublisherManager. When all specified publishers have been assigned values (via set), the decorated method is called with all the values as arguments.\n",
     "files": {
-      "docs/_getting-started/create-a-component.md": {
-        "title": "Creating components",
+      "docs/_decorators/on-assign.md": {
+        "title": "@onAssign",
         "hashes": {
-          "referencing-it": {
+          "principle": {
             "count": 1,
-            "title": "Referencing It",
+            "title": "Principle",
             "type": "paragraph"
           }
         }
@@ -3450,14 +3455,14 @@
     }
   },
   {
-    "search": "In the case where it can be directly used in a page, it should also be globally referenced, especially considering the creation of specific bundles in the future.\n",
+    "search": "This is particularly useful when you need to wait for multiple data sources to be ready before executing logic.\n",
     "files": {
-      "docs/_getting-started/create-a-component.md": {
-        "title": "Creating components",
+      "docs/_decorators/on-assign.md": {
+        "title": "@onAssign",
         "hashes": {
-          "referencing-it": {
+          "principle": {
             "count": 1,
-            "title": "Referencing It",
+            "title": "Principle",
             "type": "paragraph"
           }
         }
@@ -3465,14 +3470,14 @@
     }
   },
   {
-    "search": "Here's where we add imports based on the component's location inside concorde as an example\n",
+    "search": "The path uses dot notation to navigate through the publisher structure:\n",
     "files": {
-      "docs/_getting-started/create-a-component.md": {
-        "title": "Creating components",
+      "docs/_decorators/on-assign.md": {
+        "title": "@onAssign",
         "hashes": {
-          "referencing-it": {
+          "path-syntax": {
             "count": 1,
-            "title": "Referencing It",
+            "title": "Path syntax",
             "type": "paragraph"
           }
         }
@@ -3480,14 +3485,14 @@
     }
   },
   {
-    "search": "As a reminder, the component is simply integrated into the context by adding a tag with the component's name, for example:\n",
+    "search": "You can now build the paths dynamically by referencing the host class properties inside the strings passed to @onAssign. Two placeholder syntaxes are supported:\n",
     "files": {
-      "docs/_getting-started/create-a-component.md": {
-        "title": "Creating components",
+      "docs/_decorators/on-assign.md": {
+        "title": "@onAssign",
         "hashes": {
-          "using-it": {
+          "dynamic-path-driven-by-class-properties": {
             "count": 1,
-            "title": "Using It",
+            "title": "Dynamic path driven by class properties",
             "type": "paragraph"
           }
         }
@@ -3495,29 +3500,29 @@
     }
   },
   {
-    "search": "My first subscriber component",
+    "search": "Each placeholder is replaced at runtime with the current value of the corresponding property. @onAssign automatically watches those properties and:\n",
     "files": {
-      "docs/_getting-started/my-first-subscriber.md": {
-        "title": "My first subscriber component",
+      "docs/_decorators/on-assign.md": {
+        "title": "@onAssign",
         "hashes": {
-          "my-first-subscriber-component": {
+          "dynamic-path-driven-by-class-properties": {
             "count": 1,
-            "title": "",
-            "type": "page"
+            "title": "Dynamic path driven by class properties",
+            "type": "paragraph"
           }
         }
       }
     }
   },
   {
-    "search": "Learn how to build a subscriber component, styled with tailwind, \nwhich could be used as a regular component or could be filled from a dataprovider.\n",
+    "search": "⚠️ Use classic string literals: @onAssign("${dataProvider}.${profileId}", "settings.${profileId}"). Do not use template literals (backticks), otherwise JavaScript would try to interpolate the value immediately.\n",
     "files": {
-      "docs/_getting-started/my-first-subscriber.md": {
-        "title": "My first subscriber component",
+      "docs/_decorators/on-assign.md": {
+        "title": "@onAssign",
         "hashes": {
-          "my-first-subscriber-component": {
+          "dynamic-path-driven-by-class-properties": {
             "count": 1,
-            "title": "",
+            "title": "Dynamic path driven by class properties",
             "type": "paragraph"
           }
         }
@@ -3525,14 +3530,14 @@
     }
   },
   {
-    "search": "First export tailwind, in a tailwind.ts file, stylesheet to add it in our component when needed.\n",
+    "search": "Additional constraints:\n",
     "files": {
-      "docs/_getting-started/my-first-subscriber.md": {
-        "title": "My first subscriber component",
+      "docs/_decorators/on-assign.md": {
+        "title": "@onAssign",
         "hashes": {
-          "style-with-tailwind-and-ui-components": {
+          "dynamic-path-driven-by-class-properties": {
             "count": 1,
-            "title": "Style with tailwind and ui components",
+            "title": "Dynamic path driven by class properties",
             "type": "paragraph"
           }
         }
@@ -3540,29 +3545,29 @@
     }
   },
   {
-    "search": "Reactive properties can be filled by its attributes as a simple lit component.\n",
+    "search": "@publish",
     "files": {
-      "docs/_getting-started/my-first-subscriber.md": {
-        "title": "My first subscriber component",
+      "docs/_decorators/publish.md": {
+        "title": "@publish",
         "hashes": {
-          "basic-usage": {
+          "publish": {
             "count": 1,
-            "title": "Basic usage",
-            "type": "paragraph"
+            "title": "",
+            "type": "page"
           }
         }
       }
     }
   },
   {
-    "search": "Import Subscriber mixin, and add it around LitElement.\n\n",
+    "search": "Write-only binding: assigning to the property publishes to the DataProviderKey path. No read subscription (inverse of @subscribe).\n",
     "files": {
-      "docs/_getting-started/my-first-subscriber.md": {
-        "title": "My first subscriber component",
+      "docs/_decorators/publish.md": {
+        "title": "@publish",
         "hashes": {
-          "add-subscriber-mixin": {
+          "publish": {
             "count": 1,
-            "title": "Add Subscriber mixin",
+            "title": "",
             "type": "paragraph"
           }
         }
@@ -3570,14 +3575,14 @@
     }
   },
   {
-    "search": "Without a dataProvider attribute, a subscriber set its own dataprovider from first ancestor found, and then reactive properties automatically filled and update from it.\nA fetcher is a simple component which set its fetch result to props of its dataprovider.\n\n",
+    "search": "Similar to the “reflect” half of @bind without listening to the publisher.\n",
     "files": {
-      "docs/_getting-started/my-first-subscriber.md": {
-        "title": "My first subscriber component",
+      "docs/_decorators/publish.md": {
+        "title": "@publish",
         "hashes": {
-          "autofill-properties-from-a-dataprovider": {
+          "publish": {
             "count": 1,
-            "title": "Autofill properties from a dataProvider",
+            "title": "",
             "type": "paragraph"
           }
         }
@@ -3585,14 +3590,14 @@
     }
   },
   {
-    "search": "A subscriber can subscribe data from anywhere in the DOM, with its dataprovider set as a provider id.\n",
+    "search": "Dynamic paths use the same placeholder rules as @bind / @subscribe.\n",
     "files": {
-      "docs/_getting-started/my-first-subscriber.md": {
-        "title": "My first subscriber component",
+      "docs/_decorators/publish.md": {
+        "title": "@publish",
         "hashes": {
-          "autofill-properties-from-a-dataprovider": {
+          "example": {
             "count": 1,
-            "title": "Autofill properties from a dataProvider",
+            "title": "Example",
             "type": "paragraph"
           }
         }
@@ -3600,12 +3605,12 @@
     }
   },
   {
-    "search": "Sharing data",
+    "search": "@subscribe",
     "files": {
-      "docs/_getting-started/pubsub.md": {
-        "title": "Sharing data",
+      "docs/_decorators/subscribe.md": {
+        "title": "@subscribe",
         "hashes": {
-          "sharing-data": {
+          "subscribe": {
             "count": 1,
             "title": "",
             "type": "page"
@@ -3615,12 +3620,12 @@
     }
   },
   {
-    "search": "This section describes how we share data between graphical and non graphical components and classes.\n",
+    "search": "Read-only binding: only DataProviderKey<T> (no legacy string path). No reflect option — the publisher updates the property, not the other way around.\n",
     "files": {
-      "docs/_getting-started/pubsub.md": {
-        "title": "Sharing data",
+      "docs/_decorators/subscribe.md": {
+        "title": "@subscribe",
         "hashes": {
-          "sharing-data": {
+          "subscribe": {
             "count": 1,
             "title": "",
             "type": "paragraph"
@@ -3630,12 +3635,12 @@
     }
   },
   {
-    "search": "Especialy, graphical components should not reference each other in order to remain decoupled.\n",
+    "search": "For bidirectional binding or string paths, use @bind.\n",
     "files": {
-      "docs/_getting-started/pubsub.md": {
-        "title": "Sharing data",
+      "docs/_decorators/subscribe.md": {
+        "title": "@subscribe",
         "hashes": {
-          "sharing-data": {
+          "subscribe": {
             "count": 1,
             "title": "",
             "type": "paragraph"
@@ -3645,14 +3650,14 @@
     }
   },
   {
-    "search": "Thats why we use publish/subscribe paradigm to addresse this issue.\n",
+    "search": "See also DataProviderKey.\n",
     "files": {
-      "docs/_getting-started/pubsub.md": {
-        "title": "Sharing data",
+      "docs/_decorators/subscribe.md": {
+        "title": "@subscribe",
         "hashes": {
-          "sharing-data": {
+          "demo": {
             "count": 1,
-            "title": "",
+            "title": "Demo",
             "type": "paragraph"
           }
         }
@@ -3660,29 +3665,29 @@
     }
   },
   {
-    "search": "❇️ The order of data creation and subscription theoretically has no importance.\n",
+    "search": "@awaitConnectedAncestors and @dispatchConnectedEvent",
     "files": {
-      "docs/_getting-started/pubsub.md": {
-        "title": "Sharing data",
+      "docs/_decorators/wait-for-ancestors.md": {
+        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
         "hashes": {
-          "principle": {
+          "awaitconnectedancestors-and-dispatchconnectedevent": {
             "count": 1,
-            "title": "Principle",
-            "type": "paragraph"
+            "title": "",
+            "type": "page"
           }
         }
       }
     }
   },
   {
-    "search": "Denotes the identifier of a publisher as referenced in the PublisherManager (see below).\nUses the dataProvider attribut in html tags to scop the content with some data.\nsee Subscribers.\n",
+    "search": "The @awaitConnectedAncestors and @dispatchConnectedEvent decorators delay a web component's initialization until its matching ancestors have executed their connectedCallback. This is when contextual elements (publisher, dataProvider, etc.) are configured.\n",
     "files": {
-      "docs/_getting-started/pubsub.md": {
-        "title": "Sharing data",
+      "docs/_decorators/wait-for-ancestors.md": {
+        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
         "hashes": {
-          "dataprovider": {
+          "awaitconnectedancestors-and-dispatchconnectedevent": {
             "count": 1,
-            "title": "DataProvider",
+            "title": "",
             "type": "paragraph"
           }
         }
@@ -3690,14 +3695,14 @@
     }
   },
   {
-    "search": "The PublisherManager is a utility class to get publishers\n",
+    "search": "When a child component attaches to the DOM, its ancestors may not yet be initialized (especially if custom element definitions are loaded asynchronously). The @awaitConnectedAncestors decorator delays the component's connectedCallback until all ancestors matching the provided CSS selectors have executed their connectedCallback.\n",
     "files": {
-      "docs/_getting-started/pubsub.md": {
-        "title": "Sharing data",
+      "docs/_decorators/wait-for-ancestors.md": {
+        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
         "hashes": {
-          "publishermanager": {
+          "principle": {
             "count": 1,
-            "title": "PublisherManager",
+            "title": "Principle",
             "type": "paragraph"
           }
         }
@@ -3705,14 +3710,14 @@
     }
   },
   {
-    "search": "It plays a central role in the components, especially through the "subscriber" mixin.\nAutomatic data communication between components in concorde uses this principle in conjunction with Lit's reactive properties. \nRefer to the documentation for Subscriber.\n",
+    "search": "The @dispatchConnectedEvent decorator allows ancestors to signal they are ready by dispatching the sonic-connected event at the end of their connectedCallback. The event bubbles, so it can be listened to from anywhere (e.g. document.addEventListener(CONNECTED, handler)).\n",
     "files": {
-      "docs/_getting-started/pubsub.md": {
-        "title": "Sharing data",
+      "docs/_decorators/wait-for-ancestors.md": {
+        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
         "hashes": {
-          "publishermanager": {
+          "principle": {
             "count": 1,
-            "title": "PublisherManager",
+            "title": "Principle",
             "type": "paragraph"
           }
         }
@@ -3720,14 +3725,14 @@
     }
   },
   {
-    "search": "It is declared on the window object to allow usage in a web page, so the equivalent one-liner would be:\n",
+    "search": "Ancestors that are not web components (no hyphen in tag name) are considered connected by default and do not need to emit the event.\n",
     "files": {
-      "docs/_getting-started/pubsub.md": {
-        "title": "Sharing data",
+      "docs/_decorators/wait-for-ancestors.md": {
+        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
         "hashes": {
-          "publishermanager": {
+          "principle": {
             "count": 1,
-            "title": "PublisherManager",
+            "title": "Principle",
             "type": "paragraph"
           }
         }
@@ -3735,14 +3740,14 @@
     }
   },
   {
-    "search": "This example can be tested in a console when Concorde is loaded on the page (for example, in a ticketing system).\nIn a component, you will need to perform an import as explained earlier.\n",
+    "search": "An ancestor container decorated with @dispatchConnectedEvent() signals when it is ready. A child component decorated with @awaitConnectedAncestors("demo-wait-ancestor-container[dataProvider]") waits for this container to be initialized before initializing itself. Parameters are CSS selectors (element.matches()).\n",
     "files": {
-      "docs/_getting-started/pubsub.md": {
-        "title": "Sharing data",
+      "docs/_decorators/wait-for-ancestors.md": {
+        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
         "hashes": {
           "basic-example": {
             "count": 1,
-            "title": "Basic Example",
+            "title": "Basic example",
             "type": "paragraph"
           }
         }
@@ -3750,29 +3755,29 @@
     }
   },
   {
-    "search": "Introduction",
+    "search": "The parent is registered via customElements.define() (vanilla JS) rather than @customElement, so it can be defined later—e.g. when the user clicks a button. This demonstrates the child waiting until the parent exists.\n",
     "files": {
-      "docs/_getting-started/start.md": {
-        "title": "Introduction",
+      "docs/_decorators/wait-for-ancestors.md": {
+        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
         "hashes": {
-          "introduction": {
+          "basic-example": {
             "count": 1,
-            "title": "",
-            "type": "page"
+            "title": "Basic example",
+            "type": "paragraph"
           }
         }
       }
     }
   },
   {
-    "search": "Based on lit.dev, Concorde is a collection of webcomponents made to build shared apps or websites.Develop user interfaces without thinking about the implementation context, where everything is scoped, but preserving graphic consistency by setting the strict minimum of css variables.\n",
+    "search": "The child waits for all specified ancestors. Register outer first, then inner — the child initializes only when both are ready.\n",
     "files": {
-      "docs/_getting-started/start.md": {
-        "title": "Introduction",
+      "docs/_decorators/wait-for-ancestors.md": {
+        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
         "hashes": {
-          "what-is-concorde-": {
+          "multiple-ancestors": {
             "count": 1,
-            "title": "What is Concorde ?",
+            "title": "Multiple ancestors",
             "type": "paragraph"
           }
         }
@@ -3780,14 +3785,14 @@
     }
   },
   {
-    "search": "In 2022, Supersoniks wanted to create a new version of his ticketing app, in production un nearly 100 websites. We needed shared components which could be implemented in mobile apps, modern websites, and also old ones made in php, without bundlers or whatever.Instead of building a new app for each type of project, which would become impossible to maintain, we've decided to create one app, composed by a few webcomponents wich could easily be recomposed on any website.\nWebcomponents appeared to be a the perfect solution to guarantee that compatibility with all past, present and futures environment, and lit seemed to be the best choice to build them.\n",
+    "search": "When the parent is defined at load and already in the DOM, the child initializes immediately (no delay).\n",
     "files": {
-      "docs/_getting-started/start.md": {
-        "title": "Introduction",
+      "docs/_decorators/wait-for-ancestors.md": {
+        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
         "hashes": {
-          "why-and-use-case": {
+          "ancestors-already-connected": {
             "count": 1,
-            "title": "Why and use case",
+            "title": "Ancestors already connected",
             "type": "paragraph"
           }
         }
@@ -3795,14 +3800,14 @@
     }
   },
   {
-    "search": "A new project with Vite, Typescript and Tailwind already configured and a simple example of a subscriber component : \n",
+    "search": "Static (both in DOM from start):\n",
     "files": {
-      "docs/_getting-started/start.md": {
-        "title": "Introduction",
+      "docs/_decorators/wait-for-ancestors.md": {
+        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
         "hashes": {
-          "start-a-new-project-easily": {
+          "ancestors-already-connected": {
             "count": 1,
-            "title": "Start a new project easily",
+            "title": "Ancestors already connected",
             "type": "paragraph"
           }
         }
@@ -3810,29 +3815,29 @@
     }
   },
   {
-    "search": "Adding styles",
+    "search": "Dynamic (child added on button click):\n",
     "files": {
-      "docs/_getting-started/theming.md": {
-        "title": "Adding styles",
+      "docs/_decorators/wait-for-ancestors.md": {
+        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
         "hashes": {
-          "adding-styles": {
+          "ancestors-already-connected": {
             "count": 1,
-            "title": "",
-            "type": "page"
+            "title": "Ancestors already connected",
+            "type": "paragraph"
           }
         }
       }
     }
   },
   {
-    "search": "No style crosses the shadow root of a component, except for inheritable properties (which have the "inherit" property possible) and CSS variables.\nProperties integrated via a "slot" remain stylizable in a conventional way.\n",
+    "search": "Parameters are CSS selectors matched via element.matches() — e.g. "sonic-subscriber", "sonic-subscriber[dataProvider]", ".my-container", or multiple: "sonic-subscriber", "sonic-sdui".\n",
     "files": {
-      "docs/_getting-started/theming.md": {
-        "title": "Adding styles",
+      "docs/_decorators/wait-for-ancestors.md": {
+        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
         "hashes": {
-          "normal-behavior": {
+          "css-selector-support": {
             "count": 1,
-            "title": "Normal Behavior",
+            "title": "CSS selector support",
             "type": "paragraph"
           }
         }
@@ -3840,14 +3845,14 @@
     }
   },
   {
-    "search": "The declaration of reactive properties is useful for selecting a particular configuration that mostly affects a set of properties.\n",
+    "search": "These decorators are particularly useful for:\n",
     "files": {
-      "docs/_getting-started/theming.md": {
-        "title": "Adding styles",
+      "docs/_decorators/wait-for-ancestors.md": {
+        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
         "hashes": {
-          "choosing-style-presets-via-reactive-properties": {
+          "use-cases": {
             "count": 1,
-            "title": "Choosing Style Presets via Reactive Properties:",
+            "title": "Use cases",
             "type": "paragraph"
           }
         }
@@ -3855,14 +3860,14 @@
     }
   },
   {
-    "search": "For example, a size property (xs, sm, md, xl) will affect margins, font, line heights to align them with the corresponding CSS vars, which can be customized using the methods mentioned earlier if necessary.\n",
+    "search": "The sonic-connected event bubbles, so you can listen to it from anywhere:\n",
     "files": {
-      "docs/_getting-started/theming.md": {
-        "title": "Adding styles",
+      "docs/_decorators/wait-for-ancestors.md": {
+        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
         "hashes": {
-          "choosing-style-presets-via-reactive-properties": {
+          "listening-to-the-connected-event": {
             "count": 1,
-            "title": "Choosing Style Presets via Reactive Properties:",
+            "title": "Listening to the connected event",
             "type": "paragraph"
           }
         }
@@ -3870,29 +3875,29 @@
     }
   },
   {
-    "search": "It is recommended to use the {reflect: true} property for reactive properties that have an associated style on the :host(). For example: :host([type='primary']){...}\n",
+    "search": "Installation",
     "files": {
-      "docs/_getting-started/theming.md": {
-        "title": "Adding styles",
+      "docs/_getting-started/concorde-outside.md": {
+        "title": "Installation",
         "hashes": {
-          "choosing-style-presets-via-reactive-properties": {
+          "installation": {
             "count": 1,
-            "title": "Choosing Style Presets via Reactive Properties:",
-            "type": "paragraph"
+            "title": "",
+            "type": "page"
           }
         }
       }
     }
   },
   {
-    "search": "☢️ Caution: Passing class names via reactive properties / HTML attributes of the component should be avoided as it can quickly lead to difficult-to-manage situations.\n",
+    "search": "The easiest way to use Concorde is by using the Concorde starter.The following command creates a new Vite project in TypeScript mode with Tailwind and an example component to get started.\n",
     "files": {
-      "docs/_getting-started/theming.md": {
-        "title": "Adding styles",
+      "docs/_getting-started/concorde-outside.md": {
+        "title": "Installation",
         "hashes": {
-          "choosing-style-presets-via-reactive-properties": {
+          "starter": {
             "count": 1,
-            "title": "Choosing Style Presets via Reactive Properties:",
+            "title": "Starter",
             "type": "paragraph"
           }
         }
@@ -3900,14 +3905,14 @@
     }
   },
   {
-    "search": "By default, the display property is inline.\nTherefore, be careful to define it according to the needs, as one might mistakenly expect it to be block as with a regular <div>.\n",
+    "search": "For a more manual configuration, you can refer to the following sections. \nHowever, the Tailwind configuration is not mentioned at the moment.\n",
     "files": {
-      "docs/_getting-started/theming.md": {
-        "title": "Adding styles",
+      "docs/_getting-started/concorde-outside.md": {
+        "title": "Installation",
         "hashes": {
-          "css-display-property": {
+          "brand-new-vite-project": {
             "count": 1,
-            "title": "CSS \"display\" Property",
+            "title": "Brand New Vite Project",
             "type": "paragraph"
           }
         }
@@ -3915,14 +3920,404 @@
     }
   },
   {
-    "search": "☢️ Caution: Defining the display property as contents may seem attractive at first, but:\n",
+    "search": "Using Lit with TypeScript requires the following configuration in the "compilerOptions" section of the tsconfig.json file:\n",
     "files": {
-      "docs/_getting-started/theming.md": {
-        "title": "Adding styles",
+      "docs/_getting-started/concorde-outside.md": {
+        "title": "Installation",
         "hashes": {
-          "css-display-property": {
+          "creating-the-project": {
             "count": 1,
-            "title": "CSS \"display\" Property",
+            "title": "Creating the Project",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "Navigate to the project folder created and perform the installation:\n",
+    "files": {
+      "docs/_getting-started/concorde-outside.md": {
+        "title": "Installation",
+        "hashes": {
+          "installing-concorde": {
+            "count": 1,
+            "title": "Installing Concorde",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "Shortcut imports work by default in JavaScript, but in TypeScript, they are activated by choice as they inject data into tsconfig.json. Here is the command:\n",
+    "files": {
+      "docs/_getting-started/concorde-outside.md": {
+        "title": "Installation",
+        "hashes": {
+          "shortcut-imports": {
+            "count": 1,
+            "title": "Shortcut Imports",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "Shortcut imports replace the actual paths with aliases as follows:\n",
+    "files": {
+      "docs/_getting-started/concorde-outside.md": {
+        "title": "Installation",
+        "hashes": {
+          "shortcut-imports": {
+            "count": 1,
+            "title": "Shortcut Imports",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "The original paths remain accessible. Shortcut imports are used for the examples later in this documentation.\n",
+    "files": {
+      "docs/_getting-started/concorde-outside.md": {
+        "title": "Installation",
+        "hashes": {
+          "shortcut-imports": {
+            "count": 1,
+            "title": "Shortcut Imports",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "Import needed component in main.ts or wherever you want to use it:\n",
+    "files": {
+      "docs/_getting-started/concorde-outside.md": {
+        "title": "Installation",
+        "hashes": {
+          "simple-integration-in-html": {
+            "count": 1,
+            "title": "Simple Integration in HTML",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "Then in the render function ofyour component or in the HTML of the web page that includes the compiled JS, use the component as follows:\n",
+    "files": {
+      "docs/_getting-started/concorde-outside.md": {
+        "title": "Installation",
+        "hashes": {
+          "simple-integration-in-html": {
+            "count": 1,
+            "title": "Simple Integration in HTML",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "For example, create a file my-element.ts at the root:\n",
+    "files": {
+      "docs/_getting-started/concorde-outside.md": {
+        "title": "Installation",
+        "hashes": {
+          "using-a-mixin-to-create-a-new-lit-component": {
+            "count": 1,
+            "title": "Using a Mixin to Create a New Lit Component",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "@customElement("my-element")\nexport class SonicComponent extends Fetcher(Subscriber(LitElement)) {\n  @property() email = "";\n  @property() first_name = "";\n  @property() last_name = "";\n",
+    "files": {
+      "docs/_getting-started/concorde-outside.md": {
+        "title": "Installation",
+        "hashes": {
+          "using-a-mixin-to-create-a-new-lit-component": {
+            "count": 1,
+            "title": "Using a Mixin to Create a New Lit Component",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "  render() {\n    return html<div>       ${this.first_name} ${this.last_name} : ${this.email}     </div>;\n  }\n}\n  \n\n",
+    "files": {
+      "docs/_getting-started/concorde-outside.md": {
+        "title": "Installation",
+        "hashes": {
+          "using-a-mixin-to-create-a-new-lit-component": {
+            "count": 1,
+            "title": "Using a Mixin to Create a New Lit Component",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "Import component main.ts or main.js or any other component that uses it to be compiled\n",
+    "files": {
+      "docs/_getting-started/concorde-outside.md": {
+        "title": "Installation",
+        "hashes": {
+          "using-a-mixin-to-create-a-new-lit-component": {
+            "count": 1,
+            "title": "Using a Mixin to Create a New Lit Component",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "In the HTML of a JS or TS component or in the HTML of the web page containing the compiled JS:\n",
+    "files": {
+      "docs/_getting-started/concorde-outside.md": {
+        "title": "Installation",
+        "hashes": {
+          "using-a-mixin-to-create-a-new-lit-component": {
+            "count": 1,
+            "title": "Using a Mixin to Create a New Lit Component",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "Creating components",
+    "files": {
+      "docs/_getting-started/create-a-component.md": {
+        "title": "Creating components",
+        "hashes": {
+          "creating-components": {
+            "count": 1,
+            "title": "",
+            "type": "page"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "In this document, we consider the src directory of the project as the root.\nWe describe how we organize our components as an example, however it depends on your project.\n",
+    "files": {
+      "docs/_getting-started/create-a-component.md": {
+        "title": "Creating components",
+        "hashes": {
+          "where-to-put-it": {
+            "count": 1,
+            "title": "Where to put it?",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "In concorde each component is currently organized in the following directory structure (at least we try):\n",
+    "files": {
+      "docs/_getting-started/create-a-component.md": {
+        "title": "Creating components",
+        "hashes": {
+          "where-to-put-it": {
+            "count": 1,
+            "title": "Where to put it?",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "You can copy example.ts from the source to the desired destination to start with.\nThis file contains a web component in the form of a class that extends the Subscriber mixin, with a reactive property and a render function.\n",
+    "files": {
+      "docs/_getting-started/create-a-component.md": {
+        "title": "Creating components",
+        "hashes": {
+          "starting-from-a-simple-model": {
+            "count": 1,
+            "title": "Starting from a Simple Model",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "@customElement("sonic-example")\nexport class SonicComponent extends Subscriber(LitElement) {\n  @property() text = "Example";\n  render() {\n    return html${this.text};\n  }\n}\n  \n\n",
+    "files": {
+      "docs/_getting-started/create-a-component.md": {
+        "title": "Creating components",
+        "hashes": {
+          "starting-from-a-simple-model": {
+            "count": 1,
+            "title": "Starting from a Simple Model",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "You can remove the dependency on Subscriber if automatic population of the component with external data is not required.\nFor example, for a UI component:\n",
+    "files": {
+      "docs/_getting-started/create-a-component.md": {
+        "title": "Creating components",
+        "hashes": {
+          "starting-from-a-simple-model": {
+            "count": 1,
+            "title": "Starting from a Simple Model",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "@customElement("sonic-example")\nexport class SonicComponent extends LitElement {\n  @property() text = "Example";\n  render() {\n    return html${this.text};\n  }\n}\n  \n\n",
+    "files": {
+      "docs/_getting-started/create-a-component.md": {
+        "title": "Creating components",
+        "hashes": {
+          "starting-from-a-simple-model": {
+            "count": 1,
+            "title": "Starting from a Simple Model",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "Regarding Subscriber, see:\n",
+    "files": {
+      "docs/_getting-started/create-a-component.md": {
+        "title": "Creating components",
+        "hashes": {
+          "starting-from-a-simple-model": {
+            "count": 1,
+            "title": "Starting from a Simple Model",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "The class name is not necessarily important. However, it is important to give it a component name prefixed with "sonic" (or a prefix of your own) using the dedicated metadata already present in the copied document. For example, a button component would be named as follows:\n",
+    "files": {
+      "docs/_getting-started/create-a-component.md": {
+        "title": "Creating components",
+        "hashes": {
+          "naming-the-component": {
+            "count": 1,
+            "title": "Naming the Component",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "For less generic components with a specific destination, we advise to include the destination in the name.\nFor example, for a "title" component in the "event" destination, the name would be simply:\n",
+    "files": {
+      "docs/_getting-started/create-a-component.md": {
+        "title": "Creating components",
+        "hashes": {
+          "naming-the-component": {
+            "count": 1,
+            "title": "Naming the Component",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "To do this, study the functioning of https://lit.dev and also refer to Subscriber.\n",
+    "files": {
+      "docs/_getting-started/create-a-component.md": {
+        "title": "Creating components",
+        "hashes": {
+          "creating-reactive-properties-and-modifying-the-render-function": {
+            "count": 1,
+            "title": "Creating Reactive Properties and Modifying the Render Function",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "The HTML structure of a component should remain as simple as possible.\n",
+    "files": {
+      "docs/_getting-started/create-a-component.md": {
+        "title": "Creating components",
+        "hashes": {
+          "html-structure-of-a-component": {
+            "count": 1,
+            "title": "HTML Structure of a Component",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "Ideally, there should be only one additional level of elements in addition to slots.\n",
+    "files": {
+      "docs/_getting-started/create-a-component.md": {
+        "title": "Creating components",
+        "hashes": {
+          "html-structure-of-a-component": {
+            "count": 1,
+            "title": "HTML Structure of a Component",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "This leads to the creation of more components and thus raises questions about the hierarchical organization of files. However, this tends to atomize their roles.\n",
+    "files": {
+      "docs/_getting-started/create-a-component.md": {
+        "title": "Creating components",
+        "hashes": {
+          "html-structure-of-a-component": {
+            "count": 1,
+            "title": "HTML Structure of a Component",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "To compile the component, it needs to be referenced somewhere through an import statement. In particular, it is important to reference it in any component that uses it.\n",
+    "files": {
+      "docs/_getting-started/create-a-component.md": {
+        "title": "Creating components",
+        "hashes": {
+          "referencing-it": {
+            "count": 1,
+            "title": "Referencing It",
             "type": "paragraph"
           }
         }
@@ -3930,14 +4325,14 @@
     }
   },
   {
-    "search": "tailwind has been integrated into Concorde and is available in scoped components (with Shadow DOM).\nTo use it, you need to import the following:\n",
+    "search": "In the case where it can be directly used in a page, it should also be globally referenced, especially considering the creation of specific bundles in the future.\n",
     "files": {
-      "docs/_getting-started/theming.md": {
-        "title": "Adding styles",
+      "docs/_getting-started/create-a-component.md": {
+        "title": "Creating components",
         "hashes": {
-          "tailwind-functional-classes": {
+          "referencing-it": {
             "count": 1,
-            "title": "TAILWIND Functional Classes",
+            "title": "Referencing It",
             "type": "paragraph"
           }
         }
@@ -3945,14 +4340,14 @@
     }
   },
   {
-    "search": "Then include the tailwind style in the static styles property of the component:\n",
+    "search": "Here's where we add imports based on the component's location inside concorde as an example\n",
     "files": {
-      "docs/_getting-started/theming.md": {
-        "title": "Adding styles",
+      "docs/_getting-started/create-a-component.md": {
+        "title": "Creating components",
         "hashes": {
-          "tailwind-functional-classes": {
+          "referencing-it": {
             "count": 1,
-            "title": "TAILWIND Functional Classes",
+            "title": "Referencing It",
             "type": "paragraph"
           }
         }
@@ -3960,14 +4355,14 @@
     }
   },
   {
-    "search": "Finally, use it in the HTML within the render function:\n",
+    "search": "As a reminder, the component is simply integrated into the context by adding a tag with the component's name, for example:\n",
     "files": {
-      "docs/_getting-started/theming.md": {
-        "title": "Adding styles",
+      "docs/_getting-started/create-a-component.md": {
+        "title": "Creating components",
         "hashes": {
-          "tailwind-functional-classes": {
+          "using-it": {
             "count": 1,
-            "title": "TAILWIND Functional Classes",
+            "title": "Using It",
             "type": "paragraph"
           }
         }
@@ -3975,14 +4370,29 @@
     }
   },
   {
-    "search": "The colors from Concorde's theme are referenced in Tailwind's theme.\n",
+    "search": "My first subscriber component",
     "files": {
-      "docs/_getting-started/theming.md": {
-        "title": "Adding styles",
+      "docs/_getting-started/my-first-subscriber.md": {
+        "title": "My first subscriber component",
         "hashes": {
-          "tailwind-functional-classes": {
+          "my-first-subscriber-component": {
             "count": 1,
-            "title": "TAILWIND Functional Classes",
+            "title": "",
+            "type": "page"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "Learn how to build a subscriber component, styled with tailwind, \nwhich could be used as a regular component or could be filled from a dataprovider.\n",
+    "files": {
+      "docs/_getting-started/my-first-subscriber.md": {
+        "title": "My first subscriber component",
+        "hashes": {
+          "my-first-subscriber-component": {
+            "count": 1,
+            "title": "",
             "type": "paragraph"
           }
         }
@@ -3990,14 +4400,14 @@
     }
   },
   {
-    "search": "This operation is particularly useful when it comes to adding behavior to a simple existing element.\nIt may also become necessary to establish compatibility with a traditional JS library.\n",
+    "search": "First export tailwind, in a tailwind.ts file, stylesheet to add it in our component when needed.\n",
     "files": {
-      "docs/_getting-started/theming.md": {
-        "title": "Adding styles",
+      "docs/_getting-started/my-first-subscriber.md": {
+        "title": "My first subscriber component",
         "hashes": {
-          "usefulness": {
+          "style-with-tailwind-and-ui-components": {
             "count": 1,
-            "title": "Usefulness",
+            "title": "Style with tailwind and ui components",
             "type": "paragraph"
           }
         }
@@ -4005,14 +4415,14 @@
     }
   },
   {
-    "search": "For example, with a text input:\n",
+    "search": "Reactive properties can be filled by its attributes as a simple lit component.\n",
     "files": {
-      "docs/_getting-started/theming.md": {
-        "title": "Adding styles",
+      "docs/_getting-started/my-first-subscriber.md": {
+        "title": "My first subscriber component",
         "hashes": {
-          "usefulness": {
+          "basic-usage": {
             "count": 1,
-            "title": "Usefulness",
+            "title": "Basic usage",
             "type": "paragraph"
           }
         }
@@ -4020,14 +4430,14 @@
     }
   },
   {
-    "search": "If there is no shadow DOM (see the noShadowDom property of Subscriber):\n",
+    "search": "Import Subscriber mixin, and add it around LitElement.\n\n",
     "files": {
-      "docs/_getting-started/theming.md": {
-        "title": "Adding styles",
+      "docs/_getting-started/my-first-subscriber.md": {
+        "title": "My first subscriber component",
         "hashes": {
-          "consequences": {
+          "add-subscriber-mixin": {
             "count": 1,
-            "title": "Consequences",
+            "title": "Add Subscriber mixin",
             "type": "paragraph"
           }
         }
@@ -4035,14 +4445,14 @@
     }
   },
   {
-    "search": "For example, the components queue, list, and fetch do not have a shadow DOM.\n",
+    "search": "Without a dataProvider attribute, a subscriber set its own dataprovider from first ancestor found, and then reactive properties automatically filled and update from it.\nA fetcher is a simple component which set its fetch result to props of its dataprovider.\n\n",
     "files": {
-      "docs/_getting-started/theming.md": {
-        "title": "Adding styles",
+      "docs/_getting-started/my-first-subscriber.md": {
+        "title": "My first subscriber component",
         "hashes": {
-          "consequences": {
+          "autofill-properties-from-a-dataprovider": {
             "count": 1,
-            "title": "Consequences",
+            "title": "Autofill properties from a dataProvider",
             "type": "paragraph"
           }
         }
@@ -4050,14 +4460,14 @@
     }
   },
   {
-    "search": "ℹ️ Note: Specifically in this case, it may be useful to set the display property to contents.\n",
+    "search": "A subscriber can subscribe data from anywhere in the DOM, with its dataprovider set as a provider id.\n",
     "files": {
-      "docs/_getting-started/theming.md": {
-        "title": "Adding styles",
+      "docs/_getting-started/my-first-subscriber.md": {
+        "title": "My first subscriber component",
         "hashes": {
-          "consequences": {
+          "autofill-properties-from-a-dataprovider": {
             "count": 1,
-            "title": "Consequences",
+            "title": "Autofill properties from a dataProvider",
             "type": "paragraph"
           }
         }
@@ -4065,12 +4475,12 @@
     }
   },
   {
-    "search": "@ancestorAttribute",
+    "search": "Sharing data",
     "files": {
-      "docs/_misc/ancestor-attribute.md": {
-        "title": "@ancestorAttribute",
+      "docs/_getting-started/pubsub.md": {
+        "title": "Sharing data",
         "hashes": {
-          "ancestorattribute": {
+          "sharing-data": {
             "count": 1,
             "title": "",
             "type": "page"
@@ -4080,12 +4490,12 @@
     }
   },
   {
-    "search": "The @ancestorAttribute decorator automatically injects the value of an ancestor's attribute into a class property at the time of connectedCallback.\n",
+    "search": "This section describes how we share data between graphical and non graphical components and classes.\n",
     "files": {
-      "docs/_misc/ancestor-attribute.md": {
-        "title": "@ancestorAttribute",
+      "docs/_getting-started/pubsub.md": {
+        "title": "Sharing data",
         "hashes": {
-          "ancestorattribute": {
+          "sharing-data": {
             "count": 1,
             "title": "",
             "type": "paragraph"
@@ -4095,10 +4505,40 @@
     }
   },
   {
-    "search": "This decorator uses HTML.getAncestorAttributeValue to traverse up the DOM tree from the current element and find the first ancestor that has the specified attribute. The value of this attribute is then assigned to the decorated property.\n",
+    "search": "Especialy, graphical components should not reference each other in order to remain decoupled.\n",
     "files": {
-      "docs/_misc/ancestor-attribute.md": {
-        "title": "@ancestorAttribute",
+      "docs/_getting-started/pubsub.md": {
+        "title": "Sharing data",
+        "hashes": {
+          "sharing-data": {
+            "count": 1,
+            "title": "",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "Thats why we use publish/subscribe paradigm to addresse this issue.\n",
+    "files": {
+      "docs/_getting-started/pubsub.md": {
+        "title": "Sharing data",
+        "hashes": {
+          "sharing-data": {
+            "count": 1,
+            "title": "",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "❇️ The order of data creation and subscription theoretically has no importance.\n",
+    "files": {
+      "docs/_getting-started/pubsub.md": {
+        "title": "Sharing data",
         "hashes": {
           "principle": {
             "count": 1,
@@ -4110,14 +4550,14 @@
     }
   },
   {
-    "search": "Le composant lit les attributs dataProvider et testAttribute exposés par son conteneur ancêtre.\n",
+    "search": "Denotes the identifier of a publisher as referenced in the PublisherManager (see below).\nUses the dataProvider attribut in html tags to scop the content with some data.\nsee Subscribers.\n",
     "files": {
-      "docs/_misc/ancestor-attribute.md": {
-        "title": "@ancestorAttribute",
+      "docs/_getting-started/pubsub.md": {
+        "title": "Sharing data",
         "hashes": {
-          "basic-example": {
+          "dataprovider": {
             "count": 1,
-            "title": "Basic example",
+            "title": "DataProvider",
             "type": "paragraph"
           }
         }
@@ -4125,44 +4565,59 @@
     }
   },
   {
-    "search": "This decorator is particularly useful for:\n",
+    "search": "The PublisherManager is a utility class to get publishers\n",
     "files": {
-      "docs/_misc/ancestor-attribute.md": {
-        "title": "@ancestorAttribute",
+      "docs/_getting-started/pubsub.md": {
+        "title": "Sharing data",
         "hashes": {
-          "use-cases": {
+          "publishermanager": {
             "count": 1,
-            "title": "Use cases",
+            "title": "PublisherManager",
             "type": "paragraph"
           }
         }
-      },
-      "docs/_misc/auto-subscribe.md": {
-        "title": "@autoSubscribe",
+      }
+    }
+  },
+  {
+    "search": "It plays a central role in the components, especially through the "subscriber" mixin.\nAutomatic data communication between components in concorde uses this principle in conjunction with Lit's reactive properties. \nRefer to the documentation for Subscriber.\n",
+    "files": {
+      "docs/_getting-started/pubsub.md": {
+        "title": "Sharing data",
         "hashes": {
-          "use-cases": {
+          "publishermanager": {
             "count": 1,
-            "title": "Use cases",
+            "title": "PublisherManager",
             "type": "paragraph"
           }
         }
-      },
-      "docs/_misc/bind.md": {
-        "title": "@bind",
+      }
+    }
+  },
+  {
+    "search": "It is declared on the window object to allow usage in a web page, so the equivalent one-liner would be:\n",
+    "files": {
+      "docs/_getting-started/pubsub.md": {
+        "title": "Sharing data",
         "hashes": {
-          "use-cases": {
+          "publishermanager": {
             "count": 1,
-            "title": "Use cases",
+            "title": "PublisherManager",
             "type": "paragraph"
           }
         }
-      },
-      "docs/_misc/on-assign.md": {
-        "title": "@onAssign",
+      }
+    }
+  },
+  {
+    "search": "This example can be tested in a console when Concorde is loaded on the page (for example, in a ticketing system).\nIn a component, you will need to perform an import as explained earlier.\n",
+    "files": {
+      "docs/_getting-started/pubsub.md": {
+        "title": "Sharing data",
         "hashes": {
-          "use-cases": {
+          "basic-example": {
             "count": 1,
-            "title": "Use cases",
+            "title": "Basic Example",
             "type": "paragraph"
           }
         }
@@ -4170,12 +4625,12 @@
     }
   },
   {
-    "search": "@autoSubscribe",
+    "search": "Introduction",
     "files": {
-      "docs/_misc/auto-subscribe.md": {
-        "title": "@autoSubscribe",
+      "docs/_getting-started/start.md": {
+        "title": "Introduction",
         "hashes": {
-          "autosubscribe": {
+          "introduction": {
             "count": 1,
             "title": "",
             "type": "page"
@@ -4185,14 +4640,14 @@
     }
   },
   {
-    "search": "The @autoSubscribe decorator automatically detects which publishers are accessed within a method and subscribes to them. When any of these publishers change, the method is automatically re-executed.\n",
+    "search": "Based on lit.dev, Concorde is a collection of webcomponents made to build shared apps or websites.Develop user interfaces without thinking about the implementation context, where everything is scoped, but preserving graphic consistency by setting the strict minimum of css variables.\n",
     "files": {
-      "docs/_misc/auto-subscribe.md": {
-        "title": "@autoSubscribe",
+      "docs/_getting-started/start.md": {
+        "title": "Introduction",
         "hashes": {
-          "autosubscribe": {
+          "what-is-concorde-": {
             "count": 1,
-            "title": "",
+            "title": "What is Concorde ?",
             "type": "paragraph"
           }
         }
@@ -4200,14 +4655,29 @@
     }
   },
   {
-    "search": "This decorator wraps a method to track which publishers are accessed during its execution. It then subscribes to all accessed publishers, and when any of them change, the method is re-executed. This provides automatic reactivity without manually managing subscriptions.\n",
+    "search": "In 2022, Supersoniks wanted to create a new version of his ticketing app, in production un nearly 100 websites. We needed shared components which could be implemented in mobile apps, modern websites, and also old ones made in php, without bundlers or whatever.Instead of building a new app for each type of project, which would become impossible to maintain, we've decided to create one app, composed by a few webcomponents wich could easily be recomposed on any website.\nWebcomponents appeared to be a the perfect solution to guarantee that compatibility with all past, present and futures environment, and lit seemed to be the best choice to build them.\n",
     "files": {
-      "docs/_misc/auto-subscribe.md": {
-        "title": "@autoSubscribe",
+      "docs/_getting-started/start.md": {
+        "title": "Introduction",
         "hashes": {
-          "principle": {
+          "why-and-use-case": {
             "count": 1,
-            "title": "Principle",
+            "title": "Why and use case",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "A new project with Vite, Typescript and Tailwind already configured and a simple example of a subscriber component : \n",
+    "files": {
+      "docs/_getting-started/start.md": {
+        "title": "Introduction",
+        "hashes": {
+          "start-a-new-project-easily": {
+            "count": 1,
+            "title": "Start a new project easily",
             "type": "paragraph"
           }
         }
@@ -4215,12 +4685,12 @@
     }
   },
   {
-    "search": "@bind",
+    "search": "Adding styles",
     "files": {
-      "docs/_misc/bind.md": {
-        "title": "@bind",
+      "docs/_getting-started/theming.md": {
+        "title": "Adding styles",
         "hashes": {
-          "bind": {
+          "adding-styles": {
             "count": 1,
             "title": "",
             "type": "page"
@@ -4230,14 +4700,14 @@
     }
   },
   {
-    "search": "The @bind decorator automatically binds a class property to a path in a publisher. The property will be automatically \nupdated when the publisher's data changes.\n",
+    "search": "No style crosses the shadow root of a component, except for inheritable properties (which have the "inherit" property possible) and CSS variables.\nProperties integrated via a "slot" remain stylizable in a conventional way.\n",
     "files": {
-      "docs/_misc/bind.md": {
-        "title": "@bind",
+      "docs/_getting-started/theming.md": {
+        "title": "Adding styles",
         "hashes": {
-          "bind": {
+          "normal-behavior": {
             "count": 1,
-            "title": "",
+            "title": "Normal Behavior",
             "type": "paragraph"
           }
         }
@@ -4245,14 +4715,14 @@
     }
   },
   {
-    "search": "If you need to trigger the rendering lifecycle of a LitElement, please also add the @state() decorator to the property.\n",
+    "search": "The declaration of reactive properties is useful for selecting a particular configuration that mostly affects a set of properties.\n",
     "files": {
-      "docs/_misc/bind.md": {
-        "title": "@bind",
+      "docs/_getting-started/theming.md": {
+        "title": "Adding styles",
         "hashes": {
-          "bind": {
+          "choosing-style-presets-via-reactive-properties": {
             "count": 1,
-            "title": "",
+            "title": "Choosing Style Presets via Reactive Properties:",
             "type": "paragraph"
           }
         }
@@ -4260,14 +4730,14 @@
     }
   },
   {
-    "search": "This decorator subscribes to a publisher via the PublisherManager using a path (dot notation) to access a specific property. When this property is modified in the publisher, the decorated property is automatically updated.\n",
+    "search": "For example, a size property (xs, sm, md, xl) will affect margins, font, line heights to align them with the corresponding CSS vars, which can be customized using the methods mentioned earlier if necessary.\n",
     "files": {
-      "docs/_misc/bind.md": {
-        "title": "@bind",
+      "docs/_getting-started/theming.md": {
+        "title": "Adding styles",
         "hashes": {
-          "principle": {
+          "choosing-style-presets-via-reactive-properties": {
             "count": 1,
-            "title": "Principle",
+            "title": "Choosing Style Presets via Reactive Properties:",
             "type": "paragraph"
           }
         }
@@ -4275,14 +4745,14 @@
     }
   },
   {
-    "search": "Lorsque vous avez besoin que les modifications locales se propagent également vers le publisher, activez l'option reflect :\n",
+    "search": "It is recommended to use the {reflect: true} property for reactive properties that have an associated style on the :host(). For example: :host([type='primary']){...}\n",
     "files": {
-      "docs/_misc/bind.md": {
-        "title": "@bind",
+      "docs/_getting-started/theming.md": {
+        "title": "Adding styles",
         "hashes": {
-          "reflect-liaison-bidirectionnelle": {
+          "choosing-style-presets-via-reactive-properties": {
             "count": 1,
-            "title": "Reflect (liaison bidirectionnelle)",
+            "title": "Choosing Style Presets via Reactive Properties:",
             "type": "paragraph"
           }
         }
@@ -4290,24 +4760,14 @@
     }
   },
   {
-    "search": "The path uses dot notation to navigate through the publisher structure:\n",
+    "search": "☢️ Caution: Passing class names via reactive properties / HTML attributes of the component should be avoided as it can quickly lead to difficult-to-manage situations.\n",
     "files": {
-      "docs/_misc/bind.md": {
-        "title": "@bind",
-        "hashes": {
-          "path-syntax": {
-            "count": 1,
-            "title": "Path syntax",
-            "type": "paragraph"
-          }
-        }
-      },
-      "docs/_misc/on-assign.md": {
-        "title": "@onAssign",
+      "docs/_getting-started/theming.md": {
+        "title": "Adding styles",
         "hashes": {
-          "path-syntax": {
+          "choosing-style-presets-via-reactive-properties": {
             "count": 1,
-            "title": "Path syntax",
+            "title": "Choosing Style Presets via Reactive Properties:",
             "type": "paragraph"
           }
         }
@@ -4315,14 +4775,14 @@
     }
   },
   {
-    "search": "You can now build the path dynamically by referencing the host class properties inside the string passed to @bind. Two placeholder syntaxes are supported:\n",
+    "search": "By default, the display property is inline.\nTherefore, be careful to define it according to the needs, as one might mistakenly expect it to be block as with a regular <div>.\n",
     "files": {
-      "docs/_misc/bind.md": {
-        "title": "@bind",
+      "docs/_getting-started/theming.md": {
+        "title": "Adding styles",
         "hashes": {
-          "dynamic-path-driven-by-class-properties": {
+          "css-display-property": {
             "count": 1,
-            "title": "Dynamic path driven by class properties",
+            "title": "CSS \"display\" Property",
             "type": "paragraph"
           }
         }
@@ -4330,14 +4790,14 @@
     }
   },
   {
-    "search": "Each placeholder is replaced at runtime with the current value of the corresponding property. @bind automatically watches those properties and:\n",
+    "search": "☢️ Caution: Defining the display property as contents may seem attractive at first, but:\n",
     "files": {
-      "docs/_misc/bind.md": {
-        "title": "@bind",
+      "docs/_getting-started/theming.md": {
+        "title": "Adding styles",
         "hashes": {
-          "dynamic-path-driven-by-class-properties": {
+          "css-display-property": {
             "count": 1,
-            "title": "Dynamic path driven by class properties",
+            "title": "CSS \"display\" Property",
             "type": "paragraph"
           }
         }
@@ -4345,14 +4805,14 @@
     }
   },
   {
-    "search": "  }\n  //\n  render() {\n    return html      <div class="flex flex-col gap-2">         <sonic-select           .value=${this.dataProvider}           label="Users set"           @change=${this.updateDataProvider}         >           <option value="demoUsers">First set of users</option>           <option value="demoUsersAlt">Second set of users</option>         </sonic-select>         <sonic-input           type="number"           .value=${this.userIndex}           @input=${this.updateUserIndex}           min="0"           max="9"           label="Index"           class="block"         >         </sonic-input>         <sonic-button @click=${this.updateCurrentUserData}           >Update current user data</sonic-button         >         <div class="flex flex-col gap-2 border p-2">           <div>             <sonic-icon name="user" library="heroicons"></sonic-icon>             ${this.user?.firstName} ${this.user?.lastName}           </div>           <div>             <sonic-icon name="envelope" library="heroicons"></sonic-icon>             ${this.user?.email}           </div>         </div>       </div>    ;\n  }\n",
+    "search": "tailwind has been integrated into Concorde and is available in scoped components (with Shadow DOM).\nTo use it, you need to import the following:\n",
     "files": {
-      "docs/_misc/bind.md": {
-        "title": "@bind",
+      "docs/_getting-started/theming.md": {
+        "title": "Adding styles",
         "hashes": {
-          "dynamic-path-driven-by-class-properties": {
+          "tailwind-functional-classes": {
             "count": 1,
-            "title": "Dynamic path driven by class properties",
+            "title": "TAILWIND Functional Classes",
             "type": "paragraph"
           }
         }
@@ -4360,14 +4820,14 @@
     }
   },
   {
-    "search": "⚠️ Use a classic string literal: @bind("${dataProvider}.${profileId}.info.title"). Do not use a template literal (backticks), otherwise JavaScript would try to interpolate the value immediately.\n",
+    "search": "Then include the tailwind style in the static styles property of the component:\n",
     "files": {
-      "docs/_misc/bind.md": {
-        "title": "@bind",
+      "docs/_getting-started/theming.md": {
+        "title": "Adding styles",
         "hashes": {
-          "dynamic-path-driven-by-class-properties": {
+          "tailwind-functional-classes": {
             "count": 1,
-            "title": "Dynamic path driven by class properties",
+            "title": "TAILWIND Functional Classes",
             "type": "paragraph"
           }
         }
@@ -4375,24 +4835,14 @@
     }
   },
   {
-    "search": "Additional constraints:\n",
+    "search": "Finally, use it in the HTML within the render function:\n",
     "files": {
-      "docs/_misc/bind.md": {
-        "title": "@bind",
-        "hashes": {
-          "dynamic-path-driven-by-class-properties": {
-            "count": 1,
-            "title": "Dynamic path driven by class properties",
-            "type": "paragraph"
-          }
-        }
-      },
-      "docs/_misc/on-assign.md": {
-        "title": "@onAssign",
+      "docs/_getting-started/theming.md": {
+        "title": "Adding styles",
         "hashes": {
-          "dynamic-path-driven-by-class-properties": {
+          "tailwind-functional-classes": {
             "count": 1,
-            "title": "Dynamic path driven by class properties",
+            "title": "TAILWIND Functional Classes",
             "type": "paragraph"
           }
         }
@@ -4400,29 +4850,29 @@
     }
   },
   {
-    "search": "@onAssign",
+    "search": "The colors from Concorde's theme are referenced in Tailwind's theme.\n",
     "files": {
-      "docs/_misc/on-assign.md": {
-        "title": "@onAssign",
+      "docs/_getting-started/theming.md": {
+        "title": "Adding styles",
         "hashes": {
-          "onassign": {
+          "tailwind-functional-classes": {
             "count": 1,
-            "title": "",
-            "type": "page"
+            "title": "TAILWIND Functional Classes",
+            "type": "paragraph"
           }
         }
       }
     }
   },
   {
-    "search": "The @onAssign decorator allows you to execute a method when one or more publishers are updated. The method is called only when all specified publishers have been assigned values.\n",
+    "search": "This operation is particularly useful when it comes to adding behavior to a simple existing element.\nIt may also become necessary to establish compatibility with a traditional JS library.\n",
     "files": {
-      "docs/_misc/on-assign.md": {
-        "title": "@onAssign",
+      "docs/_getting-started/theming.md": {
+        "title": "Adding styles",
         "hashes": {
-          "onassign": {
+          "usefulness": {
             "count": 1,
-            "title": "",
+            "title": "Usefulness",
             "type": "paragraph"
           }
         }
@@ -4430,14 +4880,14 @@
     }
   },
   {
-    "search": "This decorator subscribes to one or more publishers via the PublisherManager. When all specified publishers have been assigned values (via set), the decorated method is called with all the values as arguments.\n",
+    "search": "For example, with a text input:\n",
     "files": {
-      "docs/_misc/on-assign.md": {
-        "title": "@onAssign",
+      "docs/_getting-started/theming.md": {
+        "title": "Adding styles",
         "hashes": {
-          "principle": {
+          "usefulness": {
             "count": 1,
-            "title": "Principle",
+            "title": "Usefulness",
             "type": "paragraph"
           }
         }
@@ -4445,14 +4895,14 @@
     }
   },
   {
-    "search": "This is particularly useful when you need to wait for multiple data sources to be ready before executing logic.\n",
+    "search": "If there is no shadow DOM (see the noShadowDom property of Subscriber):\n",
     "files": {
-      "docs/_misc/on-assign.md": {
-        "title": "@onAssign",
+      "docs/_getting-started/theming.md": {
+        "title": "Adding styles",
         "hashes": {
-          "principle": {
+          "consequences": {
             "count": 1,
-            "title": "Principle",
+            "title": "Consequences",
             "type": "paragraph"
           }
         }
@@ -4460,14 +4910,14 @@
     }
   },
   {
-    "search": "You can now build the paths dynamically by referencing the host class properties inside the strings passed to @onAssign. Two placeholder syntaxes are supported:\n",
+    "search": "For example, the components queue, list, and fetch do not have a shadow DOM.\n",
     "files": {
-      "docs/_misc/on-assign.md": {
-        "title": "@onAssign",
+      "docs/_getting-started/theming.md": {
+        "title": "Adding styles",
         "hashes": {
-          "dynamic-path-driven-by-class-properties": {
+          "consequences": {
             "count": 1,
-            "title": "Dynamic path driven by class properties",
+            "title": "Consequences",
             "type": "paragraph"
           }
         }
@@ -4475,14 +4925,14 @@
     }
   },
   {
-    "search": "Each placeholder is replaced at runtime with the current value of the corresponding property. @onAssign automatically watches those properties and:\n",
+    "search": "ℹ️ Note: Specifically in this case, it may be useful to set the display property to contents.\n",
     "files": {
-      "docs/_misc/on-assign.md": {
-        "title": "@onAssign",
+      "docs/_getting-started/theming.md": {
+        "title": "Adding styles",
         "hashes": {
-          "dynamic-path-driven-by-class-properties": {
+          "consequences": {
             "count": 1,
-            "title": "Dynamic path driven by class properties",
+            "title": "Consequences",
             "type": "paragraph"
           }
         }
@@ -4490,42 +4940,42 @@
     }
   },
   {
-    "search": "⚠️ Use classic string literals: @onAssign("${dataProvider}.${profileId}", "settings.${profileId}"). Do not use template literals (backticks), otherwise JavaScript would try to interpolate the value immediately.\n",
+    "search": "DataProviderKey",
     "files": {
-      "docs/_misc/on-assign.md": {
-        "title": "@onAssign",
+      "docs/_misc/dataProviderKey.md": {
+        "title": "DataProviderKey",
         "hashes": {
-          "dynamic-path-driven-by-class-properties": {
+          "dataproviderkey": {
             "count": 1,
-            "title": "Dynamic path driven by class properties",
-            "type": "paragraph"
+            "title": "",
+            "type": "page"
           }
         }
       }
     }
   },
   {
-    "search": "Templates Demo",
+    "search": "The DataProviderKey<T> utility provides type-safe navigation through composite data structures. Each property or index access extends the path, and the final key can be retrieved via toString() or the path property.\n",
     "files": {
-      "docs/_misc/templates-demo.md": {
-        "title": "Templates Demo",
+      "docs/_misc/dataProviderKey.md": {
+        "title": "DataProviderKey",
         "hashes": {
-          "templates-demo": {
+          "dataproviderkey": {
             "count": 1,
             "title": "",
-            "type": "page"
+            "type": "paragraph"
           }
         }
       }
     }
   },
   {
-    "search": "Some test/demos\n",
+    "search": "For a single HTTP path string (no dot-syntax), see Endpoint.\n",
     "files": {
-      "docs/_misc/templates-demo.md": {
-        "title": "Templates Demo",
+      "docs/_misc/dataProviderKey.md": {
+        "title": "DataProviderKey",
         "hashes": {
-          "templates-demo": {
+          "dataproviderkey": {
             "count": 1,
             "title": "",
             "type": "paragraph"
@@ -4535,29 +4985,29 @@
     }
   },
   {
-    "search": "@awaitConnectedAncestors and @dispatchConnectedEvent",
+    "search": "DataProviderKey uses a Proxy to intercept property access and build a cumulative path string. TypeScript infers the nested type at each level, so myKey.items[0] is correctly typed as DataProviderKey<Item> when items is Item[].\n",
     "files": {
-      "docs/_misc/wait-for-ancestors.md": {
-        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
+      "docs/_misc/dataProviderKey.md": {
+        "title": "DataProviderKey",
         "hashes": {
-          "awaitconnectedancestors-and-dispatchconnectedevent": {
+          "principle": {
             "count": 1,
-            "title": "",
-            "type": "page"
+            "title": "Principle",
+            "type": "paragraph"
           }
         }
       }
     }
   },
   {
-    "search": "The @awaitConnectedAncestors and @dispatchConnectedEvent decorators delay a web component's initialization until its matching ancestors have executed their connectedCallback. This is when contextual elements (publisher, dataProvider, etc.) are configured.\n",
+    "search": "Use placeholders ${prop} or {$prop} in the path string. The path is resolved at runtime from the component's properties. The type remains declarative:\n",
     "files": {
-      "docs/_misc/wait-for-ancestors.md": {
-        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
+      "docs/_misc/dataProviderKey.md": {
+        "title": "DataProviderKey",
         "hashes": {
-          "awaitconnectedancestors-and-dispatchconnectedevent": {
+          "dynamic-paths": {
             "count": 1,
-            "title": "",
+            "title": "Dynamic paths",
             "type": "paragraph"
           }
         }
@@ -4565,14 +5015,14 @@
     }
   },
   {
-    "search": "When a child component attaches to the DOM, its ancestors may not yet be initialized (especially if custom element definitions are loaded asynchronously). The @awaitConnectedAncestors decorator delays the component's connectedCallback until all ancestors matching the provided CSS selectors have executed their connectedCallback.\n",
+    "search": "The final path is built by concatenating each accessed property with a dot:\n",
     "files": {
-      "docs/_misc/wait-for-ancestors.md": {
-        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
+      "docs/_misc/dataProviderKey.md": {
+        "title": "DataProviderKey",
         "hashes": {
-          "principle": {
+          "path-retrieval": {
             "count": 1,
-            "title": "Principle",
+            "title": "Path retrieval",
             "type": "paragraph"
           }
         }
@@ -4580,14 +5030,14 @@
     }
   },
   {
-    "search": "The @dispatchConnectedEvent decorator allows ancestors to signal they are ready by dispatching the sonic-connected event at the end of their connectedCallback. The event bubbles, so it can be listened to from anywhere (e.g. document.addEventListener(CONNECTED, handler)).\n",
+    "search": "Use toString() or path to get the full path string:\n",
     "files": {
-      "docs/_misc/wait-for-ancestors.md": {
-        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
+      "docs/_misc/dataProviderKey.md": {
+        "title": "DataProviderKey",
         "hashes": {
-          "principle": {
+          "path-retrieval": {
             "count": 1,
-            "title": "Principle",
+            "title": "Path retrieval",
             "type": "paragraph"
           }
         }
@@ -4595,14 +5045,14 @@
     }
   },
   {
-    "search": "Ancestors that are not web components (no hyphen in tag name) are considered connected by default and do not need to emit the event.\n",
+    "search": "Use DataProviderKey with @subscribe (read-only) or @publish (write-only). The decorated property must match the key’s value type:\n",
     "files": {
-      "docs/_misc/wait-for-ancestors.md": {
-        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
+      "docs/_misc/dataProviderKey.md": {
+        "title": "DataProviderKey",
         "hashes": {
-          "principle": {
+          "integration-with-subscribe-and-publish": {
             "count": 1,
-            "title": "Principle",
+            "title": "Integration with @subscribe and @publish",
             "type": "paragraph"
           }
         }
@@ -4610,14 +5060,14 @@
     }
   },
   {
-    "search": "An ancestor container decorated with @dispatchConnectedEvent() signals when it is ready. A child component decorated with @awaitConnectedAncestors("demo-wait-ancestor-container[dataProvider]") waits for this container to be initialized before initializing itself. Parameters are CSS selectors (element.matches()).\n",
+    "search": "Both decorators support dynamic paths: "base.${prop}" in the constructor. A wrong property type (e.g. number for DataProviderKey<string>) is a TypeScript error.\n",
     "files": {
-      "docs/_misc/wait-for-ancestors.md": {
-        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
+      "docs/_misc/dataProviderKey.md": {
+        "title": "DataProviderKey",
         "hashes": {
-          "basic-example": {
+          "integration-with-subscribe-and-publish": {
             "count": 1,
-            "title": "Basic example",
+            "title": "Integration with @subscribe and @publish",
             "type": "paragraph"
           }
         }
@@ -4625,29 +5075,29 @@
     }
   },
   {
-    "search": "The parent is registered via customElements.define() (vanilla JS) rather than @customElement, so it can be defined later—e.g. when the user clicks a button. This demonstrates the child waiting until the parent exists.\n",
+    "search": "Endpoint",
     "files": {
-      "docs/_misc/wait-for-ancestors.md": {
-        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
+      "docs/_misc/endpoint.md": {
+        "title": "Endpoint",
         "hashes": {
-          "basic-example": {
+          "endpoint": {
             "count": 1,
-            "title": "Basic example",
-            "type": "paragraph"
+            "title": "",
+            "type": "page"
           }
         }
       }
     }
   },
   {
-    "search": "The child waits for all specified ancestors. Register outer first, then inner — the child initializes only when both are ready.\n",
+    "search": "Endpoint<T, U> describes a single HTTP path (or a path accepted by API.get) and carries the expected response type T. Unlike DataProviderKey, there is no dot-navigation: the path is one string.\n",
     "files": {
-      "docs/_misc/wait-for-ancestors.md": {
-        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
+      "docs/_misc/endpoint.md": {
+        "title": "Endpoint",
         "hashes": {
-          "multiple-ancestors": {
+          "endpoint": {
             "count": 1,
-            "title": "Multiple ancestors",
+            "title": "",
             "type": "paragraph"
           }
         }
@@ -4655,14 +5105,14 @@
     }
   },
   {
-    "search": "When the parent is defined at load and already in the DOM, the child initializes immediately (no delay).\n",
+    "search": "The optional second generic U (default any) describes host properties used to resolve dynamic segments in the path (${…} / {$…}), for example with the @get decorator.\n",
     "files": {
-      "docs/_misc/wait-for-ancestors.md": {
-        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
+      "docs/_misc/endpoint.md": {
+        "title": "Endpoint",
         "hashes": {
-          "ancestors-already-connected": {
+          "endpoint": {
             "count": 1,
-            "title": "Ancestors already connected",
+            "title": "",
             "type": "paragraph"
           }
         }
@@ -4670,14 +5120,14 @@
     }
   },
   {
-    "search": "Static (both in DOM from start):\n",
+    "search": "Endpoint.normalizePath trims the string, rejects an empty path, strips leading slashes for paths relative to serviceURL, collapses duplicate slashes, and validates absolute http(s):// URLs.\n",
     "files": {
-      "docs/_misc/wait-for-ancestors.md": {
-        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
+      "docs/_misc/endpoint.md": {
+        "title": "Endpoint",
         "hashes": {
-          "ancestors-already-connected": {
+          "normalization": {
             "count": 1,
-            "title": "Ancestors already connected",
+            "title": "Normalization",
             "type": "paragraph"
           }
         }
@@ -4685,14 +5135,14 @@
     }
   },
   {
-    "search": "Dynamic (child added on button click):\n",
+    "search": "getDataProviderKey() returns a typed publisher key whose path matches the endpoint path (payload typing follows ApiGetResult for this endpoint). Useful when pairing @get with @publish / @subscribe (see @get).\n",
     "files": {
-      "docs/_misc/wait-for-ancestors.md": {
-        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
+      "docs/_misc/endpoint.md": {
+        "title": "Endpoint",
         "hashes": {
-          "ancestors-already-connected": {
+          "publisher-key-for-payloads": {
             "count": 1,
-            "title": "Ancestors already connected",
+            "title": "Publisher key for payloads",
             "type": "paragraph"
           }
         }
@@ -4700,14 +5150,14 @@
     }
   },
   {
-    "search": "Parameters are CSS selectors matched via element.matches() — e.g. "sonic-subscriber", "sonic-subscriber[dataProvider]", ".my-container", or multiple: "sonic-subscriber", "sonic-sdui".\n",
+    "search": "Endpoint.looksLikeDataProviderPath(path) returns true for strings shaped like dataProvider(id)…, which API.get can resolve without HTTP.\n",
     "files": {
-      "docs/_misc/wait-for-ancestors.md": {
-        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
+      "docs/_misc/endpoint.md": {
+        "title": "Endpoint",
         "hashes": {
-          "css-selector-support": {
+          "data-provider-paths": {
             "count": 1,
-            "title": "CSS selector support",
+            "title": "Data-provider paths",
             "type": "paragraph"
           }
         }
@@ -4715,29 +5165,29 @@
     }
   },
   {
-    "search": "These decorators are particularly useful for:\n",
+    "search": "Templates Demo",
     "files": {
-      "docs/_misc/wait-for-ancestors.md": {
-        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
+      "docs/_misc/templates-demo.md": {
+        "title": "Templates Demo",
         "hashes": {
-          "use-cases": {
+          "templates-demo": {
             "count": 1,
-            "title": "Use cases",
-            "type": "paragraph"
+            "title": "",
+            "type": "page"
           }
         }
       }
     }
   },
   {
-    "search": "The sonic-connected event bubbles, so you can listen to it from anywhere:\n",
+    "search": "Some test/demos\n",
     "files": {
-      "docs/_misc/wait-for-ancestors.md": {
-        "title": "@awaitConnectedAncestors and @dispatchConnectedEvent",
+      "docs/_misc/templates-demo.md": {
+        "title": "Templates Demo",
         "hashes": {
-          "listening-to-the-connected-event": {
+          "templates-demo": {
             "count": 1,
-            "title": "Listening to the connected event",
+            "title": "",
             "type": "paragraph"
           }
         }