@ticketlayer/elements 0.3.3 → 1.0.0

package/dist/esm/tl-occurrence-selector_2.entry.js

@@ -1,8 +1,21 @@
-import { r as registerInstance, c as createEvent, h } from './index-CNX8hZa8.js';
-import { w as whenSDK, g as getSDK, h as hasSDK } from './sdk-connector-CqhvfyKV.js';
+import { r as registerInstance, c as createEvent, h } from './index-imfxp765.js';
+import { w as whenSDK, g as getSDK } from './sdk-connector-CqhvfyKV.js';
+import { c as createElement, h as occurrenceSelectorCore, t as ticketSelectorCore } from './ticket-selector-BwChnHVC.js';
 
-const tlOccurrenceSelectorCss = () => `:host{--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)}*{box-sizing:border-box;margin:0;padding:0}.occurrence-selector{width:100%}.no-occurrences{text-align:center;padding:3rem 1rem;color:var(--tl-muted-foreground, #64748b)}.list-view{display:flex;flex-direction:column;gap:0.75rem}.occurrence-item{display:flex;justify-content:space-between;align-items:flex-start;width:100%;padding:1rem 1.25rem;background:var(--tl-background, #ffffff);border:1px solid var(--tl-border, #e2e8f0);border-radius:var(--tl-radius);text-align:left;cursor:pointer;transition:all 0.15s ease;font-family:inherit}.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))}.occurrence-item:focus-visible{outline:2px solid var(--tl-primary);outline-offset:2px}.occurrence-item:disabled{cursor:not-allowed;opacity:0.6;background:var(--tl-muted, #f1f5f9)}.occurrence-item.sold-out{opacity:0.6;background:var(--tl-muted, #f1f5f9)}.occurrence-info{flex:1}.occurrence-date{font-weight:600;font-size:0.9375rem;color:var(--tl-foreground, #0f172a);margin-bottom:0.25rem}.occurrence-time{font-size:0.875rem;color:var(--tl-muted-foreground)}.occurrence-status{flex-shrink:0;text-align:right}.status-sold-out{font-size:0.875rem;font-weight:500;color:var(--tl-muted-foreground)}.status-available{font-size:0.875rem;color:var(--tl-muted-foreground)}.status-arrow{font-size:1.25rem;color:var(--tl-primary, #e64b12)}.slots-view{display:flex;flex-direction:column;gap:1rem}.slots-date-header{font-size:1.125rem;font-weight:600;color:var(--tl-foreground, #0f172a);padding-bottom:0.5rem;border-bottom:1px solid var(--tl-border)}.time-slots-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));gap:0.5rem}.time-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0.75rem 0.5rem;background:var(--tl-background, #ffffff);border:1px solid var(--tl-border, #e2e8f0);border-radius:var(--tl-radius);cursor:pointer;transition:all 0.15s ease;font-family:inherit;min-height:3.5rem}.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))}.time-slot:focus-visible{outline:2px solid var(--tl-primary);outline-offset:2px}.time-slot:disabled{cursor:not-allowed;opacity:0.6;background:var(--tl-muted, #f1f5f9)}.time-slot.sold-out{opacity:0.6;background:var(--tl-muted, #f1f5f9)}.slot-time{font-size:0.9375rem;font-weight:600;color:var(--tl-foreground, #0f172a)}.slot-sold-out{font-size:0.6875rem;color:var(--tl-muted-foreground);margin-top:0.125rem}.calendar-view{display:flex;flex-direction:column;gap:1.5rem}.calendar-view.horizontal{flex-direction:row;gap:1.5rem;align-items:flex-start}.calendar-view.horizontal .calendar-panel{flex-shrink:0;width:340px}.calendar-view.horizontal .slots-panel{flex:1;min-width:0}.calendar-view.vertical .calendar-panel{width:100%}.calendar-view.vertical .slots-panel{width:100%}.calendar-panel{border:1px solid var(--tl-border, #e2e8f0);border-radius:var(--tl-radius);padding:1rem}.calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem}.month-label{font-size:1rem;font-weight:600;color:var(--tl-foreground, #0f172a);flex:1}.calendar-nav-buttons{display:flex;gap:0.375rem}.nav-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;background:var(--tl-background, #ffffff);border:1px solid var(--tl-border, #e2e8f0);border-radius:var(--tl-radius);cursor:pointer;transition:all 0.15s ease;color:var(--tl-foreground, #0f172a)}.nav-button:hover:not(:disabled){background:var(--tl-muted, #f1f5f9)}.nav-button:disabled{cursor:not-allowed;opacity:0.4}.nav-button svg{width:0.875rem;height:0.875rem}.calendar-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:0.1875rem}.weekday-header{text-align:center;font-size:0.6875rem;font-weight:600;color:var(--tl-muted-foreground);padding:0.375rem 0;text-transform:uppercase;letter-spacing:0.05em}.calendar-day{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;padding:0.1875rem;background:var(--tl-background, #ffffff);border:1px solid transparent;border-radius:var(--tl-radius);cursor:default;transition:all 0.15s ease;font-family:inherit;font-size:0.9375rem;font-weight:500;color:var(--tl-foreground, #0f172a)}.calendar-day.other-month{color:var(--tl-muted-foreground);opacity:0.5}.calendar-day.has-occurrences{cursor:pointer;background:color-mix(in srgb, var(--tl-primary, #e64b12) 10%, var(--tl-background, #ffffff));border-color:transparent;font-weight:600;color:var(--tl-primary, #e64b12)}.calendar-day.has-occurrences:hover{background:color-mix(in srgb, var(--tl-primary, #e64b12) 18%, var(--tl-background, #ffffff));border-color:transparent}.calendar-day.has-occurrences.sold-out{background:var(--tl-muted, #f1f5f9);border-color:transparent}.calendar-day.has-occurrences.sold-out:hover{background:color-mix(in srgb, var(--tl-muted, #f1f5f9) 80%, var(--tl-background, #ffffff));border-color:transparent}.calendar-day.selected{background:var(--tl-primary, #e64b12);border-color:var(--tl-primary, #e64b12);color:var(--tl-primary-foreground, #ffffff)}.calendar-day.selected:hover{background:color-mix(in srgb, var(--tl-primary, #e64b12) 90%, black)}.calendar-day.selected .occurrence-dot{background:var(--tl-primary-foreground)}.calendar-day.today .day-number{font-weight:700;text-decoration:underline;text-underline-offset:2px}.calendar-day.past:not(.has-occurrences){opacity:0.4}.day-number{line-height:1}.occurrence-dot{display:none}.slots-panel{min-height:200px}.selected-date-slots{height:100%}.selected-date-slots.empty{display:flex;align-items:center;justify-content:center;color:var(--tl-muted-foreground);background:var(--tl-muted, #f1f5f9);border-radius:var(--tl-radius);padding:2rem 1rem;text-align:center;min-height:200px;font-size:0.875rem}.selected-date-header{font-size:0.9375rem;font-weight:600;color:var(--tl-foreground, #0f172a);padding-bottom:0.625rem;margin-bottom:0.625rem}.time-slots-list{display:flex;flex-direction:column;gap:0.5rem}.time-slot-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0.625rem 0.875rem;background:var(--tl-background, #ffffff);border:1px solid var(--tl-border, #e2e8f0);border-radius:var(--tl-radius);text-align:left;cursor:pointer;transition:all 0.15s ease;font-family:inherit}.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))}.time-slot-item:focus-visible{outline:2px solid var(--tl-primary);outline-offset:2px}.time-slot-item:disabled{cursor:not-allowed;opacity:0.6;background:var(--tl-muted, #f1f5f9)}.time-slot-item.sold-out{opacity:0.6;background:var(--tl-muted, #f1f5f9)}.time-slot-item .slot-time{font-size:0.9375rem;font-weight:600}.slot-status{flex-shrink:0}.slot-status .status-sold-out{font-size:0.75rem}.slot-status .status-available{font-size:0.75rem}.slot-status .status-arrow{font-size:1rem}@media (max-width: 640px){.event-name{font-size:1.25rem}.occurrence-date{font-size:0.875rem}.time-slots-grid{grid-template-columns:repeat(auto-fill, minmax(80px, 1fr))}.time-slot{padding:0.625rem 0.375rem;min-height:3rem}.slot-time{font-size:0.875rem}.calendar-day{font-size:0.75rem}.weekday-header{font-size:0.625rem}.calendar-view.horizontal .calendar-panel{width:100%}}@media (max-width: 767px){.calendar-view.horizontal{flex-direction:column}}.loading-container{padding:1rem 0;min-height:400px}@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:0.5}}.skeleton{background:var(--tl-muted, #f1f5f9);border-radius:var(--tl-radius);animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-list{display:flex;flex-direction:column;gap:0.75rem}.skeleton-list-item{height:4.5rem;border-radius:var(--tl-radius)}.skeleton-calendar{border:1px solid var(--tl-border, #e2e8f0);border-radius:var(--tl-radius);padding:1rem;min-height:350px}.skeleton-calendar-header{height:1.75rem;width:50%;margin-bottom:0.75rem;border-radius:var(--tl-radius)}.skeleton-calendar-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:0.1875rem;margin-top:0.75rem}.skeleton-calendar-day{aspect-ratio:1;border-radius:var(--tl-radius)}.skeleton-slots{display:flex;flex-direction:column;gap:1rem}.skeleton-slots-header{height:1.75rem;width:60%;border-radius:var(--tl-radius);margin-bottom:0.5rem}.skeleton-slots-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));gap:0.5rem}.skeleton-slot-item{height:3.5rem;border-radius:var(--tl-radius)}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;gap:1rem;text-align:center}.error-icon{width:3rem;height:3rem;color:var(--tl-muted-foreground);stroke-width:1.5}.error-message{color:var(--tl-foreground, #0f172a);font-size:0.9375rem;max-width:400px}.retry-button{margin-top:0.5rem;padding:0.625rem 1.25rem;background:var(--tl-primary, #e64b12);color:var(--tl-primary-foreground, #ffffff);border:none;border-radius:var(--tl-radius);font-family:inherit;font-size:0.875rem;font-weight:500;cursor:pointer;transition:all 0.15s ease}.retry-button:hover{background:color-mix(in srgb, var(--tl-primary, #e64b12) 90%, black)}.retry-button:focus-visible{outline:2px solid var(--tl-primary);outline-offset:2px}`;
+const tlOccurrenceSelectorCss = () => `:host{display:block;font-family:var(--tl-font-family);color:var(--tl-foreground)}*{box-sizing:border-box;margin:0;padding:0}.occurrence-selector{width:100%}.no-occurrences{text-align:center;padding:3rem 1rem;color:var(--tl-muted-foreground)}.list-view{display:flex;flex-direction:column;gap:0.75rem}.occurrence-item{display:flex;justify-content:space-between;align-items:flex-start;width:100%;padding:1rem 1.25rem;background:var(--tl-background);border:1px solid var(--tl-border);border-radius:var(--tl-radius);text-align:left;cursor:pointer;transition:all 0.15s ease;font-family:inherit}.occurrence-item:hover:not(:disabled){border-color:var(--tl-primary);background:color-mix(in srgb, var(--tl-primary) 5%, var(--tl-background))}.occurrence-item:focus-visible{outline:2px solid var(--tl-primary);outline-offset:2px}.occurrence-item:disabled{cursor:not-allowed;opacity:0.6;background:var(--tl-muted)}.occurrence-item.sold-out{opacity:0.6;background:var(--tl-muted)}.occurrence-info{flex:1}.occurrence-date{font-weight:600;font-size:0.9375rem;color:var(--tl-foreground);margin-bottom:0.25rem}.occurrence-time{font-size:0.875rem;color:var(--tl-muted-foreground)}.occurrence-status{flex-shrink:0;text-align:right}.status-sold-out{font-size:0.875rem;font-weight:500;color:var(--tl-muted-foreground)}.status-available{font-size:0.875rem;color:var(--tl-muted-foreground)}.status-arrow{font-size:1.25rem;color:var(--tl-primary)}.slots-view{display:flex;flex-direction:column;gap:1rem}.slots-date-header{font-size:1.125rem;font-weight:600;color:var(--tl-foreground);padding-bottom:0.5rem;border-bottom:1px solid var(--tl-border)}.time-slots-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));gap:0.5rem}.time-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0.75rem 0.5rem;background:var(--tl-background);border:1px solid var(--tl-border);border-radius:var(--tl-radius);cursor:pointer;transition:all 0.15s ease;font-family:inherit;min-height:3.5rem}.time-slot:hover:not(:disabled){border-color:var(--tl-primary);background:color-mix(in srgb, var(--tl-primary) 5%, var(--tl-background))}.time-slot:focus-visible{outline:2px solid var(--tl-primary);outline-offset:2px}.time-slot:disabled{cursor:not-allowed;opacity:0.6;background:var(--tl-muted)}.time-slot.sold-out{opacity:0.6;background:var(--tl-muted)}.slot-time{font-size:0.9375rem;font-weight:600;color:var(--tl-foreground)}.slot-sold-out{font-size:0.6875rem;color:var(--tl-muted-foreground);margin-top:0.125rem}.calendar-view{display:flex;flex-direction:column;gap:1.5rem}.calendar-view.horizontal{flex-direction:row;gap:1.5rem;align-items:flex-start}.calendar-view.horizontal .calendar-panel{flex-shrink:0;width:340px}.calendar-view.horizontal .slots-panel{flex:1;min-width:0}.calendar-view.vertical .calendar-panel{width:100%}.calendar-view.vertical .slots-panel{width:100%}.calendar-panel{border:1px solid var(--tl-border);border-radius:var(--tl-radius);padding:1rem}.calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem}.month-label{font-size:1rem;font-weight:600;color:var(--tl-foreground);flex:1}.calendar-nav-buttons{display:flex;gap:0.375rem}.nav-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;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)}.nav-button:hover:not(:disabled){background:var(--tl-muted)}.nav-button:disabled{cursor:not-allowed;opacity:0.4}.nav-button svg{width:0.875rem;height:0.875rem}.calendar-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:0.1875rem}.weekday-header{text-align:center;font-size:0.6875rem;font-weight:600;color:var(--tl-muted-foreground);padding:0.375rem 0;text-transform:uppercase;letter-spacing:0.05em}.calendar-day{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;padding:0.1875rem;background:var(--tl-background);border:1px solid transparent;border-radius:var(--tl-radius);cursor:default;transition:all 0.15s ease;font-family:inherit;font-size:0.9375rem;font-weight:500;color:var(--tl-foreground)}.calendar-day.other-month{color:var(--tl-muted-foreground);opacity:0.5}.calendar-day.has-occurrences{cursor:pointer;background:color-mix(in srgb, var(--tl-primary) 10%, var(--tl-background));border-color:transparent;font-weight:600;color:var(--tl-primary)}.calendar-day.has-occurrences:hover{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);border-color:transparent}.calendar-day.has-occurrences.sold-out:hover{background:color-mix(in srgb, var(--tl-muted) 80%, var(--tl-background));border-color:transparent}.calendar-day.selected{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) 90%, black)}.calendar-day.selected .occurrence-dot{background:var(--tl-primary-foreground)}.calendar-day.today .day-number{font-weight:700;text-decoration:underline;text-underline-offset:2px}.calendar-day.past:not(.has-occurrences){opacity:0.4}.day-number{line-height:1}.occurrence-dot{display:none}.slots-panel{min-height:200px}.selected-date-slots{height:100%}.selected-date-slots.empty{display:flex;align-items:center;justify-content:center;color:var(--tl-muted-foreground);background:var(--tl-muted);border-radius:var(--tl-radius);padding:2rem 1rem;text-align:center;min-height:200px;font-size:0.875rem}.selected-date-header{font-size:0.9375rem;font-weight:600;color:var(--tl-foreground);padding-bottom:0.625rem;margin-bottom:0.625rem}.time-slots-list{display:flex;flex-direction:column;gap:0.5rem}.time-slot-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0.625rem 0.875rem;background:var(--tl-background);border:1px solid var(--tl-border);border-radius:var(--tl-radius);text-align:left;cursor:pointer;transition:all 0.15s ease;font-family:inherit}.time-slot-item:hover:not(:disabled){border-color:var(--tl-primary);background:color-mix(in srgb, var(--tl-primary) 5%, var(--tl-background))}.time-slot-item:focus-visible{outline:2px solid var(--tl-primary);outline-offset:2px}.time-slot-item:disabled{cursor:not-allowed;opacity:0.6;background:var(--tl-muted)}.time-slot-item.sold-out{opacity:0.6;background:var(--tl-muted)}.time-slot-item .slot-time{font-size:0.9375rem;font-weight:600}.slot-status{flex-shrink:0}.slot-status .status-sold-out{font-size:0.75rem}.slot-status .status-available{font-size:0.75rem}.slot-status .status-arrow{font-size:1rem}@media (max-width: 640px){.event-name{font-size:1.25rem}.occurrence-date{font-size:0.875rem}.time-slots-grid{grid-template-columns:repeat(auto-fill, minmax(80px, 1fr))}.time-slot{padding:0.625rem 0.375rem;min-height:3rem}.slot-time{font-size:0.875rem}.calendar-day{font-size:0.75rem}.weekday-header{font-size:0.625rem}.calendar-view.horizontal .calendar-panel{width:100%}}@media (max-width: 767px){.calendar-view.horizontal{flex-direction:column}}.loading-container{padding:1rem 0;min-height:400px}@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:0.5}}.skeleton{background:var(--tl-muted);border-radius:var(--tl-radius);animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-list{display:flex;flex-direction:column;gap:0.75rem}.skeleton-list-item{height:4.5rem;border-radius:var(--tl-radius)}.skeleton-calendar{border:1px solid var(--tl-border);border-radius:var(--tl-radius);padding:1rem;min-height:350px}.skeleton-calendar-header{height:1.75rem;width:50%;margin-bottom:0.75rem;border-radius:var(--tl-radius)}.skeleton-calendar-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:0.1875rem;margin-top:0.75rem}.skeleton-calendar-day{aspect-ratio:1;border-radius:var(--tl-radius)}.skeleton-slots{display:flex;flex-direction:column;gap:1rem}.skeleton-slots-header{height:1.75rem;width:60%;border-radius:var(--tl-radius);margin-bottom:0.5rem}.skeleton-slots-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));gap:0.5rem}.skeleton-slot-item{height:3.5rem;border-radius:var(--tl-radius)}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;gap:1rem;text-align:center}.error-icon{width:3rem;height:3rem;color:var(--tl-muted-foreground);stroke-width:1.5}.error-message{color:var(--tl-foreground);font-size:0.9375rem;max-width:400px}.retry-button{margin-top:0.5rem;padding:0.625rem 1.25rem;background:var(--tl-primary);color:var(--tl-primary-foreground);border:none;border-radius:var(--tl-radius);font-family:inherit;font-size:0.875rem;font-weight:500;cursor:pointer;transition:all 0.15s ease}.retry-button:hover{background:color-mix(in srgb, var(--tl-primary) 90%, black)}.retry-button:focus-visible{outline:2px solid var(--tl-primary);outline-offset:2px}`;
 
