@ticketlayer/elements 0.3.3 → 1.0.0

package/dist/collection/components/tl-buy-modal/tl-buy-modal.css

@@ -1,15 +1,14 @@
 :host {
-  /* Local fallbacks; real values come from the channel theme's --tl-* vars,
-     which pierce the shadow boundary. */
-  --_bg: var(--tl-background, #ffffff);
-  --_fg: var(--tl-foreground, #111827);
-  --_muted: var(--tl-muted, #f3f4f6);
-  --_muted-fg: var(--tl-muted-foreground, #6b7280);
-  --_border: var(--tl-border, #e5e7eb);
-  --_primary: var(--tl-primary, #6366f1);
-  --_primary-fg: var(--tl-primary-foreground, #ffffff);
-  --_radius: var(--tl-radius-lg, var(--tl-radius, 0.75rem));
-  --_font: var(--tl-font-family, system-ui, -apple-system, sans-serif);
+  /* Local shorthands over the theme tokens, which pierce the shadow boundary. */
+  --_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);
 }
@@ -53,12 +52,6 @@
 
 /* Floating chrome beneath the panel: platform links left, brand right. */
 .powered-by {
-  /* The dashes are a cut-out, so they have to be the colour BEHIND the ticket.
-     This chrome floats on the modal's dark backdrop rather than on the page
-     surface, so --tl-background (a light value in most themes) would draw
-     white dashes on a white icon and vanish. The drawer's footer sits on the
-     panel itself and takes the default. */
-  --tl-pb-perforation: rgba(8, 8, 16, 0.6);
   width: 100%;
   max-width: 460px;
   display: flex;
@@ -267,7 +260,7 @@
   width: 100%;
   padding: 13px;
   border: 0;
-  border-radius: var(--tl-radius-md, 0.5rem);
+  border-radius: var(--tl-radius-md);
   background: var(--_primary);
   color: var(--_primary-fg);
   font-size: 0.98rem;
@@ -285,7 +278,7 @@
   margin-top: 8px;
   padding: 12px;
   border: 1px solid var(--_border);
-  border-radius: var(--tl-radius-md, 0.5rem);
+  border-radius: var(--tl-radius-md);
   background: transparent;
   color: var(--_fg);
   font-size: 0.95rem;

package/dist/collection/components/tl-buy-modal/tl-buy-modal.js

@@ -126,10 +126,10 @@ export class TlBuyModal {
         }
     }
     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 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: 'c159efd1b8fce42b8c0fd5bac21792b4dc2728ce', d: "M4 7.5A1.5 1.5 0 0 1 5.5 6h13A1.5 1.5 0 0 1 20 7.5v2a2 2 0 0 0 0 5v2a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 16.5v-2a2 2 0 0 0 0-5v-2Z", fill: "currentColor" }), h("path", { key: '283956eead27e5919301c30882da6eaa7b093a1a', d: "M13 7v10", stroke: "var(--tl-pb-perforation, var(--tl-background, #fff))", "stroke-width": "1.2", "stroke-dasharray": "1.5 1.8", "stroke-linecap": "round" })), h("span", { key: 'bc045fda144885737b88bf81b4f9000ec8d333be', 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"))))));
     }
     static get is() { return "tl-buy-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tl-buy-tickets-button/tl-buy-tickets-button.css

@@ -4,7 +4,7 @@
 
 :host {
   display: inline-block;
-  font-family: var(--tl-font-family, system-ui, -apple-system, sans-serif);
+  font-family: var(--tl-font-family);
 }
 
 :host(.full-width) {
@@ -16,6 +16,43 @@
   width: 100%;
 }
 
+/* Sale states
+ *
+ * One state, one @ticketlayer/theme token family, and the hover derived from
+ * the same token rather than written down a second time, so a themed palette
+ * carries every state with it (TKT-203). These used to be literal hex in the
+ * component: red for sold out, blue for the waitlist, amber for coming soon,
+ * and a themed channel painted the available state and none of the others.
+ *
+ * The class comes from the core (`derived.stateClass`), which names the state
+ * and nothing more: a core may hold no value and has no shape for saying WHICH
+ * family a status paints with, so that decision is made here, exactly as
+ * tl-event-card's status badge makes it.
+ */
+.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;
@@ -51,19 +88,19 @@
 .buy-button.size-sm {
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
-  border-radius: var(--tl-radius-sm, 0.375rem);
+  border-radius: var(--tl-radius-sm);
 }
 
 .buy-button.size-md {
   padding: 0.75rem 1.5rem;
   font-size: 1rem;
-  border-radius: var(--tl-radius-md, 0.5rem);
+  border-radius: var(--tl-radius-md);
 }
 
 .buy-button.size-lg {
   padding: 1rem 2rem;
   font-size: 1.125rem;
-  border-radius: var(--tl-radius-lg, 0.625rem);
+  border-radius: var(--tl-radius-lg);
   min-height: 51px;
 }
 

package/dist/collection/components/tl-buy-tickets-button/tl-buy-tickets-button.js

@@ -5,11 +5,20 @@
  *
  * @element tl-buy-tickets-button
  *
- * Supports multiple states:
- * - available: Default "Buy Tickets" with primary colour
- * - soldOut: "Sold Out" with red colour
- * - waitlist: "Join Waitlist" with blue colour
- * - comingSoon: "On Sale Soon" with yellow colour
+ * The web harness for `buyTicketsButtonCore`. What a press does, which states
+ * are not pressable, the label each state defaults to and how the price reads
+ * are all in `@ticketlayer/elements-core` (AGENTS.md, TKT-11); what is left
+ * here is the Stencil surface, the icons, the hover, and which key counts as a
+ * press.
+ *
+ * Each state is painted from a @ticketlayer/theme token family rather than
+ * from a literal, so a channel theme reaches every one of them. The core says
+ * which state the button is in and the stylesheet says which family that
+ * state paints with, because a core cannot map a status onto one:
+ * - available: "Buy Tickets", the primary family
+ * - soldOut: "Sold Out", the error family
+ * - waitlist: "Join Waitlist", the info family
+ * - comingSoon: "On Sale Soon", the warning family
  *
  * @example
  * <tl-buy-tickets-button event-id="evt_xxx"></tl-buy-tickets-button>
@@ -17,34 +26,8 @@
  * <tl-buy-tickets-button event-id="evt_xxx" price="2500" currency="GBP"></tl-buy-tickets-button>
  */
 import { h, Host } from "@stencil/core";
-import { getSDK, hasSDK } from "../../utils/sdk-connector";
-// State configurations
-const STATE_CONFIGS = {
-    available: {
-        defaultLabel: 'Buy Tickets',
-        color: 'var(--tl-primary, #e64b12)',
-        hoverColor: 'var(--tl-primary, #d4440f)',
-        foreground: 'var(--tl-primary-foreground, #ffffff)',
-    },
-    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',
-    },
-};
+import { buyTicketsButtonCore, createElement, } from "@ticketlayer/elements-core";
+import { getSDK, whenSDK } from "../../utils/sdk-connector";
 export class TlBuyTicketsButton {
     constructor() {
         /** Button state - determines colour, label, and icon */
@@ -64,65 +47,74 @@ export class TlBuyTicketsButton {
         // -------------------------------------------------------------------------
         // 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,
+        });
     }
-    getStateConfig() {
-        return STATE_CONFIGS[this.state];
+    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();
     }
-    isInteractive() {
-        return !this.disabled && this.state !== 'soldOut' && this.state !== 'comingSoon';
+    disconnectedCallback() {
+        this.teardown?.();
+        this.teardown = undefined;
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
+    }
+    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: '10c8c36d12223afcfd13c9807c2ef6b0f4c34266', class: { 'full-width': this.fullWidth } }, h("button", { key: 'c7f6a39a837c90ced0176b5d017687afabf99a5a', 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: 'e2bc1edc9fbd2a9c81da8cc3293170b1c4275125', 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: '8371c85dcc24c5ac040744edefe80618421025ef', class: "label" }, buttonLabel), this.price !== undefined && (h("span", { key: 'c02cb5b646ade8866deafb9b3e698115abec5708', class: "price" }, h("span", { key: 'cb0ab272460115a5edebd674362c83711735a70d', class: "price-prefix" }, this.pricePrefix), h("span", { key: 'e28ba56d3928076b624513de95682351f3e0d92b', 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" })));
@@ -388,7 +380,8 @@ export class TlBuyTicketsButton {
     }
     static get states() {
         return {
-            "isHovered": {}
+            "isHovered": {},
+            "view": {}
         };
     }
     static get events() {
@@ -409,4 +402,40 @@ export class TlBuyTicketsButton {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "eventId",
+                "methodName": "syncProps"
+            }, {
+                "propName": "occurrenceId",
+                "methodName": "syncProps"
+            }, {
+                "propName": "state",
+                "methodName": "syncProps"
+            }, {
+                "propName": "label",
+                "methodName": "syncProps"
+            }, {
+                "propName": "variant",
+                "methodName": "syncProps"
+            }, {
+                "propName": "size",
+                "methodName": "syncProps"
+            }, {
+                "propName": "fullWidth",
+                "methodName": "syncProps"
+            }, {
+                "propName": "price",
+                "methodName": "syncProps"
+            }, {
+                "propName": "currency",
+                "methodName": "syncProps"
+            }, {
+                "propName": "pricePrefix",
+                "methodName": "syncProps"
+            }, {
+                "propName": "disabled",
+                "methodName": "syncProps"
+            }];
+    }
 }

package/dist/collection/components/tl-buy-tickets-wrapper/tl-buy-tickets-wrapper.css

@@ -10,9 +10,9 @@ tl-buy-tickets-wrapper,
 
 tl-buy-tickets-wrapper:focus,
 .tl-buy-tickets-wrapper:focus {
-  outline: 2px solid var(--tl-ring, #3b82f6);
+  outline: 2px solid var(--tl-ring);
   outline-offset: 2px;
-  border-radius: var(--tl-radius-sm, 0.25rem);
+  border-radius: var(--tl-radius-sm);
 }
 
 tl-buy-tickets-wrapper[disabled],

package/dist/collection/components/tl-buy-tickets-wrapper/tl-buy-tickets-wrapper.js

@@ -1,11 +1,18 @@
 import { h, Host } from "@stencil/core";
-import { getSDK, hasSDK } from "../../utils/sdk-connector";
+import { buyTicketsWrapperCore, createElement, } from "@ticketlayer/elements-core";
+import { getSDK, whenSDK } from "../../utils/sdk-connector";
 /**
  * @component tl-buy-tickets-wrapper
  *
  * Wraps any content and opens the Ticketlayer modal when clicked.
  * Uses the SDK's modal manager which handles the iframe overlay.
  *
+ * The web harness for `buyTicketsWrapperCore`. What a press does, what it
+ * announces and what happens when no client has been published are all in
+ * `@ticketlayer/elements-core` (AGENTS.md, TKT-11); what is left here is the
+ * Stencil surface, the accessibility attributes and the one genuinely web
+ * question the core refuses to answer - which key counts as a press.
+ *
  * @slot - Content to display (typically a button)
  *
  * @example
@@ -24,41 +31,61 @@ export class TlBuyTicketsWrapper {
          * 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' })));
     }
     static get is() { return "tl-buy-tickets-wrapper"; }
     static get originalStyleUrls() {
@@ -133,10 +160,15 @@ export class TlBuyTicketsWrapper {
             }
         };
     }
+    static get states() {
+        return {
+            "view": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "tlComplete",
-                "name": "tl-complete",
+                "name": "tlComplete",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -158,7 +190,7 @@ export class TlBuyTicketsWrapper {
                 }
             }, {
                 "method": "tlError",
-                "name": "tl-error",
+                "name": "tlError",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -173,7 +205,7 @@ export class TlBuyTicketsWrapper {
                 }
             }, {
                 "method": "tlClose",
-                "name": "tl-close",
+                "name": "tlClose",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -188,5 +220,16 @@ export class TlBuyTicketsWrapper {
                 }
             }];
     }
-    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "eventId",
+                "methodName": "syncProps"
+            }, {
+                "propName": "occurrenceId",
+                "methodName": "syncProps"
+            }, {
+                "propName": "disabled",
+                "methodName": "syncProps"
+            }];
+    }
 }