@coras-io/embed 0.2.0 → 0.4.0

package/dist/components/order-confirmation/order-confirmation-item/order-confirmation-item.styles.js

@@ -24,6 +24,15 @@ export default css `
     );
     --order-confirmation-item-value-line-height: var(--coras-font-size-xl);
     --order-confirmation-item-value-color: var(--coras-color-text);
+    /* The .caption rule consumed these four without anyone declaring them, so
+       every property computed to unset and the caption inherited its parent's
+       type. Same metrics as a label, muted, which is what a caption is. */
+    --order-confirmation-item-caption-font-size: var(--coras-font-size-sm);
+    --order-confirmation-item-caption-font-weight: var(
+      --coras-font-weight-normal
+    );
+    --order-confirmation-item-caption-line-height: var(--coras-font-size-xl);
+    --order-confirmation-item-caption-color: var(--coras-color-text-muted);
 
     --divider: 1px solid var(--order-confirmation-item-divider-color);
     display: flex;

package/dist/components/order-confirmation/order-confirmation.component.js

@@ -18,11 +18,12 @@ let CorasOrderConfirmation = class CorasOrderConfirmation extends LitElement {
     }
     static { this.styles = styles; }
     get orderReference() {
-        return msg(html `Order reference <strong>${this.reference}</strong>`);
+        const reference = html `<strong>${this.reference}</strong>`;
+        return msg(html `Order reference ${reference}`);
     }
     get sendMailConfirmation() {
-        return msg(html `We've sent your order confirmation to
-        <strong>${this.email}</strong>`);
+        const email = html `<strong>${this.email}</strong>`;
+        return msg(html `We've sent your order confirmation to ${email}`);
     }
     get helpMessage() {
         // TODO: Add link to Help Centre

package/dist/components/order-confirmation/order-confirmation.styles.js

@@ -6,7 +6,7 @@ export default css `
   :host {
     width: 100%;
 
-    --order-confirmation-border-color: var(--coras-color-secondary-500);
+    --order-confirmation-border-color: var(--coras-color-secondary);
     --order-confirmation-border-radius: var(--coras-radius-sm);
     --order-confirmation-title-font-size: var(--coras-font-size-2xl);
     --order-confirmation-title-font-weight: var(--coras-font-weight-semibold);

package/dist/components/otp/otp.styles.js

@@ -4,14 +4,14 @@ export default css `
     --otp-size: 3.2rem;
     --otp-gap: 0.75rem;
     --otp-radius: var(--coras-radius-md, 0.75rem);
-    --otp-border-color: var(--coras-color-neutral-400);
-    --otp-border-color-focus: var(--coras-color-primary-400);
-    --otp-border-color-error: var(--coras-color-error-500);
+    --otp-border-color: var(--coras-color-field-border);
+    --otp-border-color-focus: var(--coras-color-primary);
+    --otp-border-color-error: var(--coras-color-error);
     --otp-bg: var(
       --coras-input-field-background-color,
       var(--coras-palette-white)
     );
-    --otp-shadow-focus: 0 0 0 2px var(--coras-color-primary-100);
+    --otp-shadow-focus: 0 0 0 2px var(--coras-color-primary-tint);
     --otp-font-size: var(--coras-font-size-xl);
     display: block;
     font-family: var(--coras-font-family-sans, ui-sans-serif, system-ui);
@@ -76,12 +76,12 @@ export default css `
   }
 
   .help {
-    color: var(--coras-color-text-secondary);
+    color: var(--coras-color-text-muted);
     font-size: var(--coras-font-size-sm);
   }
 
   .error {
-    color: var(--coras-color-error-500);
+    color: var(--coras-color-error);
     font-size: var(--coras-font-size-sm);
   }
 `;

package/dist/components/overlay/overlay.styles.js

@@ -10,7 +10,11 @@ export default css `
     right: 0;
     bottom: 0;
     left: 0;
-    background-color: color-mix(in srgb, black, transparent 50%);
+    background-color: color-mix(
+      in srgb,
+      var(--coras-color-scrim) 50%,
+      transparent
+    );
     pointer-events: all;
     animation: fadeOut 0.4s both;
 

package/dist/components/pay-in/pay-in.styles.js

@@ -14,10 +14,10 @@ export default css `
     --pay-in-height: 48px;
     --pay-in-action-color: var(--coras-color-text);
     --pay-in-button-color: var(--coras-color-text);
-    --pay-in-pay-button-background: var(--coras-color-primary-200);
+    --pay-in-pay-button-background: var(--coras-color-primary-tint);
     --pay-in-earn-button-background: color-mix(
       in srgb,
-      var(--coras-palette-pink-500),
+      var(--coras-color-secondary),
       white 86%
     );
   }

