@coras-io/embed 0.1.2 → 0.3.0

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

@@ -36,10 +36,13 @@ export interface SelectionGroup {
     color: string;
     seatLabels: string[];
     unitPrice: number;
+    bookingFee: number;
     count: number;
 }
 export interface SelectionSummary {
     groups: SelectionGroup[];
+    subtotal: number;
+    fees: number;
     total: number;
 }
 export interface SeatsChartData {
@@ -65,8 +68,11 @@ export declare const findPriceBand: (seatLabel: string, availableSeats: Record<s
 export declare const buildTickets: (selectedLabels: string[], availableSeats: Record<string, AvailableSeat>, flatPriceBands: FlatPriceBand[]) => TicketRequest[];
 /**
  * Groups the selected seats by price-band category for the booking drawer:
- * one row per category with its colour, seat labels, unit price (incl. fees)
- * and count, plus the order total. All amounts in minor units.
+ * one row per category with its colour, seat labels, base unit price, per-seat
+ * booking fee and count. The base unit price matches the seat tooltip on the
+ * map; the booking fee is surfaced on its own line so the shopper can reconcile
+ * the two. subtotal + fees === total, which is the fee-inclusive amount booked.
+ * All amounts in minor units.
  */
 export declare const buildSelectionSummary: (seats: SelectedSeat[], availableSeats: Record<string, AvailableSeat>, flatPriceBands: FlatPriceBand[], categories: ChartCategory[]) => SelectionSummary;
 export declare const makeIsSeatSelectable: (availableSeats: Record<string, AvailableSeat>) => (object: SelectableObject) => boolean;

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

@@ -97,12 +97,17 @@ export const buildTickets = (selectedLabels, availableSeats, flatPriceBands) =>
 };
 /**
  * Groups the selected seats by price-band category for the booking drawer:
- * one row per category with its colour, seat labels, unit price (incl. fees)
- * and count, plus the order total. All amounts in minor units.
+ * one row per category with its colour, seat labels, base unit price, per-seat
+ * booking fee and count. The base unit price matches the seat tooltip on the
+ * map; the booking fee is surfaced on its own line so the shopper can reconcile
+ * the two. subtotal + fees === total, which is the fee-inclusive amount booked.
+ * All amounts in minor units.
  */
 export const buildSelectionSummary = (seats, availableSeats, flatPriceBands, categories) => {
     const categoryByKey = new Map(categories.map((category) => [category.key, category]));
     const groups = new Map();
+    let subtotal = 0;
+    let fees = 0;
     let total = 0;
     seats.forEach((seat) => {
         const meta = availableSeats[seat.id];
@@ -110,6 +115,8 @@ export const buildSelectionSummary = (seats, availableSeats, flatPriceBands, cat
         if (!meta || !band) {
             return;
         }
+        subtotal += band.basePrice;
+        fees += band.bookingFee;
         total += band.fullPrice;
         const key = String(meta.categoryID);
         const existing = groups.get(key);
@@ -124,12 +131,13 @@ export const buildSelectionSummary = (seats, availableSeats, flatPriceBands, cat
                 label: category?.label ?? key,
                 color: category?.color ?? "",
                 seatLabels: [seat.seatLabel],
-                unitPrice: band.fullPrice,
+                unitPrice: band.basePrice,
+                bookingFee: band.bookingFee,
                 count: 1,
             });
         }
     });
-    return { groups: [...groups.values()], total };
+    return { groups: [...groups.values()], subtotal, fees, total };
 };
 const isReserved = (object) => {
     const status = "status" in object ? object.status : undefined;

package/dist/components/select-list/select-list.styles.js

@@ -19,6 +19,7 @@ export default css `
 
     & > .caption {
       padding: 0.6rem 1rem 0.9rem 1rem;
+      font-family: var(--coras-font-family-heading);
       font-weight: var(--select-list-caption-font-weight);
       font-size: var(--select-list-caption-font-size);
       color: var(--select-list-caption-icon-color);

package/dist/components/select-list/select-option/select-option.styles.js

@@ -7,9 +7,9 @@ export default css `
     --select-option-font-size: var(--coras-font-size-base);
     --select-option-line-height: var(--coras-font-size-2xl);
     --select-option-color: var(--coras-color-text);
-    --select-option-hovered-background-color: var(--coras-color-surface-hover);
-    --select-option-selected-background-color: var(--coras-color-surface-hover);
-    --select-option-check-mark-color: var(--coras-color-primary-500);
+    --select-option-hovered-background-color: var(--coras-color-menu-hover);
+    --select-option-selected-background-color: var(--coras-color-menu-hover);
+    --select-option-check-mark-color: var(--coras-color-primary);
 
     --check-mark-size: 12px;
 

package/dist/components/sort-dropdown/sort-dropdown.styles.js

@@ -5,7 +5,7 @@ export default css `
 
   :host {
     --sort-dropdown-button-icon-color: var(--coras-color-text);
-    --sort-dropdown-button-icon-color-hover: var(--coras-color-primary-700);
+    --sort-dropdown-button-icon-color-hover: var(--coras-color-primary);
   }
 
   coras-button {

package/dist/components/sort-list/sort-list.styles.js

@@ -5,7 +5,7 @@ export default css `
 
   :host {
     --sort-list-label-font-size: var(--coras-font-size-sm);
-    --sort-list-label-color: var(--coras-color-text-secondary);
+    --sort-list-label-color: var(--coras-color-text-muted);
     --sort-list-label-font-weight: var(--coras-font-weight-normal);
   }
 

package/dist/components/sport-options/sport-option/sport-option.styles.js

@@ -6,7 +6,7 @@ export default css `
   :host {
     --sport-option-color: var(--coras-color-text);
     --sport-option-shadow: var(--coras-shadow-sm);
-    --sport-option-section-border-color: var(--coras-color-neutral-200);
+    --sport-option-section-border-color: var(--coras-color-card-border);
     --sport-option-section-border-radius: var(--coras-radius-md);
     --sport-option-font-weight: var(--coras-font-weight-normal);
     --sport-option-label-font-size: var(--coras-font-size-sm);
@@ -49,7 +49,7 @@ export default css `
       border-left: none;
       border-top-right-radius: var(--sport-option-section-border-radius);
       border-bottom-right-radius: var(--sport-option-section-border-radius);
-      background-color: var(--coras-color-primary-50);
+      background-color: var(--coras-color-primary-tint);
 
       coras-button {
         margin-left: 1rem;

package/dist/components/star-rating/star-rating.component.d.ts

@@ -10,6 +10,7 @@ export declare class CorasStarRating extends LitElement {
     static styles: CSSResultGroup;
     rating: number;
     private get normalizedRating();
+    private renderStarShape;
     private renderStar;
     render(): TemplateResult<1>;
 }

package/dist/components/star-rating/star-rating.component.js

@@ -4,11 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, LitElement, } from "lit";
+import { html, LitElement, nothing, } from "lit";
 import { property } from "lit/decorators.js";
 import { range } from "lit/directives/range.js";
 import { map } from "lit/directives/map.js";
 import styles from "./star-rating.styles.js";
+const STAR_PATH = "M9 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218";
 /**
  * A component that displays a star rating.
  *
@@ -25,6 +26,17 @@ export class CorasStarRating extends LitElement {
     get normalizedRating() {
         return Math.max(0, Math.min(5, Math.round(this.rating * 2) / 2));
     }
+    renderStarShape() {
+        return html `
+      <svg
+        viewBox="0 0 18 18"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="${STAR_PATH}" />
+      </svg>
+    `;
+    }
     renderStar(index) {
         const starValue = index + 1;
         const isFull = starValue <= this.normalizedRating;
@@ -35,16 +47,12 @@ export class CorasStarRating extends LitElement {
         else if (isHalf)
             className = "star star--half";
         return html `
-      <svg
-        class="${className}"
-        viewBox="0 0 18 18"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M9 14.25l-5.584 2.936 1.066-6.218L.465 6.564l6.243-.907L9 0l2.792 5.657 6.243.907-4.517 4.404 1.066 6.218"
-        />
-      </svg>
+      <span class="${className}">
+        <span class="star-base">${this.renderStarShape()}</span>
+        ${isFull || isHalf
+            ? html `<span class="star-fill">${this.renderStarShape()}</span>`
+            : nothing}
+      </span>
     `;
     }
     render() {
@@ -54,18 +62,6 @@ export class CorasStarRating extends LitElement {
         role="img"
         aria-label="${this.normalizedRating} out of 5 stars"
       >
-        <svg width="0" height="0" style="position: absolute;">
-          <defs>
-            <linearGradient id="half-gradient">
-              <stop offset="50%" stop-color="var(--star-rating-color)" />
-              <stop
-                offset="50%"
-                stop-color="var(--star-rating-background-color)"
-              />
-            </linearGradient>
-          </defs>
-        </svg>
-
         ${map(range(5), (i) => this.renderStar(i))}
         <span class="sr-only">${this.normalizedRating} out of 5 stars</span>
       </div>

package/dist/components/star-rating/star-rating.styles.js

@@ -7,7 +7,14 @@ export default css `
     display: inline-flex;
     align-items: center;
     --star-rating-color: var(--coras-color-primary);
-    --star-rating-background-color: var(--coras-color-neutral-200);
+    /* The unearned part of the track is the rating colour faded rather than a
+       flat grey, so it reads as the same mark and composites correctly over a
+       light or a dark surface. It follows an overridden star colour too. */
+    --star-rating-background-color: color-mix(
+      in srgb,
+      var(--star-rating-color) 25%,
+      transparent
+    );
     --star-size: 1.125rem;
     --star-gap: 0.125rem;
   }
