@supersoniks/concorde 5.0.5 → 5.1.1

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

@@ -1,216 +0,0 @@
-# Toast
-
-Toasts surface **short-lived feedback** in a fixed stack (bottom-right in the main window). Queue messages with **`SonicToast.add()`** on the global **`SonicToast`** class—the host **`sonic-toast`** is created automatically. Prefer **`label`** for a heading; use **`preserve`** or interactive **`text`** when the user must read or act before dismiss.
-
-## Basic example
-
-Click the button to show a toast.
-
-<sonic-code>
-  <template>
-    <sonic-button onclick="SonicToast.add({ text: 'Simple notification' })">
-      Show toast
-    </sonic-button>
-  </template>
-</sonic-code>
-
-## Status
-
-**`status`** drives color, icon, and live-region behavior. Omit **`status`** or pass an empty string for a neutral toast.
-
-<sonic-code>
-  <template>
-    <div class="flex flex-wrap gap-2">
-      <sonic-button onclick="SonicToast.add({ text: 'Default message', status: '' })">
-        Default
-      </sonic-button>
-      <sonic-button onclick="SonicToast.add({ text: 'Operation succeeded', status: 'success' })">
-        Success
-      </sonic-button>
-      <sonic-button onclick="SonicToast.add({ text: 'Something went wrong', status: 'error' })">
-        Error
-      </sonic-button>
-      <sonic-button onclick="SonicToast.add({ text: 'Check this detail', status: 'warning' })">
-        Warning
-      </sonic-button>
-      <sonic-button onclick="SonicToast.add({ text: 'Helpful context', status: 'info' })">
-        Info
-      </sonic-button>
-    </div>
-  </template>
-</sonic-code>
-
-## Label
-
-Set **`label`** for a bold title above **`text`**. **`title`** still works but is deprecated—use **`label`** in new code.
-
-<sonic-code>
-  <template>
-    <div class="flex flex-wrap gap-2">
-      <sonic-button
-        onclick="SonicToast.add({ label: 'Success', text: 'Your request was processed.', status: 'success' })"
-      >
-        Toast with label
-      </sonic-button>
-      <sonic-button
-        onclick="SonicToast.add({ label: 'Error', text: 'Processing failed. Try again.', status: 'error' })"
-      >
-        Error with label
-      </sonic-button>
-    </div>
-  </template>
-</sonic-code>
-
-## HTML in text
-
-**`text`** (and **`label`**) can include HTML strings. Links and controls in **`text`** automatically enable **`preserve`** so the toast does not auto-hide while the user interacts.
-
-<sonic-code>
-  <template>
-    <sonic-button
-      onclick="SonicToast.add({ text: 'Message with <strong>HTML</strong> and an <a href=&quot;#&quot;>action link</a>', status: 'info' })"
-    >
-      Toast with HTML
-    </sonic-button>
-  </template>
-</sonic-code>
-
-## Preserve
-
-Without **`preserve`**, toasts auto-hide after about six seconds (timer pauses on hover or focus). Set **`preserve`** to keep the toast until the user closes it.
-
-<sonic-code>
-  <template>
-    <sonic-button
-      onclick="SonicToast.add({ text: 'This toast stays until you dismiss it', status: 'info', preserve: true })"
-    >
-      Persistent toast
-    </sonic-button>
-  </template>
-</sonic-code>
-
-## Dismiss forever
-
-With **`dismissForever`** and a stable **`id`**, closing the toast stores dismissal in **`localStorage`**—**`SonicToast.add`** skips it on later visits. Duplicate payloads (same fields, ignoring **`id`**) are not queued twice.
-
-<sonic-code>
-  <template>
-    <sonic-button
-      onclick="SonicToast.add({ id: 'unique-toast-id', text: 'Dismiss forever hides this across reloads', status: 'info', dismissForever: true })"
-    >
-      Dismiss forever
-    </sonic-button>
-  </template>
-</sonic-code>
-
-## Ghost
-
-**`ghost`** renders a semi-transparent, non-interactive toast—useful for loading or background states. **`SonicToast.removeAll`** leaves ghost toasts in place.
-
-<sonic-code>
-  <template>
-    <sonic-button
-      onclick="SonicToast.add({ text: 'Ghost toast (non-interactive)', status: 'info', ghost: true })"
-    >
-      Ghost toast
-    </sonic-button>
-  </template>
-</sonic-code>
-
-## Dismissal
-
-Use static helpers to clear the stack from app logic (for example after navigation).
-
-### Remove all
-
-Removes every toast except **`ghost`** items.
-
-<sonic-code>
-  <template>
-    <div class="flex flex-wrap gap-2">
-      <sonic-button onclick="SonicToast.add({ text: 'Toast 1', status: 'info' })">Add toast 1</sonic-button>
-      <sonic-button onclick="SonicToast.add({ text: 'Toast 2', status: 'success' })">Add toast 2</sonic-button>
-      <sonic-button onclick="SonicToast.add({ text: 'Toast 3', status: 'warning' })">Add toast 3</sonic-button>
-      <sonic-button onclick="SonicToast.removeAll()">Remove all</sonic-button>
-    </div>
-  </template>
-</sonic-code>
-
-### Remove by status
-
-<sonic-code>
-  <template>
-    <div class="flex flex-wrap gap-2">
-      <sonic-button onclick="SonicToast.add({ text: 'Success toast', status: 'success' })">Success</sonic-button>
-      <sonic-button onclick="SonicToast.add({ text: 'Error toast', status: 'error' })">Error</sonic-button>
-      <sonic-button onclick="SonicToast.add({ text: 'Warning toast', status: 'warning' })">Warning</sonic-button>
-      <sonic-button onclick="SonicToast.removeItemsByStatus('success')">Remove success</sonic-button>
-      <sonic-button onclick="SonicToast.removeItemsByStatus('error')">Remove error</sonic-button>
-    </div>
-  </template>
-</sonic-code>
-
-### Remove temporary items
-
-Removes toasts that are not **`preserve`**.
-
-<sonic-code>
-  <template>
-    <div class="flex flex-wrap gap-2">
-      <sonic-button onclick="SonicToast.add({ text: 'Temporary toast', status: 'info' })">Temporary</sonic-button>
-      <sonic-button onclick="SonicToast.add({ text: 'Persistent toast', status: 'success', preserve: true })">
-        Persistent
-      </sonic-button>
-      <sonic-button onclick="SonicToast.removeTemporaryItems()">Remove temporary</sonic-button>
-    </div>
-  </template>
-</sonic-code>
-
-## Combined options
-
-<sonic-code>
-  <template>
-    <sonic-button
-      onclick="SonicToast.add({
-      id: 'welcome-toast',
-      label: 'Welcome',
-      text: 'Welcome to the platform. Explore the docs to get started.',
-      status: 'success',
-      dismissForever: true
-    })"
-    >
-      Full example
-    </sonic-button>
-  </template>
-</sonic-code>
-
-## Accessibility
-
-Each toast uses **`role="alert"`** for **`error`** and **`role="status"`** otherwise (with **`aria-live="polite"`** when applicable). Status icons are decorative (**`aria-hidden`**). The close control has an i18n **`aria-label`**. When there is no **`label`**, a truncated string **`aria-label`** may be derived from plain **`text`**.
-
-## API reference
-
-Options passed to **`SonicToast.add(conf)`**:
-
-| Option | Values | Description |
-|----------|---------|-------------|
-| `text` | string · Lit template | Main body; HTML strings are supported |
-| `label` | string · Lit template | Optional heading above **`text`** |
-| `title` | string · Lit template | Deprecated alias for **`label`** |
-| `status` | `success` · `error` · `warning` · `info` · `` (empty) | Semantic styling and live region behavior |
-| `id` | string · number | Stable id for deduplication and **`dismissForever`** (defaults to timestamp) |
-| `preserve` | boolean | Skip auto-hide; forced when **`text`** contains interactive markup |
-| `ghost` | boolean | Semi-transparent and non-interactive; kept by **`removeAll`** |
-| `dismissForever` | boolean | Persist dismissal in **`localStorage`** when closed (requires stable **`id`**) |
-| `styleSheet` | modal style input | Extra adopted styles on the toast item shadow root |
-| `useSlot` | boolean | Legacy: project **`text`** into the light DOM slot |
-
-| Method | Description |
-|--------|-------------|
-| `SonicToast.add(conf)` | Append a toast; returns the config or **`null`** if skipped (dismissed forever or duplicate) |
-| `SonicToast.removeAll()` | Remove all non-**`ghost`** toasts |
-| `SonicToast.removeItemsByStatus(status)` | Remove toasts matching **`status`** |
-| `SonicToast.removeItemById(id)` | Remove a single toast by **`id`** |
-| `SonicToast.removeTemporaryItems()` | Remove toasts without **`preserve`** |
-
-**`sonic-toast`** is mounted automatically; **`sonic-toast-item`** is internal. In iframes, toasts can delegate to the parent window via **`postMessage`**.

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

