@streamscloud/embeddable 10.1.2 → 11.0.0

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 = 'en', on } = $props();
 const localization = $derived(new ProductCardLocalization(locale));
 const shortDescriptionPresented = $derived(product.shortDescription && product.shortDescription.length > 0);
 const trackImpression = (node) => {
@@ -37,9 +37,22 @@ 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>
@@ -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,6 +103,12 @@ 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--width: auto;
@@ -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,6 +3,11 @@ import { type TrackingParams } from '../../marketing-tracking';
 import type { ProductCardModel } from './types';
 type Props = {
     product: ProductCardModel;
+    colors: {
+        background?: string | null;
+        price?: string | null;
+        salePrice?: string | null;
+    };
     locale?: Locale;
     includeBeforeNowPrefix?: boolean;
     inert?: boolean;

package/dist/streams/data-loaders/mapper.js

@@ -1,6 +1,5 @@
 import { ProfileType } from '../../core/enums';
 export const mapToStreamPlayerModel = (payload) => {
-    const headerDataProvider = payload.availableFrom ?? payload.ownerProfile;
     return {
         id: payload.id,
         title: payload.title,
@@ -9,10 +8,6 @@ export const mapToStreamPlayerModel = (payload) => {
         createdAt: payload.createdAt,
         publishedAt: payload.publishedAt,
         organizationId: payload.ownerProfile.type === ProfileType.Organization ? payload.ownerProfile.id : null,
-        header: {
-            name: headerDataProvider.name,
-            image: headerDataProvider.image
-        },
         pagesCount: payload.pagesCount
     };
 };

package/dist/streams/data-loaders/operations.generated.d.ts

@@ -17,15 +17,9 @@ export type GetStreamsQuery = {
                 url: string;
             } | null;
             ownerProfile: {
-                image: string | null;
-                name: string;
                 id: string;
                 type: SchemaTypes.ProfileType;
             };
-            availableFrom: {
-                image: string;
-                name: string;
-            } | null;
         }>;
     };
 };
@@ -57,15 +51,9 @@ export type StreamPlayerPayloadFragment = {
         url: string;
     } | null;
     ownerProfile: {
-        image: string | null;
-        name: string;
         id: string;
         type: SchemaTypes.ProfileType;
     };
-    availableFrom: {
-        image: string;
-        name: string;
-    } | null;
 };
 export declare const StreamPlayerPayloadFragmentDoc: DocumentNode<StreamPlayerPayloadFragment, unknown>;
 export declare const GetStreamsDocument: DocumentNode<GetStreamsQuery, GetStreamsQueryVariables>;

package/dist/streams/data-loaders/operations.generated.js

@@ -24,24 +24,11 @@ export const StreamPlayerPayloadFragmentDoc = {
                         selectionSet: {
                             kind: 'SelectionSet',
                             selections: [
-                                { kind: 'Field', name: { kind: 'Name', value: 'image' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'name' } },
                                 { kind: 'Field', name: { kind: 'Name', value: 'id' } },
                                 { kind: 'Field', name: { kind: 'Name', value: 'type' } }
                             ]
                         }
                     },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'availableFrom' },
-                        selectionSet: {
-                            kind: 'SelectionSet',
-                            selections: [
-                                { kind: 'Field', name: { kind: 'Name', value: 'image' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'name' } }
-                            ]
-                        }
-                    },
                     { kind: 'Field', name: { kind: 'Name', value: 'pagesCount' } }
                 ]
             }
@@ -108,24 +95,11 @@ export const GetStreamsDocument = {
                         selectionSet: {
                             kind: 'SelectionSet',
                             selections: [
-                                { kind: 'Field', name: { kind: 'Name', value: 'image' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'name' } },
                                 { kind: 'Field', name: { kind: 'Name', value: 'id' } },
                                 { kind: 'Field', name: { kind: 'Name', value: 'type' } }
                             ]
                         }
                     },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'availableFrom' },
