@coras-io/embed 0.1.0

package/dist/sdk/mount.js

@@ -0,0 +1,289 @@
+import { fireEvent } from "../core/events.js";
+import { DEFAULT_CURRENCY, DEFAULT_LOCALE } from "../views/constants.js";
+import { attachCallbackBridge, } from "./element-adapter.js";
+import { createChrome } from "./chrome.js";
+import { applyConfig, applyParams, captureParamDefaults, defaultPageRegistry, } from "./page-registry.js";
+import { applyColorScheme, applyTheme, clearTheme } from "./theme.js";
+import { safeUrl } from "@coras-io/brand-tokens";
+import { ensureTokensInjected } from "../styles/tokens.js";
+import { redactValue, toPublicErrorDetail } from "./redaction.js";
+import { assertValidPage, CorasValidationError, validateConfig, validateMountOptions, validatePageParams, } from "./validation.js";
+function isThenable(value) {
+    return (typeof value === "object" &&
+        value !== null &&
+        typeof value.then === "function");
+}
+/**
+ * Create a `mount` function bound to a page registry. The public `mount` uses
+ * the real registry; tests inject a lightweight registry so lifecycle behavior
+ * is verifiable without loading the heavy page modules.
+ */
+export function createMountWith(registry) {
+    return function mount(options) {
+        // Validation throws synchronously before anything is rendered.
+        const validated = validateMountOptions(options);
+        const strict = options.strict === true;
+        const preview = options.preview === true;
+        const container = options.container;
+        const root = document.createElement("div");
+        root.setAttribute("data-coras-root", "");
+        // Token system is defined on the container scope and inherits into every
+        // nested Web Component's shadow tree (plan F-004). Adopting into the
+        // document is idempotent and shared across mounts.
+        ensureTokensInjected(container.ownerDocument ?? document);
+        let currentPage = validated.page;
+        let currentConfig = validated.config;
+        let currentParams = validated.params;
+        let currentChrome = options.chrome;
+        applyTheme(root, currentConfig.theme);
+        applyColorScheme(root, currentConfig.colorScheme);
+        root.dataset.corasPage = currentPage;
+        container.appendChild(root);
+        let destroyed = false;
+        let generation = 0;
+        let pageElement = null;
+        let pageParamDefaults = {};
+        let chromeElements = [];
+        let readySettled = false;
+        let resolveReady;
+        let rejectReady;
+        const ready = new Promise((resolve, reject) => {
+            resolveReady = resolve;
+            rejectReady = reject;
+        });
+        // Prevent unhandled rejection if the host never reads `ready`.
+        void ready.catch(() => undefined);
+        function localeOf(config) {
+            return config.locale ?? DEFAULT_LOCALE;
+        }
+        function currencyOf(config) {
+            return config.currency ?? DEFAULT_CURRENCY;
+        }
+        function emitObservability(name, data) {
+            if (!options.onObservability)
+                return;
+            try {
+                options.onObservability({
+                    name,
+                    page: currentPage,
+                    ...(data
+                        ? {
+                            data: redactValue(data),
+                        }
+                        : {}),
+                });
+            }
+            catch (error) {
+                options.logger?.error?.(error);
+            }
+        }
+        function reportError(error) {
+            const detail = toPublicErrorDetail(error, currentPage);
+            // Per-mount logging only; the SDK never writes unconditional console output.
+            options.logger?.error?.(error);
+            options.onError?.(detail);
+            fireEvent(root, "coras:error", detail);
+            emitObservability("coras.error", { code: detail.code });
+        }
+        function removeChrome() {
+            for (const element of chromeElements) {
+                element.remove();
+            }
+            chromeElements = [];
+        }
+        async function renderPage(targetPage, generationToken) {
+            const entry = registry[targetPage];
+            await entry.load();
+            if (destroyed || generationToken !== generation)
+                return;
+            const element = document.createElement(entry.tagName);
+            applyConfig(element, currentConfig);
+            // Preview is a mount-time rendering mode, not config or a param, so it is
+            // set directly on the element; pages that honor it read their own property.
+            element.preview = preview;
+            const paramDefaults = captureParamDefaults(element, entry);
+            applyParams(element, entry, currentParams, paramDefaults);
+            // Chrome is rebuilt per page rather than moved: the navbar/footer consume
+            // the page's context (locale, dispatch, current page…) and re-parenting a
+            // context consumer across providers leaves those bindings stale.
+            const chrome = await createChrome(currentChrome, {
+                logo: currentConfig.theme?.logo,
+            });
+            if (destroyed || generationToken !== generation)
+                return;
+            for (const chromeElement of chrome) {
+                element.appendChild(chromeElement);
+            }
+            if (pageElement && pageElement.parentNode === root) {
+                root.removeChild(pageElement);
+            }
+            pageElement = element;
+            pageParamDefaults = paramDefaults;
+            chromeElements = chrome;
+            root.appendChild(element);
+            root.dataset.corasPage = targetPage;
+            if (isThenable(element.updateComplete)) {
+                try {
+                    await element.updateComplete;
+                }
+                catch {
+                    // Page render errors are surfaced through the page's own error paths.
+                }
+            }
+            if (destroyed || generationToken !== generation)
+                return;
+            root.dataset.corasMounted = "true";
+            if (!readySettled) {
+                readySettled = true;
+                resolveReady();
+            }
+            fireEvent(root, "coras:ready", { page: targetPage });
+            emitObservability("coras.page-loaded", { page: targetPage });
+        }
+        const bridge = attachCallbackBridge(root, options, {
+            onListenerError: (error) => options.logger?.error?.(error),
+        });
+        function startRender(targetPage) {
+            const token = ++generation;
+            renderPage(targetPage, token).catch((error) => {
+                if (destroyed || token !== generation)
+                    return;
+                reportError(error);
+                if (!readySettled) {
+                    readySettled = true;
+                    rejectReady(error);
+                }
+            });
+        }
+        startRender(currentPage);
+        function applyUpdate(patch) {
+            if (destroyed)
+                return;
+            // Reject an unknown page before mutating any state, so a bad update or
+            // navigate can't leave currentPage pointing at a page the registry lacks.
+            if (patch.page != null)
+                assertValidPage(patch.page);
+            if (patch.config) {
+                currentConfig = validateConfig({ ...currentConfig, ...patch.config }, strict);
+                if ("theme" in patch.config) {
+                    clearTheme(root);
+                    applyTheme(root, currentConfig.theme);
+                    // Chrome is not rebuilt on a theme-only update, so push the (possibly
+                    // changed) default logo to the live navbar directly.
+                    for (const element of chromeElements) {
+                        if (element.tagName === "CORAS-NAVBAR") {
+                            element.logo = safeUrl(currentConfig.theme?.logo);
+                        }
+                    }
+                }
+                // A colour-scheme flip is just the root's `color-scheme`; the
+                // `light-dark()` pairs already carry both modes.
+                if ("colorScheme" in patch.config) {
+                    applyColorScheme(root, currentConfig.colorScheme);
+                }
+            }
+            const pageChanged = patch.page != null && patch.page !== currentPage;
+            const chromeChanged = patch.chrome !== undefined;
+            if (chromeChanged)
+                currentChrome = patch.chrome;
+            if (pageChanged) {
+                currentPage = patch.page;
+                currentParams = validatePageParams(currentPage, patch.params, strict);
+                startRender(currentPage);
+                return;
+            }
+            if (patch.params) {
+                // Params are the full desired state for the page: replace rather than
+                // merge so params the host dropped (cleared) are reset to defaults by
+                // applyParams instead of lingering.
+                currentParams = validatePageParams(currentPage, patch.params, strict);
+            }
+            // No page change: update the existing element in place when possible.
+            if (pageElement) {
+                applyConfig(pageElement, currentConfig);
+                applyParams(pageElement, registry[currentPage], currentParams, pageParamDefaults);
+                if (chromeChanged) {
+                    removeChrome();
+                    void createChrome(currentChrome, {
+                        logo: currentConfig.theme?.logo,
+                    }).then((chrome) => {
+                        if (destroyed || !pageElement)
+                            return;
+                        for (const chromeElement of chrome) {
+                            pageElement.appendChild(chromeElement);
+                        }
+                        chromeElements = chrome;
+                    });
+                }
+            }
+            else if (chromeChanged) {
+                // Page still loading; re-render so chrome is included on first mount.
+                startRender(currentPage);
+            }
+        }
+        const app = {
+            ready,
+            get state() {
+                return Object.freeze({
+                    page: currentPage,
+                    params: { ...currentParams },
+                    locale: localeOf(currentConfig),
+                    currency: currencyOf(currentConfig),
+                });
+            },
+            update(patch) {
+                applyUpdate(patch);
+            },
+            navigate(page, params, navigateOptions) {
+                if (destroyed)
+                    return;
+                applyUpdate({ page, params });
+                if (navigateOptions?.emitNavigate) {
+                    // Programmatic navigation is tagged `host` so onNavigate handlers can
+                    // avoid re-driving the host router (loop prevention, ADR 0014).
+                    fireEvent(root, "coras:navigate", {
+                        page,
+                        params,
+                        locale: localeOf(currentConfig),
+                        currency: currencyOf(currentConfig),
+                        source: "host",
+                    });
+                }
+            },
+            prefetch(page) {
+                assertValidPage(page);
+                return registry[page].load().then(() => undefined);
+            },
+            unmount() {
+                if (destroyed)
+                    return;
+                emitObservability("coras.unmounted");
+                destroyed = true;
+                // Invalidate any in-flight render so late loads are ignored.
+                generation += 1;
+                bridge.dispose();
+                removeChrome();
+                if (root.parentNode) {
+                    root.remove();
+                }
+                pageElement = null;
+                if (!readySettled) {
+                    readySettled = true;
+                    rejectReady(new CorasValidationError("invalid_config", "The Coras embed was unmounted before it became ready."));
+                }
+            },
+        };
+        return app;
+    };
+}
+/**
+ * Mount a Coras page into a host container and return a synchronous app handle.
+ *
+ * ```ts
+ * const app = mount({ container, page: "landing", config });
+ * await app.ready;
+ * app.update({ page: "search", params: { search: "museum" } });
+ * app.unmount();
+ * ```
+ */
+export const mount = createMountWith(defaultPageRegistry);

