@seatlayer/js 0.49.0 → 0.50.0

package/dist/index.js

@@ -2345,7 +2345,12 @@ var CSS = (
      never inherits (or fights) the host page's own timing. Values mirror
      docs/motion-system-2026-08-01.md \xA72. */
   --slm-mo-instant:80ms;--slm-mo-quick:140ms;--slm-mo-base:200ms;--slm-mo-slow:320ms;
-  --slm-mo-out:cubic-bezier(0.2,0.8,0.2,1);--slm-mo-exit:cubic-bezier(0.4,0,1,1)}
+  --slm-mo-out:cubic-bezier(0.2,0.8,0.2,1);--slm-mo-exit:cubic-bezier(0.4,0,1,1);
+  /* Semantic palette tokens, defined here (not resolveTokens) because they are
+     the WIDGET's meanings, not an org's brand: premium gold, environment
+     warning, danger, success. Hosts can still override them with CSS. */
+  --sl-premium:#e8c15a;--sl-premium-deep:#c9a24b;--sl-premium-ink:#1c1608;
+  --sl-warn:#d8a425;--sl-danger:#e5484d;--sl-success:#22a06b}
 .sl-picker *{box-sizing:border-box;margin:0;padding:0}
 .sl-picker button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
 
@@ -2371,21 +2376,41 @@ var CSS = (
 .sl-close.on{display:inline-flex}
 .sl-close svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
 
-/* A page or popup may already own the event heading. In that case only the
-   duplicate identity disappears; operational header controls stay available.
-   Zero block padding lets an otherwise-empty header collapse completely. */
-.sl-picker[data-event-details-hidden="true"] .sl-head{padding-block:0;border-bottom-width:0}
-.sl-picker[data-event-details-hidden="true"] .sl-logo,
-.sl-picker[data-event-details-hidden="true"] .sl-head-info{display:none!important}
-.sl-picker[data-event-details-hidden="true"] .sl-hold-pill.on,
-.sl-picker[data-event-details-hidden="true"] .sl-closed-pill.on,
-.sl-picker[data-event-details-hidden="true"] .sl-close.on{margin-block:10px}
+/* A page or popup may already own the event heading \u2014 but "already" is true at
+   load and false thirty seconds later: the buyer scrolls, the sheet opens over
+   the map, fullscreen removes the page, and two-tab comparison shopping is
+   normal ticket behaviour. So identity DEMOTES instead of disappearing: one
+   compact line (thumb + name) that answers "which event is this money for"
+   without competing with the host's own heading. The hold clock keeps a
+   labelled row around it instead of floating in a dark corner. */
+.sl-picker[data-event-details-hidden="true"] .sl-head{padding-block:7px}
+.sl-picker[data-event-details-hidden="true"] .sl-logo{width:22px;height:22px;border-radius:6px;font-size:11px}
+.sl-picker[data-event-details-hidden="true"] .sl-head-name{font-size:12.5px}
+.sl-picker[data-event-details-hidden="true"] .sl-head-meta{display:none}
 
 /* body */
 .sl-body{display:flex;flex:1;min-height:0}
 .sl-map{position:relative;flex:1;min-width:0}
 .sl-map-host{position:absolute;inset:0}
 .sl-side{width:300px;flex:none;border-left:1px solid var(--sl-line);display:flex;flex-direction:column;min-height:0;overflow:hidden}
+/* Wide-layout panel collapse: THE CHART IS THE PRODUCT, and a fixed 300px
+   panel holding an empty cart is the map's room spent on nothing. The panel
+   slides to zero (children keep their laid-out width so text doesn't rewrap
+   mid-slide); the "Tickets" pill in the top-right region brings it back, and
+   the first seat landing in the cart reopens it automatically \u2014 a collapsed
+   panel must never hide a checkout. */
+.sl-picker[data-layout="wide"] .sl-side{transition:width var(--slm-mo-slow) var(--slm-mo-out)}
+.sl-picker[data-layout="wide"][data-side-collapsed="true"] .sl-side{width:0;min-width:0;border-left-width:0}
+/* min-width:0 above is load-bearing: the panel is a flex item, and its
+   automatic minimum size (from these 300px-wide children) would otherwise
+   clamp the explicit width:0 straight back to 300 \u2014 verified in-browser. */
+.sl-picker[data-layout="wide"][data-side-collapsed="true"] .sl-side>*{min-width:300px}
+.sl-side-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 12px;
+  border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.02em;white-space:nowrap;
+  background:var(--sl-surface);border:1px solid var(--sl-line);color:var(--sl-text);transition:border-color .15s}
+.sl-side-toggle:hover{border-color:var(--sl-muted)}
+.sl-side-toggle svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
+.sl-picker[data-layout="narrow"] .sl-side-toggle{display:none}
 
 /* narrow (container < 640px): map-first \u2014 the map claims ~80-85% of the
    container and the side panel becomes a PEEKING bottom sheet (AXS/Ticketmaster
@@ -2468,6 +2493,15 @@ var CSS = (
    the buyer explicitly opens the ticket panel. */
 .sl-picker[data-layout="narrow"][data-sheet="open"] .sl-filtersec.has{display:block!important}
 .sl-picker[data-layout="narrow"][data-sheet="open"] .sl-filters.has{display:flex!important}