@@ -19,20 +26,39 @@ export default css `
   }
 
   .star {
+    position: relative;
+    display: block;
     width: var(--star-size);
     height: var(--star-size);
   }
 
-  .star--full {
+  .star svg {
+    display: block;
+    width: var(--star-size);
+    height: var(--star-size);
+  }
+
+  .star-base {
+    fill: var(--star-rating-background-color);
+  }
+
+  /* A paint-server reference such as url(#gradient) does not resolve from a
+     stylesheet inside a shadow root, so the coloured part of a star is a second
+     copy clipped by its container rather than a gradient fill. */
+  .star-fill {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    overflow: hidden;
     fill: var(--star-rating-color);
   }
 
-  .star--half {
-    fill: url(#half-gradient);
+  .star--full .star-fill {
+    width: 100%;
   }
 
-  .star--empty {
-    fill: var(--star-rating-background-color);
+  .star--half .star-fill {
+    width: 50%;
   }
 
   .sr-only {

package/dist/components/tab/tab.styles.js

@@ -14,7 +14,7 @@ export default css `
     --tab-font-size: var(--coras-font-size-base);
     --tab-font-weight: var(--coras-font-weight-medium);
     --tab-shadow: var(--coras-shadow-sm);
-    --tab-border-bottom-color: var(--coras-color-secondary-500);
+    --tab-border-bottom-color: var(--coras-color-secondary);
     --tab-chip-selected-background-color: var(--coras-color-primary);
     --tab-chip-font-size: var(--coras-font-size-base);
     --tab-chip-line-height: var(--coras-font-size-base);

