@ticketlayer/elements 0.4.0 → 1.0.0

package/dist/esm/ticketlayer-elements.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-OoYV1faY.js';
-export { s as setNonce } from './index-OoYV1faY.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-imfxp765.js';
+export { s as setNonce } from './index-imfxp765.js';
 
 /*
  Stencil Client Patch Browser v4.45.0 | MIT Licensed | https://stenciljs.com
@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["tl-my-orders",[[1,"tl-my-orders",{"emptyMessage":[1,"empty-message"],"columns":[2],"orders":[32],"authenticated":[32],"loading":[32],"error":[32],"expandedId":[32]}]]],["tl-buy-modal",[[1,"tl-buy-modal",{"eventId":[1,"event-id"],"occurrenceId":[1,"occurrence-id"],"step":[32],"eventName":[32],"imageUrl":[32],"venueLabel":[32],"dateSummary":[32],"selectedOccurrenceId":[32],"occurrenceCount":[32],"occurrenceLabel":[32],"error":[32]}]]],["tl-order-confirmation",[[1,"tl-order-confirmation",{"orderId":[1,"order-id"],"customerEmail":[1,"customer-email"],"showTickets":[4,"show-tickets"],"columns":[2],"order":[32],"resolvedOrderId":[32],"loading":[32],"error":[32],"paymentFailed":[32],"occurrence":[32],"signedInCustomer":[32]},null,{"orderId":[{"watchOrderId":0}]}]]],["tl-cart-drawer",[[1,"tl-cart-drawer",{"side":[1],"heading":[1],"open":[1028],"visible":[32]},null,{"open":[{"onOpenProp":0}]}]]],["tl-event-list",[[1,"tl-event-list",{"limit":[2],"category":[1],"columns":[2],"events":[32],"loading":[32],"error":[32]},null,{"limit":[{"watchFiltersChange":0}],"category":[{"watchFiltersChange":0}]}]]],["tl-buy-tickets-button",[[1,"tl-buy-tickets-button",{"eventId":[1,"event-id"],"occurrenceId":[1,"occurrence-id"],"state":[1],"label":[1],"variant":[1],"size":[1],"fullWidth":[4,"full-width"],"price":[2],"currency":[1],"pricePrefix":[1,"price-prefix"],"disabled":[4],"isHovered":[32]}]]],["tl-buy-tickets-wrapper",[[260,"tl-buy-tickets-wrapper",{"eventId":[1,"event-id"],"occurrenceId":[1,"occurrence-id"],"disabled":[4]}]]],["tl-cart-badge",[[1,"tl-cart-badge",{"showEmpty":[4,"show-empty"],"icon":[1],"size":[1],"badgeOnly":[4,"badge-only"],"itemCount":[32]}]]],["tl-checkout-wrapper",[[260,"tl-checkout-wrapper",{"disabled":[4]}]]],["tl-promo-code",[[1,"tl-promo-code",{"placeholder":[1],"buttonLabel":[1,"button-label"],"code":[32],"applying":[32],"applied":[32],"error":[32]}]]],["tl-seat-map",[[1,"tl-seat-map",{"occurrenceId":[1,"occurrence-id"],"hboUrl":[1,"hbo-url"],"apiUrl":[1,"api-url"],"height":[1],"width":[1],"isReady":[32],"isLoading":[32],"error":[32],"seatsInCart":[32]},null,{"occurrenceId":[{"watchOccurrenceId":0}]}]]],["tl-cart",[[1,"tl-cart",{"showCheckoutButton":[4,"show-checkout-button"],"checkoutLabel":[1,"checkout-label"],"showRemoveButtons":[4,"show-remove-buttons"],"compact":[4],"cart":[32],"loading":[32],"error":[32],"removingItemId":[32]}]]],["tl-event-card",[[1,"tl-event-card",{"event":[16],"eventId":[1,"event-id"],"loadedEvent":[32],"loading":[32],"error":[32]},null,{"eventId":[{"watchEventId":0}]}]]],["tl-login",[[1,"tl-login",{"heading":[1],"allowCodeEntry":[4,"allow-code-entry"],"phase":[32],"email":[32],"code":[32],"busy":[32],"error":[32],"notice":[32],"customer":[32]}]]],["tl-occurrence-selector_2",[[1,"tl-occurrence-selector",{"eventId":[1,"event-id"],"displayMode":[1,"display-mode"],"orientation":[1],"theme":[16],"loading":[32],"error":[32],"occurrences":[32],"currentMonth":[32],"selectedDate":[32],"computedDisplayMode":[32],"containerWidth":[32]},null,{"eventId":[{"onEventIdChange":0}]}],[1,"tl-ticket-selector",{"eventId":[1,"event-id"],"occurrenceId":[1,"occurrence-id"],"showButton":[4,"show-button"],"buttonLabel":[1,"button-label"],"view":[32]},null,{"eventId":[{"watchPropsChange":0}],"occurrenceId":[{"watchPropsChange":0}],"showButton":[{"syncProps":0}],"buttonLabel":[{"syncProps":0}]}]]],["tl-order-tickets_2",[[1,"tl-order-tickets",{"orderId":[1,"order-id"],"columns":[2],"tickets":[32],"loading":[32],"error":[32],"issuing":[32]},null,{"orderId":[{"watchOrder":0}]}],[1,"tl-ticket",{"ticket":[16],"orderId":[1,"order-id"],"qrSvg":[32],"downloading":[32]},null,{"ticket":[{"generateQr":0}]}]]]], options);
+  return bootstrapLazy([["tl-my-orders",[[1,"tl-my-orders",{"emptyMessage":[1,"empty-message"],"columns":[2],"view":[32]},null,{"emptyMessage":[{"syncProps":0}],"columns":[{"syncProps":0}]}]]],["tl-buy-modal",[[1,"tl-buy-modal",{"eventId":[1,"event-id"],"occurrenceId":[1,"occurrence-id"],"step":[32],"eventName":[32],"imageUrl":[32],"venueLabel":[32],"dateSummary":[32],"selectedOccurrenceId":[32],"occurrenceCount":[32],"occurrenceLabel":[32],"error":[32]}]]],["tl-order-confirmation",[[1,"tl-order-confirmation",{"orderId":[1,"order-id"],"customerEmail":[1,"customer-email"],"showTickets":[4,"show-tickets"],"columns":[2],"view":[32]},null,{"orderId":[{"watchOrderId":0}],"customerEmail":[{"syncProps":0}],"showTickets":[{"syncProps":0}],"columns":[{"syncProps":0}]}]]],["tl-cart-drawer",[[1,"tl-cart-drawer",{"side":[1],"heading":[1],"open":[1028],"view":[32]},null,{"side":[{"syncProps":0}],"heading":[{"syncProps":0}],"open":[{"onOpenProp":0}]}]]],["tl-event-card",[[1,"tl-event-card",{"event":[16],"eventId":[1,"event-id"],"view":[32]},null,{"event":[{"syncProps":0}],"eventId":[{"watchEventId":0}]}]]],["tl-event-list",[[1,"tl-event-list",{"limit":[2],"category":[1],"columns":[2],"view":[32]},null,{"limit":[{"watchFiltersChange":0}],"category":[{"watchFiltersChange":0}],"columns":[{"syncProps":0}]}]]],["tl-buy-tickets-button",[[1,"tl-buy-tickets-button",{"eventId":[1,"event-id"],"occurrenceId":[1,"occurrence-id"],"state":[1],"label":[1],"variant":[1],"size":[1],"fullWidth":[4,"full-width"],"price":[2],"currency":[1],"pricePrefix":[1,"price-prefix"],"disabled":[4],"isHovered":[32],"view":[32]},null,{"eventId":[{"syncProps":0}],"occurrenceId":[{"syncProps":0}],"state":[{"syncProps":0}],"label":[{"syncProps":0}],"variant":[{"syncProps":0}],"size":[{"syncProps":0}],"fullWidth":[{"syncProps":0}],"price":[{"syncProps":0}],"currency":[{"syncProps":0}],"pricePrefix":[{"syncProps":0}],"disabled":[{"syncProps":0}]}]]],["tl-buy-tickets-wrapper",[[260,"tl-buy-tickets-wrapper",{"eventId":[1,"event-id"],"occurrenceId":[1,"occurrence-id"],"disabled":[4],"view":[32]},null,{"eventId":[{"syncProps":0}],"occurrenceId":[{"syncProps":0}],"disabled":[{"syncProps":0}]}]]],["tl-cart-badge",[[1,"tl-cart-badge",{"showEmpty":[4,"show-empty"],"icon":[1],"size":[1],"badgeOnly":[4,"badge-only"],"view":[32]},null,{"showEmpty":[{"syncProps":0}],"icon":[{"syncProps":0}],"size":[{"syncProps":0}],"badgeOnly":[{"syncProps":0}]}]]],["tl-checkout-wrapper",[[260,"tl-checkout-wrapper",{"disabled":[4],"view":[32]},null,{"disabled":[{"syncProps":0}]}]]],["tl-promo-code",[[1,"tl-promo-code",{"placeholder":[1],"buttonLabel":[1,"button-label"],"view":[32]},null,{"placeholder":[{"syncProps":0}],"buttonLabel":[{"syncProps":0}]}]]],["tl-seat-map",[[1,"tl-seat-map",{"occurrenceId":[1,"occurrence-id"],"hboUrl":[1,"hbo-url"],"apiUrl":[1,"api-url"],"height":[1],"width":[1],"isReady":[32],"isLoading":[32],"error":[32],"seatsInCart":[32]},null,{"occurrenceId":[{"watchOccurrenceId":0}]}]]],["tl-cart",[[1,"tl-cart",{"showCheckoutButton":[4,"show-checkout-button"],"checkoutLabel":[1,"checkout-label"],"showRemoveButtons":[4,"show-remove-buttons"],"compact":[4],"view":[32]},null,{"showCheckoutButton":[{"syncProps":0}],"checkoutLabel":[{"syncProps":0}],"showRemoveButtons":[{"syncProps":0}],"compact":[{"syncProps":0}]}]]],["tl-login",[[1,"tl-login",{"heading":[1],"allowCodeEntry":[4,"allow-code-entry"],"view":[32]},null,{"heading":[{"syncProps":0}],"allowCodeEntry":[{"syncProps":0}]}]]],["tl-occurrence-selector_2",[[1,"tl-occurrence-selector",{"eventId":[1,"event-id"],"displayMode":[1,"display-mode"],"orientation":[1],"theme":[16],"view":[32]},null,{"eventId":[{"watchSubject":0}],"displayMode":[{"syncProps":0}],"orientation":[{"syncProps":0}],"theme":[{"syncProps":0}]}],[1,"tl-ticket-selector",{"eventId":[1,"event-id"],"occurrenceId":[1,"occurrence-id"],"showButton":[4,"show-button"],"buttonLabel":[1,"button-label"],"view":[32]},null,{"eventId":[{"watchPropsChange":0}],"occurrenceId":[{"watchPropsChange":0}],"showButton":[{"syncProps":0}],"buttonLabel":[{"syncProps":0}]}]]],["tl-order-tickets_2",[[1,"tl-order-tickets",{"orderId":[1,"order-id"],"columns":[2],"view":[32]},null,{"orderId":[{"watchOrder":0}],"columns":[{"syncProps":0}]}],[1,"tl-ticket",{"ticket":[16],"orderId":[1,"order-id"],"qrSvg":[32],"downloading":[32]},null,{"ticket":[{"generateQr":0}]}]]]], options);
 });

package/dist/esm/tl-buy-modal.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-OoYV1faY.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-imfxp765.js';
 import { w as whenSDK, g as getSDK } from './sdk-connector-CqhvfyKV.js';
 
 const tlBuyModalCss = () => `:host{--_bg:var(--tl-background);--_fg:var(--tl-foreground);--_muted:var(--tl-muted);--_muted-fg:var(--tl-muted-foreground);--_border:var(--tl-border);--_primary:var(--tl-primary);--_primary-fg:var(--tl-primary-foreground);--_radius:var(--tl-radius-lg);--_font:var(--tl-font-family);font-family:var(--_font)}.overlay{position:fixed;inset:0;z-index:2147483646;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;background:rgba(8, 8, 16, 0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:tl-fade 0.18s ease-out}.panel{width:100%;max-width:460px;max-height:86vh;display:flex;flex-direction:column;overflow:hidden;background:var(--_bg);color:var(--_fg);border:1px solid var(--_border);border-radius:var(--_radius);box-shadow:0 24px 64px rgba(0, 0, 0, 0.45);animation:tl-rise 0.22s cubic-bezier(0.16, 1, 0.3, 1);transition:max-width 0.25s cubic-bezier(0.16, 1, 0.3, 1)}.panel--wide{max-width:720px}.powered-by{width:100%;max-width:460px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px;font-size:12px;font-weight:500;color:rgba(255, 255, 255, 0.78);animation:tl-fade 0.3s ease-out}.powered-by a{color:inherit;text-decoration:none;opacity:0.85;transition:opacity 0.15s ease}.powered-by a:hover{opacity:1}.powered-by .pb-links{display:flex;gap:16px;align-items:center}.powered-by .pb-brand{display:inline-flex;align-items:center;gap:6px;opacity:0.92}.powered-by .pb-brand svg{display:block}.powered-by .pb-pre{opacity:0.7}.powered-by .pb-word{font-weight:700;letter-spacing:0.01em}.panel-header{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid var(--_border)}.event-thumb{flex:none;width:56px;height:56px;border-radius:12px;background-size:cover;background-position:center;background-color:var(--_muted);border:1px solid var(--_border)}.titles{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}.event-meta{margin:0;font-size:0.8rem;color:var(--_muted-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kicker{font-size:0.72rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--_primary)}.event-name{margin:0;font-size:1.18rem;font-weight:700;line-height:1.25;color:var(--_fg);overflow:hidden;text-overflow:ellipsis}.close-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:999px;background:var(--_muted);color:var(--_muted-fg);cursor:pointer;transition:color 0.15s, background 0.15s}.close-btn:hover{color:var(--_fg)}.close-btn svg{width:16px;height:16px}.panel-body{padding:18px 22px 22px;overflow-y:auto}.state-msg{display:flex;align-items:center;justify-content:center;gap:10px;padding:40px 0;color:var(--_muted-fg)}.state-msg.error{color:#b91c1c}.spinner{width:16px;height:16px;border:2px solid var(--_border);border-top-color:var(--_primary);border-radius:999px;animation:tl-spin 0.7s linear infinite}.tickets-step{display:flex;flex-direction:column;gap:6px}.back-link{align-self:flex-start;padding:0;border:0;background:none;color:var(--_primary);font-size:0.85rem;font-weight:500;cursor:pointer}.back-link:hover{text-decoration:underline}.occ-label{margin:2px 0 8px;font-size:0.9rem;font-weight:600;color:var(--_fg)}.done-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:16px 0 4px}.done-mark{font-size:2.4rem;line-height:1;margin-bottom:6px}.done-title{margin:0;font-size:1.1rem;font-weight:700;color:var(--_fg)}.done-sub{margin:0 0 14px;font-size:0.9rem;color:var(--_muted-fg)}.primary-btn{width:100%;padding:13px;border:0;border-radius:var(--tl-radius-md);background:var(--_primary);color:var(--_primary-fg);font-size:0.98rem;font-weight:600;cursor:pointer;transition:opacity 0.15s}.primary-btn:hover{opacity:0.9}.ghost-btn{width:100%;margin-top:8px;padding:12px;border:1px solid var(--_border);border-radius:var(--tl-radius-md);background:transparent;color:var(--_fg);font-size:0.95rem;font-weight:500;cursor:pointer;transition:background 0.15s}.ghost-btn:hover{background:var(--_muted)}@keyframes tl-fade{from{opacity:0}}@keyframes tl-rise{from{opacity:0;transform:translateY(12px) scale(0.98)}}@keyframes tl-spin{to{transform:rotate(360deg)}}`;
@@ -114,10 +114,10 @@ const TlBuyModal = class {
         }
     }
     render() {
-        return (h(Host, { key: '1245e518c2b5232f4d9dba091cf808cd3867fbef' }, h("div", { key: '4e770fccdd785444f1cc87df4adab5a5dc1bf58a', class: "overlay", onClick: (e) => {
+        return (h(Host, { key: 'f28be761216b4a84904c1e325dc34d848625db14' }, h("div", { key: '0f36708a6b52d19ee987b211588e759aaf82ac03', class: "overlay", onClick: (e) => {
                 if (e.target === e.currentTarget)
                     this.close();
-            } }, h("div", { key: '57b13dac690028aeebd6a601acfba07f00854c40', class: { panel: true, 'panel--wide': this.step === 'occurrence' }, role: "dialog", "aria-modal": "true", "aria-label": this.eventName }, h("header", { key: '881e9cc70a0ca25947f272b9ebcb2e6d4b4268f2', class: "panel-header" }, this.imageUrl && (h("div", { key: '753f7df1b5118dfacbbc6b89b4e5d7ba114f6cdf', class: "event-thumb", style: { backgroundImage: `url(${this.imageUrl})` } })), h("div", { key: '9aaa32d1add90fabd1b0ea0c100f198962f4e6a5', class: "titles" }, h("span", { key: '538032bdf2338206ad763417386852ff97cc472f', class: "kicker" }, this.stepKicker()), h("h2", { key: '71429804179e7fbbea1fa90a2937a065517092f5', class: "event-name" }, this.eventName), this.venueLabel && h("p", { key: 'dd968b397deab890df3a4fbdff33226e82bd9660', class: "event-meta" }, this.venueLabel), this.dateSummary && h("p", { key: 'f40e6049d09b06c9f599e7d14d6fbb43b39b22fd', class: "event-meta" }, this.dateSummary)), h("button", { key: 'dbe0908f8cd8544654b627921f68cc4961802b77', class: "close-btn", "aria-label": "Close", onClick: this.close }, h("svg", { key: '23a750830e6e16d28cbcd5025507d25848aaadf7', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: 'e81b8763a5c781f72c1ca8a2113482948e3ba8cc', d: "M6 6l12 12M18 6L6 18", "stroke-linecap": "round" })))), h("div", { key: 'da71e610f907cf53e78246d2065aaf526d5ceffd', class: "panel-body" }, this.step === 'loading' && (h("div", { key: '28cbb9a98c7b08fa8dcb9d8d5dfbf3bec93fe38d', class: "state-msg" }, h("span", { key: '915c8de87cbdc7da1ccf0622ce6c0f02fccf2cad', class: "spinner" }), " Loading\u2026")), this.step === 'error' && h("div", { key: '5785578bfef6f1ee81d938d91ffd3ded975f8c12', class: "state-msg error" }, this.error), this.step === 'occurrence' && (h("tl-occurrence-selector", { key: 'eeb853eab141c3c103015e82d221a140f6a3a109', eventId: this.eventId, onTlSelect: this.handleOccurrenceSelect })), this.step === 'tickets' && this.selectedOccurrenceId && (h("div", { key: 'f608f592ba651eb431375433eb4ff9393863ade5', class: "tickets-step" }, this.occurrenceCount > 1 && (h("button", { key: '84adfbdbeaceb2cf4238c6ffd09558b4499ca940', class: "back-link", onClick: this.backToDates }, "\u2190 Change date")), this.occurrenceLabel && h("p", { key: '0317e9194049608711e8c622142c3ad2c0a5dc12', class: "occ-label" }, this.occurrenceLabel), h("tl-ticket-selector", { key: '27b1e05d9d92fb8d519375e2b27d4b5ea0a4890a', eventId: this.eventId, occurrenceId: this.selectedOccurrenceId, onTlAddToCart: this.handleAdded }))), this.step === 'done' && (h("div", { key: '0853088206988c66d489f8804df7899821d49e64', class: "done-step" }, h("div", { key: 'c2955b893c4dffaadcdfd27bee96ef2724a131a6', class: "done-mark" }, "\uD83C\uDF9F\uFE0F"), h("p", { key: '370c30dfcbc0c25b4794d984dd261a3a5779a9dc', class: "done-title" }, "Added to your cart"), h("p", { key: 'c462f3c9292740e2fd2c74b173484f80a5dc1a30', class: "done-sub" }, "Held for you while you check out."), h("button", { key: '484991f79572e3213ad6413a1af87599880c3643', class: "primary-btn", onClick: this.goCheckout }, "Go to checkout"), h("button", { key: '5b4ba5a472b794e8f5af0f131dad1c8c11b869f5', class: "ghost-btn", onClick: this.close }, "Keep browsing"))))), h("div", { key: '9acdd36744d363f41f0bed7938ecea33322362d1', class: "powered-by" }, h("div", { key: 'f45545a8fc625336618352f0c0e9e84a1babce96', class: "pb-links" }, h("a", { key: 'dd929b12419b8353d9a09ad242a9f351dfd699e2', href: "https://ticketlayer.com/privacy", target: "_blank", rel: "noopener noreferrer" }, "Privacy Policy"), h("a", { key: '859be221bdc76602defaebdb89a997778cda6a91', href: "https://ticketlayer.com/report-abuse", target: "_blank", rel: "noopener noreferrer" }, "Report Abuse")), h("a", { key: 'd4e1f44b3b084160d2df8b9d15e075ddc5e05363', class: "pb-brand", href: "https://ticketlayer.com", target: "_blank", rel: "noopener noreferrer" }, h("span", { key: 'fe7fd86576a4e9772daa2c4c449da060f20fa143', class: "pb-pre" }, "Powered by"), h("svg", { key: '19412bd9e5522f0af9f847fe8fda6aa0f0004a3a', width: "14", height: "14", viewBox: "0 0 50 50", fill: "none", "aria-hidden": "true" }, h("g", { key: '8e82f14ab1e8094a210db95b1310ce6c0feef446', transform: "matrix(0.0129 0 0 -0.0129 25.4752 25.4752)" }, h("path", { key: 'b50b04cfc07c4e55fcf5ce92967f69b99d34dd34', fill: "currentColor", transform: "translate(-1781.5, -1759.4003)", d: "M 41 2973 c 1 -285 5 -734 9 -998 c 7 -444 9 -488 30 -580 c 81 -364 235 -634 512 -900 c 135 -130 263 -220 423 -299 c 156 -77 249 -109 409 -143 c 110 -23 142 -25 354 -24 c 230 1 310 8 427 37 c 241 60 453 162 640 309 c 82 64 252 234 317 315 c 210 264 340 604 355 926 l 6 121 l -69 6 c -86 8 -706 9 -755 1 l -36 -6 l -21 -125 c -34 -191 -98 -317 -236 -462 c -111 -115 -249 -198 -396 -238 c -98 -27 -356 -24 -463 5 c -100 27 -183 69 -273 137 c -226 173 -353 409 -354 660 c 0 44 -5 120 -10 169 c -6 49 -8 91 -6 94 c 3 3 65 -22 138 -55 c 140 -64 251 -103 358 -127 c 71 -17 295 -46 347 -46 l 33 0 l 0 434 l 0 434 l -67 7 c -147 14 -269 56 -393 133 c -222 139 -378 393 -397 648 l -6 71 l -75 7 c -41 3 -239 6 -439 6 l -363 0 l 1 -517 z" }))), h("span", { key: '2623449abd22f36f5af80d5605d3b274a4c214c4', class: "pb-word" }, "ticketlayer"))))));
+            } }, h("div", { key: '0b2bc062c89e8b821763e163bdedc44047571390', class: { panel: true, 'panel--wide': this.step === 'occurrence' }, role: "dialog", "aria-modal": "true", "aria-label": this.eventName }, h("header", { key: 'c9e3cc54615dace1842ceed226acff23ed0dc0d3', class: "panel-header" }, this.imageUrl && (h("div", { key: '18ffd6168344f65231fa40252361b03ac65ae91a', class: "event-thumb", style: { backgroundImage: `url(${this.imageUrl})` } })), h("div", { key: '4ccbf9a0477948bcb4202310f80cceb1d6e5ad0f', class: "titles" }, h("span", { key: '1a72eb71baaf9eff16aabc5d20c22b02e9b5cc99', class: "kicker" }, this.stepKicker()), h("h2", { key: 'f7dbc184bb016652c1ffe2fe24a551207f226942', class: "event-name" }, this.eventName), this.venueLabel && h("p", { key: 'db7ebd34f688b36b5610aa6adf0d8ab766f00ac2', class: "event-meta" }, this.venueLabel), this.dateSummary && h("p", { key: '00812c8b7b9abf85343f3d6bda433251468da1d9', class: "event-meta" }, this.dateSummary)), h("button", { key: 'e3f7252979794959d6e5070d549010567c0aa349', class: "close-btn", "aria-label": "Close", onClick: this.close }, h("svg", { key: 'd692c47bb8c614b41e19866c5fe4a65b0e083686', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: 'cbb9a7bd3ce4ed2685a781729110bccd36b425a9', d: "M6 6l12 12M18 6L6 18", "stroke-linecap": "round" })))), h("div", { key: 'c14af096c9e1cfd9bcead143c1b8a106a4b28018', class: "panel-body" }, this.step === 'loading' && (h("div", { key: '108d1073d572f841f1945147a787b8bdea66cfba', class: "state-msg" }, h("span", { key: '27c2b7473c6edb14ade3b7104f728136c0a2b052', class: "spinner" }), " Loading\u2026")), this.step === 'error' && h("div", { key: '0e3f927f626d51dffc30bb7da7093b6a7cd90a2a', class: "state-msg error" }, this.error), this.step === 'occurrence' && (h("tl-occurrence-selector", { key: 'bfab02d294de3eb1bce39d3e39c21f450b474c99', eventId: this.eventId, onTlSelect: this.handleOccurrenceSelect })), this.step === 'tickets' && this.selectedOccurrenceId && (h("div", { key: '109be73c93b0b604b435cbbd540d5dd5c48eacfe', class: "tickets-step" }, this.occurrenceCount > 1 && (h("button", { key: '2769d896476487e1412ac37309cd2e162b4bd275', class: "back-link", onClick: this.backToDates }, "\u2190 Change date")), this.occurrenceLabel && h("p", { key: '0c709ed8ba75b9e13a141ae755353fc694532935', class: "occ-label" }, this.occurrenceLabel), h("tl-ticket-selector", { key: 'cdf66533a591e89dc265532a2578c30327fd06c8', eventId: this.eventId, occurrenceId: this.selectedOccurrenceId, onTlAddToCart: this.handleAdded }))), this.step === 'done' && (h("div", { key: '6c4b294a4b9412e643a230f4064d15a587f79383', class: "done-step" }, h("div", { key: 'ba0e663e731402192675db509c886c2ce6a2418b', class: "done-mark" }, "\uD83C\uDF9F\uFE0F"), h("p", { key: '8d0f07758d3978080177a99e580f59fbcfefb611', class: "done-title" }, "Added to your cart"), h("p", { key: 'bbf4bd073f021a2f516f91528311d494c40faa85', class: "done-sub" }, "Held for you while you check out."), h("button", { key: '71c90ad945ced314321d964795beed8301c989ac', class: "primary-btn", onClick: this.goCheckout }, "Go to checkout"), h("button", { key: 'b37ad6f8adeb1edb7c786b33974b845c31b963f2', class: "ghost-btn", onClick: this.close }, "Keep browsing"))))), h("div", { key: '5a175094620f6837ae91a5a394f16c79df94c859', class: "powered-by" }, h("div", { key: '63c095dc7e954042c5fb36ccd8ca92a33d7b6632', class: "pb-links" }, h("a", { key: '875fa14d6218853b96d4d817a243701b228b20f0', href: "https://ticketlayer.com/privacy", target: "_blank", rel: "noopener noreferrer" }, "Privacy Policy"), h("a", { key: '7de77189ecd8277acade45437819b4fa9ef2002b', href: "https://ticketlayer.com/report-abuse", target: "_blank", rel: "noopener noreferrer" }, "Report Abuse")), h("a", { key: '5f62bbe303398e9ad09703fbd706953502f441a1', class: "pb-brand", href: "https://ticketlayer.com", target: "_blank", rel: "noopener noreferrer" }, h("span", { key: '0101948057126320d180a452870eade9f540b119', class: "pb-pre" }, "Powered by"), h("svg", { key: 'c93e4184b3bd8bbb89b5909ec886b22d22322bb1', width: "14", height: "14", viewBox: "0 0 50 50", fill: "none", "aria-hidden": "true" }, h("g", { key: '5461e514631e1cb670e974b47ecc144e1a62e7a3', transform: "matrix(0.0129 0 0 -0.0129 25.4752 25.4752)" }, h("path", { key: 'af6f137d33f09ef4befb9a4b31834d6d2f04ab3d', fill: "currentColor", transform: "translate(-1781.5, -1759.4003)", d: "M 41 2973 c 1 -285 5 -734 9 -998 c 7 -444 9 -488 30 -580 c 81 -364 235 -634 512 -900 c 135 -130 263 -220 423 -299 c 156 -77 249 -109 409 -143 c 110 -23 142 -25 354 -24 c 230 1 310 8 427 37 c 241 60 453 162 640 309 c 82 64 252 234 317 315 c 210 264 340 604 355 926 l 6 121 l -69 6 c -86 8 -706 9 -755 1 l -36 -6 l -21 -125 c -34 -191 -98 -317 -236 -462 c -111 -115 -249 -198 -396 -238 c -98 -27 -356 -24 -463 5 c -100 27 -183 69 -273 137 c -226 173 -353 409 -354 660 c 0 44 -5 120 -10 169 c -6 49 -8 91 -6 94 c 3 3 65 -22 138 -55 c 140 -64 251 -103 358 -127 c 71 -17 295 -46 347 -46 l 33 0 l 0 434 l 0 434 l -67 7 c -147 14 -269 56 -393 133 c -222 139 -378 393 -397 648 l -6 71 l -75 7 c -41 3 -239 6 -439 6 l -363 0 l 1 -517 z" }))), h("span", { key: 'd4f15a3fb911e2f78eb203fdd5079d3119ee9803', class: "pb-word" }, "ticketlayer"))))));
     }
 };
 TlBuyModal.style = tlBuyModalCss();

package/dist/esm/tl-buy-tickets-button.entry.js

@@ -1,38 +1,9 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-OoYV1faY.js';
-import { h as hasSDK, g as getSDK } from './sdk-connector-CqhvfyKV.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-imfxp765.js';
+import { w as whenSDK, g as getSDK } from './sdk-connector-CqhvfyKV.js';
+import { c as createElement, b as buyTicketsButtonCore } from './ticket-selector-BwChnHVC.js';
 
-const tlBuyTicketsButtonCss = () => `:host{display:inline-block;font-family:var(--tl-font-family)}:host(.full-width){display:block;width:100%}:host(.full-width) .buy-button{width:100%}.buy-button{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;font-weight:600;border:none;cursor:pointer;text-decoration:none;outline:none;transition:all 0.2s ease;white-space:nowrap}.buy-button.variant-primary{background:var(--button-color);color:var(--button-foreground)}.buy-button.variant-secondary{background:color-mix(in srgb, var(--button-color) 15%, transparent);color:var(--button-color)}.buy-button.variant-outline{background:transparent;color:var(--button-color);border:2px solid var(--button-color)}.buy-button.size-sm{padding:0.5rem 1rem;font-size:0.875rem;border-radius:var(--tl-radius-sm)}.buy-button.size-md{padding:0.75rem 1.5rem;font-size:1rem;border-radius:var(--tl-radius-md)}.buy-button.size-lg{padding:1rem 2rem;font-size:1.125rem;border-radius:var(--tl-radius-lg);min-height:51px}.buy-button.hovered:not(.disabled){opacity:0.9;transform:translateY(-1px)}.buy-button.hovered.variant-primary{background:var(--button-hover-color)}.buy-button.disabled{opacity:0.7;cursor:not-allowed}.icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon svg{width:1em;height:1em}.label{flex-shrink:0}.price{display:inline-flex;align-items:center;gap:0.25rem;margin-left:0.5rem;white-space:nowrap;opacity:0.9}.price-prefix{opacity:0.7}.price-value{font-weight:700}`;
+const tlBuyTicketsButtonCss = () => `:host{display:inline-block;font-family:var(--tl-font-family)}:host(.full-width){display:block;width:100%}:host(.full-width) .buy-button{width:100%}.state-available{--button-color:var(--tl-primary);--button-hover-color:color-mix(in srgb, var(--tl-primary) 90%, black);--button-foreground:var(--tl-primary-foreground)}.state-sold-out{--button-color:var(--tl-error);--button-hover-color:color-mix(in srgb, var(--tl-error) 90%, black);--button-foreground:var(--tl-error-foreground)}.state-waitlist{--button-color:var(--tl-info);--button-hover-color:color-mix(in srgb, var(--tl-info) 90%, black);--button-foreground:var(--tl-info-foreground)}.state-coming-soon{--button-color:var(--tl-warning);--button-hover-color:color-mix(in srgb, var(--tl-warning) 90%, black);--button-foreground:var(--tl-warning-foreground)}.buy-button{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;font-weight:600;border:none;cursor:pointer;text-decoration:none;outline:none;transition:all 0.2s ease;white-space:nowrap}.buy-button.variant-primary{background:var(--button-color);color:var(--button-foreground)}.buy-button.variant-secondary{background:color-mix(in srgb, var(--button-color) 15%, transparent);color:var(--button-color)}.buy-button.variant-outline{background:transparent;color:var(--button-color);border:2px solid var(--button-color)}.buy-button.size-sm{padding:0.5rem 1rem;font-size:0.875rem;border-radius:var(--tl-radius-sm)}.buy-button.size-md{padding:0.75rem 1.5rem;font-size:1rem;border-radius:var(--tl-radius-md)}.buy-button.size-lg{padding:1rem 2rem;font-size:1.125rem;border-radius:var(--tl-radius-lg);min-height:51px}.buy-button.hovered:not(.disabled){opacity:0.9;transform:translateY(-1px)}.buy-button.hovered.variant-primary{background:var(--button-hover-color)}.buy-button.disabled{opacity:0.7;cursor:not-allowed}.icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon svg{width:1em;height:1em}.label{flex-shrink:0}.price{display:inline-flex;align-items:center;gap:0.25rem;margin-left:0.5rem;white-space:nowrap;opacity:0.9}.price-prefix{opacity:0.7}.price-value{font-weight:700}`;
 
-// State configurations
-const STATE_CONFIGS = {
-    available: {
-        defaultLabel: 'Buy Tickets',
-        color: 'var(--tl-primary)',
-        // The hover shade used to be a second colour smuggled into the token's
-        // fallback slot, which meant it stopped following the channel's brand the
-        // moment a theme was applied. Derive it instead.
-        hoverColor: 'color-mix(in srgb, var(--tl-primary) 90%, black)',
-        foreground: 'var(--tl-primary-foreground)',
-    },
-    soldOut: {
-        defaultLabel: 'Sold Out',
-        color: '#dc2626',
-        hoverColor: '#b91c1c',
-        foreground: '#ffffff',
-    },
-    waitlist: {
-        defaultLabel: 'Join Waitlist',
-        color: '#2563eb',
-        hoverColor: '#1d4ed8',
-        foreground: '#ffffff',
-    },
-    comingSoon: {
-        defaultLabel: 'On Sale Soon',
-        color: '#d97706',
-        hoverColor: '#b45309',
-        foreground: '#ffffff',
-    },
-};
 const TlBuyTicketsButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -54,65 +25,74 @@ const TlBuyTicketsButton = class {
         // -------------------------------------------------------------------------
         // State
         // -------------------------------------------------------------------------
+        /**
+         * Whether the pointer is over the button. A pointer is not a fact every
+         * runtime has, so this stays here for the same reason the key handling
+         * does: the core knows nothing of mice.
+         */
         this.isHovered = false;
         // -------------------------------------------------------------------------
