@supersoniks/concorde 3.1.41 → 3.1.43

package/docs/src/docs/_getting-started/start.md

@@ -1,39 +0,0 @@
-# Introduction
-
-## What is Concorde ? 
-
-Based on **[lit.dev](https://lit.dev)**, Concorde is a collection of webcomponents made to build shared apps or websites.  
-Develop user interfaces without thinking about the implementation context, where everything is scoped, but preserving graphic consistency by setting the strict minimum of css variables.
-
-## Why and use case
-
-In 2022, Supersoniks wanted to create a new version of his ticketing app, in production un nearly 100 websites. We needed shared components which could be implemented in mobile apps, modern websites, and also old ones made in php, without bundlers or whatever.  
-Instead of building a new app for each type of project, which would become impossible to maintain, we've decided to create one app, composed by a few webcomponents wich could easily be recomposed on any website.
-Webcomponents appeared to be a the perfect solution to guarantee that compatibility with all past, present and futures environment, and lit seemed to be the best choice to build them.
-
-### Stack
-
-* Lit
-* Typescript
-* Vite
-* Tailwind, not in the core, but in the starter kit
-
-### Functionnal features and components
-
-* Data management with Publisher / Subscriber pattern
-* Form management
-* Fetching data, lists, queue with lazyload
-* Data binding
-* Simple router, state component, ...
-* And all ui component, with status variants to build an app with a consistent design
-
-
-## Start a new project easily 
-
-A new project with Vite, Typescript and Tailwind already configured and a simple example of a subscriber component : 
-
-<sonic-code language="bash">
-  <template>
-  npx @supersoniks/create-concorde-ts-starter "project_name"
-  </template>
-</sonic-code>

package/docs/src/docs/_getting-started/theming.md

@@ -1,91 +0,0 @@
-# Adding styles
-
-## Normal Behavior
-
-No style crosses the shadow root of a component, except for inheritable properties (which have the "inherit" property possible) and CSS variables.
-Properties integrated via a "[slot](https://developer.mozilla.org/en/docs/Web/HTML/Element/slot)" remain stylizable in a conventional way.
-
-- **During creation / from the inside:**
-  - We edit the [static "styles" property of the lit component](https://lit.dev/docs/components/styles/), which can also reference shared and dynamic styles.
-    These styles are scoped and do not impact the outside.
-  - We use CSS variables as the value of properties intended to be customized from the outside.
-    For each variable, we define a default value to have a simple but consistent base style.
-  - We only rewrite inheritable properties with hard values if they are truly specific to the component.
-  - The `<style>` tag as a direct child can be used as a last resort, especially if there is a need for particularly dynamic customization. Performance is reduced.
-- **During use / from the outside:**
-  We define values for **inheritable CSS properties** (e.g., font-\_, color...) using tools like Tailwind.
-  We modify the value of **CSS variables** used by the component.
-
-## Choosing Style Presets via Reactive Properties:
-
-The declaration of reactive properties is useful for selecting a particular configuration that mostly affects a set of properties.
-
-For example, a `size` property (xs, sm, md, xl) will affect margins, font, line heights to align them with the corresponding CSS vars, which can be customized using the methods mentioned earlier if necessary.
-
-It is recommended to use the `{reflect: true}` property for reactive properties that have an associated style on the `:host()`. For example: `:host([type='primary']){...}`
-
-☢️ **Caution:** Passing class names via reactive properties / HTML attributes of the component should be avoided as it can quickly lead to difficult-to-manage situations.
-
-#### CSS "display" Property
-
-By default, the display property is `inline`.
-Therefore, be careful to define it according to the needs, as one might mistakenly expect it to be `block` as with a regular `<div>`.
-
-☢️ **Caution:** Defining the `display` property as `contents` may seem attractive at first, but:
-
-- It almost always leads to the creation of wrappers to style the content (instead of using `:host`).
-- It is no longer possible to directly add classes to the component or style it from the outside.
-  Ultimately, the amount of code to write increases significantly.
-
-## TAILWIND Functional Classes
-
-[tailwind](https://tailwindcss.com/) has been integrated into Concorde and is available in scoped components (with Shadow DOM).
-To use it, you need to import the following:
-
-<sonic-code language="javascript">
-  <template>
-import { tailwind } from "@supersoniks/concorde/la-billetterie/ui/theme/theme";
-  </template>
-</sonic-code>
-
-Then include the `tailwind` style in the static `styles` property of the component:
-
-<sonic-code language="javascript">
-  <template>
-static styles = [tailwind];
-  </template>
-</sonic-code>
-
-Finally, use it in the HTML within the render function:
-
-<sonic-code language="html">
-  <template>
-<p class="m-2">A paragraph with margin</p>
-  </template>
-</sonic-code>
-
-The colors from Concorde's theme are referenced in Tailwind's theme.
-
-## Operation without Shadow DOM
-
-### Usefulness
-
-This operation is particularly useful when it comes to **adding behavior to a simple existing element**.
-It may also become necessary to establish **compatibility with a traditional JS library**.
-
-For example, with a text input:
-
-- Trigger automatic data or filter update when typing text.
-- Automatic formatting.
-- Constraints that cannot be handled by native methods.
-
-### Consequences
-
-If there is no shadow DOM (see the **noShadowDom** property of **Subscriber**):
-
-- Styling using the static "styles" property of the lit component will not be applied.
-- The element and its content can be styled in a traditional manner.
-
-For example, the components `queue`, `list`, and `fetch` do not have a shadow DOM.
-
-ℹ️ **Note:** Specifically in this case, it may be useful to set the `display` property to `contents`.