@supersoniks/concorde 3.2.1 → 3.2.2

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

@@ -1,455 +0,0 @@
-# Table
-
-## Basic usage
-
-<sonic-code>
-  <template>
-    <sonic-table>
-      <sonic-tr>
-        <sonic-th>Id</sonic-th>
-        <sonic-th>Name</sonic-th>
-        <sonic-th>Email</sonic-th>
-      </sonic-tr>
-      <sonic-tr>
-        <sonic-td>1</sonic-td>
-        <sonic-td>George Bluth</sonic-td>
-        <sonic-td>george.bluth@reqres.in</sonic-td>
-      </sonic-tr>
-      <sonic-tr>
-        <sonic-td>2</sonic-td>
-        <sonic-td>Janet Weaver</sonic-td>
-        <sonic-td>janet.weaver@reqres.in</sonic-td>
-      </sonic-tr>
-      <sonic-tr>
-        <sonic-td>3</sonic-td>
-        <sonic-td>Emma Wong</sonic-td>
-        <sonic-td>emma.wong@reqres.in</sonic-td>
-      </sonic-tr>
-    </sonic-table>
-  </template>
-</sonic-code>
-
-## List / fetch
-
-<sonic-code>
-  <template>
-    <sonic-table>
-      <sonic-thead>
-        <sonic-tr>
-          <sonic-th>Id</sonic-th>
-          <sonic-th>Name</sonic-th>
-          <sonic-th>Email</sonic-th>
-        </sonic-tr> 
-      </sonic-thead>
-      <sonic-tbody>
-        <sonic-list debug fetch serviceURL="https://reqres.in" dataProvider="api/users" key="data" displayContents>
-          <template>
-            <sonic-tr>
-              <sonic-td data-bind ::inner-html="$id"></sonic-td>
-              <sonic-td data-bind ::inner-html="$first_name <b>$last_name</b>"></sonic-td>
-              <sonic-td data-bind ::inner-html="$email"></sonic-td>
-            </sonic-tr>
-          </template>
-        <sonic-list>
-      </sonic-tbody>
-    </sonic-table>
-  </template>
-</sonic-code>
-
-## Size
-
-<sonic-code>
-  <template>
-    <div class="grid grid-cols-4 gap-3">
-      <sonic-table size="2xs" bordered>
-        <sonic-tr><sonic-td class="w-[5rem]">2xs</sonic-td></sonic-tr>
-      </sonic-table>
-      <sonic-table size="xs" bordered>
-        <sonic-tr><sonic-td class="w-[5rem]">xs</sonic-td></sonic-tr>
-      </sonic-table>
-      <sonic-table size="sm" bordered>
-        <sonic-tr><sonic-td class="w-[5rem]">sm</sonic-td></sonic-tr>
-      </sonic-table>
-      <sonic-table size="md" bordered>
-        <sonic-tr><sonic-td class="w-[5rem]">md</sonic-td></sonic-tr>
-      </sonic-table>
-      <sonic-table bordered>
-        <sonic-tr><sonic-td class="w-[5rem]">default</sonic-td></sonic-tr>
-      </sonic-table>
-      <sonic-table size="lg" bordered>
-        <sonic-tr><sonic-td class="w-[5rem]">lg</sonic-td></sonic-tr>
-      </sonic-table>
-      <sonic-table size="xl" bordered>
-        <sonic-tr><sonic-td class="w-[5rem]">xl</sonic-td></sonic-tr>
-      </sonic-table>
-      <sonic-table size="2xl" bordered>
-        <sonic-tr><sonic-td class="w-[5rem]">2xl</sonic-td></sonic-tr>
-      </sonic-table>
-    </div>
-  </template>
-</sonic-code>
-
-## Bordered
-
-<sonic-code>
-  <template>
-    <sonic-table bordered>
-      <sonic-thead>
-        <sonic-tr>
-          <sonic-th>Id</sonic-th>
-          <sonic-th>Name</sonic-th>
-          <sonic-th>Email</sonic-th>
-        </sonic-tr>
-      </sonic-thead>
-      <sonic-tbody>
-        <sonic-tr>
-          <sonic-td>1</sonic-td>
-          <sonic-td>George Bluth</sonic-td>
-          <sonic-td>george.bluth@reqres.in</sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>2</sonic-td>
-          <sonic-td>Janet Weaver</sonic-td>
-          <sonic-td>janet.weaver@reqres.in</sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>3</sonic-td>
-          <sonic-td>Emma Wong</sonic-td>
-          <sonic-td>emma.wong@reqres.in</sonic-td>
-        </sonic-tr>
-      </sonic-tbody>
-    </sonic-table>
-  </template>
-</sonic-code>
-
-## MaxHeight
-
-<sonic-code>
-  <template>
-    <sonic-table maxHeight="8rem">
-      <sonic-thead>
-        <sonic-tr>
-          <sonic-th>Id</sonic-th>
-          <sonic-th>Name</sonic-th>
-          <sonic-th>Email</sonic-th>
-        </sonic-tr> 
-      </sonic-thead>
-      <sonic-tbody>
-        <sonic-list  fetch serviceURL="https://reqres.in" dataProvider="api/users" key="data" displayContents>
-          <template>
-            <sonic-tr>
-              <sonic-td data-bind ::inner-html="$id"></sonic-td>
-              <sonic-td data-bind ::inner-html="$first_name <b>$last_name</b>"></sonic-td>
-              <sonic-td data-bind ::inner-html="$email"></sonic-td>
-            </sonic-tr>
-          </template>
-        <sonic-list>
-      </sonic-tbody>
-    </sonic-table>
-  </template>
-</sonic-code>
-
-## Type
-
-Values available : primary, info, success, warning, danger
-
-<sonic-code>
-  <template>
-    <sonic-table bordered>
-        <sonic-tr>
-          <sonic-th type="info">Attribute type set on</sonic-th>
-          <sonic-th type="info">sonic-th</sonic-th>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td type="danger">Attribute type set on</sonic-td>
-          <sonic-td type="danger">sonic-td</sonic-td>
-        </sonic-tr>
-        <sonic-tr type="success">
-          <sonic-td>Attribute type set on</sonic-td>
-          <sonic-td>sonic-tr</sonic-td>
-        </sonic-tr>
-      </sonic-tbody>
-    </sonic-table>
-  </template>
-</sonic-code>
-
-## Colspan / rowspan
-
-<sonic-code>
-  <template>
-    <sonic-table >
-      <sonic-tbody>
-        <sonic-tr>
-          <sonic-td colspan="2" class="bg-info text-neutral-0">colspan : 2</sonic-td>
-          <sonic-td>cell</sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>cell</sonic-td>
-          <sonic-td>cell</sonic-td>
-          <sonic-td rowspan="2" class="bg-success text-neutral-0">rowspan : 2</sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>cell</sonic-td>
-          <sonic-td>cell</sonic-td>
-        </sonic-tr>
-      </sonic-tbody>
-    </sonic-table>
-  </template>
-</sonic-code>
-
-## Cell style attributes
-
-The following attributes will be used to set the style of the component :  
-- align
-- minWidth
-- maxWidth
-- width
-
-<sonic-code>
-  <template>
-    <sonic-table bordered>
-      <sonic-thead>
-        <sonic-tr>
-          <sonic-th width="7rem">align</sonic-th>
-          <sonic-th minWidth="20rem">minWidth</sonic-th>
-          <sonic-th>maxWidth</sonic-th>
-          <sonic-th>width</sonic-th>
-        </sonic-tr>
-      </sonic-thead>
-      <sonic-tbody>
-        <sonic-tr>
-          <sonic-td align="left">Left</sonic-td>
-          <sonic-td>20rem</sonic-td>
-          <sonic-td>5rem</sonic-td>
-          <sonic-td>15rem</sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td align="center">center</sonic-td>
-          <sonic-td>20rem</sonic-td>
-          <sonic-td maxWidth="5rem">5rem</sonic-td>
-          <sonic-td>15rem</sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td align="right">right</sonic-td>
-          <sonic-td>20rem</sonic-td>
-          <sonic-td>5rem - Lorem ipsum dolor</sonic-td>
-          <sonic-td width="60rem">15rem - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta sollicitudin mollis. Curabitur sit amet nibh diam. Vivamus a pharetra mauris.</sonic-td>
-        </sonic-tr>
-    </sonic-table>
-  </template>
-</sonic-code>
-
-
-## Responsive
-
-Every table is responsive by default
-
-<sonic-code>
-  <template>
-    <sonic-table bordered>
-      <sonic-thead>
-        <sonic-tr>
-          <sonic-th>Id</sonic-th>
-          <sonic-th>Name</sonic-th>
-          <sonic-th>Email</sonic-th>
-          <sonic-th>Comment</sonic-th>
-        </sonic-tr> 
-      </sonic-thead>
-      <sonic-tbody>
-        <sonic-list fetch serviceURL="https://reqres.in" dataProvider="api/users" key="data" displayContents>
-          <template>
-            <sonic-tr>
-              <sonic-td data-bind ::inner-html="$id"></sonic-td>
-              <sonic-td minWidth="10rem" data-bind ::inner-html="$first_name <b>$last_name</b>"></sonic-td>
-              <sonic-td data-bind ::inner-html="$email"></sonic-td>
-              <sonic-td minWidth="40rem">
-                hasellus suscipit vulputate lacus, in tempor turpis aliquam vel. Nunc eleifend, velit id ultrices elementum, ipsum felis porttitor dui, id laoreet diam nulla sed urna. 
-              </sonic-td>
-            </sonic-tr>
-          </template>
-        <sonic-list>
-      </sonic-tbody>
-    </sonic-table>
-  </template>
-</sonic-code>
-
-
-## Sticky header
-
-<sonic-code>
-  <template>
-    <sonic-table bordered noCustomScroll>
-      <sonic-thead class="sticky top-16">
-        <sonic-tr>
-          <sonic-th minWidth="max(20ch,12rem)">Company</sonic-th>
-          <sonic-th type="success">Contact</sonic-th>
-          <sonic-th>Country</sonic-th>
-          <sonic-th align="center">Quantity</sonic-th>
-          <sonic-th align="right">Price</sonic-th>
-          <sonic-th></sonic-th>
-        </sonic-tr>
-      </sonic-thead>
-      <sonic-tbody>
-        <sonic-tr>
-          <sonic-td>Alfreds Futterkiste</sonic-td>
-          <sonic-td>Maria Anders</sonic-td>
-          <sonic-td>Germany</sonic-td>
-          <sonic-td align="center">2</sonic-td>
-          <sonic-td align="right">40€</sonic-td>
-          <sonic-td td align="right"
-            ><sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
-            ></sonic-button>
-          </sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>Centro comercial Moctezuma</sonic-td>
-          <sonic-td
-            colspan="2"
-            align="center"
-            class="
-              text-center
-              text-neutral-400
-            "
-            >no information yet</sonic-td
-          >
-          <sonic-td align="center">3</sonic-td>
-          <sonic-td align="right">40€</sonic-td>
-          <sonic-td td align="right"
-            ><sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
-            ></sonic-button>
-          </sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>Ernst Handel</sonic-td>
-          <sonic-td>Roland Mendel</sonic-td>
-          <sonic-td>Austria</sonic-td>
-          <sonic-td align="center">4</sonic-td>
-          <sonic-td align="right">40€</sonic-td>
-          <sonic-td td align="right"
-            ><sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
-            ></sonic-button>
-          </sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>Island Trading</sonic-td>
-          <sonic-td>Helen Bennett</sonic-td>
-          <sonic-td>UK</sonic-td>
-          <sonic-td align="center">1</sonic-td>
-          <sonic-td align="right">40€</sonic-td>
-          <sonic-td td align="right"
-            ><sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
-            ></sonic-button>
-          </sonic-td>
-        </sonic-tr>
-        <sonic-tr type="warning">
-          <sonic-td>Laughing Bacchus Winecellars</sonic-td>
-          <sonic-td>Yoshi Tannamuri</sonic-td>
-          <sonic-td>Canada</sonic-td>
-          <sonic-td align="center">0</sonic-td>
-          <sonic-td align="right">40€</sonic-td>
-          <sonic-td td align="right"
-            ><sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
-            ></sonic-button>
-          </sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>Magazzini Alimentari Riuniti</sonic-td>
-          <sonic-td>Giovanni Rovelli</sonic-td>
-          <sonic-td type="danger">Italy</sonic-td>
-          <sonic-td align="center">20</sonic-td>
-          <sonic-td align="right">40€</sonic-td>
-          <sonic-td td align="right"
-            ><sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
-            ></sonic-button>
-          </sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>Alfreds Futterkiste</sonic-td>
-          <sonic-td>Maria Anders</sonic-td>
-          <sonic-td>Germany</sonic-td>
-          <sonic-td align="center">2</sonic-td>
-          <sonic-td align="right">40€</sonic-td>
-          <sonic-td td align="right"
-            ><sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
-            ></sonic-button>
-          </sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>Centro comercial Moctezuma</sonic-td>
-          <sonic-td
-            colspan="2"
-            align="center"
-            class="
-              text-center
-              text-neutral-400
-            "
-            >no information yet</sonic-td
-          >
-          <sonic-td align="center">3</sonic-td>
-          <sonic-td align="right">40€</sonic-td>
-          <sonic-td td align="right"
-            ><sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
-            ></sonic-button>
-          </sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>Ernst Handel</sonic-td>
-          <sonic-td>Roland Mendel</sonic-td>
-          <sonic-td>Austria</sonic-td>
-          <sonic-td align="center">4</sonic-td>
-          <sonic-td align="right">40€</sonic-td>
-          <sonic-td td align="right"
-            ><sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
-            ></sonic-button>
-          </sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>Island Trading</sonic-td>
-          <sonic-td>Helen Bennett</sonic-td>
-          <sonic-td>UK</sonic-td>
-          <sonic-td align="center">1</sonic-td>
-          <sonic-td align="right">40€</sonic-td>
-          <sonic-td td align="right"
-            ><sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
-            ></sonic-button>
-          </sonic-td>
-        </sonic-tr>
-        <sonic-tr type="warning">
-          <sonic-td>Laughing Bacchus Winecellars</sonic-td>
-          <sonic-td>Yoshi Tannamuri</sonic-td>
-          <sonic-td>Canada</sonic-td>
-          <sonic-td align="center">0</sonic-td>
-          <sonic-td align="right">40€</sonic-td>
-          <sonic-td td align="right"
-            ><sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
-            ></sonic-button>
-          </sonic-td>
-        </sonic-tr>
-        <sonic-tr>
-          <sonic-td>Magazzini Alimentari Riuniti</sonic-td>
-          <sonic-td>Giovanni Rovelli</sonic-td>
-          <sonic-td>Italy</sonic-td>
-          <sonic-td align="center">20</sonic-td>
-          <sonic-td align="right">40€</sonic-td>
-          <sonic-td td align="right"
-            ><sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
-            ></sonic-button>
-          </sonic-td>
-        </sonic-tr>
-      </sonic-tbody>
-      <sonic-caption>table caption</sonic-caption>
-    </sonic-table>
-  </template>
-</sonic-code>

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

@@ -1,82 +0,0 @@
-# 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/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,76 +0,0 @@
-# The subscriber mixin
-
-This is a mixin that is commonly extended by Concorde core components and 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 used to obtain a publisher via the PublisherManager (see [🥨 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:
-
-<sonic-code language="html">
-  <template>
-<img data-bind ::src="$img.avatar" ::title="ucFirst|$img.caption" />
-<a data-bind ::href="mailto:$email" ::inner-html="$email"></a>
-  </template>
-</sonic-code>
-
-This example 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()`.