+/** Theme field -> the custom property the stylesheet reads it through. */
+const THEME_PROPERTIES = [
+    ['primaryColor', '--tl-primary'],
+    ['primaryForeground', '--tl-primary-foreground'],
+    ['backgroundColor', '--tl-background'],
+    ['foregroundColor', '--tl-foreground'],
+    ['mutedColor', '--tl-muted'],
+    ['mutedForeground', '--tl-muted-foreground'],
+    ['borderColor', '--tl-border'],
+    ['borderRadius', '--tl-radius'],
+    ['fontFamily', '--tl-font-family'],
+];
 const TlOccurrenceSelector = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -11,565 +24,161 @@ const TlOccurrenceSelector = class {
          * Layout orientation (auto = horizontal on desktop, vertical on mobile)
          */
         this.orientation = 'auto';
-        /**
-         * Loading state
-         */
-        this.loading = true;
-        /**
-         * Error message
-         */
-        this.error = null;
-        /**
-         * Fetched occurrences
-         */
-        this.occurrences = [];
-        /**
-         * Current month being displayed in calendar view
-         */
-        this.currentMonth = new Date();
-        /**
-         * Currently selected date in calendar view
-         */
-        this.selectedDate = null;
-        /**
-         * Computed display mode based on occurrences
-         */
-        this.computedDisplayMode = 'list';
-        /**
-         * Container width for responsive layout
-         */
-        this.containerWidth = 0;
-    }
-    async componentWillLoad() {
-        await this.waitForSDKAndFetch();
+        this.element = createElement(occurrenceSelectorCore, {
+            client: () => getSDK(),
+            // What "the client is up" means on the web. The core waits on it inside its
+            // own mount and reads there; the harness decides none of it (TKT-197).
+            clientReady: () => whenSDK(),
+            emit: (event, detail) => this.forward(event, detail),
+        });
+        /** The core's whole view. Assigning it is what makes Stencil re-render. */
+        this.view = this.element.view;
     }
     /**
-     * Wait for SDK to be ready, then fetch occurrences
+     * A new event is a new subject: the element is torn down and mounted again,
+     * so whatever the core set up for the old one is undone before anything is
+     * set up for the new one.
      */