+/* The price list is the mobile buyer's ONLY legend \u2014 colour \u2192 ticket type \u2192
+   price \u2192 how many are left. Hiding it in the peek state is right (map-first);
+   never restoring it forced phone buyers to tap dots to learn prices. The OPEN
+   sheet brings it back, exactly like the filters row above. The tray hint comes
+   back with it: the first-time buyer on a phone needs the instruction more than
+   the desktop buyer, not less. */
+.sl-picker[data-layout="narrow"][data-sheet="open"] .sl-prices-sec{display:flex!important}
+.sl-picker[data-layout="narrow"][data-sheet="open"] .sl-prices{display:flex!important}
+.sl-picker[data-layout="narrow"][data-sheet="open"] .sl-tray-hint{display:block!important}
 .sl-cbbtn{width:32px;height:32px;border-radius:999px;background:var(--sl-surface);border:1px solid var(--sl-line);
   color:var(--sl-text);display:flex;align-items:center;justify-content:center;transition:border-color .15s}
 .sl-cbbtn:hover{border-color:var(--sl-muted)}
@@ -2477,13 +2511,13 @@ var CSS = (
 .sl-offer{display:none;margin:12px 14px 2px;padding:12px;border:1px solid color-mix(in srgb,var(--sl-accent) 34%,var(--sl-line));
   border-radius:12px;background:color-mix(in srgb,var(--sl-accent) 8%,var(--sl-surface));color:var(--sl-text)}
 .sl-offer.has{display:block}.sl-offer-main{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
-.sl-offer-copy{min-width:0}.sl-offer-kicker{display:block;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-accent)}
+.sl-offer-copy{min-width:0}.sl-offer-kicker{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-accent)}
 .sl-offer-name{display:block;margin-top:2px;font-size:13px;font-weight:800;line-height:1.3}.sl-offer-line{display:block;margin-top:3px;font-size:11px;line-height:1.35;color:var(--sl-muted)}
 .sl-offer-info{position:relative;flex:none}.sl-offer-info>summary{list-style:none;width:25px;height:25px;border:1px solid var(--sl-line);border-radius:999px;
   display:grid;place-items:center;cursor:pointer;font-size:12px;font-weight:850;color:var(--sl-text);background:var(--sl-surface)}
 .sl-offer-info>summary::-webkit-details-marker{display:none}.sl-offer-info[open]>summary{border-color:var(--sl-accent);color:var(--sl-accent)}
 .sl-offer-detail{margin-top:10px;padding-top:9px;border-top:1px solid var(--sl-line);font-size:10.5px;line-height:1.45;color:var(--sl-muted)}
-.sl-sec{padding:14px 14px 4px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-muted);font-weight:700}
+.sl-sec{padding:14px 14px 4px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-muted);font-weight:700}
 .sl-prices-sec{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:13px}
 .sl-price-select{min-height:32px;max-width:130px;padding:5px 28px 5px 9px;border:1px solid var(--sl-line);border-radius:9px;
   background:var(--sl-surface);color:var(--sl-text);font:inherit;font-size:11px;font-weight:750;letter-spacing:0;text-transform:none}
@@ -2493,7 +2527,7 @@ var CSS = (
   padding:0 6px;margin:0 -6px;border-radius:8px;cursor:pointer;transition:background .15s}
 .sl-price-row:hover,.sl-price-row:focus-visible{background:color-mix(in srgb,var(--sl-line) 40%,transparent)}
 .sl-price-row.sl-active{background:color-mix(in srgb,var(--sl-accent) 9%,transparent)}
-.sl-price-was{margin-left:auto;color:var(--sl-muted);font-size:10px;text-decoration:line-through}.sl-price-offer{display:block;color:var(--sl-accent);font-size:9px;font-weight:750}
+.sl-price-was{margin-left:auto;color:var(--sl-muted);font-size:10px;text-decoration:line-through}.sl-price-offer{display:block;color:var(--sl-accent);font-size:10px;font-weight:750}
 .sl-price-row.sl-active .sl-price-label{color:var(--sl-accent)}
 .sl-dot{width:9px;height:9px;border-radius:50%;flex:none}
 .sl-price-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
@@ -2536,7 +2570,7 @@ var CSS = (
 .sl-chip-id .fld{min-width:0}
 .sl-chip-id .fld.sec{flex:1}
 .sl-chip-id .fld.mid{flex:none;text-align:center}
-.sl-chip-eb{display:block;font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sl-muted);margin-bottom:1px}
+.sl-chip-eb{display:block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sl-muted);margin-bottom:1px}
 .sl-chip-id .val{display:block;font-weight:600;font-size:13px;line-height:1.25;white-space:nowrap}
 .sl-chip-id .fld.sec .val{overflow:hidden;text-overflow:ellipsis}
 .sl-chip-sub{display:flex;align-items:center;gap:6px;min-width:0}
