@coras-io/embed 0.1.2 → 0.3.0

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);

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",