@supersoniks/concorde 3.1.100 → 3.2.1

package/docs/img/concorde-icon.svg

@@ -0,0 +1,5 @@
+<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33 62C49.0163 62 62 49.0163 62 33C62 16.9837 49.0163 4 33 4C16.9837 4 4 16.9837 4 33C4 49.0163 16.9837 62 33 62Z" fill="black"/>
+<path d="M33 0C14.77 0 0 14.77 0 33C0 51.23 14.77 66 33 66C51.22 65.98 65.98 51.22 66 33.01C66 14.78 51.23 0.01 33 0ZM33 64.5C15.6 64.5 1.5 50.4 1.5 33C1.5 15.6 15.6 1.5 33 1.5C50.39 1.52 64.49 15.61 64.5 33.01C64.5 50.4 50.4 64.5 33 64.5Z" fill="black"/>
+<path d="M33.2499 62.03C33.8799 59.24 34.26 56.17 34.39 53.08C34.57 52.78 34.9099 52.6 35.2599 52.64H35.39C35.48 52.64 35.5799 52.64 35.6899 52.64H35.7599C35.7599 52.64 35.7999 52.64 35.8299 52.64C36.2499 52.62 36.6799 52.58 36.9099 52.56C36.9399 52.56 36.9599 52.56 36.9799 52.56C37.0099 52.56 37.0299 52.56 37.0499 52.56H37.0899L37.2099 51.93H37.4799L37.5799 52.4L37.6899 52.49H39.2699L39.39 52.38L39.5099 51.93H39.7899L39.8399 52.21L39.9999 52.29L45.2099 51.86L46.2799 51.29C46.2799 51.29 46.2799 50.85 46.2399 50.25V50.18C46.2399 50.18 46.2399 50.13 46.2399 50.11C46.2099 49.62 46.1399 49.13 46.0399 48.65C45.7899 47.45 45.29 46 42.2 41.58C39.11 37.16 38.04 35.52 35.89 27.63C35.85 27.48 35.8199 27.35 35.7899 27.2C35.1399 24.53 34.6899 22.95 34.5199 22.38V10.89C34.4999 9.60996 34.3999 8.33996 34.2099 7.07996C34.0499 5.97996 33.6099 4.89996 33.3499 3.95996H32.6299C32.3599 4.89996 31.9299 5.97996 31.7699 7.06996C31.5799 8.33996 31.4799 9.60996 31.4599 10.89V22.38C31.2899 22.95 30.8299 24.52 30.1899 27.2C30.1599 27.35 30.1199 27.49 30.0899 27.63C27.9499 35.52 26.8699 37.16 23.7799 41.58C20.6899 46 20.1899 47.45 19.9399 48.65C19.8399 49.13 19.7799 49.62 19.7399 50.11C19.7399 50.13 19.7399 50.16 19.7399 50.18V50.25C19.6999 50.85 19.7 51.29 19.7 51.29L20.7699 51.86L25.9799 52.29L26.14 52.21L26.1899 51.93H26.4799L26.5999 52.38L26.7299 52.49H28.2999L28.4099 52.4L28.5099 51.93H28.7699L28.89 52.56H28.9399C28.9399 52.56 28.9799 52.56 29.0099 52.56C29.0299 52.56 29.0499 52.56 29.0799 52.56C29.3099 52.58 29.7499 52.63 30.1599 52.64C30.1799 52.64 30.2099 52.64 30.2299 52.64H30.2999C30.4099 52.64 30.5099 52.64 30.5999 52.64H30.7299C31.0799 52.6 31.4299 52.77 31.6099 53.08C31.7299 56.17 32.1099 59.24 32.7399 62.03H33.2499Z" fill="#FF0A0A"/>
+</svg>

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,93 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="./svg/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>
+     -->
+    <script src="https://cdn.jsdelivr.net/npm/marked@13.0.3"></script>
+    <script type="module" crossorigin src="./assets/index-Dgl1lJQo.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-C0K6xugr.css">
+  </head>
+  <body class="px-6 lg:px-20">
+    <sonic-theme
+      customIconLibraryPath="https://cdn.supersoniks.com/concorde/icons/fontawesome/v6/$prefix/$name.svg"
+      customIconDefaultPrefix="regular"
+      markdownsURL="src"
+    >
+      <sonic-docs-header></sonic-docs-header>
+      <sonic-router>
+        <template data-route="^((?!.md).)*$">
+          <div class="col-span-full">
+            <div
+              class="font-headings 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 for
+              <div class="animated-text font-medium">
+                &nbsp;
+                <span> scoped </span>
+                <span> consistent </span>
+                <span> shareable </span>
+              </div>
+              user interfaces
+            </div>
+            <div class="text-base mt-6 relative z-2 mb-40">
+              <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>
+            <img
+              src="./img/concorde_seuil.png.webp"
+              alt=""
+              loading="lazy"
+              class="w-full block dark:hidden"
+            />
+            <img
+              src="./img/concorde_seuil_invert.png"
+              alt=""
+              loading="lazy"
+              class="w-full hidden dark:block dark:opacity-60"
+            />
+          </div>
+        </template>
+      </sonic-router>
+
+      <div
+        class="[[data-home]_&]:hidden 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">
+          <docs-page
+            noShadowDom
+            class="prose lg:prose-lg max-w-prose block py-8 prose-li:my-[.2em] leading-[1.5] lg:leading-[1.5] prose-h1:font-normal prose-h1:text-[4.2em]"
+          ></docs-page>
+        </div>
+      </div>
+    </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
+
+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>
+
+