@session-services/web-elements 0.1.17 → 0.1.18

package/dist/collection/collection-manifest.json

@@ -1,5 +1,6 @@
 {
   "entries": [
+    "components/session-services-formatted-text/session-services-formatted-text.js",
     "components/session-services-ticketing/session-services-ticketing.js"
   ],
   "compiler": {

package/dist/collection/components/session-services-formatted-text/session-services-formatted-text.css

@@ -0,0 +1,135 @@
+:host {
+  /**
+   * Shadcn-compatible design tokens for formatted text component.
+   * Override these CSS custom properties to customize the appearance.
+   *
+   * @prop --foreground: Primary text color.
+   * @prop --muted-foreground: Secondary/muted text color.
+   * @prop --primary: Link color.
+   * @prop --border: Divider color.
+   * @prop --ring: Focus ring color.
+   * @prop --radius: Border radius.
+   * @prop --spacing-md: Medium spacing (1rem).
+   * @prop --spacing-lg: Large spacing (1.5rem).
+   * @prop --font-family: Base font family.
+   * @prop --transition-fast: Fast transition duration.
+   */
+
+  /* Light theme defaults (shadcn zinc) */
+  --foreground: oklch(0.145 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --primary: oklch(0.42 0.24 264.376);
+  --border: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --radius: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Internal tokens with external override fallbacks */
+  --internal-foreground: var(--foreground, oklch(0.145 0 0));
+  --internal-muted-foreground: var(--muted-foreground, oklch(0.556 0 0));
+  --internal-primary: var(--primary, oklch(0.42 0.24 264.376));
+  --internal-border: var(--border, oklch(0.922 0 0));
+  --internal-ring: var(--ring, oklch(0.708 0 0));
+  --internal-radius: var(--radius, 0.5rem);
+  --internal-spacing-md: var(--spacing-md, 1rem);
+  --internal-spacing-lg: var(--spacing-lg, 1.5rem);
+  --internal-font-family: var(
+    --font-family,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    "Noto Sans",
+    sans-serif
+  );
+  --internal-transition-fast: var(
+    --transition-fast,
+    150ms cubic-bezier(0.4, 0, 0.2, 1)
+  );
+
+  display: block;
+  font-family: var(--internal-font-family);
+  line-height: 1.6;
+  color: var(--internal-foreground);
+}
+
+:host([data-theme="dark"]) {
+  --foreground: oklch(0.96 0 0);
+  --muted-foreground: oklch(0.78 0 0);
+  --primary: oklch(0.623 0.214 259.815);
+  --border: oklch(0.29 0 0);
+  --ring: oklch(0.6 0 0);
+}
+
+/* Reset box model */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+*:focus:not(:focus-visible) {
+  outline: none;
+}
+
+*:focus-visible {
+  outline: 2px solid var(--internal-ring);
+  outline-offset: 2px;
+  border-radius: calc(var(--internal-radius) - 4px);
+}
+
+.formatted-text {
+  color: var(--internal-foreground);
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.formatted-link {
+  color: var(--internal-primary);
+  text-decoration: none;
+  transition: color var(--internal-transition-fast);
+}
+
+.formatted-link:hover {
+  color: oklch(from var(--internal-primary) calc(l + 0.1) c h);
+  text-decoration: underline;
+}
+
+.formatted-divider {
+  height: 0;
+  border: none;
+  border-top: 1px solid var(--internal-border);
+  margin: var(--internal-spacing-md) 0;
+}
+
+.soundcloud-embed {
+  margin: var(--internal-spacing-md) 0;
+  border-radius: var(--internal-radius);
+  overflow: hidden;
+}
+
+.soundcloud-embed iframe {
+  display: block;
+  border: none;
+}
+
+/* Screen reader only - visually hidden but accessible */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/collection/components/session-services-formatted-text/session-services-formatted-text.js

@@ -0,0 +1,162 @@
+import { 
+// biome-ignore lint/correctness/noUnusedImports: h is required by Stencil JSX transform
+h, Host, } from "@stencil/core";
+import { getDisplayUrl, isSoundCloudUrl, parseFormattedText, } from "@session-services/utils/formatting";
+export class SessionServicesFormattedText {
+    text = "";
+    theme = "system";
+    currentTheme = "light";
+    segments = [];
+    mediaQueryList;
+    componentWillLoad() {
+        this.setupTheme();
+        this.parseText();
+    }
+    textChanged() {
+        this.parseText();
+    }
+    themeChanged() {
+        this.setupTheme();
+    }
+    disconnectedCallback() {
+        if (this.mediaQueryList) {
+            this.mediaQueryList.removeEventListener("change", this.handleSystemThemeChange);
+        }
+    }
+    setupTheme() {
+        if (this.mediaQueryList) {
+            this.mediaQueryList.removeEventListener("change", this.handleSystemThemeChange);
+        }
+        if (this.theme === "system") {
+            // Guard for testing environments (JSDOM) where matchMedia may not exist
+            if (typeof globalThis.matchMedia === "function") {
+                this.mediaQueryList = globalThis.matchMedia("(prefers-color-scheme: dark)");
+                this.currentTheme = this.mediaQueryList.matches ? "dark" : "light";
+                this.mediaQueryList.addEventListener("change", this.handleSystemThemeChange);
+            }
+            else {
+                this.currentTheme = "light";
+            }
+        }
+        else {
+            this.currentTheme = this.theme;
+        }
+    }
+    handleSystemThemeChange = (e) => {
+        if (this.theme === "system") {
+            this.currentTheme = e.matches ? "dark" : "light";
+        }
+    };
+    parseText() {
+        this.segments = parseFormattedText(this.text);
+    }
+    renderLink(segment, key) {
+        const displayText = segment.linkType === "url"
+            ? getDisplayUrl(segment.href || "")
+            : segment.content;
+        return (h("a", { key: key, href: segment.href, target: "_blank", rel: "noopener noreferrer", class: "formatted-link" }, displayText, h("span", { class: "sr-only" }, " (opens in new tab)")));
+    }
+    renderSoundCloudEmbed(url, key, label) {
+        if (!isSoundCloudUrl(url)) {
+            return this.renderLink({
+                type: "link",
+                content: url,
+                href: url,
+                linkType: "url",
+            }, key);
+        }
+        const embedUrl = `https://w.soundcloud.com/player/?url=${encodeURIComponent(url)}&color=%23ff5500&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=false`;
+        // Extract path for accessible title (e.g., "artist/track-name" from URL)
+        const pathLabel = new URL(url).pathname.slice(1).replace(/-/g, " ");
+        const iframeTitle = `SoundCloud: ${label || pathLabel || url}`;
+        return (h("div", { key: key, class: "soundcloud-embed" }, h("iframe", { width: "100%", height: "166", scrolling: "no", allow: "autoplay", sandbox: "allow-scripts allow-same-origin allow-popups", src: embedUrl, title: iframeTitle, loading: "lazy" })));
+    }
+    renderSegment(segment, index) {
+        switch (segment.type) {
+            case "text":
+                return h("span", { key: index }, segment.content);
+            case "link":
+                return this.renderLink(segment, index);
+            case "divider":
+                return h("hr", { key: index, class: "formatted-divider" });
+            case "soundcloud":
+                return this.renderSoundCloudEmbed(segment.href || "", index, segment.content);
+            default:
+                return null;
+        }
+    }
+    render() {
+        return (h(Host, { key: '1a7f36efb8cdbd1efdaa97c36b60593a13c99c4e', "data-theme": this.currentTheme }, h("div", { key: 'fce1176ff0ef2ea5c3f1b282ab9a52554491f9bf', class: "formatted-text" }, this.segments.map((segment, index) => this.renderSegment(segment, index)))));
+    }
+    static get is() { return "session-services-formatted-text"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["session-services-formatted-text.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["session-services-formatted-text.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text",
+                "defaultValue": "\"\""
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"light\" | \"dark\" | \"system\"",
+                    "resolved": "\"dark\" | \"light\" | \"system\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "\"system\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentTheme": {},
+            "segments": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "text",
+                "methodName": "textChanged"
+            }, {
+                "propName": "theme",
+                "methodName": "themeChanged"
+            }];
+    }
+}

package/dist/collection/components/session-services-ticketing/session-services-ticketing.css

@@ -19,6 +19,7 @@
    * @prop --border: Border color for cards/controls.
    * @prop --input: Input border color (reserved).
    * @prop --ring: Focus ring color.
+   * @prop --backdrop: Modal backdrop overlay color.
    * @prop --spacing-xs: Spacing scale (xs).
    * @prop --spacing-sm: Spacing scale (sm).
    * @prop --spacing-md: Spacing scale (md).
@@ -67,6 +68,9 @@
   /* Additional colors for component */
   --success: oklch(0.66 0.154 149.48);
   --warning: oklch(0.72 0.153 66.34);
+  --info: oklch(0.623 0.214 259.815);
+  --info-foreground: oklch(0.488 0.243 264.376);
+  --backdrop: oklch(0 0 0 / 0.32);
 
   /* Radius */
   --radius: 0.625rem;
@@ -133,6 +137,9 @@
 
   --internal-success: var(--success, oklch(0.66 0.154 149.48));
   --internal-warning: var(--warning, oklch(0.72 0.153 66.34));
+  --internal-info: var(--info, oklch(0.623 0.214 259.815));
+  --internal-info-foreground: var(--info-foreground, oklch(0.488 0.243 264.376));
+  --internal-backdrop: var(--backdrop, oklch(0 0 0 / 0.32));
 
   --internal-radius: var(--radius, 0.625rem);
 
@@ -220,6 +227,8 @@
   --border: oklch(0.29 0 0);
   --input: oklch(0.29 0 0);
   --ring: oklch(0.60 0 0);
+  --info: oklch(0.623 0.214 259.815);
+  --info-foreground: oklch(0.707 0.165 254.624);
 }
 
 /* Tickets Section */
@@ -236,7 +245,7 @@
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  margin: 0 0 var(--spacing-lg) 0;
+  margin: 0 0 var(--spacing-md) 0;
   overflow: hidden;
   width: 100%;
   box-shadow: var(--shadow-sm);
@@ -274,6 +283,11 @@
   transition: all var(--internal-transition-base);
 }
 
+.tickets-wrapper > .ticket-section:last-child,
+.tickets-wrapper > .unsectioned-admissions:last-child .ticket-section:last-child {
+  margin-bottom: 0;
+}
+
 .ticket-section:focus-within {
   box-shadow: var(--internal-shadow-md);
 }
@@ -413,16 +427,67 @@
   flex: 1;
 }
 
