@supersoniks/concorde 3.0.2 → 3.0.4

package/docs/img/concorde-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="222.442" height="47.558" viewBox="0 0 222.442 47.558"><g transform="translate(-51.885 -25)"><path d="M11.045.384A9.984,9.984,0,0,1,5.862-.9,8.546,8.546,0,0,1,2.538-4.474,11.519,11.519,0,0,1,1.381-9.741a11.462,11.462,0,0,1,1.17-5.3,8.651,8.651,0,0,1,3.33-3.567,9.872,9.872,0,0,1,5.139-1.285,10.228,10.228,0,0,1,4.5.933,7.522,7.522,0,0,1,3.055,2.621,7.7,7.7,0,0,1,1.24,3.963H14.676a4.017,4.017,0,0,0-1.144-2.371,3.328,3.328,0,0,0-2.423-.9,3.647,3.647,0,0,0-2.205.684A4.416,4.416,0,0,0,7.44-12.976a8.472,8.472,0,0,0-.524,3.158,8.75,8.75,0,0,0,.518,3.2A4.393,4.393,0,0,0,8.9-4.615a3.651,3.651,0,0,0,2.212.69,3.63,3.63,0,0,0,1.681-.384,3.279,3.279,0,0,0,1.24-1.119A4.261,4.261,0,0,0,14.676-7.2h5.139a8.049,8.049,0,0,1-1.221,3.957A7.443,7.443,0,0,1,15.584-.575,10.038,10.038,0,0,1,11.045.384Zm19.7,0A9.985,9.985,0,0,1,25.6-.888a8.6,8.6,0,0,1-3.343-3.554,11.411,11.411,0,0,1-1.176-5.3,11.469,11.469,0,0,1,1.176-5.325A8.6,8.6,0,0,1,25.6-18.62a9.985,9.985,0,0,1,5.146-1.272A9.985,9.985,0,0,1,35.9-18.62a8.6,8.6,0,0,1,3.343,3.554,11.469,11.469,0,0,1,1.176,5.325,11.411,11.411,0,0,1-1.176,5.3A8.6,8.6,0,0,1,35.9-.888,9.985,9.985,0,0,1,30.75.384Zm.026-4.219a3.367,3.367,0,0,0,2.263-.773,4.757,4.757,0,0,0,1.374-2.116A9.279,9.279,0,0,0,34.88-9.78a9.279,9.279,0,0,0-.467-3.055,4.8,4.8,0,0,0-1.374-2.122,3.35,3.35,0,0,0-2.263-.78,3.443,3.443,0,0,0-2.295.78,4.726,4.726,0,0,0-1.393,2.122,9.279,9.279,0,0,0-.467,3.055,9.279,9.279,0,0,0,.467,3.055,4.681,4.681,0,0,0,1.393,2.116A3.461,3.461,0,0,0,30.776-3.835Zm17.2-7.517V0H42.529V-19.636h5.19v3.464h.23a5.512,5.512,0,0,1,2.186-2.717,6.647,6.647,0,0,1,3.72-1A6.906,6.906,0,0,1,57.423-19a6.091,6.091,0,0,1,2.365,2.55,8.589,8.589,0,0,1,.844,3.944V0H55.185V-11.531a3.968,3.968,0,0,0-.92-2.819,3.315,3.315,0,0,0-2.57-1.016,3.87,3.87,0,0,0-1.937.473,3.253,3.253,0,0,0-1.3,1.374A4.769,4.769,0,0,0,47.975-11.352ZM72.346.384A9.985,9.985,0,0,1,67.162-.9a8.546,8.546,0,0,1-3.324-3.573,11.519,11.519,0,0,1-1.157-5.267,11.462,11.462,0,0,1,1.17-5.3,8.651,8.651,0,0,1,3.33-3.567,9.872,9.872,0,0,1,5.139-1.285,10.228,10.228,0,0,1,4.5.933,7.522,7.522,0,0,1,3.055,2.621,7.7,7.7,0,0,1,1.24,3.963H75.977a4.017,4.017,0,0,0-1.144-2.371,3.328,3.328,0,0,0-2.423-.9,3.647,3.647,0,0,0-2.205.684,4.416,4.416,0,0,0-1.464,1.988,8.472,8.472,0,0,0-.524,3.158,8.75,8.75,0,0,0,.518,3.2A4.393,4.393,0,0,0,70.2-4.615a3.651,3.651,0,0,0,2.212.69,3.63,3.63,0,0,0,1.681-.384,3.279,3.279,0,0,0,1.24-1.119A4.261,4.261,0,0,0,75.977-7.2h5.139A8.049,8.049,0,0,1,79.9-3.241,7.443,7.443,0,0,1,76.885-.575,10.038,10.038,0,0,1,72.346.384Zm19.7,0A9.985,9.985,0,0,1,86.905-.888a8.6,8.6,0,0,1-3.343-3.554,11.411,11.411,0,0,1-1.176-5.3,11.469,11.469,0,0,1,1.176-5.325,8.6,8.6,0,0,1,3.343-3.554,9.985,9.985,0,0,1,5.146-1.272A9.985,9.985,0,0,1,97.2-18.62a8.6,8.6,0,0,1,3.343,3.554,11.469,11.469,0,0,1,1.176,5.325,11.411,11.411,0,0,1-1.176,5.3A8.6,8.6,0,0,1,97.2-.888,9.985,9.985,0,0,1,92.051.384Zm.026-4.219a3.367,3.367,0,0,0,2.263-.773,4.757,4.757,0,0,0,1.374-2.116A9.279,9.279,0,0,0,96.18-9.78a9.279,9.279,0,0,0-.467-3.055,4.8,4.8,0,0,0-1.374-2.122,3.35,3.35,0,0,0-2.263-.78,3.443,3.443,0,0,0-2.295.78,4.726,4.726,0,0,0-1.393,2.122,9.278,9.278,0,0,0-.467,3.055,9.278,9.278,0,0,0,.467,3.055,4.681,4.681,0,0,0,1.393,2.116A3.461,3.461,0,0,0,92.077-3.835ZM103.83,0V-19.636h5.28v3.426h.2a5.1,5.1,0,0,1,1.8-2.768,4.76,4.76,0,0,1,2.915-.94,8.238,8.238,0,0,1,.882.051,6.212,6.212,0,0,1,.831.141v4.832a7.115,7.115,0,0,0-1.061-.2,9.532,9.532,0,0,0-1.24-.089,4.363,4.363,0,0,0-2.141.518,3.847,3.847,0,0,0-1.483,1.438,4.1,4.1,0,0,0-.543,2.122V0Zm19.59.32a7.351,7.351,0,0,1-4.046-1.157,7.876,7.876,0,0,1-2.864-3.413,13.041,13.041,0,0,1-1.055-5.542,12.858,12.858,0,0,1,1.087-5.619,7.829,7.829,0,0,1,2.9-3.362,7.4,7.4,0,0,1,3.969-1.119,6.1,6.1,0,0,1,2.755.556,5.484,5.484,0,0,1,1.79,1.381,7.22,7.22,0,0,1,1.042,1.617h.166v-9.844h5.433V0h-5.369V-3.145h-.23a7,7,0,0,1-1.08,1.617,5.443,5.443,0,0,1-1.8,1.323A6.249,6.249,0,0,1,123.42.32Zm1.726-4.334a3.487,3.487,0,0,0,2.231-.722,4.56,4.56,0,0,0,1.406-2.026,8.637,8.637,0,0,0,.492-3.055,8.632,8.632,0,0,0-.486-3.043,4.367,4.367,0,0,0-1.406-1.994,3.577,3.577,0,0,0-2.237-.7,3.532,3.532,0,0,0-2.263.729,4.456,4.456,0,0,0-1.393,2.02,8.677,8.677,0,0,0-.473,2.991,8.776,8.776,0,0,0,.479,3.023,4.56,4.56,0,0,0,1.393,2.045A3.485,3.485,0,0,0,125.146-4.014Zm21.418,4.4a10.412,10.412,0,0,1-5.21-1.234A8.345,8.345,0,0,1,138-4.353a11.538,11.538,0,0,1-1.176-5.376A11.479,11.479,0,0,1,138-15.047a8.681,8.681,0,0,1,3.317-3.567,9.628,9.628,0,0,1,5.031-1.278,10.393,10.393,0,0,1,3.624.62,8.169,8.169,0,0,1,2.94,1.86,8.473,8.473,0,0,1,1.962,3.113,12.434,12.434,0,0,1,.7,4.379v1.5H139V-11.8H150.45a4.172,4.172,0,0,0-.511-2.084,3.721,3.721,0,0,0-1.413-1.425,4.122,4.122,0,0,0-2.09-.518,4.193,4.193,0,0,0-2.192.569,4.08,4.08,0,0,0-1.489,1.521,4.333,4.333,0,0,0-.55,2.116v3.209a5.462,5.462,0,0,0,.543,2.518,3.889,3.889,0,0,0,1.54,1.636,4.653,4.653,0,0,0,2.365.575,5.15,5.15,0,0,0,1.662-.256,3.449,3.449,0,0,0,1.291-.767,3.335,3.335,0,0,0,.818-1.253l5.037.332A6.866,6.866,0,0,1,153.9-2.461a7.868,7.868,0,0,1-3.043,2.1A11.435,11.435,0,0,1,146.563.384Zm14.31-.051a2.954,2.954,0,0,1-2.167-.9,2.954,2.954,0,0,1-.9-2.167,2.919,2.919,0,0,1,.9-2.148,2.965,2.965,0,0,1,2.167-.895,2.985,2.985,0,0,1,2.148.895,2.889,2.889,0,0,1,.92,2.148,2.884,2.884,0,0,1-.428,1.54,3.286,3.286,0,0,1-1.119,1.112A2.9,2.9,0,0,1,160.873.332Z" transform="translate(110.385 62)" fill="#2a282d"/><g transform="translate(51.885 25)"><g transform="translate(2.6 2.209)"><path d="M52.661,65.423h-1.4l-.091-.468h-.208l-.078.351-.078.065H49.646l-.065-.169-.091-.338h-.221v.208l-.118.065-3.859-.326L44.5,64.4v-.871a7.436,7.436,0,0,1,.156-1.079c.182-.883.546-1.962,2.833-5.224s3.08-4.481,4.665-10.3l.078-.324c.468-1.975.806-3.132.936-3.547V34.524a25.625,25.625,0,0,1,.312-2.82h0c.143-.923.312-1.754.468-2.4a21.623,21.623,0,0,0,.195,43.218,41.171,41.171,0,0,1-.845-6.8.668.668,0,0,0-.637-.3Z" transform="translate(-33.181 -29.3)" fill="#2a282d"/><path d="M34.658,65.423h1.4l.091-.468h.209l.078.351.078.065h1.157l.065-.169.091-.338h.221v.208l.118.065,3.857-.326.793-.416v-.871a7.436,7.436,0,0,0-.156-1.079c-.182-.883-.546-1.962-2.833-5.224s-3.08-4.481-4.665-10.3l-.078-.324c-.468-1.975-.806-3.132-.936-3.547V34.524a25.63,25.63,0,0,0-.312-2.82h0c-.143-.923-.312-1.754-.468-2.4a21.623,21.623,0,0,1-.195,43.218,41.171,41.171,0,0,0,.845-6.8.668.668,0,0,1,.637-.3Z" transform="translate(-11.738 -29.3)" fill="#2a282d"/></g><path d="M23.779,1.169a22.61,22.61,0,1,0,22.61,22.61,22.61,22.61,0,0,0-22.61-22.61m0-1.169A23.779,23.779,0,1,1,0,23.779,23.779,23.779,0,0,1,23.779,0Z" transform="translate(0 0)" fill="#2a282d"/></g></g></svg>

