@ticketlayer/elements 0.3.3 → 1.0.0

package/dist/collection/components/tl-cart-badge/tl-cart-badge.js

@@ -1,7 +1,15 @@
 import { h } from "@stencil/core";
-import { whenSDK } from "../../utils/sdk-connector";
-// Storage key for persisted cart count
-const CART_COUNT_KEY = 'tl_cart_count';
+import { cartBadgeCore, createElement, } from "@ticketlayer/elements-core";
+import { getSDK, whenSDK } from "../../utils/sdk-connector";
+import { webStorage } from "../../utils/web-storage";
+/**
+ * The web harness for `cartBadgeCore`.
+ *
+ * The count, the "99+" rule, the cart subscription and the remembered value
+ * are all in `@ticketlayer/elements-core`. What is here is the Stencil surface,
+ * the icon, and the two web things the core is handed: the client the page
+ * published and `localStorage`.
+ */
 export class TlCartBadge {
     constructor() {
         /**
@@ -16,66 +24,44 @@ export class TlCartBadge {
          * 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();
-        }
-    }
-    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
-        }
+        this.teardown?.();
+        this.teardown = undefined;
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
     }
-    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) {
@@ -84,17 +70,16 @@ export class TlCartBadge {
         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 is() { return "tl-cart-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -193,7 +178,7 @@ export class TlCartBadge {
     }
     static get states() {
         return {
-            "itemCount": {}
+            "view": {}
         };
     }
     static get events() {
@@ -214,4 +199,19 @@ export class TlCartBadge {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "showEmpty",
+                "methodName": "syncProps"
+            }, {
+                "propName": "icon",
+                "methodName": "syncProps"
+            }, {
+                "propName": "size",
+                "methodName": "syncProps"
+            }, {
+                "propName": "badgeOnly",
+                "methodName": "syncProps"
+            }];
+    }
 }

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

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

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
-import { onSDKEvent } from "../../utils/sdk-connector";
+import { cartDrawerCore, createElement, } from "@ticketlayer/elements-core";
+import { getSDK, whenSDK } from "../../utils/sdk-connector";
 /**
  * @component tl-cart-drawer
  *
@@ -10,6 +11,10 @@ import { onSDKEvent } from "../../utils/sdk-connector";
  * so the actual cart rendering / remove / checkout is shared with the inline
  * cart; the drawer only adds the off-canvas chrome.
  *
+ * The web harness for `cartDrawerCore`: the open/closed rule and the two
+ * intents are the core's (TKT-11). What stays here is the chrome and the one
+ * thing only a browser has, the Escape key.
+ *
  * @prop side - which edge the panel slides from (default 'right')
  * @event tlOpen  - the drawer opened
  * @event tlClose - the drawer closed
@@ -22,45 +27,66 @@ export class TlCartDrawer {
         this.heading = 'Your cart';
         /** Controlled open state (also driven by the `ui:cart-requested` intent). */
         this.open = false;
-        this.visible = false;
+        this.element = createElement(cartDrawerCore, {
+            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;
+        /** The one thing only a browser has. What Escape means is the core's answer. */
         this.onKey = (e) => {
-            if (e.key === 'Escape' && this.visible)
-                this.setOpen(false);
+            if (e.key === 'Escape')
+                this.element.actions.setOpen(false);
         };
-        this.close = () => this.setOpen(false);
+        this.close = () => this.element.actions.setOpen(false);
+    }
+    syncProps() {
+        this.element.setProps({ side: this.side, heading: this.heading, open: this.open });
+    }
+    /**
+     * The host moved `open`. The core follows it without announcing it, which is
+     * what the component's watcher did: an event here would be the host hearing
+     * its own write back.
+     */
+    onOpenProp(v) {
+        this.element.setProps({ open: v });
+        this.element.actions.openChanged(v);
     }
     connectedCallback() {
-        this.visible = this.open;
-        // Open on the cart intent; close on the shared modal-close intent.
-        this.offCart = onSDKEvent('ui:cart-requested', () => this.setOpen(true));
-        this.offClose = onSDKEvent('ui:modal-close-requested', () => this.setOpen(false));
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+            // Reflect the core's state back onto the prop a host reads. Writing it
+            // re-enters onOpenProp, which is a no-op once the core already agrees.
+            if (this.open !== view.state.visible)
+                this.open = view.state.visible;
+        }));
+        this.view = this.element.view;
+        this.teardown = this.element.mount();
         if (typeof document !== 'undefined')
             document.addEventListener('keydown', this.onKey);
     }
     disconnectedCallback() {
-        this.offCart?.();
-        this.offClose?.();
+        this.teardown?.();
+        this.teardown = undefined;
+        this.unsubscribe?.();
+        this.unsubscribe = undefined;
         if (typeof document !== 'undefined')
             document.removeEventListener('keydown', this.onKey);
     }
-    onOpenProp(v) {
-        this.visible = v;
-    }
-    setOpen(v) {
-        if (this.visible === v)
-            return;
-        this.open = v;
-        this.visible = v;
-        if (v)
+    forward(event, _detail) {
+        if (event === 'tlOpen')
             this.tlOpen.emit();
-        else
+        else if (event === 'tlClose')
             this.tlClose.emit();
     }
     render() {
-        return (h(Host, { key: '022314d9fb612e930da52ece34f2ab8ae8ce44da' }, h("div", { key: '985b4001145d72ba91ef7d466adba8ab939e9cc4', class: { overlay: true, 'is-open': this.visible }, onClick: (e) => {
+        const { strings, derived } = this.view;
+        return (h(Host, { key: 'ab41f3557cd8dd2b182bbfc3ed631bca7839d4a9' }, h("div", { key: '70bbe63d1f9a2d449cb9ff970631c0c69a2eb757', class: { overlay: true, 'is-open': derived.visible }, onClick: (e) => {
                 if (e.target === e.currentTarget)
                     this.close();
-            } }, h("aside", { key: '3ac3588ae8feacd4f8bb96bdae8ef71e80ecb4b3', class: { panel: true, [`panel--${this.side}`]: true, 'is-open': this.visible }, role: "dialog", "aria-modal": "true", "aria-label": this.heading, "aria-hidden": this.visible ? 'false' : 'true' }, h("header", { key: 'e0126d634e952ebf56b73e54545f6c3981210827', class: "drawer-header" }, h("h2", { key: 'a72b23114aa836076ec59cd4a5d1438d228179d9', class: "drawer-title" }, this.heading), h("button", { key: '92fb5b159490440352a6c23d65aa6e8c956ae3d8', class: "close-btn", onClick: this.close, "aria-label": "Close cart" }, h("svg", { key: '138f4dc7669e62fb667091da0ba26dfbe94327c6', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '21fedd9dc89937a92f9c1124d4fa834b55908f1e', d: "M6 6l12 12M18 6L6 18", "stroke-linecap": "round" })))), h("div", { key: 'ebee87cb6a3c98dbf813d0a903a9cb4da2c696f3', class: "drawer-body" }, h("tl-cart", { key: '323db3a160837b68ffaa767e647ec67b06fa53b0' })), h("footer", { key: 'd35543373eb13ad1acc46ae50aefcb5a04f305a1', class: "drawer-footer" }, h("div", { key: '52229c74d39471bf186c965b6a53b38f79ce8d61', class: "pb-links" }, h("a", { key: 'd0430bf93d920c57fc42043faed7e8fd895855aa', href: "https://ticketlayer.com/privacy", target: "_blank", rel: "noopener noreferrer" }, "Privacy Policy"), h("a", { key: '2a75dc8dcdc9ec3010fe83f97d903cdc32767e49', href: "https://ticketlayer.com/report-abuse", target: "_blank", rel: "noopener noreferrer" }, "Report Abuse")), h("a", { key: '40642c5c4c003a454dd7ab2b66ebe5948a03df7d', class: "pb-brand", href: "https://ticketlayer.com", target: "_blank", rel: "noopener noreferrer" }, h("span", { key: 'a5d9b5c023381d25b6aaddf61e56dbdb21580975', class: "pb-pre" }, "Powered by"), h("svg", { key: '35bc23af9a35272d7ada24fd66d5f12f1d951ae8', width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '90139e79acd8920bcd494cc6579dbcb8278b0aef', 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: 'ba3aa34471395e33752e72f87f93a85381f7caad', 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: '429154bd6c38febe4da8871a7e614bf272a18854', class: "pb-word" }, "Ticketlayer")))))));
+            } }, h("aside", { key: 'eefe601ef6d2d8fc6bcfe62f1777d139875f875d', class: { panel: true, [derived.sideClass]: true, 'is-open': derived.visible }, role: "dialog", "aria-modal": "true", "aria-label": this.heading, "aria-hidden": derived.ariaHidden }, h("header", { key: '753d616182c3a903111dcaaf9b37f03186e17b48', class: "drawer-header" }, h("h2", { key: '3e839ddbc2a2da1f4c8eb0c1e38c421de13426cd', class: "drawer-title" }, this.heading), h("button", { key: '0d80fff5f425d6150fb391fd930161167b5f7d27', class: "close-btn", onClick: this.close, "aria-label": strings.close }, h("svg", { key: '7ffcbfb86f921d13deb5070140f21e4c7ca668f1', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '53d690ef2ac8d1d73038c53fa3aa0146bde0fb51', d: "M6 6l12 12M18 6L6 18", "stroke-linecap": "round" })))), h("div", { key: 'a782b1527cde89656e5f776311f848c446d92d48', class: "drawer-body" }, h("tl-cart", { key: '3cd2c09f728cf14f0ea5b6ff4493b3e51e0dda62' })), h("footer", { key: '2df57237bbd548ae4af09098676d7e1315e11d71', class: "drawer-footer" }, h("div", { key: 'f02f5970181a2d83b70ac44188f00523a188771d', class: "pb-links" }, h("a", { key: 'd799da3a8c1c33b10a268500b02fda5523cd8bcf', href: strings.privacyHref, target: "_blank", rel: "noopener noreferrer" }, strings.privacy), h("a", { key: 'e928acb4c78cef8762d7ae8d258fa705554fd121', href: strings.reportAbuseHref, target: "_blank", rel: "noopener noreferrer" }, strings.reportAbuse)), h("a", { key: '39278516b8da6dd14fe8bf0d0379c32ccfeb1d29', class: "pb-brand", href: strings.brandHref, target: "_blank", rel: "noopener noreferrer" }, h("span", { key: '96b2cb7ac0a73cd0c60fb7977999a00b4989177e', class: "pb-pre" }, strings.poweredBy), h("svg", { key: 'b3950f83eab4a41e63a7919e6872a9ecdafab38b', width: "13", height: "13", viewBox: "0 0 50 50", fill: "none", "aria-hidden": "true" }, h("g", { key: '4c0c7ec66952f8a1956b3061f6bf2eb45c438989', transform: "matrix(0.0129 0 0 -0.0129 25.4752 25.4752)" }, h("path", { key: 'b1c9a143f0b2ad24da843323a4c1c550e9717d1b', 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: '053ca451a9674161799458e731862a93c954be23', class: "pb-word" }, strings.brand)))))));
     }
     static get is() { return "tl-cart-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -140,7 +166,7 @@ export class TlCartDrawer {
     }
     static get states() {
         return {
-            "visible": {}
+            "view": {}
         };
     }
     static get events() {
@@ -178,6 +204,12 @@ export class TlCartDrawer {
     }
     static get watchers() {
         return [{
+                "propName": "side",
+                "methodName": "syncProps"
+            }, {
+                "propName": "heading",
+                "methodName": "syncProps"
+            }, {
                 "propName": "open",
                 "methodName": "onOpenProp"
             }];

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

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

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

@@ -1,11 +1,16 @@
 import { h, Host } from "@stencil/core";
-import { getSDK, hasSDK } from "../../utils/sdk-connector";
+import { checkoutWrapperCore, createElement, } from "@ticketlayer/elements-core";
+import { getSDK, whenSDK } from "../../utils/sdk-connector";
 /**
  * @component tl-checkout-wrapper
  *
  * Wraps any content and opens the Ticketlayer checkout modal when clicked.
  * Uses the SDK's modal manager which handles the iframe overlay.
  *
+ * The web harness for `checkoutWrapperCore`: it renders, it forwards, and it
+ * decides only which key press counts as activation. Everything else is in
+ * `@ticketlayer/elements-core` (AGENTS.md, TKT-11).
+ *
  * @slot - Content to display (typically a checkout button)
  *
  * @example
@@ -19,40 +24,57 @@ export class TlCheckoutWrapper {
          * Whether the wrapper is disabled
          */
         this.disabled = false;
+        this.element = createElement(checkoutWrapperCore, {
+            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-checkout-wrapper] SDK not initialized. Call setSDK(ticketlayer) first.');
-                this.tlError.emit({ message: 'SDK not initialized' });
-                return;
-            }
-            const sdk = getSDK();
-            // Open the checkout modal via SDK
-            sdk.checkout.openModal({
-                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({ disabled: this.disabled });
+    }
+    connectedCallback() {
+        this.syncProps();
+        this.unsubscribe ?? (this.unsubscribe = this.element.subscribe((view) => {
+            this.view = view;
+        }));
+        this.view = this.element.view;
+        // Nothing to do on mount, and 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: 'ebaae5dd6710ffc5353ece4327012df0332fdbb7', class: {
+        const { interactive } = this.view.derived;
+        return (h(Host, { key: 'b261046c2627825258a5905662a79f436d713683', class: {
                 'tl-checkout-wrapper': true,
-                'tl-checkout-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: '0118d9921df5af1ae2376fd4135bac487aac7ebd' })));
+                'tl-checkout-wrapper--disabled': !interactive,
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown, role: "button", tabindex: interactive ? 0 : -1, "aria-disabled": interactive ? null : 'true' }, h("slot", { key: '5be08d5007a755e3d88a06ae89c08e082e4ba052' })));
     }
     static get is() { return "tl-checkout-wrapper"; }
     static get originalStyleUrls() {
@@ -89,10 +111,15 @@ export class TlCheckoutWrapper {
             }
         };
     }
+    static get states() {
+        return {
+            "view": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "tlComplete",
-                "name": "tl-complete",
+                "name": "tlComplete",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -114,7 +141,7 @@ export class TlCheckoutWrapper {
                 }
             }, {
                 "method": "tlError",
-                "name": "tl-error",
+                "name": "tlError",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -129,7 +156,7 @@ export class TlCheckoutWrapper {
                 }
             }, {
                 "method": "tlClose",
-                "name": "tl-close",
+                "name": "tlClose",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -144,5 +171,10 @@ export class TlCheckoutWrapper {
                 }
             }];
     }
-    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "syncProps"
+            }];
+    }
 }

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

