@ticketlayer/elements 0.3.2 → 0.4.0

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;
 }
 

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

@@ -1,10 +1,10 @@
 :host {
-  --_bg: var(--tl-background, #ffffff);
-  --_fg: var(--tl-foreground, #111827);
-  --_muted-fg: var(--tl-muted-foreground, #6b7280);
-  --_muted: var(--tl-muted, #f3f4f6);
-  --_border: var(--tl-border, #e5e7eb);
-  --_font: var(--tl-font-family, system-ui, -apple-system, sans-serif);
+  --_bg: var(--tl-background);
+  --_fg: var(--tl-foreground);
+  --_muted-fg: var(--tl-muted-foreground);
+  --_muted: var(--tl-muted);
+  --_border: var(--tl-border);
+  --_font: var(--tl-font-family);
   font-family: var(--_font);
 }
 

package/dist/collection/components/tl-checkout-wrapper/tl-checkout-wrapper.css

@@ -10,9 +10,9 @@ tl-checkout-wrapper,
 
 tl-checkout-wrapper:focus,
 .tl-checkout-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-checkout-wrapper[disabled],

package/dist/collection/components/tl-event-card/tl-event-card.css

@@ -1,11 +1,11 @@
 :host {
   display: block;
-  font-family: var(--tl-font-family, system-ui, sans-serif);
+  font-family: var(--tl-font-family);
 }
 
 .event-card {
-  background: var(--tl-secondary, #f3f4f6);
-  border-radius: var(--tl-radius-lg, 0.75rem);
+  background: var(--tl-secondary);
+  border-radius: var(--tl-radius-lg);
   overflow: hidden;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   cursor: pointer;
@@ -21,7 +21,7 @@
   position: relative;
   aspect-ratio: 16 / 9;
   overflow: hidden;
-  background: var(--tl-muted, #f9fafb);
+  background: var(--tl-muted);
 }
 
 .event-image {
@@ -41,7 +41,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .status-container {
@@ -55,26 +55,26 @@
   padding: 0.25rem 0.5rem;
   font-size: 0.75rem;
   font-weight: 500;
-  border-radius: var(--tl-radius-sm, 0.25rem);
+  border-radius: var(--tl-radius-sm);
 }
 
 .status-available {
-  background: var(--tl-success, #10b981);
-  color: var(--tl-success-foreground, #ffffff);
+  background: var(--tl-success);
+  color: var(--tl-success-foreground);
 }
 
 .status-limited {
-  background: var(--tl-warning, #f59e0b);
-  color: var(--tl-warning-foreground, #ffffff);
+  background: var(--tl-warning);
+  color: var(--tl-warning-foreground);
 }
 
 .status-sold-out {
-  background: var(--tl-error, #ef4444);
-  color: var(--tl-error-foreground, #ffffff);
+  background: var(--tl-error);
+  color: var(--tl-error-foreground);
 }
 
 .content {
-  padding: var(--tl-spacing-4, 1rem);
+  padding: var(--tl-spacing-4);
 }
 
 .category {
@@ -83,19 +83,19 @@
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--tl-primary, #6366f1);
+  color: var(--tl-primary);
 }
 
 .title {
   margin: 0.25rem 0 0;
   font-size: 1.125rem;
   font-weight: 600;
-  color: var(--tl-foreground, #111827);
+  color: var(--tl-foreground);
   line-height: 1.3;
 }
 
 .event-card:hover .title {
-  color: var(--tl-primary, #6366f1);
+  color: var(--tl-primary);
 }
 
 .meta {
@@ -104,7 +104,7 @@
   gap: 0.5rem;
   margin: 0.5rem 0 0;
   font-size: 0.875rem;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .meta:first-of-type {
@@ -120,7 +120,7 @@
 .description {
   margin: 0.75rem 0 0;
   font-size: 0.875rem;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
   line-height: 1.5;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -140,8 +140,8 @@
 .skeleton-line {
   height: 0.875rem;
   margin-top: 0.5rem;
-  background: var(--tl-muted, #f9fafb);
-  border-radius: var(--tl-radius-sm, 0.25rem);
+  background: var(--tl-muted);
+  border-radius: var(--tl-radius-sm);
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
@@ -154,9 +154,9 @@
 }
 
 .card-error {
-  padding: var(--tl-spacing-4, 1rem);
+  padding: var(--tl-spacing-4);
   font-size: 0.875rem;
-  color: var(--tl-error, #ef4444);
+  color: var(--tl-error);
   cursor: default;
 }
 

package/dist/collection/components/tl-event-card/tl-event-card.js

@@ -121,7 +121,7 @@ export class TlEventCard {
                     "references": {
                         "TlEventCardEvent": {
                             "location": "local",
-                            "path": "/home/runner/work/live-elements/live-elements/src/components/tl-event-card/tl-event-card.tsx",
+                            "path": "/home/runner/work/live/live/packages/elements/src/components/tl-event-card/tl-event-card.tsx",
                             "id": "src/components/tl-event-card/tl-event-card.tsx::TlEventCardEvent"
                         }
                     }

package/dist/collection/components/tl-event-list/tl-event-list.css

@@ -1,11 +1,11 @@
 :host {
   display: block;
-  font-family: var(--tl-font-family, system-ui, sans-serif);
+  font-family: var(--tl-font-family);
 }
 
 .event-grid {
   display: grid;
-  gap: var(--tl-spacing-6, 1.5rem);
+  gap: var(--tl-spacing-6);
 }
 
 .cols-1 {
@@ -41,19 +41,19 @@
 
 /* Skeleton Loading */
 .skeleton-card {
-  background: var(--tl-secondary, #f3f4f6);
-  border-radius: var(--tl-radius-lg, 0.75rem);
+  background: var(--tl-secondary);
+  border-radius: var(--tl-radius-lg);
   overflow: hidden;
 }
 
 .skeleton-image {
   aspect-ratio: 16 / 9;
-  background: var(--tl-muted, #f9fafb);
+  background: var(--tl-muted);
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
 .skeleton-content {
-  padding: var(--tl-spacing-4, 1rem);
+  padding: var(--tl-spacing-4);
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -61,8 +61,8 @@
 
 .skeleton-line {
   height: 1rem;
-  background: var(--tl-muted, #f9fafb);
-  border-radius: var(--tl-radius-sm, 0.25rem);
+  background: var(--tl-muted);
+  border-radius: var(--tl-radius-sm);
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
@@ -91,44 +91,44 @@
 /* Error State */
 .error-state {
   background: rgba(239, 68, 68, 0.1);
-  border: 1px solid var(--tl-error, #ef4444);
-  border-radius: var(--tl-radius-lg, 0.75rem);
-  padding: var(--tl-spacing-4, 1rem);
+  border: 1px solid var(--tl-error);
+  border-radius: var(--tl-radius-lg);
+  padding: var(--tl-spacing-4);
 }
 
 .error-title {
   margin: 0;
   font-weight: 500;
-  color: var(--tl-error, #ef4444);
+  color: var(--tl-error);
 }
 
 .error-message {
   margin: 0.25rem 0 0;
   font-size: 0.875rem;
-  color: var(--tl-error, #ef4444);
+  color: var(--tl-error);
 }
 
 /* Empty State */
 .empty-state {
   text-align: center;
-  padding: var(--tl-spacing-8, 2rem) var(--tl-spacing-4, 1rem);
+  padding: var(--tl-spacing-8) var(--tl-spacing-4);
 }
 
 .empty-icon {
   width: 4rem;
   height: 4rem;
   margin: 0 auto 1rem;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .empty-title {
   margin: 0;
   font-size: 1.25rem;
   font-weight: 600;
-  color: var(--tl-foreground, #111827);
+  color: var(--tl-foreground);
 }
 
 .empty-message {
   margin: 0.5rem 0 0;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }

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

@@ -1,17 +1,17 @@
 :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);
 }
 
 .login {
   display: flex;
   flex-direction: column;
-  gap: var(--tl-spacing-3, 0.75rem);
-  padding: var(--tl-spacing-6, 1.5rem);
-  background: var(--tl-background, #ffffff);
-  border: 1px solid var(--tl-border, #e5e7eb);
-  border-radius: var(--tl-radius-lg, 0.75rem);
+  gap: var(--tl-spacing-3);
+  padding: var(--tl-spacing-6);
+  background: var(--tl-background);
+  border: 1px solid var(--tl-border);
+  border-radius: var(--tl-radius-lg);
 }
 
 .title {
@@ -23,7 +23,7 @@
 .lead {
   margin: 0;
   font-size: 0.875rem;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .label {
@@ -32,22 +32,22 @@
 }
 
 .input {
-  padding: var(--tl-spacing-3, 0.75rem);
+  padding: var(--tl-spacing-3);
   font: inherit;
   font-size: 0.9375rem;
-  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);
 }
 
 .input:focus {
-  outline: 2px solid var(--tl-primary, #6366f1);
+  outline: 2px solid var(--tl-primary);
   outline-offset: 1px;
 }
 
 .code-input {
-  font-family: var(--tl-font-family-mono, ui-monospace, monospace);
+  font-family: var(--tl-font-family-mono);
   font-size: 1.25rem;
   letter-spacing: 0.25em;
   text-align: center;
@@ -55,17 +55,17 @@
 
 .primary,
 .secondary {
-  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.9375rem;
   font-weight: 600;
-  border-radius: var(--tl-radius-md, 0.5rem);
+  border-radius: var(--tl-radius-md);
   cursor: pointer;
 }
 
 .primary {
-  color: var(--tl-primary-foreground, #ffffff);
-  background: var(--tl-primary, #6366f1);
+  color: var(--tl-primary-foreground);
+  background: var(--tl-primary);
   border: none;
 }
 
@@ -74,9 +74,9 @@
 }
 
 .secondary {
-  color: var(--tl-foreground, #111827);
-  background: var(--tl-secondary, #f3f4f6);
-  border: 1px solid var(--tl-border, #e5e7eb);
+  color: var(--tl-foreground);
+  background: var(--tl-secondary);
+  border: 1px solid var(--tl-border);
 }
 
 .primary:disabled,
@@ -90,7 +90,7 @@
   padding: 0;
   font: inherit;
   font-size: 0.875rem;
-  color: var(--tl-primary, #6366f1);
+  color: var(--tl-primary);
   background: none;
   border: none;
   cursor: pointer;
@@ -104,19 +104,19 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--tl-spacing-4, 1rem);
+  gap: var(--tl-spacing-4);
 }
 
 .error {
   margin: 0;
   font-size: 0.8125rem;
-  color: var(--tl-error, #ef4444);
+  color: var(--tl-error);
 }
 
 .notice {
   margin: 0;
   font-size: 0.8125rem;
-  color: var(--tl-success, #10b981);
+  color: var(--tl-success);
 }
 
 .signed-in {

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

@@ -269,7 +269,7 @@ export class TlLogin {
                     "references": {
                         "TlAuthChanged": {
                             "location": "local",
-                            "path": "/home/runner/work/live-elements/live-elements/src/components/tl-login/tl-login.tsx",
+                            "path": "/home/runner/work/live/live/packages/elements/src/components/tl-login/tl-login.tsx",
                             "id": "src/components/tl-login/tl-login.tsx::TlAuthChanged"
                         }
                     }

package/dist/collection/components/tl-my-orders/tl-my-orders.css

@@ -1,13 +1,13 @@
 :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);
 }
 
 .orders {
   display: flex;
   flex-direction: column;
-  gap: var(--tl-spacing-4, 1rem);
+  gap: var(--tl-spacing-4);
 }
 
 .order-list {
@@ -16,20 +16,20 @@
   padding: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--tl-spacing-3, 0.75rem);
+  gap: var(--tl-spacing-3);
 }
 
 .order {
-  background: var(--tl-background, #ffffff);
-  border: 1px solid var(--tl-border, #e5e7eb);
-  border-radius: var(--tl-radius-lg, 0.75rem);
+  background: var(--tl-background);
+  border: 1px solid var(--tl-border);
+  border-radius: var(--tl-radius-lg);
   overflow: hidden;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
 .order:hover,
 .order.expanded {
-  border-color: var(--tl-primary, #6366f1);
+  border-color: var(--tl-primary);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
 }
 
@@ -37,9 +37,9 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--tl-spacing-4, 1rem);
+  gap: var(--tl-spacing-4);
   width: 100%;
-  padding: var(--tl-spacing-4, 1rem);
+  padding: var(--tl-spacing-4);
   font: inherit;
   color: inherit;
   text-align: left;
@@ -51,7 +51,7 @@
 .order-main {
   display: flex;
   flex-direction: column;
-  gap: var(--tl-spacing-1, 0.25rem);
+  gap: var(--tl-spacing-1);
   min-width: 0;
 }
 
@@ -60,7 +60,7 @@
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .order-event {
@@ -74,15 +74,15 @@
 .order-meta {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--tl-spacing-3, 0.75rem);
+  gap: var(--tl-spacing-3);
   font-size: 0.8125rem;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .order-side {
   display: flex;
   align-items: center;
-  gap: var(--tl-spacing-3, 0.75rem);
+  gap: var(--tl-spacing-3);
   flex-shrink: 0;
 }
 
@@ -95,34 +95,34 @@
   font-size: 0.75rem;
   font-weight: 500;
   border-radius: 9999px;
-  background: var(--tl-secondary, #f3f4f6);
-  color: var(--tl-secondary-foreground, #111827);
+  background: var(--tl-secondary);
+  color: var(--tl-secondary-foreground);
 }
 
 .status-success {
-  background: var(--tl-success, #10b981);
-  color: var(--tl-success-foreground, #ffffff);
+  background: var(--tl-success);
+  color: var(--tl-success-foreground);
 }
 
 .status-info {
-  background: var(--tl-primary, #6366f1);
-  color: var(--tl-primary-foreground, #ffffff);
+  background: var(--tl-primary);
+  color: var(--tl-primary-foreground);
 }
 
 .status-warning {
-  background: var(--tl-warning, #f59e0b);
-  color: var(--tl-warning-foreground, #ffffff);
+  background: var(--tl-warning);
+  color: var(--tl-warning-foreground);
 }
 
 .status-error {
-  background: var(--tl-error, #ef4444);
-  color: var(--tl-error-foreground, #ffffff);
+  background: var(--tl-error);
+  color: var(--tl-error-foreground);
 }
 
 .chevron {
   width: 1.125rem;
   height: 1.125rem;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
   transition: transform 0.2s ease;
 }
 
@@ -131,9 +131,9 @@
 }
 
 .order-tickets {
-  padding: 0 var(--tl-spacing-4, 1rem) var(--tl-spacing-4, 1rem);
-  border-top: 1px solid var(--tl-border, #e5e7eb);
-  padding-top: var(--tl-spacing-4, 1rem);
+  padding: 0 var(--tl-spacing-4) var(--tl-spacing-4);
+  border-top: 1px solid var(--tl-border);
+  padding-top: var(--tl-spacing-4);
 }
 
 @media (max-width: 480px) {
@@ -161,35 +161,35 @@
 
 .signin-text,
 .state-text {
-  margin: var(--tl-spacing-1, 0.25rem) 0 0;
+  margin: var(--tl-spacing-1) 0 0;
   font-size: 0.875rem;
-  color: var(--tl-muted-foreground, #6b7280);
+  color: var(--tl-muted-foreground);
 }
 
 .state {
-  padding: var(--tl-spacing-8, 2rem) var(--tl-spacing-4, 1rem);
+  padding: var(--tl-spacing-8) var(--tl-spacing-4);
   text-align: center;
-  background: var(--tl-background, #ffffff);
-  border: 1px solid var(--tl-border, #e5e7eb);
-  border-radius: var(--tl-radius-lg, 0.75rem);
+  background: var(--tl-background);
+  border: 1px solid var(--tl-border);
+  border-radius: var(--tl-radius-lg);
 }
 
 .state.error .state-title {
-  color: var(--tl-error, #ef4444);
+  color: var(--tl-error);
 }
 
 .empty-icon {
   width: 3rem;
   height: 3rem;
-  margin: 0 auto var(--tl-spacing-3, 0.75rem);
-  color: var(--tl-primary, #6366f1);
+  margin: 0 auto var(--tl-spacing-3);
+  color: var(--tl-primary);
 }
 
 /* Skeleton */
 .skeleton {
   height: 5rem;
-  background: var(--tl-secondary, #f3f4f6);
-  border-radius: var(--tl-radius-lg, 0.75rem);
+  background: var(--tl-secondary);
+  border-radius: var(--tl-radius-lg);
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }