@salla.sa/twilight-components 2.14.596 → 2.14.598

package/dist/collection/components/salla-product-card/salla-product-card.js

@@ -33,16 +33,10 @@ export class SallaProductCard {
             this.fitImageHeight = salla.config.get('store.settings.product.fit_type');
             salla.wishlist.event.onAdded((_res, id) => this.toggleFavoriteIcon(true, id));
             salla.wishlist.event.onRemoved((_res, id) => this.toggleFavoriteIcon(false, id));
+            // e.g. a guest signs into an account that already saved this product
+            salla.event.on('wishlist::storage.synced', () => this.productData && this.toggleFavoriteIcon(this.isInWishlist()));
             this.placeholder = salla.url.asset(salla.config.get('theme.settings.placeholder'));
         });
-        // Language
-        salla.lang.onLoaded(() => {
-            this.remained = salla.lang.get('pages.products.remained');
-            this.donationAmount = salla.lang.get('pages.products.donation_amount');
-            this.startingPrice = salla.lang.get('pages.products.starting_price');
-            this.addToCart = salla.lang.get('pages.cart.add_to_cart');
-            this.outOfStock = salla.lang.get('pages.products.out_of_stock');
-        });
         // Parse product data
         if (!this.product) {
             return;
@@ -54,6 +48,19 @@ export class SallaProductCard {
             salla.log('Bad json passed via product prop');
         }
     }
+    connectedCallback() {
+        // Language
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            this.remained = salla.lang.get('pages.products.remained');
+            this.donationAmount = salla.lang.get('pages.products.donation_amount');
+            this.startingPrice = salla.lang.get('pages.products.starting_price');
+            this.addToCart = salla.lang.get('pages.cart.add_to_cart');
+            this.outOfStock = salla.lang.get('pages.products.out_of_stock');
+        });
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     // Private Methods
     initCircleBar() {
         let qty = this.productData.quantity, total = this.productData.quantity > 100 ? this.productData.quantity * 2 : 100, roundPercent = (qty / total) * 100, bar = this.pie.querySelector('.s-product-card-content-pie-svg-bar'), strokeDashOffsetValue = 100 - roundPercent;
@@ -212,7 +219,7 @@ export class SallaProductCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Product information."
+                    "text": "The product data to display. Can be a JSON string or a product object containing id, name, image, price, etc."
                 },
                 "getter": false,
                 "setter": false,
@@ -231,7 +238,7 @@ export class SallaProductCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Horizontal card."
+                    "text": "Whether to display the card in horizontal (landscape) layout. Default is false (vertical layout)."
                 },
                 "getter": false,
                 "setter": false,
@@ -250,7 +257,7 @@ export class SallaProductCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Support shadow on hover."
+                    "text": "Whether to add a shadow effect on hover. Default is false."
                 },
                 "getter": false,
                 "setter": false,
@@ -269,7 +276,7 @@ export class SallaProductCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Hide add to cart button."
+                    "text": "Whether to hide the \"Add to Cart\" button. Default is false (button is shown)."
                 },
                 "getter": false,
                 "setter": false,
@@ -288,7 +295,7 @@ export class SallaProductCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Full image card."
+                    "text": "Whether to use a full-image card style where the image covers the entire card. Default is false."
                 },
                 "getter": false,
                 "setter": false,
@@ -307,7 +314,7 @@ export class SallaProductCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Minimal card."
+                    "text": "Whether to use a minimal card style with reduced information. Default is false."
                 },
                 "getter": false,
                 "setter": false,
@@ -326,7 +333,7 @@ export class SallaProductCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Special card."
+                    "text": "Whether this is a special/featured product card with additional styling (like quantity pie chart). Default is false."
                 },
                 "getter": false,
                 "setter": false,
@@ -345,7 +352,7 @@ export class SallaProductCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Show quantity."
+                    "text": "Whether to show the product quantity in a badge. Default is false."
                 },
                 "getter": false,
                 "setter": false,
@@ -364,7 +371,7 @@ export class SallaProductCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Compact list layout for drawers and lists."
+                    "text": "Whether to use a compact card layout suitable for drawers and lists. Default is false."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/salla-product-options/salla-product-options.js

