@ticketlayer/elements 0.3.2 → 0.4.0

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

@@ -1,10 +1,11 @@
 'use strict';
 
-var index = require('./index-DfzcrE9-.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-DfzcrE9-.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-DfzcrE9-.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-DfzcrE9-.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/collection-manifest.json

@@ -19,9 +19,10 @@
     "components/tl-order-confirmation/tl-order-confirmation.js",
     "components/tl-seat-map/tl-seat-map.js"
   ],
+  "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.41.1",
+    "version": "4.45.0",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

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);
 }
@@ -261,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;
@@ -279,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

@@ -99,7 +99,7 @@ export class TlBuyModal {
         }
         const first = day(times[0]);
         const last = day(times[times.length - 1]);
-        const range = first === last ? first : `${first} – ${last}`;
+        const range = first === last ? first : `${first} - ${last}`;
         return `${range} · ${times.length} dates`;
     }
     labelFor(occ) {

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" })));
@@ -197,7 +200,7 @@ export class TlBuyTicketsButton {
                     "references": {
                         "ButtonState": {
                             "location": "local",
-                            "path": "/home/runner/work/live-elements/live-elements/src/components/tl-buy-tickets-button/tl-buy-tickets-button.tsx",
+                            "path": "/home/runner/work/live/live/packages/elements/src/components/tl-buy-tickets-button/tl-buy-tickets-button.tsx",
                             "id": "src/components/tl-buy-tickets-button/tl-buy-tickets-button.tsx::ButtonState"
                         }
                     }
@@ -242,7 +245,7 @@ export class TlBuyTicketsButton {
                     "references": {
                         "ButtonVariant": {
                             "location": "local",
-                            "path": "/home/runner/work/live-elements/live-elements/src/components/tl-buy-tickets-button/tl-buy-tickets-button.tsx",
+                            "path": "/home/runner/work/live/live/packages/elements/src/components/tl-buy-tickets-button/tl-buy-tickets-button.tsx",
                             "id": "src/components/tl-buy-tickets-button/tl-buy-tickets-button.tsx::ButtonVariant"
                         }
                     }
@@ -268,7 +271,7 @@ export class TlBuyTicketsButton {
                     "references": {
                         "ButtonSize": {
                             "location": "local",
-                            "path": "/home/runner/work/live-elements/live-elements/src/components/tl-buy-tickets-button/tl-buy-tickets-button.tsx",
+                            "path": "/home/runner/work/live/live/packages/elements/src/components/tl-buy-tickets-button/tl-buy-tickets-button.tsx",
                             "id": "src/components/tl-buy-tickets-button/tl-buy-tickets-button.tsx::ButtonSize"
                         }
                     }

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"; }
@@ -253,7 +259,7 @@ export class TlCart {
                     "references": {
                         "TlCartData": {
                             "location": "local",
-                            "path": "/home/runner/work/live-elements/live-elements/src/components/tl-cart/tl-cart.tsx",
+                            "path": "/home/runner/work/live/live/packages/elements/src/components/tl-cart/tl-cart.tsx",
                             "id": "src/components/tl-cart/tl-cart.tsx::TlCartData"
                         }
                     }
@@ -289,7 +295,7 @@ export class TlCart {
                     "references": {
                         "TlCartData": {
                             "location": "local",
-                            "path": "/home/runner/work/live-elements/live-elements/src/components/tl-cart/tl-cart.tsx",
+                            "path": "/home/runner/work/live/live/packages/elements/src/components/tl-cart/tl-cart.tsx",
                             "id": "src/components/tl-cart/tl-cart.tsx::TlCartData"
                         }
                     }