@@ -1,23 +1,11 @@
-/** Adapt an event detail to the card shape (the list adapter lives in the SDK connector). */
-export function toEventCardEvent(detail) {
-    const occurrences = detail.occurrences ?? [];
-    const starts = occurrences
-        .map((o) => o.startsAt)
-        .filter((s) => !!s)
-        .sort();
-    const now = Date.now();
-    const next = starts.find((s) => new Date(s).getTime() >= now) ?? starts[0];
-    const soldOut = detail.status === 'sold_out' ||
-        (occurrences.length > 0 && occurrences.every((o) => o.status === 'sold_out'));
-    return {
-        id: detail.id,
-        name: detail.name,
-        ...(detail.shortDescription ? { shortDescription: detail.shortDescription } : {}),
-        ...(detail.imageUrl ? { imageUrl: detail.imageUrl } : {}),
-        ...(detail.venueName
-            ? { venue: { id: detail.venueId ?? '', name: detail.venueName, city: detail.venueCity ?? '' } }
-            : {}),
-        ...(next ? { nextOccurrence: { startsAt: next } } : {}),
-        availabilityStatus: soldOut ? 'sold_out' : 'available',
-    };
-}
+/**
+ * Adapts the sales event detail (events manager get) to the shape
+ * tl-event-card renders.
+ *
+ * The adapter and its type moved to `@ticketlayer/elements-core` with the core
+ * split (TKT-69): picking the next occurrence and deciding whether a card reads
+ * sold out is behaviour, and behaviour lives in a core so every harness decides
+ * it the same way. This file stays as the import path the component and its
+ * spec already use.
+ */
+export { toEventCardEvent } from '@ticketlayer/elements-core';

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

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