@ticketlayer/elements 0.3.2 → 0.4.0

package/dist/collection/components/tl-occurrence-selector/tl-occurrence-selector.css

@@ -1,26 +1,15 @@
 /**
  * TlOccurrenceSelector Styles
- * 
- * CSS custom properties for theming:
- * --tl-primary: Primary brand colour (default: #e64b12)
- * --tl-primary-foreground: Text on primary (default: #ffffff)
- * --tl-background: Background colour (default: #ffffff)
- * --tl-foreground: Main text colour (default: #0f172a)
- * --tl-muted: Muted background (default: #f1f5f9)
- * --tl-muted-foreground: Muted text (default: #64748b)
- * --tl-border: Border colour (default: #e2e8f0)
- * --tl-radius: Border radius (default: 0.5rem)
- * --tl-font-family: Font family (default: system-ui)
+ *
+ * The --tl-* tokens this reads, and their defaults, are declared once in
+ * @ticketlayer/theme (packages/theme/tokens.json) and shipped in the global
+ * stylesheet. There is nothing to repeat here.
  */
 
 :host {
-  /* Don't redefine CSS variables - let them inherit from parent document */
-  /* Only define local fallback for radius mapping */
-  --tl-radius: var(--tl-radius-md, 0.5rem);
-
   display: block;
-  font-family: var(--tl-font-family, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
-  color: var(--tl-foreground, #0f172a);
+  font-family: var(--tl-font-family);
+  color: var(--tl-foreground);
 }
 
 * {
@@ -37,7 +26,7 @@
 .no-occurrences {
   text-align: center;
   padding: 3rem 1rem;
-  color: var(--tl-muted-foreground, #64748b);
+  color: var(--tl-muted-foreground);
 }
 
 /* =========================================================================
@@ -56,8 +45,8 @@
   align-items: flex-start;
   width: 100%;
   padding: 1rem 1.25rem;
-  background: var(--tl-background, #ffffff);
-  border: 1px solid var(--tl-border, #e2e8f0);
+  background: var(--tl-background);
+  border: 1px solid var(--tl-border);
   border-radius: var(--tl-radius);
   text-align: left;
   cursor: pointer;
@@ -66,8 +55,8 @@
 }
 
 .occurrence-item:hover:not(:disabled) {
-  border-color: var(--tl-primary, #e64b12);
-  background: color-mix(in srgb, var(--tl-primary, #e64b12) 5%, var(--tl-background, #ffffff));
+  border-color: var(--tl-primary);
+  background: color-mix(in srgb, var(--tl-primary) 5%, var(--tl-background));
 }
 
 .occurrence-item:focus-visible {
@@ -78,12 +67,12 @@
 .occurrence-item:disabled {
   cursor: not-allowed;
   opacity: 0.6;
-  background: var(--tl-muted, #f1f5f9);
+  background: var(--tl-muted);
 }
 
 .occurrence-item.sold-out {
   opacity: 0.6;
-  background: var(--tl-muted, #f1f5f9);
+  background: var(--tl-muted);
 }
 
 .occurrence-info {
@@ -93,7 +82,7 @@
 .occurrence-date {
   font-weight: 600;
   font-size: 0.9375rem;
-  color: var(--tl-foreground, #0f172a);
+  color: var(--tl-foreground);
   margin-bottom: 0.25rem;
 }
 
@@ -120,7 +109,7 @@
 
 .status-arrow {
   font-size: 1.25rem;
-  color: var(--tl-primary, #e64b12);
+  color: var(--tl-primary);
 }
 
 /* =========================================================================
@@ -136,7 +125,7 @@
 .slots-date-header {
   font-size: 1.125rem;
   font-weight: 600;
-  color: var(--tl-foreground, #0f172a);
+  color: var(--tl-foreground);
   padding-bottom: 0.5rem;
   border-bottom: 1px solid var(--tl-border);
 }
@@ -153,8 +142,8 @@
   align-items: center;
   justify-content: center;
   padding: 0.75rem 0.5rem;
-  background: var(--tl-background, #ffffff);
-  border: 1px solid var(--tl-border, #e2e8f0);
+  background: var(--tl-background);
+  border: 1px solid var(--tl-border);
   border-radius: var(--tl-radius);
   cursor: pointer;
   transition: all 0.15s ease;
@@ -163,8 +152,8 @@
 }
 
 .time-slot:hover:not(:disabled) {
-  border-color: var(--tl-primary, #e64b12);
-  background: color-mix(in srgb, var(--tl-primary, #e64b12) 5%, var(--tl-background, #ffffff));
+  border-color: var(--tl-primary);
+  background: color-mix(in srgb, var(--tl-primary) 5%, var(--tl-background));
 }
 
 .time-slot:focus-visible {
@@ -175,18 +164,18 @@
 .time-slot:disabled {
   cursor: not-allowed;
   opacity: 0.6;
-  background: var(--tl-muted, #f1f5f9);
+  background: var(--tl-muted);
 }
 
 .time-slot.sold-out {
   opacity: 0.6;
-  background: var(--tl-muted, #f1f5f9);
+  background: var(--tl-muted);
 }
 
 .slot-time {
   font-size: 0.9375rem;
   font-weight: 600;
-  color: var(--tl-foreground, #0f172a);
+  color: var(--tl-foreground);
 }
 
 .slot-sold-out {
@@ -230,7 +219,7 @@
 }
 
 .calendar-panel {
-  border: 1px solid var(--tl-border, #e2e8f0);
+  border: 1px solid var(--tl-border);
   border-radius: var(--tl-radius);
   padding: 1rem;
 }
@@ -246,7 +235,7 @@
 .month-label {
   font-size: 1rem;
   font-weight: 600;
-  color: var(--tl-foreground, #0f172a);
+  color: var(--tl-foreground);
   flex: 1;
 }
 
@@ -262,16 +251,16 @@
   width: 1.75rem;
   height: 1.75rem;
   padding: 0;
-  background: var(--tl-background, #ffffff);
-  border: 1px solid var(--tl-border, #e2e8f0);
+  background: var(--tl-background);
+  border: 1px solid var(--tl-border);
   border-radius: var(--tl-radius);
   cursor: pointer;
   transition: all 0.15s ease;
-  color: var(--tl-foreground, #0f172a);
+  color: var(--tl-foreground);
 }
 
 .nav-button:hover:not(:disabled) {
-  background: var(--tl-muted, #f1f5f9);
+  background: var(--tl-muted);
 }
 
 .nav-button:disabled {
@@ -309,7 +298,7 @@
   justify-content: center;
   aspect-ratio: 1;
   padding: 0.1875rem;
-  background: var(--tl-background, #ffffff);
+  background: var(--tl-background);
   border: 1px solid transparent;
   border-radius: var(--tl-radius);
   cursor: default;
@@ -317,7 +306,7 @@
   font-family: inherit;
   font-size: 0.9375rem;
   font-weight: 500;
-  color: var(--tl-foreground, #0f172a);
+  color: var(--tl-foreground);
 }
 
 .calendar-day.other-month {
@@ -327,35 +316,35 @@
 
 .calendar-day.has-occurrences {
   cursor: pointer;
-  background: color-mix(in srgb, var(--tl-primary, #e64b12) 10%, var(--tl-background, #ffffff));
+  background: color-mix(in srgb, var(--tl-primary) 10%, var(--tl-background));
   border-color: transparent;
   font-weight: 600;
-  color: var(--tl-primary, #e64b12);
+  color: var(--tl-primary);
 }
 
 .calendar-day.has-occurrences:hover {
-  background: color-mix(in srgb, var(--tl-primary, #e64b12) 18%, var(--tl-background, #ffffff));
+  background: color-mix(in srgb, var(--tl-primary) 18%, var(--tl-background));
   border-color: transparent;
 }
 
 .calendar-day.has-occurrences.sold-out {
-  background: var(--tl-muted, #f1f5f9);
+  background: var(--tl-muted);
   border-color: transparent;
 }
 
 .calendar-day.has-occurrences.sold-out:hover {
-  background: color-mix(in srgb, var(--tl-muted, #f1f5f9) 80%, var(--tl-background, #ffffff));
+  background: color-mix(in srgb, var(--tl-muted) 80%, var(--tl-background));
   border-color: transparent;
 }
 
 .calendar-day.selected {
-  background: var(--tl-primary, #e64b12);
-  border-color: var(--tl-primary, #e64b12);
-  color: var(--tl-primary-foreground, #ffffff);
+  background: var(--tl-primary);
+  border-color: var(--tl-primary);
+  color: var(--tl-primary-foreground);
 }
 
 .calendar-day.selected:hover {
-  background: color-mix(in srgb, var(--tl-primary, #e64b12) 90%, black);
+  background: color-mix(in srgb, var(--tl-primary) 90%, black);
 }
 
 .calendar-day.selected .occurrence-dot {
@@ -394,7 +383,7 @@
   align-items: center;
   justify-content: center;
   color: var(--tl-muted-foreground);
-  background: var(--tl-muted, #f1f5f9);
+  background: var(--tl-muted);
   border-radius: var(--tl-radius);
   padding: 2rem 1rem;
   text-align: center;
@@ -405,7 +394,7 @@
 .selected-date-header {
   font-size: 0.9375rem;
   font-weight: 600;
-  color: var(--tl-foreground, #0f172a);
+  color: var(--tl-foreground);
   padding-bottom: 0.625rem;
   margin-bottom: 0.625rem;
 }
@@ -422,8 +411,8 @@
   justify-content: space-between;
   width: 100%;
   padding: 0.625rem 0.875rem;
-  background: var(--tl-background, #ffffff);
-  border: 1px solid var(--tl-border, #e2e8f0);
+  background: var(--tl-background);
+  border: 1px solid var(--tl-border);
   border-radius: var(--tl-radius);
   text-align: left;
   cursor: pointer;
@@ -432,8 +421,8 @@
 }
 
 .time-slot-item:hover:not(:disabled) {
-  border-color: var(--tl-primary, #e64b12);
-  background: color-mix(in srgb, var(--tl-primary, #e64b12) 5%, var(--tl-background, #ffffff));
+  border-color: var(--tl-primary);
+  background: color-mix(in srgb, var(--tl-primary) 5%, var(--tl-background));
 }
 
 .time-slot-item:focus-visible {
@@ -444,12 +433,12 @@
 .time-slot-item:disabled {
   cursor: not-allowed;
   opacity: 0.6;
-  background: var(--tl-muted, #f1f5f9);
+  background: var(--tl-muted);
 }
 
 .time-slot-item.sold-out {
   opacity: 0.6;
-  background: var(--tl-muted, #f1f5f9);
+  background: var(--tl-muted);
 }
 
 .time-slot-item .slot-time {
@@ -538,7 +527,7 @@
 }
 
 .skeleton {
-  background: var(--tl-muted, #f1f5f9);
+  background: var(--tl-muted);
   border-radius: var(--tl-radius);
   animation: skeleton-pulse 1.5s ease-in-out infinite;
 }
@@ -557,7 +546,7 @@
 
 /* Skeleton for calendar view */
 .skeleton-calendar {
-  border: 1px solid var(--tl-border, #e2e8f0);
+  border: 1px solid var(--tl-border);
   border-radius: var(--tl-radius);
   padding: 1rem;
   min-height: 350px;
@@ -629,7 +618,7 @@
 }
 
 .error-message {
-  color: var(--tl-foreground, #0f172a);
+  color: var(--tl-foreground);
   font-size: 0.9375rem;
   max-width: 400px;
 }
@@ -637,8 +626,8 @@
 .retry-button {
   margin-top: 0.5rem;
   padding: 0.625rem 1.25rem;
-  background: var(--tl-primary, #e64b12);
-  color: var(--tl-primary-foreground, #ffffff);
+  background: var(--tl-primary);
+  color: var(--tl-primary-foreground);
   border: none;
   border-radius: var(--tl-radius);
   font-family: inherit;
@@ -649,7 +638,7 @@
 }
 
 .retry-button:hover {
-  background: color-mix(in srgb, var(--tl-primary, #e64b12) 90%, black);
+  background: color-mix(in srgb, var(--tl-primary) 90%, black);
 }
 
 .retry-button:focus-visible {

package/dist/collection/components/tl-occurrence-selector/tl-occurrence-selector.js

@@ -647,7 +647,7 @@ export class TlOccurrenceSelector {
                     "references": {
                         "TlOccurrenceSelectorTheme": {
                             "location": "local",
-                            "path": "/home/runner/work/live-elements/live-elements/src/components/tl-occurrence-selector/tl-occurrence-selector.tsx",
+                            "path": "/home/runner/work/live/live/packages/elements/src/components/tl-occurrence-selector/tl-occurrence-selector.tsx",
                             "id": "src/components/tl-occurrence-selector/tl-occurrence-selector.tsx::TlOccurrenceSelectorTheme"
                         }
                     }
@@ -691,7 +691,7 @@ export class TlOccurrenceSelector {
                     "references": {
                         "TlOccurrence": {
                             "location": "local",
-                            "path": "/home/runner/work/live-elements/live-elements/src/components/tl-occurrence-selector/tl-occurrence-selector.tsx",
+                            "path": "/home/runner/work/live/live/packages/elements/src/components/tl-occurrence-selector/tl-occurrence-selector.tsx",
                             "id": "src/components/tl-occurrence-selector/tl-occurrence-selector.tsx::TlOccurrence"
                         }
                     }

package/dist/collection/components/tl-order-confirmation/tl-order-confirmation.css

@@ -1,7 +1,7 @@
 :host {
   display: block;
-  font-family: var(--tl-font-family, system-ui, sans-serif);
-  color: var(--tl-foreground, #111827);
+  font-family: var(--tl-font-family);
+  color: var(--tl-foreground);
 }
 
 .confirmation {
@@ -11,13 +11,13 @@
 .check {
   width: 4rem;
   height: 4rem;
-  margin: 0 auto var(--tl-spacing-4, 1rem);
+  margin: 0 auto var(--tl-spacing-4);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 9999px;
-  background: var(--tl-success, #10b981);
-  color: var(--tl-success-foreground, #ffffff);
+  background: var(--tl-success);
+  color: var(--tl-success-foreground);
 }
 
 .check svg {
@@ -26,49 +26,49 @@
 }
 
 .title {
-  margin: 0 0 var(--tl-spacing-2, 0.5rem);
+  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, 1.5rem);
-  color: var(--tl-muted-foreground, #6b7280);
+  margin: 0 0 var(--tl-spacing-6);
+  color: var(--tl-muted-foreground);
 }
 
 .error {
-  margin: 0 0 var(--tl-spacing-6, 1.5rem);
+  margin: 0 0 var(--tl-spacing-6);
   font-size: 0.875rem;
-  color: var(--tl-error, #ef4444);
+  color: var(--tl-error);
 }
 
 .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);
+  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, 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);
+  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, 1rem);
+  gap: var(--tl-spacing-4);
   font-size: 0.875rem;
 }
 
 .row dt {
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .row dd {
@@ -78,7 +78,7 @@
 }
 
 .reference {
-  font-family: var(--tl-font-family-mono, ui-monospace, monospace);
+  font-family: var(--tl-font-family-mono);
   font-weight: 600;
 }
 
@@ -87,40 +87,40 @@
   margin: 0;
   padding: 0;
   display: grid;
-  gap: var(--tl-spacing-2, 0.5rem);
+  gap: var(--tl-spacing-2);
 }
 
 .line {
   display: flex;
   justify-content: space-between;
-  gap: var(--tl-spacing-4, 1rem);
+  gap: var(--tl-spacing-4);
   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);
+  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, 0.25rem);
+  gap: var(--tl-spacing-1);
   font-size: 0.875rem;
 }
 
 .total-row {
   display: flex;
   justify-content: space-between;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .total-row.discount {
-  color: var(--tl-success, #10b981);
+  color: var(--tl-success);
 }
 
 .total-row.total {
-  margin-top: var(--tl-spacing-1, 0.25rem);
+  margin-top: var(--tl-spacing-1);
   font-size: 1rem;
   font-weight: 600;
-  color: var(--tl-foreground, #111827);
+  color: var(--tl-foreground);
 }
 
 .tickets {
@@ -128,24 +128,24 @@
 }
 
 .subtitle {
-  margin: 0 0 var(--tl-spacing-4, 1rem);
+  margin: 0 0 var(--tl-spacing-4);
   font-size: 1.125rem;
   font-weight: 600;
 }
 
 .hint {
-  margin: var(--tl-spacing-3, 0.75rem) 0 0;
+  margin: var(--tl-spacing-3) 0 0;
   font-size: 0.75rem;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 /* Skeleton */
 .skeleton-line,
 .skeleton-block {
-  background: var(--tl-secondary, #f3f4f6);
-  border-radius: var(--tl-radius-md, 0.5rem);
+  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, 0.75rem);
+  margin: 0 auto var(--tl-spacing-3);
 }
 
 .skeleton-line {

package/dist/collection/components/tl-order-confirmation/tl-order-confirmation.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { onSDKEvent, whenSDK } from "../../utils/sdk-connector";
-import { errorMessage, formatDateTime, formatPrice, orderCustomerEmail, orderEventName, resolveOccurrence, ticketItems, } from "../../utils/order-summary";
+import { errorMessage, formatDateTime, formatPrice, orderCustomerEmail, orderEventName, orderTotals, resolveOccurrence, ticketItems, } from "../../utils/order-summary";
 /**
  * tl-order-confirmation - the "thank you" page block: order reference,
  * customer email, event and date, ticket lines, totals, then the tickets
@@ -120,12 +120,14 @@ export class TlOrderConfirmation {
         const startsAt = this.occurrence?.startsAt;
         return (h("dl", { class: "rows" }, h("div", { class: "row" }, h("dt", null, "Order reference"), h("dd", { class: "reference" }, order.orderNumber)), email && (h("div", { class: "row" }, h("dt", null, "Email"), h("dd", null, email))), eventName && (h("div", { class: "row" }, h("dt", null, "Event"), h("dd", null, eventName))), startsAt && (h("div", { class: "row" }, h("dt", null, "Date"), h("dd", null, 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 (h("div", { class: "totals" }, h("div", { class: "total-row" }, h("span", null, "Subtotal"), h("span", null, formatPrice(order.subtotal, c))), fees > 0 && (h("div", { class: "total-row" }, h("span", null, "Fees"), h("span", null, formatPrice(order.totalFees, c)))), tax > 0 && (h("div", { class: "total-row" }, h("span", null, "Tax"), h("span", null, formatPrice(order.totalTax, c)))), discounts > 0 && (h("div", { class: "total-row discount" }, h("span", null, "Discount"), h("span", null, "-", formatPrice(order.totalDiscounts, c)))), h("div", { class: "total-row total" }, h("span", null, "Total"), h("span", null, formatPrice(order.total, c)))));
+        const totals = orderTotals(order);
+        const c = totals.currency;
+        return (h("div", { class: "totals" }, h("div", { class: "total-row" }, h("span", null, "Subtotal"), h("span", null, formatPrice(totals.subtotal, c))), totals.showFee && (h("div", { class: "total-row fee" }, h("span", null, totals.feeLabel), h("span", null, formatPrice(totals.fees, c)))), totals.tax > 0 && (h("div", { class: "total-row" }, h("span", null, "Tax"), h("span", null, formatPrice(totals.tax, c)))), totals.discount > 0 && (h("div", { class: "total-row discount" }, h("span", null, "Discount"), h("span", null, "-", formatPrice(totals.discount, c)))), h("div", { class: "total-row total" }, h("span", null, "Total"), h("span", null, formatPrice(totals.total, c)))));
     }
     render() {
         if (this.paymentFailed) {

package/dist/collection/components/tl-order-tickets/tl-order-tickets.css

@@ -1,11 +1,11 @@
 :host {
   display: block;
-  font-family: var(--tl-font-family, system-ui, sans-serif);
+  font-family: var(--tl-font-family);
 }
 
 .grid {
   display: grid;
-  gap: var(--tl-spacing-4, 1rem);
+  gap: var(--tl-spacing-4);
   grid-template-columns: 1fr;
 }
 
@@ -19,28 +19,28 @@
 }
 
 .state {
-  padding: var(--tl-spacing-6, 1.5rem);
+  padding: var(--tl-spacing-6);
   text-align: center;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
   font-size: 0.875rem;
 }
 
 .state.error {
-  color: var(--tl-error, #dc2626);
+  color: var(--tl-error);
 }
 
 .state.issuing {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--tl-spacing-2, 0.5rem);
+  gap: var(--tl-spacing-2);
 }
 
 .spinner {
   width: 0.875rem;
   height: 0.875rem;
-  border: 2px solid var(--tl-border, #e5e7eb);
-  border-top-color: var(--tl-primary, #6366f1);
+  border: 2px solid var(--tl-border);
+  border-top-color: var(--tl-primary);
   border-radius: 50%;
   animation: tl-spin 0.7s linear infinite;
   flex: none;
@@ -57,6 +57,6 @@
 @media (prefers-reduced-motion: reduce) {
   .spinner {
     animation: none;
-    border-top-color: var(--tl-border, #e5e7eb);
+    border-top-color: var(--tl-border);
   }
 }