@salla.sa/twilight-components 2.14.467 → 2.14.468

package/dist/collection/components/salla-social-share/salla-social-share.css

@@ -0,0 +1,161 @@
+:global(body.s-social-share-modal-is-open) {
+  overflow: hidden;
+}
+
+.s-social-share-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background-color: rgba(17, 24, 39, 0.5);
+}
+
+.s-social-share-modal-dialog {
+  position: relative;
+  width: 100%;
+  max-width: 32rem;
+  padding: 1.5rem;
+  background-color: #fff;
+  border-radius: 1rem;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+}
+
+.s-social-share-modal-handle {
+  display: none;
+}
+
+.s-social-share-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1.25rem;
+}
+
+.s-social-share-modal-title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+.s-social-share-modal-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  line-height: 0;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+}
+
+.s-social-share-modal-close-icon svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  fill: #ef4444;
+}
+
+.s-social-share-modal-platforms {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.s-social-share-modal-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.75rem;
+  text-decoration: none;
+  cursor: pointer;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.s-social-share-modal-card:hover {
+  border-color: #d1d5db;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.s-social-share-modal-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 9999px;
+}
+
+.s-social-share-modal-icon svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  fill: #fff;
+}
+
+.s-social-share-modal-card-label {
+  font-size: 0.875rem;
+  color: #4b5563;
+}
+
+.s-social-share-modal-copy-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-top: 1rem;
+  padding: 0.5rem;
+  background-color: #f3f4f6;
+  border-radius: 0.75rem;
+}
+
+.s-social-share-modal-url {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0 0.5rem;
+  font-size: 0.875rem;
+  color: #6b7280;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@keyframes s-social-share-sheet-in {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@media (max-width: 640px) {
+  .s-social-share-modal {
+    align-items: flex-end;
+    justify-content: center;
+    padding: 0;
+  }
+  .s-social-share-modal-dialog {
+    max-width: none;
+    padding: 0.75rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
+    border-radius: 1rem 1rem 0 0;
+    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
+    animation: s-social-share-sheet-in 0.28s ease-out;
+  }
+  .s-social-share-modal-handle {
+    display: block;
+    width: 2.5rem;
+    height: 0.25rem;
+    margin: 0 auto 0.75rem;
+    background-color: #d1d5db;
+    border-radius: 9999px;
+  }
+  .s-social-share-modal-header {
+    margin-bottom: 1rem;
+  }
+  .s-social-share-modal-platforms {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}

package/dist/collection/components/salla-social-share/salla-social-share.js

@@ -16,30 +16,69 @@ import ShareAlt from "../../assets/svg/share-alt.svg";
  */
 export class SallaSocialShare {
     constructor() {
+        this.ignoreOutsideClick = false;
+        /** Bilingual defaults for the modal variant; store translations always win. */
+        this.translationDefaults = {
+            'common.social.share': { ar: 'مشاركة', en: 'Share' },
+            'common.social.email': { ar: 'إيميل', en: 'Email' },
+            'common.social.whatsapp': { ar: 'واتساب', en: 'WhatsApp' },
+            'common.social.twitter': { ar: 'أكس', en: 'X' },
+            'common.social.facebook': { ar: 'فيسبوك', en: 'Facebook' },
+            'common.social.copy': { ar: 'نسخ', en: 'Copy' },
+            'common.social.copied': { ar: 'تم النسخ', en: 'Copied' },
+        };
+        this.onDocumentClick = (event) => {
+            if (this.ignoreOutsideClick || !this.opened || this.host.contains(event.target)) {
+                return;
+            }
+            void this.close();
+        };
         this.opened = false;
-        this.allPlatforms = [Socials.WHATSAPP, Socials.FACEBOOK, Socials.TWITTER, Socials.EMAIL, Socials.COPY_LINK];
-        this.platformIcons = [{ icon: whatsapp, name: Socials.WHATSAPP }, {
+        this.copied = false;
+        this.allPlatforms = [
+            Socials.WHATSAPP,
+            Socials.FACEBOOK,
+            Socials.TWITTER,
+            Socials.EMAIL,
+            Socials.COPY_LINK,
+        ];
+        this.platformIcons = [
+            { icon: whatsapp, name: Socials.WHATSAPP },
+            {
                 icon: facebook,
-                name: Socials.FACEBOOK
-            }, { icon: twitter, name: Socials.TWITTER }, { icon: email, name: Socials.EMAIL }, {
+                name: Socials.FACEBOOK,
+            },
+            { icon: twitter, name: Socials.TWITTER },
+            { icon: email, name: Socials.EMAIL },
+            {
                 icon: copy_link,
-                name: Socials.COPY_LINK
-            }];
+                name: Socials.COPY_LINK,
+            },
+        ];
         this.convertedPlatforms = [];
         /**
          * page url that will be shared custom | current page url
          */
-        this.url = "";
+        this.url = '';
         /**
          * page url name that will be shared custom | current page url
          */
-        this.urlName = "";
+        this.urlName = '';
         /**
          * selected platforms to share | all platforms
          */
         this.platforms = 'facebook,twitter,whatsapp,email,copy_link';
+        /**
+         * Share UI variant: `default` dropdown menu or centered `modal` dialog.
+         */
+        this.mode = 'default';
+        /**
+         * Optional title for the modal variant header. Defaults to a localized "Share".
+         */
+        this.modalTitle = '';
     }
     componentWillLoad() {
+        this.registerTranslationDefaults();
         if (this.host.hasAttribute('aria-label')) {
             this.host.removeAttribute('aria-label');
         }
@@ -54,50 +93,123 @@ export class SallaSocialShare {
             window.a2a_config.locale = salla.config.get('user.language_code', salla.lang.getLocale());
             window.a2a_config.callbacks = window.a2a_config.callbacks || [];
             window.a2a_config.callbacks.push({
-                share: (data) => {
+                share: data => {
                     // Handle share event
                     const shareData = {
                         share_via: data.service.toLowerCase(),
                         url: data.url,
-                        title: data.title
+                        title: data.title,
                     };
                     // Dispatch the share event
                     salla.event.emit('share-element', shareData);
-                }
+                },
             });
         };
         document.body.appendChild(script);
     }
+    componentDidLoad() {
+        document.addEventListener('click', this.onDocumentClick);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.onDocumentClick);
+        if (this.copiedResetTimeout) {
+            window.clearTimeout(this.copiedResetTimeout);
+        }
+        this.setBodyScrollLocked(false);
+    }
     /**
-     * Activate or open the share menu.
+     * Register bilingual (ar/en) defaults without overriding existing translations.
+     */
+    registerTranslationDefaults() {
+        if (!salla?.lang?.addBulk) {
+            return;
+        }
+        const missing = Object.entries(this.translationDefaults).reduce((acc, [key, value]) => {
+            if (salla.lang.get(key) === key) {
+                acc[key] = value;
+            }
+            return acc;
+        }, {});
+        if (Object.keys(missing).length) {
+            salla.lang.addBulk(missing);
+        }
+    }
+    resolveShareKit() {
+        return this.host.querySelector('.a2a_kit');
+    }
+    deferOutsideClickGuard() {
+        this.ignoreOutsideClick = true;
+        requestAnimationFrame(() => {
+            this.ignoreOutsideClick = false;
+        });
+    }
+    /**
+     * Open the share menu.
      */
     async open() {
-        const animateList = new anime.timeline().add({
-            targets: this.shareMenu,
+        if (this.opened) {
+            return;
+        }
+        this.opened = true;
+        this.deferOutsideClickGuard();
+        if (this.mode === 'modal') {
+            this.setBodyScrollLocked(true);
+        }
+        await new Promise(resolve => requestAnimationFrame(() => resolve()));
+        if (!this.opened) {
+            return;
+        }
+        // Wire AddToAny on the freshly rendered anchors (kit only exists once opened).
+        await this.refresh();
+        if (this.mode === 'modal') {
+            return;
+        }
+        const menu = this.resolveShareKit();
+        if (!menu) {
+            this.opened = false;
+            return;
+        }
+        this.openAnimation = new anime.timeline().add({
+            targets: menu,
             translateY: [-50, 0],
             opacity: [0, 1],
             duration: 300,
             podding: '0',
-            easing: 'easeInOutSine'
+            easing: 'easeInOutSine',
         });
-        animateList.add({
-            targets: this.shareMenu.children,
+        this.openAnimation.add({
+            targets: menu.children,
             translateZ: 0,
             translateY: [-30, 0],
             scaleY: [0, 1],
             opacity: [0, 1],
             duration: 1400,
-            delay: anime.stagger(100)
+            delay: anime.stagger(100),
         }, '-=200');
-        this.opened = !this.opened;
-        if (this.opened) {
-            this.shareMenu.classList.add('opened');
+    }
+    /**
+     * Close the share menu.
+     */
+    async close() {
+        if (!this.opened) {
+            return;
+        }
+        this.openAnimation?.pause();
+        this.openAnimation?.seek(0);
+        this.opened = false;
+        if (this.mode === 'modal') {
+            this.setBodyScrollLocked(false);
         }
-        else {
-            animateList.pause();
-            animateList.seek(0);
-            this.shareMenu.classList.remove('opened');
+    }
+    setBodyScrollLocked(locked) {
+        document.body.classList.toggle('s-social-share-modal-is-open', locked);
+    }
+    toggle() {
+        if (this.opened) {
+            return this.close();
         }
+        this.deferOutsideClickGuard();
+        return this.open();
     }
     /**
      * Asynchronously initializes the "AddToAny" (a2a) social sharing tool on the current page.
@@ -117,18 +229,123 @@ export class SallaSocialShare {
      * @async
      * @returns {Promise<void>} A promise that resolves once the initialization is complete.
      */
+    onUrlChanged(newUrl, oldUrl) {
+        if (newUrl !== oldUrl) {
+            void this.refresh();
+        }
+    }
+    getShareUrl() {
+        return this.url || window.location.href;
+    }
+    getModalTitle() {
+        return this.modalTitle || salla.lang.get('common.social.share');
+    }
+    syncShareAttributes() {
+        const kit = this.resolveShareKit();
+        if (!kit) {
+            return;
+        }
+        kit.setAttribute('data-a2a-url', this.getShareUrl());
+        kit.setAttribute('data-a2a-title', this.urlName || document.title);
+    }
     async refresh() {
-        // Attempt to initialize AddToAny with 'page' mode if the global object `window.a2a` is available.
+        this.syncShareAttributes();
+        // Re-scan kits so AddToAny picks up the updated data-a2a-url (init caches the first URL).
+        if (typeof window.a2a?.init_all === 'function') {
+            window.a2a.init_all();
+            return;
+        }
         window.a2a?.init('page');
     }
-    render() {
-        return (h("div", { key: 'e45420682a1b9bf686cbb9d3beff5a208505e1c7', class: "s-social-share-wrapper" }, h("slot", { key: '265102d26da7ce2d297969e1941b9a5785da3971', name: 'widget' }, h("salla-button", { key: '9f36a44dc9487f4956c1d8b73f0fcc41cf8a01b8', "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("span", { key: 'b34ed78cd6549bff733de5c542a42ca9aaf805d0', innerHTML: this.opened ? Cancel : ShareAlt }))), h("ul", { key: 'f8eb408030d409880391b7d13b5a701226b0d42a', ref: el => this.shareMenu = el, class: "s-social-share-list a2a_kit share", "data-a2a-url": this.url ? this.url : window.location.href, "data-a2a-title": this.urlName ? this.urlName : document.title }, this.platforms.split(',').map(platform => {
+    async copyLink() {
+        const url = this.getShareUrl();
+        try {
+            await navigator.clipboard.writeText(url);
+        }
+        catch {
+            const textarea = document.createElement('textarea');
+            textarea.value = url;
+            textarea.style.position = 'fixed';
+            textarea.style.opacity = '0';
+            document.body.appendChild(textarea);
+            textarea.select();
+            try {
+                document.execCommand('copy');
+            }
+            catch {
+                /* noop */
+            }
+            textarea.remove();
+        }
+        salla.event.emit('share-element', {
+            share_via: 'copy_link',
+            url,
+            title: this.urlName || document.title,
+        });
+        this.copied = true;
+        if (this.copiedResetTimeout) {
+            window.clearTimeout(this.copiedResetTimeout);
+        }
+        this.copiedResetTimeout = window.setTimeout(() => (this.copied = false), 2000);
+    }
+    modalPlatformMeta(platform) {
+        switch (platform) {
+            case Socials.WHATSAPP:
+                return {
+                    icon: whatsapp,
+                    color: '#25D366',
+                    label: salla.lang.get('common.social.whatsapp'),
+                };
+            case Socials.FACEBOOK:
+                return {
+                    icon: facebook,
+                    color: '#1877F2',
+                    label: salla.lang.get('common.social.facebook'),
+                };
+            case Socials.TWITTER:
+                return { icon: twitter, color: '#000000', label: salla.lang.get('common.social.twitter') };
+            case Socials.EMAIL:
+                return { icon: email, color: '#2BA6FF', label: salla.lang.get('common.social.email') };
+            default:
+                return { icon: copy_link, color: '#6b7280', label: platform };
+        }
+    }
+    renderModalCard(platform) {
+        const meta = this.modalPlatformMeta(platform);
+        return (h("a", { class: `s-social-share-modal-card a2a_button_${platform}`, "aria-label": `Share Via ${platform}` }, h("span", { class: "s-social-share-modal-icon", style: { backgroundColor: meta.color }, innerHTML: meta.icon }), h("span", { class: "s-social-share-modal-card-label" }, meta.label)));
+    }
+    renderModal() {
+        if (!this.opened) {
+            return null;
+        }
+        const enabled = this.platforms.split(',').map(platform => platform.trim());
+        const order = [Socials.EMAIL, Socials.WHATSAPP, Socials.TWITTER, Socials.FACEBOOK];
+        const platforms = order.filter(platform => enabled.includes(platform));
+        const showCopy = enabled.includes(Socials.COPY_LINK);
+        return (h("div", { class: "s-social-share-modal", onClick: event => {
+                if (event.target === event.currentTarget) {
+                    void this.close();
+                }
+            } }, h("div", { class: "s-social-share-modal-dialog", role: "dialog", "aria-modal": "true" }, h("div", { class: "s-social-share-modal-handle", "aria-hidden": "true" }), h("div", { class: "s-social-share-modal-header" }, h("span", { class: "s-social-share-modal-title" }, this.getModalTitle()), h("button", { type: "button", class: "s-social-share-modal-close", "aria-label": salla.lang.get('common.elements.close'), onClick: () => this.close() }, h("span", { class: "s-social-share-modal-close-icon", innerHTML: Cancel }))), h("div", { class: "s-social-share-modal-platforms a2a_kit", "data-a2a-url": this.getShareUrl(), "data-a2a-title": this.urlName ? this.urlName : document.title }, platforms.map(platform => this.renderModalCard(platform))), showCopy && (h("div", { class: "s-social-share-modal-copy-row" }, h("span", { class: "s-social-share-modal-url", dir: "ltr" }, this.getShareUrl()), h("salla-button", { type: "button", fill: "outline", onClick: () => this.copyLink() }, this.copied
+            ? salla.lang.get('common.social.copied')
+            : salla.lang.get('common.social.copy')))))));
+    }
+    renderPopupList() {
+        return (h("ul", { class: {
+                's-social-share-list': true,
+                a2a_kit: true,
+                share: true,
+                opened: this.opened,
+            }, "data-a2a-url": this.getShareUrl(), "data-a2a-title": this.urlName ? this.urlName : document.title }, this.platforms.split(',').map(platform => {
             return (h("li", null, h("a", { class: `a2a_button_${platform}`, "aria-label": `Share Via ${platform}` }, this.platformIcons.map((icon) => {
                 if (icon.name === platform) {
                     return h("span", { class: "s-social-share-icon", innerHTML: icon.icon });
                 }
             }))));
-        }))));
+        })));
+    }
+    render() {
+        return (h("div", { key: '56f669cd8567efe9f1a73e302d2d85be23dd901b', class: "s-social-share-wrapper" }, h("slot", { key: '2c1848fa62c1ec3b8301d0544cd8098ea647e2e7', name: "widget" }, h("salla-button", { key: '0a7ccac871963382f1c2fc594877b5445e5f8830', "aria-label": "Share", onClick: () => this.toggle(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("span", { key: '658cd0182e40140a73614ae477b43ff2e388e155', innerHTML: this.opened ? Cancel : ShareAlt }))), this.mode === 'modal' ? this.renderModal() : this.renderPopupList()));
     }
     static get is() { return "salla-social-share"; }
     static get originalStyleUrls() {
@@ -146,7 +363,7 @@ export class SallaSocialShare {
             "url": {
                 "type": "string",
                 "attribute": "url",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -161,7 +378,7 @@ export class SallaSocialShare {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "defaultValue": "\"\""
+                "defaultValue": "''"
             },
             "urlName": {
                 "type": "string",
@@ -181,7 +398,7 @@ export class SallaSocialShare {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "defaultValue": "\"\""
+                "defaultValue": "''"
             },
             "platforms": {
                 "type": "string",
@@ -202,12 +419,53 @@ export class SallaSocialShare {
                 "setter": false,
                 "reflect": true,
                 "defaultValue": "'facebook,twitter,whatsapp,email,copy_link'"
+            },
+            "mode": {
+                "type": "string",
+                "attribute": "mode",
+                "mutable": false,
+                "complexType": {
+                    "original": "'modal' | 'default'",
+                    "resolved": "\"default\" | \"modal\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Share UI variant: `default` dropdown menu or centered `modal` dialog."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'default'"
+            },
+            "modalTitle": {
+                "type": "string",
+                "attribute": "modal-title",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional title for the modal variant header. Defaults to a localized \"Share\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
             }
         };
     }
     static get states() {
         return {
             "opened": {},
+            "copied": {},
             "allPlatforms": {},
             "platformIcons": {},
             "convertedPlatforms": {}
@@ -228,7 +486,24 @@ export class SallaSocialShare {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Activate or open the share menu.",
+                    "text": "Open the share menu.",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Close the share menu.",
                     "tags": []
                 }
             },
@@ -245,26 +520,17 @@ export class SallaSocialShare {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Asynchronously initializes the \"AddToAny\" (a2a) social sharing tool on the current page.\nIf the global object `window.a2a` is available, it initializes the tool with the 'page' mode.\nThe 'page' mode is typically used to enable sharing of the current webpage.",
-                    "tags": [{
-                            "name": "remarks",
-                            "text": "This function is designed to be used in scenarios where dynamic loading or refreshing of social sharing tools is needed.\nEnsure that the AddToAny script is properly included in the HTML document before calling this function."
-                        }, {
-                            "name": "example",
-                            "text": "// Call the refresh function to initialize AddToAny on the page.\nawait refresh();"
-                        }, {
-                            "name": "throws",
-                            "text": "{Error} Throws an error if the AddToAny script is not properly included or if there are issues during initialization."
-                        }, {
-                            "name": "async",
-                            "text": undefined
-                        }, {
-                            "name": "returns",
-                            "text": "A promise that resolves once the initialization is complete."
-                        }]
+                    "text": "",
+                    "tags": []
                 }
             }
         };
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "url",
+                "methodName": "onUrlChanged"
+            }];
+    }
 }

package/dist/collection/components/salla-tabs/salla-tab-content.js

@@ -30,7 +30,7 @@ export class SallaTabContent {
             's-tabs-content': true,
             's-tabs-content-selected': this.isSelected
         };
-        return (h("div", { key: '8017c442a775f17fe6f5bf3c92dd083c9daa164e', class: classes }, h("slot", { key: '3be5606bf4ff8f3d3332f154333d4101d9dafdb5' })));
+        return (h("div", { key: 'f2deb9c1508aafe3aff5352094cccc97bdcd42ef', class: classes }, h("slot", { key: '460588864047444acdb06e757a7124d28935c24b' })));
     }
     static get is() { return "salla-tab-content"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-tabs/salla-tab-header.js

@@ -52,7 +52,7 @@ export class SallaTabHeader {
             's-tabs-active': this.isSelected,
         };
         return [
-            h("div", { key: '17847f97d80e9f52f460b7ebcc918736cafd757d', class: classes, onClick: this.onClick.bind(this) }, h("slot", { key: 'e936ad59f8255ec9ad713ecb69735404e741d294' })),
+            h("div", { key: '153247ab5a7c73819ccc506a45e60b9c084c391c', class: classes, onClick: this.onClick.bind(this) }, h("slot", { key: '417a3ae0c0aec8a965b5d3be9a4f917f290d2109' })),
         ];
     }
     static get is() { return "salla-tab-header"; }

package/dist/collection/components/salla-tabs/salla-tabs.js

@@ -50,7 +50,7 @@ export class SallaTabs {
     }
     render() {
         return [
-            h("div", { key: '2a76978734a3d8deeabbcfa7517b15a283d3071f', class: "s-tabs" }, h("div", { key: '0c565b46e62ed8fbcae0d9131619dbe83be61546', class: "s-tabs-header" }, h("slot", { key: '27ea98ff742bc51b75b35e0346733fb1c5b9526c', name: "header" })), h("div", { key: '9a76cba0e3c1f7ffb4c9d77d800ebc4d827e877c', class: "s-tabs-content-wrapper" }, h("slot", { key: '49ffe5586016252e8e3439a851c9aab0bf4e4079', name: "content" })))
+            h("div", { key: 'ae50836f68ee92459720fa9bf00d73848d849627', class: "s-tabs" }, h("div", { key: '55e8186e80381902269f9bad5738d9a555f71d37', class: "s-tabs-header" }, h("slot", { key: '46ce3e1ea75f92165b3d5ee7c16f19f8693f6d31', name: "header" })), h("div", { key: '3669e643abb37ed2edca73fc0577822a3f7fbb90', class: "s-tabs-content-wrapper" }, h("slot", { key: '2cf8b79f44630e21103991325ceff2cd3a4019ba', name: "content" })))
         ];
     }
     static get is() { return "salla-tabs"; }