package/dist/sdk/navigation-intent.d.ts

@@ -0,0 +1,34 @@
+import type { SupportedCurrencies } from "../core/types/core/currency.js";
+import type { SupportedLocales } from "../core/types/core/locale.js";
+import type { CorasNavigateDetail, CorasPageName, CorasStateChangeDetail } from "./types.js";
+/**
+ * Classifies a page param update into the public event contract:
+ * a cross-page target (or an external link) is a navigation intent
+ * (`coras:navigate`); a same-page param change is a state change
+ * (`coras:state-change`). See ADR 0014.
+ *
+ * Pure and DOM-free so it can be unit tested directly.
+ */
+export type PageUpdateInputCore = {
+    page?: CorasPageName;
+    currency?: SupportedCurrencies;
+    locale?: SupportedLocales;
+    href?: string;
+    /** Page-specific fields only (base fields already removed). */
+    params: Record<string, unknown>;
+};
+export type PageUpdateContext = {
+    currentPage: CorasPageName;
+    /** The current page's params snapshot (base fields already removed). */
+    currentParams: Record<string, unknown>;
+    locale: SupportedLocales;
+    currency: SupportedCurrencies;
+};
+export type PageUpdateClassification = {
+    kind: "navigate";
+    detail: CorasNavigateDetail;
+} | {
+    kind: "state-change";
+    detail: CorasStateChangeDetail;
+};
+export declare function classifyPageUpdate(input: PageUpdateInputCore, context: PageUpdateContext): PageUpdateClassification;

