@ticketlayer/elements 0.3.3 → 1.0.0

package/dist/ticketlayer-elements/ticketlayer-elements.css

@@ -1 +1 @@
-:root{--tl-font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;--tl-font-family-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;--tl-primary:#6366f1;--tl-primary-foreground:#ffffff;--tl-secondary:#f3f4f6;--tl-secondary-foreground:#111827;--tl-background:#ffffff;--tl-foreground:#111827;--tl-muted:#f9fafb;--tl-muted-foreground:#6b7280;--tl-border:#e5e7eb;--tl-success:#10b981;--tl-success-foreground:#ffffff;--tl-warning:#f59e0b;--tl-warning-foreground:#ffffff;--tl-error:#ef4444;--tl-error-foreground:#ffffff;--tl-radius-sm:0.25rem;--tl-radius-md:0.5rem;--tl-radius-lg:0.75rem;--tl-spacing-1:0.25rem;--tl-spacing-2:0.5rem;--tl-spacing-3:0.75rem;--tl-spacing-4:1rem;--tl-spacing-6:1.5rem;--tl-spacing-8:2rem}
+:root{--tl-primary:#6366f1;--tl-color-primary:var(--tl-primary);--tl-primary-foreground:#ffffff;--tl-color-primary-foreground:var(--tl-primary-foreground);--tl-secondary:#f3f4f6;--tl-color-secondary:var(--tl-secondary);--tl-secondary-foreground:#111827;--tl-color-secondary-foreground:var(--tl-secondary-foreground);--tl-accent:#ec4899;--tl-color-accent:var(--tl-accent);--tl-accent-foreground:#ffffff;--tl-color-accent-foreground:var(--tl-accent-foreground);--tl-background:#ffffff;--tl-color-background:var(--tl-background);--tl-foreground:#111827;--tl-color-foreground:var(--tl-foreground);--tl-card:#ffffff;--tl-color-card:var(--tl-card);--tl-muted:#f9fafb;--tl-color-muted:var(--tl-muted);--tl-muted-foreground:#6b7280;--tl-color-muted-foreground:var(--tl-muted-foreground);--tl-border:#e5e7eb;--tl-color-border:var(--tl-border);--tl-border-hover:#9ca3af;--tl-color-border-hover:var(--tl-border-hover);--tl-input:#e5e7eb;--tl-color-input:var(--tl-input);--tl-ring:#6366f1;--tl-color-ring:var(--tl-ring);--tl-success:#10b981;--tl-color-success:var(--tl-success);--tl-success-foreground:#ffffff;--tl-color-success-foreground:var(--tl-success-foreground);--tl-warning:#f59e0b;--tl-color-warning:var(--tl-warning);--tl-warning-foreground:#ffffff;--tl-color-warning-foreground:var(--tl-warning-foreground);--tl-warning-bg:#fef3c7;--tl-color-warning-bg:var(--tl-warning-bg);--tl-error:#ef4444;--tl-color-error:var(--tl-error);--tl-destructive:var(--tl-error);--tl-color-destructive:var(--tl-error);--tl-error-foreground:#ffffff;--tl-color-error-foreground:var(--tl-error-foreground);--tl-destructive-foreground:var(--tl-error-foreground);--tl-color-destructive-foreground:var(--tl-error-foreground);--tl-error-bg:#fee2e2;--tl-color-error-bg:var(--tl-error-bg);--tl-destructive-bg:var(--tl-error-bg);--tl-color-destructive-bg:var(--tl-error-bg);--tl-info:#3b82f6;--tl-color-info:var(--tl-info);--tl-info-foreground:#ffffff;--tl-color-info-foreground:var(--tl-info-foreground);--tl-info-bg:#dbeafe;--tl-color-info-bg:var(--tl-info-bg);--tl-font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;--tl-font-family-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;--tl-font-size-base:16px;--tl-base-size:var(--tl-font-size-base);--tl-font-scale:1.25;--tl-radius-none:0px;--tl-radius-sm:0.25rem;--tl-radius-md:0.5rem;--tl-radius:var(--tl-radius-md);--tl-radius-lg:0.75rem;--tl-radius-full:9999px;--tl-spacing-1:0.25rem;--tl-spacing-2:0.5rem;--tl-spacing-3:0.75rem;--tl-spacing-4:1rem;--tl-spacing-5:1.25rem;--tl-spacing-6:1.5rem;--tl-spacing-8:2rem;--tl-duration-fast:120ms;--tl-duration-normal:200ms;--tl-duration-slow:320ms;--tl-easing-standard:cubic-bezier(0.2, 0, 0, 1);--tl-easing-emphasised:cubic-bezier(0.3, 0, 0, 1)}

package/dist/ticketlayer-elements/ticketlayer-elements.esm.js

@@ -1 +1 @@
-import{p as e,g as r,b as t}from"./p-CNX8hZa8.js";export{s as setNonce}from"./p-CNX8hZa8.js";(()=>{const r=import.meta.url,t={};return""!==r&&(t.resourcesUrl=new URL(".",r).href),e(t)})().then((async e=>(await r(),t([["p-0b1d16f8",[[1,"tl-my-orders",{emptyMessage:[1,"empty-message"],columns:[2],orders:[32],authenticated:[32],loading:[32],error:[32],expandedId:[32]}]]],["p-1c51cbc1",[[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]}]]],["p-f826b753",[[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}]}]]],["p-fbaca948",[[1,"tl-cart-drawer",{side:[1],heading:[1],open:[1028],visible:[32]},null,{open:[{onOpenProp:0}]}]]],["p-1471f6d8",[[1,"tl-event-list",{limit:[2],category:[1],columns:[2],events:[32],loading:[32],error:[32]},null,{limit:[{watchFiltersChange:0}],category:[{watchFiltersChange:0}]}]]],["p-bf73044b",[[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]}]]],["p-895ba1f3",[[260,"tl-buy-tickets-wrapper",{eventId:[1,"event-id"],occurrenceId:[1,"occurrence-id"],disabled:[4]}]]],["p-fa639d88",[[1,"tl-cart-badge",{showEmpty:[4,"show-empty"],icon:[1],size:[1],badgeOnly:[4,"badge-only"],itemCount:[32]}]]],["p-e02079fa",[[260,"tl-checkout-wrapper",{disabled:[4]}]]],["p-a22714d0",[[1,"tl-promo-code",{placeholder:[1],buttonLabel:[1,"button-label"],code:[32],applying:[32],applied:[32],error:[32]}]]],["p-9629029a",[[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}]}]]],["p-8d5722e1",[[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]}]]],["p-5169f68b",[[1,"tl-event-card",{event:[16],eventId:[1,"event-id"],loadedEvent:[32],loading:[32],error:[32]},null,{eventId:[{watchEventId:0}]}]]],["p-e6fab1d5",[[1,"tl-login",{heading:[1],allowCodeEntry:[4,"allow-code-entry"],phase:[32],email:[32],code:[32],busy:[32],error:[32],notice:[32],customer:[32]}]]],["p-917d8e09",[[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"],ticketTypes:[32],quantities:[32],loading:[32],error:[32],adding:[32],addSuccess:[32]},null,{eventId:[{watchPropsChange:0}],occurrenceId:[{watchPropsChange:0}]}]]],["p-e04ace15",[[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}]}]]]],e))));
+import{p as e,g as c,b as r}from"./p-imfxp765.js";export{s as setNonce}from"./p-imfxp765.js";(()=>{const c=import.meta.url,r={};return""!==c&&(r.resourcesUrl=new URL(".",c).href),e(r)})().then((async e=>(await c(),r([["p-4cfc9e53",[[1,"tl-my-orders",{emptyMessage:[1,"empty-message"],columns:[2],view:[32]},null,{emptyMessage:[{syncProps:0}],columns:[{syncProps:0}]}]]],["p-5135630e",[[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]}]]],["p-7fe7b6ba",[[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}]}]]],["p-d7ffaf46",[[1,"tl-cart-drawer",{side:[1],heading:[1],open:[1028],view:[32]},null,{side:[{syncProps:0}],heading:[{syncProps:0}],open:[{onOpenProp:0}]}]]],["p-7d547721",[[1,"tl-event-card",{event:[16],eventId:[1,"event-id"],view:[32]},null,{event:[{syncProps:0}],eventId:[{watchEventId:0}]}]]],["p-f1ff931f",[[1,"tl-event-list",{limit:[2],category:[1],columns:[2],view:[32]},null,{limit:[{watchFiltersChange:0}],category:[{watchFiltersChange:0}],columns:[{syncProps:0}]}]]],["p-e787e862",[[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}]}]]],["p-5bbce3b5",[[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}]}]]],["p-98d40869",[[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}]}]]],["p-ac79a3f6",[[260,"tl-checkout-wrapper",{disabled:[4],view:[32]},null,{disabled:[{syncProps:0}]}]]],["p-e7170f3c",[[1,"tl-promo-code",{placeholder:[1],buttonLabel:[1,"button-label"],view:[32]},null,{placeholder:[{syncProps:0}],buttonLabel:[{syncProps:0}]}]]],["p-d01f4429",[[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}]}]]],["p-45923d2c",[[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}]}]]],["p-abec290a",[[1,"tl-login",{heading:[1],allowCodeEntry:[4,"allow-code-entry"],view:[32]},null,{heading:[{syncProps:0}],allowCodeEntry:[{syncProps:0}]}]]],["p-492adc77",[[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}]}]]],["p-8122f0c1",[[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}]}]]]],e))));