package/dist/components/tabs/tabs.styles.js

@@ -6,7 +6,7 @@ export default css `
   :host {
     --tabs-border-bottom-color: color-mix(
       in srgb,
-      var(--coras-color-error-500),
+      var(--coras-color-error),
       transparent 96%
     );
     --tabs-gap: 0;

package/dist/components/tag/tag.styles.js

@@ -14,13 +14,13 @@ export default css `
     --tag-font-weight: var(--coras-font-weight-semibold);
 
     --tag-color-blue: var(--coras-color-text);
-    --tag-background-color-blue: var(--coras-color-primary-300);
-    --tag-color-green: var(--coras-color-success-900);
-    --tag-background-color-green: var(--coras-color-success-50);
-    --tag-color-red: var(--coras-color-error-900);
-    --tag-background-color-red: var(--coras-color-error-50);
-    --tag-color-purple: var(--coras-color-info-500);
-    --tag-background-color-purple: var(--coras-color-info-50);
+    --tag-background-color-blue: var(--coras-color-primary-tint);
+    --tag-color-green: var(--coras-color-success);
+    --tag-background-color-green: var(--coras-color-success-background);
+    --tag-color-red: var(--coras-color-error);
+    --tag-background-color-red: var(--coras-color-error-background);
+    --tag-color-purple: var(--coras-color-info);
+    --tag-background-color-purple: var(--coras-color-info-background);
   }
 
   span {

package/dist/components/text-section/text-section.styles.js

@@ -9,6 +9,7 @@ export default css `
 
   .label {
     color: var(--coras-color-text);
+    font-family: var(--coras-font-family-heading);
     font-weight: var(--coras-font-weight-semibold);
     font-size: 22px;
     line-height: 30px;
@@ -82,7 +83,7 @@ export default css `
     }
 
     ::slotted(a) {
-      color: var(--coras-color-primary-500);
+      color: var(--coras-color-link);
       text-decoration: underline;
       font-size: inherit;
     }

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

