@supersoniks/concorde 5.0.2 → 5.0.4

package/docs/src/core/components/ui/toast/toast.md

@@ -0,0 +1,166 @@
+# Toast
+
+## Utilisation de base
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="window.SonicToast.add({ text: 'Message de notification simple' })">
+      Afficher un toast
+    </sonic-button>
+  </template>
+</sonic-code>
+
+## Statut
+
+Les statuts disponibles sont : `success`, `error`, `warning`, `info` ou vide (par défaut).
+
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2">
+      <sonic-button onclick="window.SonicToast.add({ text: 'Message par défaut', status: '' })">
+        Default
+      </sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Opération réussie !', status: 'success' })">
+        Success
+      </sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Une erreur est survenue', status: 'error' })">
+        Error
+      </sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Attention à ce point', status: 'warning' })">
+        Warning
+      </sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Information importante', status: 'info' })">
+        Info
+      </sonic-button>
+    </div>
+  </template>
+</sonic-code>
+
+## Avec titre
+
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2">
+      <sonic-button onclick="window.SonicToast.add({ title: 'Succès', text: 'Votre demande a été traitée avec succès.', status: 'success' })">
+        Toast avec titre
+      </sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ title: 'Test', text: 'Une erreur est survenue lors du traitement.', status: 'error' })">
+        Toast d'erreur avec titre
+      </sonic-button>
+    </div>
+  </template>
+</sonic-code>
+
+## Avec contenu HTML
+
+Le contenu du toast peut contenir du HTML.
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="window.SonicToast.add({ text: 'Message avec <strong>HTML</strong> et un <a href=&quot;#&quot;>lien cliquable</a>', status: 'info' })">
+      Toast avec HTML
+    </sonic-button>
+  </template>
+</sonic-code>
+
+
+## Persistance
+
+Par défaut, les toasts disparaissent automatiquement. Avec `preserve: true`, le toast reste affiché jusqu'à ce qu'il soit fermé manuellement.
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="window.SonicToast.add({ text: 'Ce toast ne disparaîtra pas automatiquement', status: 'info', preserve: true })">
+      Toast persistant
+    </sonic-button>
+  </template>
+</sonic-code>
+
+## Masquer définitivement
+
+Avec `dismissForever: true` et un `id`, le toast peut être masqué définitivement. Une fois fermé, il ne réapparaîtra plus même après rechargement de la page.
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="window.SonicToast.add({ id: 'unique-toast-id', text: 'Ce toast peut être masqué définitivement', status: 'info', dismissForever: true })">
+      Toast avec dismiss forever
+    </sonic-button>
+  </template>
+</sonic-code>
+
+## Fantôme
+
+Avec `ghost: true`, le toast devient semi-transparent et non-interactif.
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="window.SonicToast.add({ text: 'Toast fantôme (semi-transparent)', status: 'info', ghost: true })">
+      Toast ghost
+    </sonic-button>
+  </template>
+</sonic-code>
+
+
+## Méthodes de suppression
+
+### Tout supprimer
+
+Supprime tous les toasts sauf ceux marqués comme `ghost`.
+
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2">
+      <sonic-button onclick="window.SonicToast.add({ text: 'Toast 1', status: 'info' })">Ajouter toast 1</sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Toast 2', status: 'success' })">Ajouter toast 2</sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Toast 3', status: 'warning' })">Ajouter toast 3</sonic-button>
+      <sonic-button onclick="window.SonicToast.removeAll()">Supprimer tous</sonic-button>
+    </div>
+  </template>
+</sonic-code>
+
+### Supprimer par statut
+
+Supprime tous les toasts d'un statut spécifique.
+
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2">
+      <sonic-button onclick="window.SonicToast.add({ text: 'Toast success', status: 'success' })">Success</sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Toast error', status: 'error' })">Error</sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Toast warning', status: 'warning' })">Warning</sonic-button>
+      <sonic-button onclick="window.SonicToast.removeItemsByStatus('success')">Supprimer success</sonic-button>
+      <sonic-button onclick="window.SonicToast.removeItemsByStatus('error')">Supprimer error</sonic-button>
+    </div>
+  </template>
+</sonic-code>
+
+### Supprimer les éléments temporaires
+
+Supprime tous les toasts qui ne sont pas marqués comme `preserve`.
+
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2">
+      <sonic-button onclick="window.SonicToast.add({ text: 'Toast temporaire', status: 'info' })">Temporaire</sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Toast persistant', status: 'success', preserve: true })">Persistant</sonic-button>
+      <sonic-button onclick="window.SonicToast.removeTemporaryItems()">Supprimer temporaires</sonic-button>
+    </div>
+  </template>
+</sonic-code>
+
+## Exemple complet
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="window.SonicToast.add({ 
+      id: 'welcome-toast',
+      title: 'Bienvenue',
+      text: 'Bienvenue sur notre plateforme ! Vous pouvez commencer à explorer les fonctionnalités.',
+      status: 'success',
+      dismissForever: true
+    })">
+      Toast complet
+    </sonic-button>
+  </template>
+</sonic-code>
+