@@ -107,12 +107,6 @@ export class SallaProductOptions {
             const completed = option.donation.target_amount <= option.donation.collected_amount;
             return h("div", { class: { "s-product-options-donation-message": true, "s-product-options-donation-completed": completed, "s-product-options-donation-expired": !completed } }, h("p", null, option.donation.target_message), h("span", { innerHTML: completed ? salla.money(option.donation.target_amount) : '' }));
         };
-        salla.lang.onLoaded(() => {
-            this.outOfStockText = salla.lang.get("pages.products.out_of_stock");
-            this.donationAmount = salla.lang.get('pages.products.donation_amount');
-            this.selectDonationAmount = salla.lang.getWithDefault('pages.products.select_donation_amount', 'تحديد مبلغ التبرع');
-            this.selectAmount = salla.lang.getWithDefault('pages.products.select_amount', 'اختر المبلغ');
-        });
         if (this.options) {
             try {
                 this.setOptionsData(Array.isArray(this.options) ? this.options : JSON.parse(this.options));
@@ -133,6 +127,14 @@ export class SallaProductOptions {
             });
         }
     }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            this.outOfStockText = salla.lang.get("pages.products.out_of_stock");
+            this.donationAmount = salla.lang.get('pages.products.donation_amount');
+            this.selectDonationAmount = salla.lang.getWithDefault('pages.products.select_donation_amount', 'تحديد مبلغ التبرع');
+            this.selectAmount = salla.lang.getWithDefault('pages.products.select_amount', 'اختر المبلغ');
+        });
+    }
     /**
      * Sets the options data for the product
      * @param optionsData - Array of product options
@@ -513,6 +515,7 @@ export class SallaProductOptions {
         return needsCartId ? salla.api.cart.getCurrentCartId(false, "salla-product-options") : null;
     }
     disconnectedCallback() {
+        this.langUnsubscribe?.();
         if (this.pasteHandler) {
             document.removeEventListener("paste", this.pasteHandler);
         }

package/dist/collection/components/salla-product-size-guide/salla-product-size-guide.js

@@ -11,12 +11,17 @@ export class SallaProductSizeGuide {
     constructor() {
         this.hasError = false;
         salla.event.on('size-guide::open', (product_id) => this.open(product_id));
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.placeholder_title = salla.lang.get('pages.products.size_guide_placeholder');
             this.placeholder_description = salla.lang.get('pages.products.size_guide_placeholder_info');
             this.modal_title = salla.lang.get('pages.products.size_guides');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     /**
      * Show the size-guide modal window
      */