@@ -2546,7 +2580,7 @@ var CSS = (
 .sl-chip .rm,.sl-chip .view{flex:1;min-height:26px;border-radius:0;display:flex;align-items:center;justify-content:center;
   color:var(--sl-muted);transition:color .15s,background .15s}
 .sl-chip .view{border-top:1px solid var(--sl-line)}
-.sl-chip .rm:hover,.sl-chip .rm:focus-visible{color:#e5484d;background:color-mix(in srgb,#e5484d 9%,transparent)}
+.sl-chip .rm:hover,.sl-chip .rm:focus-visible{color:var(--sl-danger);background:color-mix(in srgb,var(--sl-danger) 9%,transparent)}
 .sl-chip .view:hover,.sl-chip .view:focus-visible{color:var(--sl-text);background:color-mix(in srgb,var(--sl-accent) 10%,transparent)}
 .sl-chip .rm svg{width:11px;height:11px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
 .sl-chip .view svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.8;fill:none}
@@ -2556,7 +2590,7 @@ var CSS = (
 .sl-live{display:none;align-items:center;gap:7px;margin:10px 14px 0;padding:7px 9px;flex:none;
   border:1px solid var(--sl-line);border-radius:8px;background:color-mix(in srgb,var(--sl-accent) 4%,var(--sl-surface));
   font-size:11px;color:var(--sl-muted)}
-.sl-live .dot{width:6px;height:6px;border-radius:999px;background:#22a06b;box-shadow:0 0 6px rgba(34,160,107,.75);flex:none}
+.sl-live .dot{width:6px;height:6px;border-radius:999px;background:var(--sl-success);box-shadow:0 0 6px color-mix(in srgb,var(--sl-success) 75%,transparent);flex:none}
 .sl-live span:last-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .sl-live.on{display:flex;animation:slNoticeIn .38s cubic-bezier(.2,.8,.2,1) both}
 
@@ -2626,17 +2660,17 @@ var CSS = (
 .sl-picker[data-layout="narrow"] .sl-anchor[data-region="top-left"]{max-width:30%}
 .sl-picker[data-layout="narrow"] .sl-anchor[data-region="top-center"]{max-width:44%}
 
-/* TEST MODE is environment context, not an action. A clipped corner ribbon
-   keeps it persistent without impersonating a button or competing with Map/3D.
-   The top-left interactive region moves below it only on test events. */
-.sl-testbadge{position:absolute;top:17px;left:-38px;z-index:6;width:142px;padding:5px 0;
-  transform:rotate(-45deg);text-align:center;pointer-events:none;
-  font-size:9.5px;font-weight:850;letter-spacing:.13em;line-height:1.2;text-transform:uppercase;
-  white-space:nowrap;background:var(--sl-accent);color:var(--sl-accent-ink);
-  box-shadow:0 2px 8px rgba(0,0,0,.28)}
-.sl-picker[data-event-mode="test"] .sl-anchor[data-region="top-left"]{top:96px}
-.sl-picker[data-layout="narrow"] .sl-testbadge{top:14px;left:-35px;width:128px;font-size:8.5px}
-.sl-picker[data-layout="narrow"][data-event-mode="test"] .sl-anchor[data-region="top-left"]{top:88px}
+/* TEST MODE is environment context, not an action. A small squared chip that
+   flows FIRST in the top-left anchor region: the old rotated corner ribbon sat
+   at a negative offset and was clipped by the widget root's rounded
+   overflow:hidden (its ends cut mid-word), and its accent fill made an
+   environment flag wear the same gold as "buy". Amber warning tone, dashed
+   border \u2014 reads as a tag, never as a control; the a11y chips wrap beside it
+   in the same region, so no displacement hack is needed. */
+.sl-testbadge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:7px;pointer-events:none;
+  font-size:10px;font-weight:850;letter-spacing:.13em;line-height:1.2;text-transform:uppercase;white-space:nowrap;
+  color:var(--sl-warn);background:color-mix(in srgb,var(--sl-warn) 13%,var(--sl-surface));
+  border:1px dashed color-mix(in srgb,var(--sl-warn) 55%,transparent)}
 
 /* zoom column (flows within the bottom-right region) */
 .sl-zoom{display:flex;flex-direction:column;gap:6px}
@@ -2646,6 +2680,18 @@ var CSS = (
   color:var(--sl-text);font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:border-color .15s}
 .sl-zoom button:hover{border-color:var(--sl-muted)}
 .sl-zoom svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
+/* Full-screen promotion on phones: the capability existed (native + iOS overlay
+   + framed-host paths) but hid as the 4th unlabelled glyph in a corner stack.
+   On narrow layouts dockLayoutChrome moves the SAME button into the top-right
+   region beside Map|3D and this class dresses it as a labelled pill \u2014 the one
+   accelerator with the highest payoff on a small screen gets words. */
+.sl-zfs-lbl{display:none}
+.sl-fs-pill.sl-fs-pill{display:inline-flex;align-items:center;justify-content:center;width:auto;min-height:40px;height:auto;
+  padding:0 13px;gap:6px;border-radius:999px;font-size:11px;font-weight:800;
+  background:var(--sl-surface);border:1px solid var(--sl-line);color:var(--sl-text);transition:border-color .15s}
+.sl-fs-pill.sl-fs-pill:hover{border-color:var(--sl-muted)}
+.sl-fs-pill svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
+.sl-fs-pill .sl-zfs-lbl{display:inline;letter-spacing:.02em;white-space:nowrap}
 
 /* toast + boot states (toast flows in the bottom-center region) */
 .sl-toast{transform:translateY(6px) scale(.98);max-width:100%;
@@ -2656,9 +2702,9 @@ var CSS = (
 .sl-toast.has-action{pointer-events:auto;display:flex;align-items:center;gap:12px;padding-right:8px}
 .sl-toast-action{min-height:30px;padding:5px 10px;border-radius:999px;background:var(--sl-accent);color:var(--sl-accent-ink);
   font:inherit;font-weight:800}
-.sl-toast[data-tone="error"]{border-color:#ef4444}
+.sl-toast[data-tone="error"]{border-color:var(--sl-danger)}
 .sl-toast[data-tone="warning"]{border-color:var(--sl-accent)}
-.sl-toast[data-tone="success"]{border-color:#22c55e}
+.sl-toast[data-tone="success"]{border-color:var(--sl-success)}
 .sl-toast.on[data-tone="error"]{animation:slToastNudge .32s ease-out}
 .sl-boot{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;
   gap:10px;background:var(--sl-bg);font-size:13px;font-weight:600;color:var(--sl-muted)}
@@ -2754,7 +2800,7 @@ var CSS = (
 .sl-confirm-field{min-width:0;padding:12px 11px 10px;border-right:1px solid var(--sl-line)}
 .sl-confirm-field:last-child{border-right:0;text-align:center}
 .sl-confirm-field:nth-child(2){text-align:center}
-.sl-confirm-key{display:block;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sl-muted);font-weight:800}
+.sl-confirm-key{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sl-muted);font-weight:800}
 .sl-confirm-value{display:block;margin-top:4px;color:var(--sl-text);font-size:17px;line-height:1.1;font-weight:850;
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 /* Long venue section names must read in full: smaller type + up to two lines
@@ -2819,7 +2865,7 @@ var CSS = (
 .sl-tip-field{min-width:0;padding:6px 9px;border-right:1px solid var(--sl-line)}
 .sl-tip-field:last-child{border-right:0;text-align:center}
 .sl-tip-grid:not(.one) .sl-tip-field:nth-child(2){text-align:center}
-.sl-tip-key{display:block;font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sl-muted);font-weight:800}
+.sl-tip-key{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--sl-muted);font-weight:800}
 .sl-tip-val{display:block;margin-top:2px;color:var(--sl-text);font-size:13px;line-height:1.1;font-weight:750;
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .sl-tip-cat{display:flex;align-items:center;gap:7px;padding:6px 10px;font-size:11px;
@@ -2827,7 +2873,7 @@ var CSS = (
 .sl-tip-dot{width:8px;height:8px;border-radius:50%;flex:none}
 .sl-tip-name{color:var(--sl-muted);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .sl-tip-amt{margin-left:auto;font-weight:800;color:var(--sl-text);font-variant-numeric:tabular-nums;font-size:12px}
-.sl-tip-status{padding:5px 10px 7px;font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--sl-muted)}
+.sl-tip-status{padding:5px 10px 7px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--sl-muted)}
 
 /* Best available is a first-class shortcut, not an anonymous utility row. */
 .sl-ba{position:relative;flex:none;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px;
@@ -2843,12 +2889,12 @@ var CSS = (
    the confirm popover; deliberately distinct from the accent-toned qty/go. */
 .sl-ba-premium{position:relative;z-index:1;grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:6px;
   padding:6px 12px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.02em;cursor:pointer;
-  color:#c9a24b;background:color-mix(in srgb,#e8c15a 10%,var(--sl-surface));
-  border:1px solid color-mix(in srgb,#e8c15a 34%,var(--sl-line));transition:filter .15s,background .15s,color .15s}
-.sl-ba-premium .star{font-size:12px;line-height:1;color:#e8c15a}
+  color:var(--sl-premium-deep);background:color-mix(in srgb,var(--sl-premium) 10%,var(--sl-surface));
+  border:1px solid color-mix(in srgb,var(--sl-premium) 34%,var(--sl-line));transition:filter .15s,background .15s,color .15s}
+.sl-ba-premium .star{font-size:12px;line-height:1;color:var(--sl-premium)}
 .sl-ba-premium:hover{filter:brightness(1.05)}
-.sl-ba-premium.on{color:#1c1608;background:linear-gradient(135deg,#f0cf6b,#e0b23f);border-color:transparent;
-  box-shadow:0 6px 16px color-mix(in srgb,#e8c15a 26%,transparent)}
+.sl-ba-premium.on{color:var(--sl-premium-ink);background:linear-gradient(135deg,#f0cf6b,#e0b23f);border-color:transparent;
+  box-shadow:0 6px 16px color-mix(in srgb,var(--sl-premium) 26%,transparent)}
 .sl-ba-premium.on .star{color:#5a4410}
 .sl-ba select{background:var(--sl-surface);color:var(--sl-text);border:1px solid var(--sl-line);border-radius:8px;
   font:inherit;font-size:11px;padding:7px 8px;min-width:0;width:100%;max-width:none}
@@ -2860,7 +2906,15 @@ var CSS = (
   color:var(--sl-accent-ink);font-weight:800;font-size:12px;transition:filter .15s,opacity .15s;display:flex;align-items:center;justify-content:center;gap:6px;
   box-shadow:0 8px 18px color-mix(in srgb,var(--sl-accent) 18%,transparent)}
 .sl-picker .sl-ba-go:hover{filter:brightness(1.06)}
-.sl-picker .sl-ba-go:disabled{opacity:.62;cursor:wait}
+/* ONE disabled language, shared with the checkout CTA: surface + muted ink +
+   not-allowed. A gold button at 62% still reads as gold, and cursor:wait means
+   "working" \u2014 that pairing made a dead control look live. The wait cursor is
+   reserved for the genuinely in-flight search, which keeps its accent fill
+   via .sl-busy. */
+.sl-picker .sl-ba-go:disabled{background:var(--sl-surface);color:var(--sl-muted);cursor:not-allowed;
+  filter:none;box-shadow:none}
+.sl-picker .sl-ba-go.sl-busy:disabled{background:var(--sl-accent);color:var(--sl-accent-ink);opacity:.85;cursor:wait;
+  box-shadow:0 8px 18px color-mix(in srgb,var(--sl-accent) 18%,transparent)}
 .sl-ba-replace{grid-column:1/-1;padding:3px 0 1px}
 .sl-ba-replace b{display:block;font-size:12.5px}
 .sl-ba-replace span{display:block;margin-top:3px;color:var(--sl-muted);font-size:10.5px;line-height:1.35}
@@ -2877,6 +2931,35 @@ var CSS = (
 .sl-picker[data-layout="narrow"] .sl-ba-qty button{width:30px;height:30px}
 .sl-picker[data-layout="narrow"] .sl-ba-go{min-height:40px}
 
+/* Sales-closed is a designed state, not a set of disables: one statement in
+   the tray where the buying flow was, carrying the event's own date so the
+   buyer knows which night the verdict belongs to. Neutral like the header
+   pill \u2014 "unavailable" never wears the accent. */
+.sl-closed-note{flex:none;display:flex;flex-direction:column;gap:4px;padding:13px;border-radius:13px;
+  border:1px solid var(--sl-line);background:color-mix(in srgb,var(--sl-text) 5%,var(--sl-surface))}
+.sl-closed-note b{font-size:13px;font-weight:850}
+.sl-closed-note span{font-size:11.5px;line-height:1.45;color:var(--sl-muted)}
+.sl-closed-note .when{display:block;margin-top:2px;font-size:11.5px;font-weight:700;color:var(--sl-text)}
+
+/* 44px HIT FLOOR ON TOUCH. Visual sizes stay exactly as designed \u2014 the target
+   grows through an invisible centred pseudo-element, the same grow-the-target-
+   not-the-ink pattern the hosted event page documents for its footer links.
+   Applied only to controls with clearance around them; tightly stacked pairs
+   (the cart chip's remove/view rail) instead get real height on narrow. */
+@media (pointer:coarse){
+  .sl-zoom button,.sl-cbbtn,.sl-close,.sl-ga-qty button,.sl-ba-qty button,.sl-price-more,
+  .sl-hold-change,.sl-seccard-x,.sl-fs-pill,.sl-side-toggle{position:relative}
+  .sl-zoom button::after,.sl-cbbtn::after,.sl-close::after,.sl-ga-qty button::after,.sl-ba-qty button::after,
+  .sl-price-more::after,.sl-hold-change::after,.sl-seccard-x::after,.sl-fs-pill::after,.sl-side-toggle::after{
+    content:'';position:absolute;top:50%;left:50%;width:max(100%,44px);height:max(100%,44px);
+    transform:translate(-50%,-50%)}
+  /* The chip rail stacks remove over view in ~53px \u2014 pseudo-targets would
+     overlap and make a destructive tap ambiguous. Give the pair real height. */
+  .sl-picker[data-layout="narrow"] .sl-chip{min-height:64px}
+  .sl-picker[data-layout="narrow"] .sl-chip .rm,
+  .sl-picker[data-layout="narrow"] .sl-chip .view{min-height:32px}
+}
+
 /* screen-reader live region */
 .sl-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 
@@ -3246,8 +3329,12 @@ var CSS = (
 .sl-picker[data-layout="narrow"] .sl-minimap{display:none}
 
 /* F4 legend reflection: rows + counts for out-of-band categories read muted */
-.sl-price-row.sl-dim{opacity:.4}
-.sl-seccard-mix-item.sl-dim{opacity:.4}
+/* Out-of-band rows are exactly the rows a buyer reads while deciding whether
+   to widen a filter: whole-row opacity .4 took the label to ~2:1. Dim the
+   SWATCH and soften the numerals; the words stay legible muted ink. */
+.sl-price-row.sl-dim .sl-dot{opacity:.35}
+.sl-price-row.sl-dim .sl-price-label,.sl-price-row.sl-dim .sl-price-left,.sl-price-row.sl-dim .sl-price-amt{color:var(--sl-muted)}
+.sl-seccard-mix-item.sl-dim{opacity:.55}
 
 /* Buyer-journey motion: every animation explains a state transition (selected,
    held, checkout handoff, conflict or booked). No decorative infinite motion
@@ -3373,6 +3460,8 @@ var SeatPicker = class _SeatPicker {
     // state
     this.currency = "USD";
     this.eventTimezone = null;
+    /** The event's formatted date-time (event-zone), reused by the closed-state note. */
+    this.eventWhenText = null;
     this.offerAvailability = null;
     this.hold = null;
     /** Latest server expiry for the open hold (moves on extend). */
@@ -3479,6 +3568,9 @@ var SeatPicker = class _SeatPicker {
     this.fsEscHandler = null;
     /** Host-level event chrome owns the duplicate identity outside full screen. */
     this.eventDetailsHidden = false;
+    /** Wide-layout ticket panel collapsed (map owns the full width). */
+    this.sideCollapsed = false;
+    this.sideToggleEl = null;
     /** True once we've asked the host page to pin us fullscreen (framed, no native). */
     this.framedFs = false;
     /** Last height (px) posted to a host frame; dedupes redundant reports. */
@@ -3788,9 +3880,10 @@ var SeatPicker = class _SeatPicker {
     const active = !!document.fullscreenElement || this.fsFallback || this.framedFs;
     const hideEventDetails = this.eventDetailsHidden && !active;
     this.root?.setAttribute("data-event-details-hidden", String(hideEventDetails));
-    this.els.logo?.toggleAttribute("hidden", hideEventDetails);
-    this.els.headInfo?.toggleAttribute("hidden", hideEventDetails);
     this.els.zfs?.setAttribute("aria-pressed", String(active));
+    this.els.zfs?.setAttribute("title", active ? "Exit full screen" : "Full screen");
+    const zfsLabel = this.els.zfs?.querySelector(".sl-zfs-lbl");
+    if (zfsLabel) zfsLabel.textContent = active ? "Exit full screen" : "Full screen";
     this.view3dEl?.querySelector(".sl-view3d-fs")?.setAttribute("aria-pressed", String(active));
   }
   /**
@@ -4023,13 +4116,14 @@ var SeatPicker = class _SeatPicker {
         <div class="sl-map">
           <div class="sl-map-host" data-ref="map"></div>
           <div class="sl-zoom" data-ref="zoom">
-            <button type="button" aria-label="Zoom in" data-ref="zin">+</button>
-            <button type="button" aria-label="Zoom out" data-ref="zout">\u2212</button>
-            <button type="button" aria-label="Fit to screen" data-ref="zfit">
+            <button type="button" aria-label="Zoom in" title="Zoom in" data-ref="zin">+</button>
+            <button type="button" aria-label="Zoom out" title="Zoom out" data-ref="zout">\u2212</button>
+            <button type="button" aria-label="Fit to screen" title="Fit to screen" data-ref="zfit">
               <svg viewBox="0 0 24 24"><path d="M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
             </button>
-            <button type="button" aria-label="Full screen" aria-pressed="false" data-ref="zfs">
+            <button type="button" aria-label="Full screen" title="Full screen" aria-pressed="false" data-ref="zfs">
               <svg viewBox="0 0 24 24"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
+              <span class="sl-zfs-lbl" aria-hidden="true">Full screen</span>
             </button>
           </div>
           <div class="sl-boot" data-ref="boot"><span class="sl-boot-spin"></span>Loading seat map\u2026</div>
@@ -4193,17 +4287,18 @@ var SeatPicker = class _SeatPicker {
       badge.className = "sl-testbadge";
       badge.textContent = t2("picker.testMode");
       badge.setAttribute("aria-label", t2("picker.testMode"));
-      this.els.map.appendChild(badge);
+      this.regions["top-left"].appendChild(badge);
     }
     const chartTheme = this.controller.doc?.theme;
     Object.entries(resolveTokens(chartTheme, this.opts.theme)).forEach(([k, v]) => root.style.setProperty(k, v));
     this.currency = info.currency ?? this.opts.currency ?? "USD";
     this.eventTimezone = info.timezone ?? null;
-    const logoUrl = this.opts.theme?.logoUrl ?? chartTheme?.logoUrl;
+    const logoUrl = this.opts.theme?.logoUrl ?? chartTheme?.logoUrl ?? info.posterUrl ?? null;
     if (logoUrl) this.els.logo.innerHTML = `<img src="${logoUrl}" alt="">`;
     else this.els.logo.textContent = (this.opts.theme?.brandName ?? chartTheme?.brandName ?? info.eventName ?? "?").slice(0, 1).toUpperCase();
     this.els.name.textContent = info.eventName ?? "";
     const when = info.startsAt ? formatWhen(info.startsAt, info.timezone ?? null, this.opts.locale) : "";
+    this.eventWhenText = when || null;
     this.els.meta.textContent = [info.venue, when].filter(Boolean).join(" \xB7 ");
     this.buildBadge(chartTheme);
     const present = /* @__PURE__ */ new Set();
@@ -4294,6 +4389,8 @@ var SeatPicker = class _SeatPicker {
     this.buildExtendPrompt();
     this.buildBookedOverlay();
     this.buildSoldoutOverlay();
+    this.buildPanelToggle();
+    if (this.opts.panelCollapsed) this.setPanelCollapsed(true);
     this.dockLayoutChrome();
     await this.restoreRememberedHold();
     if (this.destroyed) return this;
@@ -4340,8 +4437,63 @@ var SeatPicker = class _SeatPicker {
    * re-render the section card in the form the layout wants (docked card/pill
    * on wide, sheet strip on narrow). Runs on every layout flip + once post-render.
    */
+  /**
+   * The wide-layout panel toggle: a labelled pill in the top-right region
+   * beside Map|3D. Collapsing gives the map the panel's 300px; the pill's own
+   * label is the way back ("Tickets"), and syncTray reopens the panel when the
+   * first seat lands so the checkout can never be hidden behind a collapse.
+   */
+  buildPanelToggle() {
+    if (!this.regions["top-right"]) return;
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "sl-side-toggle";
+    btn.addEventListener("click", () => this.setPanelCollapsed(!this.sideCollapsed));
+    this.sideToggleEl = btn;
+    this.regions["top-right"].appendChild(btn);
+    this.syncPanelToggle();
+  }
+  syncPanelToggle() {
+    const btn = this.sideToggleEl;
+    if (!btn) return;
+    const collapsed = this.sideCollapsed;
+    btn.setAttribute("aria-expanded", String(!collapsed));
+    btn.setAttribute("aria-label", collapsed ? "Show the ticket panel" : "Hide the ticket panel");
+    btn.innerHTML = collapsed ? '<svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg><span>Tickets</span>' : '<svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg><span>Hide panel</span>';
+  }
+  /**
+   * Collapse or reopen the wide-layout ticket panel in place (host-drivable —
+   * a map-first embed can mount collapsed via `panelCollapsed` and reopen on
+   * its own cue). Inert while collapsed so a keyboard buyer cannot tab into a
+   * zero-width panel; narrow layouts ignore the state entirely (the sheet is
+   * already the collapse) but keep it for the next flip back to wide.
+   */
+  setPanelCollapsed(collapsed) {
+    if (this.destroyed) return;
+    this.sideCollapsed = collapsed;
+    this.applyPanelCollapsed();
+    this.scheduleMotion(() => this.controller.zoomToFit(), 340);
+  }
+  /** Idempotent DOM apply, also run on every layout flip (inert must lift on narrow). */
+  applyPanelCollapsed() {
+    const wide = this.root?.dataset.layout !== "narrow";
+    this.root?.setAttribute("data-side-collapsed", String(this.sideCollapsed));
+    this.els.side?.toggleAttribute("inert", this.sideCollapsed && wide);
+    this.syncPanelToggle();
+  }
   dockLayoutChrome() {
     const narrow = this.root?.dataset.layout === "narrow";
+    this.applyPanelCollapsed();
+    const zfs = this.els.zfs;
+    if (zfs) {
+      if (narrow && this.regions["top-right"]) {
+        zfs.classList.add("sl-fs-pill");
+        this.regions["top-right"].appendChild(zfs);
+      } else if (!narrow && this.els.zoom && zfs.parentElement !== this.els.zoom) {
+        zfs.classList.remove("sl-fs-pill");
+        this.els.zoom.appendChild(zfs);
+      }
+    }
     const filters = this.els.filters;
     if (filters) {
       if (this.cbEl) this.els.zoom?.appendChild(this.cbEl);
@@ -4444,6 +4596,9 @@ var SeatPicker = class _SeatPicker {
       text.textContent = this.tf("picker.salesClosedPill", "Sales are closed");
     }
     this.root?.setAttribute("data-sales-closed", String(this.salesClosed));
+    if (this.salesClosed && this.srEl) {
+      this.srEl.textContent = this.tf("picker.salesClosedToast", "Sales are closed for this event.");
+    }
     this.syncCta();
     this.syncTray();
   }
@@ -5289,6 +5444,8 @@ var SeatPicker = class _SeatPicker {
     this.confirmEl = null;
     this.confirmSeat = seat;
     this.root?.setAttribute("data-confirming", "true");
+    this.els.side?.toggleAttribute("inert", true);
+    Object.values(this.regions).forEach((region) => region.toggleAttribute("inert", true));
     this.controller.setSelectionFocus(seat.id);
     if (previousId && previousId !== seat.id) this.controller.deselect([previousId]);
     if (this.tipEl) this.tipEl.style.display = "none";
@@ -5310,7 +5467,6 @@ var SeatPicker = class _SeatPicker {
     const el = document.createElement("div");
     el.className = "sl-confirm";
     el.setAttribute("role", "dialog");
-    el.setAttribute("aria-modal", "true");
     el.setAttribute("aria-label", `Confirm seat ${seat.label}`);
     el.style.setProperty("--sl-cat", cat?.color ?? "#6e7bff");
     el.innerHTML = `<div class="sl-confirm-grid">` + identityFields + `</div><div class="sl-confirm-cat"><span class="sl-dot" style="background:${cat?.color ?? "#6e7bff"}"></span><span class="sl-confirm-cat-name">${safe(details?.categoryLabel ?? cat?.label ?? seat.categoryKey)}</span>` + (price != null ? `<span class="sl-confirm-price">${this.money(price)}</span>` : "") + `</div><div class="sl-confirm-body">` + this.wheelchairConfirmHtml(details?.wheelchairSpaceType) + this.commercialConfirmHtml(seat.commercial) + (this.seatViewEnabled() && this.buyerView !== "venue3d" ? this.confirmThumbHtml(seat) : "") + (this.buyerView === "venue3d" ? `${this.seatConfidenceConfirmHtml(seat, `${details?.displayLabel ?? seat.displayLabel ?? seat.label} \xB7 ${price == null ? this.tf("picker.priceNotSupplied", "Price not supplied") : this.money(price)}`)}<div class="sl-confirm-inspect-row">${this.view3dCompareConfirmHtml(seat)}${this.see3dConfirmHtml()}</div>` : this.see3dConfirmHtml()) + `<div class="sl-confirm-row"><button type="button" class="sl-confirm-cancel">Cancel</button><button type="button" class="sl-confirm-add"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4 4L19 7"/></svg>Select</button></div></div>`;
@@ -5365,6 +5521,8 @@ var SeatPicker = class _SeatPicker {
     this.confirmEl = null;
     this.confirmSeat = null;
     this.root?.removeAttribute("data-confirming");
+    Object.values(this.regions).forEach((region) => region.toggleAttribute("inert", false));
+    this.applyPanelCollapsed();
     this.controller.setSelectionFocus(null);
   }
   commitConfirm() {
@@ -5803,19 +5961,24 @@ var SeatPicker = class _SeatPicker {
     const heldItems = this.hold?.items ?? [];
     const parts = [];
     const nextTrayKeys = /* @__PURE__ */ new Set();
-    if (!seats.length && !heldItems.length && !gaAreas.length) {
+    if (this.salesClosed && !seats.length && !heldItems.length) {
+      const closedWhen = this.eventWhenText ? `<span class="when">${String(this.eventWhenText).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c])}</span>` : "";
+      parts.push(
+        `<div class="sl-closed-note" role="status"><b>${this.tf("picker.salesClosedPill", "Sales are closed")}</b><span>${this.tf("picker.salesClosedCopy", "Ticket sales for this event have ended.")}${closedWhen}</span></div>`
+      );
+    } else if (!seats.length && !heldItems.length && !gaAreas.length) {
       parts.push(`<div class="sl-tray-hint">Tap a seat on the map, or let us pick the best available for you.</div>`);
     } else if (!seats.length && !heldItems.length) {
       parts.push(`<div class="sl-tray-hint">Tap a seat on the map \u2014 or grab standing tickets below.</div>`);
     }
     const noPicks = !seats.length && !heldItems.length && !this.pendingGACount();
-    if (!this.hold && (noPicks || this.bestAvailableBusy || this.bestAvailableConfirm)) {
+    if (!this.salesClosed && !this.hold && (noPicks || this.bestAvailableBusy || this.bestAvailableConfirm)) {
       const cats = this.controller.doc?.categories ?? [];
       const zones = this.controller.getBestAvailableZones();
       if (this.baZone && !zones.some((zone) => zone.id === this.baZone)) this.baZone = "";
       parts.push(this.bestAvailableConfirm ? `<div class="sl-ba" role="alert"><div class="sl-ba-title"><span class="spark" aria-hidden="true">\u2726</span>Replace your current choices?</div><div class="sl-ba-replace"><b>We\u2019ll find ${this.baQty} seats together.</b><span>Your manually selected tickets will be removed only after a new group is secured.</span></div><div class="sl-ba-actions"><button type="button" data-ba-cancel>Keep mine</button><button type="button" class="replace" data-ba-replace>Find new seats</button></div></div>` : `<div class="sl-ba"><div class="sl-ba-title"><span class="spark" aria-hidden="true">\u2726</span>Find the best seats together</div><div class="sl-ba-copy"><span class="wide">We\u2019ll choose the closest available group for you.</span><span class="narrow">Closest available group, chosen instantly.</span></div>` + // Premium quick-pick — present only when the chart actually has premium
       // seats (same present-only philosophy as the a11y filter chips).
-      (this.controller.hasPremiumSeats() ? `<button type="button" class="sl-ba-premium${this.baPremium ? " on" : ""}" data-ba-premium aria-pressed="${this.baPremium ? "true" : "false"}"><span class="star" aria-hidden="true">\u2605</span>${this.tf("picker.bestSeatsPremium", "Best seats")}</button>` : "") + (cats.length > 1 ? `<select aria-label="Preferred ticket type" data-ba-cat><option value="">Any ticket type</option>` + cats.map((c) => `<option value="${c.key}"${this.baCat === c.key ? " selected" : ""}>${c.label}</option>`).join("") + `</select>` : `<span aria-hidden="true"></span>`) + (zones.length ? `<select aria-label="Preferred venue zone" data-ba-zone><option value="">Any venue zone</option>` + zones.map((zone) => `<option value="${escapeOption(zone.id)}"${this.baZone === zone.id ? " selected" : ""}>${escapeOption(zone.label)}</option>`).join("") + `</select>` : "") + `<div class="sl-ba-qty"><button type="button" data-ba="-1" aria-label="Fewer seats">\u2212</button><span>${this.baQty}</span><button type="button" data-ba="1" aria-label="More seats">+</button></div><button type="button" class="sl-ba-go"${this.bestAvailableBusy ? " disabled" : ""}>` + (this.bestAvailableBusy ? `<span class="sl-ba-spin" aria-hidden="true"></span>Finding the best seats\u2026` : `Find ${this.baQty} best ${this.baQty === 1 ? "seat" : "seats"}`) + `</button></div>`);
+      (this.controller.hasPremiumSeats() ? `<button type="button" class="sl-ba-premium${this.baPremium ? " on" : ""}" data-ba-premium aria-pressed="${this.baPremium ? "true" : "false"}"><span class="star" aria-hidden="true">\u2605</span>${this.tf("picker.bestSeatsPremium", "Best seats")}</button>` : "") + (cats.length > 1 ? `<select aria-label="Preferred ticket type" data-ba-cat><option value="">Any ticket type</option>` + cats.map((c) => `<option value="${c.key}"${this.baCat === c.key ? " selected" : ""}>${c.label}</option>`).join("") + `</select>` : `<span aria-hidden="true"></span>`) + (zones.length ? `<select aria-label="Preferred venue zone" data-ba-zone><option value="">Any venue zone</option>` + zones.map((zone) => `<option value="${escapeOption(zone.id)}"${this.baZone === zone.id ? " selected" : ""}>${escapeOption(zone.label)}</option>`).join("") + `</select>` : "") + `<div class="sl-ba-qty"><button type="button" data-ba="-1" aria-label="Fewer seats">\u2212</button><span>${this.baQty}</span><button type="button" data-ba="1" aria-label="More seats">+</button></div><button type="button" class="sl-ba-go${this.bestAvailableBusy ? " sl-busy" : ""}"${this.bestAvailableBusy ? " disabled" : ""}>` + (this.bestAvailableBusy ? `<span class="sl-ba-spin" aria-hidden="true"></span>Finding the best seats\u2026` : `Find ${this.baQty} best ${this.baQty === 1 ? "seat" : "seats"}`) + `</button></div>`);
     }
     const idGrid = (seatId, label, objectType, quantity = 1, objectId, identity) => {
       const esc = (value) => String(value ?? "\u2014").replace(/[&<>"]/g, (char) => ({
@@ -6025,11 +6188,16 @@ var SeatPicker = class _SeatPicker {
     }
     if (count !== previousCount) this.animateOnce(this.els.count, "sl-value-pop", 380);
     if (total !== previousTotal) this.animateOnce(this.els.total, "sl-value-pop", 380);
-    if (previousCount === 0 && count > 0) this.animateOnce(this.els.cta, "sl-ready", 520);
+    if (previousCount === 0 && count > 0) {
+      this.animateOnce(this.els.cta, "sl-ready", 520);
+      if (this.sideCollapsed && this.root?.dataset.layout !== "narrow") this.setPanelCollapsed(false);
+    }
     if (this.els.peek) {
       if (count) {
         const holding = !!this.hold && !pendingCount;
         this.els.peek.innerHTML = `<span>${count} ${count === 1 ? "ticket" : "tickets"} \xB7 ${this.money(total)}</span><button type="button" class="go sl-sheet-go" data-act="${holding ? "checkout" : "open"}">${this.hold ? pendingCount ? "Secure more" : "Continue" : "Review"}</button>`;
+      } else if (this.salesClosed) {
+        this.els.peek.innerHTML = `<span>${this.tf("picker.salesClosedPill", "Sales are closed")}</span>`;
       } else {
         const prices = (this.controller.doc?.categories ?? []).map((c) => this.catPrice(c)).filter((p) => p != null);
         this.els.peek.innerHTML = (prices.length ? `<span>From ${this.money(Math.min(...prices))}</span>` : "<span>Pick your seats</span>") + `<button type="button" class="go sl-sheet-go" data-act="open">\u2726 Best seats</button>`;
@@ -7485,6 +7653,7 @@ var SeatPicker = class _SeatPicker {
     const button = this.els.tray?.querySelector(".sl-ba-go");
     if (button) {
       button.disabled = true;
+      button.classList.add("sl-busy");
       button.innerHTML = '<span class="sl-ba-spin" aria-hidden="true"></span>Finding\u2026';
     }
     try {