@@ -1,124 +0,0 @@
-# Tooltip
-
-Tooltip shows a short **`label`** on hover (and on focus when the trigger can receive focus). Wrap the trigger in the default slot—buttons, icons, or plain text. Default **`placement`** is **`top`** (center-aligned). An empty **`label`** hides the bubble the same way as **`disabled`**.
-
-## Basic example
-
-<sonic-code>
-  <template>
-    <sonic-tooltip label="Additional context on hover">
-      <sonic-button variant="outline">Hover me</sonic-button>
-    </sonic-tooltip>
-  </template>
-</sonic-code>
-
-## Placement
-
-Use **`top`** · **`bottom`** · **`left`** · **`right`** for the main axis. Add **`-start`** or **`-end`** to align the bubble along the anchor edge.
-
-<sonic-code>
-  <template>
-    <div class="flex flex-wrap gap-2">
-      <sonic-tooltip placement="top" label="Top">
-        <sonic-button>Top</sonic-button>
-      </sonic-tooltip>
-      <sonic-tooltip placement="bottom" label="Bottom">
-        <sonic-button>Bottom</sonic-button>
-      </sonic-tooltip>
-      <sonic-tooltip placement="right" label="Right">
-        <sonic-button>Right</sonic-button>
-      </sonic-tooltip>
-      <sonic-tooltip placement="left" label="Left">
-        <sonic-button>Left</sonic-button>
-      </sonic-tooltip>
-    </div>
-  </template>
-</sonic-code>
-
-### Aligned placements
-
-<sonic-code>
-  <template>
-    <div class="flex gap-3 flex-wrap">
-      <sonic-tooltip placement="top-start" label="Top start">
-        <sonic-button class="size-40 bg-neutral-200 rounded-lg">Top start</sonic-button>
-      </sonic-tooltip>
-      <sonic-tooltip placement="top-end" label="Top end">
-        <sonic-button class="size-40 bg-neutral-200 rounded-lg">Top end</sonic-button>
-      </sonic-tooltip>
-      <sonic-tooltip placement="bottom-start" label="Bottom start">
-        <sonic-button class="size-40 bg-neutral-200 rounded-lg">Bottom start</sonic-button>
-      </sonic-tooltip>
-      <sonic-tooltip placement="bottom-end" label="Bottom end">
-        <sonic-button class="size-40 bg-neutral-200 rounded-lg">Bottom end</sonic-button>
-      </sonic-tooltip>
-      <sonic-tooltip placement="right-start" label="Right start">
-        <sonic-button class="size-40 bg-neutral-200 rounded-lg">Right start</sonic-button>
-      </sonic-tooltip>
-      <sonic-tooltip placement="right-end" label="Right end">
-        <sonic-button class="size-40 bg-neutral-200 rounded-lg">Right end</sonic-button>
-      </sonic-tooltip>
-      <sonic-tooltip placement="left-start" label="Left start">
-        <sonic-button class="size-40 bg-neutral-200 rounded-lg">Left start</sonic-button>
-      </sonic-tooltip>
-      <sonic-tooltip placement="left-end" label="Left end">
-        <sonic-button class="size-40 bg-neutral-200 rounded-lg">Left end</sonic-button>
-      </sonic-tooltip>
-    </div>
-  </template>
-</sonic-code>
-
-## Label formatting
-
-**`label`** supports line breaks (`\n` in markup or multiline text). Lines are trimmed; **`&nbsp;`** is normalized to spaces. **`white-space: pre-line`** preserves breaks in the bubble (max width **18rem**).
-
-<sonic-code>
-  <template>
-    <sonic-tooltip label="First line&#10;Second line">
-      <sonic-button variant="outline">Multiline label</sonic-button>
-    </sonic-tooltip>
-  </template>
-</sonic-code>
-
-## Focusable
-
-On non-interactive triggers, set **`focusable`** so the host gets **`tabindex="0"`** and the tooltip opens on keyboard focus as well as hover.
-
-<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 this text
-    </sonic-tooltip>
-  </template>
-</sonic-code>
-
-## Disabled
-
-<sonic-code>
-  <template>
-    <sonic-tooltip disabled label="Not shown">
-      <sonic-button>Tooltip disabled</sonic-button>
-    </sonic-tooltip>
-  </template>
-</sonic-code>
-
-## Accessibility
-
-The bubble uses **`popover="hint"`** (non-modal, no pointer capture). Prefer **`focusable`** when the slotted content is not already focusable. When the Popover API is unavailable, the host falls back to the native **`title`** attribute with a single-line label. Opacity transitions respect **`prefers-reduced-motion`**.
-
-## API reference
-
-| Attribute | Values | Description |
-|----------|---------|-------------|
-| `label` | string | Tooltip copy; whitespace-only values suppress the bubble |
-| `placement` | `top` (default) · `bottom` · `left` · `right` · `top-start` · `top-end` · `bottom-start` · `bottom-end` · `left-start` · `left-end` · `right-start` · `right-end` | Position relative to the trigger; repositions while open |
-| `disabled` | boolean | Suppress show/hide; sets **`tabindex="-1"`** on the host |
-| `focusable` | boolean | Add **`tabindex="0"`** on the host for keyboard access |
-
-| Slot | Description |
-|------|-------------|
-| *(default)* | Trigger content (hover target) |

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

@@ -1,88 +0,0 @@
-# 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

@@ -1,57 +0,0 @@
-# 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

@@ -1,75 +0,0 @@
-# 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()`.