@ticketlayer/elements 0.3.3 → 0.4.0

package/dist/collection/components/tl-promo-code/tl-promo-code.css

@@ -1,46 +1,46 @@
 :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);
 }
 
 .field {
   display: flex;
-  gap: var(--tl-spacing-2, 0.5rem);
+  gap: var(--tl-spacing-2);
 }
 
 .input {
   flex: 1;
   min-width: 0;
-  padding: var(--tl-spacing-3, 0.75rem);
+  padding: var(--tl-spacing-3);
   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);
+  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, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .input:focus {
-  outline: 2px solid var(--tl-primary, #6366f1);
+  outline: 2px solid var(--tl-primary);
   outline-offset: 1px;
 }
 
 .apply {
-  padding: var(--tl-spacing-3, 0.75rem) var(--tl-spacing-4, 1rem);
+  padding: var(--tl-spacing-3) var(--tl-spacing-4);
   font: inherit;
   font-size: 0.875rem;
   font-weight: 500;
-  color: var(--tl-primary-foreground, #ffffff);
-  background: var(--tl-primary, #6366f1);
+  color: var(--tl-primary-foreground);
+  background: var(--tl-primary);
   border: none;
-  border-radius: var(--tl-radius-md, 0.5rem);
+  border-radius: var(--tl-radius-md);
   cursor: pointer;
   white-space: nowrap;
 }
@@ -56,45 +56,45 @@
 }
 
 .error {
-  margin: var(--tl-spacing-2, 0.5rem) 0 0;
+  margin: var(--tl-spacing-2) 0 0;
   font-size: 0.8125rem;
-  color: var(--tl-error, #ef4444);
+  color: var(--tl-error);
 }
 
 .applied {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--tl-spacing-3, 0.75rem);
-  padding: var(--tl-spacing-3, 0.75rem);
+  gap: var(--tl-spacing-3);
+  padding: var(--tl-spacing-3);
   font-size: 0.875rem;
-  background: var(--tl-muted, #f9fafb);
-  border: 1px solid var(--tl-border, #e5e7eb);
-  border-radius: var(--tl-radius-md, 0.5rem);
+  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, 0.5rem);
+  gap: var(--tl-spacing-2);
 }
 
 .icon {
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;
-  color: var(--tl-success, #10b981);
+  color: var(--tl-success);
 }
 
 .code {
-  font-family: var(--tl-font-family-mono, ui-monospace, monospace);
+  font-family: var(--tl-font-family-mono);
 }
 
 .link {
   padding: 0;
   font: inherit;
   font-size: 0.8125rem;
-  color: var(--tl-primary, #6366f1);
+  color: var(--tl-primary);
   background: none;
   border: none;
   cursor: pointer;

package/dist/collection/components/tl-seat-map/tl-seat-map.css

@@ -4,14 +4,14 @@
 
 :host {
   display: block;
-  font-family: var(--tl-font-family, system-ui, -apple-system, sans-serif);
+  font-family: var(--tl-font-family);
 }
 
 .seat-map-container {
   position: relative;
   overflow: hidden;
-  border-radius: var(--tl-radius-md, 0.5rem);
-  background: var(--tl-color-background, #ffffff);
+  border-radius: var(--tl-radius-md);
+  background: var(--tl-color-background);
 }
 
 .seat-map-iframe {
@@ -32,22 +32,22 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--tl-color-background, #ffffff);
-  color: var(--tl-color-foreground, #0f172a);
+  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, #64748b);
+  color: var(--tl-color-muted-foreground);
 }
 
 .spinner {
   width: 40px;
   height: 40px;
-  border: 3px solid var(--tl-color-border, #e2e8f0);
-  border-top-color: var(--tl-color-primary, #e64b12);
+  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;
 }
@@ -66,8 +66,8 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--tl-color-background, #ffffff);
-  color: var(--tl-color-error, #ef4444);
+  background: var(--tl-color-background);
+  color: var(--tl-color-error);
   padding: 1.5rem;
   text-align: center;
 }

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

@@ -1,13 +1,13 @@
 :host {
   display: block;
-  font-family: var(--tl-font-family, system-ui, sans-serif);
+  font-family: var(--tl-font-family);
 }
 
 .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);
+  border: 1px solid var(--tl-border);
+  border-radius: var(--tl-radius-lg);
+  background: var(--tl-card);
+  padding: var(--tl-spacing-5);
   text-align: center;
 }
 
@@ -39,7 +39,7 @@
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 0.25rem 0.5rem;
-  border-radius: var(--tl-radius-sm, 0.25rem);
+  border-radius: var(--tl-radius-sm);
   background: rgba(17, 24, 39, 0.85);
   color: #ffffff;
   font-size: 0.7rem;
@@ -51,37 +51,37 @@
 .name {
   margin: 1rem 0 0;
   font-weight: 600;
-  color: var(--tl-foreground, #111827);
+  color: var(--tl-foreground);
 }
 
 .meta {
   margin: 0.125rem 0 0;
   font-size: 0.875rem;
-  color: var(--tl-muted-foreground, #6b7280);
+  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, #9ca3af);
+  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, #e5e7eb);
-  border-radius: var(--tl-radius-md, 0.5rem);
+  border: 1px solid var(--tl-border);
+  border-radius: var(--tl-radius-md);
   background: transparent;
-  color: var(--tl-foreground, #111827);
+  color: var(--tl-foreground);
   font-size: 0.875rem;
   font-weight: 500;
   cursor: pointer;
 }
 
 .download:hover {
-  background: var(--tl-muted, #f3f4f6);
+  background: var(--tl-muted);
 }
 
 .download:disabled {

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

@@ -1,33 +1,33 @@
 :host {
   /* Map SDK variables (--tl-*) to component variables (--tl-color-*) */
   /* This allows the component to inherit theme from SDK */
-  --tl-color-primary: var(--tl-primary, #6366f1);
-  --tl-color-primary-foreground: var(--tl-primary-foreground, #ffffff);
-  --tl-color-background: var(--tl-background, #ffffff);
-  --tl-color-foreground: var(--tl-foreground, #111827);
-  --tl-color-muted: var(--tl-muted, #f3f4f6);
-  --tl-color-muted-foreground: var(--tl-muted-foreground, #6b7280);
-  --tl-color-border: var(--tl-border, #e5e7eb);
-  --tl-color-destructive: var(--tl-error, #ef4444);
+  --tl-color-primary: var(--tl-primary);
+  --tl-color-primary-foreground: var(--tl-primary-foreground);
+  --tl-color-background: var(--tl-background);
+  --tl-color-foreground: var(--tl-foreground);
+  --tl-color-muted: var(--tl-muted);
+  --tl-color-muted-foreground: var(--tl-muted-foreground);
+  --tl-color-border: var(--tl-border);
+  --tl-color-destructive: var(--tl-error);
 
   display: block;
-  font-family: var(--tl-font-family, system-ui, sans-serif);
+  font-family: var(--tl-font-family);
 }
 
 .ticket-selector {
-  background: var(--tl-color-background, #ffffff);
+  background: var(--tl-color-background);
 }
 
 /* Skeleton loading */
 .skeleton-container {
-  padding: var(--tl-spacing-4, 1rem);
+  padding: var(--tl-spacing-4);
 }
 
 .skeleton-row {
   height: 60px;
-  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;
 }
 
@@ -38,8 +38,8 @@
 
 /* Error state */
 .error-state {
-  padding: var(--tl-spacing-4, 1rem);
-  color: var(--tl-color-destructive, #ef4444);
+  padding: var(--tl-spacing-4);
+  color: var(--tl-color-destructive);
 }
 
 .error-message {
@@ -49,7 +49,7 @@
 
 /* Ticket list */
 .ticket-list {
-  margin-bottom: var(--tl-spacing-4, 1rem);
+  margin-bottom: var(--tl-spacing-4);
 }
 
 /* Ticket row */
@@ -57,8 +57,8 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  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);
 }
 
 .ticket-row.sold-out {
@@ -73,13 +73,13 @@
 .ticket-header {
   display: flex;
   align-items: center;
-  gap: var(--tl-spacing-2, 0.5rem);
+  gap: var(--tl-spacing-2);
   flex-wrap: wrap;
 }
 
 .ticket-name {
   font-weight: 600;
-  color: var(--tl-color-foreground, #111827);
+  color: var(--tl-color-foreground);
   font-size: 15px;
 }
 
@@ -91,43 +91,43 @@
 }
 
 .status-badge.limited {
-  background-color: var(--tl-color-warning-bg, #fef3c7);
-  color: var(--tl-color-warning, #d97706);
+  background-color: var(--tl-color-warning-bg);
+  color: var(--tl-color-warning);
 }
 
 .status-badge.sold-out {
-  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);
 }
 
 .ticket-description {
-  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);
 }
 
 .ticket-price {
-  margin: var(--tl-spacing-1, 0.25rem) 0 0;
+  margin: var(--tl-spacing-1) 0 0;
   font-size: 14px;
   font-weight: 600;
-  color: var(--tl-color-foreground, #111827);
+  color: var(--tl-color-foreground);
 }
 
 /* Quantity controls */
 .quantity-controls {
   display: flex;
   align-items: center;
-  gap: var(--tl-spacing-2, 0.5rem);
-  margin-left: var(--tl-spacing-4, 1rem);
+  gap: var(--tl-spacing-2);
+  margin-left: var(--tl-spacing-4);
 }
 
 .qty-btn {
   width: 32px;
   height: 32px;
-  border-radius: var(--tl-radius-sm, 0.25rem);
-  border: 1px solid var(--tl-color-border, #d1d5db);
-  background: var(--tl-color-background, #ffffff);
-  color: var(--tl-color-foreground, #111827);
+  border-radius: var(--tl-radius-sm);
+  border: 1px solid var(--tl-color-border);
+  background: var(--tl-color-background);
+  color: var(--tl-color-foreground);
   font-size: 18px;
   font-weight: 500;
   cursor: pointer;
@@ -138,8 +138,8 @@
 }
 
 .qty-btn:hover:not(:disabled) {
-  background-color: var(--tl-color-muted, #f3f4f6);
-  border-color: var(--tl-color-border-hover, #9ca3af);
+  background-color: var(--tl-color-muted);
+  border-color: var(--tl-color-border-hover);
 }
 
 .qty-btn:disabled {
@@ -152,7 +152,7 @@
   text-align: center;
   font-weight: 600;
   font-size: 16px;
-  color: var(--tl-color-foreground, #111827);
+  color: var(--tl-color-foreground);
 }
 
 /* Success message */
@@ -160,12 +160,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--tl-spacing-2, 0.5rem);
-  padding: var(--tl-spacing-3, 0.75rem);
-  background-color: var(--tl-color-success, #10b981);
+  gap: var(--tl-spacing-2);
+  padding: var(--tl-spacing-3);
+  background-color: var(--tl-color-success);
   color: #ffffff;
-  border-radius: var(--tl-radius-md, 0.5rem);
-  margin-bottom: var(--tl-spacing-3, 0.75rem);
+  border-radius: var(--tl-radius-md);
+  margin-bottom: var(--tl-spacing-3);
   font-weight: 500;
   font-size: 14px;
 }
@@ -178,11 +178,11 @@
 /* Add to cart button */
 .add-to-cart-btn {
   width: 100%;
-  padding: var(--tl-spacing-3, 0.75rem) var(--tl-spacing-4, 1rem);
-  border-radius: var(--tl-radius-md, 0.5rem);
+  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;
@@ -199,7 +199,32 @@
 
 .add-to-cart-btn.disabled,
 .add-to-cart-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;
 }
+
+/* Selection totals: only rendered when the surface quotes a fee, so the
+   buyer sees the booking fee before the tickets reach the cart. */
+.selection-totals {
+  padding: var(--tl-spacing-3) 0;
+  border-top: 1px solid var(--tl-color-border);
+}
+
+.selection-totals .total-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--tl-spacing-1) 0;
+  font-size: 14px;
+  color: var(--tl-color-muted-foreground);
+}
+
+.selection-totals .total-row.total {
+  font-size: 16px;
+  font-weight: 700;
+  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);
+}