@supersoniks/concorde 3.1.44 → 3.1.45

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

@@ -0,0 +1,63 @@
+# Progress bar
+
+Displays an indicator showing the completion progress of a task.
+
+## Indeterminate
+
+<sonic-code>
+  <template>
+  <sonic-progress></sonic-progress>
+  </template>
+</sonic-code>
+
+
+## Remaining
+
+<sonic-code>
+  <template>
+  <sonic-progress  type="danger" value="80">
+    80% Used <span slot="remaining">20% left</span>
+  </sonic-progress>
+  </template>
+</sonic-code>
+
+## Sizes
+
+<sonic-code>
+  <template>
+<div class="grid gap-3">
+  <sonic-progress  size="2xs" value="25">25%</sonic-progress>
+  <sonic-progress  size="xs" value="25">25%</sonic-progress>
+  <sonic-progress  size="sm" value="25">25%</sonic-progress>
+  <sonic-progress  size="md" value="25">25%</sonic-progress>
+  <sonic-progress  size="lg" value="25">25%</sonic-progress>
+  <sonic-progress  size="xl" value="25">25%</sonic-progress>
+  <sonic-progress  size="2xl" value="25">25%</sonic-progress>
+</div>
+  </template>
+</sonic-code>
+
+## Type
+
+<sonic-code>
+  <template>
+<div class="grid gap-3">
+  <sonic-progress  value="50">50%</sonic-progress>
+  <sonic-progress  type="info" value="50">50%</sonic-progress>
+  <sonic-progress  type="warning" value="50">50%</sonic-progress>
+  <sonic-progress  type="success" value="50">50%</sonic-progress>
+  <sonic-progress  type="danger" value="50">50%</sonic-progress>
+</div>
+   </template>
+</sonic-code>
+
+
+## Invert
+
+<sonic-code>
+  <template>
+<div class="bg-neutral-900 p-4 rounded-md">
+  <sonic-progress  type="invert" value="50">50%</sonic-progress>
+</div>
+  </template>
+</sonic-code>

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

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

@@ -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/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)