-    async waitForSDKAndFetch() {
-        if (!this.eventId) {
-            this.error = 'Event ID is required';
-            this.loading = false;
-            return;
-        }
-        try {
-            await whenSDK();
-            await this.fetchOccurrences();
-        }
-        catch (err) {
-            this.error = err instanceof Error ? err.message : 'SDK not initialized.';
-            this.loading = false;
-        }
+    watchSubject() {
+        this.syncProps();
+        this.teardown?.();
+        this.teardown = this.element.mount();
+    }
+    syncProps() {
+        this.element.setProps({
+            eventId: this.eventId,
+            displayMode: this.displayMode,
+            orientation: this.orientation,
+            theme: this.theme,
+        });
     }
+    /**
+     * On screen: subscribe to the view, then put the core to work.
+     *
+     * `connectedCallback` and not `componentWillLoad` because this runs again
+     * when the element is moved in the DOM, and that is exactly when a mount and
+     * its teardown have to pair up.
+     */
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        this.teardown = this.element.mount();
+    }
+    /** Measuring the element is the runtime's job; what a width means is not. */
     componentDidLoad() {
-        // Set up resize observer for responsive layout
         if (this.containerRef && typeof ResizeObserver !== 'undefined') {
             this.resizeObserver = new ResizeObserver((entries) => {
-                for (const entry of entries) {
-                    this.containerWidth = entry.contentRect.width;
-                }
+                for (const entry of entries)
+                    this.element.actions.resized(entry.contentRect.width);
             });
             this.resizeObserver.observe(this.containerRef);
         }
     }