package/dist/sdk/navigation-intent.js

@@ -0,0 +1,28 @@
+export function classifyPageUpdate(input, context) {
+    const locale = input.locale ?? context.locale;
+    const currency = input.currency ?? context.currency;
+    const isNavigate = (input.page != null && input.page !== context.currentPage) ||
+        input.href != null;
+    if (isNavigate) {
+        return {
+            kind: "navigate",
+            detail: {
+                page: input.page ?? context.currentPage,
+                params: input.params,
+                locale,
+                currency,
+                ...(input.href != null ? { href: input.href } : {}),
+                source: "embed",
+            },
+        };
+    }
+    return {
+        kind: "state-change",
+        detail: {
+            page: context.currentPage,
+            params: { ...context.currentParams, ...input.params },
+            locale,
+            currency,
+        },
+    };
+}

package/dist/sdk/page-registry.d.ts

@@ -0,0 +1,32 @@
+import type { CorasConfig, CorasPageName } from "./types.js";
+/**
+ * A loosely-typed element whose public properties the SDK sets. The page custom
+ * elements are internal (ADR 0001), so the SDK writes their properties directly.
+ */
+export type ConfigurableElement = HTMLElement & Record<string, unknown>;
+export type PageEntry = {
+    /** Internal custom-element tag used to render this page. */
+    tagName: string;
+    /** Lazily import (and thereby register) the page module. */
+    load: () => Promise<unknown>;
+    /** Map public param names to element properties. */
+    paramToProperty: Record<string, string>;
+};
+export type PageRegistry = Record<CorasPageName, PageEntry>;
+export declare const defaultPageRegistry: PageRegistry;
+/** Apply normalized SDK config to a page (or chrome) element's properties. */
+export declare function applyConfig(element: ConfigurableElement, config: CorasConfig): void;
+/**
+ * Snapshot the element's default values for every param the page exposes. Taken
+ * right after creation (before any params are applied) so a later update can
+ * reset a param the host no longer provides back to its default — i.e. "clear"
+ * it — instead of leaving the stale value in place.
+ */
+export declare function captureParamDefaults(element: ConfigurableElement, entry: PageEntry): Record<string, unknown>;
+/**
+ * Sync the element to the page's params. Params are the full desired state for
+ * the page: each known param is set to its provided value, or reset to the
+ * captured default when absent. This makes cleared params (dropped from the
+ * host's URL/state) actually clear on the element.
+ */
+export declare function applyParams(element: ConfigurableElement, entry: PageEntry, params: Record<string, unknown>, defaults: Record<string, unknown>): void;