package/dist/types/components/tl-buy-tickets-button/tl-buy-tickets-button.d.ts

@@ -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,6 +26,13 @@
  * <tl-buy-tickets-button event-id="evt_xxx" price="2500" currency="GBP"></tl-buy-tickets-button>
  */
 import { EventEmitter } from '../../stencil-public-runtime';
+import { type BuyTicketsButtonDerived, type BuyTicketsButtonProps, type BuyTicketsButtonState, type BuyTicketsButtonStatus } from '@ticketlayer/elements-core';
+/**
+ * The unions this element's props accept. They are the same four, three and
+ * three the core declares, written out here because Stencil reads the
+ * harness's own types to build `components.d.ts` and the catalogue emitter
+ * checks the two against each other, so they cannot drift.
+ */
 export type ButtonState = 'available' | 'soldOut' | 'waitlist' | 'comingSoon';
 export type ButtonVariant = 'primary' | 'secondary' | 'outline';
 export type ButtonSize = 'sm' | 'md' | 'lg';
@@ -43,16 +59,32 @@ export declare class TlBuyTicketsButton {
     pricePrefix: string;
     /** Disabled state */
     disabled: boolean;
+    /**
+     * 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.
+     */
     isHovered: boolean;
     /** Emitted when button is clicked (before modal opens) */
     tlClick: EventEmitter<{
         eventId: string;
         occurrenceId?: string;
     }>;
+    private element;
+    private unsubscribe?;
+    private teardown?;
+    /** The core's whole view. Assigning it is what makes Stencil re-render. */
+    view: import("@ticketlayer/elements-core").ElementView<BuyTicketsButtonProps, BuyTicketsButtonState, BuyTicketsButtonDerived, BuyTicketsButtonStatus, {
+        available: string;
+        soldOut: string;
+        waitlist: string;
+        comingSoon: string;
+    }>;
+    syncProps(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private forward;
     private handleClick;
-    private formatPrice;
-    private getStateConfig;
-    private isInteractive;
     render(): any;
     private renderTicketIcon;
     private renderSoldOutIcon;

package/dist/types/components/tl-buy-tickets-wrapper/tl-buy-tickets-wrapper.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { type BuyTicketsWrapperDerived, type BuyTicketsWrapperProps, type BuyTicketsWrapperState, type BuyTicketsWrapperStatus } from '@ticketlayer/elements-core';
 import { OrderResult } from '../../utils/sdk-connector';
 /**
  * @component tl-buy-tickets-wrapper
@@ -6,6 +7,12 @@ import { OrderResult } from '../../utils/sdk-connector';
  * 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
@@ -19,7 +26,6 @@ import { OrderResult } from '../../utils/sdk-connector';
  * </tl-buy-tickets-wrapper>
  */
 export declare class TlBuyTicketsWrapper {
-    el: HTMLElement;
     /**
      * The event ID to purchase tickets for
      */
@@ -46,7 +52,20 @@ export declare class TlBuyTicketsWrapper {
      * Emitted when the modal closes
      */
     tlClose: EventEmitter<void>;
+    private element;
+    private unsubscribe?;
+    private teardown?;
+    /** The core's whole view. Assigning it is what makes Stencil re-render. */
+    view: import("@ticketlayer/elements-core").ElementView<BuyTicketsWrapperProps, BuyTicketsWrapperState, BuyTicketsWrapperDerived, BuyTicketsWrapperStatus, {
+        noClient: string;
+        notAvailable: string;
+    }>;
+    syncProps(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private forward;
     private handleClick;
+    /** Enter and Space are a press on the web. The core knows nothing of keys. */
     private handleKeyDown;
     render(): any;
 }

package/dist/types/components/tl-cart/tl-cart.d.ts

@@ -1,23 +1,16 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export interface TlCartItem {
-    id: string;
-    ticketTypeId: string;
-    ticketTypeName: string;
-    eventName: string;
-    occurrenceDate: string;
-    quantity: number;
-    unitPrice: number;
-    totalPrice: number;
-    currency: string;
-}
-export interface TlCartData {
-    items: TlCartItem[];
-    subtotal: number;
-    fees: number;
-    total: number;
-    currency: string;
-    itemCount: number;
-}
+import { type CartDerived, type CartProps, type CartState, type CartStatus, type TlCartData as CoreTlCartData, type TlCartItem as CoreTlCartItem } from '@ticketlayer/elements-core';
+export type TlCartItem = CoreTlCartItem;
+export type TlCartData = CoreTlCartData;
+/**
+ * The web harness for `cartCore`.
+ *
+ * It renders and it forwards. The cart, the money rows, the subscription that
+ * keeps them current and every string are in `@ticketlayer/elements-core`
+ * (AGENTS.md, TKT-11); what is left here is the Stencil surface a host writes
+ * HTML against and the one genuinely web thing, finding the client the page
+ * published on `window.Ticketlayer`.
+ */
 export declare class TlCart {
     /**
      * Show checkout button
@@ -35,11 +28,6 @@ export declare class TlCart {
      * Compact mode - hides some details
      */
     compact: boolean;
-    cart: TlCartData | null;
-    loading: boolean;
-    error: string | null;
-    removingItemId: string | null;
-    private unsubscribe?;
     /**
      * Emitted when checkout is clicked
      */
@@ -64,15 +52,35 @@ export declare class TlCart {
     tlError: EventEmitter<{
         message: string;
     }>;
-    componentWillLoad(): void;
-    componentDidLoad(): void;
+    private element;
+    private unsubscribe?;
+    private teardown?;
+    /** The core's whole view. Assigning it is what makes Stencil re-render. */
+    view: import("@ticketlayer/elements-core").ElementView<CartProps, CartState, CartDerived, CartStatus, {
+        emptyTitle: string;
+        emptyMessage: string;
+        subtotalRow: string;
+        discountRow: string;
+        totalRow: string;
+        removeItem: string;
+        quantityPrefix: string;
+        loadFailed: string;
+        removeFailed: string;
+    }>;
+    syncProps(): void;
+    /**
+     * On screen: render what the core says and put the core to work. For this
+     * element that means waiting for the client, subscribing to `cart:updated`
+     * and reading the cart - all of it the core's business.
+     */
+    connectedCallback(): void;
+    /**
+     * Off screen: run the mount's teardown, which is what drops the cart
+     * subscription. Not `destroy()`: Stencil calls this for a DOM move as well
+     * as a removal, and a destroyed core never mounts again.
+     */
     disconnectedCallback(): void;
-    private loadCart;
-    private subscribeToCartUpdates;
-    private handleRemoveItem;
-    private handleCheckout;
-    private formatPrice;
-    private formatDate;
+    private forward;
     private renderSkeleton;
     private renderEmptyCart;
     private renderCartItem;

package/dist/types/components/tl-cart-badge/tl-cart-badge.d.ts

@@ -1,4 +1,13 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { type CartBadgeDerived, type CartBadgeProps, type CartBadgeState } from '@ticketlayer/elements-core';
+/**
+ * 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 declare class TlCartBadge {
     /**
      * Show the badge even when count is 0
@@ -16,20 +25,26 @@ export declare class TlCartBadge {
      * Badge only mode - only shows the count bubble, no icon or button
      */
     badgeOnly: boolean;
-    itemCount: number;
-    private unsubscribe?;
     /**
      * Emitted when the badge is clicked
      */
     tlClick: EventEmitter<{
         itemCount: number;
     }>;
-    componentWillLoad(): void;
-    componentDidLoad(): void;
+    private element;
+    private unsubscribe?;
+    private teardown?;
+    /** The core's whole view. Assigning it is what makes Stencil re-render. */
+    view: import("@ticketlayer/elements-core").ElementView<CartBadgeProps, CartBadgeState, CartBadgeDerived, "ready", {
+        ariaPrefix: string;
+        ariaSuffix: string;
+        overflow: string;
+    }>;
+    syncProps(): void;
+    connectedCallback(): void;
+    /** Off screen: the mount's teardown is what drops the cart subscription. */
     disconnectedCallback(): void;
-    private getPersistedCartCount;
-    private persistCartCount;
-    private subscribeToCartUpdates;
+    private forward;
     private handleClick;
     private renderIcon;
     render(): any;

package/dist/types/components/tl-cart-drawer/tl-cart-drawer.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { type CartDrawerDerived, type CartDrawerProps, type CartDrawerState, type CartDrawerStatus } from '@ticketlayer/elements-core';
 /**
  * @component tl-cart-drawer
  *
@@ -9,6 +10,10 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * 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
@@ -20,16 +25,34 @@ export declare class TlCartDrawer {
     heading: string;
     /** Controlled open state (also driven by the `ui:cart-requested` intent). */
     open: boolean;
-    visible: boolean;
     tlOpen: EventEmitter<void>;
     tlClose: EventEmitter<void>;
-    private offCart?;
-    private offClose?;
+    private element;
+    private unsubscribe?;
+    private teardown?;
+    /** The core's whole view. Assigning it is what makes Stencil re-render. */
+    view: import("@ticketlayer/elements-core").ElementView<CartDrawerProps, CartDrawerState, CartDrawerDerived, CartDrawerStatus, {
+        close: string;
+        privacy: string;
+        privacyHref: string;
+        reportAbuse: string;
+        reportAbuseHref: string;
+        poweredBy: string;
+        brand: string;
+        brandHref: string;
+    }>;
+    syncProps(): void;
+    /**
+     * 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: boolean): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    onOpenProp(v: boolean): void;
+    /** The one thing only a browser has. What Escape means is the core's answer. */
     private onKey;
-    private setOpen;
+    private forward;
     private close;
     render(): any;
 }

package/dist/types/components/tl-checkout-wrapper/tl-checkout-wrapper.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { type CheckoutWrapperDerived, type CheckoutWrapperProps, type CheckoutWrapperState, type CheckoutWrapperStatus } from '@ticketlayer/elements-core';
 import { OrderResult } from '../../utils/sdk-connector';
 /**
  * @component tl-checkout-wrapper
@@ -6,6 +7,10 @@ import { OrderResult } from '../../utils/sdk-connector';
  * 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
@@ -14,7 +19,6 @@ import { OrderResult } from '../../utils/sdk-connector';
  * </tl-checkout-wrapper>
  */
 export declare class TlCheckoutWrapper {
-    el: HTMLElement;
     /**
      * Whether the wrapper is disabled
      */
@@ -33,7 +37,20 @@ export declare class TlCheckoutWrapper {
      * Emitted when the modal closes
      */
     tlClose: EventEmitter<void>;
+    private element;
+    private unsubscribe?;
+    private teardown?;
+    /** The core's whole view. Assigning it is what makes Stencil re-render. */
+    view: import("@ticketlayer/elements-core").ElementView<CheckoutWrapperProps, CheckoutWrapperState, CheckoutWrapperDerived, CheckoutWrapperStatus, {
+        noClient: string;
+        notAvailable: string;
+    }>;
+    syncProps(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private forward;
     private handleClick;
+    /** Enter and Space are a press on the web. The core knows nothing of keys. */
     private handleKeyDown;
     render(): any;
 }

package/dist/types/components/tl-event-card/event-card-adapter.d.ts

@@ -1,23 +1,12 @@
 /**
  * Adapts the sales event detail (events manager get) to the shape
- * tl-event-card renders. Kept outside the component module because Stencil
- * allows only the component class as a value export there.
+ * 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.
  */
-import type { TlEventCardEvent } from './tl-event-card';
-export interface EventDetailLike {
-    id: string;
-    name: string;
-    status?: string;
-    shortDescription?: string | null;
-    imageUrl?: string | null;
-    venueId?: string | null;
-    venueName?: string | null;
-    venueCity?: string | null;
-    occurrences?: Array<{
-        id: string;
-        startsAt?: string | null;
-        status?: string;
-    }>;
-}
-/** Adapt an event detail to the card shape (the list adapter lives in the SDK connector). */
-export declare function toEventCardEvent(detail: EventDetailLike): TlEventCardEvent;
+export { toEventCardEvent } from '@ticketlayer/elements-core';
+export type { EventDetailLike } from '@ticketlayer/elements-core';

package/dist/types/components/tl-event-card/tl-event-card.d.ts

@@ -1,23 +1,13 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export interface TlEventCardEvent {
-    id: string;
-    name: string;
-    slug?: string;
-    description?: string;
-    shortDescription?: string;
-    imageUrl?: string;
-    thumbnailUrl?: string;
-    category?: string;
-    venue?: {
-        id: string;
-        name: string;
-        city: string;
-    };
-    nextOccurrence?: {
-        startsAt: string;
-    };
-    availabilityStatus: 'available' | 'limited' | 'sold_out';
-}
+import { type EventCardDerived, type EventCardProps, type EventCardState, type EventCardStatus, type TlEventCardEvent as CoreTlEventCardEvent } from '@ticketlayer/elements-core';
+export type TlEventCardEvent = CoreTlEventCardEvent;
+/**
+ * The web harness for `eventCardCore`.
+ *
+ * It renders and it forwards: which event is shown, how it is read, the status
+ * badge and the date are all in `@ticketlayer/elements-core` (AGENTS.md,
+ * TKT-11).
+ */
 export declare class TlEventCard {
     /**
      * Event data to display (tl-event-list passes this)
@@ -28,9 +18,6 @@ export declare class TlEventCard {
      * card works standalone (e.g. on a Webflow page).
      */
     eventId?: string;
-    loadedEvent: TlEventCardEvent | null;
-    loading: boolean;
-    error: string | null;
     /**
      * Emitted when the card is clicked
      */
@@ -43,13 +30,23 @@ export declare class TlEventCard {
     tlError: EventEmitter<{
         message: string;
     }>;
+    private element;
+    private unsubscribe?;
+    private teardown?;
+    /** The core's whole view. Assigning it is what makes Stencil re-render. */
+    view: import("@ticketlayer/elements-core").ElementView<EventCardProps, EventCardState, EventCardDerived, EventCardStatus, {
+        available: string;
+        limited: string;
+        soldOut: string;
+        notFound: string;
+        loadFailed: string;
+    }>;
+    syncProps(): void;
+    /** A new id is a new subject: tear the old mount down and start again. */
     watchEventId(): void;
-    componentWillLoad(): Promise<void>;
-    private loadEvent;
-    private get current();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private forward;
     private handleClick;
-    private formatDate;
-    private getStatusBadgeClass;
-    private getStatusLabel;
     render(): any;
 }

package/dist/types/components/tl-event-list/tl-event-list.d.ts

@@ -1,5 +1,14 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import type { TlEventCardEvent } from '../tl-event-card/tl-event-card';
+import { type EventListDerived, type EventListProps, type EventListState, type EventListStatus } from '@ticketlayer/elements-core';
+/**
+ * tl-event-list - what the channel is selling, as a grid of tl-event-card.
+ *
+ * The web harness for `eventListCore`: it renders and it forwards. What to ask
+ * for, what came back and every string are in `@ticketlayer/elements-core`
+ * (AGENTS.md, TKT-11).
+ *
+ * Usage: <tl-event-list limit="12" columns="3"></tl-event-list>
+ */
 export declare class TlEventList {
     /**
      * Maximum number of events to display
@@ -13,18 +22,49 @@ export declare class TlEventList {
      * Columns for grid layout (1, 2, 3, or 4)
      */
     columns: number;
-    events: TlEventCardEvent[];
-    loading: boolean;
-    error: string | null;
     /**
      * Emitted when an event card is clicked
      */
     tlEventClick: EventEmitter<{
         eventId: string;
     }>;
+    private element;
+    private unsubscribe?;
+    private teardown?;
+    /** The core's whole view. Assigning it is what makes Stencil re-render. */
+    view: import("@ticketlayer/elements-core").ElementView<EventListProps, EventListState, EventListDerived, EventListStatus, {
+        errorTitle: string;
+        emptyTitle: string;
+        emptyMessage: string;
+        loadFailed: string;
+        noListing: string;
+    }>;
+    /** A different question deserves a fresh answer. */
     watchFiltersChange(): void;
-    componentWillLoad(): Promise<void>;
-    private loadEvents;
+    syncProps(): void;
+    connectedCallback(): void;
+    /**
+     * Nothing is painted until the first listing has landed.
+     *
+     * Kept as found rather than improved, and it is the harness's to keep: the
+     * component awaited its read in `componentWillLoad`, and Stencil does not
+     * paint a component until that resolves, so a slow channel shows an empty
+     * box where the skeleton markup below would fit. Held by the spec.
+     *
+     * Expressed against the core's own status rather than against a read this
+     * harness starts, because the read is the core's (`connectedCallback` has
+     * already mounted it). Every later read draws the skeleton, exactly as
+     * before.
+     */
+    componentWillLoad(): Promise<void> | undefined;
+    /**
+     * Off screen: run the mount's teardown, and nothing more. `destroy()` is
+     * terminal and Stencil calls this for a move as well as a removal, so
+     * destroying here would leave a re-inserted element frozen.
+     */
+    disconnectedCallback(): void;
+    private forward;
+    /** A card was clicked. The core has nothing to decide about it; pass it on. */
     private handleEventClick;
     render(): any;
 }