package/docs/src/core/components/ui/tooltip/tooltip.md

@@ -0,0 +1,82 @@
+# Tooltip
+
+<sonic-code>
+  <template>
+    <sonic-tooltip label="Tada : Text appears">hover me</sonic-tooltip>
+  </template>
+</sonic-code>
+
+## Placement
+
+By default, tooltip is centered next to its content
+
+<sonic-code>
+  <template>
+    <sonic-tooltip placement="top" label="Top text">
+      <sonic-button>Top</sonic-button>
+    </sonic-tooltip>
+    <sonic-tooltip placement="bottom" label="Bottom text">
+      <sonic-button>Bottom</sonic-button>
+    </sonic-tooltip>
+     <sonic-tooltip placement="right" label="Right text">
+      <sonic-button>Right</sonic-button>
+    </sonic-tooltip>
+    <sonic-tooltip placement="left" label="Left text">
+      <sonic-button>Left</sonic-button>
+    </sonic-tooltip>
+  </template>
+</sonic-code>
+
+## More placement
+<sonic-code>
+  <template>
+    <div class="flex gap-3 flex-wrap">
+      <sonic-tooltip placement="top-start" label="My tooltip">
+        <sonic-button class="size-40 bg-neutral-200 rounded-lg">Top start</sonic-button>
+      </sonic-tooltip>
+      <sonic-tooltip placement="top-end" label="My tooltip">
+        <sonic-button class="size-40 bg-neutral-200 rounded-lg">Top end</sonic-button>
+      </sonic-tooltip>
+      <sonic-tooltip placement="bottom-start" label="My tooltip">
+        <sonic-button class="size-40 bg-neutral-200 rounded-lg">Bottom start</sonic-button>
+      </sonic-tooltip>
+      <sonic-tooltip placement="bottom-end" label="My tooltip">
+        <sonic-button class="size-40 bg-neutral-200 rounded-lg">Bottom end</sonic-button>
+      </sonic-tooltip>
+      <sonic-tooltip placement="right-start" label="My tooltip">
+        <sonic-button class="size-40 bg-neutral-200 rounded-lg">Right start</sonic-button>
+      </sonic-tooltip>
+      <sonic-tooltip placement="right-end" label="My tooltip">
+        <sonic-button class="size-40 bg-neutral-200 rounded-lg">Right end</sonic-button>
+      </sonic-tooltip>
+      <sonic-tooltip placement="left-start" label="My tooltip">
+        <sonic-button class="size-40 bg-neutral-200 rounded-lg">Left start</sonic-button>
+      </sonic-tooltip>
+      <sonic-tooltip placement="left-end" label="My tooltip">
+        <sonic-button class="size-40 bg-neutral-200 rounded-lg">Left end</sonic-button>
+      </sonic-tooltip>
+    </div>
+  </template>
+</sonic-code>
+
+
+## Focusable
+
+<sonic-code>
+  <template>
+    <sonic-tooltip focusable label="The Concorde made its first transatlantic crossing on September 26, 1973">
+      <sonic-icon library="iconoir" name="chat-bubble-question"></sonic-icon> Focus or hover non interactive element 
+    </sonic-tooltip>
+  </template>
+</sonic-code>
+
+## Disabled
+
+<sonic-code>
+  <template>
+    <sonic-tooltip disabled label="Disabled text">
+      <sonic-button>Tooltip disabled</sonic-button>
+    </sonic-tooltip>
+  </template>
+</sonic-code>
+

package/docs/src/docs/_core-concept/dataFlow.md