package/dist/sdk/page-registry.js

@@ -0,0 +1,84 @@
+/** Identity map helper for params whose public name equals the element property. */
+function identity(...keys) {
+    return Object.fromEntries(keys.map((key) => [key, key]));
+}
+export const defaultPageRegistry = {
+    landing: {
+        tagName: "coras-landing-page",
+        load: () => import("../views/landing-page/landing-page.js"),
+        // Public `sort` maps to the internal `sorting` property.
+        paramToProperty: {
+            ...identity("country", "city", "startDate", "endDate", "duration", "price", "categories"),
+            sort: "sorting",
+        },
+    },
+    search: {
+        tagName: "coras-search-page",
+        load: () => import("../views/search-page/search-page.js"),
+        paramToProperty: identity("search", "startDate"),
+    },
+    details: {
+        tagName: "coras-details-page",
+        load: () => import("../views/details-page/details-page.js"),
+        // Public `id` maps to the internal `attractionId` property.
+        paramToProperty: { id: "attractionId", date: "date" },
+    },
+    payment: {
+        tagName: "coras-payment-page",
+        load: () => import("../views/payment-page/payment-page.js"),
+        paramToProperty: identity("metadata"),
+    },
+    help: {
+        tagName: "coras-help-page",
+        load: () => import("../views/help-page/help-page.js"),
+        paramToProperty: identity("content"),
+    },
+    "suggestion-widget": {
+        tagName: "coras-suggestion-widget",
+        load: () => import("../views/suggestion-widget/suggestion-widget.js"),
+        paramToProperty: identity("limit", "showExploreCard", "country", "city"),
+    },
+};
+/** Apply normalized SDK config to a page (or chrome) element's properties. */
+export function applyConfig(element, config) {
+    element.apiHost = config.apiUrl;
+    element.distributorID = config.distributorId;
+    if (config.assetsUrl != null)
+        element.assetsURL = config.assetsUrl;
+    if (config.locale != null)
+        element.locale = config.locale;
+    if (config.allowedLocales != null)
+        element.locales = config.allowedLocales;
+    if (config.currency != null)
+        element.currency = config.currency;
+    if (config.allowedCurrencies != null)
+        element.currencies = config.allowedCurrencies;
+    if (config.loyaltyPointsEnabled != null) {
+        element.loyaltyPoints = config.loyaltyPointsEnabled;
+    }
+}
+/**
+ * Snapshot the element's default values for every param the page exposes. Taken
+ * right after creation (before any params are applied) so a later update can
+ * reset a param the host no longer provides back to its default — i.e. "clear"
+ * it — instead of leaving the stale value in place.
+ */
+export function captureParamDefaults(element, entry) {
+    const defaults = {};
+    for (const [paramName, property] of Object.entries(entry.paramToProperty)) {
+        defaults[paramName] = element[property];
+    }
+    return defaults;
+}
+/**
+ * Sync the element to the page's params. Params are the full desired state for
+ * the page: each known param is set to its provided value, or reset to the
+ * captured default when absent. This makes cleared params (dropped from the
+ * host's URL/state) actually clear on the element.
+ */
+export function applyParams(element, entry, params, defaults) {
+    for (const [paramName, property] of Object.entries(entry.paramToProperty)) {
+        const value = params[paramName];
+        element[property] = value !== undefined ? value : defaults[paramName];
+    }
+}