-    disconnectedCallback() {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
-    }
-    async onEventIdChange() {
-        await this.fetchOccurrences();
-    }
-    /**
-     * Fetch occurrences from the SDK
-     */
-    async fetchOccurrences() {
-        this.loading = true;
-        this.error = null;
-        try {
-            const sdk = getSDK();
-            const eventsManager = sdk.getEventsManager();
-            const event = await eventsManager.get(this.eventId);
-            if (!event) {
-                throw new Error('Event not found');
-            }
-            // Map EventOccurrence to TlOccurrence
-            this.occurrences = (event.occurrences || []).map((occ) => ({
-                id: occ.id,
-                startsAt: occ.startsAt,
-                endsAt: occ.endsAt,
-                status: occ.availabilityStatus,
-                availableCapacity: occ.availableCapacity,
-                soldOut: occ.availabilityStatus === 'sold_out',
-            }));
-            this.computeDisplayMode();
-            this.computeInitialSelection();
-        }
-        catch (err) {
-            console.error('[tl-occurrence-selector] Failed to fetch occurrences:', err);
-            this.error = err instanceof Error ? err.message : 'Failed to load occurrences';
-            this.occurrences = [];
-        }
-        finally {
-            this.loading = false;
-        }
-    }
-    /**
-     * Compute the display mode based on occurrence count and date distribution
-     */
-    computeDisplayMode() {
-        if (this.displayMode) {
-            this.computedDisplayMode = this.displayMode;
-            return;
-        }
-        const count = this.occurrences.length;
-        if (count <= 5) {
-            this.computedDisplayMode = 'list';
-            return;
-        }
-        // Check if all occurrences are on the same calendar date
-        const uniqueDates = new Set();
-        for (const occ of this.occurrences) {
-            const date = new Date(occ.startsAt);
-            uniqueDates.add(date.toDateString());
-        }
-        if (uniqueDates.size === 1) {
-            this.computedDisplayMode = 'slots';
-        }
-        else {
-            this.computedDisplayMode = 'calendar';
-        }
-    }
-    /**
-     * Compute the initial date selection for calendar/slots views
-     */
-    computeInitialSelection() {
-        if (this.occurrences.length === 0)
-            return;
-        const today = new Date();
-        today.setHours(0, 0, 0, 0);
-        // Get all dates with occurrences
-        const datesWithOccurrences = this.getDatesWithOccurrences();
-        // Find the first date that is today or in the future
-        let selectedDate = null;
-        for (const dateStr of Array.from(datesWithOccurrences.keys()).sort()) {
-            const date = new Date(dateStr);
-            if (date >= today) {
-                selectedDate = date;
-                break;
-            }
-        }
-        // If no future dates, select the last available date
-        if (!selectedDate && datesWithOccurrences.size > 0) {
-            const sortedDates = Array.from(datesWithOccurrences.keys()).sort();
-            selectedDate = new Date(sortedDates[sortedDates.length - 1]);
-        }
-        if (selectedDate) {
-            this.selectedDate = selectedDate;
-            this.currentMonth = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1);
-        }
-    }
-    /**
-     * Get a map of dates to occurrences
-     */
-    getDatesWithOccurrences() {
-        const map = new Map();
-        for (const occ of this.occurrences) {
-            const date = new Date(occ.startsAt);
-            date.setHours(0, 0, 0, 0);
-            const dateStr = date.toDateString();
-            if (!map.has(dateStr)) {
-                map.set(dateStr, []);
-            }
-            map.get(dateStr).push(occ);
-        }
-        return map;
-    }
-    /**
-     * Get the first and last occurrence dates
-     */
-    getDateRange() {
-        if (this.occurrences.length === 0)
-            return null;
-        let first = new Date(this.occurrences[0].startsAt);
-        let last = new Date(this.occurrences[0].startsAt);
-        for (const occ of this.occurrences) {
-            const date = new Date(occ.startsAt);
-            if (date < first)
-                first = date;
-            if (date > last)
-                last = date;
-        }
-        return { first, last };
-    }
-    /**
-     * Check if all occurrences fit in one week (Monday-Sunday)
-     */
-    isSingleWeek() {
-        const dateRange = this.getDateRange();
-        if (!dateRange)
-            return false;
-        // Get Monday of the week containing the first date
-        const firstMonday = new Date(dateRange.first);
-        const dayOfWeek = firstMonday.getDay();
-        const daysToSubtract = dayOfWeek === 0 ? 6 : dayOfWeek - 1; // Monday = 0 days
-        firstMonday.setDate(firstMonday.getDate() - daysToSubtract);
-        firstMonday.setHours(0, 0, 0, 0);
-        // Get Sunday of that week
-        const sunday = new Date(firstMonday);
-        sunday.setDate(sunday.getDate() + 6);
-        sunday.setHours(23, 59, 59, 999);
-        // Check if last date is within this week
-        return dateRange.last <= sunday;
-    }
-    /**
-     * Check if all occurrences are in the same month
-     */
-    isSingleMonth() {
-        const dateRange = this.getDateRange();
-        if (!dateRange)
-            return false;
-        return (dateRange.first.getMonth() === dateRange.last.getMonth() &&
-            dateRange.first.getFullYear() === dateRange.last.getFullYear());
-    }
-    /**
-     * Check if we should use horizontal layout
-     */
-    isHorizontalLayout() {
-        if (this.orientation === 'horizontal')
-            return true;
-        if (this.orientation === 'vertical')
-            return false;
-        // Auto: use horizontal if container is wide enough (768px)
-        return this.containerWidth >= 768;
-    }
-    /**
-     * Format a date for display
-     */
-    formatDate(date) {
-        return date.toLocaleDateString('en-GB', {
-            weekday: 'long',
-            day: 'numeric',
-            month: 'long',
-            year: 'numeric',
-        });
-    }
-    /**
-     * Format a time for display
-     */
-    formatTime(dateString) {
-        const date = new Date(dateString);
-        return date.toLocaleTimeString('en-GB', {
-            hour: '2-digit',
-            minute: '2-digit',
-        });
-    }
-    /**
-     * Format a full date and time for list view
-     */
-    formatDateTime(dateString) {
-        const date = new Date(dateString);
-        return {
-            date: date.toLocaleDateString('en-GB', {
-                weekday: 'long',
-                day: 'numeric',
-                month: 'long',
-                year: 'numeric',
-            }),
-            time: date.toLocaleTimeString('en-GB', {
-                hour: '2-digit',
-                minute: '2-digit',
-            }),
-        };
-    }
-    /**
-     * Handle occurrence selection
-     */
-    handleSelect(occurrence) {
-        if (occurrence.soldOut || occurrence.availableCapacity === 0)
-            return;
-        console.log('[tl-occurrence-selector] Selected:', occurrence.id);
-        this.tlSelect.emit({ occurrence });
-    }
-    /**
-     * Handle date selection in calendar view
-     */
-    handleDateSelect(date) {
-        this.selectedDate = date;
-        // If date is in a different month, navigate to that month
-        if (date.getMonth() !== this.currentMonth.getMonth() ||
-            date.getFullYear() !== this.currentMonth.getFullYear()) {
-            this.currentMonth = new Date(date.getFullYear(), date.getMonth(), 1);
-        }
-    }
     /**
-     * Navigate to previous month
+     * Off screen: run the mount's teardown, and nothing more. Not `destroy()`:
+     * Stencil calls this for a DOM move as well as a removal, and a destroyed
+     * core never mounts again.
      */