package/docs/index.html

@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Concorde - A supersonic design system</title>
+    <link rel="stylesheet" href="https://use.typekit.net/eda3clw.css" />
+    <script src="https://cdn.jsdelivr.net/npm/fuzzysort@2.0.1/fuzzysort.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <link href="https://fonts.cdnfonts.com/css/inter" rel="stylesheet" />
+
+    <script type="module" crossorigin src="./assets/index-cNBBlbBt.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index--bDsd7qW.css">
+  </head>
+  <body class="px-6 lg:px-20">
+    <sonic-theme font background color>
+      <sonic-scope markdownsURL="src">
+        <div
+          class="flex items-center gap-4 border-b-[.3rem] border-current py-3 sticky top-0 z-40 text-neutral-900 bg-neutral-0"
+        >
+          <div class="font-bold text-4xl">
+            <sonic-link href="/">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="222.442"
+                height="47.558"
+                viewBox="0 0 222.442 47.558"
+              >
+                <g transform="translate(-51.885 -25)">
+                  <path
+                    d="M11.045.384A9.984,9.984,0,0,1,5.862-.9,8.546,8.546,0,0,1,2.538-4.474,11.519,11.519,0,0,1,1.381-9.741a11.462,11.462,0,0,1,1.17-5.3,8.651,8.651,0,0,1,3.33-3.567,9.872,9.872,0,0,1,5.139-1.285,10.228,10.228,0,0,1,4.5.933,7.522,7.522,0,0,1,3.055,2.621,7.7,7.7,0,0,1,1.24,3.963H14.676a4.017,4.017,0,0,0-1.144-2.371,3.328,3.328,0,0,0-2.423-.9,3.647,3.647,0,0,0-2.205.684A4.416,4.416,0,0,0,7.44-12.976a8.472,8.472,0,0,0-.524,3.158,8.75,8.75,0,0,0,.518,3.2A4.393,4.393,0,0,0,8.9-4.615a3.651,3.651,0,0,0,2.212.69,3.63,3.63,0,0,0,1.681-.384,3.279,3.279,0,0,0,1.24-1.119A4.261,4.261,0,0,0,14.676-7.2h5.139a8.049,8.049,0,0,1-1.221,3.957A7.443,7.443,0,0,1,15.584-.575,10.038,10.038,0,0,1,11.045.384Zm19.7,0A9.985,9.985,0,0,1,25.6-.888a8.6,8.6,0,0,1-3.343-3.554,11.411,11.411,0,0,1-1.176-5.3,11.469,11.469,0,0,1,1.176-5.325A8.6,8.6,0,0,1,25.6-18.62a9.985,9.985,0,0,1,5.146-1.272A9.985,9.985,0,0,1,35.9-18.62a8.6,8.6,0,0,1,3.343,3.554,11.469,11.469,0,0,1,1.176,5.325,11.411,11.411,0,0,1-1.176,5.3A8.6,8.6,0,0,1,35.9-.888,9.985,9.985,0,0,1,30.75.384Zm.026-4.219a3.367,3.367,0,0,0,2.263-.773,4.757,4.757,0,0,0,1.374-2.116A9.279,9.279,0,0,0,34.88-9.78a9.279,9.279,0,0,0-.467-3.055,4.8,4.8,0,0,0-1.374-2.122,3.35,3.35,0,0,0-2.263-.78,3.443,3.443,0,0,0-2.295.78,4.726,4.726,0,0,0-1.393,2.122,9.279,9.279,0,0,0-.467,3.055,9.279,9.279,0,0,0,.467,3.055,4.681,4.681,0,0,0,1.393,2.116A3.461,3.461,0,0,0,30.776-3.835Zm17.2-7.517V0H42.529V-19.636h5.19v3.464h.23a5.512,5.512,0,0,1,2.186-2.717,6.647,6.647,0,0,1,3.72-1A6.906,6.906,0,0,1,57.423-19a6.091,6.091,0,0,1,2.365,2.55,8.589,8.589,0,0,1,.844,3.944V0H55.185V-11.531a3.968,3.968,0,0,0-.92-2.819,3.315,3.315,0,0,0-2.57-1.016,3.87,3.87,0,0,0-1.937.473,3.253,3.253,0,0,0-1.3,1.374A4.769,4.769,0,0,0,47.975-11.352ZM72.346.384A9.985,9.985,0,0,1,67.162-.9a8.546,8.546,0,0,1-3.324-3.573,11.519,11.519,0,0,1-1.157-5.267,11.462,11.462,0,0,1,1.17-5.3,8.651,8.651,0,0,1,3.33-3.567,9.872,9.872,0,0,1,5.139-1.285,10.228,10.228,0,0,1,4.5.933,7.522,7.522,0,0,1,3.055,2.621,7.7,7.7,0,0,1,1.24,3.963H75.977a4.017,4.017,0,0,0-1.144-2.371,3.328,3.328,0,0,0-2.423-.9,3.647,3.647,0,0,0-2.205.684,4.416,4.416,0,0,0-1.464,1.988,8.472,8.472,0,0,0-.524,3.158,8.75,8.75,0,0,0,.518,3.2A4.393,4.393,0,0,0,70.2-4.615a3.651,3.651,0,0,0,2.212.69,3.63,3.63,0,0,0,1.681-.384,3.279,3.279,0,0,0,1.24-1.119A4.261,4.261,0,0,0,75.977-7.2h5.139A8.049,8.049,0,0,1,79.9-3.241,7.443,7.443,0,0,1,76.885-.575,10.038,10.038,0,0,1,72.346.384Zm19.7,0A9.985,9.985,0,0,1,86.905-.888a8.6,8.6,0,0,1-3.343-3.554,11.411,11.411,0,0,1-1.176-5.3,11.469,11.469,0,0,1,1.176-5.325,8.6,8.6,0,0,1,3.343-3.554,9.985,9.985,0,0,1,5.146-1.272A9.985,9.985,0,0,1,97.2-18.62a8.6,8.6,0,0,1,3.343,3.554,11.469,11.469,0,0,1,1.176,5.325,11.411,11.411,0,0,1-1.176,5.3A8.6,8.6,0,0,1,97.2-.888,9.985,9.985,0,0,1,92.051.384Zm.026-4.219a3.367,3.367,0,0,0,2.263-.773,4.757,4.757,0,0,0,1.374-2.116A9.279,9.279,0,0,0,96.18-9.78a9.279,9.279,0,0,0-.467-3.055,4.8,4.8,0,0,0-1.374-2.122,3.35,3.35,0,0,0-2.263-.78,3.443,3.443,0,0,0-2.295.78,4.726,4.726,0,0,0-1.393,2.122,9.278,9.278,0,0,0-.467,3.055,9.278,9.278,0,0,0,.467,3.055,4.681,4.681,0,0,0,1.393,2.116A3.461,3.461,0,0,0,92.077-3.835ZM103.83,0V-19.636h5.28v3.426h.2a5.1,5.1,0,0,1,1.8-2.768,4.76,4.76,0,0,1,2.915-.94,8.238,8.238,0,0,1,.882.051,6.212,6.212,0,0,1,.831.141v4.832a7.115,7.115,0,0,0-1.061-.2,9.532,9.532,0,0,0-1.24-.089,4.363,4.363,0,0,0-2.141.518,3.847,3.847,0,0,0-1.483,1.438,4.1,4.1,0,0,0-.543,2.122V0Zm19.59.32a7.351,7.351,0,0,1-4.046-1.157,7.876,7.876,0,0,1-2.864-3.413,13.041,13.041,0,0,1-1.055-5.542,12.858,12.858,0,0,1,1.087-5.619,7.829,7.829,0,0,1,2.9-3.362,7.4,7.4,0,0,1,3.969-1.119,6.1,6.1,0,0,1,2.755.556,5.484,5.484,0,0,1,1.79,1.381,7.22,7.22,0,0,1,1.042,1.617h.166v-9.844h5.433V0h-5.369V-3.145h-.23a7,7,0,0,1-1.08,1.617,5.443,5.443,0,0,1-1.8,1.323A6.249,6.249,0,0,1,123.42.32Zm1.726-4.334a3.487,3.487,0,0,0,2.231-.722,4.56,4.56,0,0,0,1.406-2.026,8.637,8.637,0,0,0,.492-3.055,8.632,8.632,0,0,0-.486-3.043,4.367,4.367,0,0,0-1.406-1.994,3.577,3.577,0,0,0-2.237-.7,3.532,3.532,0,0,0-2.263.729,4.456,4.456,0,0,0-1.393,2.02,8.677,8.677,0,0,0-.473,2.991,8.776,8.776,0,0,0,.479,3.023,4.56,4.56,0,0,0,1.393,2.045A3.485,3.485,0,0,0,125.146-4.014Zm21.418,4.4a10.412,10.412,0,0,1-5.21-1.234A8.345,8.345,0,0,1,138-4.353a11.538,11.538,0,0,1-1.176-5.376A11.479,11.479,0,0,1,138-15.047a8.681,8.681,0,0,1,3.317-3.567,9.628,9.628,0,0,1,5.031-1.278,10.393,10.393,0,0,1,3.624.62,8.169,8.169,0,0,1,2.94,1.86,8.473,8.473,0,0,1,1.962,3.113,12.434,12.434,0,0,1,.7,4.379v1.5H139V-11.8H150.45a4.172,4.172,0,0,0-.511-2.084,3.721,3.721,0,0,0-1.413-1.425,4.122,4.122,0,0,0-2.09-.518,4.193,4.193,0,0,0-2.192.569,4.08,4.08,0,0,0-1.489,1.521,4.333,4.333,0,0,0-.55,2.116v3.209a5.462,5.462,0,0,0,.543,2.518,3.889,3.889,0,0,0,1.54,1.636,4.653,4.653,0,0,0,2.365.575,5.15,5.15,0,0,0,1.662-.256,3.449,3.449,0,0,0,1.291-.767,3.335,3.335,0,0,0,.818-1.253l5.037.332A6.866,6.866,0,0,1,153.9-2.461a7.868,7.868,0,0,1-3.043,2.1A11.435,11.435,0,0,1,146.563.384Zm14.31-.051a2.954,2.954,0,0,1-2.167-.9,2.954,2.954,0,0,1-.9-2.167,2.919,2.919,0,0,1,.9-2.148,2.965,2.965,0,0,1,2.167-.895,2.985,2.985,0,0,1,2.148.895,2.889,2.889,0,0,1,.92,2.148,2.884,2.884,0,0,1-.428,1.54,3.286,3.286,0,0,1-1.119,1.112A2.9,2.9,0,0,1,160.873.332Z"
+                    transform="translate(110.385 62)"
+                    fill="#2a282d"
+                  />
+                  <g transform="translate(51.885 25)">
+                    <g transform="translate(2.6 2.209)">
+                      <path
+                        d="M52.661,65.423h-1.4l-.091-.468h-.208l-.078.351-.078.065H49.646l-.065-.169-.091-.338h-.221v.208l-.118.065-3.859-.326L44.5,64.4v-.871a7.436,7.436,0,0,1,.156-1.079c.182-.883.546-1.962,2.833-5.224s3.08-4.481,4.665-10.3l.078-.324c.468-1.975.806-3.132.936-3.547V34.524a25.625,25.625,0,0,1,.312-2.82h0c.143-.923.312-1.754.468-2.4a21.623,21.623,0,0,0,.195,43.218,41.171,41.171,0,0,1-.845-6.8.668.668,0,0,0-.637-.3Z"
+                        transform="translate(-33.181 -29.3)"
+                        fill="#2a282d"
+                      />
+                      <path
+                        d="M34.658,65.423h1.4l.091-.468h.209l.078.351.078.065h1.157l.065-.169.091-.338h.221v.208l.118.065,3.857-.326.793-.416v-.871a7.436,7.436,0,0,0-.156-1.079c-.182-.883-.546-1.962-2.833-5.224s-3.08-4.481-4.665-10.3l-.078-.324c-.468-1.975-.806-3.132-.936-3.547V34.524a25.63,25.63,0,0,0-.312-2.82h0c-.143-.923-.312-1.754-.468-2.4a21.623,21.623,0,0,1-.195,43.218,41.171,41.171,0,0,0,.845-6.8.668.668,0,0,1,.637-.3Z"
+                        transform="translate(-11.738 -29.3)"
+                        fill="#2a282d"
+                      />
+                    </g>
+                    <path
+                      d="M23.779,1.169a22.61,22.61,0,1,0,22.61,22.61,22.61,22.61,0,0,0-22.61-22.61m0-1.169A23.779,23.779,0,1,1,0,23.779,23.779,23.779,0,0,1,23.779,0Z"
+                      transform="translate(0 0)"
+                      fill="#2a282d"
+                    />
+                  </g>
+                </g>
+              </svg>
+            </sonic-link>
+          </div>
+          <docs-search class="mx-auto flex-grow block max-w-[32rem] w-full">
+          </docs-search>
+
+          <div>
+            <!-- <sonic-button shape="circle" icon variant="ghost">
+              <sonic-icon library="iconoir" name="github"></sonic-icon>
+            </sonic-button> -->
+          </div>
+        </div>
+
+        <sonic-router>
+          <template data-route=".md">
+            <div
+              class="grid grid-cols-[minmax(10rem,15rem)_minmax(0,1fr)] gap-8"
+            >
+              <div>
+                <docs-navigation
+                  class="sticky top-[4.2rem] max-h-[calc(100vh_-_4.2rem)] block overflow-auto py-4 custom-scroll"
+                ></docs-navigation>
+              </div>
+              <div class="min-h-[100vh] pt-3">
+                <div class="max-w-[80ch] mx-auto block py-8">
+                  <docs-page noShadowDom class="prose"></docs-page>
+                </div>
+              </div>
+            </div>
+          </template>
+
+          <template data-route="^((?!#).)*$">
+            <div
+              class="text-4xl leading-none md:text-5xl lg:text-7xl xl:text-8xl max-w-[29ch] lg:max-w-[19ch] mt-9 mb-10 text-neutral-900"
+            >
+              <!-- webcomponents built with lit to implement
+              <span class="font-bold">anywhere, fast, safe and consistent user interfaces. </span> -->
+              webcomponents for
+              <span class="font-bold"
+                >scoped and consistent user interfaces.
+              </span>
+              <div class="text-base mt-6 -mb-12 relative z-2">
+                <div
+                  class="inline-flex items-center gap-3 text-lg leading-none"
+                >
+                  <sonic-button
+                    size="2xl"
+                    variant="outline"
+                    type="primary"
+                    href="/#docs/_getting-started/start.md/start"
+                  >
+                    <sonic-icon
+                      name="airplane"
+                      library="iconoir"
+                      class="rotate-90 inline-block mr-1"
+                    ></sonic-icon
+                    ><span class="font-bold">Get Started</span>
+                  </sonic-button>
+                  <sonic-code language="bash" inline noEdit>
+                    <template>
+                      npx @supersoniks/create-concorde-ts-starter "MyProject"
+                    </template></sonic-code
+                  >
+                </div>
+              </div>
+            </div>
+            <sonic-image
+              src="/img/concorde.png"
+              alt=""
+              class="w-full block mix-blend-multiply"
+            ></sonic-image>
+          </template>
+        </sonic-router>
+      </sonic-scope>
+    </sonic-theme>
+  </body>
+</html>