@@ -6,7 +6,6 @@ export default css `
   :host {
     display: flex;
 
-    /* Tags keep a fixed pill shape, exempt from the brand radius. */
     --time-tag-border-radius: var(--coras-radius-full);
     --time-tag-font-size: var(--coras-font-size-xs);
     --time-tag-font-weight: var(--coras-font-weight-semibold);
@@ -14,7 +13,7 @@ export default css `
 
     --time-tag-line-height: 16px;
     --time-tag-letter-spacing: 0.01em;
-    --time-tag-background-color: var(--coras-color-info-50);
+    --time-tag-background-color: var(--coras-color-info-background);
   }
 
   svg {

package/dist/components/tooltip/tooltip.styles.js

@@ -4,9 +4,9 @@ export default css `
   ${component}
 
   :host {
-    --tooltip-background-color: var(--coras-color-surface);
-    --tooltip-arrow-icon-color: var(--coras-color-primary-400);
-    --tooltip-border-color: var(--coras-color-neutral-200);
+    --tooltip-background-color: var(--coras-color-card);
+    --tooltip-arrow-icon-color: var(--coras-color-primary);
+    --tooltip-border-color: var(--coras-color-card-border);
     --tooltip-border-radius: var(--coras-radius-sm);
     --tooltip-content-shadow: var(--coras-shadow-md);
     --tooltip-font-size: var(--coras-font-size-sm);

package/dist/components/tour-ticket-type-selector/tour-ticket-type/tour-ticket-type.styles.js

@@ -17,8 +17,8 @@ export default css `
       --coras-font-weight-semibold
     );
     --tour-ticket-type-counter-value-line-height: var(--coras-font-size-2xl);
-    --tour-ticket-type-hover-background-color: var(--coras-color-surface-hover);
-    --tour-ticket-type-disabled-color: var(--coras-color-neutral-500);
+    --tour-ticket-type-hover-background-color: var(--coras-color-card-hover);
+    --tour-ticket-type-disabled-color: var(--coras-color-text-disabled);
 
     display: flex;
     flex-direction: row;

package/dist/components/tour-ticket-type-selector/tour-ticket-type-selector.component.js

@@ -31,7 +31,7 @@ export class CorasTourTicketTypeSelector extends LitElement {
         <coras-button
           slot="trigger"
           variant="outlined"
-          radius="small"
+          radius="field"
           height="md"
           border-color="light"
           expanded

package/dist/components/tour-ticket-type-selector/tour-ticket-type-selector.styles.js

@@ -9,9 +9,7 @@ export default css `
     );
     --tour-ticket-type-selector-options-border-radius: var(--coras-radius-sm);
     --tour-ticket-type-selector-options-box-shadow: var(--coras-shadow-md);
-    --tour-ticket-type-selector-open-arrow-color: var(
-      --coras-color-primary-500
-    );
+    --tour-ticket-type-selector-open-arrow-color: var(--coras-color-primary);
 
     display: inline-flex;
     max-width: 100%;
@@ -19,12 +17,6 @@ export default css `
     coras-dropdown {
       width: 100%;
     }
-
-    /* The trigger reads as a prominent text field, so it keeps a fixed field
-       radius (like the payment fields) rather than tracking the brand radius. */
-    coras-button {
-      --button-border-radius-small: var(--coras-radius-field);
-    }
   }
 
   :host #arrow {

package/dist/components/transfer-modal/transfer-modal.component.js