-    handlePrevMonth() {
-        const dateRange = this.getDateRange();
-        if (!dateRange)
-            return;
-        const newMonth = new Date(this.currentMonth);
-        newMonth.setMonth(newMonth.getMonth() - 1);
-        // Don't go before the first occurrence month
-        const firstMonth = new Date(dateRange.first.getFullYear(), dateRange.first.getMonth(), 1);
-        if (newMonth >= firstMonth) {
-            this.currentMonth = newMonth;
-        }
-    }
-    /**
-     * Navigate to next month
-     */
-    handleNextMonth() {
-        const dateRange = this.getDateRange();
-        if (!dateRange)
-            return;
-        const newMonth = new Date(this.currentMonth);
-        newMonth.setMonth(newMonth.getMonth() + 1);
-        // Don't go past the last occurrence month
-        const lastMonth = new Date(dateRange.last.getFullYear(), dateRange.last.getMonth(), 1);
-        if (newMonth <= lastMonth) {
-            this.currentMonth = newMonth;
-        }
-    }
-    /**
-     * Check if prev month button should be disabled
-     */
-    isPrevMonthDisabled() {
-        const dateRange = this.getDateRange();
-        if (!dateRange)
-            return true;
-        const firstMonth = new Date(dateRange.first.getFullYear(), dateRange.first.getMonth(), 1);
-        return this.currentMonth <= firstMonth;
-    }
-    /**
-     * Check if next month button should be disabled
-     */
-    isNextMonthDisabled() {
-        const dateRange = this.getDateRange();
-        if (!dateRange)
-            return true;
-        const lastMonth = new Date(dateRange.last.getFullYear(), dateRange.last.getMonth(), 1);
-        return this.currentMonth >= lastMonth;
-    }
-    /**
-     * Get calendar grid days for the current month
-     */
-    getCalendarDays() {
-        // If all occurrences fit in one week, only show that week
-        if (this.isSingleWeek()) {
-            const dateRange = this.getDateRange();
-            if (!dateRange)
-                return [];
-            // Get Monday of the week containing the first date
-            const firstMonday = new Date(dateRange.first);
-            const dayOfWeek = firstMonday.getDay();
-            const daysToSubtract = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
-            firstMonday.setDate(firstMonday.getDate() - daysToSubtract);
-            firstMonday.setHours(0, 0, 0, 0);
-            // Generate 7 days (Monday to Sunday)
-            const days = [];
-            const current = new Date(firstMonday);
-            for (let i = 0; i < 7; i++) {
-                days.push(new Date(current));
-                current.setDate(current.getDate() + 1);
-            }
-            return days;
-        }
-        // Otherwise show full month grid
-        const year = this.currentMonth.getFullYear();
-        const month = this.currentMonth.getMonth();
-        // Start of month
-        const monthStart = new Date(year, month, 1);
-        // End of month
-        const monthEnd = new Date(year, month + 1, 0);
-        // Get the start of the week containing the first day (Monday = 1)
-        const startDay = monthStart.getDay();
-        const daysToSubtract = startDay === 0 ? 6 : startDay - 1; // Monday = 0 days to subtract
-        const calendarStart = new Date(monthStart);
-        calendarStart.setDate(calendarStart.getDate() - daysToSubtract);
-        // Get the end of the week containing the last day
-        const endDay = monthEnd.getDay();
-        const daysToAdd = endDay === 0 ? 0 : 7 - endDay;
-        const calendarEnd = new Date(monthEnd);
-        calendarEnd.setDate(calendarEnd.getDate() + daysToAdd);
-        // Generate all days
-        const days = [];
-        const current = new Date(calendarStart);
-        while (current <= calendarEnd) {
-            days.push(new Date(current));
-            current.setDate(current.getDate() + 1);
-        }
-        return days;
-    }
-    /**
-     * Check if a date has occurrences
-     */
-    hasOccurrencesOnDate(date) {
-        const dateStr = date.toDateString();
-        return this.getDatesWithOccurrences().has(dateStr);
-    }
-    /**
-     * Check if all occurrences on a date are sold out
-     */
-    isDateSoldOut(date) {
-        const dateStr = date.toDateString();
-        const occurrences = this.getDatesWithOccurrences().get(dateStr);
-        if (!occurrences)
-            return false;
-        return occurrences.every(occ => occ.soldOut || occ.availableCapacity === 0);
+    disconnectedCallback() {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
+        this.teardown?.();
+        this.teardown = undefined;
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
     }
-    /**
-     * Get occurrences for the selected date
-     */
-    getSelectedDateOccurrences() {
-        if (!this.selectedDate)
-            return [];
-        const dateStr = this.selectedDate.toDateString();
-        const occurrences = this.getDatesWithOccurrences().get(dateStr) || [];
-        // Sort by start time
-        return occurrences.sort((a, b) => new Date(a.startsAt).getTime() - new Date(b.startsAt).getTime());
+    forward(event, detail) {
+        if (event === 'tlSelect')
+            this.tlSelect.emit(detail);
     }
     /**
-     * Get CSS custom properties from theme
+     * The host's theme, as custom properties over the ones the theme package
+     * ships. Web only: a custom property is not a fact every runtime has, so the
+     * core declares the prop and the harness is what acts on it.
      */
-    getThemeStyles() {
-        if (!this.theme)
-            return {};
+    themeStyles() {
         const styles = {};
-        if (this.theme.primaryColor) {
-            styles['--tl-primary'] = this.theme.primaryColor;
-        }
-        if (this.theme.primaryForeground) {
-            styles['--tl-primary-foreground'] = this.theme.primaryForeground;
-        }
-        if (this.theme.backgroundColor) {
-            styles['--tl-background'] = this.theme.backgroundColor;
-        }
-        if (this.theme.foregroundColor) {
-            styles['--tl-foreground'] = this.theme.foregroundColor;
-        }
-        if (this.theme.mutedColor) {
-            styles['--tl-muted'] = this.theme.mutedColor;
-        }
-        if (this.theme.mutedForeground) {
-            styles['--tl-muted-foreground'] = this.theme.mutedForeground;
-        }
-        if (this.theme.borderColor) {
-            styles['--tl-border'] = this.theme.borderColor;
-        }
-        if (this.theme.borderRadius) {
-            styles['--tl-radius'] = this.theme.borderRadius;
-        }
-        if (this.theme.fontFamily) {
-            styles['--tl-font-family'] = this.theme.fontFamily;
+        if (!this.theme)
+            return styles;
+        for (const [field, property] of THEME_PROPERTIES) {
+            const value = this.theme[field];
+            if (value)
+                styles[property] = value;
         }
         return styles;
     }
     // =========================================================================
     // RENDER METHODS
     // =========================================================================
-    /**
-     * Render the list view (≤5 occurrences)
-     */
+    /** The availability mark a row carries, in the list and the slots panel. */
+    renderRowStatus(row) {
+        const { strings } = this.view;
+        if (row.statusKind === 'soldOut')
+            return h("span", { class: "status-sold-out" }, strings.soldOut);
+        if (row.statusKind === 'available')
+            return h("span", { class: "status-available" }, row.capacityLabel);
+        return h("span", { class: "status-arrow" }, "\u2192");
+    }
+    /** The list view (five occurrences or fewer). */
     renderListView() {
-        return (h("div", { class: "list-view" }, this.occurrences.map((occurrence) => {
-            const isSoldOut = occurrence.soldOut || occurrence.availableCapacity === 0;
-            const { date, time } = this.formatDateTime(occurrence.startsAt);
-            return (h("button", { key: occurrence.id, class: `occurrence-item ${isSoldOut ? 'sold-out' : ''}`, onClick: () => this.handleSelect(occurrence), disabled: isSoldOut }, h("div", { class: "occurrence-info" }, h("div", { class: "occurrence-date" }, date), h("div", { class: "occurrence-time" }, time, occurrence.endsAt && ` - ${this.formatTime(occurrence.endsAt)}`)), h("div", { class: "occurrence-status" }, isSoldOut ? (h("span", { class: "status-sold-out" }, "Sold Out")) : occurrence.availableCapacity ? (h("span", { class: "status-available" }, occurrence.availableCapacity, " available")) : (h("span", { class: "status-arrow" }, "\u2192")))));
-        })));
+        return (h("div", { class: "list-view" }, this.view.derived.rows.map((row) => (h("button", { key: row.id, class: `occurrence-item ${row.soldOut ? 'sold-out' : ''}`, onClick: () => this.element.actions.select(row.id), disabled: row.soldOut }, h("div", { class: "occurrence-info" }, h("div", { class: "occurrence-date" }, row.dateLabel), h("div", { class: "occurrence-time" }, row.timeLabel)), h("div", { class: "occurrence-status" }, this.renderRowStatus(row)))))));
     }
-    /**
-     * Render the time slots view (>5 occurrences, same day)
-     */
+    /** The time slots view (more than five, all on one date). */
     renderSlotsView() {
-        // Sort occurrences by time
-        const sortedOccurrences = [...this.occurrences].sort((a, b) => new Date(a.startsAt).getTime() - new Date(b.startsAt).getTime());
-        // Get the date from the first occurrence
-        const dateLabel = sortedOccurrences.length > 0
-            ? this.formatDate(new Date(sortedOccurrences[0].startsAt))
-            : '';
-        return (h("div", { class: "slots-view" }, dateLabel && h("div", { class: "slots-date-header" }, dateLabel), h("div", { class: "time-slots-grid" }, sortedOccurrences.map((occurrence) => {
-            const isSoldOut = occurrence.soldOut || occurrence.availableCapacity === 0;
-            return (h("button", { key: occurrence.id, class: `time-slot ${isSoldOut ? 'sold-out' : ''}`, onClick: () => this.handleSelect(occurrence), disabled: isSoldOut }, h("span", { class: "slot-time" }, this.formatTime(occurrence.startsAt)), isSoldOut && h("span", { class: "slot-sold-out" }, "Sold Out")));
-        }))));
+        const { slots, slotsDateLabel } = this.view.derived;
+        return (h("div", { class: "slots-view" }, slotsDateLabel && h("div", { class: "slots-date-header" }, slotsDateLabel), h("div", { class: "time-slots-grid" }, slots.map((row) => (h("button", { key: row.id, class: `time-slot ${row.soldOut ? 'sold-out' : ''}`, onClick: () => this.element.actions.select(row.id), disabled: row.soldOut }, h("span", { class: "slot-time" }, row.startLabel), row.soldOut && h("span", { class: "slot-sold-out" }, this.view.strings.soldOut)))))));
     }
-    /**
-     * Render the calendar header
-     */
     renderCalendarHeader() {
-        const monthLabel = this.currentMonth.toLocaleDateString('en-GB', {
-            month: 'long',
-            year: 'numeric',
-        });
-        const showNavigation = !this.isSingleMonth();
-        return (h("div", { class: "calendar-header" }, h("span", { class: "month-label" }, monthLabel), showNavigation && (h("div", { class: "calendar-nav-buttons" }, h("button", { class: "nav-button", onClick: () => this.handlePrevMonth(), disabled: this.isPrevMonthDisabled(), "aria-label": "Previous month" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M15 18l-6-6 6-6" }))), h("button", { class: "nav-button", onClick: () => this.handleNextMonth(), disabled: this.isNextMonthDisabled(), "aria-label": "Next month" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M9 18l6-6-6-6" })))))));
+        const { strings, derived } = this.view;
+        return (h("div", { class: "calendar-header" }, h("span", { class: "month-label" }, derived.monthLabel), derived.showMonthNav && (h("div", { class: "calendar-nav-buttons" }, h("button", { class: "nav-button", onClick: () => this.element.actions.previousMonth(), disabled: !derived.canGoBack, "aria-label": strings.previousMonth }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M15 18l-6-6 6-6" }))), h("button", { class: "nav-button", onClick: () => this.element.actions.nextMonth(), disabled: !derived.canGoForward, "aria-label": strings.nextMonth }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M9 18l6-6-6-6" })))))));
+    }
+    renderCalendarDay(day) {
+        return (h("button", { key: day.key, class: day.className, onClick: () => this.element.actions.selectDate(day.key), disabled: !day.selectable }, h("span", { class: "day-number" }, day.dayNumber), day.hasOccurrences && h("span", { class: "occurrence-dot" })));
     }