@@ -45,11 +50,11 @@ export class SallaProductSizeGuide {
         return h("salla-placeholder", { alignment: "center", iconSize: "xl" }, h("div", { slot: "title" }, this.placeholder_title), h("div", { slot: "description" }, this.placeholder_description));
     }
     render() {
-        return (h("salla-modal", { key: 'de368aff05a19d87eb4e99f4e1d7eee36155f435', class: "s-product-size-guide-wrapper", id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("span", { key: 'c4ab31b3e6ef2751761ca2db27554f7f5bf057fc', slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }), h("div", { key: '17cfceb5ccb0546928f87f956267e9d0c11017ac', slot: "loading" }, h("div", { key: '4f4e20a62396d7825315203ffd22a72030e821b1', class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { key: 'd9132b26634ae1997dad9f1229b248c2cd76fff0', height: '15px', width: '25%' }), h("div", { key: '1b6a236851eef6e7caf7b7a0e84e591824b4e4ef', class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { key: 'bae06741881b57b4eb853f1256a22f9393d9cea4', height: '40px' }), h("salla-skeleton", { key: 'fdeb75a853f89df154b69dbd48fc8e233561af59', height: '40px' }), h("salla-skeleton", { key: 'd0be70bc141f04fd24adc86c56eec3a5e896f2d4', height: '40px' }), h("salla-skeleton", { key: 'c5146addbf2d5b9bda05170a9743cad0e08d8674', height: '40px' })), h("div", { key: '04dbbffe2de708c984c5d0966aa2b86c0051bd14', class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { key: '320fb33a2e5d9ee1f4b87c18b3f3dd13de180d4f', height: '15px', width: '25%' }), h("salla-skeleton", { key: 'f06aeac8e2f8ea86ec9b1c5c6f2b31172f23209f', height: '10px', width: '75%' }), h("salla-skeleton", { key: '1accf852a34edcac77a77151ebf67ba8e05cc729', height: '10px', width: '50%' }), h("salla-skeleton", { key: '42d4c3364779a6ee130339e37affe2e0c590e6a7', height: '10px', width: '75%' }), h("salla-skeleton", { key: '13064a231460414b4a0abd19dda41b01ac1ee04f', height: '10px', width: '100%' }), h("salla-skeleton", { key: 'd5a50f96ca3bab125503f836cd883cfb98ca135d', height: '10px', width: '25%' }), h("salla-skeleton", { key: '11cd2ed36d9754c32173f14cd7d5ea99fc2b5577', height: '10px', width: '60%' }), h("salla-skeleton", { key: 'a5b3a192d0e38dc13a025b8b8e0aba767f35611b', height: '10px', width: '45%' }), h("salla-skeleton", { key: 'dddcb26038e180fb5b686b29d286316d4314909f', height: '10px', width: '30%' })))), h("slot", { key: '43a08b9b6e64955b726b832f0849617ac31d4c25', name: "header" }), !this.hasError && !!this.guides ?
+        return (h("salla-modal", { key: '587dbc28fa828df2a47a4db1c124df032fe719fa', class: "s-product-size-guide-wrapper", id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("span", { key: '822224aa89fb065c7262abf2f24914ed1fa3d8bb', slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }), h("div", { key: '84e14a400f9417aa9be851a07f0203348a560aec', slot: "loading" }, h("div", { key: '5cbdbcf560f08279543c4d25fd21416ce2da1314', class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { key: 'e3139f2898256adc2c20fbb86e96a9f5d008a677', height: '15px', width: '25%' }), h("div", { key: '961f482bf358c5a4ca0d980561bafdcd7489fa68', class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { key: '1754361211a771952be69eeda9a4c9788aaff0e6', height: '40px' }), h("salla-skeleton", { key: '2ea3578f8751a2526947d5c067392ef95e3bcf44', height: '40px' }), h("salla-skeleton", { key: '32bba195c5f6a60ce9837b4d4cbfa302d6ddfb07', height: '40px' }), h("salla-skeleton", { key: '9888b01cd47c5acdc0a159ad49db228efd630d75', height: '40px' })), h("div", { key: 'd86e706b2393b17301f9f28b4b303f00bf743363', class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { key: '02e0330958fd73288d5c654fce7169470cdf47cd', height: '15px', width: '25%' }), h("salla-skeleton", { key: 'cccb8bc372c6ccfdf707621190bba4bc38aecb99', height: '10px', width: '75%' }), h("salla-skeleton", { key: '95f8e83b3b1a54a52da1ff2e61a866239575cf7b', height: '10px', width: '50%' }), h("salla-skeleton", { key: '4880b1d82cea617cae837ad2d6dd4d627fe8d9e3', height: '10px', width: '75%' }), h("salla-skeleton", { key: '38980cc41e7388b41e35015ceed72d025bd82980', height: '10px', width: '100%' }), h("salla-skeleton", { key: 'bb1ad6a995e9e27b851007cae2c1f7204f3c2d91', height: '10px', width: '25%' }), h("salla-skeleton", { key: 'fc5cd1e7adafca96e00b9284123bb3eb9f892c9c', height: '10px', width: '60%' }), h("salla-skeleton", { key: '89bbd77ec6da0c8e03dd2fb9f60c929f49415c83', height: '10px', width: '45%' }), h("salla-skeleton", { key: '0666ce266b9411913ae4db64c61d3cfa44cf4245', height: '10px', width: '30%' })))), h("slot", { key: '31a338bdc12e2a4ea1f80ea4bd700e293020b840', name: "header" }), !this.hasError && !!this.guides ?
             [
                 h("salla-tabs", null, this.guides.map((guide) => h("salla-tab-header", { slot: "header", name: guide.name }, h("span", null, guide.name))), this.guides.map((guide) => h("salla-tab-content", { slot: "content", name: guide.name }, h("div", { innerHTML: guide.description }))))
             ]
-            : this.showPlaceholder(), h("slot", { key: '5ae0956ca1f9313b5ef3d01dbdcab32f2e975e05', name: "footer" })));
+            : this.showPlaceholder(), h("slot", { key: '887b97cd58b442db20dad02db8ace42847bcef75', name: "footer" })));
     }
     static get is() { return "salla-product-size-guide"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-products-list/salla-products-list.js

@@ -101,14 +101,14 @@ export class SallaProductsList {
             this.includes = null;
         }
         Helper.setIncludes(this.includes);
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.placeholderText = salla.lang.get('pages.categories.no_products');
             this.endOfText = salla.lang.get('common.elements.end_of_content');
             this.failedLoadMore = salla.lang.get('common.elements.failed_to_load_more');
             this.currentPage = salla.config.get('page');
         });
-    }
-    connectedCallback() {
         //Override browser scroll restoration default behaviour
         if ('scrollRestoration' in history)
             history.scrollRestoration = 'manual';
@@ -119,6 +119,7 @@ export class SallaProductsList {
         salla.event.on('wishlist::storage.synced', this.onWishlistStorageSynced);
     }
     disconnectedCallback() {
+        this.langUnsubscribe?.();
         window.removeEventListener('DOMContentLoaded', this.boundScrollToLastViewedProduct);
         window.removeEventListener('scroll', this.boundHandleScroll);
         salla.event.off('wishlist::removed', this.onWishlistItemRemoved);

package/dist/collection/components/salla-progress-bar/salla-progress-bar.js

@@ -4,6 +4,9 @@
 import { h } from "@stencil/core";
 export class SallaProgressBar {
     constructor() {
+        // set when the constructor builds the donation-target labels, so the subscriber can rebuild them
+        this.hasDonationTarget = false;
+        this.donationEndDate = null;
         /**
          * Set height for the wrapper.
          */
@@ -15,6 +18,8 @@ export class SallaProgressBar {
                     donationJson.target_end_date = donationJson.target_end_date == '0000-00-00' ? null : donationJson.target_end_date;
                     this.value = donationJson.collected_amount;
                     this.target = donationJson.target_amount;
+                    this.hasDonationTarget = true;
+                    this.donationEndDate = donationJson.target_end_date;
                     this.header = salla.lang.get('pages.products.target');
                     this.message = donationJson.target_end_date ? salla.lang.get('pages.products.donation_target_date') + ' ' + donationJson.target_end_date : '';
                 }
@@ -29,10 +34,6 @@ export class SallaProgressBar {
         catch (e) {
             salla.log('Wrong donation json');
         }
-        salla.lang.onLoaded(() => {
-            this.header = this.header?.replace('pages.products.target', salla.lang.get('pages.products.target'));
-            this.message = this.message?.replace('pages.products.donation_target_date', salla.lang.get('pages.products.donation_target_date'));
-        });
         salla.onReady(() => {
             this.color = this.color || salla.config.get('theme.color.primary', "#ffd5c4");
             if (!this.unit) {
@@ -40,6 +41,21 @@ export class SallaProgressBar {
             }
         });
     }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            if (this.hasDonationTarget) {
+                // rebuilt each time: once translated, the text no longer holds the keys replaced below
+                this.header = salla.lang.get('pages.products.target');
+                this.message = this.donationEndDate ? salla.lang.get('pages.products.donation_target_date') + ' ' + this.donationEndDate : '';
+                return;
+            }
+            this.header = this.header?.replace('pages.products.target', salla.lang.get('pages.products.target'));
+            this.message = this.message?.replace('pages.products.donation_target_date', salla.lang.get('pages.products.donation_target_date'));
+        });
+    }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     getPercentage() {
         return (this.value / this.target) * 100;
     }

package/dist/collection/components/salla-quick-buy/salla-quick-buy.js

@@ -79,10 +79,15 @@ export class SallaQuickBuy {
             });
             return true;
         };
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.quickBuy = salla.lang.get('pages.products.buy_now');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     quickBuyHandler() {
         if (salla.config.isGuest() && !this.isGuestCheckout()) {
             this.requireLogin.emit({ productId: this.productId });

package/dist/collection/components/salla-quick-order/salla-quick-order.js

@@ -53,7 +53,9 @@ export class SallaQuickOrder {
         salla.onReady(() => {
             this.productId = this.productId || salla.config.get('page.id');
         });
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.placeHolderEmail = salla.lang.get('common.elements.email');
             this.emailOptional = salla.lang.get('common.elements.optional');
             this.agreementShowText = salla.lang.get('pages.checkout.show_full_agreement');
@@ -61,6 +63,9 @@ export class SallaQuickOrder {
             this.userNameLabel = salla.lang.get('pages.products.your_name');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     getBtnColor() {
         return this.quickOrderStyle === 'default' ? 'light' : 'primary';
     }

package/dist/collection/components/salla-rating-modal/salla-rating-modal.js

@@ -10,6 +10,7 @@ import ShippingFast from "../../assets/svg/shipping-fast.svg";
 import Star from "../../assets/svg/star.svg";
 import WhatsappIcon from "../../assets/svg/whatsapp2.svg";
 import Helper from "../../Helpers/Helper";
+import { setTranslationDefault } from "../../Helpers/translate";
 export class SallaRatingModal {
     constructor() {
         this.hasError = false;
@@ -85,11 +86,13 @@ export class SallaRatingModal {
         salla.onReady(() => {
             this.orderId = salla.config.get('page.id');
         });
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.contactUsLabel = salla.lang.get('blocks.footer.social');
             const setNestedAsync = (lang, key, value) => {
                 return new Promise((resolve) => {
-                    salla.helpers.setNested(salla.lang.messages[lang], key, value);
+                    setTranslationDefault(lang, key, value);
                     resolve(true);
                 });
             };
@@ -139,6 +142,9 @@ export class SallaRatingModal {
             setTranslations();
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     getV2Ref() {
         return this.v2Ref ?? this.host.querySelector('salla-rating-modal-v2');
     }

package/dist/collection/components/salla-rating-stars/salla-rating-stars.js

@@ -11,24 +11,24 @@ export class SallaRatingStars {
         this.reviewLabel = '';
         this.selectedStar = 0;
         /**
-       * Sets input name.
-       */
+         * The name attribute for the rating input (used in forms). Default is 'rating'.
+         */
         this.name = 'rating';
         /**
-        * Sets the height and width of the component. Defaults to medium.
-        */
+         * The size of the star icons. Can be 'large', 'medium', 'small', or 'mini'. Default is 'medium'.
+         */
         this.size = 'medium';
         /**
-       * Number of reviews to display.
-       */
+         * The number of reviews to display next to the stars. Default is 0 (hidden).
+         */
         this.reviews = 0;
         /**
-        * Render the description label before the stars instead of after.
-        */
+         * Render the description label before the stars instead of after.
+         */
         this.labelBeforeStars = false;
         /**
-        * Allows the rating to be editable.
-        */
+         * Whether the rating is interactive/editable by the user. Default is false (display-only).
+         */
         this.editable = false;
         this.tag = true;
     }
@@ -215,7 +215,7 @@ export class SallaRatingStars {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Sets input name."
+                    "text": "The name attribute for the rating input (used in forms). Default is 'rating'."
                 },
                 "getter": false,
                 "setter": false,
@@ -235,7 +235,7 @@ export class SallaRatingStars {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Sets the height and width of the component. Defaults to medium."
+                    "text": "The size of the star icons. Can be 'large', 'medium', 'small', or 'mini'. Default is 'medium'."
                 },
                 "getter": false,
                 "setter": false,
@@ -255,7 +255,7 @@ export class SallaRatingStars {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The rating value."
+                    "text": "The current rating value (0-5). Used to display filled stars."
                 },
                 "getter": false,
                 "setter": false,
@@ -274,7 +274,7 @@ export class SallaRatingStars {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Number of reviews to display."
+                    "text": "The number of reviews to display next to the stars. Default is 0 (hidden)."
                 },
                 "getter": false,
                 "setter": false,
@@ -294,7 +294,7 @@ export class SallaRatingStars {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Show the description label."
+                    "text": "Whether to show a descriptive label (e.g., \"Excellent\", \"Good\") next to the rating. Default is false."
                 },
                 "getter": false,
                 "setter": false,
@@ -333,7 +333,7 @@ export class SallaRatingStars {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Allows the rating to be editable."
+                    "text": "Whether the rating is interactive/editable by the user. Default is false (display-only)."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/salla-review-card/salla-review-card.js

@@ -6,6 +6,10 @@ import IconVerified from "../../assets/svg/check.svg";
 import IconStar2 from "../../assets/svg/star-02.svg";
 import IconStar2Muted from "../../assets/svg/star-02-muted.svg";
 import IconFire2 from "../../assets/svg/fire-02.svg";
+/**
+ * The `salla-review-card` component displays a product review with images, ratings, and product info.
+ * Supports image carousel with swipe gestures.
+ */
 export class SallaReviewCard {
     constructor() {
         this.currentSlide = 0;
@@ -158,7 +162,7 @@ export class SallaReviewCard {
         return (h("a", { href: this.review?.product?.url, class: "s-review-card-product-container" }, h("img", { alt: product.image?.alt || "Product", src: product.image?.url, class: "s-review-card-product-image", width: 60, height: 60, loading: "lazy", decoding: "async", draggable: false }), h("div", { class: "s-review-card-product-details" }, h("p", { class: "s-review-card-product-details-name" }, product.name), this.showPurchaseCount ? h("p", { class: "s-review-card-product-details-purchase-count" }, h("span", { innerHTML: IconFire2 }), this.purchasedCount) : null)));
     }
     render() {
-        return h("div", { key: '44589734c0a8ab8211a50e89e306de7dd53ad679', class: "s-review-card-container" }, this.renderSlider(), this.renderSingleImage(), renderDivider(), h("div", { key: '14e57255f40beab2e4b92724f26f171cdaaf69f4', class: "s-review-card-content" }, this.renderHeader(), h("p", { key: '8f27f7f13b5611a71164dba288f53e53e10e67f0', class: "s-review-card-review-content", innerHTML: this.review?.content }), renderDivider(), this.renderProductInfo()));
+        return h("div", { key: '5d214b55ba611ae39a8a3352e67c1c0c74749cae', class: "s-review-card-container" }, this.renderSlider(), this.renderSingleImage(), renderDivider(), h("div", { key: '8f761e54645173d887eaecc50bbc6e1f9664a861', class: "s-review-card-content" }, this.renderHeader(), h("p", { key: 'a75cbc58c4631f96aa112f9cd522a7ad43629b27', class: "s-review-card-review-content", innerHTML: this.review?.content }), renderDivider(), this.renderProductInfo()));
     }
     static get is() { return "salla-review-card"; }
     static get originalStyleUrls() {

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

@@ -52,11 +52,16 @@ export class SallaReviews {
             this.displayAllURL = salla.url.get('testimonials');
             this.isRTL = salla.config.get('theme.is_rtl', true);
         });
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.testimonialText = salla.lang.get('blocks.home.testimonials');
             this.displayAllLinkText = salla.lang.get('blocks.home.display_all');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     fetchReviews() {
         if (this.source === 'json') {
             return Promise.resolve(JSON.parse(this.sourceValue));

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { h, Host } from "@stencil/core";
+import { h, Host, forceUpdate } from "@stencil/core";
 import StoreAlt from "../../assets/svg/store-alt.svg";
 import Search from "../../assets/svg/search.svg";
 import { ModeType } from "./interfaces";
@@ -46,10 +46,17 @@ export class SallaScopees {
         salla.event.on('scopes::open', ({ mode = null, product_id = null } = {}) => {
             this.open(mode, product_id);
         });
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.translationLoaded = true;
+            // translationLoaded is already true on later calls, so force the render that refreshes the labels read in render()
+            forceUpdate(this);
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     /**
      * Whether to hand scope selection to the native app instead of rendering the web modal.
      * Delegates only inside the native SPA webview (Salla.mobile.isSpaWebview() — bridge live AND

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

@@ -5,16 +5,16 @@ import { h, Host } from "@stencil/core";
 export class SallaSkeleton {
     constructor() {
         /**
-       *  Set the shape type of the skeleton is it circle or normal
-       */
+         * The shape type of the skeleton. 'circle' for circular skeletons (e.g., avatars), 'normal' for rectangular shapes. Default is 'normal'.
+         */
         this.type = 'normal';
         /**
-       *  Set the skeleton width
-       */
+         * The width of the skeleton. Can be any CSS width value (e.g., '100%', '50px', '2rem'). Default is '100%'.
+         */
         this.width = '100%';
         /**
-       *  Set the skeleton height
-       */
+         * The height of the skeleton. Can be any CSS height value (e.g., '100%', '50px', '2rem'). Default is '100%'.
+         */
         this.height = '100%';
     }
     render() {
@@ -22,7 +22,7 @@ export class SallaSkeleton {
             's-skeleton-item': true,
             's-skeleton-item-circular': this.type == 'circle',
         };
-        return (h(Host, { key: 'b6ea2f9ba293c4c5922a5abf48f05845d02a8590', class: "s-skeleton-wrapper", style: { width: this.width, height: this.height } }, h("div", { key: '8fa3bed8b7aa80e01742d6c2496bc0578aabe7f1', class: classes }, "\u00A0")));
+        return (h(Host, { key: '7a1ce16742202fd5e2e37eded505d94e03079137', class: "s-skeleton-wrapper", style: { width: this.width, height: this.height } }, h("div", { key: '8fb06aebef2322b52ad83f7524f42d8908c4b5b0', class: classes }, "\u00A0")));
     }
     static get is() { return "salla-skeleton"; }
     static get originalStyleUrls() {
@@ -50,7 +50,7 @@ export class SallaSkeleton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set the shape type of the skeleton is it circle or normal"
+                    "text": "The shape type of the skeleton. 'circle' for circular skeletons (e.g., avatars), 'normal' for rectangular shapes. Default is 'normal'."
                 },
                 "getter": false,
                 "setter": false,
@@ -70,7 +70,7 @@ export class SallaSkeleton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set the skeleton width"
+                    "text": "The width of the skeleton. Can be any CSS width value (e.g., '100%', '50px', '2rem'). Default is '100%'."
                 },
                 "getter": false,
                 "setter": false,
@@ -90,7 +90,7 @@ export class SallaSkeleton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set the skeleton height"
+                    "text": "The height of the skeleton. Can be any CSS height value (e.g., '100%', '50px', '2rem'). Default is '100%'."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -325,14 +325,16 @@ export class SallaSlider {
     isStaticWhenSingle() {
         return this.staticWhenSingle && this.host.querySelector('[slot="items"]')?.children?.length === 1;
     }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
+            this.displayAllTitle = salla.lang.get('blocks.home.display_all');
+        });
+    }
     async componentWillLoad() {
         if (this.isStaticWhenSingle()) {
             this.host.classList.add('s-slider-single-mode');
             return;
         }
-        salla.lang.onLoaded(() => {
-            this.displayAllTitle = salla.lang.get('blocks.home.display_all');
-        });
         this.hasThumbSlot = !!this.host.querySelector('[slot="thumbs"]');
         if (this.listenToThumbnailsOption) {
             salla.event.on('product-options::change', data => {
@@ -617,6 +619,7 @@ export class SallaSlider {
         this.viewportMediaQuery.addEventListener('change', this.onViewportChange);
     }
     disconnectedCallback() {
+        this.langUnsubscribe?.();
         if (this.isStaticWhenSingle()) {
             return;
         }

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

@@ -17,10 +17,15 @@ export class SallaSocial {
         this.iconsList = { instagram, twitter, facebook, youtube, snapchat, tiktok };
         this.socialSlot = this.host.querySelector('[slot="social-item"]')?.innerHTML ||
             `<a href={link} rel="noopener" target="_blank" title={type} aria-label={type}><span class="s-social-icon">{icon}</span></a>`;
-        salla.lang.onLoaded(() => {
+    }
+    connectedCallback() {
+        this.langUnsubscribe = salla.lang.subscribe(() => {
             this.links = salla.config.get('store.social');
         });
     }
+    disconnectedCallback() {
+        this.langUnsubscribe?.();
+    }
     getLinksArray() {
         return this.links ? Object.entries(this.links)
             .filter(([key, value]) => !!value && key !== 'whatsapp')
@@ -31,7 +36,7 @@ export class SallaSocial {
     }
     render() {
         const linksArray = this.getLinksArray();
-        return (h(Host, { key: '4b8d92800f475d314d5637e290c1fa95c78335f5' }, h("ul", { key: 'b6134f221891e28484155c55d3bcf0182bcb967a', class: "s-social-list" }, linksArray.map((link) => (h("li", { class: "s-social-link" }, h("div", { id: "social-slot", innerHTML: this.socialSlot
+        return (h(Host, { key: 'ce42d3f37cc3c9b9753f9431b43267e4a49153a3' }, h("ul", { key: '515e3effaf234de3b639bc5276559f05de06e755', class: "s-social-list" }, linksArray.map((link) => (h("li", { class: "s-social-link" }, h("div", { id: "social-slot", innerHTML: this.socialSlot
                 .replace(/\{icon\}/g, this.iconsList[link.type])
                 .replace(/\{type\}/g, link.type)
                 .replace(/\{link\}/g, link.value.toString()) })))))));