@coras-io/embed 0.2.0 → 0.3.0

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,13 +17,6 @@ export default css `
     coras-dropdown {
       width: 100%;
     }
-
-    /* The trigger is a button, so its radius follows the brand button radius
-       (which tracks the general brand radius until a separate button radius is
-       set) rather than a fixed field radius. */
-    coras-button {
-      --button-border-radius-small: var(--coras-radius-button);
-    }
   }
 
   :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 {

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

@@ -20,7 +20,7 @@ import type { SearchMixinInterface } from "../../mixins/search-mixin/types.js";
 import type { PageName } from "../../core/types/shared.js";
 import type { paths } from "../../core/types/api-schema.js";
 import type { Client } from "openapi-fetch";
-declare const CorasNavBar_base: import("../../contexts/utils.js").Constructor<SearchMixinInterface> & typeof LitElement;
+declare const CorasNavBar_base: import("../../contexts/utils.js").Constructor<SearchMixinInterface> & typeof LitElement & (new (...args: any[]) => import("@lit-labs/signals").SignalWatcherApi);
 export declare class CorasNavBar extends CorasNavBar_base implements SearchMixinInterface {
     static styles: CSSResultGroup;
     assetsURL: string;
@@ -30,6 +30,9 @@ export declare class CorasNavBar extends CorasNavBar_base implements SearchMixin
     showBasket: boolean;
     showSearch: boolean;
     logo?: string;
+    logoDark?: string;
+    navbarLogo?: string;
+    private readonly colorScheme;
     locale: SupportedLocales;
     locales: SupportedLocales[];
     currency: SupportedCurrencies;
@@ -94,6 +97,7 @@ export declare class CorasNavBar extends CorasNavBar_base implements SearchMixin
     private renderMobileMenuIcon;
     private renderReturnButton;
     private renderMobileMenuDrawer;
+    private handleLogoClick;
     private renderBrand;
     private renderSearchOnlyHeader;
     private renderFullHeader;

package/dist/containers/navbar/navbar.component.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
+import { ColorSchemeController } from "../../core/color-scheme.js";
 import { when } from "lit/directives/when.js";
 import { localized, msg } from "@lit/localize";
 import { consume, ContextConsumer } from "@lit/context";
@@ -45,6 +46,8 @@ let CorasNavBar = class CorasNavBar extends SearchMixin(SignalWatcher(LitElement
         this.showCurrencySelector = true;
         this.showBasket = true;
         this.showSearch = true;
+        // Reactive effective scheme, so the fallback logo swaps light/dark live.
+        this.colorScheme = new ColorSchemeController(this);
         this.searchValue = "";
         this.isCurrenciesDropdownOpen = false;
         this.isLocalesDropdownOpen = false;
@@ -89,6 +92,15 @@ let CorasNavBar = class CorasNavBar extends SearchMixin(SignalWatcher(LitElement
             this.searchValue = event.detail.value;
             this.throttledSearch(event);
         };
+        // The logo is a home link. The embed owns no router, so it dispatches a
+        // `landing` navigation the host applies (a no-op when already on landing).
+        this.handleLogoClick = () => {
+            this.dispatchPageUpdate({
+                page: "landing",
+                locale: this.locale,
+                currency: this.currency,
+            });
+        };
     }
     static { this.styles = styles; }
     get shouldRenderMobileMenu() {
@@ -596,18 +608,29 @@ let CorasNavBar = class CorasNavBar extends SearchMixin(SignalWatcher(LitElement
       </coras-drawer>
     `;
     }
-    // The host's `brand` slot wins; the default logo is slot fallback content
-    // shown only when nothing is slotted and `config.theme.logo` is set.
+    // The host's `brand` slot wins and keeps its own semantics: slotted content is
+    // projected as-is, never wrapped, so a slotted link/button is not nested inside
+    // our button (invalid interactive-in-interactive) and owns its own navigation.
+    // The home-link button wraps only the SDK fallback logo, and is rendered as the
+    // slot's fallback content, so nothing focusable exists when there is no logo and
+    // nothing slotted.
     renderBrand() {
+        const logo = this.navbarLogo ||
+            (this.colorScheme.scheme === "dark" && this.logoDark
+                ? this.logoDark
+                : this.logo);
         return html `
       <slot name="brand">
-        ${this.logo
-            ? html `<img
-              class="brand-logo"
-              part="brand-logo"
-              src=${this.logo}
-              alt=""
-            />`
+        ${logo
+            ? html `<button
+              class="brand-button"
+              part="brand-button"
+              type="button"
+              aria-label=${msg("Go to the home page")}
+              @click=${this.handleLogoClick}
+            >
+              <img class="brand-logo" part="brand-logo" src=${logo} alt="" />
+            </button>`
             : nothing}
       </slot>
     `;
@@ -679,6 +702,12 @@ __decorate([
 __decorate([
     property({ type: String })
 ], CorasNavBar.prototype, "logo", void 0);
+__decorate([
+    property({ type: String, attribute: "logo-dark" })
+], CorasNavBar.prototype, "logoDark", void 0);
+__decorate([
+    property({ type: String, attribute: "navbar-logo" })
+], CorasNavBar.prototype, "navbarLogo", void 0);
 __decorate([
     consume({ context: localeContext, subscribe: true })
 ], CorasNavBar.prototype, "locale", void 0);