-    /**
-     * Render the calendar grid
-     */
     renderCalendarGrid() {
-        const days = this.getCalendarDays();
-        const weekDays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
-        const today = new Date();
-        today.setHours(0, 0, 0, 0);
-        return (h("div", { class: "calendar-grid" }, weekDays.map((day) => (h("div", { class: "weekday-header", key: day }, day))), days.map((date) => {
-            const isCurrentMonth = date.getMonth() === this.currentMonth.getMonth();
-            const hasOccurrences = this.hasOccurrencesOnDate(date);
-            const isSoldOut = this.isDateSoldOut(date);
-            const isSelected = this.selectedDate && date.toDateString() === this.selectedDate.toDateString();
-            const isToday = date.toDateString() === today.toDateString();
-            const isPast = date < today;
-            return (h("button", { key: date.toISOString(), class: `calendar-day 
-                ${!isCurrentMonth ? 'other-month' : ''} 
-                ${hasOccurrences ? 'has-occurrences' : ''} 
-                ${isSoldOut ? 'sold-out' : ''} 
-                ${isSelected ? 'selected' : ''} 
-                ${isToday ? 'today' : ''}
-                ${isPast ? 'past' : ''}`, onClick: () => hasOccurrences && this.handleDateSelect(date), disabled: !hasOccurrences }, h("span", { class: "day-number" }, date.getDate()), hasOccurrences && h("span", { class: "occurrence-dot" })));
-        })));
+        const { derived } = this.view;
+        return (h("div", { class: "calendar-grid" }, derived.weekdayLabels.map((day) => (h("div", { class: "weekday-header", key: day }, day))), derived.days.map((day) => this.renderCalendarDay(day))));
     }
