@supersoniks/concorde 1.1.45 → 1.1.46

package/core/components/ui/form/input-autocomplete/input-autocomplete.js

@@ -4,87 +4,222 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, LitElement, css } from "lit";
+import { html, LitElement, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { Subscriber, TemplatesContainer } from "@supersoniks/concorde/mixins";
+import { FormInput, FormElement, Subscriber, TemplatesContainer, } from "@supersoniks/concorde/mixins";
 import "@supersoniks/concorde/core/components/ui/form/input/input";
 import "@supersoniks/concorde/core/components/ui/pop/pop";
 import "@supersoniks/concorde/core/components/functional/queue/queue";
 import "@supersoniks/concorde/core/components/ui/menu/menu-item";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { PublisherManager } from "@supersoniks/concorde/utils";
 /**
  * Input avec autocomplete. Propose des valeurs à partir d'un sonic-queue.
  * L'input permet de filtrer les choix de valeurs dans le sonic-pop.
  * La valeur de cet input est ensuite retransmit au premier via un dataProvider.
  */
-let InputAutocomplete = class InputAutocomplete extends TemplatesContainer(Subscriber(LitElement)) {
+let InputAutocomplete = class InputAutocomplete extends TemplatesContainer(FormInput(FormElement(Subscriber(LitElement)))) {
     constructor() {
         super(...arguments);
-        // Filtering input
-        this._name = "";
-        this.forceAutoFill = false;
+        /**
+         * Possibles mutualisation avec text
+         */
+        this.size = "md";
         this.placeholder = "";
         this.filteredFields = "";
         this.readonly = null;
         this.dataProviderExpression = "";
         this.key = "";
-        this.value = "";
-        this.formDataProvider = "";
+        this.searchParameter = "";
+        /**
+         * Les dataProviders
+         */
+        this.searchDataProvider = "";
+        this.initSearchDataProvider = "";
+        this.queueDataProvider = "";
+        this.initQueueDataProvider = "";
+        this.lastValidSearch = "";
+        /**
+         * Les fonctions de gestion
+         */
+        this.updateSearchParameter = (value) => {
+            if (value == "") {
+                this.lastValidSearch = "";
+                return;
+            }
+            this.queryQueueListItem(this.queueDataProvider, this.findSelection, this.setSearchFromSelection);
+        };
+        this.initSearchParameter = () => {
+            this.queryQueueListItem(this.initQueueDataProvider, this.findSelection, this.setSearchFromSelection);
+        };
+        this.selectListItem = (listItem) => {
+            var _a;
+            (_a = this.formValuePublisher) === null || _a === void 0 ? void 0 : _a.set(listItem[this.name]);
+        };
+        this.findSearchedItem = (listItem) => {
+            var _a;
+            return (listItem[this.searchParameter || this.name] == ((_a = this.searchPublisher) === null || _a === void 0 ? void 0 : _a.get()));
+        };
+        this.findSelection = (listItem) => {
+            return listItem[this.name] == this.value;
+        };
+        this.setSearchFromSelection = (listItem) => {
+            var _a;
+            this.lastValidSearch = listItem[this.searchParameter || this.name];
+            (_a = this.searchPublisher) === null || _a === void 0 ? void 0 : _a.set(this.lastValidSearch);
+        };
+        this.updateActiveSelection = () => {
+            var _a, _b, _c;
+            this.queryQueueListItem(this.queueDataProvider, this.findSearchedItem, this.selectListItem);
+            if (!this.select &&
+                this.lastValidSearch &&
+                this.lastValidSearch != ((_a = this.searchPublisher) === null || _a === void 0 ? void 0 : _a.get()) &&
+                ((_b = this.formValuePublisher) === null || _b === void 0 ? void 0 : _b.get())) {
+                (_c = this.formValuePublisher) === null || _c === void 0 ? void 0 : _c.set("");
+            }
+        };
     }
-    get name() {
-        return this._name;
-    }
-    set name(value) {
-        if (this.hasAttribute("name") && !this.forceAutoFill)
-            value = this.getAttribute("name");
-        this._name = value;
-        this.requestUpdate();
-    }
-    get description() {
-        return this._description;
+    connectedCallback() {
+        var _a, _b, _c;
+        super.connectedCallback();
+        /**
+         * Nom de la valeur de recherche
+         * Si non défini, on utilise name
+         **/
+        const searchParameter = this.searchParameter || this.name;
+        /**
+         * Nommage des différents dataProviders utilisés
+         */
+        const formDataProvider = this.getAncestorAttributeValue("formDataProvider");
+        const dpPrefix = formDataProvider + "__autocomplete";
+        this.initSearchDataProvider = `${dpPrefix}_init_search__`;
+        this.initQueueDataProvider = `${dpPrefix}_init_queue__`;
+        this.searchDataProvider = `${dpPrefix}_search__`;
+        this.queueDataProvider = `${dpPrefix}_queue__`;
+        /**
+         * Les publishers utilisés plusieurs fois dans la classe son miss en propriétés privées de la classe
+         */
+        const getPublisher = PublisherManager.get;
+        this.searchPublisher = getPublisher(this.searchDataProvider)[searchParameter];
+        this.formValuePublisher = getPublisher(formDataProvider)[this.name];
+        this.countPublisher = getPublisher(this.queueDataProvider).resultCount;
+        this.initCountPublisher = getPublisher(this.initQueueDataProvider).resultCount;
+        /**
+         * Si une valeur est fourrnie a l'initialisation, un queue spécifique appelle le service avec le name founi en paramètre
+         * Pour récupérer la valeur de searchParameter correspondante et renseigner l'input
+         **/
+        if (this.value) {
+            PublisherManager.get(this.initSearchDataProvider)[this.name] = this.value;
+        }
+        (_a = this.initCountPublisher) === null || _a === void 0 ? void 0 : _a.onAssign(this.initSearchParameter);
+        /**
+         * Lorsque la sélection change, on met à jour la valeur de recherche
+         */
+        (_b = this.formValuePublisher) === null || _b === void 0 ? void 0 : _b.onAssign(this.updateSearchParameter);
+        /**
+         * Lorsque La valeur de recherche change, que le composant n'est pas en mode select
+         * et qu'elle est différente de la derniere recherche valide on désactive la selection
+         */
+        (_c = this.countPublisher) === null || _c === void 0 ? void 0 : _c.onAssign(this.updateActiveSelection);
     }
-    set description(value) {
-        if (this.hasAttribute("description") && !this.forceAutoFill)
-            value = this.getAttribute("description");
-        this._description = value;
-        this.requestUpdate();
+    disconnectedCallback() {
+        var _a, _b, _c;
+        super.disconnectedCallback();
+        (_a = this.initCountPublisher) === null || _a === void 0 ? void 0 : _a.offAssign(this.initSearchParameter);
+        (_b = this.formValuePublisher) === null || _b === void 0 ? void 0 : _b.offAssign(this.updateSearchParameter);
+        (_c = this.countPublisher) === null || _c === void 0 ? void 0 : _c.offAssign(this.updateActiveSelection);
+        const getPublisher = PublisherManager.get;
+        getPublisher(this.initSearchDataProvider).delete();
+        getPublisher(this.initQueueDataProvider).delete();
+        getPublisher(this.searchDataProvider).delete();
+        getPublisher(this.queueDataProvider).delete();
     }
-    get label() {
-        return this._label;
+    queryQueueListItem(queueDataProvider, itemFinder, itemMutator) {
+        const queuePublisher = PublisherManager.get(queueDataProvider);
+        let listItem;
+        const listsDescriptors = queuePublisher.get();
+        if (!Array.isArray(listsDescriptors))
+            return;
+        for (const listDescriptor of listsDescriptors) {
+            const list = PublisherManager.get(listDescriptor.dataProvider).get();
+            if (!Array.isArray(list))
+                continue;
+            listItem = list.find(itemFinder);
+            console.log(listItem);
+            if (listItem) {
+                break;
+            }
+        }
+        if (listItem) {
+            itemMutator(listItem);
+        }
     }
-    set label(value) {
-        if (this.hasAttribute("label") && !this.forceAutoFill)
-            value = this.getAttribute("label");
-        this._label = value;
-        this.requestUpdate();
+    setSelectionRange(start, end) {
+        var _a;
+        (_a = this.querySelector("sonic-input")) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
     }
-    connectedCallback() {
-        this.formDataProvider = this.getAncestorAttributeValue("formDataProvider");
-        super.connectedCallback();
+    handleHide() {
+        var _a, _b, _c;
+        if (!this.select)
+            return;
+        if (((_a = this.searchPublisher) === null || _a === void 0 ? void 0 : _a.get()) == "") {
+            this.lastValidSearch = "";
+            (_b = this.formValuePublisher) === null || _b === void 0 ? void 0 : _b.set("");
+            return;
+        }
+        (_c = this.searchPublisher) === null || _c === void 0 ? void 0 : _c.set(this.lastValidSearch);
     }
     render() {
         return html `
-      <sonic-pop noToggle style="display:block;">
+      <sonic-pop noToggle style="display:block;" @hide=${this.handleHide}>
         <sonic-input
+          debug
+          dataProvider="${this.initSearchDataProvider + Math.random()}"
+          formDataProvider="${this.searchDataProvider}"
           type="search"
-          data-keyboard-nav="nav-autocomplete"
+          data-keyboard-nav="${this.getAttribute("data-keyboard-nav") || ""}"
           label="${ifDefined(this.label)}"
           description="${ifDefined(this.description)}"
-          name="${ifDefined(this.name)}"
-          value="${ifDefined(this.value)}"
+          name="${ifDefined(this.searchParameter || this.name)}"
+          placeholder="${ifDefined(this.placeholder)}"
+          ?readonly="${this.readonly}"
           autocomplete="off"
           clearable
-        ></sonic-input>
+          inlineContent
+          size=${this.size}
+        >
+          ${this.select
+            ? html `
+                <sonic-icon
+                  slot="suffix"
+                  class="select-chevron"
+                  name="nav-arrow-down"
+                  .size=${this.size}
+                ></sonic-icon>
+              `
+            : nothing}
+        </sonic-input>
         <sonic-menu slot="content">
           <sonic-queue
+            dataProvider="${this.queueDataProvider}"
             filteredFields=${this.filteredFields}
             dataProviderExpression="${this.dataProviderExpression}"
-            dataFilterProvider="${this.formDataProvider}"
+            dataFilterProvider="${this.searchDataProvider}"
             key="${this.key}"
             .templates=${this.templateList}
             displayContents
           >
           </sonic-queue>
+          <sonic-queue
+            noLazyload
+            dataProvider="${this.initQueueDataProvider}"
+            filteredFields=${this.filteredFields}
+            dataProviderExpression="${this.dataProviderExpression}"
+            dataFilterProvider="${this.initSearchDataProvider}"
+            key="${this.key}"
+            displayContents
+          >
+          </sonic-queue>
         </sonic-menu>
       </sonic-pop>
     `;
@@ -98,17 +233,8 @@ InputAutocomplete.styles = [
     `,
 ];
 __decorate([
-    property()
-], InputAutocomplete.prototype, "name", null);
-__decorate([
-    property()
-], InputAutocomplete.prototype, "forceAutoFill", void 0);
-__decorate([
-    property()
-], InputAutocomplete.prototype, "description", null);
-__decorate([
-    property()
-], InputAutocomplete.prototype, "label", null);
+    property({ type: String })
+], InputAutocomplete.prototype, "size", void 0);
 __decorate([
     property({ type: String })
 ], InputAutocomplete.prototype, "placeholder", void 0);
@@ -121,12 +247,15 @@ __decorate([
 __decorate([
     property({ type: String })
 ], InputAutocomplete.prototype, "dataProviderExpression", void 0);
+__decorate([
+    property({ type: Boolean })
+], InputAutocomplete.prototype, "select", void 0);
 __decorate([
     property({ type: String })
 ], InputAutocomplete.prototype, "key", void 0);
 __decorate([
     property({ type: String })
-], InputAutocomplete.prototype, "value", void 0);
+], InputAutocomplete.prototype, "searchParameter", void 0);
 InputAutocomplete = __decorate([
     customElement("sonic-input-autocomplete")
 ], InputAutocomplete);

package/core/components/ui/form/textarea/textarea.d.ts

@@ -55,6 +55,7 @@ declare const Textarea_base: {
         getAttribute(name: string): string;
         hasAttribute(attributeName: string): boolean;
         disconnectedCallback(): void;
+        getBoundingClientRect(): DOMRect;
     };
 } & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<import("../../../../_types/types").CoreJSType>) & typeof LitElement;
 export declare class Textarea extends Textarea_base {

package/core/components/ui/icon/icon.js

@@ -44,7 +44,7 @@ let Icon = class Icon extends LitElement {
             return;
         this.renderId++;
         const frameRenderId = this.renderId;
-        window.requestAnimationFrame(() => __awaiter(this, void 0, void 0, function* () {
+        (window.queueMicrotask || window.requestAnimationFrame)(() => __awaiter(this, void 0, void 0, function* () {
             if (frameRenderId != this.renderId) {
                 return;
             }

package/core/components/ui/modal/modal-close.js

@@ -26,9 +26,8 @@ ModalClose.styles = [
         display: block;
         align-self: flex-end;
         height: 0;
-        top: 0;
-        padding-top: 0.5rem;
-        padding-right: 0.5rem;
+        top: 0.5rem;
+        right: 0.5rem;
         transform: translate3d(calc(var(--sc-modal-px)), calc(-1 * var(--sc-modal-py)), 0);
         z-index: 20;
       }

package/core/components/ui/modal/modal-content.js

@@ -16,6 +16,7 @@ ModalContent.styles = [
     css `
       :host {
         display: block;
+        width: 100%;
       }
     `,
 ];

package/core/components/ui/modal/modal.d.ts

@@ -6,17 +6,25 @@ import "@supersoniks/concorde/core/components/ui/modal/modal-subtitle";
 import "@supersoniks/concorde/core/components/ui/modal/modal-title";
 declare type ModalCreateOptions = {
     content?: string;
+    zIndex?: string;
+    paddingX?: string;
+    paddingY?: string;
+    width?: string;
+    maxWidth?: string;
+    removeOnHide?: boolean;
 };
 declare const Modal_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<import("@supersoniks/concorde/core/_types/types").CoreJSType>) & typeof LitElement;
 export declare class Modal extends Modal_base {
     static styles: import("lit").CSSResult[];
     forceAction: boolean;
+    removeOnHide: boolean;
     align: "center" | "right" | "left";
     padding: string;
     maxWidth: string;
     maxHeight: string;
     width: string;
     height: string;
+    zIndex: string;
     fullScreen: boolean;
     visible: boolean;
     modalWrapper: HTMLDivElement;

package/core/components/ui/modal/modal.js

@@ -21,17 +21,33 @@ let Modal = class Modal extends Subscriber(LitElement) {
     constructor() {
         super(...arguments);
         this.forceAction = false;
+        this.removeOnHide = false;
         this.align = "left";
         this.padding = "var(--sc-modal-py) var(--sc-modal-px)";
         this.maxWidth = "var(--sc-modal-max-w) ";
         this.maxHeight = "var(--sc-modal-max-h) ";
         this.width = "100%";
         this.height = "auto";
+        this.zIndex = "var(--sc-modal-z-index)";
         this.fullScreen = false;
         this.visible = false;
     }
     static create(options) {
         const modal = document.createElement(tagName);
+        // modal styles
+        if (options.removeOnHide === true)
+            modal.setAttribute("removeOnHide", "true");
+        if (options.maxWidth)
+            modal.maxWidth = options === null || options === void 0 ? void 0 : options.maxWidth;
+        if (options.width)
+            modal.width = options === null || options === void 0 ? void 0 : options.width;
+        if (options.paddingX)
+            modal.style.setProperty("--sc-modal-px", options === null || options === void 0 ? void 0 : options.paddingX);
+        if (options.paddingY)
+            modal.style.setProperty("--sc-modal-py", options === null || options === void 0 ? void 0 : options.paddingY);
+        if (options.zIndex)
+            modal.style.setProperty("--sc-modal-z-index", options === null || options === void 0 ? void 0 : options.zIndex);
+        // inner content
         modal.innerHTML =
             `<sonic-modal-close></sonic-modal-close><sonic-modal-content>${options.content}</sonic-modal-content>` || "";
         const container = document.querySelector("sonic-theme") || document.body;
@@ -67,6 +83,7 @@ let Modal = class Modal extends Subscriber(LitElement) {
             maxHeight: this.maxHeight,
             width: this.width,
             height: this.height,
+            zIndex: this.zIndex,
             borderRadius: this.fullScreen ? "0" : "var(--sc-modal-rounded)",
         };
         const modalWrapperStyles = {
@@ -105,7 +122,7 @@ let Modal = class Modal extends Subscriber(LitElement) {
 
       <div
         class="overlay"
-        @click="${!this.forceAction ? this.hide : ""}"
+        @click="${!this.forceAction ? this.hide : null}"
         ${animate({
             keyframeOptions: {
                 duration: 500,
@@ -130,6 +147,9 @@ let Modal = class Modal extends Subscriber(LitElement) {
         if (this.hasAttribute("resetDataProviderOnHide")) {
             PublisherManager.get(this.getAttribute("resetDataProviderOnHide")).set({});
         }
+        if (this.removeOnHide) {
+            this.remove();
+        }
     }
     dispose() {
         this.hide();
@@ -138,9 +158,9 @@ let Modal = class Modal extends Subscriber(LitElement) {
     handleEscape(e) {
         if (e.key === "Escape") {
             const modals = [...document.querySelectorAll(tagName)];
-            modals.forEach((item) => {
-                if (!this.forceAction) {
-                    item.hide();
+            modals.forEach((modal) => {
+                if (!modal.forceAction) {
+                    modal.hide();
                 }
             });
         }
@@ -164,6 +184,7 @@ Modal.styles = [
         --sc-modal-max-w: min(100vw, 64ch);
         --sc-modal-max-h: 80vh;
         --sc-modal-rounded: var(--sc-rounded-lg);
+        --sc-modal-z-index: 990;
       }
 
       * {
@@ -175,7 +196,7 @@ Modal.styles = [
         bottom: 0;
         left: 0;
         width: 100%;
-        z-index: 990;
+        z-index: calc(var(--sc-modal-z-index) + 1);
         align-items: center;
         justify-content: center;
         flex-direction: column;
@@ -207,7 +228,7 @@ Modal.styles = [
         top: 0;
         right: 0;
         bottom: 0;
-        z-index: 900;
+        z-index: var(--sc-modal-z-index);
         opacity: 0.8;
         position: fixed;
       }
@@ -226,6 +247,7 @@ Modal.styles = [
         .modal {
           max-width: none !important;
           width: 100% !important;
+          border-radius: var(--sc-modal-rounded) var(--sc-modal-rounded) 0 0 !important;
         }
       }
 
@@ -270,6 +292,9 @@ Modal.styles = [
 __decorate([
     property({ type: Boolean })
 ], Modal.prototype, "forceAction", void 0);
+__decorate([
+    property({ type: Boolean })
+], Modal.prototype, "removeOnHide", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], Modal.prototype, "align", void 0);
@@ -288,6 +313,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Modal.prototype, "height", void 0);
+__decorate([
+    property({ type: String })
+], Modal.prototype, "zIndex", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Modal.prototype, "fullScreen", void 0);

package/core/components/ui/pop/pop.js

@@ -51,11 +51,13 @@ let Pop = Pop_1 = class Pop extends LitElement {
             this.lastContentY = 0;
             this.runPositioningLoop();
         }
+        this.dispatchEvent(new CustomEvent("show"));
     }
     _hide() {
         this.open = false;
         this.popContent.setAttribute("tabindex", "-1");
         this.positioningRuns = false;
+        this.dispatchEvent(new CustomEvent("hide"));
     }
     _handleClosePop(e) {
         const path = e.composedPath();
@@ -66,7 +68,8 @@ let Pop = Pop_1 = class Pop extends LitElement {
             const isCloseManual = HTML.getAncestorAttributeValue(target, "data-on-select") === "keep";
             if (e.type == "pointerdown" && popContainsTarget)
                 return;
-            if (e.type == "click" && ((popContainsTarget && isCloseManual) || !popContentContainsTarget))
+            if (e.type == "click" &&
+                ((popContainsTarget && isCloseManual) || !popContentContainsTarget))
                 return;
             pop._hide();
         });
@@ -85,7 +88,6 @@ let Pop = Pop_1 = class Pop extends LitElement {
     firstUpdated(_changedProperties) {
         super.firstUpdated(_changedProperties);
         this.resizeObserver.observe(this.popContent);
-        this.computePosition(this.placement);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -144,9 +146,11 @@ let Pop = Pop_1 = class Pop extends LitElement {
             x = xRight;
         if (contentRect.y < shiftPadding && placement == "top")
             y = yBottom;
-        if (contentRect.x + contentRect.width > window.innerWidth - shiftPadding && placement == "right")
+        if (contentRect.x + contentRect.width > window.innerWidth - shiftPadding &&
+            placement == "right")
             x = xLeft;
-        if (contentRect.y + contentRect.height > window.innerHeight - shiftPadding && placement == "bottom")
+        if (contentRect.y + contentRect.height > window.innerHeight - shiftPadding &&
+            placement == "bottom")
             y = yTop;
         this.lastContentX += x - contentRect.x;
         this.lastContentY += y - contentRect.y;
@@ -162,10 +166,12 @@ let Pop = Pop_1 = class Pop extends LitElement {
             this.lastContentY += -contentRect.y;
         }
         if (contentRect.x + contentRect.width > window.innerWidth) {
-            this.lastContentX += window.innerWidth - (contentRect.x + contentRect.width);
+            this.lastContentX +=
+                window.innerWidth - (contentRect.x + contentRect.width);
         }
         if (contentRect.y + contentRect.height > window.innerHeight) {
-            this.lastContentY += window.innerHeight - (contentRect.y + contentRect.height);
+            this.lastContentY +=
+                window.innerHeight - (contentRect.y + contentRect.height);
         }
         Object.assign(this.popContent.style, {
             left: `${this.lastContentX}px`,
@@ -174,11 +180,16 @@ let Pop = Pop_1 = class Pop extends LitElement {
     }
     render() {
         return html `
-      <slot @click=${this._toggle} @keydown=${this._toggle} class="contents"></slot>
+      <slot
+        @click=${this._toggle}
+        @keydown=${this._toggle}
+        class="contents"
+      ></slot>
       <slot
         name="content"
         tabindex="-1"
         part="content"
+        style="display: none;"
         class="  
           ${this.open ? "is-open" : ""}"
       ></slot>

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

@@ -2,12 +2,13 @@ import { css } from "lit";
 export const coreVariables = css `
   :host {
     /* polices*/
-    --sc-font-family-base: "Inter var", "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
-      "Helvetica Neue", Arial, sans-serif;
+    --sc-font-family-base: "Inter var", "Inter", -apple-system, system-ui,
+      BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+      sans-serif;
     --sc-font-weight-base: 400;
     --sc-font-style-base: normal;
 
-    --sc-headings-font-family: var(--sc-font-family-base);
+    --sc-headings-font-family: var(--sc-font-family-base), sans-serif;
     --sc-headings-font-style: var(--sc-font-style-base);
     --sc-headings-line-height: 1.1;
     --sc-headings-font-weight: 700;
@@ -29,16 +30,23 @@ export const coreVariables = css `
     /* 4 for rounded full*/
     --sc-btn-rounded-intensity: 1.4;
     --sc-btn-font-weight: 500;
-    --sc-btn-rounded: calc((var(--sc-rounded) + var(--sc-rounded-size-intensity)) * var(--sc-btn-rounded-intensity));
+    --sc-btn-rounded: calc(
+      (var(--sc-rounded) + var(--sc-rounded-size-intensity)) *
+        var(--sc-btn-rounded-intensity)
+    );
 
     /* Placeholder */
     --sc-placeholder-bg: rgba(17, 24, 39, 0.05);
 
     /* OMBRES */
-    --sc-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-    --sc-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-    --sc-shadow-lg: 0 10px 15px 0px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-    --sc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --sc-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1),
+      0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --sc-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
+      0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --sc-shadow-lg: 0 10px 15px 0px rgb(0 0 0 / 0.1),
+      0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --sc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
+      0 8px 10px -6px rgb(0 0 0 / 0.1);
     --sc-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
 
     /* Forms */
@@ -50,7 +58,8 @@ export const coreVariables = css `
     --sc-input-border-color: var(--sc-input-bg);
     --sc-input-rounded-intensity: 1.4;
     --sc-input-rounded: calc(
-      (var(--sc-rounded) + var(--sc-rounded-size-intensity)) * var(--sc-input-rounded-intensity)
+      (var(--sc-rounded) + var(--sc-rounded-size-intensity)) *
+        var(--sc-input-rounded-intensity)
     );
     --sc-label-font-weight: 500;
 

package/core/components/ui/theme/theme.js

@@ -30,7 +30,8 @@ let Theme = Theme_1 = class Theme extends LitElement {
         const fontUrls = [];
         for (let i = 0; i < ssLength; i++) {
             const ss = stylesheets[i];
-            if (ss.href && (ss.href.includes("googleapis") || ss.href.includes("typekit.net")))
+            if (ss.href &&
+                (ss.href.includes("googleapis") || ss.href.includes("typekit.net")))
                 fontUrls.push(ss.href);
         }
         document.querySelectorAll("iframe").forEach((elt) => {
@@ -50,7 +51,11 @@ let Theme = Theme_1 = class Theme extends LitElement {
     }
     getCssVariables() {
         const names = [];
-        const stylesheets = [...Theme_1.styles.map((s) => s.styleSheet), ...Array.from(document.styleSheets)];
+        const stylesheets = [
+            ...Theme_1.styles.map((s) => s.styleSheet),
+            ...Array.from(document.styleSheets),
+        ];
+        console.log(stylesheets);
         for (const stylesheet of stylesheets) {
             try {
                 if (!stylesheet)
@@ -96,7 +101,7 @@ Theme.styles = [
       }
 
       :host([font]) {
-        font-family: var(--sc-font-family-base);
+        font-family: var(--sc-font-family-base), sans-serif;
         font-weight: var(--sc-font-weight-base);
         font-style: var(--sc-font-style-base);
       }