@supersoniks/concorde 1.1.2 → 1.1.5

package/cli.js

@@ -57,13 +57,54 @@ function enableShortPaths() {
     console.log("✔️ Go and look to tsconfig.json to see generated paths");
   }
 }
+
+function createConcordeTsApp() {
+  const { execSync } = require('child_process');
+  const runCommand = command => {
+    try {
+      execSync(command, { stdio: "inherit" });
+    } catch (e) {
+      console.error(`Failed to execute ${command}`, e);
+      return false;
+    }
+    return true;
+  }
+  const repoName = process.argv[2];
+  const gitCheckoutCommand = `git clone --depth 1 https://github.com/ladigitale/concorde-ts-starter ${repoName}`;
+  const removeDotGitCommand = `rm -rf ${repoName}/.git`;
+  const installDepsCommand = `cd ${repoName} && yarn install`
+  const enableShortPathCmd = `cd ${repoName} && npx concorde enable-short-paths`;
+  console.log(`Cloning repository with name ${repoName}`);
+  const checkout = runCommand(gitCheckoutCommand)
+  if (!checkout) process.exit(-1);
+  
+  const removeDotGit = runCommand(removeDotGitCommand);
+  if (!removeDotGit) process.exit(-1);
+  
+  console.log(`installing dependencies for ${repoName}`);
+  const installDeps = runCommand(installDepsCommand);
+  if (!installDeps) process.exit(-1);
+  
+  const enableShortPath = runCommand(enableShortPathCmd);
+  if (!enableShortPath) process.exit(-1);
+  
+  
+  console.log("Congratulations! You are ready. Follow the following commands to start");
+  console.log(`cd ${repoName} && yarn dev`);
+
+}
 switch (process.argv[2]) {
   case "enable-short-paths":
     enableShortPaths();
-    break;
+  break;
+  case "create-concorde-ts-app":
+    createConcordeTsApp();
+  break;
+
   default:
     console.log("Usage: npx concorde <command>");
     console.log("Commands:");
     console.log("  enable-short-paths");
+    console.log("  create-concorde-ts-app projectName");
     break;
 }

package/core/components/functional/fetch/fetch.d.ts