+.admission-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--internal-spacing-md);
+  margin-bottom: var(--internal-spacing-sm);
+}
+
+.admission-header-text {
+  flex: 1;
+  min-width: 0;
+}
+
 .admission-title {
   color: var(--internal-foreground);
-  font-size: var(--internal-font-size-lg); /* match Order summary */
+  font-size: var(--internal-font-size-lg);
   font-weight: var(--internal-font-weight-semibold);
-  margin-bottom: var(--internal-spacing-sm);
+  margin-bottom: 0;
   display: flex;
   align-items: center;
   gap: var(--internal-spacing-sm);
 }
 
+.admission-subtitle {
+  color: var(--internal-muted-foreground);
+  font-size: var(--internal-font-size-sm);
+  margin-top: var(--internal-spacing-xs);
+  line-height: 1.4;
+}
+
+/* More Info Badge */
+.more-info-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--internal-spacing-xs) * 1.5);
+  padding: calc(var(--internal-spacing-xs) * 1.5) var(--internal-spacing-sm);
+  background: oklch(from var(--internal-info) l c h / 0.08);
+  color: var(--internal-info-foreground);
+  border: none;
+  border-radius: calc(var(--internal-radius) - 2px);
+  font-size: var(--internal-font-size-xs);
+  font-weight: var(--internal-font-weight-medium);
+  cursor: pointer;
+  transition: all var(--internal-transition-fast);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.more-info-badge:hover {
+  background: oklch(from var(--internal-info) l c h / 0.16);
+}
+
+.more-info-badge:focus-visible {
+  outline: 2px solid var(--internal-ring);
+  outline-offset: 2px;
+}
+
+.more-info-badge svg {
+  flex-shrink: 0;
+}
+
 .admission-time {
   color: var(--muted-foreground);
   font-size: var(--font-size-sm);
@@ -877,3 +942,110 @@
     margin: var(--spacing-md) 0;
   }
 }