-    /**
-     * Render the selected date's time slots
-     */
+    /** The picked date's times, beside or below the calendar. */
     renderSelectedDateSlots() {
-        const occurrences = this.getSelectedDateOccurrences();
-        if (!this.selectedDate || occurrences.length === 0) {
-            return (h("div", { class: "selected-date-slots empty" }, h("p", null, "Select a date to see available times")));
+        const { strings, derived } = this.view;
+        if (!derived.selectedDateLabel) {
+            return (h("div", { class: "selected-date-slots empty" }, h("p", null, strings.selectADate)));
         }
-        const dateLabel = this.formatDate(this.selectedDate);
-        return (h("div", { class: "selected-date-slots" }, h("div", { class: "selected-date-header" }, dateLabel), h("div", { class: "time-slots-list" }, occurrences.map((occurrence) => {
-            const isSoldOut = occurrence.soldOut || occurrence.availableCapacity === 0;
-            return (h("button", { key: occurrence.id, class: `time-slot-item ${isSoldOut ? 'sold-out' : ''}`, onClick: () => this.handleSelect(occurrence), disabled: isSoldOut }, h("span", { class: "slot-time" }, this.formatTime(occurrence.startsAt)), h("div", { class: "slot-status" }, isSoldOut ? (h("span", { class: "status-sold-out" }, "Sold Out")) : occurrence.availableCapacity ? (h("span", { class: "status-available" }, occurrence.availableCapacity, " available")) : (h("span", { class: "status-arrow" }, "\u2192")))));
-        }))));
+        return (h("div", { class: "selected-date-slots" }, h("div", { class: "selected-date-header" }, derived.selectedDateLabel), h("div", { class: "time-slots-list" }, derived.selectedSlots.map((row) => (h("button", { key: row.id, class: `time-slot-item ${row.soldOut ? 'sold-out' : ''}`, onClick: () => this.element.actions.select(row.id), disabled: row.soldOut }, h("span", { class: "slot-time" }, row.startLabel), h("div", { class: "slot-status" }, this.renderRowStatus(row))))))));
     }
-    /**
-     * Render the calendar view with slots panel
-     */
     renderCalendarView() {
-        const isHorizontal = this.isHorizontalLayout();
-        return (h("div", { class: `calendar-view ${isHorizontal ? 'horizontal' : 'vertical'}` }, h("div", { class: "calendar-panel" }, this.renderCalendarHeader(), this.renderCalendarGrid()), h("div", { class: "slots-panel" }, this.renderSelectedDateSlots())));
+        return (h("div", { class: this.view.derived.viewClass }, h("div", { class: "calendar-panel" }, this.renderCalendarHeader(), this.renderCalendarGrid()), h("div", { class: "slots-panel" }, this.renderSelectedDateSlots())));
     }
-    /**
-     * Render skeleton loading state
-     */
+    /** The skeleton, which is a calendar because that is the common shape. */
     renderSkeleton() {
-        // Default to calendar skeleton as it's the most common
         return (h("div", { class: "loading-container" }, h("div", { class: "skeleton-calendar" }, h("div", { class: "skeleton skeleton-calendar-header" }), h("div", { class: "skeleton-calendar-grid" }, Array.from({ length: 35 }, (_, i) => (h("div", { key: i, class: "skeleton skeleton-calendar-day" })))))));
     }
     render() {
-        const themeStyles = this.getThemeStyles();
-        return (h("div", { key: '40758aaa06e5f062de92675766e4531995f74bc7', class: "occurrence-selector", ref: (el) => (this.containerRef = el), style: themeStyles }, this.loading && this.renderSkeleton(), !this.loading && this.error && (h("div", { key: '6d2f5b9c07f65d4941bfb4870729fe3248cb277e', class: "error-container" }, h("svg", { key: 'daaf1f48dcff80ae7cf94ae0da1d66d9c9b7fb0f', class: "error-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("circle", { key: '0a9f494a5cf7f79146e56fc44469a3ca9e5238ae', cx: "12", cy: "12", r: "10" }), h("path", { key: '67d7b453508c847593136bd60e34ea0c38d30cda', d: "M12 8v4m0 4h.01" })), h("p", { key: 'c1cc92585ed4451b686350b6d718c3ba06b72dd3', class: "error-message" }, this.error), h("button", { key: '4ec9d048af704af12a800385b9868501973ba477', class: "retry-button", onClick: () => this.fetchOccurrences() }, "Retry"))), !this.loading && !this.error && (this.occurrences.length === 0 ? (h("div", { class: "no-occurrences" }, h("p", null, "No dates available for this event."))) : (h("div", { class: "selector-content" }, this.computedDisplayMode === 'list' && this.renderListView(), this.computedDisplayMode === 'slots' && this.renderSlotsView(), this.computedDisplayMode === 'calendar' && this.renderCalendarView())))));
+        const { status, strings, state, derived } = this.view;
+        return (h("div", { key: '84951fb5171ed6c79604861a171f49f43c8b809c', class: "occurrence-selector", ref: (el) => (this.containerRef = el), style: this.themeStyles() }, status === 'loading' && this.renderSkeleton(), status === 'error' && (h("div", { key: '2850712eae277f32f3538426c8a5d36b73ca918e', class: "error-container" }, h("svg", { key: '89192cd7cce29781b87c83c8dee71d59f6a685ed', class: "error-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("circle", { key: '27a52ecb1228c541202752be84323abe687c1655', cx: "12", cy: "12", r: "10" }), h("path", { key: 'f51c2b49de89b9c66cde01e11a2de4c56d4dbad9', d: "M12 8v4m0 4h.01" })), h("p", { key: '3c85d762de430f477d2c9ad4341b23765c93e2e3', class: "error-message" }, state.error), h("button", { key: '22fa271a8f0a15e18141cf6d66a25a2bf9299c72', class: "retry-button", onClick: () => void this.element.actions.load() }, strings.retry))), status === 'empty' && (h("div", { key: '285403135ccff6cd6c8de6a9c62c9186c67c102c', class: "no-occurrences" }, h("p", { key: '98373f0c5793cb1aba1328558fac3210e7c6aeeb' }, strings.empty))), status === 'ready' && (h("div", { key: 'a61d2c02538f3339e54770e53a4f807e72182357', class: "selector-content" }, derived.mode === 'list' && this.renderListView(), derived.mode === 'slots' && this.renderSlotsView(), derived.mode === 'calendar' && this.renderCalendarView()))));
     }
     static get watchers() { return {
         "eventId": [{
-                "onEventIdChange": 0
+                "watchSubject": 0
+            }],
+        "displayMode": [{
+                "syncProps": 0
+            }],
+        "orientation": [{
+                "syncProps": 0
+            }],
+        "theme": [{
+                "syncProps": 0
             }]
     }; }
 };
 TlOccurrenceSelector.style = tlOccurrenceSelectorCss();
 
-const tlTicketSelectorCss = () => `:host{--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);display:block;font-family:var(--tl-font-family, system-ui, sans-serif)}.ticket-selector{background:var(--tl-color-background, #ffffff)}.skeleton-container{padding:var(--tl-spacing-4, 1rem)}.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);animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}.error-state{padding:var(--tl-spacing-4, 1rem);color:var(--tl-color-destructive, #ef4444)}.error-message{margin:0;font-size:14px}.ticket-list{margin-bottom:var(--tl-spacing-4, 1rem)}.ticket-row{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)}.ticket-row.sold-out{opacity:0.5}.ticket-info{flex:1;min-width:0}.ticket-header{display:flex;align-items:center;gap:var(--tl-spacing-2, 0.5rem);flex-wrap:wrap}.ticket-name{font-weight:600;color:var(--tl-color-foreground, #111827);font-size:15px}.status-badge{font-size:12px;font-weight:500;padding:2px 8px;border-radius:4px}.status-badge.limited{background-color:var(--tl-color-warning-bg, #fef3c7);color:var(--tl-color-warning, #d97706)}.status-badge.sold-out{background-color:var(--tl-color-destructive-bg, #fee2e2);color:var(--tl-color-destructive, #ef4444)}.ticket-description{margin:var(--tl-spacing-1, 0.25rem) 0 0;font-size:14px;color:var(--tl-color-muted-foreground, #6b7280)}.ticket-price{margin:var(--tl-spacing-1, 0.25rem) 0 0;font-size:14px;font-weight:600;color:var(--tl-color-foreground, #111827)}.quantity-controls{display:flex;align-items:center;gap:var(--tl-spacing-2, 0.5rem);margin-left:var(--tl-spacing-4, 1rem)}.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);font-size:18px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color 0.15s, border-color 0.15s}.qty-btn:hover:not(:disabled){background-color:var(--tl-color-muted, #f3f4f6);border-color:var(--tl-color-border-hover, #9ca3af)}.qty-btn:disabled{cursor:not-allowed;opacity:0.5}.qty-value{width:32px;text-align:center;font-weight:600;font-size:16px;color:var(--tl-color-foreground, #111827)}.success-message{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);color:#ffffff;border-radius:var(--tl-radius-md, 0.5rem);margin-bottom:var(--tl-spacing-3, 0.75rem);font-weight:500;font-size:14px}.success-icon{width:18px;height:18px}.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);border:none;background-color:var(--tl-color-primary, #6366f1);color:var(--tl-color-primary-foreground, #ffffff);font-weight:600;font-size:16px;cursor:pointer;transition:opacity 0.15s, transform 0.1s}.add-to-cart-btn:hover:not(:disabled){opacity:0.9}.add-to-cart-btn:active:not(:disabled){transform:scale(0.98)}.add-to-cart-btn.disabled,.add-to-cart-btn:disabled{background-color:var(--tl-color-muted, #d1d5db);color:var(--tl-color-muted-foreground, #6b7280);cursor:not-allowed}`;
+const tlTicketSelectorCss = () => `:host{--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)}.ticket-selector{background:var(--tl-color-background)}.skeleton-container{padding:var(--tl-spacing-4)}.skeleton-row{height:60px;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}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}.error-state{padding:var(--tl-spacing-4);color:var(--tl-color-destructive)}.error-message{margin:0;font-size:14px}.ticket-list{margin-bottom:var(--tl-spacing-4)}.ticket-row{display:flex;align-items:center;justify-content:space-between;padding:var(--tl-spacing-3) 0;border-bottom:1px solid var(--tl-color-border)}.ticket-row.sold-out{opacity:0.5}.ticket-info{flex:1;min-width:0}.ticket-header{display:flex;align-items:center;gap:var(--tl-spacing-2);flex-wrap:wrap}.ticket-name{font-weight:600;color:var(--tl-color-foreground);font-size:15px}.status-badge{font-size:12px;font-weight:500;padding:2px 8px;border-radius:4px}.status-badge.limited{background-color:var(--tl-color-warning-bg);color:var(--tl-color-warning)}.status-badge.sold-out{background-color:var(--tl-color-destructive-bg);color:var(--tl-color-destructive)}.ticket-description{margin:var(--tl-spacing-1) 0 0;font-size:14px;color:var(--tl-color-muted-foreground)}.ticket-price{margin:var(--tl-spacing-1) 0 0;font-size:14px;font-weight:600;color:var(--tl-color-foreground)}.quantity-controls{display:flex;align-items:center;gap:var(--tl-spacing-2);margin-left:var(--tl-spacing-4)}.qty-btn{width:32px;height:32px;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;display:flex;align-items:center;justify-content:center;transition:background-color 0.15s, border-color 0.15s}.qty-btn:hover:not(:disabled){background-color:var(--tl-color-muted);border-color:var(--tl-color-border-hover)}.qty-btn:disabled{cursor:not-allowed;opacity:0.5}.qty-value{width:32px;text-align:center;font-weight:600;font-size:16px;color:var(--tl-color-foreground)}.success-message{display:flex;align-items:center;justify-content:center;gap:var(--tl-spacing-2);padding:var(--tl-spacing-3);background-color:var(--tl-color-success);color:#ffffff;border-radius:var(--tl-radius-md);margin-bottom:var(--tl-spacing-3);font-weight:500;font-size:14px}.success-icon{width:18px;height:18px}.add-to-cart-btn{width:100%;padding:var(--tl-spacing-3) var(--tl-spacing-4);border-radius:var(--tl-radius-md);border:none;background-color:var(--tl-color-primary);color:var(--tl-color-primary-foreground);font-weight:600;font-size:16px;cursor:pointer;transition:opacity 0.15s, transform 0.1s}.add-to-cart-btn:hover:not(:disabled){opacity:0.9}.add-to-cart-btn:active:not(:disabled){transform:scale(0.98)}.add-to-cart-btn.disabled,.add-to-cart-btn:disabled{background-color:var(--tl-color-muted);color:var(--tl-color-muted-foreground);cursor:not-allowed}.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)}`;
 
 const TlTicketSelector = class {
     constructor(hostRef) {
@@ -585,157 +194,106 @@ const TlTicketSelector = class {
          * Button label
          */
         this.buttonLabel = 'Add to Cart';
-        this.ticketTypes = [];
-        this.quantities = {};
-        this.loading = true;
-        this.error = null;
-        this.adding = false;
-        this.addSuccess = false;
+        this.element = createElement(ticketSelectorCore, {
+            client: () => getSDK(),
+            // What "the client is up" means on the web. The core waits on it in its
+            // own mount; the harness no longer decides when to load (TKT-197).
+            clientReady: () => whenSDK(),
+            emit: (event, detail) => this.forward(event, detail),
+        });
+        /** The core's whole view. Assigning it is what makes Stencil re-render. */
+        this.view = this.element.view;
     }
-    watchPropsChange() {
-        this.loadTicketTypes();
+    /**
+     * The fee the surface has quoted for this selection. Core state, exposed here
+     * because it is set from outside the element and not from an attribute: there
+     * is no quote operation on the buyer-facing surface yet, so it stays null and
+     * no fee row is rendered.
+     */
+    get feeQuote() {
+        return this.element.state.feeQuote;
     }
-    async componentWillLoad() {
-        await this.waitForSDKAndLoad();
+    set feeQuote(quote) {
+        this.element.actions.setFeeQuote(quote);
     }
     /**
-     * Wait for SDK to be ready, then load ticket types
+     * A new event or occurrence is a new subject: the element is torn down and
+     * mounted again, so whatever the core set up for the old one is undone
+     * before anything is set up for the new one.
      */
-    async waitForSDKAndLoad() {
-        if (!this.eventId || !this.occurrenceId) {
-            return;
-        }
-        try {
-            await whenSDK();
-            await this.loadTicketTypes();
-        }
-        catch (err) {
-            this.error = err instanceof Error ? err.message : 'SDK not initialized.';
-            this.loading = false;
-        }
-    }
-    async loadTicketTypes() {
-        try {
-            console.log('[tl-ticket-selector] Loading ticket types...', {
-                eventId: this.eventId,
-                occurrenceId: this.occurrenceId
-            });
-            this.loading = true;
-            this.error = null;
-            const sdk = getSDK();
-            const eventsManager = sdk.getEventsManager();
-            const types = await eventsManager.getTicketTypes(this.eventId, this.occurrenceId);
-            console.log('[tl-ticket-selector] Ticket types loaded:', types.length);
-            this.ticketTypes = types;
-            // Initialise quantities to 0
-            const initialQuantities = {};
-            types.forEach((t) => {
-                initialQuantities[t.id] = 0;
-            });
-            this.quantities = initialQuantities;
-        }
-        catch (err) {
-            console.error('[tl-ticket-selector] Failed to load ticket types:', err);
-            this.error = err instanceof Error ? err.message : 'Failed to load tickets';
-            this.tlError.emit({ message: this.error });
-        }
-        finally {
-            this.loading = false;
-        }
+    watchPropsChange() {
+        this.syncProps();
+        this.remount();
+    }
+    syncProps() {
+        this.element.setProps({
+            eventId: this.eventId,
+            occurrenceId: this.occurrenceId,
+            showButton: this.showButton,
+            buttonLabel: this.buttonLabel,
+        });
     }
-    handleQuantityChange(ticketTypeId, delta) {
-        const ticketType = this.ticketTypes.find(t => t.id === ticketTypeId);
-        if (!ticketType)
-            return;
-        const currentQty = this.quantities[ticketTypeId] || 0;
-        const newQty = Math.max(0, Math.min(ticketType.maxPerOrder, currentQty + delta));
-        this.quantities = {
-            ...this.quantities,
-            [ticketTypeId]: newQty,
-        };
-        const total = this.calculateTotal();
-        this.tlQuantityChange.emit({ ticketTypeId, quantity: newQty, total });
+    /**
+     * On screen: render what the core says and put the core to work. What "to
+     * work" means is the core's own business - for this element, waiting for the
+     * client and reading the ticket types.
+     *
+     * `connectedCallback` and not `componentWillLoad` because this runs again
+     * when the element is moved in the DOM, and that is exactly when a mount and
+     * its teardown have to pair up.
+     */
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        this.teardown = this.element.mount();
     }
-    calculateTotal() {
-        return this.ticketTypes.reduce((sum, tt) => {
-            return sum + (this.quantities[tt.id] || 0) * tt.price;
-        }, 0);
+    /**
+     * Off screen: run the mount's teardown, and nothing more. `destroy()` is
+     * terminal and Stencil calls this for a move as well as a removal, so
+     * destroying here would leave a re-inserted element frozen. The instance
+     * holds no listener and no subscription once these two have run.
+     */
+    disconnectedCallback() {
+        this.teardown?.();
+        this.teardown = undefined;
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
     }
-    getTotalItems() {
-        return Object.values(this.quantities).reduce((sum, qty) => sum + qty, 0);
+    remount() {
+        this.teardown?.();
+        this.teardown = this.element.mount();
     }
-    async handleAddToCart() {
-        const itemsToAdd = Object.entries(this.quantities)
-            .filter(([_, qty]) => qty > 0)
-            .map(([ticketTypeId, quantity]) => ({ ticketTypeId, quantity }));
-        if (itemsToAdd.length === 0)
-            return;
-        this.adding = true;
-        this.addSuccess = false;
-        try {
-            if (hasSDK()) {
-                const sdk = getSDK();
-                const cartManager = sdk.getCartManager?.();
-                if (cartManager) {
-                    for (const item of itemsToAdd) {
-                        await cartManager.addItem(item.ticketTypeId, item.quantity, this.occurrenceId);
-                    }
-                    console.log('[tl-ticket-selector] Items added to cart');
-                }
-            }
-            // Reset quantities after adding
-            const resetQuantities = {};
-            this.ticketTypes.forEach(t => {
-                resetQuantities[t.id] = 0;
-            });
-            this.quantities = resetQuantities;
-            this.addSuccess = true;
-            // Clear success message after 3 seconds
-            setTimeout(() => {
-                this.addSuccess = false;
-            }, 3000);
-            this.tlAddToCart.emit({ items: itemsToAdd });
+    forward(event, detail) {
+        if (event === 'tlAddToCart')
+            this.tlAddToCart.emit(detail);
+        else if (event === 'tlQuantityChange') {
+            this.tlQuantityChange.emit(detail);
         }
-        catch (err) {
-            console.error('[tl-ticket-selector] Failed to add to cart:', err);
-            this.error = err instanceof Error ? err.message : 'Failed to add to cart';
-            this.tlError.emit({ message: this.error });
-        }
-        finally {
-            this.adding = false;
-        }
-    }
-    formatPrice(priceInPence, currency = 'GBP') {
-        return new Intl.NumberFormat('en-GB', {
-            style: 'currency',
-            currency,
-        }).format(priceInPence / 100);
+        else if (event === 'tlError')
+            this.tlError.emit(detail);
     }
     renderSkeleton() {
         return (h("div", { class: "skeleton-container" }, h("div", { class: "skeleton-row" }), h("div", { class: "skeleton-row" }), h("div", { class: "skeleton-row" })));
     }
     renderError() {
-        return (h("div", { class: "error-state" }, h("p", { class: "error-message" }, this.error)));
+        return (h("div", { class: "error-state" }, h("p", { class: "error-message" }, this.view.state.error)));
     }
-    renderTicketRow(tt) {
-        const isSoldOut = tt.availabilityStatus === 'sold_out';
-        const qty = this.quantities[tt.id] || 0;
-        return (h("div", { class: `ticket-row ${isSoldOut ? 'sold-out' : ''}`, key: tt.id }, h("div", { class: "ticket-info" }, h("div", { class: "ticket-header" }, h("span", { class: "ticket-name" }, tt.name), tt.availabilityStatus === 'limited' && (h("span", { class: "status-badge limited" }, "Limited")), isSoldOut && (h("span", { class: "status-badge sold-out" }, "Sold Out"))), tt.description && (h("p", { class: "ticket-description" }, tt.description)), h("p", { class: "ticket-price" }, this.formatPrice(tt.price, tt.currency))), h("div", { class: "quantity-controls" }, h("button", { class: "qty-btn", onClick: () => this.handleQuantityChange(tt.id, -1), disabled: isSoldOut || qty === 0, "aria-label": "Decrease quantity" }, "\u2212"), h("span", { class: "qty-value" }, qty), h("button", { class: "qty-btn", onClick: () => this.handleQuantityChange(tt.id, 1), disabled: isSoldOut || qty >= tt.maxPerOrder, "aria-label": "Increase quantity" }, "+"))));
+    renderTicketRow(row) {
+        const strings = this.view.strings;
+        return (h("div", { class: `ticket-row ${row.soldOut ? 'sold-out' : ''}`, key: row.id }, h("div", { class: "ticket-info" }, h("div", { class: "ticket-header" }, h("span", { class: "ticket-name" }, row.name), row.limited && h("span", { class: "status-badge limited" }, strings.limited), row.soldOut && h("span", { class: "status-badge sold-out" }, strings.soldOut)), row.description && h("p", { class: "ticket-description" }, row.description), h("p", { class: "ticket-price" }, row.priceLabel)), h("div", { class: "quantity-controls" }, h("button", { class: "qty-btn", onClick: () => this.element.actions.changeQuantity(row.id, -1), disabled: !row.canDecrease, "aria-label": strings.decrease }, "\u2212"), h("span", { class: "qty-value" }, row.quantity), h("button", { class: "qty-btn", onClick: () => this.element.actions.changeQuantity(row.id, 1), disabled: !row.canIncrease, "aria-label": strings.increase }, "+"))));
     }
     render() {
-        if (this.loading) {
+        const { status, state, strings, derived } = this.view;
+        if (status === 'loading') {
             return this.renderSkeleton();
         }
-        if (this.error) {
+        if (status === 'error') {
             return this.renderError();
         }
-        const totalItems = this.getTotalItems();
-        const totalPrice = this.calculateTotal();
-        return (h("div", { class: "ticket-selector" }, h("div", { class: "ticket-list" }, this.ticketTypes.map(tt => this.renderTicketRow(tt))), this.addSuccess && (h("div", { class: "success-message" }, h("svg", { class: "success-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M5 13l4 4L19 7" })), "Added to cart!")), this.showButton && (h("button", { class: `add-to-cart-btn ${totalItems === 0 ? 'disabled' : ''}`, onClick: () => this.handleAddToCart(), disabled: totalItems === 0 || this.adding }, this.adding
-            ? 'Adding...'
-            : totalItems === 0
-                ? 'Select Tickets'
-                : `${this.buttonLabel} - ${this.formatPrice(totalPrice)}`))));
+        return (h("div", { class: "ticket-selector" }, h("div", { class: "ticket-list" }, derived.rows.map((row) => this.renderTicketRow(row))), derived.showTotals && (h("div", { class: "selection-totals" }, h("div", { class: "total-row" }, h("span", null, strings.ticketsRow), h("span", null, derived.subtotalLabel)), h("div", { class: "total-row fee" }, h("span", null, derived.totals.feeLabel), h("span", null, derived.feeLabel)), h("div", { class: "total-row total" }, h("span", null, strings.totalRow), h("span", null, derived.totalLabel)))), state.addSuccess && (h("div", { class: "success-message" }, h("svg", { class: "success-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M5 13l4 4L19 7" })), strings.added)), this.showButton && (h("button", { class: `add-to-cart-btn ${derived.totalItems === 0 ? 'disabled' : ''}`, onClick: () => this.element.actions.addToCart(), disabled: derived.actionDisabled }, derived.actionLabel))));
     }
     static get watchers() { return {
         "eventId": [{
@@ -743,6 +301,12 @@ const TlTicketSelector = class {
             }],
         "occurrenceId": [{
                 "watchPropsChange": 0
+            }],
+        "showButton": [{
+                "syncProps": 0
+            }],
+        "buttonLabel": [{
+                "syncProps": 0
             }]
     }; }
 };