package/dist/sdk/redaction.d.ts

@@ -0,0 +1,11 @@
+import type { CorasPageName, CorasErrorDetail } from "./types.js";
+/** Mask sensitive substrings inside a string. */
+export declare function redactString(value: string): string;
+/** Recursively redact string values inside a JSON-ish structure. */
+export declare function redactValue(value: unknown): unknown;
+/**
+ * Convert any thrown value into a safe, redacted public error. Validation
+ * errors keep their stable code and (redacted) message; everything else is
+ * collapsed to a generic message so internal/provider details never leak.
+ */
+export declare function toPublicErrorDetail(error: unknown, page?: CorasPageName): CorasErrorDetail;

package/dist/sdk/redaction.js

@@ -0,0 +1,61 @@
+import { CorasValidationError } from "./validation.js";
+/**
+ * Data minimization for public payloads (P-038). Public errors, observability
+ * events, and logs must never carry secrets or unnecessary PII. These helpers
+ * scrub the values the SDK forwards to host callbacks/events.
+ */
+const REDACTED = "[redacted]";
+const SENSITIVE_PATTERNS = [
+    // Email addresses.
+    /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}/gi,
+    // Stripe-style secrets / keys / payment intents.
+    /\b(?:sk|pk|rk)_(?:live|test)_[a-z0-9]+/gi,
+    /\b(?:pi|seti|cs| pm|ch)_[a-z0-9]+_secret_[a-z0-9]+/gi,
+    /client_secret["':=\s]+[a-z0-9_-]+/gi,
+    // Bearer / access tokens.
+    /\bBearer\s+[a-z0-9._-]+/gi,
+    // Card-like number runs (13-19 digits, optionally space/dash separated).
+    /\b(?:\d[ -]?){13,19}\b/g,
+];
+/** Mask sensitive substrings inside a string. */
+export function redactString(value) {
+    let result = value;
+    for (const pattern of SENSITIVE_PATTERNS) {
+        result = result.replace(pattern, REDACTED);
+    }
+    return result;
+}
+/** Recursively redact string values inside a JSON-ish structure. */
+export function redactValue(value) {
+    if (typeof value === "string")
+        return redactString(value);
+    if (Array.isArray(value))
+        return value.map(redactValue);
+    if (value && typeof value === "object") {
+        const out = {};
+        for (const [key, item] of Object.entries(value)) {
+            out[key] = redactValue(item);
+        }
+        return out;
+    }
+    return value;
+}
+/**
+ * Convert any thrown value into a safe, redacted public error. Validation
+ * errors keep their stable code and (redacted) message; everything else is
+ * collapsed to a generic message so internal/provider details never leak.
+ */
+export function toPublicErrorDetail(error, page) {
+    if (error instanceof CorasValidationError) {
+        return {
+            code: error.code,
+            message: redactString(error.message),
+            ...(page ? { page } : {}),
+        };
+    }
+    return {
+        code: "mount_error",
+        message: "The Coras embed encountered an error.",
+        ...(page ? { page } : {}),
+    };
+}

package/dist/sdk/theme.d.ts