+
+/* Modal Styles */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--internal-spacing-md);
+  background: var(--internal-backdrop);
+  backdrop-filter: blur(4px);
+  animation: modal-backdrop-fade-in var(--internal-transition-base) ease-out;
+}
+
+@keyframes modal-backdrop-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.modal-content {
+  position: relative;
+  width: 100%;
+  max-width: 32rem;
+  max-height: calc(100vh - var(--internal-spacing-xl) * 2);
+  overflow-y: auto;
+  background: var(--internal-popover);
+  color: var(--internal-popover-foreground);
+  border: 1px solid var(--internal-border);
+  border-radius: var(--internal-radius);
+  padding: var(--internal-spacing-lg);
+  box-shadow: var(--internal-shadow-xl);
+  animation: modal-content-scale-in var(--internal-transition-base) ease-out;
+}
+
+@keyframes modal-content-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.modal-close-btn {
+  position: absolute;
+  top: var(--internal-spacing-sm);
+  right: var(--internal-spacing-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: calc(var(--internal-radius) - 4px);
+  color: var(--internal-muted-foreground);
+  cursor: pointer;
+  opacity: 0.72;
+  transition: all var(--internal-transition-fast);
+}
+
+.modal-close-btn:hover {
+  opacity: 1;
+  background: var(--internal-accent);
+}
+
+.modal-close-btn:focus-visible {
+  outline: 2px solid var(--internal-ring);
+  outline-offset: 1px;
+  opacity: 1;
+}
+
+.modal-header {
+  margin-bottom: var(--internal-spacing-md);
+  padding-right: var(--internal-spacing-xl);
+}
+
+.modal-title {
+  font-size: var(--internal-font-size-xl);
+  font-weight: var(--internal-font-weight-semibold);
+  color: var(--internal-foreground);
+  margin: 0;
+  line-height: 1.2;
+}
+
+.modal-subtitle {
+  color: var(--internal-muted-foreground);
+  font-size: var(--internal-font-size-sm);
+  margin-top: var(--internal-spacing-xs);
+  line-height: 1.4;
+}
+
+.modal-description {
+  color: var(--internal-foreground);
+  font-size: var(--internal-font-size-base);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  margin: 0;
+}

package/dist/collection/components/session-services-ticketing/session-services-ticketing.js

@@ -5,6 +5,8 @@ import {
 h, Host, } from "@stencil/core";
 const CalendarIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M8 2v4" }), h("path", { d: "M16 2v4" }), h("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2" }), h("path", { d: "M3 10h18" })));
 const LocationIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" }), h("circle", { cx: "12", cy: "10", r: "3" })));
+const InfoIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("circle", { cx: "12", cy: "12", r: "10" }), h("path", { d: "M12 16v-4" }), h("path", { d: "M12 8h.01" })));
+const CloseIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M18 6 6 18" }), h("path", { d: "M6 6l12 12" })));
 export class SessionsTicketing {
     tenantId;
     eventId;
@@ -23,6 +25,7 @@ export class SessionsTicketing {
     quoteError = null;
     checkoutLoading = false;
     currentTheme = "light";
+    openModalAdmissionId = null;
     checkoutInit;
     cartUpdate;
     errorOccurred;
@@ -43,6 +46,10 @@ export class SessionsTicketing {
         if (this.mediaQueryList) {
             this.mediaQueryList.removeEventListener("change", this.handleSystemThemeChange);
         }
+        // Clean up modal listener if component unmounts while modal is open
+        if (this.openModalAdmissionId) {
+            document.removeEventListener("keydown", this.handleModalKeyDown);
+        }
     }
     async initializeComponent() {
         this.error = null;
@@ -82,13 +89,16 @@ export class SessionsTicketing {
     trackEvent(eventType, properties = {}) {
         if (!this.analytics || !this.enableAnalytics)
             return;
+        // Ensure required fields exist before tracking
+        if (!this.event?.teamId || !this.event?.promoterId)
+            return;
         this.analytics.track(eventType, {
             event_id: this.eventId,
-            team_id: this.event?.teamId,
-            promoter_id: this.event?.promoterId,
-            event_name: this.event?.name,
-            event_slug: this.event?.slug,
-            currency: this.event?.currency,
+            team_id: this.event.teamId,
+            promoter_id: this.event.promoterId,
+            event_name: this.event.name,
+            event_slug: this.event.slug,
+            currency: this.event.currency,
             ...properties,
         });
     }
@@ -370,6 +380,26 @@ export class SessionsTicketing {
     handleQuantityIncrease = async (admissionId, sectionId) => {
         await this.updateQuantity(admissionId, sectionId, 1);
     };
+    openModal = (admissionId, e) => {
+        e.stopPropagation();
+        this.openModalAdmissionId = admissionId;
+        document.addEventListener("keydown", this.handleModalKeyDown);
+    };
+    closeModal = () => {
+        this.openModalAdmissionId = null;
+        document.removeEventListener("keydown", this.handleModalKeyDown);
+    };
+    handleModalKeyDown = (e) => {
+        if (e.key === "Escape") {
+            this.closeModal();
+        }
+    };
+    handleBackdropClick = (e) => {
+        if (e.target instanceof HTMLElement &&
+            e.target.classList.contains("modal-backdrop")) {
+            this.closeModal();
+        }
+    };
     renderQuantityControls(admission, sectionId) {
         const key = `${admission.id}::${sectionId || "none"}`;
         const quantity = this.selectedItems.get(key) || 0;
@@ -395,7 +425,7 @@ export class SessionsTicketing {
         const ariaLabel = section
             ? `${admission.name} in ${section.name} - ${isSoldOut ? "Sold Out" : this.formatPriceValue(basePrice)}`
             : `${admission.name} - ${isSoldOut ? "Sold Out" : this.formatPriceValue(basePrice)}`;
-        return (h("section", { class: `admission-card ${isSoldOut ? "sold-out" : ""} ${isStandaloneAdmission ? "solo-admission" : ""}`, key: key, tabindex: isSoldOut ? -1 : 0, "aria-label": ariaLabel }, h("div", { class: "admission-content" }, h("div", { class: "admission-details" }, h("h3", { class: "admission-title" }, admission.name), isStandaloneAdmission && (h(h.Fragment, null, this.renderEventTimeAndLocation(), this.renderPriceAndControls(admission, sectionId, isSoldOut))), section &&
+        return (h("section", { class: `admission-card ${isSoldOut ? "sold-out" : ""} ${isStandaloneAdmission ? "solo-admission" : ""}`, key: key, tabindex: isSoldOut ? -1 : 0, "aria-label": ariaLabel }, h("div", { class: "admission-content" }, h("div", { class: "admission-details" }, h("div", { class: "admission-header" }, h("div", { class: "admission-header-text" }, h("h3", { class: "admission-title" }, admission.name), admission.subtitle && (h("p", { class: "admission-subtitle" }, admission.subtitle))), admission.description && (h("button", { type: "button", class: "more-info-badge", onClick: (e) => this.openModal(admission.id, e), "aria-label": `More info about ${admission.name}` }, InfoIcon(), h("span", null, "More info")))), isStandaloneAdmission && (h(h.Fragment, null, this.renderEventTimeAndLocation(), this.renderPriceAndControls(admission, sectionId, isSoldOut))), section &&
             this.renderPriceAndControls(admission, sectionId, isSoldOut)))));
     }
     renderSectionHeader(section, isSectionSoldOut) {
@@ -456,6 +486,16 @@ export class SessionsTicketing {
                 ? "Free"
                 : this.formatPriceValue(this.quote.price?.total || 0))), h("button", { type: "button", class: "checkout-btn", onClick: () => this.initiateCheckout(), disabled: this.isCheckoutDisabled() }, this.getCheckoutButtonText())));
     }
+    renderModal() {
+        if (!this.openModalAdmissionId)
+            return null;
+        const admission = this.event?.admissions.find((a) => a.id === this.openModalAdmissionId);
+        if (!admission)
+            return null;
+        return (
+        // biome-ignore lint/a11y/noStaticElementInteractions lint/a11y/useKeyWithClickEvents: backdrop click-to-close is a common modal pattern, keyboard handled via Escape key
+        h("div", { class: "modal-backdrop", onClick: this.handleBackdropClick }, h("div", { class: "modal-content", role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-title" }, h("button", { type: "button", class: "modal-close-btn", onClick: () => this.closeModal(), "aria-label": "Close" }, CloseIcon()), h("div", { class: "modal-header" }, h("h2", { id: "modal-title", class: "modal-title" }, admission.name), admission.subtitle && (h("p", { class: "modal-subtitle" }, admission.subtitle))), h("p", { class: "modal-description" }, admission.description))));
+    }
     renderTicketSections() {
         const generalAdmissions = this.event?.admissions.filter((adm) => !adm.sectionId) || [];
         return (h("div", { class: "tickets-wrapper" }, generalAdmissions.length > 0 && (h("div", { class: "unsectioned-admissions" }, generalAdmissions
@@ -471,7 +511,7 @@ export class SessionsTicketing {
             return this.renderErrorState();
         if (!this.event)
             return this.renderNotFoundState();
-        return (h(Host, { "data-theme": this.currentTheme }, h("div", { class: "session-services-ticketing-container" }, this.renderTicketSections(), this.renderOrderSummary())));
+        return (h(Host, { "data-theme": this.currentTheme }, h("div", { class: "session-services-ticketing-container" }, this.renderTicketSections(), this.renderOrderSummary()), this.renderModal()));
     }
     static get is() { return "session-services-ticketing"; }
     static get encapsulation() { return "shadow"; }
@@ -656,7 +696,8 @@ export class SessionsTicketing {
             "quoteLoading": {},
             "quoteError": {},
             "checkoutLoading": {},
-            "currentTheme": {}
+            "currentTheme": {},
+            "openModalAdmissionId": {}
         };
     }
     static get events() {
@@ -687,7 +728,7 @@ export class SessionsTicketing {
                 },
                 "complexType": {
                     "original": "OrderQuote",
-                    "resolved": "{ items: { id: string; kind: \"ADMISSION\" | \"ADDON\"; quantity: number; price: { net: number; total: number; gross: number; base: number; booking: number; refunded: number; discount: number; currency: string; }; admissionId?: string; sectionId?: string; admission?: { name: string; capacity: number; limit: number; order: number; entryStartsAt: string; entryEndsAt: string; saleStartsAt: string; saleEndsAt: string; price: { base: number; booking: number; currency: string; }; teamId: string; promoterId: string; eventId: string; eventSlug: string; id?: string; available?: number; sold?: number; reserved?: number; createdAt?: string; updatedAt?: string; sectionId?: string; }; section?: { name: string; capacity: number; limit: number; order: number; location: { createdAt: string; updatedAt: string; name: string; address: string; country: string; latitude: number; longitude: number; timeZone: string; id?: string; googlePlaceId?: string; city?: string; state?: string; postcode?: string; types?: string[]; description?: string; image?: { src: string; alt: string; width: number; height: number; }; venueId?: string; }; teamId: string; promoterId: string; eventId: string; eventSlug: string; id?: string; createdAt?: string; updatedAt?: string; available?: number; sold?: number; reserved?: number; }; }[]; price: { net: number; total: number; gross: number; base: number; booking: number; shipping: number; refunded: number; discount: number; gateway: number; dispute: number; currency: string; }; couponCode?: { name: string; active: boolean; couponId: string; teamId: string; id?: string; createdAt?: string; updatedAt?: string; uses?: number; }; }",
+                    "resolved": "{ items: { id: string; kind: \"ADMISSION\" | \"ADDON\"; quantity: number; price: { net: number; total: number; gross: number; base: number; booking: number; refunded: number; discount: number; currency: string; }; admissionId?: string; sectionId?: string; admission?: { name: string; capacity: number; limit: number; order: number; entryStartsAt: string; entryEndsAt: string; saleStartsAt: string; saleEndsAt: string; price: { base: number; booking: number; currency: string; }; visibility: \"ALWAYS\" | \"STACKED\" | \"HIDDEN\"; teamId: string; promoterId: string; eventId: string; eventSlug: string; id?: string; subtitle?: string; description?: string; available?: number; sold?: number; reserved?: number; createdAt?: string; updatedAt?: string; passcode?: string; sectionId?: string; }; section?: { name: string; capacity: number; limit: number; order: number; location: { createdAt: string; updatedAt: string; name: string; address: string; country: string; latitude: number; longitude: number; timeZone: string; id?: string; googlePlaceId?: string; city?: string; state?: string; postcode?: string; types?: string[]; description?: string; image?: { src: string; alt: string; width: number; height: number; }; venueId?: string; }; teamId: string; promoterId: string; eventId: string; eventSlug: string; id?: string; createdAt?: string; updatedAt?: string; available?: number; sold?: number; reserved?: number; passcode?: string; }; }[]; price: { net: number; total: number; gross: number; base: number; booking: number; shipping: number; refunded: number; discount: number; gateway: number; dispute: number; currency: string; }; couponCode?: { name: string; active: boolean; couponId: string; teamId: string; id?: string; createdAt?: string; updatedAt?: string; uses?: number; }; }",
                     "references": {
                         "OrderQuote": {
                             "location": "import",

package/dist/collection/index.js

@@ -1,11 +1 @@
-/**
- * @fileoverview entry point for your component library
- *
- * This is the entry point for your component library. Use this file to export utilities,
- * constants or data structure that accompany your components.
- *
- * DO NOT use this file to export your components. Instead, use the recommended approaches
- * to consume components of this package as outlined in the `README.md`.
- */
-// Export components through Stencil's loader mechanism
-// Types are exported through the generated dist/types folder
+export {};