@@ -0,0 +1,88 @@
+# Data flow
+
+Recommended patterns for new Concorde apps (Lit + TypeScript). Under the hood, data lives in a **DataProvider** store (legacy **Publisher** API: [Legacy: Sharing data](#docs/_getting-started/pubsub.md/pubsub)).
+
+## Quick map
+
+| Need | Use |
+|------|-----|
+| Read/write in code | `get` / `set` / `dp` + `DataProviderKey` (static paths only) |
+| Reactive Lit template | `sub(key)` or `@subscribe` |
+| Read component state from store | `@subscribe` + `DataProviderKey<T, U>` + `@state` |
+| Inherit ancestor attributes | `@ancestorAttribute` |
+| Write from component state | `@publish` |
+| React to assignments | `@handle` |
+| HTTP GET | `@get` + `Endpoint`, or `sonic-list` / `sonic-queue` with `fetch` |
+| HTTP POST (body from store) | `@post` + `Endpoint` + body `DataProviderKey` |
+| HTTP PUT / PATCH (body from store) | `@put` / `@patch` — same model as `@post` |
+| Forms | `formDataProvider` + `name` on fields (no Subscriber on form elements) |
+| Derived / aggregate (JSONata) | `derive()` or `sonic-jsonata` — [Jsonata](#core/components/functional/jsonata/jsonata.md/jsonata) |
+| Offline doc demos | `serviceURL="/docs-mock-api"` — [Local API demos](#docs/_misc/docs-mock-api.md/docs-mock-api) |
+
+Skill: `concorde-get-set-dp` in the package `ai/` folder.
+
+## DataProviderKey
+
+<sonic-code language="typescript">
+  <template>
+import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
+import { dp, get, set } from "@supersoniks/concorde/utils";
+
+const cartKey = new DataProviderKey&lt;{ items: string[] }&gt;("cart");
+
+set(cartKey, { items: [] });
+dp(cartKey.items).set(["a", "b"]);
+get(cartKey);
+  </template>
+</sonic-code>
+
+Dynamic paths (`users.${userId}`) → decorators or `sub()` — not `get("users.${id}")` in imperative code. Resolution rules: [Dynamic path placeholders](#docs/_misc/dynamic-path.md/dynamic-path).
+
+[DataProviderKey](#docs/_misc/dataProviderKey.md/dataProviderKey)
+
+## Decorators
+
+| Decorator | Role |
+|-----------|------|
+| `@subscribe` | Read-only property from store — [data configuration](#docs/_getting-started/my-first-component.md/my-first-component) (type + key + scope) |
+| `@publish` | Push property writes to store |
+| `@handle` | Method called on assignment |
+| `@ancestorAttribute` | Copy ancestor HTML attribute onto property |
+| `@get` | HTTP GET into `ApiResult&lt;T&gt;` |
+| `@post` | HTTP POST into `ApiResult&lt;T&gt;` (body from a publisher) |
+| `@put` / `@patch` | HTTP PUT / PATCH into `ApiResult&lt;T&gt;` |
+
+Walkthrough: [My first component](#docs/_getting-started/my-first-component.md/my-first-component)
+
+## HTTP and lists
+
+- [@get](#docs/_decorators/get.md/get) — single GET on a component
+- [@post](#docs/_decorators/post.md/post) — POST with body read from a `DataProviderKey`
+- [@put](#docs/_decorators/put.md/put) · [@patch](#docs/_decorators/patch.md/patch) — PUT / PATCH (same options as `@post`)
+- [List](#core/components/functional/list/list.md/list) — `fetch` + `key="data"` + `/docs-mock-api/api/users`
+- [Queue](#core/components/functional/queue/queue.md/queue) — lazy `offset=$offset&per_page=$limit` + optional `dataFilterProvider` (form → query)
+
+## Starter kit
+
+```bash
+npx @supersoniks/create-concorde-ts-starter my-app
+```
+
+Interactive routes mirror these patterns (`/concepts/*`, `/demo/*`).
+
+## Derived data (`derive` / `sonic-jsonata`)
+
+Use when you need **client-side aggregations** (groupby, top N, chart shapes) from existing DataProviders — without inline app JS in SDUI.
+
+- Primitive: `derive({ inputs, compute, output, variables? })` from `@supersoniks/concorde/utils` (read-only output, debounce, generation, cycle detection, `{output}/_state_`).
+- SDUI adapter: [`sonic-jsonata`](#core/components/functional/jsonata/jsonata.md/jsonata) (`inputProvider` → `expression` → `outputProvider`, optional `formDataProvider`).
+- vs [`sonic-mix`](#core/components/functional/mix/mix.md/mix): mix composes bidirectionally; jsonata **computes** unidirectionally.
+
+## Legacy integration
+
+| Topic | Page |
+|-------|------|
+| `Subscriber` / `Fetcher` mixins on app code | [Legacy: Subscriber mixin](#docs/_core-concept/subscriber.md/subscriber), [Legacy: My first subscriber](#docs/_getting-started/my-first-subscriber.md/my-first-subscriber) |
+| `data-bind` HTML (plain HTML hosts) | [HTML integration](#docs/_misc/html-integration.md/html-integration) — doc demos use Lit in `src/docs/example/` |
+| `@onAssign` | [@onAssign](#docs/_decorators/on-assign.md/on-assign) (prefer `@handle`) |
+| `sonic-fetch` alone | [Fetch](#core/components/functional/fetch/fetch.md/fetch) |

package/docs/src/docs/_core-concept/overview.md

@@ -0,0 +1,57 @@
+# lit + tailwind + vite
+
+**Some notes for an overview of Concorde's functioning**
+
+## Standard Web components
+A web component is simply a **custom HTML element** created using web standards:
+
+**web component** = [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) + [shadowDom](https://developer.mozilla.org/fr/docs/Web/Web_Components/Using_shadow_DOM) + [HTML templates](https://developer.mozilla.org/fr/docs/Web/HTML/Element/template)
+
+## Lit Library
+
+Concorde components are written using the lightweight Lit library: https://lit.dev/.
+
+A good portion of the elements documented on the Lit website are standard JavaScript concepts (e.g., [mixins](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#mix-ins), [tagged template literals](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Template_literals#gabarits_%C3%A9tiquet%C3%A9s)).
+
+The **library simplifies the writing of web components** by automating certain tasks:
+
+- Creation of an **open mode shadow DOM** (the component is accessible from the outside via its shadow root property).
+- [Rendering function](https://lit.dev/docs/components/rendering/) based on [tagged template literals](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Template_literals#gabarits_%C3%A9tiquet%C3%A9s)
+- [Reactive properties](https://lit.dev/docs/components/properties/) that trigger rendering when modified.
+
+Our use of Lit rarely goes beyond this [hello world](https://lit.dev/playground/#sample=examples/hello-world)
+
+## Typescript Language
+
+We write the components in [TypeScript](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html), which is then compiled into JS.
+
+Static and inferred typing provides stronger validation of the program's functioning during compilation.
+However, we often use the "any" type due to time constraints.
+
+Lit uses TypeScript to simplify development through metadata:
+- Simplified declaration of `custom elements` via @customElement
+- Generation of `reactive properties` via @property.
+
+☢️**Warning**:
+- During development, we operate in interpreted mode, which is faster but allows errors that won't pass during the build.
+- It is important to **build a distribution before pushing the code** to ensure everything is fine.
+
+## Compatibility with Classic JS Libraries
+
+Compatibility issues may arise when using JS libraries, particularly regarding DOM traversal.
+This is because these libraries are blocked from traversing the DOM due to the presence of the shadow DOM.
+Here are some examples of things that may cause problems:
+
+- Latest FontAwesome in SVG mode, icons are not replaced
+- Libraries associated with jQuery
+- document.getElementById
+- ...
+
+## Topics to Explore for Further Learning
+
+
+[🧱 Creating components](#docs/_getting-started/create-a-component.md/create-a-component)
+
+[🎨 Adding styles](#docs/_getting-started/theming.md/theming)
+
+[🥨 Sharing data](#docs/_getting-started/pubsub.md/pubsub)

package/docs/src/docs/_core-concept/subscriber.md

@@ -0,0 +1,75 @@
+# Legacy: Subscriber mixin
+
+> **New app components:** [My first component](#docs/_getting-started/my-first-component.md/my-first-component) and [Data flow](#docs/_core-concept/dataFlow.md/dataFlow) — extend `LitElement` with decorators (`@subscribe`, `@ancestorAttribute`, …). This mixin remains in **core** components (`sonic-list`, `sonic-fetch`, …) and [legacy tutorials](#docs/_getting-started/my-first-subscriber.md/my-first-subscriber).
+
+The Subscriber mixin was commonly extended by Concorde core components and older destination components. Pure UI components usually don't extend it, especially those outside of form components.
+
+## DataProvider Attribute: Automatic Filling of Subscriber Properties
+
+Upon being added to the DOM (connectedCallback), subscribers search for the first occurrence of the `dataProvider` attribute in their parent's HTML structure.
+
+The value of this attribute is the DataProvider path (see [Data flow](#docs/_core-concept/dataFlow.md/dataFlow) and [DataProviderKey](#docs/_misc/dataProviderKey.md/dataProviderKey); legacy API: [Sharing Data](#docs/_getting-started/pubsub.md/pubsub)).
+
+The subscriber then subscribes to the publisher as a data template to be filled.
+
+The reactive properties of the component reflect in real-time the properties with the same name in the publisher.
+
+This functionality is commonly used in the generic components [fetch](#core/components/functional/fetch/fetch.md/fetch), [queue](#core/components/functional/queue/queue.md/queue), and [list](#core/components/functional/list/list.md/list).
+
+If the subscriber is inside another subscriber, it can subscribe to a data of its parent using the attribute `subDataProvider = 'address.of.my.data'` instead of the parent's data. This allows for dynamic behavior.
+
+## Automated Translation
+
+In a similar manner, searching for ancestor attributes can be used to configure automatic translation for any property starting with "wording" and ending with a label identifier recognized by the wordingProvider API.
+
+Normally, this API is globally configured and not within the component. Therefore, remember to prefix translatable label identifiers present in the ticketing system, for example, with "wording".
+
+## Reactive Property `props`
+
+The value of this property can be provided as a JSON object or any other value. This value is then assigned to the associated publisher via the `dataProvider` attribute. As a result, the reactive properties of all subscribers associated with the same `dataProvider` are filled as mentioned above.
+
+## Disabling Automatic Filling of Reactive Properties
+
+It is possible to disable the automatic filling of reactive properties in a particular component. To do so, set the variable `noAutoFill = true` in the component's class. However, the reactive property `props` will still be updated.
+
+For example, `sonic-subscriber` and `sonic-fetch` have this attribute because they do not have reactive properties.
+
+**☢ CAUTION:** When creating an object of type Subscriber or Fetcher, make sure to use the mixins and not directly extend the concrete fetch component (`sonic-fetch`) and subscriber component (`sonic-subscriber`). This is because the `noAutofill = true` attribute is set in those components.
+
+**TIPS:** 
+If you disable automatic filling, you will likely make the rendering dynamic by writing expressions like `this.props.my.subproperty`. If `props` is updated, the rendering will be triggered. However, if `this.props.my.subproperty` is directly modified, the rendering will not be triggered. To achieve more reactivity, you can enable rendering when any subproperty is modified. Simply set the variable `renderOnPropsInternalChange = true` in the class that implements the corresponding mixin.
+
+## Data Binding
+
+Suppose that:
+
+- You have a subscriber subscribed to a publisher via its `dataProvider` attribute.
+- The published data has the following structure:
+
+<sonic-code language="javascript">
+  <template>
+    {"img": { "avatar": "my-avatar.jpg", "caption": "look at my smile" }, "email": "an.email@example.com" }
+  </template>
+</sonic-code>
+- We want to keep the display of an image and its `title` attribute up to date, as well as a "contact" button to email the person in the photo. The content of the subscriber could be as follows:
+
+In a **Lit** app, use the same data with [data configuration](#docs/_getting-started/my-first-component.md/my-first-component) (`@subscribe` + `DataProviderKey`) on a small row component — see `docs-user` in `src/docs/example/users.ts`.
+
+For **HTML-only** embedding (no Lit), attribute binding is described in [HTML integration](#docs/_misc/html-integration.md/html-integration) and in the Legacy [Subscriber mixin](#docs/_core-concept/subscriber.md/subscriber) pages.
+
+This pattern also illustrates:
+
+- Binding to subproperties using dot syntax, as done for the `src` attribute of the `img` tag.
+- Using a simple expression to include the property within a string, as in creating a `mailto` link.
+- Using formatting functions, as in the `title` attribute of the `img` tag. You can find (and add) formatting functions in the `core/utils/Format.ts` file.
+- Writing for properties that are in camel case. Convert everything to lowercase and add hyphens. Note that `innerHTML` (or `outerHTML`) is a special case where no hyphens are added between each letter.
+
+**Note:** Data binding implies that updating the `img.src` data via the publisher will change the photo without any additional calls.
+
+**Special Variables:**
+- `_self_` targets the root of the data. This is useful, for example, when the data is a pure string.
+- `_parent_` targets the parent publisher of the current publisher, if any. For example, the subscribers of lists have the complete data of the list as their parent.
+- `_metadata_` is only used in the case of *sonic-list* at the moment. In a simple list, `_metadata_` see the (list)[] component for further details
+
+**Disabling this functionality:**
+You can disable data binding if it is not needed by calling `DataBinding.disable()`.

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

@@ -0,0 +1,127 @@
+# @ancestorAttribute
+
+The `@ancestorAttribute` decorator automatically injects the value of an ancestor's attribute into a class property at the time of `connectedCallback`.
+
+## Principle
+
+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.
+
+## Usage
+
+### Import
+
+<sonic-code language="typescript">
+  <template>
+import { ancestorAttribute } from "@supersoniks/concorde/decorators";
+  </template>
+</sonic-code>
+
+### Basic example
+
+The component reads `dataProvider` and `testAttribute` from its ancestor wrapper. By default (`dynamic: false`), values are read once at connect.
+
+<sonic-code language="typescript">
+  <template>
+import { html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { ancestorAttribute } from "@supersoniks/concorde/decorators";
+
+@customElement("demo-ancestor-attribute")
+export class DemoAncestorAttribute extends LitElement {
+  @ancestorAttribute("dataProvider")
+  dataProvider: string | null = null;
+
+  @ancestorAttribute("testAttribute")
+  testAttribute: string | null = null;
+
+  render() {
+    return html`
+      <p>dataProvider: <strong>${this.dataProvider ?? "null"}</strong></p>
+      <p>testAttribute: <strong>${this.testAttribute ?? "null"}</strong></p>
+    `;
+  }
+}
+  </template>
+</sonic-code>
+
+<sonic-code>
+  <template>
+<div dataProvider="demoDataProvider" testAttribute="test-value-123">
+  <docs-demo-sources for="demo-ancestor-attribute"></docs-demo-sources>
+  <demo-ancestor-attribute></demo-ancestor-attribute>
+</div>
+  </template>
+</sonic-code>
+
+## Use cases
+
+This decorator is particularly useful for:
+
+- **Retrieving the `dataProvider`** from an ancestor without having to pass it explicitly
+- **Retrieving the `formDataProvider`** in form components
+- **Retrieving the `wordingProvider`** for translation
+- **Retrieving any other attribute** defined on an ancestor
+
+## Behavior
+
+- The search starts from the current element and traverses up the DOM tree
+- The injection happens automatically at the time of `connectedCallback`
+- By default (`dynamic: false`), the value is read once at connect time and is not updated afterward
+- With `{ dynamic: true }`, the property stays in sync when:
+  - an ancestor **changes** the attribute value
+  - a **closer** ancestor **gains** the attribute (that value wins)
+  - the **nearest** ancestor **loses** the attribute (falls back to the next one up, or `null`)
+- When `dynamic` is enabled, updates also propagate to `@subscribe` / `@bind` paths that depend on the decorated property (e.g. `${dataProvider}`)
+
+### Dynamic mode
+
+Use `{ dynamic: true }` when the decorated property must follow the DOM. With Lit, add **`@state()`** on the same property so template updates are visible when the observer assigns a new value.
+
+The live demo below shows only the resolved attribute value — no store, no reparenting.
+
+<sonic-code language="typescript">
+  <template>
+@customElement("demo-ancestor-attribute-dynamic")
+export class DemoAncestorAttributeDynamic extends LitElement {
+  @ancestorAttribute("dataProvider", { dynamic: true })
+  @state()
+  dataProvider: string | null = null;
+
+  render() {
+    return html`
+      &lt;p&gt;Nearest ancestor: &lt;strong&gt;${this.dataProvider ?? "null"}&lt;/strong&gt;&lt;/p&gt;
+    `;
+  }
+}
+  </template>
+</sonic-code>
+
+Try in the demo:
+
+- **parent-a** / **parent-b** — change the value on the direct parent
+- **Remove parent attr** — falls back to **outer**
+- **Add closer** — a wrapper with `from-closer` becomes the nearest ancestor
+- **Remove closer** — back to parent or outer
+- **Remove outer attr** — if parent has no attribute either, the child shows `null`
+
+<sonic-code>
+  <template>
+    <docs-demo-sources for="demo-ancestor-attribute-dynamic-section"></docs-demo-sources>
+    <demo-ancestor-attribute-dynamic-section></demo-ancestor-attribute-dynamic-section>
+  </template>
+</sonic-code>
+
+Static mode (default) — read once at connect, no observer:
+
+<sonic-code language="typescript">
+  <template>
+@ancestorAttribute("dataProvider")
+dataProvider: string | null = null;
+  </template>
+</sonic-code>
+
+## Notes
+
+- This decorator works with any component that has a `connectedCallback` method (such as `LitElement` or components extending `Subscriber`)
+- The search also traverses Shadow DOM if necessary
+- If multiple ancestors have the attribute, the closest one will be used