package/dist/components/payment-fiat-method/payment-fiat-method.styles.js

@@ -15,24 +15,40 @@ export default css `
     padding: 0.5rem;
     border: 1px solid var(--coras-color-neutral-400);
     border-radius: var(--coras-radius-xs);
-    background-color: var(--coras-color-surface);
+    /* A selection chip, so it fills from the field colour rather than the card
+       colour, which is reserved for cards. */
+    background-color: var(--coras-color-field);
     transition: all 0.2s ease;
 
     &.checked {
-      border-color: var(--coras-color-primary-500);
-      background-color: var(--coras-color-primary-100);
+      border-color: var(--coras-color-primary);
+      background-color: var(--coras-color-primary-tint);
       box-shadow: var(--coras-shadow-md);
     }
   }
 
+  /* Height of the mark's visible plate, which is what the eye lines up on.
+     The official Apple and Google marks have different plate aspect ratios,
+     so they are matched on plate height rather than overall image size. */
   .icon {
+    --payment-mark-plate-height: 22px;
+
     display: flex;
     align-items: center;
     justify-content: center;
 
+    /* The Google mark and our matching card mark share a 1094x742 canvas
+       whose plate is 400 tall, hence the 742/400 correction. The .card class
+       is the base class on every chip, so it cannot select the card type. */
     img {
-      height: 21px;
+      height: calc(var(--payment-mark-plate-height) * 742 / 400);
       object-fit: contain;
     }
   }
+
+  /* The Apple mark's plate fills its whole canvas, so image height is plate
+     height directly. */
+  .apple-pay .icon img {
+    height: var(--payment-mark-plate-height);
+  }
 `;

package/dist/components/payment-option/payment-option.styles.js

@@ -13,23 +13,22 @@ export default css `
     --payment-option-button-border-radius: 24px;
     --payment-option-padding: 1rem;
     --payment-option-border-width: 2px;
-    --payment-option-border-color: var(--coras-color-primary-200);
-    --payment-option-checked-border-color: var(--coras-palette-pink-500);
-    --payment-option-background: var(--coras-color-surface);
+    --payment-option-border-color: var(--coras-color-card-border);
+    --payment-option-checked-border-color: var(--coras-color-secondary);
+    --payment-option-background: var(--coras-color-card);
     --payment-option-title-color: var(--coras-color-text);
     --payment-option-price-color: var(--coras-color-text);
     --payment-option-button-color: var(--coras-color-neutral-50);
-    --payment-option-button-background: var(--coras-color-info-900);
+    --payment-option-button-background: var(--coras-color-info);
     --payment-option-radio-size: 1.25rem;
     --payment-option-radio-border-width: 2px;
     --payment-option-radio-border-color: var(--coras-color-neutral-400);
-    --payment-option-radio-checked-border-color: var(--coras-palette-pink-500);
+    --payment-option-radio-checked-border-color: var(--coras-color-secondary);
     --payment-option-radio-checked-inner-size: 12px;
     --payment-option-icon-size: 1.25rem;
-    --payment-option-icon-background: var(--coras-color-info-900);
-    --payment-option-icon-color: var(--coras-color-info-500);
+    --payment-option-icon-background: var(--coras-color-info);
+    --payment-option-icon-color: var(--coras-color-info);
 
-    /* Disabled tokens */
     --payment-option-disabled-border-color: var(--coras-color-neutral-300);
     --payment-option-disabled-title-color: var(--coras-color-neutral-500);
     --payment-option-disabled-price-color: var(--coras-color-neutral-600);
@@ -62,15 +61,15 @@ export default css `
       border-color: var(--payment-option-checked-border-color);
       background: linear-gradient(
         to bottom,
-        color-mix(in srgb, var(--coras-palette-pink-500), white 96%),
-        color-mix(in srgb, var(--coras-palette-pink-500), white 92%)
+        var(--coras-color-secondary-tint),
+        var(--coras-color-secondary-tint)
       );
     }
 
     &.disabled {
       pointer-events: none;
       border-color: var(--coras-color-neutral-300);
-      background: var(--coras-color-surface);
+      background: var(--coras-color-card);
     }
   }
 
