@supersoniks/concorde 1.1.43 → 1.1.45

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

@@ -3,8 +3,8 @@ declare const Input_base: {
     new (...args: any[]): {
         validateFormElement(): void;
         forceAutoFill: boolean;
-        _type: "number" | "search" | "file" | "button" | "password" | "url" | "color" | "hidden" | "time" | "image" | "text" | "reset" | "submit" | "month" | "week" | "checkbox" | "radio" | "range" | "tel" | "email" | "date" | "datetime-local";
-        type: "number" | "search" | "file" | "button" | "password" | "url" | "color" | "hidden" | "time" | "image" | "text" | "reset" | "submit" | "month" | "week" | "checkbox" | "radio" | "range" | "tel" | "email" | "date" | "datetime-local";
+        _type: "number" | "search" | "file" | "button" | "url" | "color" | "hidden" | "time" | "image" | "text" | "reset" | "submit" | "month" | "week" | "checkbox" | "radio" | "range" | "tel" | "email" | "date" | "datetime-local" | "password";
+        type: "number" | "search" | "file" | "button" | "url" | "color" | "hidden" | "time" | "image" | "text" | "reset" | "submit" | "month" | "week" | "checkbox" | "radio" | "range" | "tel" | "email" | "date" | "datetime-local" | "password";
         _description?: string | undefined;
         description: string | undefined;
         _label?: string | undefined;
@@ -15,7 +15,7 @@ declare const Input_base: {
         updateDataValue(): void;
         handleChange(e?: Event | undefined): void;
         handleBlur(e?: Event | undefined): void;
-        getValueForFormPublisher(): any;
+        getValueForFormPublisher(): string | object | string[] | null | undefined;
         focus?: (() => void) | undefined;
         shadowRoot?: ShadowRoot | undefined;
         error: boolean;
@@ -25,13 +25,15 @@ declare const Input_base: {
         formDataProvider: string;
         ariaLabelledby?: string | undefined;
         ariaLabel?: string | undefined;
-        _value: string | null;
-        value: string | null;
+        _value: string | object | string[] | null | undefined;
+        value: string | object | string[] | null | undefined;
         _name: string;
         name: string;
-        props: any;
-        propertyMap: Object;
+        props: import("../../../../_types/types").CoreJSType;
+        propertyMap: object;
         isConnected: boolean;
+        children: HTMLCollection;
+        appendChild(node: Node): Node;
         getAncestorAttributeValue(attributeName: string): string;
         hasAncestorAttribute(attributeName: string): boolean;
         querySelectorAll(selector: string): NodeListOf<Element>;
@@ -48,13 +50,16 @@ declare const Input_base: {
         removeAttribute(name: string): void;
         initPublisher(): void;
         getApiConfiguration(): import("../../../../utils/api").APIConfiguration;
+        /**
+         * Taille du composant, implique notamment des modifications de typo et de marge interne
+         */
         connectedCallback(): void;
         requestUpdate(): void;
         getAttribute(name: string): string;
-        hasAttribute(attributeName: String): boolean;
+        hasAttribute(attributeName: string): boolean;
         disconnectedCallback(): void;
     };
-} & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<any>) & typeof LitElement;
+} & (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 Input extends Input_base {
     static styles: import("lit").CSSResult[];
     /**

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

@@ -43,7 +43,7 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
         if (this.hasAttribute("sameValueAs")) {
             this.sameValueAsName = this.getAttribute("sameValueAs");
             this.sameValueAsHandle = (v) => (this.pattern = v);
-            let formPublisher = this.getFormPublisher();
+            const formPublisher = this.getFormPublisher();
             if (!formPublisher)
                 return;
             formPublisher[this.sameValueAsName].onAssign(this.sameValueAsHandle);
@@ -52,7 +52,7 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
     disconnectedCallback() {
         super.disconnectedCallback();
         if (this.hasAttribute("sameValueAs") && this.sameValueAsName) {
-            let formPublisher = this.getFormPublisher();
+            const formPublisher = this.getFormPublisher();
             if (!formPublisher)
                 return;
             formPublisher[this.sameValueAsName].offAssign(this.sameValueAsHandle);

package/core/components/ui/form/input/password-helper.d.ts

@@ -1,6 +1,6 @@
 import { LitElement, nothing } from "lit";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
-declare const SonicComponent_base: (new (...args: any[]) => import("../../../../mixins/Subscriber").SubscriberInterface<any>) & typeof LitElement;
+declare const SonicComponent_base: (new (...args: any[]) => import("../../../../mixins/Subscriber").SubscriberInterface<import("../../../../_types/types").CoreJSType>) & typeof LitElement;
 export declare class SonicComponent extends SonicComponent_base {
     name?: string;
     minChars: number;

package/core/components/ui/form/input/password-helper.js

@@ -42,7 +42,7 @@ let SonicComponent = class SonicComponent extends Subscriber(LitElement) {
                 this.hasMinuscule = /[a-z]/.test(v);
                 this.hasMajuscule = /[A-Z]/.test(v);
                 this.hasNumber = /[0-9]/.test(v);
-                this.hasSpecialChar = /[!"#$%&'()*+,\-\.\/:;<=>?@[\]^_`{|}~]/.test(v);
+                this.hasSpecialChar = /[!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~]/.test(v);
             };
             PublisherManager.get(this.getAncestorAttributeValue("formDataProvider"))[this.name].onAssign(this.checkValue);
         }

package/core/components/ui/form/input/same-value-helper.d.ts

@@ -1,6 +1,6 @@
 import { LitElement, nothing } from "lit";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
-declare const SonicComponent_base: (new (...args: any[]) => import("../../../../mixins/Subscriber").SubscriberInterface<any>) & typeof LitElement;
+declare const SonicComponent_base: (new (...args: any[]) => import("../../../../mixins/Subscriber").SubscriberInterface<import("../../../../_types/types").CoreJSType>) & typeof LitElement;
 export declare class SonicComponent extends SonicComponent_base {
     name?: string;
     sameValueAs?: string;

package/core/components/ui/form/input/same-value-helper.js

@@ -21,7 +21,7 @@ let SonicComponent = class SonicComponent extends Subscriber(LitElement) {
     }
     connectedCallback() {
         super.connectedCallback();
-        let formDataProvider = PublisherManager.get(this.getAncestorAttributeValue("formDataProvider"));
+        const formDataProvider = PublisherManager.get(this.getAncestorAttributeValue("formDataProvider"));
         if (this.name && this.sameValueAs) {
             this.checkValue = (v) => {
                 if (v)
@@ -38,7 +38,7 @@ let SonicComponent = class SonicComponent extends Subscriber(LitElement) {
     }
     disconnectedCallback() {
         if (this.checkValue && this.name && this.sameValueAs) {
-            let formDataProvider = PublisherManager.get(this.getAncestorAttributeValue("formDataProvider"));
+            const formDataProvider = PublisherManager.get(this.getAncestorAttributeValue("formDataProvider"));
             formDataProvider[this.name].offAssign(this.checkValue);
             formDataProvider[this.sameValueAs].offAssign(this.checkValue);
         }

package/core/components/ui/form/input-autocomplete/input-autocomplete.d.ts

@@ -3,7 +3,7 @@ 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";
-declare const InputAutocomplete_base: (new (...args: any[]) => import("../../../../mixins/TemplatesContainer").TemplatesContainerInterface) & (new (...args: any[]) => import("../../../../mixins/Subscriber").SubscriberInterface<any>) & typeof LitElement;
+declare const InputAutocomplete_base: (new (...args: any[]) => import("../../../../mixins/TemplatesContainer").TemplatesContainerInterface) & (new (...args: any[]) => import("../../../../mixins/Subscriber").SubscriberInterface<import("../../../../_types/types").CoreJSType>) & typeof LitElement;
 /**
  * Input avec autocomplete. Propose des valeurs à partir d'un sonic-queue.
  * L'input permet de filtrer les choix de valeurs dans le sonic-pop.

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

@@ -64,7 +64,7 @@ let InputAutocomplete = class InputAutocomplete extends TemplatesContainer(Subsc
     }
     render() {
         return html `
-      <sonic-pop toggle="false" style="display:block;">
+      <sonic-pop noToggle style="display:block;">
         <sonic-input
           type="search"
           data-keyboard-nav="nav-autocomplete"

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

@@ -1,12 +1,13 @@
 import { LitElement, PropertyValues } from "lit";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
-export declare type SelectOption = {
+import { Size } from "@supersoniks/concorde/core/components/ui/_css/size";
+export type SelectOption = {
     value?: string;
     wording?: string;
     selected?: boolean;
     hasAttribute?: (value: string) => boolean;
 } & Record<string, string>;
-declare const Select_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<any>) & typeof LitElement;
+declare const Select_base: (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;
 /**
  * #### FormElement :
  * * La propriété value est remplie automatiquement a l'aide de l'attribut name renseigné, ceci en prenant la valeur de la propriété du même nom dans les données du dataprovider associé.
@@ -19,13 +20,13 @@ export declare class Select extends Select_base {
     valueKey: string;
     wordingKey: string;
     multiple: boolean;
-    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    size?: Size;
     selectSize?: number;
     private _options;
     set options(options: Array<SelectOption>);
     get options(): Array<SelectOption>;
     hasDoneFirstUpdate: boolean;
-    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected firstUpdated(): void;
     _value: string;
     set value(value: string);
     get value(): string;

package/core/components/ui/form/select/select.js

@@ -49,7 +49,7 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
                 this.value = option.value || "";
             }
         }
-        let value = this.value || this.getAttribute("value");
+        const value = this.value || this.getAttribute("value");
         if (!value && this._options.length > 0) {
             this.value = this._options[0][this.valueKey];
         }
@@ -58,7 +58,7 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
     get options() {
         return this._options;
     }
-    firstUpdated(_changedProperties) {
+    firstUpdated() {
         this.hasDoneFirstUpdate = true;
     }
     set value(value) {
@@ -76,7 +76,7 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
         return this._value;
     }
     updateFormPublisherValue() {
-        let formPublisher = this.getFormPublisher();
+        const formPublisher = this.getFormPublisher();
         if (formPublisher) {
             formPublisher[this.name] = this.value;
         }
@@ -84,7 +84,7 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
     connectedCallback() {
         super.connectedCallback();
         this.hasSlotOrProps();
-        let options = this.querySelectorAll("option");
+        const options = this.querySelectorAll("option");
         if (options.length > 0) {
             this.options = Array.from(options).map((option) => {
                 return {
@@ -129,7 +129,7 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
         const select = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("select");
         if (!select || select.checkValidity())
             return;
-        let formPublisher = this.getFormPublisher();
+        const formPublisher = this.getFormPublisher();
         if (formPublisher) {
             formPublisher.isFormValid = false;
         }
@@ -156,7 +156,7 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
             id="form-element"
             @change=${this.handleChange}
             @blur=${this.handleBlur}
-            ?disabled=${ifDefined(this.disabled)}
+            ?disabled=${this.disabled}
             ?required=${this.required}
             ?multiple=${this.multiple}
             size=${ifDefined(this.selectSize)}
@@ -167,8 +167,8 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
             aria-labelledby=${ifDefined(this.ariaLabelledby)}
           >
             ${repeat(this.options, (option) => option[this.valueKey], (option) => {
-            const isSelected = this.value == option[this.valueKey] ? "selected" : null;
-            return html `<option selected=${ifDefined(isSelected)} value="${option[this.valueKey]}">
+            const isSelected = this.value == option[this.valueKey] ? true : false;
+            return html `<option ?selected=${isSelected} value="${option[this.valueKey]}">
                   ${option[this.wordingKey]}
                 </option>`;
         })}
@@ -203,9 +203,16 @@ Select.styles = [
         opacity: 0;
       }
 
-      /* Désactive padding right pour les sélecteur désactivé avec une option*/
-      :host(:not([disabled])) .form-element:not(:has(option:only-child)) {
-        padding-right: max(1em, calc(0.8 * var(--sc-input-px)));
+      @supports selector(:has(*)) {
+        :host(:not([disabled])) .form-element:not(:has(option:only-child)) {
+          padding-right: max(1.275em, calc(1.5 * var(--sc-input-px)));
+        }
+      }
+      /*Firefox etc.*/
+      @supports not selector(:has(*)) {
+        :host(:not([disabled])) .form-element {
+          padding-right: max(1.275em, calc(1.5 * var(--sc-input-px)));
+        }
       }
 
       .form-select-wrapper {
@@ -223,10 +230,15 @@ Select.styles = [
       }
 
       option {
-        padding: 0.1rem 5rem;
+        padding: 0.1rem var(--sc-input-px);
         color: var(--sc-base-content);
         background: var(--sc-base);
       }
+
+      select[multiple] option {
+        background: transparent;
+        padding: 0;
+      }
     `,
 ];
 __decorate([

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

@@ -3,8 +3,8 @@ declare const Textarea_base: {
     new (...args: any[]): {
         validateFormElement(): void;
         forceAutoFill: boolean;
-        _type: "number" | "search" | "file" | "button" | "password" | "url" | "color" | "hidden" | "time" | "image" | "text" | "reset" | "submit" | "month" | "week" | "checkbox" | "radio" | "range" | "tel" | "email" | "date" | "datetime-local";
-        type: "number" | "search" | "file" | "button" | "password" | "url" | "color" | "hidden" | "time" | "image" | "text" | "reset" | "submit" | "month" | "week" | "checkbox" | "radio" | "range" | "tel" | "email" | "date" | "datetime-local";
+        _type: "number" | "search" | "file" | "button" | "url" | "color" | "hidden" | "time" | "image" | "text" | "reset" | "submit" | "month" | "week" | "checkbox" | "radio" | "range" | "tel" | "email" | "date" | "datetime-local" | "password";
+        type: "number" | "search" | "file" | "button" | "url" | "color" | "hidden" | "time" | "image" | "text" | "reset" | "submit" | "month" | "week" | "checkbox" | "radio" | "range" | "tel" | "email" | "date" | "datetime-local" | "password";
         _description?: string | undefined;
         description: string | undefined;
         _label?: string | undefined;
@@ -15,7 +15,7 @@ declare const Textarea_base: {
         updateDataValue(): void;
         handleChange(e?: Event | undefined): void;
         handleBlur(e?: Event | undefined): void;
-        getValueForFormPublisher(): any;
+        getValueForFormPublisher(): string | object | string[] | null | undefined;
         focus?: (() => void) | undefined;
         shadowRoot?: ShadowRoot | undefined;
         error: boolean;
@@ -25,13 +25,15 @@ declare const Textarea_base: {
         formDataProvider: string;
         ariaLabelledby?: string | undefined;
         ariaLabel?: string | undefined;
-        _value: string | null;
-        value: string | null;
+        _value: string | object | string[] | null | undefined;
+        value: string | object | string[] | null | undefined;
         _name: string;
         name: string;
-        props: any;
-        propertyMap: Object;
+        props: import("../../../../_types/types").CoreJSType;
+        propertyMap: object;
         isConnected: boolean;
+        children: HTMLCollection;
+        appendChild(node: Node): Node;
         getAncestorAttributeValue(attributeName: string): string;
         hasAncestorAttribute(attributeName: string): boolean;
         querySelectorAll(selector: string): NodeListOf<Element>;
@@ -51,10 +53,10 @@ declare const Textarea_base: {
         connectedCallback(): void;
         requestUpdate(): void;
         getAttribute(name: string): string;
-        hasAttribute(attributeName: String): boolean;
+        hasAttribute(attributeName: string): boolean;
         disconnectedCallback(): void;
     };
-} & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<any>) & typeof LitElement;
+} & (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 {
     static styles: import("lit").CSSResult[];
     size: "" | "xs" | "sm" | "lg";

package/core/components/ui/form/textarea/textarea.js

@@ -44,7 +44,7 @@ let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElemen
         const textarea = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("textarea");
         if (!textarea || textarea.checkValidity())
             return;
-        let formPublisher = this.getFormPublisher();
+        const formPublisher = this.getFormPublisher();
         if (formPublisher) {
             formPublisher.isFormValid = false;
         }

package/core/components/ui/group/group.js

@@ -19,7 +19,7 @@ let Group = class Group extends LitElement {
         this.hasLabel = false;
     }
     updated() {
-        const children = this.querySelectorAll("sonic-input, sonic-button");
+        const children = this.querySelectorAll("sonic-input, sonic-button, sonic-select");
         const nbChildren = children.length;
         if (nbChildren > 1) {
             children.forEach((item, index) => {
@@ -55,7 +55,7 @@ let Group = class Group extends LitElement {
         this.hasDescription = this.description || ((_b = this.slotDescriptionNodes) === null || _b === void 0 ? void 0 : _b.length) ? true : false;
     }
     render() {
-        var slotStyle = {
+        const slotStyle = {
             alignItems: this.alignItems,
         };
         return html `<span class="${this.hasLabel ? "form-label" : "hidden"}"
@@ -91,6 +91,12 @@ Group.styles = [
       .hidden {
         display: none;
       }
+
+      ::slotted(sonic-button),
+      ::slotted(sonic-input),
+      ::slotted(sonic-select) {
+        flex-grow: 1;
+      }
     `,
 ];
 __decorate([

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

@@ -8,6 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var _a;
+// ici on désactive un regle de eslint exceptionnelement pour ce fichier
+/* eslint no-async-promise-executor: 0 */ // --> OFF
 import icons from "@supersoniks/concorde/core/components/ui/icon/icons.json";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 /**
@@ -57,10 +59,10 @@ function enableCustomLibrary() {
 export default class Icons {
     static registerIcons(newIcons) {
         const record = icons;
-        for (let prefix in newIcons) {
+        for (const prefix in newIcons) {
             const newObj = newIcons[prefix];
             const currentRecord = record[prefix] || {};
-            for (let name in newObj) {
+            for (const name in newObj) {
                 currentRecord[name] = newObj[name];
             }
             record[prefix] = currentRecord;
@@ -70,8 +72,8 @@ export default class Icons {
 _a = Icons;
 Icons.fontAwesomeNext = {
     get: (params) => __awaiter(void 0, void 0, void 0, function* () {
-        let library = params.library;
-        let name = params.name || "";
+        const library = params.library;
+        const name = params.name || "";
         const iconsAsRecord = icons;
         /**
          * SVGS en ligne
@@ -80,30 +82,30 @@ Icons.fontAwesomeNext = {
             enableCustomLibrary();
         }
         if (library && libraries[library]) {
-            let libraryItem = libraries[library];
-            let prefix = params.prefix || libraryItem.defaultPrefix || "";
-            let libIcons = iconsAsRecord[library] || {};
+            const libraryItem = libraries[library];
+            const prefix = params.prefix || libraryItem.defaultPrefix || "";
+            const libIcons = iconsAsRecord[library] || {};
             iconsAsRecord[library] = libIcons;
-            let libIconsKey = prefix + "-" + name;
+            const libIconsKey = prefix + "-" + name;
             // if(!libIcons )libIcons = iconsAsRecord[library] = {};
             /**
              * Si l'icone a déjà été chargée on ne la recharge pas
              */
             if (libIcons[libIconsKey])
                 return unsafeHTML(libIcons[libIconsKey]);
-            let url = libraryItem.url.replace("$prefix", prefix).replace("$name", name);
+            const url = libraryItem.url.replace("$prefix", prefix).replace("$name", name);
             /**
              * on utilise une promise mutualisée pour ne pas faire plusieurs appels concurents d'une même icone
              */
             if (!loadingGetPromises.has(url)) {
-                let promise = new Promise((resolve) => __awaiter(void 0, void 0, void 0, function* () {
-                    let result = yield fetch(url);
+                const promise = new Promise((resolve) => __awaiter(void 0, void 0, void 0, function* () {
+                    const result = yield fetch(url);
                     if (!result.ok) {
                         resolve(`<b title="Erreur ${result.status}">😶</b>`);
                         return;
                     }
                     try {
-                        let text = yield result.text();
+                        const text = yield result.text();
                         resolve(text);
                     }
                     catch (e) {
@@ -115,7 +117,7 @@ Icons.fontAwesomeNext = {
             /**
              * Chargement de l'icone.
              */
-            let result = yield loadingGetPromises.get(url);
+            const result = yield loadingGetPromises.get(url);
             loadingGetPromises.delete(url);
             libIcons[libIconsKey] = result || "";
             return unsafeHTML(result);

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

@@ -1,5 +1,5 @@
 import { LitElement } from "lit";
-declare type LoaderConf = {
+type LoaderConf = {
     mode?: string;
     container?: HTMLElement;
 };

package/core/components/ui/loader/loader.js

@@ -23,7 +23,7 @@ let Loader = Loader_1 = class Loader extends LitElement {
     static show(conf) {
         if (!Loader_1.loader)
             Loader_1.loader = document.createElement("sonic-loader");
-        let loader = Loader_1.loader;
+        const loader = Loader_1.loader;
         if (!conf)
             conf = {};
         if (conf.mode)

package/core/components/ui/menu/menu.js

@@ -75,39 +75,38 @@ let MenuItems = class MenuItems extends LitElement {
         super.disconnectedCallback();
     }
     initScrollable() {
-        const tabsMenu = this;
         let isDown = false;
         let startX;
         let scrollLeft;
         if (this.scrollable) {
-            tabsMenu.addEventListener("mousedown", (e) => {
+            this.addEventListener("mousedown", (e) => {
                 isDown = true;
-                tabsMenu.classList.add("active");
-                startX = e.pageX - tabsMenu.offsetLeft;
-                scrollLeft = tabsMenu.scrollLeft;
+                this.classList.add("active");
+                startX = e.pageX - this.offsetLeft;
+                scrollLeft = this.scrollLeft;
             });
-            tabsMenu.addEventListener("mouseleave", () => {
+            this.addEventListener("mouseleave", () => {
                 isDown = false;
-                tabsMenu.classList.remove("active");
+                this.classList.remove("active");
             });
-            tabsMenu.addEventListener("mouseup", () => {
+            this.addEventListener("mouseup", () => {
                 isDown = false;
-                tabsMenu.classList.remove("active");
+                this.classList.remove("active");
             });
-            tabsMenu.addEventListener("mousemove", (e) => {
+            this.addEventListener("mousemove", (e) => {
                 if (!isDown)
                     return;
                 e.preventDefault();
-                const x = e.pageX - tabsMenu.offsetLeft;
+                const x = e.pageX - this.offsetLeft;
                 const walk = (x - startX) * 1.5; //scroll-fast
-                tabsMenu.scrollLeft = scrollLeft - walk;
-                this.setScrollShadow(tabsMenu, this.direction);
+                this.scrollLeft = scrollLeft - walk;
+                this.setScrollShadow(this, this.direction);
             });
-            tabsMenu.addEventListener("scroll", (e) => {
+            this.addEventListener("scroll", (e) => {
                 e.preventDefault();
                 // const delta = Math.sign(e.deltaY);
-                // tabsMenu.scrollLeft += delta * 50;
-                this.setScrollShadow(tabsMenu, this.direction);
+                // this.scrollLeft += delta * 50;
+                this.setScrollShadow(this, this.direction);
             });
         }
     }

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

@@ -7,7 +7,7 @@ import "@supersoniks/concorde/core/components/ui/modal/modal-title";
 declare type ModalCreateOptions = {
     content?: string;
 };
-declare const Modal_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<any>) & typeof LitElement;
+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;

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

@@ -34,7 +34,7 @@ let Modal = class Modal extends Subscriber(LitElement) {
         const modal = document.createElement(tagName);
         modal.innerHTML =
             `<sonic-modal-close></sonic-modal-close><sonic-modal-content>${options.content}</sonic-modal-content>` || "";
-        let container = document.querySelector("sonic-theme") || document.body;
+        const container = document.querySelector("sonic-theme") || document.body;
         container.appendChild(modal);
         modal.show();
         return modal;

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

@@ -1,12 +1,11 @@
-import { LitElement } from "lit";
-declare type PopPlacement = "bottom" | "top" | "right" | "left";
+import { LitElement, PropertyValues } from "lit";
+type PopPlacement = "bottom" | "top" | "right" | "left";
 export declare class Pop extends LitElement {
     static pops: Set<Pop>;
     static styles: import("lit").CSSResult[];
     open: boolean;
     popBtn: HTMLElement;
     popContent: HTMLElement;
-    toggle: "true" | "false";
     noToggle: boolean;
     inline: boolean;
     /**
@@ -17,14 +16,16 @@ export declare class Pop extends LitElement {
     positioningRuns: boolean;
     lastContentX: number;
     lastContentY: number;
-    runPositioning(): void;
+    resizeObserver: ResizeObserver;
+    runPositioningLoop(): void;
     _toggle(e: Event): void;
     _show(): void;
     _hide(): void;
     _handleClosePop(e: Event): void;
     connectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
     disconnectedCallback(): void;
-    _setUpMenu(placement: PopPlacement): void;
+    computePosition(placement: PopPlacement): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};