@ticketlayer/elements 0.3.3 → 0.4.0

package/dist/cjs/tl-order-confirmation.cjs.entry.js

@@ -1,10 +1,11 @@
 'use strict';
 
-var index = require('./index-BpfoKd9Q.js');
+var index = require('./index-I9CoYv3k.js');
 var sdkConnector = require('./sdk-connector-ClDF3013.js');
-var orderSummary = require('./order-summary-ZMkJ5bez.js');
+var orderSummary = require('./order-summary-X3TlZxc2.js');
+require('./money-BtmM2gt-.js');
 
-const tlOrderConfirmationCss = () => `:host{display:block;font-family:var(--tl-font-family, system-ui, sans-serif);color:var(--tl-foreground, #111827)}.confirmation{text-align:center}.check{width:4rem;height:4rem;margin:0 auto var(--tl-spacing-4, 1rem);display:flex;align-items:center;justify-content:center;border-radius:9999px;background:var(--tl-success, #10b981);color:var(--tl-success-foreground, #ffffff)}.check svg{width:2rem;height:2rem}.title{margin:0 0 var(--tl-spacing-2, 0.5rem);font-size:1.875rem;font-weight:700;line-height:1.2}.lead{margin:0 0 var(--tl-spacing-6, 1.5rem);color:var(--tl-muted-foreground, #6b7280)}.error{margin:0 0 var(--tl-spacing-6, 1.5rem);font-size:0.875rem;color:var(--tl-error, #ef4444)}.summary{text-align:left;padding:var(--tl-spacing-6, 1.5rem);margin-bottom:var(--tl-spacing-6, 1.5rem);background:var(--tl-muted, #f9fafb);border:1px solid var(--tl-border, #e5e7eb);border-radius:var(--tl-radius-lg, 0.75rem)}.rows{display:grid;gap:var(--tl-spacing-2, 0.5rem);margin:0 0 var(--tl-spacing-4, 1rem);padding:0 0 var(--tl-spacing-4, 1rem);border-bottom:1px solid var(--tl-border, #e5e7eb)}.row{display:flex;justify-content:space-between;gap:var(--tl-spacing-4, 1rem);font-size:0.875rem}.row dt{color:var(--tl-muted-foreground, #6b7280)}.row dd{margin:0;text-align:right;overflow-wrap:anywhere}.reference{font-family:var(--tl-font-family-mono, ui-monospace, monospace);font-weight:600}.lines{list-style:none;margin:0;padding:0;display:grid;gap:var(--tl-spacing-2, 0.5rem)}.line{display:flex;justify-content:space-between;gap:var(--tl-spacing-4, 1rem);font-size:0.875rem}.totals{margin-top:var(--tl-spacing-3, 0.75rem);padding-top:var(--tl-spacing-3, 0.75rem);border-top:1px solid var(--tl-border, #e5e7eb);display:grid;gap:var(--tl-spacing-1, 0.25rem);font-size:0.875rem}.total-row{display:flex;justify-content:space-between;color:var(--tl-muted-foreground, #6b7280)}.total-row.discount{color:var(--tl-success, #10b981)}.total-row.total{margin-top:var(--tl-spacing-1, 0.25rem);font-size:1rem;font-weight:600;color:var(--tl-foreground, #111827)}.tickets{text-align:left}.subtitle{margin:0 0 var(--tl-spacing-4, 1rem);font-size:1.125rem;font-weight:600}.hint{margin:var(--tl-spacing-3, 0.75rem) 0 0;font-size:0.75rem;color:var(--tl-muted-foreground, #6b7280)}.skeleton-line,.skeleton-block{background:var(--tl-secondary, #f3f4f6);border-radius:var(--tl-radius-md, 0.5rem);animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;margin:0 auto var(--tl-spacing-3, 0.75rem)}.skeleton-line{height:1rem}.skeleton-line.short{width:40%;height:1.75rem}.skeleton-line.long{width:70%}.skeleton-block{height:8rem}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}`;
+const tlOrderConfirmationCss = () => `:host{display:block;font-family:var(--tl-font-family);color:var(--tl-foreground)}.confirmation{text-align:center}.check{width:4rem;height:4rem;margin:0 auto var(--tl-spacing-4);display:flex;align-items:center;justify-content:center;border-radius:9999px;background:var(--tl-success);color:var(--tl-success-foreground)}.check svg{width:2rem;height:2rem}.title{margin:0 0 var(--tl-spacing-2);font-size:1.875rem;font-weight:700;line-height:1.2}.lead{margin:0 0 var(--tl-spacing-6);color:var(--tl-muted-foreground)}.error{margin:0 0 var(--tl-spacing-6);font-size:0.875rem;color:var(--tl-error)}.summary{text-align:left;padding:var(--tl-spacing-6);margin-bottom:var(--tl-spacing-6);background:var(--tl-muted);border:1px solid var(--tl-border);border-radius:var(--tl-radius-lg)}.rows{display:grid;gap:var(--tl-spacing-2);margin:0 0 var(--tl-spacing-4);padding:0 0 var(--tl-spacing-4);border-bottom:1px solid var(--tl-border)}.row{display:flex;justify-content:space-between;gap:var(--tl-spacing-4);font-size:0.875rem}.row dt{color:var(--tl-muted-foreground)}.row dd{margin:0;text-align:right;overflow-wrap:anywhere}.reference{font-family:var(--tl-font-family-mono);font-weight:600}.lines{list-style:none;margin:0;padding:0;display:grid;gap:var(--tl-spacing-2)}.line{display:flex;justify-content:space-between;gap:var(--tl-spacing-4);font-size:0.875rem}.totals{margin-top:var(--tl-spacing-3);padding-top:var(--tl-spacing-3);border-top:1px solid var(--tl-border);display:grid;gap:var(--tl-spacing-1);font-size:0.875rem}.total-row{display:flex;justify-content:space-between;color:var(--tl-muted-foreground)}.total-row.discount{color:var(--tl-success)}.total-row.total{margin-top:var(--tl-spacing-1);font-size:1rem;font-weight:600;color:var(--tl-foreground)}.tickets{text-align:left}.subtitle{margin:0 0 var(--tl-spacing-4);font-size:1.125rem;font-weight:600}.hint{margin:var(--tl-spacing-3) 0 0;font-size:0.75rem;color:var(--tl-muted-foreground)}.skeleton-line,.skeleton-block{background:var(--tl-secondary);border-radius:var(--tl-radius-md);animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;margin:0 auto var(--tl-spacing-3)}.skeleton-line{height:1rem}.skeleton-line.short{width:40%;height:1.75rem}.skeleton-line.long{width:70%}.skeleton-block{height:8rem}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}`;
 
 const TlOrderConfirmation = class {
     constructor(hostRef) {
@@ -111,12 +112,14 @@ const TlOrderConfirmation = class {
         const startsAt = this.occurrence?.startsAt;
         return (index.h("dl", { class: "rows" }, index.h("div", { class: "row" }, index.h("dt", null, "Order reference"), index.h("dd", { class: "reference" }, order.orderNumber)), email && (index.h("div", { class: "row" }, index.h("dt", null, "Email"), index.h("dd", null, email))), eventName && (index.h("div", { class: "row" }, index.h("dt", null, "Event"), index.h("dd", null, eventName))), startsAt && (index.h("div", { class: "row" }, index.h("dt", null, "Date"), index.h("dd", null, orderSummary.formatDateTime(startsAt))))));
     }
+    // Money comes from orderTotals: the booking fee is its own row named after
+    // the channel's fee profile, the subtotal is the ticket lines alone (the
+    // order's own `subtotal` folds the fee line into it) and the total is the
+    // order's figure, so what is shown is what was charged.
     renderTotals(order) {
-        const c = order.currency || 'GBP';
-        const fees = Number(order.totalFees) || 0;
-        const tax = Number(order.totalTax) || 0;
-        const discounts = Number(order.totalDiscounts) || 0;
-        return (index.h("div", { class: "totals" }, index.h("div", { class: "total-row" }, index.h("span", null, "Subtotal"), index.h("span", null, orderSummary.formatPrice(order.subtotal, c))), fees > 0 && (index.h("div", { class: "total-row" }, index.h("span", null, "Fees"), index.h("span", null, orderSummary.formatPrice(order.totalFees, c)))), tax > 0 && (index.h("div", { class: "total-row" }, index.h("span", null, "Tax"), index.h("span", null, orderSummary.formatPrice(order.totalTax, c)))), discounts > 0 && (index.h("div", { class: "total-row discount" }, index.h("span", null, "Discount"), index.h("span", null, "-", orderSummary.formatPrice(order.totalDiscounts, c)))), index.h("div", { class: "total-row total" }, index.h("span", null, "Total"), index.h("span", null, orderSummary.formatPrice(order.total, c)))));
+        const totals = orderSummary.orderTotals(order);
+        const c = totals.currency;
+        return (index.h("div", { class: "totals" }, index.h("div", { class: "total-row" }, index.h("span", null, "Subtotal"), index.h("span", null, orderSummary.formatPrice(totals.subtotal, c))), totals.showFee && (index.h("div", { class: "total-row fee" }, index.h("span", null, totals.feeLabel), index.h("span", null, orderSummary.formatPrice(totals.fees, c)))), totals.tax > 0 && (index.h("div", { class: "total-row" }, index.h("span", null, "Tax"), index.h("span", null, orderSummary.formatPrice(totals.tax, c)))), totals.discount > 0 && (index.h("div", { class: "total-row discount" }, index.h("span", null, "Discount"), index.h("span", null, "-", orderSummary.formatPrice(totals.discount, c)))), index.h("div", { class: "total-row total" }, index.h("span", null, "Total"), index.h("span", null, orderSummary.formatPrice(totals.total, c)))));
     }
     render() {
         if (this.paymentFailed) {

package/dist/cjs/tl-order-tickets_2.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-BpfoKd9Q.js');
+var index = require('./index-I9CoYv3k.js');
 var sdkConnector = require('./sdk-connector-ClDF3013.js');
 
-const tlOrderTicketsCss = () => `:host{display:block;font-family:var(--tl-font-family, system-ui, sans-serif)}.grid{display:grid;gap:var(--tl-spacing-4, 1rem);grid-template-columns:1fr}@media (min-width: 480px){.grid.cols-2{grid-template-columns:repeat(2, 1fr)}.grid.cols-3{grid-template-columns:repeat(3, 1fr)}}.state{padding:var(--tl-spacing-6, 1.5rem);text-align:center;color:var(--tl-muted-foreground, #6b7280);font-size:0.875rem}.state.error{color:var(--tl-error, #dc2626)}.state.issuing{display:flex;align-items:center;justify-content:center;gap:var(--tl-spacing-2, 0.5rem)}.spinner{width:0.875rem;height:0.875rem;border:2px solid var(--tl-border, #e5e7eb);border-top-color:var(--tl-primary, #6366f1);border-radius:50%;animation:tl-spin 0.7s linear infinite;flex:none}@keyframes tl-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.spinner{animation:none;border-top-color:var(--tl-border, #e5e7eb)}}`;
+const tlOrderTicketsCss = () => `:host{display:block;font-family:var(--tl-font-family)}.grid{display:grid;gap:var(--tl-spacing-4);grid-template-columns:1fr}@media (min-width: 480px){.grid.cols-2{grid-template-columns:repeat(2, 1fr)}.grid.cols-3{grid-template-columns:repeat(3, 1fr)}}.state{padding:var(--tl-spacing-6);text-align:center;color:var(--tl-muted-foreground);font-size:0.875rem}.state.error{color:var(--tl-error)}.state.issuing{display:flex;align-items:center;justify-content:center;gap:var(--tl-spacing-2)}.spinner{width:0.875rem;height:0.875rem;border:2px solid var(--tl-border);border-top-color:var(--tl-primary);border-radius:50%;animation:tl-spin 0.7s linear infinite;flex:none}@keyframes tl-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.spinner{animation:none;border-top-color:var(--tl-border)}}`;
 
 const TlOrderTickets = class {
     constructor(hostRef) {
@@ -3178,7 +3178,7 @@ function requireBrowser () {
 var browserExports = requireBrowser();
 var QRCode = /*@__PURE__*/getDefaultExportFromCjs(browserExports);
 
-const tlTicketCss = () => `:host{display:block;font-family:var(--tl-font-family, system-ui, sans-serif)}.ticket{border:1px solid var(--tl-border, #e5e7eb);border-radius:var(--tl-radius-lg, 0.75rem);background:var(--tl-card, #ffffff);padding:var(--tl-spacing-5, 1.25rem);text-align:center}.qr-wrap{position:relative;width:160px;height:160px;margin:0 auto}.qr{width:160px;height:160px}.qr svg{width:100%;height:100%;display:block}.qr.inactive{opacity:0.3}.stamp{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);padding:0.25rem 0.5rem;border-radius:var(--tl-radius-sm, 0.25rem);background:rgba(17, 24, 39, 0.85);color:#ffffff;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em}.name{margin:1rem 0 0;font-weight:600;color:var(--tl-foreground, #111827)}.meta{margin:0.125rem 0 0;font-size:0.875rem;color:var(--tl-muted-foreground, #6b7280)}.barcode{margin:0.25rem 0 0;font-family:ui-monospace, monospace;font-size:0.625rem;color:var(--tl-muted-foreground, #9ca3af);word-break:break-all}.download{margin-top:0.75rem;padding:0.375rem 0.75rem;border:1px solid var(--tl-border, #e5e7eb);border-radius:var(--tl-radius-md, 0.5rem);background:transparent;color:var(--tl-foreground, #111827);font-size:0.875rem;font-weight:500;cursor:pointer}.download:hover{background:var(--tl-muted, #f3f4f6)}.download:disabled{opacity:0.5;cursor:default}`;
+const tlTicketCss = () => `:host{display:block;font-family:var(--tl-font-family)}.ticket{border:1px solid var(--tl-border);border-radius:var(--tl-radius-lg);background:var(--tl-card);padding:var(--tl-spacing-5);text-align:center}.qr-wrap{position:relative;width:160px;height:160px;margin:0 auto}.qr{width:160px;height:160px}.qr svg{width:100%;height:100%;display:block}.qr.inactive{opacity:0.3}.stamp{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);padding:0.25rem 0.5rem;border-radius:var(--tl-radius-sm);background:rgba(17, 24, 39, 0.85);color:#ffffff;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em}.name{margin:1rem 0 0;font-weight:600;color:var(--tl-foreground)}.meta{margin:0.125rem 0 0;font-size:0.875rem;color:var(--tl-muted-foreground)}.barcode{margin:0.25rem 0 0;font-family:ui-monospace, monospace;font-size:0.625rem;color:var(--tl-muted-foreground);word-break:break-all}.download{margin-top:0.75rem;padding:0.375rem 0.75rem;border:1px solid var(--tl-border);border-radius:var(--tl-radius-md);background:transparent;color:var(--tl-foreground);font-size:0.875rem;font-weight:500;cursor:pointer}.download:hover{background:var(--tl-muted)}.download:disabled{opacity:0.5;cursor:default}`;
 
 const TlTicket = class {
     constructor(hostRef) {

package/dist/cjs/tl-promo-code.cjs.entry.js

@@ -1,10 +1,11 @@
 'use strict';
 
-var index = require('./index-BpfoKd9Q.js');
+var index = require('./index-I9CoYv3k.js');
 var sdkConnector = require('./sdk-connector-ClDF3013.js');
-var orderSummary = require('./order-summary-ZMkJ5bez.js');
+var orderSummary = require('./order-summary-X3TlZxc2.js');
+require('./money-BtmM2gt-.js');
 
-const tlPromoCodeCss = () => `:host{display:block;font-family:var(--tl-font-family, system-ui, sans-serif);color:var(--tl-foreground, #111827)}.field{display:flex;gap:var(--tl-spacing-2, 0.5rem)}.input{flex:1;min-width:0;padding:var(--tl-spacing-3, 0.75rem);font:inherit;font-size:0.875rem;color:var(--tl-foreground, #111827);background:var(--tl-background, #ffffff);border:1px solid var(--tl-border, #e5e7eb);border-radius:var(--tl-radius-md, 0.5rem);text-transform:uppercase}.input::placeholder{text-transform:none;color:var(--tl-muted-foreground, #6b7280)}.input:focus{outline:2px solid var(--tl-primary, #6366f1);outline-offset:1px}.apply{padding:var(--tl-spacing-3, 0.75rem) var(--tl-spacing-4, 1rem);font:inherit;font-size:0.875rem;font-weight:500;color:var(--tl-primary-foreground, #ffffff);background:var(--tl-primary, #6366f1);border:none;border-radius:var(--tl-radius-md, 0.5rem);cursor:pointer;white-space:nowrap}.apply:hover:not(:disabled){opacity:0.9}.apply:disabled,.input:disabled{opacity:0.6;cursor:not-allowed}.error{margin:var(--tl-spacing-2, 0.5rem) 0 0;font-size:0.8125rem;color:var(--tl-error, #ef4444)}.applied{display:flex;align-items:center;justify-content:space-between;gap:var(--tl-spacing-3, 0.75rem);padding:var(--tl-spacing-3, 0.75rem);font-size:0.875rem;background:var(--tl-muted, #f9fafb);border:1px solid var(--tl-border, #e5e7eb);border-radius:var(--tl-radius-md, 0.5rem)}.applied-text{display:flex;align-items:center;gap:var(--tl-spacing-2, 0.5rem)}.icon{width:1rem;height:1rem;flex-shrink:0;color:var(--tl-success, #10b981)}.code{font-family:var(--tl-font-family-mono, ui-monospace, monospace)}.link{padding:0;font:inherit;font-size:0.8125rem;color:var(--tl-primary, #6366f1);background:none;border:none;cursor:pointer;white-space:nowrap}.link:hover{text-decoration:underline}`;
+const tlPromoCodeCss = () => `:host{display:block;font-family:var(--tl-font-family);color:var(--tl-foreground)}.field{display:flex;gap:var(--tl-spacing-2)}.input{flex:1;min-width:0;padding:var(--tl-spacing-3);font:inherit;font-size:0.875rem;color:var(--tl-foreground);background:var(--tl-background);border:1px solid var(--tl-border);border-radius:var(--tl-radius-md);text-transform:uppercase}.input::placeholder{text-transform:none;color:var(--tl-muted-foreground)}.input:focus{outline:2px solid var(--tl-primary);outline-offset:1px}.apply{padding:var(--tl-spacing-3) var(--tl-spacing-4);font:inherit;font-size:0.875rem;font-weight:500;color:var(--tl-primary-foreground);background:var(--tl-primary);border:none;border-radius:var(--tl-radius-md);cursor:pointer;white-space:nowrap}.apply:hover:not(:disabled){opacity:0.9}.apply:disabled,.input:disabled{opacity:0.6;cursor:not-allowed}.error{margin:var(--tl-spacing-2) 0 0;font-size:0.8125rem;color:var(--tl-error)}.applied{display:flex;align-items:center;justify-content:space-between;gap:var(--tl-spacing-3);padding:var(--tl-spacing-3);font-size:0.875rem;background:var(--tl-muted);border:1px solid var(--tl-border);border-radius:var(--tl-radius-md)}.applied-text{display:flex;align-items:center;gap:var(--tl-spacing-2)}.icon{width:1rem;height:1rem;flex-shrink:0;color:var(--tl-success)}.code{font-family:var(--tl-font-family-mono)}.link{padding:0;font:inherit;font-size:0.8125rem;color:var(--tl-primary);background:none;border:none;cursor:pointer;white-space:nowrap}.link:hover{text-decoration:underline}`;
 
 const TlPromoCode = class {
     constructor(hostRef) {

package/dist/cjs/tl-seat-map.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-BpfoKd9Q.js');
+var index = require('./index-I9CoYv3k.js');
 var sdkConnector = require('./sdk-connector-ClDF3013.js');
 
-const tlSeatMapCss = () => `:host{display:block;font-family:var(--tl-font-family, system-ui, -apple-system, sans-serif)}.seat-map-container{position:relative;overflow:hidden;border-radius:var(--tl-radius-md, 0.5rem);background:var(--tl-color-background, #ffffff)}.seat-map-iframe{width:100%;height:100%;border:none}.seat-map-iframe.hidden{display:none}.loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--tl-color-background, #ffffff);color:var(--tl-color-foreground, #0f172a);gap:1rem}.loading p{margin:0;font-size:0.875rem;color:var(--tl-color-muted-foreground, #64748b)}.spinner{width:40px;height:40px;border:3px solid var(--tl-color-border, #e2e8f0);border-top-color:var(--tl-color-primary, #e64b12);border-radius:50%;animation:tl-seat-map-spin 1s linear infinite}@keyframes tl-seat-map-spin{to{transform:rotate(360deg)}}.error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--tl-color-background, #ffffff);color:var(--tl-color-error, #ef4444);padding:1.5rem;text-align:center}.error-title{margin:0 0 0.5rem;font-size:1.125rem;font-weight:600}.error-message{margin:0;font-size:0.875rem;opacity:0.9}`;
+const tlSeatMapCss = () => `:host{display:block;font-family:var(--tl-font-family)}.seat-map-container{position:relative;overflow:hidden;border-radius:var(--tl-radius-md);background:var(--tl-color-background)}.seat-map-iframe{width:100%;height:100%;border:none}.seat-map-iframe.hidden{display:none}.loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--tl-color-background);color:var(--tl-color-foreground);gap:1rem}.loading p{margin:0;font-size:0.875rem;color:var(--tl-color-muted-foreground)}.spinner{width:40px;height:40px;border:3px solid var(--tl-color-border);border-top-color:var(--tl-color-primary);border-radius:50%;animation:tl-seat-map-spin 1s linear infinite}@keyframes tl-seat-map-spin{to{transform:rotate(360deg)}}.error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--tl-color-background);color:var(--tl-color-error);padding:1.5rem;text-align:center}.error-title{margin:0 0 0.5rem;font-size:1.125rem;font-weight:600}.error-message{margin:0;font-size:0.875rem;opacity:0.9}`;
 
 const TlSeatMap = class {
     constructor(hostRef) {

package/dist/collection/components/tl-buy-modal/tl-buy-modal.css

@@ -1,15 +1,14 @@
 :host {
-  /* Local fallbacks; real values come from the channel theme's --tl-* vars,
-     which pierce the shadow boundary. */
-  --_bg: var(--tl-background, #ffffff);
-  --_fg: var(--tl-foreground, #111827);
-  --_muted: var(--tl-muted, #f3f4f6);
-  --_muted-fg: var(--tl-muted-foreground, #6b7280);
-  --_border: var(--tl-border, #e5e7eb);
-  --_primary: var(--tl-primary, #6366f1);
-  --_primary-fg: var(--tl-primary-foreground, #ffffff);
-  --_radius: var(--tl-radius-lg, var(--tl-radius, 0.75rem));
-  --_font: var(--tl-font-family, system-ui, -apple-system, sans-serif);
+  /* Local shorthands over the theme tokens, which pierce the shadow boundary. */
+  --_bg: var(--tl-background);
+  --_fg: var(--tl-foreground);
+  --_muted: var(--tl-muted);
+  --_muted-fg: var(--tl-muted-foreground);
+  --_border: var(--tl-border);
+  --_primary: var(--tl-primary);
+  --_primary-fg: var(--tl-primary-foreground);
+  --_radius: var(--tl-radius-lg);
+  --_font: var(--tl-font-family);
 
   font-family: var(--_font);
 }
@@ -53,12 +52,6 @@
 
 /* Floating chrome beneath the panel: platform links left, brand right. */
 .powered-by {
-  /* The dashes are a cut-out, so they have to be the colour BEHIND the ticket.
-     This chrome floats on the modal's dark backdrop rather than on the page
-     surface, so --tl-background (a light value in most themes) would draw
-     white dashes on a white icon and vanish. The drawer's footer sits on the
-     panel itself and takes the default. */
-  --tl-pb-perforation: rgba(8, 8, 16, 0.6);
   width: 100%;
   max-width: 460px;
   display: flex;
@@ -267,7 +260,7 @@
   width: 100%;
   padding: 13px;
   border: 0;
-  border-radius: var(--tl-radius-md, 0.5rem);
+  border-radius: var(--tl-radius-md);
   background: var(--_primary);
   color: var(--_primary-fg);
   font-size: 0.98rem;
@@ -285,7 +278,7 @@
   margin-top: 8px;
   padding: 12px;
   border: 1px solid var(--_border);
-  border-radius: var(--tl-radius-md, 0.5rem);
+  border-radius: var(--tl-radius-md);
   background: transparent;
   color: var(--_fg);
   font-size: 0.95rem;

package/dist/collection/components/tl-buy-modal/tl-buy-modal.js

@@ -129,7 +129,7 @@ export class TlBuyModal {
         return (h(Host, { key: '1245e518c2b5232f4d9dba091cf808cd3867fbef' }, h("div", { key: '4e770fccdd785444f1cc87df4adab5a5dc1bf58a', class: "overlay", onClick: (e) => {
                 if (e.target === e.currentTarget)
                     this.close();
-            } }, h("div", { key: '57b13dac690028aeebd6a601acfba07f00854c40', class: { panel: true, 'panel--wide': this.step === 'occurrence' }, role: "dialog", "aria-modal": "true", "aria-label": this.eventName }, h("header", { key: '881e9cc70a0ca25947f272b9ebcb2e6d4b4268f2', class: "panel-header" }, this.imageUrl && (h("div", { key: '753f7df1b5118dfacbbc6b89b4e5d7ba114f6cdf', class: "event-thumb", style: { backgroundImage: `url(${this.imageUrl})` } })), h("div", { key: '9aaa32d1add90fabd1b0ea0c100f198962f4e6a5', class: "titles" }, h("span", { key: '538032bdf2338206ad763417386852ff97cc472f', class: "kicker" }, this.stepKicker()), h("h2", { key: '71429804179e7fbbea1fa90a2937a065517092f5', class: "event-name" }, this.eventName), this.venueLabel && h("p", { key: 'dd968b397deab890df3a4fbdff33226e82bd9660', class: "event-meta" }, this.venueLabel), this.dateSummary && h("p", { key: 'f40e6049d09b06c9f599e7d14d6fbb43b39b22fd', class: "event-meta" }, this.dateSummary)), h("button", { key: 'dbe0908f8cd8544654b627921f68cc4961802b77', class: "close-btn", "aria-label": "Close", onClick: this.close }, h("svg", { key: '23a750830e6e16d28cbcd5025507d25848aaadf7', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: 'e81b8763a5c781f72c1ca8a2113482948e3ba8cc', d: "M6 6l12 12M18 6L6 18", "stroke-linecap": "round" })))), h("div", { key: 'da71e610f907cf53e78246d2065aaf526d5ceffd', class: "panel-body" }, this.step === 'loading' && (h("div", { key: '28cbb9a98c7b08fa8dcb9d8d5dfbf3bec93fe38d', class: "state-msg" }, h("span", { key: '915c8de87cbdc7da1ccf0622ce6c0f02fccf2cad', class: "spinner" }), " Loading\u2026")), this.step === 'error' && h("div", { key: '5785578bfef6f1ee81d938d91ffd3ded975f8c12', class: "state-msg error" }, this.error), this.step === 'occurrence' && (h("tl-occurrence-selector", { key: 'eeb853eab141c3c103015e82d221a140f6a3a109', eventId: this.eventId, onTlSelect: this.handleOccurrenceSelect })), this.step === 'tickets' && this.selectedOccurrenceId && (h("div", { key: 'f608f592ba651eb431375433eb4ff9393863ade5', class: "tickets-step" }, this.occurrenceCount > 1 && (h("button", { key: '84adfbdbeaceb2cf4238c6ffd09558b4499ca940', class: "back-link", onClick: this.backToDates }, "\u2190 Change date")), this.occurrenceLabel && h("p", { key: '0317e9194049608711e8c622142c3ad2c0a5dc12', class: "occ-label" }, this.occurrenceLabel), h("tl-ticket-selector", { key: '27b1e05d9d92fb8d519375e2b27d4b5ea0a4890a', eventId: this.eventId, occurrenceId: this.selectedOccurrenceId, onTlAddToCart: this.handleAdded }))), this.step === 'done' && (h("div", { key: '0853088206988c66d489f8804df7899821d49e64', class: "done-step" }, h("div", { key: 'c2955b893c4dffaadcdfd27bee96ef2724a131a6', class: "done-mark" }, "\uD83C\uDF9F\uFE0F"), h("p", { key: '370c30dfcbc0c25b4794d984dd261a3a5779a9dc', class: "done-title" }, "Added to your cart"), h("p", { key: 'c462f3c9292740e2fd2c74b173484f80a5dc1a30', class: "done-sub" }, "Held for you while you check out."), h("button", { key: '484991f79572e3213ad6413a1af87599880c3643', class: "primary-btn", onClick: this.goCheckout }, "Go to checkout"), h("button", { key: '5b4ba5a472b794e8f5af0f131dad1c8c11b869f5', class: "ghost-btn", onClick: this.close }, "Keep browsing"))))), h("div", { key: '9acdd36744d363f41f0bed7938ecea33322362d1', class: "powered-by" }, h("div", { key: 'f45545a8fc625336618352f0c0e9e84a1babce96', class: "pb-links" }, h("a", { key: 'dd929b12419b8353d9a09ad242a9f351dfd699e2', href: "https://ticketlayer.com/privacy", target: "_blank", rel: "noopener noreferrer" }, "Privacy Policy"), h("a", { key: '859be221bdc76602defaebdb89a997778cda6a91', href: "https://ticketlayer.com/report-abuse", target: "_blank", rel: "noopener noreferrer" }, "Report Abuse")), h("a", { key: 'd4e1f44b3b084160d2df8b9d15e075ddc5e05363', class: "pb-brand", href: "https://ticketlayer.com", target: "_blank", rel: "noopener noreferrer" }, h("span", { key: 'fe7fd86576a4e9772daa2c4c449da060f20fa143', class: "pb-pre" }, "Powered by"), h("svg", { key: '19412bd9e5522f0af9f847fe8fda6aa0f0004a3a', width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: 'c159efd1b8fce42b8c0fd5bac21792b4dc2728ce', d: "M4 7.5A1.5 1.5 0 0 1 5.5 6h13A1.5 1.5 0 0 1 20 7.5v2a2 2 0 0 0 0 5v2a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 16.5v-2a2 2 0 0 0 0-5v-2Z", fill: "currentColor" }), h("path", { key: '283956eead27e5919301c30882da6eaa7b093a1a', d: "M13 7v10", stroke: "var(--tl-pb-perforation, var(--tl-background, #fff))", "stroke-width": "1.2", "stroke-dasharray": "1.5 1.8", "stroke-linecap": "round" })), h("span", { key: 'bc045fda144885737b88bf81b4f9000ec8d333be', class: "pb-word" }, "Ticketlayer"))))));
+            } }, h("div", { key: '57b13dac690028aeebd6a601acfba07f00854c40', class: { panel: true, 'panel--wide': this.step === 'occurrence' }, role: "dialog", "aria-modal": "true", "aria-label": this.eventName }, h("header", { key: '881e9cc70a0ca25947f272b9ebcb2e6d4b4268f2', class: "panel-header" }, this.imageUrl && (h("div", { key: '753f7df1b5118dfacbbc6b89b4e5d7ba114f6cdf', class: "event-thumb", style: { backgroundImage: `url(${this.imageUrl})` } })), h("div", { key: '9aaa32d1add90fabd1b0ea0c100f198962f4e6a5', class: "titles" }, h("span", { key: '538032bdf2338206ad763417386852ff97cc472f', class: "kicker" }, this.stepKicker()), h("h2", { key: '71429804179e7fbbea1fa90a2937a065517092f5', class: "event-name" }, this.eventName), this.venueLabel && h("p", { key: 'dd968b397deab890df3a4fbdff33226e82bd9660', class: "event-meta" }, this.venueLabel), this.dateSummary && h("p", { key: 'f40e6049d09b06c9f599e7d14d6fbb43b39b22fd', class: "event-meta" }, this.dateSummary)), h("button", { key: 'dbe0908f8cd8544654b627921f68cc4961802b77', class: "close-btn", "aria-label": "Close", onClick: this.close }, h("svg", { key: '23a750830e6e16d28cbcd5025507d25848aaadf7', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: 'e81b8763a5c781f72c1ca8a2113482948e3ba8cc', d: "M6 6l12 12M18 6L6 18", "stroke-linecap": "round" })))), h("div", { key: 'da71e610f907cf53e78246d2065aaf526d5ceffd', class: "panel-body" }, this.step === 'loading' && (h("div", { key: '28cbb9a98c7b08fa8dcb9d8d5dfbf3bec93fe38d', class: "state-msg" }, h("span", { key: '915c8de87cbdc7da1ccf0622ce6c0f02fccf2cad', class: "spinner" }), " Loading\u2026")), this.step === 'error' && h("div", { key: '5785578bfef6f1ee81d938d91ffd3ded975f8c12', class: "state-msg error" }, this.error), this.step === 'occurrence' && (h("tl-occurrence-selector", { key: 'eeb853eab141c3c103015e82d221a140f6a3a109', eventId: this.eventId, onTlSelect: this.handleOccurrenceSelect })), this.step === 'tickets' && this.selectedOccurrenceId && (h("div", { key: 'f608f592ba651eb431375433eb4ff9393863ade5', class: "tickets-step" }, this.occurrenceCount > 1 && (h("button", { key: '84adfbdbeaceb2cf4238c6ffd09558b4499ca940', class: "back-link", onClick: this.backToDates }, "\u2190 Change date")), this.occurrenceLabel && h("p", { key: '0317e9194049608711e8c622142c3ad2c0a5dc12', class: "occ-label" }, this.occurrenceLabel), h("tl-ticket-selector", { key: '27b1e05d9d92fb8d519375e2b27d4b5ea0a4890a', eventId: this.eventId, occurrenceId: this.selectedOccurrenceId, onTlAddToCart: this.handleAdded }))), this.step === 'done' && (h("div", { key: '0853088206988c66d489f8804df7899821d49e64', class: "done-step" }, h("div", { key: 'c2955b893c4dffaadcdfd27bee96ef2724a131a6', class: "done-mark" }, "\uD83C\uDF9F\uFE0F"), h("p", { key: '370c30dfcbc0c25b4794d984dd261a3a5779a9dc', class: "done-title" }, "Added to your cart"), h("p", { key: 'c462f3c9292740e2fd2c74b173484f80a5dc1a30', class: "done-sub" }, "Held for you while you check out."), h("button", { key: '484991f79572e3213ad6413a1af87599880c3643', class: "primary-btn", onClick: this.goCheckout }, "Go to checkout"), h("button", { key: '5b4ba5a472b794e8f5af0f131dad1c8c11b869f5', class: "ghost-btn", onClick: this.close }, "Keep browsing"))))), h("div", { key: '9acdd36744d363f41f0bed7938ecea33322362d1', class: "powered-by" }, h("div", { key: 'f45545a8fc625336618352f0c0e9e84a1babce96', class: "pb-links" }, h("a", { key: 'dd929b12419b8353d9a09ad242a9f351dfd699e2', href: "https://ticketlayer.com/privacy", target: "_blank", rel: "noopener noreferrer" }, "Privacy Policy"), h("a", { key: '859be221bdc76602defaebdb89a997778cda6a91', href: "https://ticketlayer.com/report-abuse", target: "_blank", rel: "noopener noreferrer" }, "Report Abuse")), h("a", { key: 'd4e1f44b3b084160d2df8b9d15e075ddc5e05363', class: "pb-brand", href: "https://ticketlayer.com", target: "_blank", rel: "noopener noreferrer" }, h("span", { key: 'fe7fd86576a4e9772daa2c4c449da060f20fa143', class: "pb-pre" }, "Powered by"), h("svg", { key: '19412bd9e5522f0af9f847fe8fda6aa0f0004a3a', width: "14", height: "14", viewBox: "0 0 50 50", fill: "none", "aria-hidden": "true" }, h("g", { key: '8e82f14ab1e8094a210db95b1310ce6c0feef446', transform: "matrix(0.0129 0 0 -0.0129 25.4752 25.4752)" }, h("path", { key: 'b50b04cfc07c4e55fcf5ce92967f69b99d34dd34', fill: "currentColor", transform: "translate(-1781.5, -1759.4003)", d: "M 41 2973 c 1 -285 5 -734 9 -998 c 7 -444 9 -488 30 -580 c 81 -364 235 -634 512 -900 c 135 -130 263 -220 423 -299 c 156 -77 249 -109 409 -143 c 110 -23 142 -25 354 -24 c 230 1 310 8 427 37 c 241 60 453 162 640 309 c 82 64 252 234 317 315 c 210 264 340 604 355 926 l 6 121 l -69 6 c -86 8 -706 9 -755 1 l -36 -6 l -21 -125 c -34 -191 -98 -317 -236 -462 c -111 -115 -249 -198 -396 -238 c -98 -27 -356 -24 -463 5 c -100 27 -183 69 -273 137 c -226 173 -353 409 -354 660 c 0 44 -5 120 -10 169 c -6 49 -8 91 -6 94 c 3 3 65 -22 138 -55 c 140 -64 251 -103 358 -127 c 71 -17 295 -46 347 -46 l 33 0 l 0 434 l 0 434 l -67 7 c -147 14 -269 56 -393 133 c -222 139 -378 393 -397 648 l -6 71 l -75 7 c -41 3 -239 6 -439 6 l -363 0 l 1 -517 z" }))), h("span", { key: '2623449abd22f36f5af80d5605d3b274a4c214c4', class: "pb-word" }, "ticketlayer"))))));
     }
     static get is() { return "tl-buy-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tl-buy-tickets-button/tl-buy-tickets-button.css

@@ -4,7 +4,7 @@
 
 :host {
   display: inline-block;
-  font-family: var(--tl-font-family, system-ui, -apple-system, sans-serif);
+  font-family: var(--tl-font-family);
 }
 
 :host(.full-width) {
@@ -51,19 +51,19 @@
 .buy-button.size-sm {
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
-  border-radius: var(--tl-radius-sm, 0.375rem);
+  border-radius: var(--tl-radius-sm);
 }
 
 .buy-button.size-md {
   padding: 0.75rem 1.5rem;
   font-size: 1rem;
-  border-radius: var(--tl-radius-md, 0.5rem);
+  border-radius: var(--tl-radius-md);
 }
 
 .buy-button.size-lg {
   padding: 1rem 2rem;
   font-size: 1.125rem;
-  border-radius: var(--tl-radius-lg, 0.625rem);
+  border-radius: var(--tl-radius-lg);
   min-height: 51px;
 }
 

package/dist/collection/components/tl-buy-tickets-button/tl-buy-tickets-button.js

@@ -22,9 +22,12 @@ import { getSDK, hasSDK } from "../../utils/sdk-connector";
 const STATE_CONFIGS = {
     available: {
         defaultLabel: 'Buy Tickets',
-        color: 'var(--tl-primary, #e64b12)',
-        hoverColor: 'var(--tl-primary, #d4440f)',
-        foreground: 'var(--tl-primary-foreground, #ffffff)',
+        color: 'var(--tl-primary)',
+        // The hover shade used to be a second colour smuggled into the token's
+        // fallback slot, which meant it stopped following the channel's brand the
+        // moment a theme was applied. Derive it instead.
+        hoverColor: 'color-mix(in srgb, var(--tl-primary) 90%, black)',
+        foreground: 'var(--tl-primary-foreground)',
     },
     soldOut: {
         defaultLabel: 'Sold Out',
@@ -112,7 +115,7 @@ export class TlBuyTicketsButton {
         const config = this.getStateConfig();
         const buttonLabel = this.label || config.defaultLabel;
         const isInteractive = this.isInteractive();
-        return (h(Host, { key: '10c8c36d12223afcfd13c9807c2ef6b0f4c34266', class: { 'full-width': this.fullWidth } }, h("button", { key: 'c7f6a39a837c90ced0176b5d017687afabf99a5a', type: "button", class: {
+        return (h(Host, { key: '86ee9a81d82c10398dab4e22b3bbae15abb8f449', class: { 'full-width': this.fullWidth } }, h("button", { key: 'b581e199ced7ffd14669ebe0cc727edc2f8c8914', type: "button", class: {
                 'buy-button': true,
                 [`variant-${this.variant}`]: true,
                 [`size-${this.size}`]: true,
@@ -122,7 +125,7 @@ export class TlBuyTicketsButton {
                 '--button-color': config.color,
                 '--button-hover-color': config.hoverColor,
                 '--button-foreground': config.foreground,
-            }, disabled: !isInteractive, onClick: this.handleClick, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, h("span", { key: 'e2bc1edc9fbd2a9c81da8cc3293170b1c4275125', class: "icon" }, this.state === 'soldOut' && this.renderSoldOutIcon(), this.state === 'waitlist' && this.renderWaitlistIcon(), this.state === 'comingSoon' && this.renderComingSoonIcon(), this.state === 'available' && this.renderTicketIcon()), h("span", { key: '8371c85dcc24c5ac040744edefe80618421025ef', class: "label" }, buttonLabel), this.price !== undefined && (h("span", { key: 'c02cb5b646ade8866deafb9b3e698115abec5708', class: "price" }, h("span", { key: 'cb0ab272460115a5edebd674362c83711735a70d', class: "price-prefix" }, this.pricePrefix), h("span", { key: 'e28ba56d3928076b624513de95682351f3e0d92b', class: "price-value" }, this.formatPrice(this.price)))))));
+            }, disabled: !isInteractive, onClick: this.handleClick, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, h("span", { key: 'f776bab4a999ed36b25400424d639b4c9261c02a', class: "icon" }, this.state === 'soldOut' && this.renderSoldOutIcon(), this.state === 'waitlist' && this.renderWaitlistIcon(), this.state === 'comingSoon' && this.renderComingSoonIcon(), this.state === 'available' && this.renderTicketIcon()), h("span", { key: 'e98ecbe6debc5c2c18ce1d304b60bf1074b003b3', class: "label" }, buttonLabel), this.price !== undefined && (h("span", { key: 'e7e261d09a541b126b02b88d00992f3a6483a9b8', class: "price" }, h("span", { key: '5eab43a47c2dd4c1339fe84b583902b1e38a0b2a', class: "price-prefix" }, this.pricePrefix), h("span", { key: 'f03b514ff2bc3c9a1b2e922d93a92accdedd0fad', class: "price-value" }, this.formatPrice(this.price)))))));
     }
     renderTicketIcon() {
         return (h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" }), h("path", { d: "M13 5v2" }), h("path", { d: "M13 17v2" }), h("path", { d: "M13 11v2" })));

package/dist/collection/components/tl-buy-tickets-wrapper/tl-buy-tickets-wrapper.css

@@ -10,9 +10,9 @@ tl-buy-tickets-wrapper,
 
 tl-buy-tickets-wrapper:focus,
 .tl-buy-tickets-wrapper:focus {
-  outline: 2px solid var(--tl-ring, #3b82f6);
+  outline: 2px solid var(--tl-ring);
   outline-offset: 2px;
-  border-radius: var(--tl-radius-sm, 0.25rem);
+  border-radius: var(--tl-radius-sm);
 }
 
 tl-buy-tickets-wrapper[disabled],

package/dist/collection/components/tl-cart/tl-cart.css

@@ -1,25 +1,25 @@
 :host {
   display: block;
-  font-family: var(--tl-font-family, system-ui, sans-serif);
+  font-family: var(--tl-font-family);
 }
 
 /* Skeleton loading */
 .skeleton-container {
-  padding: var(--tl-spacing-4, 1rem);
+  padding: var(--tl-spacing-4);
 }
 
 .skeleton-item {
   height: 70px;
-  background: var(--tl-color-muted, #f3f4f6);
-  border-radius: var(--tl-radius-md, 0.5rem);
-  margin-bottom: var(--tl-spacing-3, 0.75rem);
+  background: var(--tl-color-muted);
+  border-radius: var(--tl-radius-md);
+  margin-bottom: var(--tl-spacing-3);
   animation: pulse 1.5s ease-in-out infinite;
 }
 
 .skeleton-totals {
   height: 100px;
-  background: var(--tl-color-muted, #f3f4f6);
-  border-radius: var(--tl-radius-md, 0.5rem);
+  background: var(--tl-color-muted);
+  border-radius: var(--tl-radius-md);
   animation: pulse 1.5s ease-in-out infinite;
 }
 
@@ -34,50 +34,50 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: var(--tl-spacing-8, 2rem);
+  padding: var(--tl-spacing-8);
   text-align: center;
 }
 
 .empty-icon {
   width: 48px;
   height: 48px;
-  color: var(--tl-color-muted-foreground, #9ca3af);
-  margin-bottom: var(--tl-spacing-4, 1rem);
+  color: var(--tl-color-muted-foreground);
+  margin-bottom: var(--tl-spacing-4);
 }
 
 .empty-title {
-  margin: 0 0 var(--tl-spacing-2, 0.5rem);
+  margin: 0 0 var(--tl-spacing-2);
   font-size: 16px;
   font-weight: 600;
-  color: var(--tl-color-foreground, #111827);
+  color: var(--tl-color-foreground);
 }
 
 .empty-message {
   margin: 0;
   font-size: 14px;
-  color: var(--tl-color-muted-foreground, #6b7280);
+  color: var(--tl-color-muted-foreground);
 }
 
 /* Cart */
 .cart {
-  background: var(--tl-color-background, #ffffff);
+  background: var(--tl-color-background);
 }
 
 .cart.compact .cart-items {
-  margin-bottom: var(--tl-spacing-2, 0.5rem);
+  margin-bottom: var(--tl-spacing-2);
 }
 
 /* Cart items */
 .cart-items {
-  margin-bottom: var(--tl-spacing-4, 1rem);
+  margin-bottom: var(--tl-spacing-4);
 }
 
 .cart-item {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  padding: var(--tl-spacing-3, 0.75rem) 0;
-  border-bottom: 1px solid var(--tl-color-border, #e5e7eb);
+  padding: var(--tl-spacing-3) 0;
+  border-bottom: 1px solid var(--tl-color-border);
   transition: opacity 0.2s;
 }
 
@@ -98,39 +98,39 @@
   margin: 0;
   font-weight: 600;
   font-size: 15px;
-  color: var(--tl-color-foreground, #111827);
+  color: var(--tl-color-foreground);
 }
 
 .item-event {
-  margin: var(--tl-spacing-1, 0.25rem) 0 0;
+  margin: var(--tl-spacing-1) 0 0;
   font-size: 14px;
-  color: var(--tl-color-muted-foreground, #6b7280);
+  color: var(--tl-color-muted-foreground);
 }
 
 .item-date {
-  margin: var(--tl-spacing-1, 0.25rem) 0 0;
+  margin: var(--tl-spacing-1) 0 0;
   font-size: 13px;
-  color: var(--tl-color-muted-foreground, #9ca3af);
+  color: var(--tl-color-muted-foreground);
 }
 
 .item-quantity {
-  margin: var(--tl-spacing-1, 0.25rem) 0 0;
+  margin: var(--tl-spacing-1) 0 0;
   font-size: 13px;
-  color: var(--tl-color-muted-foreground, #6b7280);
+  color: var(--tl-color-muted-foreground);
 }
 
 .item-actions {
   display: flex;
   align-items: center;
-  gap: var(--tl-spacing-3, 0.75rem);
-  margin-left: var(--tl-spacing-4, 1rem);
+  gap: var(--tl-spacing-3);
+  margin-left: var(--tl-spacing-4);
 }
 
 .item-price {
   margin: 0;
   font-weight: 600;
   font-size: 15px;
-  color: var(--tl-color-foreground, #111827);
+  color: var(--tl-color-foreground);
   white-space: nowrap;
 }
 
@@ -140,8 +140,8 @@
   padding: 0;
   border: none;
   background: transparent;
-  border-radius: var(--tl-radius-sm, 0.25rem);
-  color: var(--tl-color-muted-foreground, #9ca3af);
+  border-radius: var(--tl-radius-sm);
+  color: var(--tl-color-muted-foreground);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -150,8 +150,8 @@
 }
 
 .remove-btn:hover:not(:disabled) {
-  background-color: var(--tl-color-destructive-bg, #fee2e2);
-  color: var(--tl-color-destructive, #ef4444);
+  background-color: var(--tl-color-destructive-bg);
+  color: var(--tl-color-destructive);
 }
 
 .remove-btn:disabled {
@@ -167,8 +167,8 @@
 .spinner {
   width: 14px;
   height: 14px;
-  border: 2px solid var(--tl-color-border, #e5e7eb);
-  border-top-color: var(--tl-color-primary, #6366f1);
+  border: 2px solid var(--tl-color-border);
+  border-top-color: var(--tl-color-primary);
   border-radius: 50%;
   animation: spin 0.6s linear infinite;
 }
@@ -179,41 +179,42 @@
 
 /* Cart totals */
 .cart-totals {
-  padding: var(--tl-spacing-3, 0.75rem) 0;
-  border-top: 1px solid var(--tl-color-border, #e5e7eb);
+  padding: var(--tl-spacing-3) 0;
+  border-top: 1px solid var(--tl-color-border);
 }
 
 .total-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: var(--tl-spacing-1, 0.25rem) 0;
+  padding: var(--tl-spacing-1) 0;
 }
 
 .total-row.subtotal,
-.total-row.fees {
+.total-row.fees,
+.total-row.discount {
   font-size: 14px;
-  color: var(--tl-color-muted-foreground, #6b7280);
+  color: var(--tl-color-muted-foreground);
 }
 
 .total-row.total {
   font-size: 16px;
   font-weight: 700;
-  color: var(--tl-color-foreground, #111827);
-  padding-top: var(--tl-spacing-2, 0.5rem);
-  border-top: 1px solid var(--tl-color-border, #e5e7eb);
-  margin-top: var(--tl-spacing-2, 0.5rem);
+  color: var(--tl-color-foreground);
+  padding-top: var(--tl-spacing-2);
+  border-top: 1px solid var(--tl-color-border);
+  margin-top: var(--tl-spacing-2);
 }
 
 /* Checkout button */
 .checkout-btn {
   width: 100%;
-  margin-top: var(--tl-spacing-4, 1rem);
-  padding: var(--tl-spacing-3, 0.75rem) var(--tl-spacing-4, 1rem);
-  border-radius: var(--tl-radius-md, 0.5rem);
+  margin-top: var(--tl-spacing-4);
+  padding: var(--tl-spacing-3) var(--tl-spacing-4);
+  border-radius: var(--tl-radius-md);
   border: none;
-  background-color: var(--tl-color-primary, #6366f1);
-  color: var(--tl-color-primary-foreground, #ffffff);
+  background-color: var(--tl-color-primary);
+  color: var(--tl-color-primary-foreground);
   font-weight: 600;
   font-size: 16px;
   cursor: pointer;
@@ -229,8 +230,8 @@
 }
 
 .checkout-btn:disabled {
-  background-color: var(--tl-color-muted, #d1d5db);
-  color: var(--tl-color-muted-foreground, #6b7280);
+  background-color: var(--tl-color-muted);
+  color: var(--tl-color-muted-foreground);
   cursor: not-allowed;
 }
 
@@ -241,7 +242,7 @@
 }
 
 .cart.compact .cart-totals {
-  padding: var(--tl-spacing-2, 0.5rem) 0;
+  padding: var(--tl-spacing-2) 0;
 }
 
 .cart.compact .total-row.total {

package/dist/collection/components/tl-cart/tl-cart.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { getSDK, hasSDK, whenSDK } from "../../utils/sdk-connector";
+import { cartTotals } from "../../utils/cart-totals";
 export class TlCart {
     constructor() {
         /**
@@ -129,8 +130,13 @@ export class TlCart {
         if (!this.cart || this.cart.items.length === 0) {
             return this.renderEmptyCart();
         }
-        const { items, subtotal, fees, total, currency } = this.cart;
-        return (h("div", { class: `cart ${this.compact ? 'compact' : ''}` }, h("div", { class: "cart-items" }, items.map(item => this.renderCartItem(item))), h("div", { class: "cart-totals" }, !this.compact && (h("div", { class: "total-row subtotal" }, h("span", null, "Subtotal"), h("span", null, this.formatPrice(subtotal, currency)))), fees > 0 && !this.compact && (h("div", { class: "total-row fees" }, h("span", null, "Fees"), h("span", null, this.formatPrice(fees, currency)))), h("div", { class: "total-row total" }, h("span", null, "Total"), h("span", null, this.formatPrice(total, currency)))), this.showCheckoutButton && (h("button", { class: "checkout-btn", onClick: this.handleCheckout, disabled: items.length === 0 }, this.checkoutLabel))));
+        const { items } = this.cart;
+        // Money comes from the response through cartTotals: the fee row is shown
+        // when the surface expressed a fee, and the total is the server's figure,
+        // never a sum taken here.
+        const totals = cartTotals(this.cart);
+        const currency = totals.currency;
+        return (h("div", { class: `cart ${this.compact ? 'compact' : ''}` }, h("div", { class: "cart-items" }, items.map(item => this.renderCartItem(item))), h("div", { class: "cart-totals" }, !this.compact && (h("div", { class: "total-row subtotal" }, h("span", null, "Subtotal"), h("span", null, this.formatPrice(totals.subtotal, currency)))), totals.showFee && !this.compact && (h("div", { class: "total-row fees" }, h("span", null, totals.feeLabel), h("span", null, this.formatPrice(totals.fees, currency)))), totals.discount > 0 && !this.compact && (h("div", { class: "total-row discount" }, h("span", null, "Discount"), h("span", null, "-", this.formatPrice(totals.discount, currency)))), h("div", { class: "total-row total" }, h("span", null, "Total"), h("span", null, this.formatPrice(totals.total, currency)))), this.showCheckoutButton && (h("button", { class: "checkout-btn", onClick: this.handleCheckout, disabled: items.length === 0 }, this.checkoutLabel))));
     }
     static get is() { return "tl-cart"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tl-cart-badge/tl-cart-badge.css

@@ -10,14 +10,14 @@
   background: transparent;
   border: none;
   cursor: pointer;
-  padding: var(--tl-spacing-2, 0.5rem);
-  border-radius: var(--tl-radius-md, 0.5rem);
-  color: var(--tl-color-foreground, #111827);
+  padding: var(--tl-spacing-2);
+  border-radius: var(--tl-radius-md);
+  color: var(--tl-color-foreground);
   transition: background-color 0.2s, transform 0.15s;
 }
 
 .cart-badge:hover {
-  background-color: var(--tl-color-muted, #f3f4f6);
+  background-color: var(--tl-color-muted);
 }
 
 .cart-badge:active {
@@ -25,13 +25,13 @@
 }
 
 .cart-badge:focus-visible {
-  outline: 2px solid var(--tl-color-primary, #6366f1);
+  outline: 2px solid var(--tl-color-primary);
   outline-offset: 2px;
 }
 
 /* Size variants */
 .size-sm {
-  padding: var(--tl-spacing-1, 0.25rem);
+  padding: var(--tl-spacing-1);
 }
 
 .size-sm .icon-svg,
@@ -49,7 +49,7 @@
 }
 
 .size-lg {
-  padding: var(--tl-spacing-3, 0.75rem);
+  padding: var(--tl-spacing-3);
 }
 
 .size-lg .icon-svg,
@@ -80,11 +80,11 @@
   height: 18px;
   padding: 0 5px;
   border-radius: 9px;
-  background-color: var(--tl-color-primary, #6366f1);
-  color: var(--tl-color-primary-foreground, #ffffff);
+  background-color: var(--tl-color-primary);
+  color: var(--tl-color-primary-foreground);
   font-size: 11px;
   font-weight: 600;
-  font-family: var(--tl-font-family, system-ui, sans-serif);
+  font-family: var(--tl-font-family);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -119,7 +119,7 @@
   color: inherit;
   font-size: 12px;
   font-weight: 600;
-  font-family: var(--tl-font-family, system-ui, sans-serif);
+  font-family: var(--tl-font-family);
   line-height: 1;
 }