@coras-io/embed 0.2.0 → 0.3.0

package/dist/containers/navbar/navbar.styles.js

@@ -22,17 +22,15 @@ export default css `
     --no-results-font-weight: var(--coras-font-weight-medium);
     --no-results-color: var(--coras-color-text);
 
-    --mobile-menu-drawer-icon-color: var(--coras-color-text);
-    --mobile-menu-color: var(--coras-color-text);
+    --mobile-menu-drawer-icon-color: var(--coras-navbar-icon-color);
+    --mobile-menu-color: var(--coras-navbar-text-color);
 
     --navbar-gap: 3rem;
     --navbar-dropdown-gap: 0.5rem;
     --navbar-mobile-menu-gap: 3rem;
     --navbar-mobile-menu-padding-top: 5rem;
     --navbar-mobile-search-padding: 0 2rem;
-    /* Logo is constrained by height with intrinsic width, so any aspect ratio
-       stays crisp. Override --navbar-logo-* on the element to rebrand. */
-    --navbar-logo-height: 2rem;
+    --navbar-logo-height: var(--coras-navbar-logo-height);
     --navbar-logo-max-width: 11.25rem;
 
     container-type: inline-size;
@@ -49,13 +47,31 @@ export default css `
     fill: var(--navbar-icon-color);
   }
 
+  /* The nav search reads as body copy rather than a form field waiting for
+     input, so its resting label follows the body text colour. */
+  .search coras-field,
+  .input-wrapper-mobile coras-field {
+    --field-input-placeholder-color: var(--coras-color-text);
+    --field-prefix-icon-color: var(--navbar-icon-color);
+  }
+
+  coras-search-button {
+    --search-button-color: var(--coras-color-text);
+    --search-button-icon-color: var(--navbar-icon-color);
+  }
+
   .locale,
-  .currency-symbol,
   .currency-name,
   .basket-items-quantity {
     color: var(--navbar-text-color);
   }
 
+  /* Currency symbols are text glyphs but read as icons, so they follow the
+     Nav Bar Icon Colour like the basket and search icons. */
+  .currency-symbol {
+    color: var(--navbar-icon-color);
+  }
+
   .container {
     max-width: var(--coras-container-max-width);
     margin: 0 auto;
@@ -130,10 +146,17 @@ export default css `
     flex-shrink: 0;
     transition: width 0.3s ease;
 
-    /* Size both a host-slotted brand element and the default logo (the img
-       rendered from the config.theme.logo URL) by height, letting width follow
-       the aspect ratio. object-fit keeps raster logos undistorted; max-width
-       guards against a very wide wordmark blowing out the bar. */
+    .brand-button {
+      display: flex;
+      align-items: center;
+      padding: 0;
+      border: none;
+      background: none;
+      color: inherit;
+      font: inherit;
+      cursor: pointer;
+    }
+
     ::slotted([slot="brand"]),
     .brand-logo {
       height: var(--navbar-logo-height);
@@ -144,11 +167,11 @@ export default css `
     }
 
     @container navbar (max-width: 800px) {
-      --navbar-logo-height: 1.5rem;
+      --navbar-logo-height: calc(var(--coras-navbar-logo-height) * 0.75);
     }
 
     @media (max-width: 800px) {
-      --navbar-logo-height: 1.5rem;
+      --navbar-logo-height: calc(var(--coras-navbar-logo-height) * 0.75);
     }
   }
 