package/docs/src/core/components/functional/date/date.md

@@ -0,0 +1,290 @@
+# Date
+
+## No attribute
+
+**Nothing** is displayed.
+
+<sonic-code>
+  <template>
+    <sonic-date></sonic-date>
+  </template>
+</sonic-code>
+
+## Now
+
+Displays the **current date**.
+
+<sonic-code>
+  <template>
+    <sonic-date now></sonic-date>
+  </template>
+</sonic-code>
+
+
+## Date  
+
+Displays a date from a **timestamp**.
+
+<sonic-code>
+  <template>
+    <sonic-date date= "1640265629"></sonic-date>
+  </template>
+</sonic-code>
+
+## Date_string  
+
+Displays a date from a **string**.
+
+<sonic-code>
+  <template>
+    <sonic-date date_string="July 20, 69 20:17:40 GMT+00:00"></sonic-date>
+  </template>
+</sonic-code>
+
+## Start_date / end_date  
+
+Displays a period of time **from start_date to end_date**.  
+When by itself **start_date** will act as **date**  
+if a **start_date is not specified** it will be set by the **current date**.  
+if the **end_date is anterior** to start date date it will be **used as the start_date**. 
+
+<sonic-code>
+  <template>
+    <!-- from start_date to end_date -->
+    <sonic-date start_date="1640265629" end_date= "1640365629"></sonic-date>
+    <br>
+    <!-- start_date is not specified -->
+    <sonic-date end_date= "2640365629"></sonic-date>
+    <br>
+    <!-- end_date is anterior -->
+    <sonic-date end_date= "640365629"></sonic-date>
+  </template>
+</sonic-code>
+
+
+## Start_date_string / end_date_string
+
+<sonic-code>
+  <template>
+    <!-- from start_date to end_date -->
+    <sonic-date date_string="July 20, 90 20:17:40 GMT+00:00" end_date_string= "June 20, 94 20:17:40 GMT+00:00"></sonic-date>
+    <br>
+    <!-- start_date is not specified -->
+    <sonic-date end_date_string= "May 20, 34 20:17:40 GMT+00:00"></sonic-date>
+    <br>
+    <!-- end_date is anterior -->
+    <sonic-date end_date_string= "April 20, 06 20:17:40 GMT+00:00"></sonic-date>
+  </template>
+</sonic-code>
+
+## Wording_billet_periode_validite
+
+<sonic-code>
+  <template>
+    <sonic-date wording_billet_periode_validite= "À partir du %s jusqu'au %s" start_date="1640265629" end_date= "1640365629"></sonic-date>
+  </template>
+</sonic-code>
+
+
+## Weekday
+
+<sonic-code>
+  <template>
+    <b>narrow : </b>
+    <sonic-date weekday="narrow" now></sonic-date>
+    <br>
+    <b>short (default) : </b>
+    <sonic-date weekday="short" now></sonic-date>
+    <br>
+    <b>long : </b>
+    <sonic-date weekday="long" now></sonic-date>
+    <br>
+    <b>hidden : </b>
+    <sonic-date weekday="hidden" now></sonic-date>
+  </template>
+</sonic-code>
+
+## Day
+
+<sonic-code>
+  <template>
+    <b>numeric : </b>
+    <sonic-date day="numeric" date_string="July 01, 69"></sonic-date>
+    <br>
+    <b>2-digit (default) : </b>
+    <sonic-date day="2-digit" date_string="July 01, 69"></sonic-date>
+  </template>
+</sonic-code>
+
+## Month
+
+<sonic-code>
+  <template>
+    <b>numeric : </b>
+    <sonic-date month="numeric" now></sonic-date>
+    <br>
+    <b>2-digit : </b>
+    <sonic-date month="2-digit" now></sonic-date>
+    <br>
+    <b>narrow : </b>
+    <sonic-date month="narrow" now></sonic-date>
+    <br>
+    <b>short (default) : </b>
+    <sonic-date month="short" now></sonic-date>
+    <br>
+    <b>long : </b>
+    <sonic-date month="long" now></sonic-date>
+  </template>
+</sonic-code>
+
+## Year
+
+<sonic-code>
+  <template>
+    <b>numeric (default) : </b>
+    <sonic-date year="numeric" now></sonic-date>
+    <br>
+    <b>2-digit : </b>
+    <sonic-date year="2-digit" now></sonic-date>
+  </template>
+</sonic-code>
+
+## Hour
+
+<sonic-code>
+  <template>
+    <b>numeric : </b>
+    <sonic-date hour="numeric" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
+    <br>
+    <b>2-digit (default) : </b>
+    <sonic-date hour="2-digit" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
+    <br>
+    <b>hidden : </b>
+    <sonic-date hour="hidden" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
+  </template>
+</sonic-code>
+
+## Minute
+
+<sonic-code>
+  <template>
+    <b>numeric : </b>
+    <sonic-date minute="numeric" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
+    <br>
+    <b>2-digit (default) : </b>
+    <sonic-date minute="2-digit" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
+    <br>
+    <b>hidden : </b>
+    <sonic-date minute="hidden" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
+  </template>
+</sonic-code>
+
+## Language  
+
+<sonic-button href="https://www.w3schools.com/tags/ref_language_codes.asp" target="_blank" type="info" size="sm">ISO 639-1 Language Codes</sonic-button>
+
+<sonic-code>
+  <template>
+    <b>fr : </b>
+    <sonic-date language="fr" now></sonic-date>
+    <br>
+    <b>en : </b>
+    <sonic-date language="en" now></sonic-date>
+    <br>
+    <b>zh : </b>
+    <sonic-date language="zh" now></sonic-date>
+    <br>
+    <b>ja : </b>
+    <sonic-date language="ja" now></sonic-date>
+  </template>
+</sonic-code>
+
+## Time_zone
+
+For the list of supported timeZones, run <b class="text-info">Intl.supportedValuesOf('timeZone')</b> in the console
+
+<sonic-code>
+  <template>
+    <b>Europe/London : </b>
+    <sonic-date time_zone="Europe/London" now></sonic-date>
+    <br>
+    <b>Europe/Paris : </b>
+    <sonic-date time_zone="Europe/Paris" now></sonic-date>
+    <br>
+    <b>America/Tijuana : </b>
+    <sonic-date time_zone="America/Tijuana" now></sonic-date>
+  </template>
+</sonic-code>
+
+## Era  
+
+<sonic-code>
+  <template>
+    <b>narrow : </b>
+    <sonic-date era="narrow" now></sonic-date>
+    <br>
+    <b>short : </b>
+    <sonic-date era="short" now></sonic-date>
+    <br>
+    <b>long : </b>
+    <sonic-date era="long" now></sonic-date>
+  </template>
+</sonic-code>
+
+## .renderIf  
+
+<sonic-alert status="error" background>Deprecated</sonic-alert>
+
+<sonic-code>
+  <template>
+    <b>True statement : </b>
+    <sonic-date data-bind ::render-if="|10>2" now></sonic-date>
+    <br>
+    <b>False statement : </b>
+    <sonic-date data-bind ::render-if="|10<2" now></sonic-date>
+  </template>
+</sonic-code>
+
+## DesignMode  
+
+<sonic-code>
+  <template>
+    <div class="relative max-w-lg rounded-lg overflow-hidden">
+      <div class="absolute top-0 h-1/2 w-full bg-gradient-to-b from-[rgba(0,0,10,.2)] z-10 "></div>
+      <sonic-date
+        designMode
+        noShadowDom
+        start_date= "1640265629"
+        end_date= "1640365629"
+        language= "fr"
+        wording_billet_periode_validite= "Du %s au %s"
+        year= "numeric"
+        month= "short"
+        weekday= "short"
+        hour= "2-digit"
+        minute= "2-digit"
+        class="py-4 drop-shadow-lg text-contrast-content p-4 inline-block text-center absolute left-0 z-20 text-sm"
+      >
+        <template data-value="weekday">
+          <span class="hidden"></span>
+        </template>
+        <template data-value="day">
+          <span class="text-4xl block uppercase leading-none font-bold"></span>
+        </template>
+        <template data-value="month">
+          <span class="text-xl block uppercase leading-tight font-bold"></span>
+        </template>
+        <template data-value="year">
+          <span class="text-lg  mb-1 font-bold  block uppercase leading-tight "></span>
+        </template>
+        <template data-value="to">
+          <span class="font-medium block my-1 text-3xl leading-none">↓</span>
+        </template>
+      </sonic-date>
+      <sonic-image 
+      ratio="1/1" src="https://picsum.photos/id/237/700/700">
+      </sonic-image>
+    </div>
+  </template>
+</sonic-code>
+