-                        selectionSet: {
-                            kind: 'SelectionSet',
-                            selections: [
-                                { kind: 'Field', name: { kind: 'Name', value: 'image' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'name' } }
-                            ]
-                        }
-                    },
                     { kind: 'Field', name: { kind: 'Name', value: 'pagesCount' } }
                 ]
             }

package/dist/streams/data-loaders/operations.graphql

@@ -27,14 +27,8 @@ fragment StreamPlayerPayloadFragment on Stream {
     url
   }
   ownerProfile {
-    image
-    name
     id
     type
   }
-  availableFrom {
-    image
-    name
-  }
   pagesCount
 }

package/dist/streams/layout/element-views/cmp.short-video-stream-element.svelte

@@ -2,12 +2,13 @@
 import { PostViewer } from '../../../posts/post-viewer';
 import { ShortVideoStreamElementLocalization } from './short-video-stream-element-localization';
 import { mapToPostModel } from '../models';
-let { data, trackingParams, locale, on } = $props();
+let { data, trackingParams, locale, controlsColors = null, on } = $props();
 const localization = $derived(new ShortVideoStreamElementLocalization(locale));
 </script>
 
 <PostViewer
   model={new PostModel(mapToPostModel(data))}
+  controlsColors={controlsColors}
   trackingParams={trackingParams ? { streamId: trackingParams.streamId, campaignId: trackingParams.campaignId } : false}
   autoplay={false}
   enableControls={false}

package/dist/streams/layout/element-views/cmp.short-video-stream-element.svelte.d.ts