-        // Methods
+        // The core
         // -------------------------------------------------------------------------
+        this.element = createElement(buyTicketsButtonCore, {
+            client: () => getSDK(),
+            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;
         this.handleClick = () => {
-            // Check if button should be interactive
-            if (this.disabled || this.state === 'soldOut' || this.state === 'comingSoon') {
-                return;
-            }
-            // Emit click event
-            this.tlClick.emit({ eventId: this.eventId, occurrenceId: this.occurrenceId });
-            // Open modal via SDK if available
-            if (hasSDK()) {
-                try {
-                    const sdk = getSDK();
-                    sdk.event(this.eventId).openModal({
-                        occurrenceId: this.occurrenceId,
-                    });
-                }
-                catch (err) {
-                    console.error('[tl-buy-tickets-button] Failed to open modal:', err);
-                }
-            }
+            this.element.actions.activate();
         };
     }
-    formatPrice(priceInMinorUnits) {
-        const amount = priceInMinorUnits / 100;
-        const hasDecimals = amount % 1 !== 0;
-        return new Intl.NumberFormat('en-GB', {
-            style: 'currency',
+    syncProps() {
+        this.element.setProps({
+            eventId: this.eventId,
+            occurrenceId: this.occurrenceId,
+            state: this.state,
+            label: this.label,
+            variant: this.variant,
+            size: this.size,
+            fullWidth: this.fullWidth,
+            price: this.price,
             currency: this.currency,
-            minimumFractionDigits: hasDecimals ? 2 : 0,
-            maximumFractionDigits: hasDecimals ? 2 : 0,
-        }).format(amount);
+            pricePrefix: this.pricePrefix,
+            disabled: this.disabled,
+        });
+    }
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        // This core has nothing to do on mount, and is mounted anyway: a harness
+        // calls mount() unconditionally and pairs it with its teardown (TKT-197).
+        this.teardown = this.element.mount();
     }
-    getStateConfig() {
-        return STATE_CONFIGS[this.state];
+    disconnectedCallback() {
+        this.teardown?.();
+        this.teardown = undefined;
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
     }
-    isInteractive() {
-        return !this.disabled && this.state !== 'soldOut' && this.state !== 'comingSoon';
+    forward(event, detail) {
+        if (event === 'tlClick')
+            this.tlClick.emit(detail);
     }
     // -------------------------------------------------------------------------
     // Render
     // -------------------------------------------------------------------------
     render() {
-        const config = this.getStateConfig();
-        const buttonLabel = this.label || config.defaultLabel;
-        const isInteractive = this.isInteractive();
-        return (h(Host, { key: '86ee9a81d82c10398dab4e22b3bbae15abb8f449', class: { 'full-width': this.fullWidth } }, h("button", { key: 'b581e199ced7ffd14669ebe0cc727edc2f8c8914', type: "button", class: {
+        const { interactive, buttonLabel, stateClass, priceLabel } = this.view.derived;
+        return (h(Host, { key: '6d5dddb3fc486c5a877a3718fecbee80a648b274', class: { 'full-width': this.fullWidth } }, h("button", { key: '88f7f0688fb42e97eb2ce352f316b2a085c3bab5', type: "button", class: {
                 'buy-button': true,
+                [stateClass]: true,
                 [`variant-${this.variant}`]: true,
                 [`size-${this.size}`]: true,
-                'disabled': !isInteractive,
-                'hovered': this.isHovered && isInteractive,
-            }, style: {
-                '--button-color': config.color,
-                '--button-hover-color': config.hoverColor,
-                '--button-foreground': config.foreground,
-            }, disabled: !isInteractive, onClick: this.handleClick, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, h("span", { key: 'f776bab4a999ed36b25400424d639b4c9261c02a', class: "icon" }, this.state === 'soldOut' && this.renderSoldOutIcon(), this.state === 'waitlist' && this.renderWaitlistIcon(), this.state === 'comingSoon' && this.renderComingSoonIcon(), this.state === 'available' && this.renderTicketIcon()), h("span", { key: 'e98ecbe6debc5c2c18ce1d304b60bf1074b003b3', class: "label" }, buttonLabel), this.price !== undefined && (h("span", { key: 'e7e261d09a541b126b02b88d00992f3a6483a9b8', class: "price" }, h("span", { key: '5eab43a47c2dd4c1339fe84b583902b1e38a0b2a', class: "price-prefix" }, this.pricePrefix), h("span", { key: 'f03b514ff2bc3c9a1b2e922d93a92accdedd0fad', class: "price-value" }, this.formatPrice(this.price)))))));
+                'disabled': !interactive,
+                'hovered': this.isHovered && interactive,
+            }, disabled: !interactive, onClick: this.handleClick, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, h("span", { key: 'e88c2f05c7bc782d08d78fc8ab53b213ab3c833f', class: "icon" }, this.state === 'soldOut' && this.renderSoldOutIcon(), this.state === 'waitlist' && this.renderWaitlistIcon(), this.state === 'comingSoon' && this.renderComingSoonIcon(), this.state === 'available' && this.renderTicketIcon()), h("span", { key: '7290a58779e884886f26e64c405fd319811613a1', class: "label" }, buttonLabel), priceLabel !== null && (h("span", { key: 'bdf3bcdbfa29d4799f7a64bc0072a4c06c09c393', class: "price" }, h("span", { key: '32b075fc6793ef21e9a2cd188058992f95c10680', class: "price-prefix" }, this.pricePrefix), h("span", { key: 'ff3805b660b2af72a94fabc315507ce063ff02d2', class: "price-value" }, priceLabel))))));
     }
     renderTicketIcon() {
         return (h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" }), h("path", { d: "M13 5v2" }), h("path", { d: "M13 17v2" }), h("path", { d: "M13 11v2" })));
@@ -126,6 +106,41 @@ const TlBuyTicketsButton = class {
     renderComingSoonIcon() {
         return (h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M12 2v4" }), h("path", { d: "m16.2 7.8 2.9-2.9" }), h("path", { d: "M18 12h4" }), h("path", { d: "m16.2 16.2 2.9 2.9" }), h("path", { d: "M12 18v4" }), h("path", { d: "m4.9 19.1 2.9-2.9" }), h("path", { d: "M2 12h4" }), h("path", { d: "m4.9 4.9 2.9 2.9" })));
     }
+    static get watchers() { return {
+        "eventId": [{
+                "syncProps": 0
+            }],
+        "occurrenceId": [{
+                "syncProps": 0
+            }],
+        "state": [{
+                "syncProps": 0
+            }],
+        "label": [{
+                "syncProps": 0
+            }],
+        "variant": [{
+                "syncProps": 0
+            }],
+        "size": [{
+                "syncProps": 0
+            }],
+        "fullWidth": [{
+                "syncProps": 0
+            }],
+        "price": [{
+                "syncProps": 0
+            }],
+        "currency": [{
+                "syncProps": 0
+            }],
+        "pricePrefix": [{
+                "syncProps": 0
+            }],
+        "disabled": [{
+                "syncProps": 0
+            }]
+    }; }
 };
 TlBuyTicketsButton.style = tlBuyTicketsButtonCss();
 

package/dist/esm/tl-buy-tickets-wrapper.entry.js

@@ -1,55 +1,86 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-OoYV1faY.js';
-import { h as hasSDK, g as getSDK } from './sdk-connector-CqhvfyKV.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-imfxp765.js';
+import { w as whenSDK, g as getSDK } from './sdk-connector-CqhvfyKV.js';
+import { c as createElement, j as buyTicketsWrapperCore } from './ticket-selector-BwChnHVC.js';
 
 const tlBuyTicketsWrapperCss = () => `tl-buy-tickets-wrapper,.tl-buy-tickets-wrapper{display:inline-block;cursor:pointer}tl-buy-tickets-wrapper:focus,.tl-buy-tickets-wrapper:focus{outline:2px solid var(--tl-ring);outline-offset:2px;border-radius:var(--tl-radius-sm)}tl-buy-tickets-wrapper[disabled],tl-buy-tickets-wrapper.tl-buy-tickets-wrapper--disabled,.tl-buy-tickets-wrapper--disabled{cursor:not-allowed;opacity:0.5}`;
 
 const TlBuyTicketsWrapper = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.tlComplete = createEvent(this, "tl-complete");
-        this.tlError = createEvent(this, "tl-error");
-        this.tlClose = createEvent(this, "tl-close");
+        this.tlComplete = createEvent(this, "tlComplete");
+        this.tlError = createEvent(this, "tlError");
+        this.tlClose = createEvent(this, "tlClose");
         /**
          * Whether the wrapper is disabled
          */
         this.disabled = false;
+        this.element = createElement(buyTicketsWrapperCore, {
+            client: () => getSDK(),
+            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;
         this.handleClick = () => {
-            if (this.disabled)
-                return;
-            if (!hasSDK()) {
-                console.error('[tl-buy-tickets-wrapper] SDK not initialized. Call setSDK(ticketlayer) first.');
-                this.tlError.emit({ message: 'SDK not initialized' });
-                return;
-            }
-            const sdk = getSDK();
-            // Open the modal via SDK
-            sdk.event(this.eventId).openModal({
-                occurrenceId: this.occurrenceId,
-                onComplete: (order) => {
-                    this.tlComplete.emit(order);
-                },
-                onError: (err) => {
-                    this.tlError.emit({ message: err.message });
-                },
-                onClose: () => {
-                    this.tlClose.emit();
-                },
-            });
+            this.element.actions.activate();
         };
+        /** Enter and Space are a press on the web. The core knows nothing of keys. */
         this.handleKeyDown = (e) => {
             if (e.key === 'Enter' || e.key === ' ') {
                 e.preventDefault();
-                this.handleClick();
+                this.element.actions.activate();
             }
         };
     }
+    syncProps() {
+        this.element.setProps({
+            eventId: this.eventId,
+            occurrenceId: this.occurrenceId,
+            disabled: this.disabled,
+        });
+    }
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        // This core has nothing to do on mount, and is mounted anyway: a harness
+        // calls mount() unconditionally and pairs it with its teardown (TKT-197).
+        this.teardown = this.element.mount();
+    }
+    disconnectedCallback() {
+        this.teardown?.();
+        this.teardown = undefined;
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
+    }
+    forward(event, detail) {
+        if (event === 'tlComplete')
+            this.tlComplete.emit(detail);
+        else if (event === 'tlError')
+            this.tlError.emit(detail);
+        else if (event === 'tlClose')
+            this.tlClose.emit();
+    }
     render() {
-        return (h(Host, { key: 'd6ef81ac9bc1a1194eda1603cbb2a75b355a212e', class: {
+        const { interactive } = this.view.derived;
+        return (h(Host, { key: '14e91259c1401322f969d43bb16b6d3f20327c65', class: {
                 'tl-buy-tickets-wrapper': true,
-                'tl-buy-tickets-wrapper--disabled': this.disabled,
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown, role: "button", tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : null }, h("slot", { key: 'faef5aaad20deaf5e442d688c69105e45f9ee26f' })));
+                'tl-buy-tickets-wrapper--disabled': !interactive,
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown, role: "button", tabindex: interactive ? 0 : -1, "aria-disabled": interactive ? null : 'true' }, h("slot", { key: '3fb33786e09f5ecdf20ff0ea8e7336ccfc43b216' })));
     }
-    get el() { return getElement(this); }
+    static get watchers() { return {
+        "eventId": [{
+                "syncProps": 0
+            }],
+        "occurrenceId": [{
+                "syncProps": 0
+            }],
+        "disabled": [{
+                "syncProps": 0
+            }]
+    }; }
 };
 TlBuyTicketsWrapper.style = tlBuyTicketsWrapperCss();
 

package/dist/esm/tl-cart-badge.entry.js

@@ -1,10 +1,32 @@
-import { r as registerInstance, c as createEvent, h } from './index-OoYV1faY.js';
-import { w as whenSDK } 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, g as cartBadgeCore } from './ticket-selector-BwChnHVC.js';
+
+const webStorage = {
+    get(key) {
+        if (typeof window === 'undefined')
+            return null;
+        try {
+            return window.localStorage.getItem(key);
+        }
+        catch {
+            return null;
+        }
+    },
+    set(key, value) {
+        if (typeof window === 'undefined')
+            return;
+        try {
+            window.localStorage.setItem(key, value);
+        }
+        catch {
+            // localStorage may be unavailable.
+        }
+    },
+};
 
 const tlCartBadgeCss = () => `:host{display:inline-block}.cart-badge{position:relative;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;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)}.cart-badge:active{transform:scale(0.95)}.cart-badge:focus-visible{outline:2px solid var(--tl-color-primary);outline-offset:2px}.size-sm{padding:var(--tl-spacing-1)}.size-sm .icon-svg,.size-sm .icon-text{width:18px;height:18px;font-size:18px}.size-md .icon-svg,.size-md .icon-text{width:24px;height:24px;font-size:24px}.size-lg{padding:var(--tl-spacing-3)}.size-lg .icon-svg,.size-lg .icon-text{width:32px;height:32px;font-size:32px}.icon-svg{width:24px;height:24px;stroke-width:2}.icon-text{line-height:1}.badge-count{position:absolute;top:0;right:0;transform:translate(30%, -30%);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background-color:var(--tl-color-primary);color:var(--tl-color-primary-foreground);font-size:11px;font-weight:600;font-family:var(--tl-font-family);display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 1px 3px rgba(0, 0, 0, 0.2)}.size-sm .badge-count{min-width:16px;height:16px;font-size:10px;padding:0 4px}.size-lg .badge-count{min-width:22px;height:22px;font-size:13px;padding:0 6px}.badge-only{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background-color:rgba(255, 255, 255, 0.3);color:inherit;font-size:12px;font-weight:600;font-family:var(--tl-font-family);line-height:1}.badge-only.size-sm{min-width:18px;height:18px;font-size:11px;padding:0 5px}.badge-only.size-lg{min-width:22px;height:22px;font-size:13px;padding:0 7px}`;
 
-// Storage key for persisted cart count
-const CART_COUNT_KEY = 'tl_cart_count';
 const TlCartBadge = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -21,66 +43,44 @@ const TlCartBadge = class {
          * Badge only mode - only shows the count bubble, no icon or button
          */
         this.badgeOnly = false;
-        this.itemCount = 0;
+        this.element = createElement(cartBadgeCore, {
+            client: () => getSDK(),
+            clientReady: () => whenSDK(),
+            storage: webStorage,
+            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;
         this.handleClick = () => {
-            this.tlClick.emit({ itemCount: this.itemCount });
+            this.element.actions.click();
         };
     }
-    componentWillLoad() {
-        // Initialize with persisted count to prevent FOUC
-        this.itemCount = this.getPersistedCartCount();
+    syncProps() {
+        this.element.setProps({
+            showEmpty: this.showEmpty,
+            icon: this.icon,
+            size: this.size,
+            badgeOnly: this.badgeOnly,
+        });
     }
-    componentDidLoad() {
-        this.subscribeToCartUpdates();
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        this.teardown = this.element.mount();
     }
+    /** Off screen: the mount's teardown is what drops the cart subscription. */
     disconnectedCallback() {
-        if (this.unsubscribe) {
-            this.unsubscribe();
-        }
+        this.teardown?.();
+        this.teardown = undefined;
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
     }
-    getPersistedCartCount() {
-        if (typeof window === 'undefined')
-            return 0;
-        try {
-            const stored = localStorage.getItem(CART_COUNT_KEY);
-            return stored ? parseInt(stored, 10) || 0 : 0;
-        }
-        catch {
-            return 0;
-        }
-    }
-    persistCartCount(count) {
-        if (typeof window === 'undefined')
-            return;
-        try {
-            localStorage.setItem(CART_COUNT_KEY, count.toString());
-        }
-        catch {
-            // localStorage may be unavailable
-        }
-    }
-    async subscribeToCartUpdates() {
-        const sdk = await whenSDK().catch(() => null);
-        if (!sdk)
-            return;
-        const cartManager = sdk.getCartManager?.();
-        if (!cartManager)
-            return;
-        // Subscribe to cart updates
-        this.unsubscribe = cartManager.on?.('cart:updated', (cart) => {
-            const newCount = cart?.itemCount || 0;
-            console.log('[tl-cart-badge] Cart updated:', newCount);
-            this.itemCount = newCount;
-            this.persistCartCount(newCount);
-        });
-        // Load initial cart
-        cartManager.get?.().then((cart) => {
-            const newCount = cart?.itemCount || 0;
-            this.itemCount = newCount;
-            this.persistCartCount(newCount);
-        }).catch(() => {
-            // Cart may not exist yet - keep persisted value
-        });
+    forward(event, detail) {
+        if (event === 'tlClick')
+            this.tlClick.emit(detail);
     }
     renderIcon() {
         if (this.icon) {
@@ -89,18 +89,31 @@ const TlCartBadge = class {
         return (h("svg", { class: "icon-svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" })));
     }
     render() {
-        const showBadge = this.itemCount > 0 || this.showEmpty;
-        const displayCount = this.itemCount > 99 ? '99+' : this.itemCount.toString();
+        const { derived } = this.view;
         // Badge only mode - just show the count bubble
         if (this.badgeOnly) {
-            if (this.itemCount === 0) {
+            if (derived.renderNothing) {
                 return null;
             }
-            return (h("span", { class: `badge-only size-${this.size}` }, displayCount));
+            return h("span", { class: `badge-only ${derived.sizeClass}` }, derived.displayCount);
         }
         // Full mode with icon and badge
-        return (h("button", { class: `cart-badge size-${this.size}`, onClick: this.handleClick, "aria-label": `Cart with ${this.itemCount} items` }, this.renderIcon(), showBadge && this.itemCount > 0 && (h("span", { class: "badge-count" }, displayCount))));
+        return (h("button", { class: `cart-badge ${derived.sizeClass}`, onClick: this.handleClick, "aria-label": derived.ariaLabel }, this.renderIcon(), derived.showBadge && h("span", { class: "badge-count" }, derived.displayCount)));
     }
+    static get watchers() { return {
+        "showEmpty": [{
+                "syncProps": 0
+            }],
+        "icon": [{
+                "syncProps": 0
+            }],
+        "size": [{
+                "syncProps": 0
+            }],
+        "badgeOnly": [{
+                "syncProps": 0
+            }]
+    }; }
 };
 TlCartBadge.style = tlCartBadgeCss();