@@ -8,7 +8,7 @@ declare const Fetch_base: {
         iObserver: IntersectionObserver | null;
         isDefaultLoaderEnabled: boolean;
         isFetchEnabled: boolean;
-        _fetchEventData(): Promise<void>;
+        _fetchData(): Promise<void>;
         disconnectedCallback(): void;
         connectedCallback(): void;
         firstUpdated(): void;
@@ -37,10 +37,14 @@ declare const Fetch_base: {
 } & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
 /**
  * ###Fetch charge un contenu via un appel d'api web.
- * * On indique notamment la route de l'api avec l'attribut endpoint dans la balise du composant.
- * * Si l'attribut endpoint n'est pas disponible le composant utilise la valeur de dataProvider "ancêtre" le plus proche.
+ * * Fetch etendsles mixins Fetcher et Subscriber
+ * * On indique notamment la route de l'api avec l'attribut `endpoint` dans la balise du composant.
+ * * Si l'attribut `endpoint` n'est pas disponible le composant utilise la valeur de `dataProvider` "ancêtre" le plus proche.
+ * * L'attribut `key` peut être renseigné pour cibler une sous partie de la donnée chargée.
+ * Par exemple si la données est `{ma:{data:{a:1,b:2}}}` on peut ecrire `key="ma.data"`. Dans ce cas la données disponible dans le composant sera `{a:1, b:2}`
  * * Les propriétés réactives de tout composants étendant [subscriber](./?path=/docs/miscallenous-🔔-subscriber--page) avec le même dataProvider seront renseignées avec les propriétés de l'objet chargé via l'api.
  * * L'affichage du loader peut être désactivé en ajoutant l'attribut *noLoader* à la balise du composant.
+ * * On peut appler la methode invalidate() sur son publishe pour declencher le rechargement des données
  */
 export declare class Fetch extends Fetch_base {
     static styles: import("lit").CSSResult[];

package/core/components/functional/fetch/fetch.js

@@ -10,10 +10,14 @@ import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import Fetcher from "@supersoniks/concorde/core/mixins/Fetcher";
 /**
  * ###Fetch charge un contenu via un appel d'api web.
- * * On indique notamment la route de l'api avec l'attribut endpoint dans la balise du composant.
- * * Si l'attribut endpoint n'est pas disponible le composant utilise la valeur de dataProvider "ancêtre" le plus proche.
+ * * Fetch etendsles mixins Fetcher et Subscriber
+ * * On indique notamment la route de l'api avec l'attribut `endpoint` dans la balise du composant.
+ * * Si l'attribut `endpoint` n'est pas disponible le composant utilise la valeur de `dataProvider` "ancêtre" le plus proche.
+ * * L'attribut `key` peut être renseigné pour cibler une sous partie de la donnée chargée.
+ * Par exemple si la données est `{ma:{data:{a:1,b:2}}}` on peut ecrire `key="ma.data"`. Dans ce cas la données disponible dans le composant sera `{a:1, b:2}`
  * * Les propriétés réactives de tout composants étendant [subscriber](./?path=/docs/miscallenous-🔔-subscriber--page) avec le même dataProvider seront renseignées avec les propriétés de l'objet chargé via l'api.
  * * L'affichage du loader peut être désactivé en ajoutant l'attribut *noLoader* à la balise du composant.
+ * * On peut appler la methode invalidate() sur son publishe pour declencher le rechargement des données
  */
 let Fetch = class Fetch extends Fetcher(Subscriber(LitElement)) {
     render() {

package/core/components/functional/list/list.d.ts

@@ -10,7 +10,7 @@ declare const List_base: {
         iObserver: IntersectionObserver | null;
         isDefaultLoaderEnabled: boolean;
         isFetchEnabled: boolean;
-        _fetchEventData(): Promise<void>;
+        _fetchData(): Promise<void>;
         disconnectedCallback(): void;
         connectedCallback(): void;
         firstUpdated(): void;
@@ -40,18 +40,20 @@ declare const List_base: {
 /**
  *  ### List boucle sur sa propriété "props" et crée des éléments a partir des données en bouclant également sur ses templates.
  *
- * * Si le composant possède un attribut *fetch* (quelque soit sa valeur), il charge un contenu via un appel d'api web comme le fait [fetch](./?path=/docs/core-components-functional-fetch--basic)
- * Dans ce cas la proriété *key* (qui est issue du fetcher) peut être utilisé pour cibler une propriété particulière du retour de l'api.
- *
+ * * Si le composant possède un attribut *fetch*, il charge un contenu via un appel d'api web comme le fait [fetch](./?path=/docs/core-components-functional-fetch--basic)
+ *  * La proriété *key* (issue du fetcher) permet de cibler une propriété particulière du retour de l'api.
  *  * Chaque élément créé est englobé dans un objet [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page)
- *  un dataProvider y est associé a l'adresse suivante *dataProvider-de-la-liste$/*index-e-la-ligne-courante*
- *  Les éléments contenus dans le template seront donc remplis par les données si ils sont eux même des subscriber et qu'il possèdent des propriétés réactives correspondantes
+ *  un dataProvider y est associé a l'adresse suivante *dataProvider-de-la-liste$/*index-de-la-ligne-courante*
+ *  Les données de la ligne sont donc disponible pour les élements internes (subscribers, data-binding)
  *  * Lors du chargement un objet loader inline est affiché.
- *  * Si le résultat de la requête n'est pas une liste, mais est un objet, alors il est imbriqué dans un tableau pour garantir le fonctionnement.
- * On paut aussi extraire directement toutes les valeurs dans un tableau pour le rendu en ajoutant l'attribut **extractValues**
+ *  * Si le résultat de la requête est un objet, il est imbriqué dans un tableau pour garantir le fonctionnement.
+ * Cependant, si l'attribut `extractValues` est présent, les valeurs des propriétés de l'objet sont mises dans  dans un tableau pour le rendu.
+ * * La propriété _key_ est ajoutés à la donnée de chaque item. Elle contient l'index dans le cas d'un liste simple ou la clés associée à la valeur si `extractValues` est définit.
+ * * On peut appler la methode invalidate() sur son publishe pour declencher le rechargement des données
  */
 export declare class List extends List_base {
     static styles: import("lit").CSSResult[];
+    itemPropertyMap: Object | null;
     /**
      * La propriété templateKey contient le nom de la propriété qui sera utilisé pour identifier le template à utiliser dans la donnée de la ligne.
      * Par exemple si templateIdentifier = "name" et que la donnée de la ligne est {name: "myTemplate" ... }, alors le template possédant l'attribut data-value="myTemplate" sera utilisé.

package/core/components/functional/list/list.js

@@ -18,19 +18,21 @@ import TemplatesContainer from "@supersoniks/concorde/core/mixins/TemplatesConta
 /**
  *  ### List boucle sur sa propriété "props" et crée des éléments a partir des données en bouclant également sur ses templates.
  *
- * * Si le composant possède un attribut *fetch* (quelque soit sa valeur), il charge un contenu via un appel d'api web comme le fait [fetch](./?path=/docs/core-components-functional-fetch--basic)
- * Dans ce cas la proriété *key* (qui est issue du fetcher) peut être utilisé pour cibler une propriété particulière du retour de l'api.
- *
+ * * Si le composant possède un attribut *fetch*, il charge un contenu via un appel d'api web comme le fait [fetch](./?path=/docs/core-components-functional-fetch--basic)
+ *  * La proriété *key* (issue du fetcher) permet de cibler une propriété particulière du retour de l'api.
  *  * Chaque élément créé est englobé dans un objet [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page)
- *  un dataProvider y est associé a l'adresse suivante *dataProvider-de-la-liste$/*index-e-la-ligne-courante*
- *  Les éléments contenus dans le template seront donc remplis par les données si ils sont eux même des subscriber et qu'il possèdent des propriétés réactives correspondantes
+ *  un dataProvider y est associé a l'adresse suivante *dataProvider-de-la-liste$/*index-de-la-ligne-courante*
+ *  Les données de la ligne sont donc disponible pour les élements internes (subscribers, data-binding)
  *  * Lors du chargement un objet loader inline est affiché.
- *  * Si le résultat de la requête n'est pas une liste, mais est un objet, alors il est imbriqué dans un tableau pour garantir le fonctionnement.
- * On paut aussi extraire directement toutes les valeurs dans un tableau pour le rendu en ajoutant l'attribut **extractValues**
+ *  * Si le résultat de la requête est un objet, il est imbriqué dans un tableau pour garantir le fonctionnement.
+ * Cependant, si l'attribut `extractValues` est présent, les valeurs des propriétés de l'objet sont mises dans  dans un tableau pour le rendu.
+ * * La propriété _key_ est ajoutés à la donnée de chaque item. Elle contient l'index dans le cas d'un liste simple ou la clés associée à la valeur si `extractValues` est définit.
+ * * On peut appler la methode invalidate() sur son publishe pour declencher le rechargement des données
  */
 let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
     constructor() {
         super(...arguments);
+        this.itemPropertyMap = null;
         /**
          * La propriété templateKey contient le nom de la propriété qui sera utilisé pour identifier le template à utiliser dans la donnée de la ligne.
          * Par exemple si templateIdentifier = "name" et que la donnée de la ligne est {name: "myTemplate" ... }, alors le template possédant l'attribut data-value="myTemplate" sera utilisé.
@@ -54,7 +56,8 @@ let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))
         // si props est une string on considère qu'il n'y a pas de résultats
         if (typeof this.props == "string") {
             return html `<div class="sonic-no-result-container">
-        <sonic-icon prefix="iconoir" name="emoji-think-left" size="lg"></sonic-icon><span class="sonic-no-result-text">${this.props}</span>
+        <sonic-icon prefix="iconoir" name="emoji-think-left" size="lg"></sonic-icon
+        ><span class="sonic-no-result-text">${this.props}</span>
       </div>`;
         }
         // si props est un objet mais qu'il n'y a pas de contenu on retourn une div vide (nécessaire pour le lazyload)
@@ -82,7 +85,9 @@ let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))
             counter++;
             if (hasCustomTemplate)
                 counter = -1;
-            let pub = this.publisher[extractValues ? item.key : index];
+            let key = extractValues ? item.key : index;
+            let pub = this.publisher[key];
+            pub._key_ = key + "";
             return (item &&
                 html `
               <sonic-subscriber
@@ -90,6 +95,7 @@ let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))
                 .bindPublisher=${function () {
                     return pub;
                 }}
+                .propertyMap=${ifDefined(this.itemPropertyMap)}
                 dataProvider="${this.dataProvider}/list-item/${index}"
               >
                 ${hasCustomTemplate
@@ -115,6 +121,9 @@ List.styles = [
       }
     `,
 ];
+__decorate([
+    property({ type: Object })
+], List.prototype, "itemPropertyMap", void 0);
 __decorate([
     property({ type: String })
 ], List.prototype, "templateKey", void 0);

package/core/components/functional/queue/queue.d.ts

@@ -10,15 +10,17 @@ declare const Queue_base: (new (...args: any[]) => import("@supersoniks/concorde
  * Les valeurs renseignées dans ce publisher sont ajoutées en get à chaque requête
  * * la proriété *key* peut être utilisé pour cibler une propriété particulière du retour de l'api.
  */
-export declare class Queue extends Queue_base {
+export default class Queue extends Queue_base {
     templates: Array<HTMLTemplateElement> | null;
     lastRequestTime: number;
     key: String;
+    itemPropertyMap: Object | null;
     /**
      * Durée cible en ms d'une requête pour afficher 1 lot.
      */
     targetRequestDuration: number;
     limit: number;
+    offset: number;
     static instanceCounter: number;
     connectedCallback(): void;
     filterPublisher: PublisherProxy | null;

package/core/components/functional/queue/queue.js

@@ -26,6 +26,7 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
         this.templates = null;
         this.lastRequestTime = 0;
         this.key = "";
+        this.itemPropertyMap = null;
         /**
          * Durée cible en ms d'une requête pour afficher 1 lot.
          */
@@ -35,6 +36,7 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
          * Cette valeur est mise à jour ensuite par Queue pour chauq lot pour se rapprocher tanque possible de *targetRequestDuration*
          */
         this.limit = 5;
+        this.offset = 0;
         this.filterPublisher = null;
         this.filterTimeoutId = undefined;
         /**
@@ -89,7 +91,7 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
     }
     next(e) {
         var _a, _b;
-        let offset = 0;
+        let offset = this.offset;
         const newTime = new Date().getTime();
         const requestDuration = newTime - this.lastRequestTime;
         if (e) {
@@ -101,7 +103,7 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
             this.props = [];
         }
         else {
-            const props = Object.values(this.props);
+            const props = this.props;
             const item = props[props.length - 1];
             offset = parseInt(item.offset.toString()) + parseInt(item.limit.toString());
         }
@@ -123,7 +125,7 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
         this.listDataProviders.push(dataProvider);
         this.currentScrollPosition = (_b = document.scrollingElement) === null || _b === void 0 ? void 0 : _b.scrollTop;
         this.props = [
-            ...Object.values(this.props),
+            ...this.props,
             {
                 id: searchParams.toString() + "/" + this.props.length,
                 dataProvider: dataProvider,
@@ -147,6 +149,7 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
       ${repeat(this.props, (item) => item.id, (item) => html `
             <sonic-list
               fetch
+              .itemPropertyMap=${this.itemPropertyMap}
               debug=${ifDefined(this.defferedDebug)}
               @load=${this.next}
               key=${this.key}
@@ -161,12 +164,18 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
     }
 };
 Queue.instanceCounter = 0;
+__decorate([
+    property({ type: Object })
+], Queue.prototype, "itemPropertyMap", void 0);
 __decorate([
     property()
 ], Queue.prototype, "targetRequestDuration", void 0);
 __decorate([
     property()
 ], Queue.prototype, "limit", void 0);
+__decorate([
+    property()
+], Queue.prototype, "offset", void 0);
 __decorate([
     property({ type: String })
 ], Queue.prototype, "dataProviderExpression", void 0);
@@ -176,7 +185,7 @@ __decorate([
 Queue = Queue_1 = __decorate([
     customElement("sonic-queue")
 ], Queue);
-export { Queue };
+export default Queue;
 //Ajout pour custom-elements-manifesy pour storybook notamment
 try {
     customElements.define("sonic-queue", Queue);

package/core/components/functional/router/redirect.js

@@ -41,7 +41,7 @@ let SonicRedirect = class SonicRedirect extends Subscriber(LitElement) {
             return;
         let onDataPath = this.getAttribute("onData").split(".");
         let searchedData = Objects.traverse(this.props, onDataPath);
-        if (searchedData) {
+        if (searchedData && !(Objects.isObject(searchedData) && searchedData)) {
             LocationHandler.changeFromComponent(this);
         }
     }

package/core/components/functional/states/states.js

@@ -37,6 +37,7 @@ let SonicStates = class SonicStates extends Subscriber(TemplatesContainer(LitEle
     }
     connectedCallback() {
         super.connectedCallback();
+        console.log("BB");
         if (this.hasAttribute("data-path")) {
             this.statePath = this.getAttribute("data-path");
         }
@@ -64,6 +65,7 @@ let SonicStates = class SonicStates extends Subscriber(TemplatesContainer(LitEle
         if ((!Array.isArray(state) && Objects.isObject(state)) || state === undefined) {
             state = "";
         }
+        console.log(state);
         for (let t of this.templatePartsList) {
             let path = t.getAttribute(this.templateValueAttribute);
             let stateToMatch = state;

package/core/components/functional/submit/submit.d.ts

@@ -15,7 +15,7 @@ declare const Submit_base: (new (...args: any[]) => import("@supersoniks/concord
  */
 export declare class Submit extends Submit_base {
     static styles: import("lit").CSSResult;
-    disabled: "disabled" | "" | null;
+    disabled: boolean;
     api: API | null;
     connectedCallback(): void;
     submit(): Promise<void>;

package/core/components/functional/submit/submit.js

@@ -34,7 +34,7 @@ import { css, html, LitElement } from "lit";
 let Submit = class Submit extends Subscriber(LitElement) {
     constructor() {
         super(...arguments);
-        this.disabled = null;
+        this.disabled = false;
         this.api = null;
     }
     connectedCallback() {
@@ -51,7 +51,7 @@ let Submit = class Submit extends Subscriber(LitElement) {
     submit() {
         var _a, _b, _c, _d, _e;
         return __awaiter(this, void 0, void 0, function* () {
-            this.publisher.disabled = '';
+            this.publisher.disabled = true;
             let method = ((_a = this.getAttribute("method")) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) || "post";
             let postData = PublisherManager.getInstance().get(this.getAncestorAttributeValue("formDataProvider")).get();
             let result = null;
@@ -79,23 +79,22 @@ let Submit = class Submit extends Subscriber(LitElement) {
                 clearedDataProvider.split(" ").forEach(dataProvider => PublisherManager.getInstance().get(dataProvider).set({}));
             }
             PublisherManager.getInstance().get(this.getAncestorAttributeValue("submitResultDataProvider")).set(result);
-            this.publisher.disabled = null;
+            this.publisher.disabled = false;
         });
     }
     render() {
-        let disabled = this.disabled === "" || this.disabled === "disabled" ? "disabled" : "";
-        return html `<div class="${disabled}"><slot></slot></div>`;
+        return html `<div ?data-disabled=${this.disabled}><slot></slot></div>`;
     }
 };
 Submit.styles = css `
-    .disabled {
+    [data-disabled]{
       opacity: 0.3;
       pointer-events: none;
       user-select: none;
     }
   `;
 __decorate([
-    property({ type: String })
+    property({ type: Boolean })
 ], Submit.prototype, "disabled", void 0);
 Submit = __decorate([
     customElement("sonic-submit")

package/core/components/ui/alert/alert.js

@@ -103,7 +103,13 @@ Alert.styles = [
         bottom: 0;
         opacity: 0.08;
         border-radius: var(--sc-alert-rounded);
+        pointer-events:none;
       }
+      :host([background]) > div {
+        z-index:2;
+        position:relative;
+      }
+
 
       /*SIZE*/
       :host([size="xs"]) {

package/core/components/ui/button/button.js

@@ -151,7 +151,7 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
         <slot @slotchange=${this.onSlotChange} part="prefix" name="prefix"></slot>
         <slot part="main" class="main-slot"></slot>
         <slot @slotchange=${this.onSlotChange} part="suffix" name="suffix"></slot>
-        ${this.loading == true ? html `<sonic-icon prefix="iconoir" name="notch" class="loader"></sonic-icon>` : ""}
+        ${this.loading == true ? html `<sonic-icon prefix="feather" name="loader" class="loader"></sonic-icon>` : ""}
       </button>
     `;
         return this.href
@@ -282,6 +282,9 @@ Button.styles = [
       }
 
       /*SIZE*/
+      :host([size="2xs"]) {
+        --sc-btn-fs: 0.6rem;
+      }
       :host([size="xs"]) {
         --sc-btn-fs: 0.75rem;
       }

package/core/components/ui/icon/icons.json

@@ -1 +1 @@
-{"iconoir":{"cancel":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","check-circled-outline":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7 12.5L10 15.5L17 8.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","check":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M5 13L9 17L19 7\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","emoji-think-left":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 15H7M2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M8.5 9C8.22386 9 8 8.77614 8 8.5C8 8.22386 8.22386 8 8.5 8C8.77614 8 9 8.22386 9 8.5C9 8.77614 8.77614 9 8.5 9Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M15.5 9C15.2239 9 15 8.77614 15 8.5C15 8.22386 15.2239 8 15.5 8C15.7761 8 16 8.22386 16 8.5C16 8.77614 15.7761 9 15.5 9Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","info-empty":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 11.5V16.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 7.51L12.01 7.49889\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","more-vert":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 18.5C12.2761 18.5 12.5 18.2761 12.5 18C12.5 17.7239 12.2761 17.5 12 17.5C11.7239 17.5 11.5 17.7239 11.5 18C11.5 18.2761 11.7239 18.5 12 18.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 6.5C12.2761 6.5 12.5 6.27614 12.5 6C12.5 5.72386 12.2761 5.5 12 5.5C11.7239 5.5 11.5 5.72386 11.5 6C11.5 6.27614 11.7239 6.5 12 6.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","nav-arrow-down":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","warning-circled-outline":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 7L12 13\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 17.01L12.01 16.9989\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"}}
+{"iconoir":{"cancel":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","check-circled-outline":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7 12.5L10 15.5L17 8.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","check":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M5 13L9 17L19 7\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","emoji-think-left":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 15H7M2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M8.5 9C8.22386 9 8 8.77614 8 8.5C8 8.22386 8.22386 8 8.5 8C8.77614 8 9 8.22386 9 8.5C9 8.77614 8.77614 9 8.5 9Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M15.5 9C15.2239 9 15 8.77614 15 8.5C15 8.22386 15.2239 8 15.5 8C15.7761 8 16 8.22386 16 8.5C16 8.77614 15.7761 9 15.5 9Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","info-empty":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 11.5V16.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 7.51L12.01 7.49889\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","loader":"","more-vert":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 18.5C12.2761 18.5 12.5 18.2761 12.5 18C12.5 17.7239 12.2761 17.5 12 17.5C11.7239 17.5 11.5 17.7239 11.5 18C11.5 18.2761 11.7239 18.5 12 18.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 6.5C12.2761 6.5 12.5 6.27614 12.5 6C12.5 5.72386 12.2761 5.5 12 5.5C11.7239 5.5 11.5 5.72386 11.5 6C11.5 6.27614 11.7239 6.5 12 6.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","nav-arrow-down":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","warning-circled-outline":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 7L12 13\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 17.01L12.01 16.9989\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"}}

package/core/components/ui/theme/theme-collection/core-variables.js

@@ -4,7 +4,7 @@ export const coreVariables = css `
     /* --sc-rfs: 16px; */
 
     /* polices*/
-    --sc-font-family-base: aileron, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
+    --sc-font-family-base: "neue-haas-unica", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
       "Helvetica Neue", Arial, sans-serif;
     --sc-font-weight-base: 400;
     --sc-font-style-base: inherit;

package/core/components/ui/toast/toast-item.d.ts

@@ -0,0 +1,16 @@
+import { LitElement, nothing } from "lit";
+import "./types";
+import { ToastStatus } from "./types";
+export declare class SonicToastItem extends LitElement {
+    static styles: import("lit").CSSResult[];
+    title: string;
+    text: string;
+    status: ToastStatus;
+    ghost: boolean;
+    preserve: boolean;
+    visible: boolean;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    hide(): void;
+    show(): void;
+    autoHide(): void;
+}