@@ -5,6 +5,10 @@ type Props = {
     data: StreamLayoutShortVideoModel;
     trackingParams: StreamTrackingParams;
     locale: Locale;
+    controlsColors?: {
+        active: string | null;
+        inactive: string | null;
+    } | null;
     on?: {
         progress?: (progress: number) => void;
     };

package/dist/streams/stream-card/cmp.stream-card.svelte

@@ -55,25 +55,25 @@ let { stream, aspectRatio = 9 / 16, on } = $props();
   bottom: 0;
   left: 0;
   right: 0;
-  height: 2.5rem;
+  height: clamp(1.75rem, 20cqi, 2.5rem);
+  padding-inline: clamp(0.5rem, 6cqi, 0.75rem);
   background: rgba(0, 0, 0, 0.8);
   color: #ffffff;
-  padding: 0 0.75rem;
   display: flex;
   flex-direction: column;
   align-content: center;
   justify-content: center;
 }
 .stream-card__title {
-  font-size: 0.875rem;
-  font-weight: 500;
+  font-size: clamp(0.5rem, 7cqi, 0.875rem);
+  font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   text-align: center;
 }
 .stream-card__sub-title {
-  font-size: 0.625rem;
+  font-size: clamp(0.4375rem, 5cqi, 0.625rem);
   font-weight: 400;
   white-space: nowrap;
   overflow: hidden;

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

@@ -33,7 +33,7 @@ export function openStreamsPlayer(init) {
         props: {
             config: mediaCenterConfig || null,
             playerProps: {
-                mode: 'stream',
+                mode: 'streams',
                 props: {
                     dataProvider,
                     analyticsHandler,

package/dist/streams/streams-player/stream-overview.svelte

@@ -1,47 +1,9 @@
-<script lang="ts">import { Image, ImageRound } from '../../ui/image';
+<script lang="ts">import { Image } from '../../ui/image';
 import { InfiniteScrolling } from '../../ui/infinite-scrolling';
-import { LineClamp } from '../../ui/line-clamp';
 import { ProportionalContainer } from '../../ui/proportional-container';
-import { TimeAgo } from '../../ui/time-ago';
-import { StreamPlayerLocalization } from './stream-player-localization';
-let { model, buffer, activePageId, on, localization } = $props();
+let { buffer, activePageId, on } = $props();
 </script>
 
-<div class="stream-overview-info">
-  <div class="stream-overview-owner">
-    <div class="stream-overview-owner__image">
-      <ImageRound src={model.header.image} />
-    </div>
-    <div class="stream-overview-owner__body">
-      <div class="stream-overview-owner__name">
-        <LineClamp maxLines={1}>
-          {model.header.name}
-        </LineClamp>
-      </div>
-      <div class="stream-overview-owner__meta">
-        <LineClamp maxLines={1}>
-          <TimeAgo date={model.publishedAt || model.createdAt} locale={localization.locale} />
-        </LineClamp>
-      </div>
-    </div>
-  </div>
-  <div class="stream-overview-info__title">
-    <LineClamp maxLines={2}>
-      {model.title}
-    </LineClamp>
-  </div>
-  {#if model.subTitle}
-    <div class="stream-overview-info__subtitle">
-      <LineClamp maxLines={3}>
-        {model.subTitle}
-      </LineClamp>
-    </div>
-  {/if}
-  <div class="stream-overview-info__pages">
-    {localization.pagesCount(model.pagesCount)}
-  </div>
-</div>
-
 <div class="stream-overview-pages">
   {#if buffer.activeChunk}
     <InfiniteScrolling loadMore={buffer.activeChunk.loadMore}>
@@ -73,34 +35,14 @@ let { model, buffer, activePageId, on, localization } = $props();
     opacity: 1;
   }
 }
-.stream-overview-info {
-  padding: 1rem;
-}
-.stream-overview-info__title {
-  font-size: 1.125rem;
-  line-height: 1.55;
-  font-weight: 600;
-  color: #ffffff;
-}
-.stream-overview-info__subtitle {
-  font-size: 0.875rem;
-  color: #ffffff;
-}
-.stream-overview-info__pages {
-  font-size: 0.625rem;
-  line-height: 1;
-  font-weight: 400;
-  letter-spacing: -0.0125rem;
-  color: #999999;
-}
-
 .stream-overview-pages {
   display: flex;
   flex: 1;
   justify-content: center;
   overflow-y: auto;
   overscroll-behavior: contain;
-  padding: 0.9375rem 0.9375rem 0;
+  padding-block: 0.9375rem 0;
+  padding-inline: 0.9375rem 1.3125rem;
   --_cross-browser-scrollbar--thumb-color: transparent;
   --_cross-browser-scrollbar--track-color: transparent;
 }
@@ -137,7 +79,7 @@ let { model, buffer, activePageId, on, localization } = $props();
   .stream-overview-pages__grid {
     display: grid;
     width: 100%;
-    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
     gap: 1.25rem;
   }
 }
@@ -153,37 +95,5 @@ let { model, buffer, activePageId, on, localization } = $props();
   }
 }
 .stream-overview-pages__page--active {
-  outline: 2px solid #5a8dec;
-}
-
-.stream-overview-owner {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-.stream-overview-owner__image {
-  width: 2rem;
-  min-width: 2rem;
-  max-width: 2rem;
-  height: 2rem;
-  min-height: 2rem;
-  max-height: 2rem;
-  --image--rounded--inner--border-width: 0;
-  --image--rounded--outer--border-color: #f2f2f3;
-  --image--rounded--outer--border-width: 1px;
-}
-.stream-overview-owner__body {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  color: #ffffff;
-}
-.stream-overview-owner__name {
-  font-size: 0.75rem;
-  font-weight: 500;
-  letter-spacing: -0.015625rem;
-}
-.stream-overview-owner__meta {
-  font-size: 0.625rem;
-  letter-spacing: -0.0125rem;
+  outline: 2px solid var(--brand-color, #5a8dec);
 }</style>

package/dist/streams/streams-player/stream-overview.svelte.d.ts

@@ -1,11 +1,7 @@
-import { StreamPlayerLocalization } from './stream-player-localization';
 import type { StreamsPlayerBuffer } from './streams-player-buffer.svelte';
-import type { StreamPlayerModel } from './types';
 type Props = {
-    model: StreamPlayerModel;
     buffer: StreamsPlayerBuffer;
     activePageId: string;
-    localization: StreamPlayerLocalization;
     on: {
         setCurrentItem: (index: number) => void;
     };

package/dist/streams/streams-player/stream-player-localization.d.ts

@@ -1,7 +1,6 @@
 import { type Locale } from '../../core/locale';
 export declare class StreamPlayerLocalization {
     streamNotFound: string;
-    pagesCount: (count: number) => string;
     locale: Locale;
     constructor(locale: Locale);
 }

package/dist/streams/streams-player/stream-player-localization.js

@@ -1,11 +1,9 @@
 import {} from '../../core/locale';
 export class StreamPlayerLocalization {
     streamNotFound;
-    pagesCount;
     locale;
     constructor(locale) {
         this.streamNotFound = loc.streamNotFound[locale];
-        this.pagesCount = loc.pagesCount[locale];
         this.locale = locale;
     }
 }
@@ -13,9 +11,5 @@ const loc = {
     streamNotFound: {
         en: 'Stream not found',
         no: 'Stream ikke funnet'
-    },
-    pagesCount: {
-        en: (count) => (count === 1 ? '1 page' : `${count} pages`),
-        no: (count) => (count === 1 ? '1 side' : `${count} sider`)
     }
 };

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

@@ -238,10 +238,8 @@ const stopActivityTracking = () => {
   {#snippet overviewPanelContent()}
     {#if contentPlayerConfig.playerBuffer && buffer && currentStreamModel}
       <Overview
-        model={currentStreamModel}
         buffer={buffer}
         activePageId={activePageId}
-        localization={localization}
         on={{
           setCurrentItem: handleChangePage
         }} />

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

@@ -9,10 +9,6 @@ export type StreamPlayerModel = {
     createdAt: string;
     publishedAt: string | null;
     organizationId: string | null;
-    header: {
-        image: string | null;
-        name: string;
-    };
     pagesCount: number;
 };
 export type StreamsPlayerProps = {

package/dist/ui/icon/cmp.icon.svelte

@@ -30,6 +30,7 @@ let { src, color = null } = $props();
 .icon {
   --_icon--color: var(--icon--color);
   --_icon--size: var(--icon--size, 1.25em);
+  --_icon--stroke-color: var(--icon--stroke-color);
   --_icon--stroke-width: var(--icon--stroke-width, 0);
   --_icon--filter: var(--icon--filter, none);
   display: contents;
@@ -89,10 +90,10 @@ let { src, color = null } = $props();
   max-width: var(--_icon--size);
 }
 .icon :global(path) {
-  stroke: var(--_icon--color);
+  stroke: var(--_icon--stroke-color, var(--_icon--color));
   stroke-width: var(--_icon--stroke-width);
 }
 :global([data-theme="dark"]) .icon :global(path) {
-  stroke: var(--_icon--color);
+  stroke: var(--_icon--stroke-color, var(--_icon--color));
   stroke-width: var(--_icon--stroke-width);
 }</style>

package/dist/ui/player/button/cmp.player-button.svelte

@@ -1,8 +1,18 @@
 <script lang="ts">import { Icon, IconColor } from '../../icon';
-let { icon, iconColor, scaleEffect = false, disabled = false, on } = $props();
+let { icon, activeColor, inactiveColor, iconColor, scaleEffect = false, disabled = false, zoom = 1, on } = $props();
+const styles = $derived.by(() => {
+    const values = [`zoom: ${zoom}`];
+    if (activeColor) {
+        values.push(`--player-button--color: ${activeColor}`);
+    }
+    if (inactiveColor) {
+        values.push(`--player-button--color--inactive: ${inactiveColor}`);
+    }
+    return values.join(';');
+});
 </script>
 
-<button type="button" class="player-button" class:player-button--scale-effect={scaleEffect} disabled={disabled} onclick={on.click}>
+<button type="button" class="player-button" style={styles} class:player-button--scale-effect={scaleEffect} disabled={disabled} onclick={on.click}>
   <span class="player-button__icon">
     <Icon src={icon} color={iconColor} />
   </span>
@@ -20,22 +30,24 @@ let { icon, iconColor, scaleEffect = false, disabled = false, on } = $props();
   }
 }
 .player-button {
+  --_player-button--color: var(--player-button--color, rgb(from #000000 r g b / 95%));
+  --_player-button--color--inactive: var(--player-button--color--inactive, rgb(from var(--_player-button--color, #000000) r g b / 60%));
   --_player-button--icon-scale: 1;
   pointer-events: auto;
   padding: 0.625rem;
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: var(--_player-button--color--inactive);
   transition: background-color 0.5s;
-  border: 1px solid #1c1c1c;
+  border: 1px solid var(--_player-button--color);
   border-radius: 50%;
   --icon--color: #ffffff;
   --icon--size: 1.75rem;
   /* Set 'container-type: inline-size;' to reference container*/
 }
 .player-button:hover:not(:disabled) {
-  background-color: rgba(0, 0, 0, 0.9);
+  background-color: var(--_player-button--color);
 }
 .player-button:disabled {
   opacity: 0.5;

package/dist/ui/player/button/cmp.player-button.svelte.d.ts

@@ -1,9 +1,12 @@
 import { IconColor } from '../../icon';
 type Props = {
     icon: string;
+    activeColor: string | null;
+    inactiveColor: string | null;
     iconColor?: IconColor;
     disabled?: boolean;
     scaleEffect?: boolean;
+    zoom?: number;
     on: {
         click: () => void;
     };

package/dist/ui/player/button/cmp.player-buttons-group.svelte

@@ -1,11 +1,21 @@
 <script lang="ts">import { Icon } from '../../icon';
-let { scaleEffect = false, actions } = $props();
+let { scaleEffect = false, borderColor, backgroundColor, actions } = $props();
+const styles = $derived.by(() => {
+    const values = [];
+    if (borderColor) {
+        values.push(`--player-buttons-group--border-color: ${borderColor}`);
+    }
+    if (backgroundColor) {
+        values.push(`--player-buttons-group--background-color: ${backgroundColor}`);
+    }
+    return values.join(';');
+});
 </script>
 
-<div class="player-buttons-group">
+<div class="player-buttons-group" style={styles}>
   {#each actions as action (action.icon)}
     <button type="button" class="player-buttons-group__action" class:player-buttons-group__action--scale-effect={scaleEffect} onclick={action.callback}>
-      <span class="player-buttons-group__action-icon">
+      <span class="player-buttons-group__action-icon" style={`--icon--stroke-width:${action.iconStrokeWidth}; --icon--stroke-color:${action.iconStrokeColor}`}>
         <Icon src={action.icon} color={action.iconColor} />
       </span>
     </button>
@@ -24,14 +34,19 @@ let { scaleEffect = false, actions } = $props();
   }
 }
 .player-buttons-group {
+  --_player-buttons-group--border-color: var(--player-buttons-group--border-color, rgb(from #000000 r g b / 95%));
+  --_player-buttons-group--background-color: var(
+    --player-buttons-group--background-color,
+    rgb(from var(--_player-buttons-group--border-color, #000000) r g b / 60%)
+  );
   cursor: pointer;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 1.125rem;
-  border: 1px solid #1c1c1c;
+  border: 1px solid var(--_player-buttons-group--border-color);
   border-radius: 1.25rem;
-  background: rgba(0, 0, 0, 0.6);
+  background: var(--_player-buttons-group--background-color);
   padding: 1rem 0.625rem;
   pointer-events: auto;
   /* Set 'container-type: inline-size;' to reference container*/

package/dist/ui/player/button/cmp.player-buttons-group.svelte.d.ts

@@ -1,5 +1,7 @@
 import type { PlayerButtonsGroupAction } from './types';
 type Props = {
+    borderColor: string | null;
+    backgroundColor: string | null;
     actions: PlayerButtonsGroupAction[];
     scaleEffect?: boolean;
 };

package/dist/ui/player/button/types.d.ts

@@ -2,5 +2,7 @@ import { IconColor } from '../../icon';
 export type PlayerButtonsGroupAction = {
     icon: string;
     iconColor?: IconColor;
+    iconStrokeColor?: string;
+    iconStrokeWidth?: string;
     callback: () => void;
 };