package/docs/src/core/components/functional/fetch/fetch.md

@@ -0,0 +1,117 @@
+# Fetch
+The **sonic-fetch** component is used to request and store data from an API.
+Fetch extends the mixins Fetcher and [Subscriber](#docs/_core-concept/subscriber.md/subscriber)
+
+## Basic usage
+In order to work properly the <b>sonic-fetch</b> component needs at least the following attributes.  
+- **serviceURL** : A base service url. This attribute can be inherited from an ancestor.
+  *ex : https://reqres.in*
+- **endPoint** : the specific location where requests for information are sent (see the api docs).  
+  *ex : api/users | api/users?page=2 | api/users/2*
+- **dataProvider *(Required)*** : An ID that is used as a reference to the object storing the data returned by the API.
+This attribute can be inherited from an ancestor.
+
+<sonic-code>
+  <template>
+    <sonic-fetch serviceURL="https://reqres.in" endPoint="api/users?page=2" dataProvider="myDataObj"></sonic-fetch>
+    <sonic-button dataProvider="myDataObj" debug>Hover to see the data</sonic-button>
+  </template>
+</sonic-code>
+
+## DataProvider as an endPoint
+If no **endPoint** is specified it will be filled by the **dataProvider ID** instead  
+
+<sonic-code>
+  <template>
+    <sonic-fetch serviceURL="https://reqres.in" dataProvider="api/users?page=2" ></sonic-fetch>
+    <sonic-button dataProvider="api/users?page=2" debug>Hover to see the data</sonic-button>
+  </template>
+</sonic-code>
+
+## HeadersDataProvider
+
+<sonic-alert status="error" background>Deprecated</sonic-alert>
+
+## Key
+When the **key** attribute is present, only a sub-part of the data received is injected into the **dataProvider**.
+We can use the dot syntax to target what we want to keep.
+
+For example if the data is `{my:{data:{a:1,b:2}}}` and the key is `key="my.data"`, the data available in the **dataProvider** will be `{a:1 , b:2}`
+
+<sonic-code>
+  <template>
+    <sonic-fetch serviceURL="https://reqres.in" dataProvider="api/users/2" ></sonic-fetch>
+    <sonic-button dataProvider="api/users/2" debug>dataProvider object</sonic-button>
+    <!-- Get the user ID -->
+    <sonic-fetch serviceURL="https://reqres.in" dataProvider="id" endPoint="api/users/2" key="data.id"></sonic-fetch>
+    <sonic-button dataProvider="id" debug>data.id</sonic-button>
+    <!-- Get the user First name -->
+    <sonic-fetch serviceURL="https://reqres.in" dataProvider="first_name" endPoint="api/users/2" key="data.first_name"></sonic-fetch>
+    <sonic-button dataProvider="first_name" debug>data.first_name</sonic-button>
+    <!-- Get the user Last name -->
+    <sonic-fetch serviceURL="https://reqres.in" dataProvider="last_name" endPoint="api/users/2" key="data.last_name"></sonic-fetch>
+    <sonic-button dataProvider="last_name" debug>data.last_name</sonic-button>
+    <!-- Get the user email -->
+    <sonic-fetch serviceURL="https://reqres.in" dataProvider="email" endPoint="api/users/2" key="data.email"></sonic-fetch>
+    <sonic-button dataProvider="email" debug>data.email</sonic-button>
+  </template>
+</sonic-code>
+
+## Text mode
+
+if the mime type of the content returned by the service begins with **text/**, then the dataProvider has a key named "text" which contains the text returned by the service.
+
+<sonic-code>
+  <template>
+    <sonic-fetch endPoint="README.md" dataProvider="fetchText"></sonic-fetch>
+    <sonic-button dataProvider="fetchText" debug>Hover to see the data</sonic-button>
+  </template>
+</sonic-code>
+
+## NoLoader
+
+The noLoader attribute disables display of the default loader
+
+<sonic-code>
+  <template>
+    <sonic-fetch noLoader serviceURL="https://reqres.in" endPoint="api/users?page=2" dataProvider="myDataObj"></sonic-fetch>
+    <sonic-button dataProvider="myDataObj" debug>Basic fetch with noLoader attribute</sonic-button>
+  </template>
+</sonic-code>
+
+
+
+
+<!--
+ ## Summary
+ Extends mixins : Fetcher, [Subscriber](#core/components/functional/subscriber/subscriber.md/subscriber)
+ 
+ ### Configuration via les attributs
+
+| nom          | sur quelle balise | Description | Exemple de valeur | défaut / requis |
+|-----|-----|---|---|---|
+| serviceURL   |Fetcher ou un de ses parents | URL de base des services. | http://la-billetterie.net/api/v2 | domain du site |
+| endpoint   |Fetcher | point d'accès d'un service | user/2 | valeur de l'attribut dataProvider |
+| dataProvider  |Fetcher ou un de ses parents | Identifiant d'un publisher qui stock les données, voir [subscriber](#core/components/functional/subscriber/subscriber.md/subscriber). | billetterie/user/2 | *REQUIS* |
+| headersDataProvider  |Fetcher ou un de ses parents | Identifiant d'un publisher qui stock les données destinées à être envoyées en entêtes de la requetes | MyCoockieHEaders | null |
+| key  |Fetcher  | extrait une sous propriété de la donnée chargée avant de l'assignée à son publisher | ma.data | null |
+
+ *Si la données est `{ma:{data:{a:1,b:2}}}` et `key="ma.data"`, la données disponible dans le composant sera `{a:1, b:2}`*
+ 
+ ### Intégration auto de basic auth (pour tester une api qui nécessite une authentification) 
+
+ Fetch utilise le service pour générer le token et l'ajoute au header de l'appel qui récupère les données.
+
+| nom           | sur quelle balise | Description | Exemple de valeur | défaut / requis |
+|-----|-----|---|---|---|
+| userName      | Fetcher ou un de ses parents | Nom de l'utilisateur | DjuDju | null |
+| password      | Fetcher ou un de ses parents | mot de passe | pom_549 | null |
+| tokenProvider | Fetcher ou un de ses parents | point d'accès du service fournissant le token | auth | null |
+| token | Fetcher ou un de ses parents | A fournir à la place des autres attributs si on le possède | q<d34gb | null |
+
+ ### Autres choses utiles
+ L'attribut *noLoader* du composant permet de désactiver l'affichage du loader par défaut.
+ On peut appeler la methode invalidate() sur le publisher associé au  composant pour declencher le rechargement des données.
+ endPoint est une propriété réctive, par conséquent, sa modification, manuelle via template ou data binbding provoque la mise à jour du contenu.
+-->
+

package/docs/src/core/components/functional/if/if.md

@@ -0,0 +1,16 @@
+# if / condition
+
+The **sonic-if** component shows its content based on the value of its reactive property names **condition**
+
+<sonic-code>
+  <template>
+<div dataProvider="visibilitySettings" formDataProvider="visibilitySettings">
+  <sonic-checkbox label="Show evacuation plan" name="togglePlan" unique checked value="true"></sonic-checkbox>
+  <sonic-if  data-bind ::condition="$togglePlan" class="mt-4 block">
+  <sonic-image src="https://www.thebaron.info/assets/mail/concorde-evacuation.jpg" rounded="md" ratio="654/463"></sonic-image>
+  </sonic-if>
+</div>
+  </template>
+</sonic-code>
+
+