@@ -238,6 +261,9 @@ export default css `
   }
 
   coras-drawer {
+    --drawer-background-color: var(--coras-navbar-background);
+    color: var(--coras-navbar-text-color);
+
     coras-button > coras-icon {
       fill: var(--mobile-menu-drawer-icon-color);
     }

package/dist/contexts/basket/basket.provider.d.ts

@@ -10,6 +10,7 @@ export declare class CorasBasketProvider extends LitElement {
     client: Client<paths>;
     private expirationTimer;
     private lowestExpiresInReservationId;
+    private mountRoot;
     basketState: BasketContext;
     constructor();
     connectedCallback(): void;

package/dist/contexts/basket/basket.provider.js

@@ -14,10 +14,30 @@ import { distributorIdContext, localeContext } from "../properties.context.js";
 import { clientContext } from "../client.context.js";
 import { apiGet, apiDelete, withErrorHandling, } from "../../core/api/queries.js";
 import styles from "./basket.styles.js";
+// Walk up (crossing shadow boundaries) to the mount root the SDK marks with
+// `data-coras-root`. Null when rendered outside a mount (e.g. Storybook).
+function findMountRoot(start) {
+    let node = start;
+    while (node) {
+        if (node instanceof HTMLElement && node.hasAttribute("data-coras-root")) {
+            return node;
+        }
+        if (node.parentNode) {
+            node = node.parentNode;
+            continue;
+        }
+        const root = node.getRootNode();
+        node = root instanceof ShadowRoot ? root.host : null;
+    }
+    return null;
+}
 export class CorasBasketProvider extends LitElement {
     static { this.styles = styles; }
     constructor() {
         super();
+        // The mount this provider belongs to, used to ignore reservation events from
+        // other Coras mounts on the same page (the listener is on `window`).
+        this.mountRoot = null;
         this.basketState = {
             items: null,
             status: TaskStatus.INITIAL,
@@ -29,12 +49,17 @@ export class CorasBasketProvider extends LitElement {
             removeItem: () => { },
             clearBasket: () => { },
         };
-        this.handleReservationCreated = () => {
+        this.handleReservationCreated = (event) => {
+            // A composed event's path runs through this mount's root only when the
+            // reservation was created inside this mount; ignore other mounts' events.
+            if (this.mountRoot && !event.composedPath().includes(this.mountRoot)) {
+                return;
+            }
             this.getReservations();
         };
         this.reservationsTask = new Task(this, {
             task: async ([locale]) => {
-                const bookingSession = getBookingSession();
+                const bookingSession = getBookingSession(this.distributorID);
                 if (!bookingSession) {
                     return null;
                 }
@@ -62,7 +87,7 @@ export class CorasBasketProvider extends LitElement {
         this.deleteReservationTask = new Task(this, {
             autoRun: false,
             task: async ([reservationId]) => {
-                const bookingSession = getBookingSession();
+                const bookingSession = getBookingSession(this.distributorID);
                 if (!bookingSession) {
                     return null;
                 }
@@ -130,9 +155,11 @@ export class CorasBasketProvider extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
+        this.mountRoot = findMountRoot(this);
         // Reservation creation is dispatched by the page host as a host-facing
         // event. The basket provider lives inside coras-layout, so it is not on the
-        // event path when the host dispatches the event.
+        // event path when the host dispatches the event; listen on `window` and
+        // filter to this mount so other mounts on the page are unaffected.
         window.addEventListener("coras:reservation-created", this.handleReservationCreated, true);
     }
     disconnectedCallback() {

package/dist/contexts/properties.context.d.ts

@@ -1,14 +1,14 @@
 export declare const localesContext: {
-    __context__: ("en-GB" | "da-DK" | "de-DE" | "en-IE" | "en-US" | "es-ES" | "fr-FR" | "fr-MA" | "is-IS" | "it-IT" | "ms-MY" | "nb-NO" | "pl-PL" | "pt-PT" | "sv-SE" | "th-TH" | "tr-TR" | "zh-CN")[];
+    __context__: ("en-GB" | "ar-SA" | "da-DK" | "de-DE" | "en-IE" | "en-US" | "es-ES" | "fr-FR" | "fr-MA" | "is-IS" | "it-IT" | "ms-MY" | "nb-NO" | "pl-PL" | "pt-PT" | "sv-SE" | "th-TH" | "tr-TR" | "zh-CN" | "zh-HK")[];
 };
 export declare const localeContext: {
-    __context__: "en-GB" | "da-DK" | "de-DE" | "en-IE" | "en-US" | "es-ES" | "fr-FR" | "fr-MA" | "is-IS" | "it-IT" | "ms-MY" | "nb-NO" | "pl-PL" | "pt-PT" | "sv-SE" | "th-TH" | "tr-TR" | "zh-CN";
+    __context__: "en-GB" | "ar-SA" | "da-DK" | "de-DE" | "en-IE" | "en-US" | "es-ES" | "fr-FR" | "fr-MA" | "is-IS" | "it-IT" | "ms-MY" | "nb-NO" | "pl-PL" | "pt-PT" | "sv-SE" | "th-TH" | "tr-TR" | "zh-CN" | "zh-HK";
 };
 export declare const currencyContext: {
-    __context__: "AED" | "ALL" | "AUD" | "CAD" | "CHF" | "CNY" | "DKK" | "EUR" | "GBP" | "HRK" | "HUF" | "IDR" | "ISK" | "JPY" | "MAD" | "MYR" | "NOK" | "PHP" | "PLN" | "SEK" | "SGD" | "THB" | "TRY" | "USD" | "VND";
+    __context__: "AED" | "ALL" | "AUD" | "CAD" | "CHF" | "CNY" | "DKK" | "EUR" | "GBP" | "HUF" | "IDR" | "ISK" | "JPY" | "MAD" | "MYR" | "NOK" | "PHP" | "PLN" | "SAR" | "SEK" | "SGD" | "THB" | "TRY" | "USD" | "VND";
 };
 export declare const currenciesContext: {
-    __context__: ("AED" | "ALL" | "AUD" | "CAD" | "CHF" | "CNY" | "DKK" | "EUR" | "GBP" | "HRK" | "HUF" | "IDR" | "ISK" | "JPY" | "MAD" | "MYR" | "NOK" | "PHP" | "PLN" | "SEK" | "SGD" | "THB" | "TRY" | "USD" | "VND")[];
+    __context__: ("AED" | "ALL" | "AUD" | "CAD" | "CHF" | "CNY" | "DKK" | "EUR" | "GBP" | "HUF" | "IDR" | "ISK" | "JPY" | "MAD" | "MYR" | "NOK" | "PHP" | "PLN" | "SAR" | "SEK" | "SGD" | "THB" | "TRY" | "USD" | "VND")[];
 };
 export declare const distributorIdContext: {
     __context__: string;

package/dist/core/api/middlewares/booking-session/booking-session.constants.d.ts

@@ -1,5 +1,6 @@
 export declare const BOOKING_SESSION_STORAGE_KEY = "coras-booking-session";
 export declare const BOOKING_SESSION_HEADER = "Booking-Session";
 export declare const BOOKING_SESSION_EXPIRES_HEADER = "booking-session-expires";
+export declare const DISTRIBUTOR_HEADER = "Coras-Distributor";
 export declare const RETRY_ATTEMPTS = 3;
 export declare const RETRY_DELAY = 1000;

package/dist/core/api/middlewares/booking-session/booking-session.constants.js

@@ -1,5 +1,6 @@
 export const BOOKING_SESSION_STORAGE_KEY = "coras-booking-session";
 export const BOOKING_SESSION_HEADER = "Booking-Session";
 export const BOOKING_SESSION_EXPIRES_HEADER = "booking-session-expires";
+export const DISTRIBUTOR_HEADER = "Coras-Distributor";
 export const RETRY_ATTEMPTS = 3;
 export const RETRY_DELAY = 1000;

package/dist/core/api/middlewares/booking-session/booking-session.js

@@ -1,28 +1,23 @@
-import { BOOKING_SESSION_EXPIRES_HEADER, BOOKING_SESSION_HEADER, } from "./booking-session.constants.js";
+import { BOOKING_SESSION_EXPIRES_HEADER, BOOKING_SESSION_HEADER, DISTRIBUTOR_HEADER, } from "./booking-session.constants.js";
 import { getBookingSession, removeBookingSession, retryWithExponentialBackoff, updateBookingSessionExpiration, } from "./booking-session.utils.js";
 export const bookingSessionMiddleware = {
-    async onError({ error, request }) {
-        console.log("Request failed with error, attempting retry:", error);
-        try {
-            return await retryWithExponentialBackoff(async () => {
-                const response = await fetch(request.clone());
-                if (!response.ok) {
-                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-                }
-                return response;
-            });
-        }
-        catch (retryError) {
-            console.error("All retry attempts failed:", retryError);
-            throw retryError;
-        }
+    async onError({ request }) {
+        return await retryWithExponentialBackoff(async () => {
+            const response = await fetch(request.clone());
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            return response;
+        });
     },
     async onResponse({ response, request }) {
+        // The booking session is per-distributor; scope every read/write to the
+        // distributor this request was made for (set on the client's headers).
+        const distributorId = request.headers.get(DISTRIBUTOR_HEADER);
         if (response.status === 401) {
-            console.log("Received 401 response, removing booking session");
-            removeBookingSession();
+            if (distributorId)
+                removeBookingSession(distributorId);
             if (request.method === "GET") {
-                console.log("Retrying GET request after removing booking session");
                 const newHeaders = new Headers(request.headers);
                 newHeaders.delete(BOOKING_SESSION_HEADER);
                 const newRequest = new Request(request, {
@@ -31,23 +26,19 @@ export const bookingSessionMiddleware = {
                 try {
                     return await fetch(newRequest);
                 }
-                catch (error) {
-                    console.error("Error retrying request after 401:", error);
+                catch {
                     return response;
                 }
             }
             return response;
         }
         const expiresHeader = response.headers.get(BOOKING_SESSION_EXPIRES_HEADER);
-        if (expiresHeader) {
-            const currentBookingSession = getBookingSession();
+        if (expiresHeader && distributorId) {
+            const currentBookingSession = getBookingSession(distributorId);
             if (currentBookingSession) {
                 const expirationDate = new Date(expiresHeader);
                 if (!isNaN(expirationDate.getTime())) {
-                    updateBookingSessionExpiration(expirationDate);
-                }
-                else {
-                    console.error("Failed to parse booking session expiration date:", expiresHeader);
+                    updateBookingSessionExpiration(distributorId, expirationDate);
                 }
             }
         }

package/dist/core/api/middlewares/booking-session/booking-session.utils.d.ts

@@ -1,5 +1,5 @@
-export declare const getBookingSession: () => string | undefined;
-export declare const storeBookingSession: (bookingSession: string, expirationDate: Date) => void;
-export declare const updateBookingSessionExpiration: (expirationDate: Date) => void;
-export declare const removeBookingSession: () => void;
+export declare const getBookingSession: (distributorId: string) => string | undefined;
+export declare const storeBookingSession: (distributorId: string, bookingSession: string, expirationDate: Date) => void;
+export declare const updateBookingSessionExpiration: (distributorId: string, expirationDate: Date) => void;
+export declare const removeBookingSession: (distributorId: string) => void;
 export declare const retryWithExponentialBackoff: <T>(operation: () => Promise<T>, maxRetries?: number, baseDelayMs?: number, maxDelayMs?: number) => Promise<T>;

package/dist/core/api/middlewares/booking-session/booking-session.utils.js

@@ -1,12 +1,15 @@
 import { BOOKING_SESSION_STORAGE_KEY, RETRY_ATTEMPTS, RETRY_DELAY, } from "./booking-session.constants.js";
-export const getBookingSession = () => {
+// The token is scoped per distributor: two embeds on the same origin pointing at
+// different distributors must not share a booking session (basket/checkout).
+const storageKey = (distributorId) => `${BOOKING_SESSION_STORAGE_KEY}:${distributorId}`;
+export const getBookingSession = (distributorId) => {
     try {
-        const raw = localStorage.getItem(BOOKING_SESSION_STORAGE_KEY);
+        const raw = localStorage.getItem(storageKey(distributorId));
         if (!raw)
             return undefined;
         const { token, expiresAt } = JSON.parse(raw);
         if (!token || expiresAt <= Date.now()) {
-            removeBookingSession();
+            removeBookingSession(distributorId);
             return undefined;
         }
         return token;
@@ -16,27 +19,27 @@ export const getBookingSession = () => {
         return undefined;
     }
 };
-export const storeBookingSession = (bookingSession, expirationDate) => {
+export const storeBookingSession = (distributorId, bookingSession, expirationDate) => {
     try {
         const value = {
             token: bookingSession,
             expiresAt: expirationDate.getTime(),
         };
-        localStorage.setItem(BOOKING_SESSION_STORAGE_KEY, JSON.stringify(value));
+        localStorage.setItem(storageKey(distributorId), JSON.stringify(value));
     }
     catch {
         // localStorage may be blocked (private browsing).
     }
 };
-export const updateBookingSessionExpiration = (expirationDate) => {
-    const currentSession = getBookingSession();
+export const updateBookingSessionExpiration = (distributorId, expirationDate) => {
+    const currentSession = getBookingSession(distributorId);
     if (currentSession) {
-        storeBookingSession(currentSession, expirationDate);
+        storeBookingSession(distributorId, currentSession, expirationDate);
     }
 };
-export const removeBookingSession = () => {
+export const removeBookingSession = (distributorId) => {
     try {
-        localStorage.removeItem(BOOKING_SESSION_STORAGE_KEY);
+        localStorage.removeItem(storageKey(distributorId));
     }
     catch {
         // localStorage may be blocked (private browsing).

package/dist/core/api/queries.js

@@ -1,16 +1,17 @@
 import { API_VERSION } from "../constants/api-version.js";
 import { getBookingSession } from "./middlewares/booking-session/booking-session.utils.js";
+import { getApiLanguageCode } from "../utils/locale.js";
 const createBaseRequestConfig = (distributorID, locale, customBookingSession) => {
     const bookingSession = customBookingSession !== undefined
         ? customBookingSession
-        : getBookingSession();
+        : getBookingSession(distributorID);
     const headers = {
         "Content-Type": "application/json",
         "Coras-Distributor": distributorID,
         ...(bookingSession && { "Booking-Session": bookingSession }),
     };
     const path = { api_version: API_VERSION };
-    const language_code = locale.split("-")[0];
+    const language_code = getApiLanguageCode(locale);
     return { headers, path, language_code };
 };
 export const apiGet = async ({ client, distributorID, locale, endpoint, query, path: customPath, bookingSession, }) => {

package/dist/core/color-scheme.d.ts

@@ -0,0 +1,14 @@
+import type { ReactiveController, ReactiveControllerHost } from "lit";
+export type ColorScheme = "light" | "dark";
+export declare function resolveColorScheme(element: Element): ColorScheme;
+export declare class ColorSchemeController implements ReactiveController {
+    scheme: ColorScheme;
+    private readonly host;
+    private media?;
+    private observer?;
+    private readonly onChange;
+    constructor(host: ReactiveControllerHost & Element);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private sync;
+}

package/dist/core/color-scheme.js

@@ -0,0 +1,48 @@
+function schemeRoot(el) {
+    return el.closest("[data-coras-root]") ?? el.ownerDocument.documentElement;
+}
+function prefersDark() {
+    return (typeof matchMedia === "function" &&
+        matchMedia("(prefers-color-scheme: dark)").matches);
+}
+export function resolveColorScheme(element) {
+    const scheme = getComputedStyle(element).colorScheme.toLowerCase();
+    const hasLight = scheme.includes("light");
+    const hasDark = scheme.includes("dark");
+    if (hasLight && hasDark)
+        return prefersDark() ? "dark" : "light";
+    if (hasDark)
+        return "dark";
+    return "light";
+}
+export class ColorSchemeController {
+    constructor(host) {
+        this.scheme = "light";
+        this.onChange = () => this.sync();
+        this.host = host;
+        host.addController(this);
+    }
+    hostConnected() {
+        if (typeof matchMedia === "function") {
+            this.media = matchMedia("(prefers-color-scheme: dark)");
+            this.media.addEventListener("change", this.onChange);
+        }
+        this.observer = new MutationObserver(this.onChange);
+        this.observer.observe(schemeRoot(this.host), {
+            attributes: true,
+            attributeFilter: ["style", "class", "data-coras-color-scheme"],
+        });
+        this.scheme = resolveColorScheme(this.host);
+    }
+    hostDisconnected() {
+        this.media?.removeEventListener("change", this.onChange);
+        this.observer?.disconnect();
+    }
+    sync() {
+        const next = resolveColorScheme(this.host);
+        if (next !== this.scheme) {
+            this.scheme = next;
+            this.host.requestUpdate();
+        }
+    }
+}

package/dist/core/currency/constants.d.ts

@@ -1,5 +1,5 @@
 import type { allLocales } from "../i18n/locale-codes.js";
-export declare const supportedCurrencies: readonly ["AED", "ALL", "AUD", "CAD", "CHF", "CNY", "DKK", "EUR", "GBP", "HRK", "HUF", "IDR", "ISK", "JPY", "MAD", "MYR", "NOK", "PHP", "PLN", "SEK", "SGD", "THB", "TRY", "USD", "VND"];
+export declare const supportedCurrencies: readonly ["AED", "ALL", "AUD", "CAD", "CHF", "CNY", "DKK", "EUR", "GBP", "HUF", "IDR", "ISK", "JPY", "MAD", "MYR", "NOK", "PHP", "PLN", "SAR", "SEK", "SGD", "THB", "TRY", "USD", "VND"];
 export declare const currencySymbol: Record<(typeof supportedCurrencies)[number], string>;
 export declare const currencyName: Record<(typeof supportedCurrencies)[number], string>;
 export declare const localeToCurrencyMapping: Partial<Record<(typeof allLocales)[number], keyof typeof currencySymbol>>;

package/dist/core/currency/constants.js

@@ -8,7 +8,6 @@ export const supportedCurrencies = [
     "DKK",
     "EUR",
     "GBP",
-    "HRK",
     "HUF",
     "IDR",
     "ISK",
@@ -18,6 +17,7 @@ export const supportedCurrencies = [
     "NOK",
     "PHP",
     "PLN",
+    "SAR",
     "SEK",
     "SGD",
     "THB",
@@ -35,7 +35,6 @@ export const currencySymbol = {
     DKK: "kr",
     EUR: "€",
     GBP: "£",
-    HRK: "kn",
     HUF: "Ft",
     IDR: "Rp",
     ISK: "kr",
@@ -45,6 +44,7 @@ export const currencySymbol = {
     NOK: "kr",
     PHP: "₱",
     PLN: "zł",
+    SAR: "ر.س",
     SEK: "kr",
     SGD: "S$",
     THB: "฿",
@@ -62,7 +62,6 @@ export const currencyName = {
     DKK: "Danske kroner",
     EUR: "Euro",
     GBP: "Pound sterling",
-    HRK: "Croatian Kuna",
     HUF: "Hungarian Forint",
     IDR: "Indonesian Rupiah",
     ISK: "Íslensk króna",
@@ -72,6 +71,7 @@ export const currencyName = {
     NOK: "Norsk krone",
     PHP: "Philippine Peso",
     PLN: "Złoty",
+    SAR: "ريال سعودي",
     SEK: "Svensk krona",
     SGD: "Singapore Dollar",
     THB: "Baht",
@@ -80,6 +80,7 @@ export const currencyName = {
     VND: "Vietnamese Dong",
 };
 export const localeToCurrencyMapping = {
+    "ar-SA": "SAR",
     "da-DK": "DKK",
     "de-DE": "EUR",
     "en-GB": "GBP",

package/dist/core/i18n/date.js

@@ -1,6 +1,7 @@
-import { addDays, format, startOfWeek } from "date-fns";
-import { da, de, enGB, enIE, enUS, es, fr, is, it, ms, nb, pl, pt, sv, th, tr, zhCN, } from "date-fns/locale";
+import { addDays, format, parseISO, startOfWeek } from "date-fns";
+import { arSA, da, de, enGB, enIE, enUS, es, fr, is, it, ms, nb, pl, pt, sv, th, tr, zhCN, zhHK, } from "date-fns/locale";
 export const localeMapping = {
+    "ar-SA": arSA,
     "da-DK": da,
     "de-DE": de,
     "en-GB": enGB,
@@ -19,6 +20,7 @@ export const localeMapping = {
     "th-TH": th,
     "tr-TR": tr,
     "zh-CN": zhCN,
+    "zh-HK": zhHK,
 };
 export const getCalendarLocale = (locale) => localeMapping[locale] || enGB;
 export const weekdayNames = (locale) => {
@@ -30,7 +32,11 @@ export const weekdayNames = (locale) => {
 };
 export const formatDate = (date, locale, showYear = false) => {
     if (typeof date === "string") {
-        date = new Date(date);
+        // parseISO reads a date-only string ("2026-05-26") as local midnight, so
+        // Intl renders that calendar day in every timezone. Native `new Date` would
+        // read it as UTC midnight, which renders as the previous day for viewers
+        // west of UTC (e.g. the Americas).
+        date = parseISO(date);
     }
     return Intl.DateTimeFormat(locale, {
         year: showYear ? "numeric" : undefined,
@@ -39,27 +45,32 @@ export const formatDate = (date, locale, showYear = false) => {
     }).format(date);
 };
 export const getDateRangeLabel = (startDate, endDate, locale) => {
+    // startDate/endDate are date-only calendar days. parseISO reads them as local
+    // midnight so the year/month/day comparisons below stay on the right day in
+    // every timezone; native `new Date` would read them as UTC midnight and shift
+    // to the previous day (and possibly month/year) for viewers west of UTC.
+    const currentYear = new Date().getFullYear();
     switch (true) {
         case startDate === "" && endDate === "":
             return;
         case startDate !== "" && endDate === "":
-            return new Date(startDate).getFullYear() !== new Date().getFullYear()
+            return parseISO(startDate).getFullYear() !== currentYear
                 ? formatDate(startDate, locale, true)
                 : formatDate(startDate, locale);
         case startDate === "" && endDate !== "":
-            return new Date(endDate).getFullYear() !== new Date().getFullYear()
+            return parseISO(endDate).getFullYear() !== currentYear
                 ? formatDate(endDate, locale, true)
                 : formatDate(endDate, locale);
         case startDate === endDate &&
-            new Date(startDate).getFullYear() !== new Date().getFullYear():
+            parseISO(startDate).getFullYear() !== currentYear:
             return formatDate(startDate, locale, true);
         case startDate === endDate:
             return formatDate(startDate, locale);
-        case new Date(startDate).getFullYear() !== new Date(endDate).getFullYear():
+        case parseISO(startDate).getFullYear() !== parseISO(endDate).getFullYear():
             return `${formatDate(startDate, locale, true)} - ${formatDate(endDate, locale, true)}`;
-        case new Date(startDate).getMonth() !== new Date(endDate).getMonth():
+        case parseISO(startDate).getMonth() !== parseISO(endDate).getMonth():
             return `${formatDate(startDate, locale)} - ${formatDate(endDate, locale)}`;
         default:
-            return `${new Date(startDate).getDate()} - ${formatDate(endDate, locale)}`;
+            return `${parseISO(startDate).getDate()} - ${formatDate(endDate, locale)}`;
     }
 };

package/dist/core/i18n/locale-codes.d.ts

@@ -6,8 +6,8 @@ export declare const sourceLocale = "en-GB";
  * The other locale codes that this application is localized into. Sorted
  * lexicographically.
  */
-export declare const targetLocales: readonly ["da-DK", "de-DE", "en-IE", "en-US", "es-ES", "fr-FR", "fr-MA", "is-IS", "it-IT", "ms-MY", "nb-NO", "pl-PL", "pt-PT", "sv-SE", "th-TH", "tr-TR", "zh-CN"];
+export declare const targetLocales: readonly ["ar-SA", "da-DK", "de-DE", "en-IE", "en-US", "es-ES", "fr-FR", "fr-MA", "is-IS", "it-IT", "ms-MY", "nb-NO", "pl-PL", "pt-PT", "sv-SE", "th-TH", "tr-TR", "zh-CN", "zh-HK"];
 /**
  * All valid project locale codes. Sorted lexicographically.
  */
-export declare const allLocales: readonly ["da-DK", "de-DE", "en-GB", "en-IE", "en-US", "es-ES", "fr-FR", "fr-MA", "is-IS", "it-IT", "ms-MY", "nb-NO", "pl-PL", "pt-PT", "sv-SE", "th-TH", "tr-TR", "zh-CN"];
+export declare const allLocales: readonly ["ar-SA", "da-DK", "de-DE", "en-GB", "en-IE", "en-US", "es-ES", "fr-FR", "fr-MA", "is-IS", "it-IT", "ms-MY", "nb-NO", "pl-PL", "pt-PT", "sv-SE", "th-TH", "tr-TR", "zh-CN", "zh-HK"];

package/dist/core/i18n/locale-codes.js

@@ -9,6 +9,7 @@ export const sourceLocale = `en-GB`;
  * lexicographically.
  */
 export const targetLocales = [
+    `ar-SA`,
     `da-DK`,
     `de-DE`,
     `en-IE`,
@@ -26,11 +27,13 @@ export const targetLocales = [
     `th-TH`,
     `tr-TR`,
     `zh-CN`,
+    `zh-HK`,
 ];
 /**
  * All valid project locale codes. Sorted lexicographically.
  */
 export const allLocales = [
+    `ar-SA`,
     `da-DK`,
     `de-DE`,
     `en-GB`,
@@ -49,4 +52,5 @@ export const allLocales = [
     `th-TH`,
     `tr-TR`,
     `zh-CN`,
+    `zh-HK`,
 ];

package/dist/core/images/constants.d.ts

@@ -1,7 +1,2 @@
 export declare const IMAGE_BASE_URL = "https://coras.imgix.net/locations";
 export declare const DEFAULT_LOCATION_IMAGE = "ireland/cork.png";
-export declare const DEFAULT_LOCATION_IMAGE_PARAMS: {
-    auto: string;
-    ar: string;
-    fit: string;
-};

package/dist/core/images/constants.js

@@ -1,7 +1,2 @@
 export const IMAGE_BASE_URL = "https://coras.imgix.net/locations";
 export const DEFAULT_LOCATION_IMAGE = "ireland/cork.png";
-export const DEFAULT_LOCATION_IMAGE_PARAMS = {
-    auto: "compress,format",
-    ar: "10:1",
-    fit: "crop",
-};

package/dist/core/images/helpers.d.ts

@@ -3,6 +3,14 @@ export type ImageParams = {
     ar: string;
     fit: string;
 };
+/**
+ * Compose the CDN path for a location image.
+ *
+ * `params` is optional and omitted by default: callers that render through
+ * `coras-image` must leave it unset, because that component appends its own
+ * `w`/`h`/`fit`/`crop`. Passing `ar` here as well would win over the `h` the
+ * component derives from its own aspect ratio, cropping the image twice.
+ */
 export declare function getLocationImageURL({ baseURL, country, city, imageExtension, params, }: {
     baseURL: string;
     country: string;