@@ -0,0 +1,19 @@
+import type { CorasColorScheme, CorasTheme } from "./types.js";
+/**
+ * The brand `theme` keys that map 1:1 to a public `--coras-brand-*` custom
+ * property. Sourced from the shared engine so the SDK, plugin, and Studio agree.
+ * `navbarShadow`, `logo`, and `fontFaces` are applied specially (below).
+ */
+export declare const THEME_CSS_VARS: Record<"primary" | "secondary" | "background" | "surface" | "text" | "textMuted" | "radius" | "font" | "textButton" | "bodyIcon" | "buttonRadius" | "chipRadius" | "navbar" | "navbarText" | "navbarIcon" | "navbarBorder" | "footer" | "footerText" | "footerLink" | "error" | "success" | "warning" | "info", string>;
+/**
+ * Set the mount root's colour scheme so the token sheet's `light-dark()` pairs
+ * resolve correctly. `"system"` maps to `light dark` (follows the OS via
+ * `prefers-color-scheme`); `"inherit"` overrides the sheet's default `light` so
+ * the root inherits the host page's `color-scheme`. Cheap enough to call on its
+ * own for a mode flip.
+ */
+export declare function applyColorScheme(element: HTMLElement, scheme: CorasColorScheme | undefined): void;
+/** Apply a brand to an element as scoped `--coras-*` variables (P-052/P-061). */
+export declare function applyTheme(element: HTMLElement, theme: CorasTheme | undefined): void;
+/** Remove any brand variables/fonts previously set on an element. */
+export declare function clearTheme(element: HTMLElement): void;

package/dist/sdk/theme.js

@@ -0,0 +1,75 @@
+import { BRAND_CSS_VARS, brandVarValue, fontFacesToCSS, sanitizeBrandValue, } from "@coras-io/brand-tokens";
+/**
+ * The brand `theme` keys that map 1:1 to a public `--coras-brand-*` custom
+ * property. Sourced from the shared engine so the SDK, plugin, and Studio agree.
+ * `navbarShadow`, `logo`, and `fontFaces` are applied specially (below).
+ */
+export const THEME_CSS_VARS = BRAND_CSS_VARS;
+const THEME_KEYS = Object.keys(THEME_CSS_VARS);
+/**
+ * Set the mount root's colour scheme so the token sheet's `light-dark()` pairs
+ * resolve correctly. `"system"` maps to `light dark` (follows the OS via
+ * `prefers-color-scheme`); `"inherit"` overrides the sheet's default `light` so
+ * the root inherits the host page's `color-scheme`. Cheap enough to call on its
+ * own for a mode flip.
+ */
+export function applyColorScheme(element, scheme) {
+    element.style.colorScheme =
+        scheme === "dark"
+            ? "dark"
+            : scheme === "system"
+                ? "light dark"
+                : scheme === "inherit"
+                    ? "inherit"
+                    : "light";
+}
+/** Apply a brand to an element as scoped `--coras-*` variables (P-052/P-061). */
+export function applyTheme(element, theme) {
+    if (!theme)
+        return;
+    // Each themeable var is emitted as a `light-dark()` pair (or a single value
+    // when the field has no dark variant) via the shared engine, which sanitizes
+    // both sides — an invalid value yields "" and is skipped, so the Coras default
+    // (itself a light-dark pair) shows through. The dark side falls back to the
+    // Coras dark default when the brand sets only the light value.
+    const dark = (theme.dark ?? {});
+    for (const key of THEME_KEYS) {
+        if (theme[key] == null && dark[key] == null)
+            continue;
+        const value = brandVarValue(key, theme[key], dark[key]);
+        if (value)
+            element.style.setProperty(THEME_CSS_VARS[key], value);
+    }
+    if (theme.navbarShadow != null) {
+        const shadow = sanitizeBrandValue("navbarShadow", theme.navbarShadow);
+        if (shadow) {
+            element.style.setProperty("--coras-brand-navbar-shadow", shadow);
+        }
+    }
+    // The page background is opt-in (see the root rule in tokens.css): only an
+    // explicit `background` paints the embed surface, so the embed otherwise
+    // adopts the host page's background.
+    if (theme.background != null || dark.background != null) {
+        const pageBg = brandVarValue("background", theme.background, dark.background);
+        if (pageBg)
+            element.style.setProperty("--coras-page-background", pageBg);
+    }
+    const faces = fontFacesToCSS(theme);
+    if (faces) {
+        const style = element.ownerDocument.createElement("style");
+        style.setAttribute("data-coras-fontfaces", "");
+        style.textContent = faces;
+        element.appendChild(style);
+    }
+}
+/** Remove any brand variables/fonts previously set on an element. */
+export function clearTheme(element) {
+    for (const key of THEME_KEYS) {
+        element.style.removeProperty(THEME_CSS_VARS[key]);
+    }
+    element.style.removeProperty("--coras-brand-navbar-shadow");
+    element.style.removeProperty("--coras-page-background");
+    element
+        .querySelectorAll(":scope > [data-coras-fontfaces]")
+        .forEach((n) => n.remove());
+}