@@ -108,7 +107,6 @@ export default css `
     background-color: var(--payment-option-radio-checked-border-color);
   }
 
-  /* Disabled look */
   .disabled .title,
   :host([disabled]) .title {
     color: var(--coras-color-neutral-500);

package/dist/components/performance-time/performance-time.styles.js

@@ -11,12 +11,12 @@ export default css `
     --performance-time-padding-block: 36px;
 
     --performance-time-font-size: var(--coras-font-size-base);
-    --performance-time-background-color: var(--coras-color-surface);
+    --performance-time-background-color: var(--coras-color-field);
     --performance-time-color: var(--coras-color-text);
     --performance-time-border-color: var(--coras-color-neutral-600);
     --performance-time-border-radius: var(--coras-radius-md);
     --performance-time-font-weight: var(--coras-font-weight-normal);
-    --performance-time-background-color-hover: var(--coras-color-surface-hover);
+    --performance-time-background-color-hover: var(--coras-color-field-hover);
   }
 
   button {

package/dist/components/phone-country-code/phone-country-code.styles.js

@@ -18,7 +18,7 @@ export default css `
       padding: 12px 16px;
 
       &:hover {
-        background-color: var(--coras-color-surface-hover);
+        background-color: var(--coras-color-menu-hover);
       }
 
       > div {

package/dist/components/points/points.styles.js

@@ -4,7 +4,7 @@ export default css `
   ${component}
 
   :host {
-    --points-background-color: var(--coras-color-success-50);
+    --points-background-color: var(--coras-color-success-background);
     --points-font-size: var(--coras-font-size-base);
     --points-font-weight: var(--coras-font-weight-semibold);
     --points-font-color: var(--coras-color-text);

package/dist/components/search-button/search-button.styles.js

@@ -6,15 +6,23 @@ export default css `
   :host {
     --search-button-font-size: var(--coras-font-size-base);
     --search-button-font-weight: var(--coras-font-weight-normal);
-    --search-button-background-color: var(--coras-color-surface);
-    --search-button-color: var(--coras-color-text-secondary);
-    --search-button-border-color: var(--coras-color-neutral-300);
-    --search-button-border-radius: var(--coras-radius-lg);
-    --search-button-background-color-hover: var(--coras-color-primary-200);
-    --search-button-background-color-active: var(--coras-color-primary-100);
+    --search-button-background-color: var(--coras-color-field);
+    --search-button-color: var(--coras-color-text-muted);
+    --search-button-border-color: var(--coras-color-field-border);
+    --search-button-border-radius: var(--coras-radius-search);
+    --search-button-background-color-hover: color-mix(
+      in srgb,
+      var(--coras-color-field),
+      var(--coras-state-overlay) var(--coras-state-hover)
+    );
+    --search-button-background-color-active: color-mix(
+      in srgb,
+      var(--coras-color-field),
+      var(--coras-state-overlay) var(--coras-state-active)
+    );
     --search-button-border-color-disabled: var(--coras-color-neutral-400);
     --search-button-color-disabled: var(--coras-color-neutral-400);
-    --search-button-icon-color: var(--coras-color-text-secondary);
+    --search-button-icon-color: var(--coras-color-text-muted);
   }
 
   button {

package/dist/components/seated-selector/seated-selector.component.d.ts

@@ -20,6 +20,7 @@ export declare class CorasSeatedSelector extends LitElement {
     private selectionValid;
     private violations;
     private reserved;
+    private sheetExpanded;
     private fallbackFired;
     private seatsTask;
     private chartDataCache;
@@ -31,6 +32,7 @@ export declare class CorasSeatedSelector extends LitElement {
     private seatLabelFor;
     private handleObjectSelected;
     private handleObjectDeselected;
+    private toggleSheet;
     reservationCreated(): void;
     private handleSelectionValid;
     private handleSelectionInvalid;

package/dist/components/seated-selector/seated-selector.component.js

@@ -49,6 +49,10 @@ let CorasSeatedSelector = class CorasSeatedSelector extends LitElement {
         // it stops covering the basket that opens on top of it - until the shopper
         // changes their selection, which reopens the bar for another go.
         this.reserved = false;
+        // On small screens the summary bar acts as a bottom sheet: collapsed to a
+        // seat-count-and-total handle, expanded to the full breakdown on tap. Ignored
+        // on wider screens, where the breakdown always shows.
+        this.sheetExpanded = false;
         this.fallbackFired = false;
         this.seatsTask = new Task(this, {
             task: async ([client, attractionId, instanceId, locale, distributorID, currency,]) => {
@@ -91,8 +95,14 @@ let CorasSeatedSelector = class CorasSeatedSelector extends LitElement {
             fireInternalEvent(this, "seats-unavailable", {});
         };
         this.handleObjectSelected = (event) => {
-            this.reserved = false;
             const { label } = event.detail;
+            // Ignore any seat the current availability data doesn't know about (e.g. one
+            // a stale seats.io session restored after it was already booked), otherwise
+            // it enters the selection priced at 0 and the reservation fails.
+            if (this.chartData && !(label in this.chartData.availableSeats)) {
+                return;
+            }
+            this.reserved = false;
             if (!this.selectedSeats.some((seat) => seat.id === label)) {
                 this.selectedSeats = [
                     ...this.selectedSeats,
@@ -105,6 +115,9 @@ let CorasSeatedSelector = class CorasSeatedSelector extends LitElement {
             const { label } = event.detail;
             this.selectedSeats = this.selectedSeats.filter((seat) => seat.id !== label);
         };
+        this.toggleSheet = () => {
+            this.sheetExpanded = !this.sheetExpanded;
+        };
         this.handleSelectionValid = () => {
             this.selectionValid = true;
             this.violations = [];
@@ -207,23 +220,50 @@ let CorasSeatedSelector = class CorasSeatedSelector extends LitElement {
         if (!data || this.selectedSeats.length === 0 || this.reserved) {
             return nothing;
         }
-        const { groups, total } = buildSelectionSummary(this.selectedSeats, data.availableSeats, data.flatPriceBands, data.categories);
+        const { groups, fees, total } = buildSelectionSummary(this.selectedSeats, data.availableSeats, data.flatPriceBands, data.categories);
+        const seatCount = this.selectedSeats.length;
         return html `
-      <div class="drawer" part="drawer">
+      <div class="drawer" part="drawer" data-expanded=${this.sheetExpanded}>
         <div class="drawer-inner">
-          <div class="drawer-summary">
-            <p class="drawer-total">
-              ${msg("Total")} ${this.formatPrice(total)}
-            </p>
-            ${map(groups, (group) => html `
+          <button
+            type="button"
+            class="sheet-handle"
+            aria-expanded=${this.sheetExpanded}
+            aria-controls="drawer-summary"
+            @click=${this.toggleSheet}
+          >
+            <span class="sheet-handle-label">
+              ${msg(str `${seatCount} seats selected`)}
+            </span>
+            <span class="sheet-handle-total">${this.formatPrice(total)}</span>
+            <span class="sheet-chevron" aria-hidden="true"></span>
+          </button>
+
+          <div class="drawer-summary" id="drawer-summary">
+            ${map(groups, (group) => {
+            const ticketLabel = `${group.count} ${group.label}`;
+            const seatList = group.seatLabels.join(", ");
+            const unitPrice = this.formatPrice(group.unitPrice);
+            return html `
                 <p class="drawer-group">
                   <span
                     class="drawer-dot"
                     style="background:${group.color}"
                   ></span>
-                  ${msg(str `${group.count} ${group.label} Tickets : ${group.seatLabels.join(", ")} (${this.formatPrice(group.unitPrice)} each)`)}
+                  ${msg(str `${ticketLabel} Tickets : ${seatList} (${unitPrice} each)`)}
                 </p>
-              `)}
+              `;
+        })}
+            ${fees > 0
+            ? html `
+                  <p class="drawer-fee">
+                    ${msg(str `Booking fee ${this.formatPrice(fees)}`)}
+                  </p>
+                `
+            : nothing}
+            <p class="drawer-total">
+              ${msg("Total")} ${this.formatPrice(total)}
+            </p>
           </div>
 
           <coras-button
@@ -326,6 +366,9 @@ __decorate([
 __decorate([
     state()
 ], CorasSeatedSelector.prototype, "reserved", void 0);
+__decorate([
+    state()
+], CorasSeatedSelector.prototype, "sheetExpanded", void 0);
 CorasSeatedSelector = __decorate([
     localized()
 ], CorasSeatedSelector);

package/dist/components/seated-selector/seated-selector.styles.js

@@ -4,9 +4,12 @@ export default css `
   ${component}
 
   :host {
+    --coras-seated-max-width: 720px;
+
     display: flex;
     flex-direction: column;
-    gap: var(--coras-spacing-md, 16px);
+    gap: 1rem;
+    max-width: var(--coras-seated-max-width);
   }
 
   .heading {
@@ -36,20 +39,18 @@ export default css `
     justify-content: center;
     box-sizing: border-box;
     padding: 24px clamp(16px, 4vw, 48px);
-    background: var(--coras-color-background, #fcfcff);
-    border-top: 1px solid var(--coras-color-neutral-200, #e6e6e6);
-    box-shadow: 1px -4px 8px 4px rgba(0, 0, 0, 0.03);
+    background: var(--coras-color-background);
+    border-top: 1px solid var(--coras-color-divider);
+    box-shadow: var(--coras-shadow-top);
   }
 
-  /* Cap the content width and centre it so the summary and the button stay
-     close together on wide screens instead of hugging opposite edges. */
   .drawer-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
     width: 100%;
-    max-width: 720px;
+    max-width: var(--coras-seated-max-width);
   }
 
   .drawer-summary {
@@ -59,13 +60,6 @@ export default css `
     min-width: 0;
   }
 
-  .drawer-total {
-    margin: 0;
-    color: var(--coras-color-text);
-    font-size: var(--coras-font-size-base);
-    font-weight: var(--coras-font-weight-medium);
-  }
-
   .drawer-group {
     display: flex;
     align-items: center;
@@ -82,6 +76,25 @@ export default css `
     border-radius: 50%;
   }
 
+  .drawer-fee {
+    margin: 0;
+    color: var(--coras-color-text-muted);
+    font-size: var(--coras-font-size-sm);
+  }
+
+  .drawer-total {
+    margin: 4px 0 0;
+    padding-top: 8px;
+    border-top: 1px solid var(--coras-color-divider);
+    color: var(--coras-color-text);
+    font-size: var(--coras-font-size-base);
+    font-weight: var(--coras-font-weight-medium);
+  }
+
+  .sheet-handle {
+    display: none;
+  }
+
   @media (max-width: 600px) {
     .drawer {
       padding: 16px;
@@ -92,5 +105,55 @@ export default css `
       align-items: stretch;
       gap: 12px;
     }
+
+    .sheet-handle {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      padding: 0;
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: var(--coras-color-text);
+      font: inherit;
+      text-align: start;
+    }
+
+    .sheet-handle-label {
+      font-size: var(--coras-font-size-sm);
+    }
+
+    .sheet-handle-total {
+      margin-inline-start: auto;
+      font-size: var(--coras-font-size-base);
+      font-weight: var(--coras-font-weight-medium);
+    }
+
+    .sheet-chevron {
+      flex-shrink: 0;
+      width: 8px;
+      height: 8px;
+      border-right: 2px solid currentColor;
+      border-bottom: 2px solid currentColor;
+      transform: rotate(-135deg);
+      transition: transform 0.15s ease;
+    }
+
+    .drawer[data-expanded="true"] .sheet-chevron {
+      transform: rotate(45deg);
+    }
+
+    .drawer-summary {
+      display: none;
+    }
+
+    .drawer[data-expanded="true"] .drawer-summary {
+      display: flex;
+    }
+
+    .drawer-total {
+      display: none;
+    }
   }
 `;

package/dist/components/seats-io/seats-io.component.d.ts

@@ -15,6 +15,8 @@ export declare class CorasSeatsIO extends LitElement {
     maxSelectedObjects: number;
     private container;
     private seatsioInstance;
+    private readonly colorScheme;
+    private renderedScheme;
     private eventsCallbacks;
     private getConfig;
     private loadSeatsio;

package/dist/components/seats-io/seats-io.component.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement, } from "lit";
 import { property, query } from "lit/decorators.js";
 import { fireInternalEvent } from "../../core/events.js";
+import { ColorSchemeController } from "../../core/color-scheme.js";
 import { convertToLocaleCurrency } from "../../core/currency/index.js";
 import { SEATS_IO_DEFAULTS } from "./seats-io.constants.js";
 import styles from "./seats-io.styles.js";
@@ -25,6 +26,11 @@ export class CorasSeatsIO extends LitElement {
         this.selectedObjects = [];
         this.maxSelectedObjects = 0;
         this.seatsioInstance = null;
+        // The chart's dark/light styling is baked in at render time, so track the
+        // effective scheme and rebuild when it flips (the controller requests an
+        // update on both an SDK colour-scheme change and an OS preference change).
+        this.colorScheme = new ColorSchemeController(this);
+        this.renderedScheme = null;
         this.eventsCallbacks = {
             onObjectSelected: (object) => fireInternalEvent(this, "seats-io-object-selected", object),
             onObjectDeselected: (object) => fireInternalEvent(this, "seats-io-object-deselected", object),
@@ -50,6 +56,9 @@ export class CorasSeatsIO extends LitElement {
             workspaceKey: this.workspaceKey,
             event: this.event,
             language: this.language,
+            // The map inherits the embed's effective colour scheme so its background
+            // matches a dark theme instead of staying white.
+            colorScheme: this.colorScheme.scheme,
             // Prices reach seats.io as raw minor units (e.g. 3500). Format them to the
             // shopper's currency and locale so tooltips and the legend read "£35.00",
             // not "3500". A presentation-layer callback, so unlike the renderer-engine
@@ -80,7 +89,11 @@ export class CorasSeatsIO extends LitElement {
                 ? { maxSelectedObjects: this.maxSelectedObjects }
                 : {}),
             selectionValidators: [{ type: "noOrphanSeats" }],
-            session: "continue",
+            // Start a fresh hold session on every mount. "continue" restores the
+            // previous browser session, so reopening the map after a reservation
+            // re-selected seats that are no longer available - selecting them at
+            // price 0 and breaking "Add to basket".
+            session: "start",
         };
         return config;
     }
@@ -113,11 +126,21 @@ export class CorasSeatsIO extends LitElement {
     }
     async updated(changed) {
         super.updated(changed);
+        // Everything below is baked into the chart at construction, so a change to
+        // any of it needs a rebuild, not a prop update the running chart ignores.
+        // The scheme is not a Lit property (the controller drives it), so compare it
+        // against the scheme the current chart was built with.
+        const schemeChanged = this.colorScheme.scheme !== this.renderedScheme;
         if (changed.has("event") ||
             changed.has("workspaceKey") ||
             changed.has("region") ||
             changed.has("language") ||
-            changed.has("chartData")) {
+            changed.has("chartData") ||
+            changed.has("currency") ||
+            changed.has("currencyLocale") ||
+            changed.has("maxSelectedObjects") ||
+            schemeChanged) {
+            this.renderedScheme = this.colorScheme.scheme;
             try {
                 await this.getSeatsio();
                 this.seatsioInstance?.destroy();

package/dist/components/seats-io/seats-io.constants.d.ts

@@ -1,11 +1,12 @@
 export declare const SEATS_IO_DEFAULTS: {
     showRowLabels: boolean;
     showRowLines: boolean;
+    fitTo: "widthAndHeight";
     showFullScreenButton: boolean;
     legend: {
         hideNonSelectableCategories: boolean;
     };
-    objectTooltip: {
+    objectPopover: {
         showUnavailableNotice: boolean;
     };
     loading: string;

package/dist/components/seats-io/seats-io.constants.js

@@ -1,6 +1,10 @@
 export const SEATS_IO_DEFAULTS = {
     showRowLabels: true,
     showRowLines: true,
+    // Fill the container in both dimensions so the chart doesn't float in a wide
+    // margin (with the seats.io controls stranded far from the seats) on large
+    // screens. Paired with the capped map width on the seated selector.
+    fitTo: "widthAndHeight",
     // Let shoppers pop the map out to full screen; the enlarge affordance sits
     // next to seats.io's own zoom controls.
     showFullScreenButton: true,
@@ -8,7 +12,8 @@ export const SEATS_IO_DEFAULTS = {
         hideNonSelectableCategories: true,
     },
     // Show an "unavailable" note when hovering a seat that can't be picked.
-    objectTooltip: {
+    // `objectPopover` is the current key; `objectTooltip` is deprecated.
+    objectPopover: {
         showUnavailableNotice: true,
     },
     loading: " ",