@@ -154,6 +154,7 @@ let CorasTransferModal = class CorasTransferModal extends LitElement {
         return msg("Verify your payment");
     }
     renderMfaContent() {
+        const phone = html `<strong>${this.maskedPhone}</strong>`;
         return html `
       <div class="mfa-state">
         <div class="payment-summary">
@@ -171,9 +172,8 @@ let CorasTransferModal = class CorasTransferModal extends LitElement {
 
         <p class="mfa-instruction">
           ${this.maskedPhone
-            ? msg(html `A verification code has been sent to
-                  <strong>${this.maskedPhone}</strong>. Enter the 6-digit code
-                  below to confirm your payment.`)
+            ? msg(html `A verification code has been sent to ${phone}. Enter the
+                6-digit code below to confirm your payment.`)
             : msg("A verification code has been sent to your registered phone number. Enter the 6-digit code below to confirm your payment.")}
         </p>
 

package/dist/components/transfer-modal/transfer-modal.styles.js

@@ -17,7 +17,7 @@ export default css `
   }
 
   .error-message {
-    background: var(--coras-color-error-surface, #fef2f2);
+    background: var(--coras-color-error-background, #fef2f2);
     color: var(--coras-color-error, #dc2626);
     padding: 0.75rem 1rem;
     border-radius: var(--coras-radius-md, 8px);
@@ -33,7 +33,7 @@ export default css `
   .loading-spinner {
     width: 40px;
     height: 40px;
-    border: 3px solid var(--coras-color-border, #e0e0e0);
+    border: 3px solid var(--coras-color-card-border, #e0e0e0);
     border-top-color: var(--coras-color-primary, #0052ff);
     border-radius: 50%;
     animation: spin 1s linear infinite;
@@ -47,17 +47,15 @@ export default css `
   }
 
   .loading-text {
-    color: var(--coras-color-text-secondary, #666666);
+    color: var(--coras-color-text-muted, #666666);
     font-size: 0.875rem;
   }
 
-  /* MFA Verification State */
   .mfa-state {
     text-align: center;
     padding: 0.5rem 0;
   }
 
-  /* Payment summary block */
   .payment-summary {
     margin-bottom: 1rem;
   }
@@ -79,7 +77,7 @@ export default css `
   }
 
   .mfa-instruction {
-    color: var(--coras-color-text-secondary, #666666);
+    color: var(--coras-color-text-muted, #666666);
     font-size: 0.875rem;
     line-height: 1.5;
     margin-bottom: 1.5rem;
@@ -102,7 +100,7 @@ export default css `
 
   .mfa-disclaimer {
     font-size: 0.75rem;
-    color: var(--coras-color-text-secondary, #666666);
+    color: var(--coras-color-text-muted, #666666);
     line-height: 1.4;
     margin-top: 1rem;
     margin-bottom: 0;
@@ -131,7 +129,7 @@ export default css `
   }
 
   .resend-link:hover {
-    color: var(--coras-color-primary-hover, #0040cc);
+    color: var(--coras-color-main-button-hover, #0040cc);
   }
 
   .resend-link:disabled {

package/dist/containers/basket/basket.component.d.ts

@@ -19,7 +19,7 @@ export declare class CorasBasket extends LitElement {
     private handleRemoveItem;
     private renderCheckoutButton;
     private renderTickets;
-    private getSeatInfo;
+    private getSeatDetails;
     private renderBasketItems;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/containers/basket/basket.component.js

@@ -17,7 +17,7 @@ import "../../contexts/basket/basket.js";
 import { basketContext } from "../../contexts/basket/basket.context.js";
 import { property } from "lit/decorators.js";
 import { currencyContext, localeContext, assetsURLContext, } from "../../contexts/properties.context.js";
-import { localized, msg } from "@lit/localize";
+import { localized, msg, str } from "@lit/localize";
 import { convertToLocaleCurrency } from "../../core/currency/index.js";
 import { formatDateTimeForDisplay, formatTimeForDisplay, } from "../../core/utils/datetime.js";
 let CorasBasket = class CorasBasket extends LitElement {
@@ -102,7 +102,12 @@ let CorasBasket = class CorasBasket extends LitElement {
       ${Array.from(ticketGroups.values()).map((group) => {
             const ticket = group.ticket;
             const ticketCount = group.count;
-            const ticketName = ticket.name || msg("Ticket");
+            // Label by price type ("Adult", "Infant", …) - that's what the
+            // breakdown shows. `name` is a mostly-empty generic label that falls
+            // back to "Ticket".
+            const ticketName = ("price_type" in ticket && ticket.price_type) ||
+                ticket.name ||
+                msg("Ticket");
             let ticketPrice = "";
             if (ticket.full_price !== undefined) {
                 ticketPrice = this.getFormattedPrice(ticket.full_price);
@@ -122,22 +127,45 @@ let CorasBasket = class CorasBasket extends LitElement {
         })}
     `;
     }
-    getSeatInfo(reservation) {
-        const seatInfo = [];
-        if (reservation.tickets) {
-            for (const ticket of reservation.tickets) {
-                if ("section" in ticket && ticket.section) {
-                    seatInfo.push(`Section: ${ticket.section}`);
-                }
-                if ("row_name" in ticket && ticket.row_name) {
-                    seatInfo.push(`Row: ${ticket.row_name}`);
-                }
-                if ("seat_name" in ticket && ticket.seat_name) {
-                    seatInfo.push(`Seat: ${ticket.seat_name}`);
-                }
+    // Collapses a reservation's per-ticket seat data into a section line and a
+    // seat line ("Row 9, Seats 11, 12", or bare labels like "F5, F6" when the API
+    // gives seat names without a separate row/number). General-admission tickets
+    // carry no seat fields, so both come back empty and the seat row is dropped.
+    getSeatDetails(reservation) {
+        const tickets = reservation.tickets;
+        if (!tickets || tickets.length === 0) {
+            return { section: "", seats: "" };
+        }
+        const sections = new Set();
+        const seatsByRow = new Map();
+        const looseSeats = [];
+        for (const ticket of tickets) {
+            const section = "section" in ticket ? ticket.section : undefined;
+            const rowName = "row_name" in ticket ? ticket.row_name : undefined;
+            const seatNumber = "seat_number" in ticket ? ticket.seat_number : undefined;
+            const seatName = "seat_name" in ticket ? ticket.seat_name : undefined;
+            if (section) {
+                sections.add(section);
+            }
+            const row = rowName?.toString().trim();
+            const number = seatNumber?.toString().trim();
+            if (row && number) {
+                const seats = seatsByRow.get(row) ?? [];
+                seats.push(number);
+                seatsByRow.set(row, seats);
+            }
+            else if (seatName) {
+                looseSeats.push(seatName);
             }
         }
-        return seatInfo;
+        const rowSeats = [...seatsByRow.entries()].map(([row, seats]) => {
+            const seatList = seats.join(", ");
+            return msg(str `Row ${row}, Seats ${seatList}`);
+        });
+        return {
+            section: [...sections].join(", "),
+            seats: [...rowSeats, ...looseSeats].join(" · "),
+        };
     }
     renderBasketItems() {
         if (!this.basket?.value?.items || this.basket.value.items.length === 0) {
@@ -165,7 +193,15 @@ let CorasBasket = class CorasBasket extends LitElement {
             const imageUrl = reservation.images
                 ? Object.values(reservation.images)[0] || ""
                 : "";
-            const seatInfo = this.getSeatInfo(reservation);
+            const { section, seats } = this.getSeatDetails(reservation);
+            const tickets = reservation.tickets ?? [];
+            const distinctPriceTypes = new Set(tickets.map((ticket) => ticket.price_type_id).filter(Boolean));
+            // Show the per-ticket "ea" price on the item header only when every
+            // ticket is the same type, so the average is the true unit price. Mixed
+            // types get their own per-type "ea" lines in the breakdown instead.
+            const unitPrice = tickets.length > 0 && distinctPriceTypes.size <= 1
+                ? this.getFormattedPrice(reservation.total_price / reservation.number_of_tickets)
+                : "";
             const ticketsHtml = this.renderTickets(reservation.tickets || [], reservation.number_of_tickets, reservation.total_price);
             return html `
           <coras-basket-item
@@ -177,17 +213,12 @@ let CorasBasket = class CorasBasket extends LitElement {
             date="${date}"
             time="${time}"
             quantity="${reservation.number_of_tickets}"
-            price="${this.getFormattedPrice(reservation.total_price / reservation.number_of_tickets)}"
+            section="${section}"
+            seats="${seats}"
+            price="${unitPrice}"
             total-price="${this.getFormattedPrice(reservation.total_price)}"
             expires-in="${reservation.expires_in}"
           >
-            ${seatInfo.length > 0
-                ? html `
-                  <div slot="details" class="seat-info">
-                    ${seatInfo.join(" | ")}
-                  </div>
-                `
-                : html ``}
             ${ticketsHtml}
             <coras-icon
               slot="remove-button"

package/dist/containers/footer/footer.styles.js

@@ -6,8 +6,11 @@ export default css `
   :host {
     --footer-background: var(--coras-footer-background-color);
     --footer-text-color: var(--coras-footer-text-color);
+    --footer-border-top: var(--coras-footer-border-top);
+    --footer-padding-bottom: var(--coras-footer-padding-bottom);
 
     background-color: var(--footer-background);
+    border-top: var(--footer-border-top);
 
     width: 100%;
     pointer-events: none;
@@ -19,6 +22,7 @@ export default css `
     margin: 0 auto;
     width: 100%;
     padding: var(--coras-footer-padding);
+    padding-bottom: var(--footer-padding-bottom);
     pointer-events: auto;
 
     coras-footer-menu-item {