@streamscloud/embeddable 10.1.2 → 12.0.0

package/dist/posts/posts-player/cmp.posts-player.svelte

@@ -1,16 +1,32 @@
-<script lang="ts">import { createShadowRoot } from '../../ui/shadow-dom';
-import { default as PostsPlayerView } from './posts-player-view.svelte';
+<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { CloseOrchestrator } from '../../ui/player/close-orchestrator';
+import { createShadowRoot } from '../../ui/shadow-dom';
+import { default as PostsPlayerProxy } from './posts-player-proxy.svelte';
 import { mount, unmount } from 'svelte';
 let { dataProvider, socialInteractionsHandler, playerSettings, analyticsHandler, on } = $props();
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);
-    const mounted = mount(PostsPlayerView, {
+    const mounted = mount(PostsPlayerProxy, {
         target: shadowRoot,
         props: {
             dataProvider,
             socialInteractionsHandler,
             playerSettings,
             analyticsHandler,
+            closeOrchestrator: new CloseOrchestrator({
+                closeFn: () => __awaiter(void 0, void 0, void 0, function* () {
+                    yield unmount(mounted);
+                }),
+                canClose: false
+            }),
             on
         }
     });
@@ -22,6 +38,4 @@ const initHost = (node) => {
 };
 </script>
 
-{#key dataProvider}
-  <div class="posts-player-host" use:initHost></div>
-{/key}
+<div class="posts-player-host" use:initHost></div>

package/dist/posts/posts-player/cmp.posts-player.svelte.d.ts

@@ -1,4 +1,20 @@
-import type { PostPlayerProps } from './types';
-declare const Cmp: import("svelte").Component<PostPlayerProps, {}, "">;
+import type { Locale } from '../../core/locale';
+import type { IPostSocialInteractionsHandler } from '..';
+import type { IPlayerDataProvider } from '../../ui/player/providers';
+import type { IPostAnalyticsHandler, PostPlayerModel } from './types';
+type Props = {
+    dataProvider: IPlayerDataProvider<PostPlayerModel>;
+    socialInteractionsHandler?: IPostSocialInteractionsHandler;
+    analyticsHandler?: IPostAnalyticsHandler;
+    playerSettings?: {
+        locale?: Locale;
+        showStreamsCloudWatermark?: boolean;
+        disableBackground?: boolean;
+    };
+    on?: {
+        postActivated?: (id: string) => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/posts/posts-player/index.d.ts

@@ -1,7 +1,8 @@
+import type { Locale } from '../../core/locale';
 import { type IMediaCenterConfig } from '../../media-center/config/types';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
 import { default as PostsPlayer } from './cmp.posts-player.svelte';
-import type { IPostAnalyticsHandler, PostPlayerModel, PostPlayerSettings } from './types';
+import type { IPostAnalyticsHandler, PostPlayerModel } from './types';
 export { PostsPlayer, type PostPlayerModel };
 export type { IMediaCenterConfig, IPostAnalyticsHandler };
 export { mapToPostPlayerModel } from '../data-loaders/mapper';
@@ -74,10 +75,18 @@ export { mapToPostPlayerModel } from '../data-loaders/mapper';
  */
 export declare function openPostsPlayer(init: {
     postsProvider: IPostsPlayerDataProvider;
-    mediaCenterConfig?: IMediaCenterConfig;
+    mediaCenterConfig: IMediaCenterConfig;
+    playerSettings?: PostsPlayerSettings;
+    on?: {
+        playerClosed?: () => void;
+        postActivated?: (id: string) => void;
+    };
+}): void;
+export declare function openPostsPlayer(init: {
+    postsProvider: IPostsPlayerDataProvider;
     analyticsHandler?: IPostAnalyticsHandler;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
-    playerSettings?: PostPlayerSettings;
+    playerSettings?: PostsPlayerSettings;
     on?: {
         playerClosed?: () => void;
         postActivated?: (id: string) => void;
@@ -106,3 +115,9 @@ export type IPostsPlayerDataProvider<TChunk extends WithId = WithId> = {
 type WithId = {
     id: string;
 };
+export type PostsPlayerSettings = {
+    disableBackground?: boolean;
+    locale?: Locale;
+    showStreamsCloudWatermark?: boolean;
+    hideCloseButton?: boolean;
+};

package/dist/posts/posts-player/index.js

@@ -1,104 +1,57 @@
 import {} from '../../media-center/config/types';
 import { MediaCenter } from '../../media-center/media-center';
+import { CloseOrchestrator } from '../../ui/player/close-orchestrator';
 import { ModalShadowHost } from '../../ui/shadow-dom';
 import { default as PostsPlayer } from './cmp.posts-player.svelte';
+import { default as PostsPlayerProxy } from './posts-player-proxy.svelte';
 import { mount, unmount } from 'svelte';
 export { PostsPlayer };
 export { mapToPostPlayerModel } from '../data-loaders/mapper';
-/**
- * Opens the posts player modal.
- *
- * @param init Configuration options.
- *
- * Data provider (required)
- * @param init.postsProvider
- *   Provider that supplies post items to the player.
- *
- * Media center (optional)
- * @param {IMediaCenterConfig} [init.mediaCenterConfig]
- *   Optional media-center config passed to MediaCenter.
- *
- * Analytics (optional)
- * @param {IPostAnalyticsHandler} [init.analyticsHandler]
- *   Custom analytics handler for posts player events.
- *
- * Social interactions (optional)
- * @param {IPostSocialInteractionsHandler} [init.socialInteractionsHandler]
- *   Handler for social interactions (like, share, etc.).
- *
- * Player settings
- * @param {PostPlayerSettings} [init.playerSettings]
- *   Player UI and behavior settings.
- *   Fields of PostPlayerSettings:
- *   - {boolean} [disableBackground]
- *       If true, hides the player's background image.
- *   - {boolean} [hideCloseButton]
- *       If true, hides the close button.
- *   - {'en'|'no'} [locale='en']
- *       Localization for the player UI. Default is 'en'; use 'no' for Norwegian.
- *   - {boolean} [showStreamsCloudWatermark]
- *       If true, shows the StreamsCloud watermark.
- *
- * Events
- * @param {{ playerClosed?: () => void; postActivated?: (id: string) => void }} [init.on]
- *   Optional event handlers.
- * @param {() => void} [init.on.playerClosed]
- *   Called after the player is fully closed (after unmount and removal from the DOM).
- * @param {(id: string) => void} [init.on.postActivated]
- *   Called when a post becomes active (receives the post's id).
- *
- * @returns {void}
- *
- * @example
- * ```ts
- * import { openPostsPlayer } from '@streamscloud/embeddable/posts-player';
- *
- * openPostsPlayer({
- *   postsProvider: myPostsProvider,
- *   mediaCenterConfig: myMediaCenterConfig,
- *   analyticsHandler: myAnalyticsHandler,
- *   socialInteractionsHandler: mySocialHandler,
- *   playerSettings: {
- *     // Default locale is 'en'; set 'no' to switch to Norwegian:
- *     locale: 'no',
- *     disableBackground: false,
- *     hideCloseButton: false,
- *     showStreamsCloudWatermark: true,
- *   },
- *   on: {
- *     playerClosed: () => console.log('Player closed'),
- *     postActivated: (id) => console.log('Activated post', id),
- *   },
- * });
- * ```
- */
 export function openPostsPlayer(init) {
     const { postsProvider: dataProvider, mediaCenterConfig, analyticsHandler, socialInteractionsHandler, playerSettings, on } = init;
     const shadowHost = new ModalShadowHost();
-    const mounted = mount(MediaCenter, {
-        target: shadowHost.shadowRoot,
-        props: {
-            config: mediaCenterConfig || null,
-            playerProps: {
-                mode: 'posts',
-                props: {
-                    dataProvider,
-                    socialInteractionsHandler,
-                    analyticsHandler,
-                    playerSettings,
-                    on: {
-                        playerClosed: async () => {
-                            await unmount(mounted);
-                            shadowHost.remove();
-                            if (on?.playerClosed) {
-                                on.playerClosed();
-                            }
-                        },
-                        postActivated: on?.postActivated
+    let mounted;
+    const makeCloseOrchestrator = () => new CloseOrchestrator({
+        closeFn: async () => {
+            await unmount(mounted);
+            shadowHost.remove();
+            if (on?.playerClosed) {
+                on.playerClosed();
+            }
+        },
+        canClose: !playerSettings?.hideCloseButton
+    });
+    if (mediaCenterConfig) {
+        mounted = mount(MediaCenter, {
+            target: shadowHost.shadowRoot,
+            props: {
+                config: mediaCenterConfig,
+                settings: playerSettings,
+                modeProps: {
+                    mode: 'posts',
+                    props: {
+                        dataProvider,
+                        onPostActivated: on?.postActivated
                     }
+                },
+                closeOrchestrator: makeCloseOrchestrator()
+            }
+        });
+    }
+    else {
+        mounted = mount(PostsPlayerProxy, {
+            target: shadowHost.shadowRoot,
+            props: {
+                dataProvider,
+                socialInteractionsHandler,
+                analyticsHandler,
+                playerSettings,
+                closeOrchestrator: makeCloseOrchestrator(),
+                on: {
+                    postActivated: on?.postActivated
                 }
             }
-        }
-    });
+        });
+    }
     shadowHost.attachToBody();
 }

package/dist/posts/posts-player/posts-player-proxy.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">import {} from '../../ui/player/close-orchestrator';
+import { WithBackground } from '../../ui/with-background';
+import { default as PostsPlayerView } from './posts-player-view.svelte';
+let { dataProvider, socialInteractionsHandler, closeOrchestrator, playerSettings, analyticsHandler, on } = $props();
+let backgroundImageUrl = $state(null);
+const handleBackgroundImagedLoaded = (url) => {
+    backgroundImageUrl = url;
+};
+</script>
+
+<WithBackground backgroundDisabled={playerSettings?.disableBackground === true} backgroundImageUrl={backgroundImageUrl}>
+  <PostsPlayerView
+    dataProvider={{ type: 'provider', provider: dataProvider }}
+    socialInteractionsHandler={socialInteractionsHandler}
+    playerSettings={playerSettings}
+    analyticsHandler={analyticsHandler}
+    closeOrchestrator={closeOrchestrator}
+    on={{ postActivated: on?.postActivated, backgroundImageLoaded: playerSettings?.disableBackground === true ? undefined : handleBackgroundImagedLoaded }} />
+</WithBackground>

package/dist/posts/posts-player/posts-player-proxy.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Locale } from '../../core/locale';
+import type { IPostSocialInteractionsHandler } from '..';
+import { type ICloseOrchestrator } from '../../ui/player/close-orchestrator';
+import type { IPlayerDataProvider } from '../../ui/player/providers';
+import type { IPostAnalyticsHandler, PostPlayerModel } from './types';
+type Props = {
+    dataProvider: IPlayerDataProvider<PostPlayerModel>;
+    socialInteractionsHandler?: IPostSocialInteractionsHandler;
+    analyticsHandler?: IPostAnalyticsHandler;
+    closeOrchestrator: ICloseOrchestrator;
+    playerSettings?: {
+        locale?: Locale;
+        showStreamsCloudWatermark?: boolean;
+        disableBackground?: boolean;
+    };
+    on?: {
+        postActivated?: (id: string) => void;
+    };
+};
+declare const PostsPlayerProxy: import("svelte").Component<Props, {}, "">;
+type PostsPlayerProxy = ReturnType<typeof PostsPlayerProxy>;
+export default PostsPlayerProxy;

package/dist/posts/posts-player/posts-player-view.svelte

@@ -11,11 +11,11 @@ import { PostType } from '../..';
 import { ContentPlayer, ContentPlayerConfig } from '../../content-player';
 import { ContentPlayerSettings } from '../../content-player/content-player-settings';
 import { preloadImage } from '../../core/image-preloader';
-import { Utils } from '../../core/utils';
 import { getPostCoverImage } from '../model';
-import { DefaultChunksPlayerBuffer, DefaultFeedPlayerBuffer } from '../../ui/player/providers';
+import {} from '../../ui/player/providers';
+import { initBufferFromProvider } from '../../ui/player/providers/service';
 import { untrack } from 'svelte';
-let { dataProvider, socialInteractionsHandler, playerSettings, analyticsHandler, on, mediaCenterData } = $props();
+let { dataProvider, socialInteractionsHandler, playerSettings, analyticsHandler, closeOrchestrator, on } = $props();
 $effect(() => {
     void dataProvider;
     untrack(() => {
@@ -23,36 +23,21 @@ $effect(() => {
         initBuffer(dataProvider);
     });
 });
-$effect(() => contentPlayerConfig.updateMediaCenterData(mediaCenterData));
 const initBuffer = (dataProvider) => __awaiter(void 0, void 0, void 0, function* () {
-    switch (dataProvider.kind) {
-        case 'feed':
-            new DefaultFeedPlayerBuffer(dataProvider, {
-                preloaded: (instance) => __awaiter(void 0, void 0, void 0, function* () {
-                    if (instance.loaded.length) {
-                        const coverUrl = getPostCoverImage(instance.loaded[0]);
-                        yield preloadImage(coverUrl);
-                        contentPlayerConfig.setBackgroundImageUrl(coverUrl);
-                    }
-                    contentPlayerConfig.playerBuffer = instance;
-                })
-            });
-            break;
-        case 'chunks':
-            new DefaultChunksPlayerBuffer(dataProvider, {
-                preloaded: (instance) => __awaiter(void 0, void 0, void 0, function* () {
-                    if (instance.loaded.length) {
-                        const coverUrl = getPostCoverImage(instance.loaded[0]);
-                        yield preloadImage(coverUrl);
-                        contentPlayerConfig.setBackgroundImageUrl(coverUrl);
-                    }
-                    contentPlayerConfig.playerBuffer = instance;
-                })
-            });
-            break;
-        default:
-            Utils.assertUnreachable(dataProvider);
+    let newBuffer;
+    if (dataProvider.type === 'buffer') {
+        newBuffer = dataProvider.buffer;
     }
+    else {
+        newBuffer = initBufferFromProvider(dataProvider.provider);
+    }
+    yield newBuffer.ensureWarmedUp();
+    if (newBuffer.loaded.length && (on === null || on === void 0 ? void 0 : on.backgroundImageLoaded)) {
+        const coverUrl = getPostCoverImage(newBuffer.loaded[0]);
+        yield preloadImage(coverUrl);
+        on.backgroundImageLoaded(coverUrl);
+    }
+    contentPlayerConfig.playerBuffer = newBuffer;
 });
 const getLoadedItemById = (id) => {
     if (!contentPlayerConfig.playerBuffer) {
@@ -66,10 +51,9 @@ const contentPlayerConfig = new ContentPlayerConfig({
         postModelFromCurrentItem: (item) => item
     },
     socialInteractionsHandler,
-    mediaCenterData,
     settings: new ContentPlayerSettings(playerSettings),
+    closeOrchestrator,
     callbacks: {
-        close: on === null || on === void 0 ? void 0 : on.playerClosed,
         productClick: (id, postId) => {
             var _a;
             if (((_a = getLoadedItemById(postId)) === null || _a === void 0 ? void 0 : _a.postType) === PostType.ShortVideo) {
@@ -96,7 +80,9 @@ const contentPlayerConfig = new ContentPlayerConfig({
             if (!post) {
                 return;
             }
-            contentPlayerConfig.setBackgroundImageUrl(getPostCoverImage(post));
+            if (on === null || on === void 0 ? void 0 : on.backgroundImageLoaded) {
+                on.backgroundImageLoaded(getPostCoverImage(post));
+            }
             if (post.analyticsOrganizationId) {
                 analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.setOrganizationId(post.analyticsOrganizationId);
             }

package/dist/posts/posts-player/posts-player-view.svelte.d.ts

@@ -1,8 +1,4 @@
-import type { MediaCenterData } from '../../media-center/model/types';
-import type { PostPlayerProps } from './types';
-type $$ComponentProps = PostPlayerProps & {
-    mediaCenterData?: MediaCenterData;
-};
-declare const PostsPlayerView: import("svelte").Component<$$ComponentProps, {}, "">;
+import type { PostsPlayerProps } from './types';
+declare const PostsPlayerView: import("svelte").Component<PostsPlayerProps, {}, "">;
 type PostsPlayerView = ReturnType<typeof PostsPlayerView>;
 export default PostsPlayerView;

package/dist/posts/posts-player/types.d.ts

@@ -1,7 +1,9 @@
-import type { IContentPlayerSettingsInitializer } from '../../content-player/content-player-settings';
+import type { Locale } from '../../core/locale';
 import type { IPostModel } from '..';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
-import type { IPlayerDataProvider } from '../../ui/player/providers';
+import type { ICloseOrchestrator } from '../../ui/player/close-orchestrator';
+import type { PlayerColors } from '../../ui/player/colors';
+import type { IPlayerBuffer, IPlayerDataProvider } from '../../ui/player/providers';
 export interface IPostAnalyticsHandler {
     setOrganizationId: (organizationId: string) => void;
     trackPostOpened: (postId: string, ownerId: string) => void;
@@ -14,14 +16,25 @@ export interface IPostAnalyticsHandler {
 export type PostPlayerModel = IPostModel & {
     analyticsOrganizationId: string | null;
 };
-export type PostPlayerProps = {
-    dataProvider: IPlayerDataProvider<PostPlayerModel>;
+export type PostsPlayerProps = {
+    dataProvider: {
+        type: 'buffer';
+        buffer: IPlayerBuffer<PostPlayerModel>;
+    } | {
+        type: 'provider';
+        provider: IPlayerDataProvider<PostPlayerModel>;
+    };
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
     analyticsHandler?: IPostAnalyticsHandler;
     playerSettings?: PostPlayerSettings;
+    closeOrchestrator: ICloseOrchestrator;
     on?: {
-        playerClosed?: () => void;
         postActivated?: (id: string) => void;
+        backgroundImageLoaded?: (imageUrl: string | null) => void;
     };
 };
-export type PostPlayerSettings = IContentPlayerSettingsInitializer;
+export type PostPlayerSettings = {
+    locale?: Locale;
+    showStreamsCloudWatermark?: boolean;
+    playerColors?: PlayerColors;
+};

package/dist/products/product-card/cmp.product-card.svelte

@@ -4,7 +4,7 @@ import { Image } from '../../ui/image';
 import { LineClamp } from '../../ui/line-clamp';
 import { ProportionalContainer } from '../../ui/proportional-container';
 import { ProductCardLocalization } from './product-card-localization';
-let { product, includeBeforeNowPrefix, trackingParams, inert = false, locale = 'en', on } = $props();
+let { product, colors, includeBeforeNowPrefix, trackingParams, inert = false, locale, on } = $props();
 const localization = $derived(new ProductCardLocalization(locale));
 const shortDescriptionPresented = $derived(product.shortDescription && product.shortDescription.length > 0);
 const trackImpression = (node) => {
@@ -37,21 +37,34 @@ const onProductClicked = (event) => {
         window.open(enrichedLink, '_blank', 'noopener noreferrer');
     }
 };
+const styles = $derived.by(() => {
+    const values = [];
+    if (colors === null || colors === void 0 ? void 0 : colors.background) {
+        values.push(`--product-card--background-color: ${colors.background}`);
+    }
+    if (colors === null || colors === void 0 ? void 0 : colors.price) {
+        values.push(`--product-card--price-color: ${colors.price}`);
+    }
+    if (colors === null || colors === void 0 ? void 0 : colors.salePrice) {
+        values.push(`--product-card--sale-price-color: ${colors.salePrice}`);
+    }
+    return values.join(';');
+});
 </script>
 
-<div class="product-card" inert={inert} use:trackImpression>
+<div class="product-card" inert={inert} use:trackImpression style={styles}>
   <ProportionalContainer ratio={1}>
     <Image src={product.image} />
   </ProportionalContainer>
 
   <div class="product-card__info">
-    <LineClamp maxLines={1}>
+    <LineClamp maxLines={1} locale={locale}>
       <div class="product-card__brand">{product.brandName}</div>
     </LineClamp>
-    <LineClamp value={product.shortDescription} maxLines={shortDescriptionPresented ? 1 : 2}>
+    <LineClamp maxLines={shortDescriptionPresented ? 1 : 2} locale={locale}>
       <div class="product-card__title" class:two-lines={!shortDescriptionPresented}>{product.title}</div>
     </LineClamp>
-    <LineClamp value={product.shortDescription} maxLines={2}>
+    <LineClamp maxLines={2} locale={locale}>
       <div class="product-card__description" class:two-lines={shortDescriptionPresented}>{product.shortDescription}</div>
     </LineClamp>
     <div class="product-price">
@@ -63,7 +76,7 @@ const onProductClicked = (event) => {
           {toPriceRepresentation({ amount: product.price, currency: product.currency })}
         {/if}
       </div>
-      <div class="product-price__price product-price__price--sale">
+      <div class="product-price__price" class:product-price__price--sale={product.salePrice}>
         {toPriceRepresentation({ amount: product.salePrice ?? product.price, currency: product.currency })}
       </div>
     </div>
@@ -90,8 +103,14 @@ const onProductClicked = (event) => {
 .product-card {
   --_product-card--aspect-ratio: var(--product-card--aspect-ratio, 10/16);
   --_product-card--border-radius: var(--product-card--border-radius, 0.5rem);
+  --_product-card--background-color: var(--product-card--background-color, rgb(from #ffffff r g b/90%));
+  --_product-card--border-color: var(--product-card--background-color, #f2f2f3);
+  --_product-card--price-color: var(--product-card--price-color, inherit);
+  --_product-card--sale-price-color: var(--product-card--sale-price-color, inherit);
+  --product-price-color: var(--_product-card--price-color);
+  --product-price--sale--color: var(--_product-card--sale-price-color);
   --image--border-radius: 0.25rem;
-  --image--object-fit: contain;
+  --image--object-fit: cover;
   --image--width: auto;
   --image--height: auto;
   width: 100%;
@@ -102,17 +121,17 @@ const onProductClicked = (event) => {
   container-type: inline-size;
   aspect-ratio: var(--_product-card--aspect-ratio);
   color: #000000;
-  background-color: rgba(255, 255, 255, 0.9);
-  border: 1px solid #f2f2f3;
+  background-color: var(--_product-card--background-color);
+  border: 1px solid var(--_product-card--border-color);
   border-radius: var(--_product-card--border-radius);
   padding: 0.75rem 0.75rem 1.125rem;
   justify-content: space-between;
   /* Set 'container-type: inline-size;' to reference container*/
 }
 :global([data-theme="dark"]) .product-card {
-  background-color: rgba(18, 18, 18, 0.9);
+  --_product-card--background-color: var(--product-card--background-color, rgb(from #121212 r g b/90%));
+  --_product-card--border-color: var(--product-card--background-color, #1e1e1e);
   color: #ffffff;
-  border-color: #1e1e1e;
 }
 @container (width < 230px) {
   .product-card {
@@ -196,19 +215,18 @@ const onProductClicked = (event) => {
 }
 
 .product-price {
-  --_product-price--align: right;
+  --_product-price--color: var(--product-price-color);
+  --_product-price--sale--color: var(--product-price--sale--color);
   --_product-price--before--color: #6b7280;
   --_product-price--before--font-size: 0.75em;
-  --_product-price--color: inherit;
   --_product-price--font-size: 1.875em;
   --_product-price--gap: 0.375em;
-  --_product-price--min-height: 2.40625rem;
+  --_product-price--align: right;
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-items: end;
   gap: var(--_product-price--gap);
-  min-height: var(--_product-price--min-height);
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 230px) {
@@ -218,6 +236,9 @@ const onProductClicked = (event) => {
     --_product-price--gap: 0.25rem;
   }
 }
+:global([data-theme="dark"]) .product-price {
+  --_product-price--before--color: #d1d5db;
+}
 .product-price__before-price {
   width: 100%;
   color: var(--_product-price--before--color);
@@ -243,4 +264,7 @@ const onProductClicked = (event) => {
   width: 100%;
   white-space: nowrap;
   overflow: hidden;
+}
+.product-price__price--sale {
+  color: var(--_product-price--sale--color);
 }</style>

package/dist/products/product-card/cmp.product-card.svelte.d.ts

@@ -3,7 +3,12 @@ import { type TrackingParams } from '../../marketing-tracking';
 import type { ProductCardModel } from './types';
 type Props = {
     product: ProductCardModel;
-    locale?: Locale;
+    colors: {
+        background?: string | null;
+        price?: string | null;
+        salePrice?: string | null;
+    };
+    locale: Locale;
     includeBeforeNowPrefix?: boolean;
     inert?: boolean;
     trackingParams: TrackingParams;