@salla.sa/twilight-components 3.0.25 → 3.0.26

package/dist/components/info.js

@@ -0,0 +1,11 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+var InfoIcon = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>info</title>
+<path d="M16 13.333c-0.737 0-1.333 0.596-1.333 1.333v9.333c0 0.737 0.596 1.333 1.333 1.333s1.333-0.596 1.333-1.333v-9.333c0-0.737-0.596-1.333-1.333-1.333zM16 7.987c-0.737 0-1.333 0.596-1.333 1.333v0.013c0 0.737 0.596 1.327 1.333 1.327s1.333-0.603 1.333-1.34-0.596-1.333-1.333-1.333zM16 0c-8.823 0-16 7.177-16 16s7.177 16 16 16 16-7.177 16-16-7.177-16-16-16zM16 29.333c-7.352 0-13.333-5.981-13.333-13.333s5.981-13.333 13.333-13.333 13.333 5.981 13.333 13.333-5.981 13.333-13.333 13.333z"></path>
+</svg>
+`;
+
+export { InfoIcon as I };

package/dist/components/salla-bottom-alert.js

@@ -2,6 +2,7 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { I as InfoIcon } from './info.js';
 import { P as PendingOrdersIcon } from './cart.js';
 import { I as ImageIcon } from './image.js';
 import { s as setTranslationDefault } from './translate.js';
@@ -9,13 +10,6 @@ import { d as defineCustomElement$4 } from './salla-button2.js';
 import { d as defineCustomElement$3 } from './salla-drawer2.js';
 import { d as defineCustomElement$2 } from './salla-loading2.js';
 
-var infoIcon = `<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>info</title>
-<path d="M16 13.333c-0.737 0-1.333 0.596-1.333 1.333v9.333c0 0.737 0.596 1.333 1.333 1.333s1.333-0.596 1.333-1.333v-9.333c0-0.737-0.596-1.333-1.333-1.333zM16 7.987c-0.737 0-1.333 0.596-1.333 1.333v0.013c0 0.737 0.596 1.327 1.333 1.327s1.333-0.603 1.333-1.34-0.596-1.333-1.333-1.333zM16 0c-8.823 0-16 7.177-16 16s7.177 16 16 16 16-7.177 16-16-7.177-16-16-16zM16 29.333c-7.352 0-13.333-5.981-13.333-13.333s5.981-13.333 13.333-13.333 13.333 5.981 13.333 13.333-5.981 13.333-13.333 13.333z"></path>
-</svg>
-`;
-
 var moneyIcon = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>money-card</title>
@@ -160,7 +154,7 @@ const SallaBottomAlert$1 = /*@__PURE__*/ proxyCustomElement(class SallaBottomAle
     }
     render() {
         const hasTemplate = this.template && typeof this.template === 'object' && Object.keys(this.template).length > 0;
-        return (h(Host, { key: 'e3aa3e9170abe209c668d986cdee8a1e218796b5', class: `s-bottom-alert-wrapper ${hasTemplate ? 's-bottom-alert-wrapper-with-template' : ''}` }, hasTemplate && (h("div", { key: '92c6cce5cee33c11f8efe6365e647967fa7f5233', class: "s-bottom-alert-logo-section" }, h("img", { key: '4ad9449846a7e30daaa1b6bcc9739c91073e8c37', src: "https://cdn.salla.network/images/logo/logo-light.svg", alt: "Salla", class: "s-bottom-alert-logo" }), h("span", { key: '7075d44f4a2c73661f491a9dd66cc59bda60db58', class: "s-bottom-alert-logo-text" }, this.readyStores))), h("div", { key: 'd0f63ff07acd57b6f7f5663dc40e533a1cab6b99', class: "s-bottom-alert-content" }, h("div", { key: 'bbacb8bba096ab59ccba5faf90c7a9d67b618831', class: "flex items-center gap-2" }, h("div", { key: '8d6fd88b4865d9eb736bad0caf37aabd48e462f2', class: "s-bottom-alert-icon" }, this.icon ? h("i", { class: this.icon }) : h("i", { innerHTML: infoIcon })), h("div", { key: '92beef20dc89d12250dfcd4a07f5eaa0d69e9612', class: "s-bottom-alert-message" }, this.message ? (this.message) : hasTemplate ? (h("span", { class: "flex flex-wrap items-center gap-1" }, this.defaultMessage, h("span", { class: {
+        return (h(Host, { key: 'e3aa3e9170abe209c668d986cdee8a1e218796b5', class: `s-bottom-alert-wrapper ${hasTemplate ? 's-bottom-alert-wrapper-with-template' : ''}` }, hasTemplate && (h("div", { key: '92c6cce5cee33c11f8efe6365e647967fa7f5233', class: "s-bottom-alert-logo-section" }, h("img", { key: '4ad9449846a7e30daaa1b6bcc9739c91073e8c37', src: "https://cdn.salla.network/images/logo/logo-light.svg", alt: "Salla", class: "s-bottom-alert-logo" }), h("span", { key: '7075d44f4a2c73661f491a9dd66cc59bda60db58', class: "s-bottom-alert-logo-text" }, this.readyStores))), h("div", { key: 'd0f63ff07acd57b6f7f5663dc40e533a1cab6b99', class: "s-bottom-alert-content" }, h("div", { key: 'bbacb8bba096ab59ccba5faf90c7a9d67b618831', class: "flex items-center gap-2" }, h("div", { key: '8d6fd88b4865d9eb736bad0caf37aabd48e462f2', class: "s-bottom-alert-icon" }, this.icon ? h("i", { class: this.icon }) : h("i", { innerHTML: InfoIcon })), h("div", { key: '92beef20dc89d12250dfcd4a07f5eaa0d69e9612', class: "s-bottom-alert-message" }, this.message ? (this.message) : hasTemplate ? (h("span", { class: "flex flex-wrap items-center gap-1" }, this.defaultMessage, h("span", { class: {
                 's-bottom-alert-message-highlight': true,
             }, "aria-label": "Developer" }, this.salla), h("span", { innerHTML: salla.money(this.template.price) }))) : (this.defaultMessage))), this.type !== 'banner' && (h("div", { key: '86d72792e488df2c1cd18929c8e4d92fac27488f', class: hasTemplate ? 's-bottom-alert-actions-group' : 's-bottom-alert-action' }, hasTemplate ? (this.loading ? (h("salla-loading", { size: "20" })) : (h("div", { class: "s-bottom-alert-actions-group-container" }, h("a", { class: "s-bottom-alert-action-link", onClick: () => this.handleAction() }, this.actionLabel || this.moreDetailsLabel), this.templateData?.link ? (h("button", { type: "button", class: "s-bottom-alert-action-purchase-button", onClick: () => window.open(this.templateData?.link, '_blank') }, this.buyTheTemplate)) : null))) : (h("salla-button", { href: this.actionUrl, size: "medium", onClick: () => this.handleAction(), width: "normal" }, this.actionLabel || this.defaultActionLabel)))), this.type === 'popup' && this.popup())));
     }

package/dist/components/salla-cart-summary-card.js

@@ -2,10 +2,11 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { I as InfoIcon } from './info.js';
 import { d as defineCustomElement$3 } from './salla-button2.js';
 import { d as defineCustomElement$2 } from './salla-skeleton2.js';
 
-const sallaCartSummaryCardCss = "/*!twlt*/:host{display:block}.sticky{position:sticky}.block{display:block}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transition{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.\\!btn{display:inline-flex;flex:1 1 0%;align-items:center;justify-content:center;white-space:nowrap;border-radius:0.375rem;padding-left:1.5rem;padding-right:1.5rem;padding-bottom:0.625rem;padding-top:0.5rem;font-size:0.875rem;line-height:1.25rem;font-weight:700;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.\\!btn:hover{opacity:0.8}.btn{display:inline-flex;flex:1 1 0%;align-items:center;justify-content:center;white-space:nowrap;border-radius:0.375rem;padding-left:1.5rem;padding-right:1.5rem;padding-bottom:0.625rem;padding-top:0.5rem;font-size:0.875rem;line-height:1.25rem;font-weight:700;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.btn:hover{opacity:0.8}.s-cart-summary-card-sheet-title{margin-bottom:0.5rem;flex:1 1 0%;font-size:0.875rem;line-height:1.25rem;font-weight:700;--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.s-cart-summary-card-line{margin-bottom:0.5rem;display:flex;align-items:center;justify-content:space-between;font-size:0.875rem;line-height:1.25rem}.s-cart-summary-card-line span{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.s-cart-summary-card-line b{font-size:1rem;line-height:1.5rem;font-weight:600;--tw-text-opacity:1;color:rgb(51 51 51 / var(--tw-text-opacity, 1))}.s-cart-summary-card-line--discount b{--tw-text-opacity:1 !important;color:rgb(220 38 38 / var(--tw-text-opacity, 1)) !important}.s-cart-summary-card-line--discount b *{--tw-text-opacity:1 !important;color:rgb(220 38 38 / var(--tw-text-opacity, 1)) !important}.s-cart-summary-card-bar-label{display:flex;flex-direction:column;gap:0.125rem}.s-cart-summary-card-bar-label-main{display:flex;align-items:baseline;gap:0.375rem}.s-cart-summary-card-bar-label-text{white-space:nowrap;font-size:1rem;line-height:1.5rem;font-weight:700;--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.s-cart-summary-card-bar-count{white-space:nowrap;font-size:0.75rem;line-height:1rem;--tw-text-opacity:1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.s-cart-summary-card-bar-label-sub{font-size:11px;--tw-text-opacity:1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.s-cart-summary-card-bar-totals{display:flex;flex-direction:column;align-items:flex-end;gap:0.375rem}.s-cart-summary-card-bar-totals-row{display:flex;align-items:center;gap:0.375rem}.s-cart-summary-card-bar-total{font-size:1rem;line-height:1.5rem;font-weight:700;--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.s-cart-summary-card-bar-original{font-size:1rem;line-height:1.5rem;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1));text-decoration-line:line-through}.s-cart-summary-card-bar-savings-badge{display:inline-flex;width:max-content;align-items:center;gap:0.25rem;border-radius:var(--s-radius, 0.25rem);--tw-bg-opacity:1;background-color:rgb(239 251 246 / var(--tw-bg-opacity, 1));padding-left:0.5rem;padding-right:0.5rem;padding-top:0.125rem;padding-bottom:0.125rem;font-size:11px;font-weight:600;--tw-text-opacity:1;color:rgb(22 163 74 / var(--tw-text-opacity, 1))}.s-cart-summary-card-chevron{display:inline-flex;height:1.5rem;width:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-width:0px;background-color:transparent;--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1));outline:2px solid transparent;outline-offset:2px}.s-cart-summary-card-chevron-icon{display:inline-flex;transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-cart-summary-card{display:block;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}@media (max-width: 1023px){.s-cart-summary-card{position:fixed;inset-inline:0;bottom:0;z-index:1;border-radius:24px 24px 0 0;box-shadow:0 -12px 24px -12px rgba(0, 0, 0, 0.12);transition:box-shadow 0.3s ease;padding-bottom:calc(env(safe-area-inset-bottom) + 0.5rem)}}@media (min-width: 1024px){.s-cart-summary-card{position:relative;border-radius:0.5rem;box-shadow:0 2px 6px rgba(0, 0, 0, 0.05);padding:1.25rem 1.5rem;margin-bottom:1.25rem}}@media (max-width: 1023px){.s-cart-summary-card--open{border-radius:0;box-shadow:none}}.s-cart-summary-card-sheet-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.4s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.3s ease}@media (max-width: 1023px){.s-cart-summary-card-sheet-wrap{position:absolute;inset-inline:0;bottom:calc(100% - 1px);background:#fff;border-radius:24px 24px 0 0;overflow:hidden;box-shadow:0 -12px 24px -12px rgba(0, 0, 0, 0)}}@media (min-width: 1024px){.s-cart-summary-card-sheet-wrap{grid-template-rows:1fr}}@media (max-width: 1023px){.s-cart-summary-card-sheet-wrap--open{grid-template-rows:1fr;box-shadow:0 -12px 24px -12px rgba(0, 0, 0, 0.12)}}.s-cart-summary-card-sheet{min-height:0;overflow:hidden}@media (max-width: 1023px){.s-cart-summary-card-sheet-wrap--open .s-cart-summary-card-sheet{overflow-y:auto;max-height:70vh;-webkit-overflow-scrolling:touch;padding:0.75rem 1rem 0}}.s-cart-summary-card-sheet-header{display:flex;align-items:center;justify-content:space-between;gap:0.5rem}@media (max-width: 1023px){.s-cart-summary-card-sheet-header{padding-bottom:0.5rem}}.s-cart-summary-card-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:0.75rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}@media (min-width: 1024px){.s-cart-summary-card-bar{margin-top:1rem}}@media (max-width: 1023px){.s-cart-summary-card-bar{padding:0.875rem 1rem 0.5rem;border-radius:24px 24px 0 0}.s-cart-summary-card--open .s-cart-summary-card-bar{padding-top:0;border-radius:0}}@media (min-width: 1024px){.s-cart-summary-card-action{padding-top:1rem}}@media (max-width: 1023px){.s-cart-summary-card-action{padding:0 1rem 0.75rem}}.s-cart-summary-card--open .s-cart-summary-card-chevron-icon{transform:rotate(180deg)}.s-cart-summary-card-action *:focus{outline:none}";
+const sallaCartSummaryCardCss = "/*!twlt*/@charset \"UTF-8\";:host{display:block}.s-cart-summary-card-fee-tip-wrap{display:inline-flex;align-items:center}.s-cart-summary-card-fee-tip{appearance:none;border:0;background:transparent;padding:0;outline:none}.s-cart-summary-card-fee-tip svg{width:100%;height:100%;fill:currentColor}.s-cart-summary-card-fee-tip-bubble{position:fixed;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;min-width:132px;max-width:min(220px, 100vw - 24px);padding:10px 12px;border-radius:8px;background:var(--color-primary);color:var(--color-primary-reverse);line-height:1.35;white-space:nowrap;z-index:1000;pointer-events:none;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15)}.s-cart-summary-card-fee-tip-bubble::after{content:\"\";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-bottom-color:var(--color-primary)}.s-cart-summary-card-fee-tip-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;color:var(--color-primary-reverse)}.s-cart-summary-card-fee-tip-line-label{font-size:11px;font-weight:400;opacity:0.72}.s-cart-summary-card-fee-tip-line-value{font-size:13px;font-weight:700}.fixed{position:fixed}.sticky{position:sticky}.block{display:block}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.transition{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.\\!btn{display:inline-flex;flex:1 1 0%;align-items:center;justify-content:center;white-space:nowrap;border-radius:0.375rem;padding-left:1.5rem;padding-right:1.5rem;padding-bottom:0.625rem;padding-top:0.5rem;font-size:0.875rem;line-height:1.25rem;font-weight:700;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.\\!btn:hover{opacity:0.8}.btn{display:inline-flex;flex:1 1 0%;align-items:center;justify-content:center;white-space:nowrap;border-radius:0.375rem;padding-left:1.5rem;padding-right:1.5rem;padding-bottom:0.625rem;padding-top:0.5rem;font-size:0.875rem;line-height:1.25rem;font-weight:700;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.btn:hover{opacity:0.8}.s-cart-summary-card-sheet-title{margin-bottom:0.5rem;flex:1 1 0%;font-size:0.875rem;line-height:1.25rem;font-weight:700;--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.s-cart-summary-card-line{margin-bottom:0.5rem;display:flex;align-items:center;justify-content:space-between;font-size:0.875rem;line-height:1.25rem}.s-cart-summary-card-line>span{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.s-cart-summary-card-line b{font-size:1rem;line-height:1.5rem;font-weight:600;--tw-text-opacity:1;color:rgb(51 51 51 / var(--tw-text-opacity, 1))}.s-cart-summary-card-line--discount b{--tw-text-opacity:1 !important;color:rgb(220 38 38 / var(--tw-text-opacity, 1)) !important}.s-cart-summary-card-line--discount b *{--tw-text-opacity:1 !important;color:rgb(220 38 38 / var(--tw-text-opacity, 1)) !important}.s-cart-summary-card-fee-label{display:inline-flex;align-items:center;gap:0.25rem;--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.s-cart-summary-card-fee-tip{display:inline-flex;height:0.875rem;width:0.875rem;cursor:pointer;align-items:center;justify-content:center;--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.s-cart-summary-card-bar-label{display:flex;flex-direction:column;gap:0.125rem}.s-cart-summary-card-bar-label-main{display:flex;align-items:baseline;gap:0.375rem}.s-cart-summary-card-bar-label-text{white-space:nowrap;font-size:1rem;line-height:1.5rem;font-weight:700;--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.s-cart-summary-card-bar-count{white-space:nowrap;font-size:0.75rem;line-height:1rem;--tw-text-opacity:1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.s-cart-summary-card-bar-label-sub{font-size:11px;--tw-text-opacity:1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.s-cart-summary-card-bar-totals{display:flex;flex-direction:column;align-items:flex-end;gap:0.375rem}.s-cart-summary-card-bar-totals-row{display:flex;align-items:center;gap:0.375rem}.s-cart-summary-card-bar-total{font-size:1rem;line-height:1.5rem;font-weight:700;--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.s-cart-summary-card-bar-original{font-size:1rem;line-height:1.5rem;--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1));text-decoration-line:line-through}.s-cart-summary-card-bar-savings-badge{display:inline-flex;width:max-content;align-items:center;gap:0.25rem;border-radius:var(--s-radius, 0.25rem);--tw-bg-opacity:1;background-color:rgb(239 251 246 / var(--tw-bg-opacity, 1));padding-left:0.5rem;padding-right:0.5rem;padding-top:0.125rem;padding-bottom:0.125rem;font-size:11px;font-weight:600;--tw-text-opacity:1;color:rgb(22 163 74 / var(--tw-text-opacity, 1))}.s-cart-summary-card-chevron{display:inline-flex;height:1.5rem;width:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-width:0px;background-color:transparent;--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1));outline:2px solid transparent;outline-offset:2px}.s-cart-summary-card-chevron-icon{display:inline-flex;transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.s-cart-summary-card{display:block;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}@media (max-width: 1023px){.s-cart-summary-card{position:fixed;inset-inline:0;bottom:0;z-index:1;border-radius:24px 24px 0 0;box-shadow:0 -12px 24px -12px rgba(0, 0, 0, 0.12);transition:box-shadow 0.3s ease;padding-bottom:calc(env(safe-area-inset-bottom) + 0.5rem)}}@media (min-width: 1024px){.s-cart-summary-card{position:relative;border-radius:0.5rem;box-shadow:0 2px 6px rgba(0, 0, 0, 0.05);padding:1.25rem 1.5rem;margin-bottom:1.25rem}}@media (max-width: 1023px){.s-cart-summary-card--open{border-radius:0;box-shadow:none}}.s-cart-summary-card-sheet-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.4s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.3s ease}@media (max-width: 1023px){.s-cart-summary-card-sheet-wrap{position:absolute;inset-inline:0;bottom:calc(100% - 1px);background:#fff;border-radius:24px 24px 0 0;overflow:hidden;box-shadow:0 -12px 24px -12px rgba(0, 0, 0, 0)}}@media (min-width: 1024px){.s-cart-summary-card-sheet-wrap{grid-template-rows:1fr}}@media (max-width: 1023px){.s-cart-summary-card-sheet-wrap--open{grid-template-rows:1fr;box-shadow:0 -12px 24px -12px rgba(0, 0, 0, 0.12)}}.s-cart-summary-card-sheet{min-height:0;overflow:hidden}@media (max-width: 1023px){.s-cart-summary-card-sheet-wrap--open .s-cart-summary-card-sheet{overflow-y:auto;max-height:70vh;-webkit-overflow-scrolling:touch;padding:0.75rem 1rem 0}}.s-cart-summary-card-sheet-header{display:flex;align-items:center;justify-content:space-between;gap:0.5rem}@media (max-width: 1023px){.s-cart-summary-card-sheet-header{padding-bottom:0.5rem}}.s-cart-summary-card-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:0.75rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}@media (min-width: 1024px){.s-cart-summary-card-bar{margin-top:1rem}}@media (max-width: 1023px){.s-cart-summary-card-bar{padding:0.875rem 1rem 0.5rem;border-radius:24px 24px 0 0}.s-cart-summary-card--open .s-cart-summary-card-bar{padding-top:0;border-radius:0}}@media (min-width: 1024px){.s-cart-summary-card-action{padding-top:1rem}}@media (max-width: 1023px){.s-cart-summary-card-action{padding:0 1rem 0.75rem}}.s-cart-summary-card--open .s-cart-summary-card-chevron-icon{transform:rotate(180deg)}.s-cart-summary-card-action *:focus{outline:none}";
 
 const SKELETON_ROWS = [
     { label: '100px', value: '56px' },
@@ -24,6 +25,8 @@ const SallaCartSummaryCard$1 = /*@__PURE__*/ proxyCustomElement(class SallaCartS
         this.cartCashbackAmount = 0;
         this.cartSubTotal = 0;
         this.cartOptionsTotal = 0;
+        /* From cart.service_fees[] — charged amount plus optional min/max for the tip. */
+        this.cartServiceFees = [];
         this.cartShippingCost = 0;
         this.cartTaxAmount = 0;
         this.cartHasShipping = false;
@@ -31,6 +34,24 @@ const SallaCartSummaryCard$1 = /*@__PURE__*/ proxyCustomElement(class SallaCartS
         this.isDesktop = false;
         /** True until the first cart payload (API response or cart event) arrives. */
         this.isLoading = true;
+        /* Viewport coords — fixed tip escapes the sheet's overflow:hidden. */
+        this.feeTip = null;
+        this.showFeeTip = (key, event) => {
+            const wrap = event.currentTarget;
+            if (!wrap)
+                return;
+            const rect = wrap.getBoundingClientRect();
+            this.feeTip = {
+                key,
+                top: Math.round(rect.bottom + 8),
+                left: this.clampFeeTipLeft(rect.left + rect.width / 2),
+            };
+            this.bindFeeTipDismiss();
+        };
+        this.hideFeeTip = () => {
+            this.feeTip = null;
+            this.unbindFeeTipDismiss();
+        };
         // Original DOM location — needed to restore the host on the mobile→desktop flip.
         this.originalParent = null;
         this.originalNextSibling = null;
@@ -38,6 +59,7 @@ const SallaCartSummaryCard$1 = /*@__PURE__*/ proxyCustomElement(class SallaCartS
         this.mediaQueryList = null;
         this.submitObserver = null;
         this.isSubmitting = false;
+        this.feeTipDismissBound = false;
         // Stable handler refs — anonymous functions can't be unbound from listeners.
         this.mqlChangeHandler = (e) => {
             this.isDesktop = e.matches;
@@ -63,8 +85,11 @@ const SallaCartSummaryCard$1 = /*@__PURE__*/ proxyCustomElement(class SallaCartS
             this.host.querySelector('#s-cart-summary-card-submit')?.removeAttribute?.('loading');
         };
         this.toggleSheet = () => {
-            if (!this.isDesktop)
-                this.isOpen = !this.isOpen;
+            if (this.isDesktop)
+                return;
+            this.isOpen = !this.isOpen;
+            if (!this.isOpen)
+                this.hideFeeTip();
         };
         this.handleSubmit = async (event) => {
             // Re-entrancy guard, set before the async validation so a second tap during
@@ -139,6 +164,8 @@ const SallaCartSummaryCard$1 = /*@__PURE__*/ proxyCustomElement(class SallaCartS
         this.completeOrderLabel = salla.lang.get('pages.cart.complete_order');
         this.openSummaryLabel = salla.lang.get('pages.cart.open_summary');
         this.closeSummaryLabel = salla.lang.get('pages.cart.close_summary');
+        this.minimumLabel = salla.lang.get('pages.cart.minimum');
+        this.maximumLabel = salla.lang.get('pages.cart.up_to');
         this.itemsCountTemplate = salla.lang.get('pages.cart.items_with_count');
     }
     /** Coerces PHP cart values: numbers, strings, and Money/MoneyTaxable objects. */
@@ -159,6 +186,86 @@ const SallaCartSummaryCard$1 = /*@__PURE__*/ proxyCustomElement(class SallaCartS
         }
         return 0;
     }
+    /* BE uses null for “no bound”; treat 0 the same so the tip never shows a useless zero. */
+    optionalBound(value) {
+        if (value === null || value === undefined || value === '')
+            return null;
+        const amount = this.num(value);
+        return Number.isFinite(amount) && amount > 0 ? amount : null;
+    }
+    mapServiceFees(fees) {
+        return fees.flatMap((fee, index) => {
+            const title = String(fee?.title ?? '').trim();
+            const amount = this.num(fee?.amount);
+            if (!title || amount <= 0)
+                return [];
+            return [
+                {
+                    key: String(index),
+                    title,
+                    amount,
+                    minAmount: this.optionalBound(fee?.min_amount ?? fee?.min_service_amount),
+                    maxAmount: this.optionalBound(fee?.max_amount ?? fee?.max_service_amount),
+                },
+            ];
+        });
+    }
+    /* Strip HTML for tip text; keep SAR when the theme renders it as <i class="sicon-sar">. */
+    plainMoney(value) {
+        return this.money(value)
+            .replace(/<i[^>]*sicon-sar[^>]*>.*?<\/i>/gi, ' SAR')
+            .replace(/<[^>]+>/g, '')
+            .replace(/\s+/g, ' ')
+            .trim();
+    }
+    serviceFeeBoundLines(fee) {
+        const lines = [];
+        if (fee.minAmount !== null)
+            lines.push({ label: this.minimumLabel, amount: fee.minAmount });
+        if (fee.maxAmount !== null)
+            lines.push({ label: this.maximumLabel, amount: fee.maxAmount });
+        return lines;
+    }
+    /* Bubble is centered with translateX(-50%); keep that center inside the viewport. */
+    clampFeeTipLeft(centerX) {
+        const margin = 12;
+        const tipWidth = Math.min(220, Math.max(132, window.innerWidth - margin * 2));
+        const half = tipWidth / 2;
+        const min = margin + half;
+        const max = window.innerWidth - margin - half;
+        if (max <= min)
+            return Math.round(window.innerWidth / 2);
+        return Math.round(Math.min(Math.max(centerX, min), max));
+    }
+    bindFeeTipDismiss() {
+        if (this.feeTipDismissBound)
+            return;
+        window.addEventListener('scroll', this.hideFeeTip, true);
+        window.addEventListener('resize', this.hideFeeTip);
+        this.feeTipDismissBound = true;
+    }
+    unbindFeeTipDismiss() {
+        if (!this.feeTipDismissBound)
+            return;
+        window.removeEventListener('scroll', this.hideFeeTip, true);
+        window.removeEventListener('resize', this.hideFeeTip);
+        this.feeTipDismissBound = false;
+    }
+    renderServiceFeeBoundsTip(fee) {
+        const lines = this.serviceFeeBoundLines(fee);
+        if (!lines.length)
+            return null;
+        return (h("span", { class: "s-cart-summary-card-fee-tip-wrap", onMouseEnter: event => this.showFeeTip(fee.key, event), onMouseLeave: this.hideFeeTip }, h("button", { type: "button", class: "s-cart-summary-card-fee-tip", "aria-label": lines.map(line => `${line.label}: ${this.plainMoney(line.amount)}`).join(', '), innerHTML: InfoIcon, onFocus: event => this.showFeeTip(fee.key, event), onBlur: this.hideFeeTip })));
+    }
+    renderFixedFeeTipBubble() {
+        if (!this.feeTip)
+            return null;
+        const fee = this.cartServiceFees.find(item => item.key === this.feeTip.key);
+        const lines = fee ? this.serviceFeeBoundLines(fee) : [];
+        if (!lines.length)
+            return null;
+        return (h("span", { class: "s-cart-summary-card-fee-tip-bubble", role: "tooltip", style: { top: `${this.feeTip.top}px`, left: `${this.feeTip.left}px` } }, lines.map(line => (h("span", { class: "s-cart-summary-card-fee-tip-line", key: line.label }, h("span", { class: "s-cart-summary-card-fee-tip-line-label" }, line.label), h("span", { class: "s-cart-summary-card-fee-tip-line-value" }, this.plainMoney(line.amount)))))));
+    }
     // Desktop cutoff — must match the SCSS media queries so JS and CSS never diverge.
     breakpointPx() {
         return 1024;
@@ -238,6 +345,7 @@ const SallaCartSummaryCard$1 = /*@__PURE__*/ proxyCustomElement(class SallaCartS
                 this.mediaQueryList?.removeListener(this.mqlChangeHandler);
             }
             this.mediaQueryList = null;
+            this.unbindFeeTipDismiss();
             this.cartEventNames.forEach(name => salla.event.off(name, this.cartEventHandler));
             salla.event.off('cart::submit.failed', this.releaseSubmitLoading);
         });
@@ -313,6 +421,13 @@ const SallaCartSummaryCard$1 = /*@__PURE__*/ proxyCustomElement(class SallaCartS
             this.cartOptionsTotal = this.num(data.options_total);
         if (data.tax_amount !== undefined)
             this.cartTaxAmount = this.num(data.tax_amount);
+        /* Same retractability as cashback — cached/metadata payloads must not wipe live fees. */
+        if (Array.isArray(data.service_fees)) {
+            this.cartServiceFees = this.mapServiceFees(data.service_fees);
+        }
+        else if (recomputedTotals) {
+            this.cartServiceFees = [];
+        }
         // Shipping cost (free-shipping aware): prefer `shipping_cost`, else `real_shipping_cost`.
         const hasFreeShipping = !!data.free_shipping_bar?.has_free_shipping;
         if (data.shipping_cost !== undefined)
@@ -392,7 +507,7 @@ const SallaCartSummaryCard$1 = /*@__PURE__*/ proxyCustomElement(class SallaCartS
             } }, h("div", { class: {
                 's-cart-summary-card-sheet-wrap': true,
                 's-cart-summary-card-sheet-wrap--open': this.isOpen,
-            }, "aria-hidden": this.isOpen ? 'false' : 'true' }, h("div", { class: "s-cart-summary-card-sheet", style: sheetStyle }, h("header", { class: "s-cart-summary-card-sheet-header" }, h("h3", { class: "s-cart-summary-card-sheet-title" }, this.summaryLabel)), h("div", { class: "s-cart-summary-card-line" }, h("span", null, subTotalLabel), h("b", { innerHTML: this.money(this.cartSubTotal) })), this.cartOptionsTotal > 0 && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.optionsTotalLabel), h("b", { innerHTML: this.money(this.cartOptionsTotal) }))), this.cartHasShipping && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.shippingCostLabel), h("b", { innerHTML: this.money(this.cartShippingCost) }))), this.cartTaxAmount > 0 && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.vatTaxLabel), h("b", { innerHTML: this.money(this.cartTaxAmount) }))), showSavings && (h("div", { class: "s-cart-summary-card-line s-cart-summary-card-line--discount" }, h("span", null, this.savedLabel), h("b", null, "\u2212 ", h("span", { innerHTML: this.money(this.cartTotalDiscount) })))))), h("div", { class: "s-cart-summary-card-bar" }, h("div", { class: "s-cart-summary-card-bar-label" }, h("div", { class: "s-cart-summary-card-bar-label-main" }, h("span", { class: "s-cart-summary-card-bar-label-text" }, this.finalTotalLabel), h("span", { class: "s-cart-summary-card-bar-count" }, this.getItemsLabel())), this.cartTaxAmount > 0 && (h("div", { class: "s-cart-summary-card-bar-label-sub" }, this.pricesTaxedLabel))), h("div", { class: "s-cart-summary-card-bar-totals" }, h("div", { class: "s-cart-summary-card-bar-totals-row" }, showSavings && (h("s", { class: "s-cart-summary-card-bar-original" }, salla.helpers.number(this.roundToCurrency(this.cartTotal + this.cartTotalDiscount)))), h("b", { class: "s-cart-summary-card-bar-total", innerHTML: this.money(this.cartTotal) }), !this.isDesktop && (h("button", { type: "button", class: "s-cart-summary-card-chevron", "aria-label": this.isOpen ? this.closeSummaryLabel : this.openSummaryLabel, "aria-expanded": this.isOpen ? 'true' : 'false', onClick: this.toggleSheet }, h("i", { class: "sicon-keyboard_arrow_up s-cart-summary-card-chevron-icon" })))), (showSavings || showCashback) && (h("div", { class: "s-cart-summary-card-bar-savings-badge" }, h("span", { "aria-hidden": "true" }, "\uD83C\uDF89"), h("span", null, showSavings && (h("span", null, this.discountBadge, " ", h("span", { innerHTML: this.money(this.cartTotalDiscount) }))), showSavings && showCashback && ' + ', showCashback && (h("span", null, h("span", { innerHTML: this.money(this.cartCashbackAmount) }), " ", this.cashbackLabel))))))), h("div", { class: "s-cart-summary-card-action" }, h("salla-button", { id: "s-cart-summary-card-submit", width: "wide", "loader-position": "center", onClick: this.handleSubmit }, this.completeOrderLabel))));
+            }, "aria-hidden": this.isOpen ? 'false' : 'true' }, h("div", { class: "s-cart-summary-card-sheet", style: sheetStyle }, h("header", { class: "s-cart-summary-card-sheet-header" }, h("h3", { class: "s-cart-summary-card-sheet-title" }, this.summaryLabel)), h("div", { class: "s-cart-summary-card-line" }, h("span", null, subTotalLabel), h("b", { innerHTML: this.money(this.cartSubTotal) })), this.cartOptionsTotal > 0 && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.optionsTotalLabel), h("b", { innerHTML: this.money(this.cartOptionsTotal) }))), this.cartServiceFees.map(fee => (h("div", { class: "s-cart-summary-card-line", key: fee.key }, h("span", { class: "s-cart-summary-card-fee-label" }, h("span", null, fee.title), this.renderServiceFeeBoundsTip(fee)), h("b", { innerHTML: this.money(fee.amount) })))), this.cartHasShipping && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.shippingCostLabel), h("b", { innerHTML: this.money(this.cartShippingCost) }))), this.cartTaxAmount > 0 && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.vatTaxLabel), h("b", { innerHTML: this.money(this.cartTaxAmount) }))), showSavings && (h("div", { class: "s-cart-summary-card-line s-cart-summary-card-line--discount" }, h("span", null, this.savedLabel), h("b", null, "\u2212 ", h("span", { innerHTML: this.money(this.cartTotalDiscount) })))))), h("div", { class: "s-cart-summary-card-bar" }, h("div", { class: "s-cart-summary-card-bar-label" }, h("div", { class: "s-cart-summary-card-bar-label-main" }, h("span", { class: "s-cart-summary-card-bar-label-text" }, this.finalTotalLabel), h("span", { class: "s-cart-summary-card-bar-count" }, this.getItemsLabel())), this.cartTaxAmount > 0 && (h("div", { class: "s-cart-summary-card-bar-label-sub" }, this.pricesTaxedLabel))), h("div", { class: "s-cart-summary-card-bar-totals" }, h("div", { class: "s-cart-summary-card-bar-totals-row" }, showSavings && (h("s", { class: "s-cart-summary-card-bar-original" }, salla.helpers.number(this.roundToCurrency(this.cartTotal + this.cartTotalDiscount)))), h("b", { class: "s-cart-summary-card-bar-total", innerHTML: this.money(this.cartTotal) }), !this.isDesktop && (h("button", { type: "button", class: "s-cart-summary-card-chevron", "aria-label": this.isOpen ? this.closeSummaryLabel : this.openSummaryLabel, "aria-expanded": this.isOpen ? 'true' : 'false', onClick: this.toggleSheet }, h("i", { class: "sicon-keyboard_arrow_up s-cart-summary-card-chevron-icon" })))), (showSavings || showCashback) && (h("div", { class: "s-cart-summary-card-bar-savings-badge" }, h("span", { "aria-hidden": "true" }, "\uD83C\uDF89"), h("span", null, showSavings && (h("span", null, this.discountBadge, " ", h("span", { innerHTML: this.money(this.cartTotalDiscount) }))), showSavings && showCashback && ' + ', showCashback && (h("span", null, h("span", { innerHTML: this.money(this.cartCashbackAmount) }), " ", this.cashbackLabel))))))), h("div", { class: "s-cart-summary-card-action" }, h("salla-button", { id: "s-cart-summary-card-submit", width: "wide", "loader-position": "center", onClick: this.handleSubmit }, this.completeOrderLabel)), this.renderFixedFeeTipBubble()));
     }
     get host() { return this; }
     static get style() { return sallaCartSummaryCardCss; }
@@ -404,6 +519,7 @@ const SallaCartSummaryCard$1 = /*@__PURE__*/ proxyCustomElement(class SallaCartS
         "cartCashbackAmount": [32],
         "cartSubTotal": [32],
         "cartOptionsTotal": [32],
+        "cartServiceFees": [32],
         "cartShippingCost": [32],
         "cartTaxAmount": [32],
         "cartHasShipping": [32],
@@ -424,7 +540,10 @@ const SallaCartSummaryCard$1 = /*@__PURE__*/ proxyCustomElement(class SallaCartS
         "completeOrderLabel": [32],
         "openSummaryLabel": [32],
         "closeSummaryLabel": [32],
-        "itemsCountTemplate": [32]
+        "minimumLabel": [32],
+        "maximumLabel": [32],
+        "itemsCountTemplate": [32],
+        "feeTip": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/salla-order-totals-card.js

@@ -3,7 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const sallaOrderTotalsCardCss = "/*!twlt*/:host{display:block}.s-order-totals-card-wrapper{display:block}.s-order-totals-card-panel{border-radius:0.375rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-left:1.5rem;padding-right:1.5rem}.s-order-totals-card-heading{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.s-order-totals-card-flow{display:flow-root}.s-order-totals-card-list{font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.s-order-totals-card-list>.s-order-totals-card-row{border-bottom-width:1px}.s-order-totals-card-list>.s-order-totals-card-row:last-child{border-bottom-width:0px}.s-order-totals-card-row{display:block}.s-order-totals-card-row-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1.25rem;padding-bottom:1.25rem}.s-order-totals-card-label{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.s-order-totals-card-value{font-weight:500}.s-order-totals-card-discount{--tw-text-opacity:1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.s-order-totals-card-tax-value{font-weight:500;--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.s-order-totals-card-total{margin-left:-1.5rem;margin-right:-1.5rem;border-radius:0.375rem;background-color:var(--color-border);padding-left:1.5rem;padding-right:1.5rem}.s-order-totals-card-total-label{font-size:1rem;line-height:1.5rem;font-weight:500}.s-order-totals-card-total-value{font-size:1rem;line-height:1.5rem;font-weight:500}.s-order-totals-card-refund{margin-left:-1.5rem;margin-right:-1.5rem;border-left-width:4px;--tw-border-opacity:1;border-color:rgb(254 202 202 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1));padding-left:1.5rem;padding-right:1.5rem}.s-order-totals-card-refund:where([dir=\"rtl\"],[dir=\"rtl\"] *){border-left-width:0px;border-right-width:4px}.s-order-totals-card-refund-label{display:flex;align-items:center;gap:0.5rem;--tw-text-opacity:1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.s-order-totals-card-refund-icon{font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.s-order-totals-card-refund-value{font-weight:500;--tw-text-opacity:1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}";
+const sallaOrderTotalsCardCss = "/*!twlt*/:host{display:block}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.s-order-totals-card-wrapper{display:block}.s-order-totals-card-panel{border-radius:0.375rem;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding-left:1.5rem;padding-right:1.5rem}.s-order-totals-card-heading{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.s-order-totals-card-flow{display:flow-root}.s-order-totals-card-list{font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.s-order-totals-card-list>.s-order-totals-card-row{border-bottom-width:1px}.s-order-totals-card-list>.s-order-totals-card-row:last-child{border-bottom-width:0px}.s-order-totals-card-row{display:block}.s-order-totals-card-row-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1.25rem;padding-bottom:1.25rem}.s-order-totals-card-label{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.s-order-totals-card-value{font-weight:500}.s-order-totals-card-discount{--tw-text-opacity:1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.s-order-totals-card-tax-value{font-weight:500;--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.s-order-totals-card-total{margin-left:-1.5rem;margin-right:-1.5rem;border-radius:0.375rem;background-color:var(--color-border);padding-left:1.5rem;padding-right:1.5rem}.s-order-totals-card-total-label{font-size:1rem;line-height:1.5rem;font-weight:500}.s-order-totals-card-total-value{font-size:1rem;line-height:1.5rem;font-weight:500}.s-order-totals-card-refund{margin-left:-1.5rem;margin-right:-1.5rem;border-left-width:4px;--tw-border-opacity:1;border-color:rgb(254 202 202 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1));padding-left:1.5rem;padding-right:1.5rem}.s-order-totals-card-refund:where([dir=\"rtl\"],[dir=\"rtl\"] *){border-left-width:0px;border-right-width:4px}.s-order-totals-card-refund-label{display:flex;align-items:center;gap:0.5rem;--tw-text-opacity:1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.s-order-totals-card-refund-icon{font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.s-order-totals-card-refund-value{font-weight:500;--tw-text-opacity:1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}";
 
 const SallaOrderTotalsCard$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderTotalsCard extends HTMLElement {
     constructor() {
@@ -44,6 +44,7 @@ const SallaOrderTotalsCard$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrder
             refund_amount: parsed.refund_amount,
             options: parsed.options,
             options_total: parsed.options_total,
+            service_fees: Array.isArray(parsed.service_fees) ? parsed.service_fees : undefined,
             tax: parsed.tax
                 ? {
                     percent: typeof parsed.tax.percent === 'string' ? parseFloat(parsed.tax.percent) : parsed.tax.percent,
@@ -67,7 +68,10 @@ const SallaOrderTotalsCard$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrder
     }
     setSummaryFromOrder(value) {
         try {
-            const parsedValue = typeof value === 'string' ? JSON.parse(value) : value;
+            const parsedValue = typeof value === 'string' ? JSON.parse(value) : { ...value };
+            if (!Array.isArray(parsedValue.service_fees)) {
+                delete parsedValue.service_fees;
+            }
             this.summary = parsedValue;
         }
         catch (error) {
@@ -84,9 +88,26 @@ const SallaOrderTotalsCard$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrder
     renderRefundRow(amount) {
         return (h("div", { class: "s-order-totals-card-row" }, h("div", { class: "s-order-totals-card-row-inner" }, h("dt", { class: "s-order-totals-card-refund-label" }, h("span", { class: "s-order-totals-card-refund-icon" }, h("i", { class: "sicon-info" })), h("span", null, " ", salla.lang.get('pages.orders.refund_amount'))), h("dd", { class: "s-order-totals-card-refund-value" }, h("b", { innerHTML: salla.money(amount) })))));
     }
-    /** Totals arrive either as a money object or a plain float, depending on the presenter. */
+    /* Totals arrive as a money object, plain number, or numeric string depending on the presenter. */
     toAmount(value) {
-        return (typeof value === 'number' ? value : value?.amount) || 0;
+        if (value === null || value === undefined)
+            return 0;
+        if (typeof value === 'number')
+            return Number.isFinite(value) ? value : 0;
+        if (typeof value === 'string')
+            return parseFloat(value) || 0;
+        return this.toAmount(value.amount);
+    }
+    isChargeableServiceFee(fee) {
+        return String(fee?.title ?? '').trim().length > 0 && this.toAmount(fee?.amount) > 0;
+    }
+    renderServiceFeeRows() {
+        const fees = this.summary?.service_fees;
+        if (!Array.isArray(fees))
+            return null;
+        return fees
+            .filter(fee => this.isChargeableServiceFee(fee))
+            .map(fee => this.renderTotalRow(String(fee.title).trim(), fee.amount));
     }
     render() {
         if (!this.summary) {
@@ -98,7 +119,7 @@ const SallaOrderTotalsCard$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrder
         // Independent of the refund: a partially refunded order can still owe a balance.
         const isPartiallyPaid = summary.has_remaining_amount ?? this.toAmount(summary.remaining_amount) > 0;
         return (h(Host, { class: "s-order-totals-card-wrapper" }, h("div", { class: "s-order-totals-card-panel" }, h("h2", { id: "summary-heading", class: "s-order-totals-card-heading" }, salla.lang.get('pages.orders.summary')), h("div", { class: "s-order-totals-card-flow" }, h("dl", { class: "s-order-totals-card-list" }, this.renderTotalRow(salla.lang.get('pages.cart.items_total'), summary.sub_total), hasOptions &&
-            this.renderTotalRow(salla.lang.get('pages.cart.order_options_total'), summary.options_total), summary.discounts && this.renderDiscountRow(), summary.cod_cost &&
+            this.renderTotalRow(salla.lang.get('pages.cart.order_options_total'), summary.options_total), this.renderServiceFeeRows(), summary.discounts && this.renderDiscountRow(), summary.cod_cost &&
             this.renderTotalRow(salla.lang.get('pages.orders.cod_cost'), summary.cod_cost, ''), summary.shipping_cost &&
             this.renderTotalRow(salla.lang.get('pages.orders.shipping_cost'), summary.shipping_cost, 's-order-totals-card-shipping'), summary.tax &&
             this.renderTotalRow(`${salla.lang.get('pages.cart.tax')} ${summary.tax.percent}%`, summary.tax.amount, ''), isPartiallyPaid && summary.paid_amount != null

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-11-03T09:08:49",
+  "timestamp": "2026-11-03T09:42:26",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.35.1",
@@ -31269,8 +31269,8 @@
       "path": "src/components/salla-order-shipments/interfaces.ts"
     },
     "src/components/salla-order-totals-card/interfaces.ts::Amounts": {
-      "declaration": "export interface Amounts {\n  sub_total?: Total;\n  shipping_cost?: Total;\n  cash_on_delivery?: Total;\n  tax?: AmountsTax;\n  discounts?: AmountsDiscount[];\n  total?: Total;\n  paid_amount?: Total;\n  remaining_amount?: Total;\n  refund_amount?: Total;\n}",
-      "docstring": "Amounts prop shape (from theme's Moneys interface)",
+      "declaration": "export interface Amounts {\n  sub_total?: Total;\n  shipping_cost?: Total;\n  cash_on_delivery?: Total;\n  tax?: AmountsTax;\n  discounts?: AmountsDiscount[];\n  service_fees?: ServiceFee[];\n  total?: Total;\n  paid_amount?: Total;\n  remaining_amount?: Total;\n  refund_amount?: Total;\n}",
+      "docstring": "Amounts prop shape (from theme's Moneys interface).",
       "path": "src/components/salla-order-totals-card/interfaces.ts"
     },
     "src/components/salla-orders/interface.ts::Order": {

package/dist/esm/{Helper-DmnUAusv.js → Helper-CFEqaSN-.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import './index-ze9e0dxM.js';
+import './index-g-_4am8C.js';
 
 var FilterOptionTypes;
 (function (FilterOptionTypes) {

package/dist/esm/{filepond-DZbzdjkK.js → filepond-BfW_OXid.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-ze9e0dxM.js';
+import { d as getDefaultExportFromCjs } from './index-g-_4am8C.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-poster-D9cjvoj-.js → filepond-plugin-file-poster-CsMiL-wZ.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-ze9e0dxM.js';
+import { d as getDefaultExportFromCjs } from './index-g-_4am8C.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-validate-size-D-kjllC-.js → filepond-plugin-file-validate-size-BuxVUFKn.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-ze9e0dxM.js';
+import { d as getDefaultExportFromCjs } from './index-g-_4am8C.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-validate-type-D9hsNaJl.js → filepond-plugin-file-validate-type-Dq94isoe.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-ze9e0dxM.js';
+import { d as getDefaultExportFromCjs } from './index-g-_4am8C.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-edit-CDHAxJY8.js → filepond-plugin-image-edit-CEVstXlA.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-ze9e0dxM.js';
+import { d as getDefaultExportFromCjs } from './index-g-_4am8C.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-exif-orientation-BGKiclwK.js → filepond-plugin-image-exif-orientation-BhViRs-X.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-ze9e0dxM.js';
+import { d as getDefaultExportFromCjs } from './index-g-_4am8C.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-preview-BUjvnt8G.js → filepond-plugin-image-preview-BrscXNqJ.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-ze9e0dxM.js';
+import { d as getDefaultExportFromCjs } from './index-g-_4am8C.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {