@streamscloud/embeddable 12.1.0 → 13.0.0

package/dist/ui/player/providers/default-chunks-player-buffer.svelte.d.ts

@@ -9,6 +9,7 @@ export declare class DefaultChunksPlayerBuffer<TItem extends WithId, TChunk exte
     readonly navigationDisabled: boolean;
     readonly animationDuration = 500;
     private _playerChunksManager;
+    private _onEndReachedFn;
     constructor(provider: IChunksPlayerDataProvider<TItem, TChunk>);
     get activeChunk(): import("./chunks-player-buffer").PlayerChunk<TItem, TChunk>;
     setActiveChunkItemIndex: (index: number) => void;

package/dist/ui/player/providers/default-chunks-player-buffer.svelte.js

@@ -5,12 +5,14 @@ export class DefaultChunksPlayerBuffer {
     loaded = $derived.by(() => this._playerChunksManager.flattenedChunkItems);
     currentIndex = $derived.by(() => this._playerChunksManager.flattenedActiveChunkItemIndex);
     current = $derived(this.currentIndex >= 0 ? this.loaded[this.currentIndex] : null);
-    canLoadNext = $derived(this.currentIndex < this.loaded.length - 1);
+    canLoadNext = $derived.by(() => this.currentIndex < this.loaded.length - 1 || !!this._onEndReachedFn);
     canLoadPrevious = $derived(this.currentIndex > 0);
     navigationDisabled = $derived(!this.canLoadNext && !this.canLoadPrevious);
     animationDuration = 500;
     _playerChunksManager;
+    _onEndReachedFn;
     constructor(provider) {
+        this._onEndReachedFn = provider.onEndReached;
         // Throttle navigation methods
         this.loadNext = Utils.throttle(this.loadNext, this.animationDuration);
         this.loadPrevious = Utils.throttle(this.loadPrevious, this.animationDuration);
@@ -30,6 +32,10 @@ export class DefaultChunksPlayerBuffer {
         if (!this.canLoadNext) {
             return;
         }
+        if (this.currentIndex >= this.loaded.length - 1) {
+            this._onEndReachedFn?.();
+            return;
+        }
         this._playerChunksManager.activateItemAtFlattenedIndex(this.currentIndex + 1);
     };
     loadPrevious = async () => {

package/dist/ui/player/providers/default-feed-player-buffer.svelte.d.ts

@@ -16,6 +16,7 @@ export declare class DefaultFeedPlayerBuffer<T extends WithId> implements IFeedP
     private _loaded;
     private _loadMoreFn;
     private _fetchDeferred;
+    private _onEndReachedFn;
     constructor(provider: IFeedPlayerDataProvider<T>);
     loadNext: () => Promise<void>;
     loadPrevious: () => Promise<void>;

package/dist/ui/player/providers/default-feed-player-buffer.svelte.js

@@ -6,7 +6,7 @@ export class DefaultFeedPlayerBuffer {
     loaded = $derived.by(() => this._loaded);
     currentIndex = $derived.by(() => this._currentIndex);
     current = $derived(this.currentIndex >= 0 ? this.loaded[this.currentIndex] : null);
-    canLoadNext = $derived(this.currentIndex < this.loaded.length - 1);
+    canLoadNext = $derived.by(() => this.currentIndex < this.loaded.length - 1 || !!this._onEndReachedFn);
     canLoadPrevious = $derived(this.currentIndex > 0);
     navigationDisabled = $derived(!this.canLoadNext && !this.canLoadPrevious);
     animationDuration = 500;
@@ -14,7 +14,9 @@ export class DefaultFeedPlayerBuffer {
     _loaded = $state.raw([]);
     _loadMoreFn;
     _fetchDeferred = $state.raw(null);
+    _onEndReachedFn;
     constructor(provider) {
+        this._onEndReachedFn = provider.onEndReached;
         this._loadMoreFn = provider.loadMore;
         // Throttle navigation methods
         this.loadNext = Utils.throttle(this.loadNext, this.animationDuration);
@@ -25,6 +27,10 @@ export class DefaultFeedPlayerBuffer {
         if (!this.canLoadNext) {
             return;
         }
+        if (this.currentIndex >= this.loaded.length - 1) {
+            this._onEndReachedFn?.();
+            return;
+        }
         ++this._currentIndex;
         this.warmUpBuffer();
     };

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

@@ -6,7 +6,8 @@ export interface IFeedPlayerDataProvider<T extends WithId> {
         startIndex: number;
         startMediaIndex?: number;
     };
-    loadMore(): Promise<T[]>;
+    loadMore: () => Promise<T[]>;
+    onEndReached?: () => void;
 }
 export interface IChunksPlayerDataProvider<TItem extends WithId, TChunk extends WithId = WithId> {
     kind: 'chunks';
@@ -19,6 +20,7 @@ export interface IChunksPlayerDataProvider<TItem extends WithId, TChunk extends
         items: TItem[];
         continuationToken: string | null;
     }>;
+    onEndReached?: () => void;
 }
 export type IPlayerBuffer<T extends WithId> = IFeedPlayerBuffer<T> | IChunksPlayerBuffer<T>;
 export interface IPlayerBufferBase<T extends WithId> {

package/dist/ui/shadow-dom/cmp.shadow-root.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">import { Theme } from '../../core/theme';
+let { backgroundDisabled, backgroundImageUrl, backgroundColor, children } = $props();
+const styles = $derived.by(() => {
+    const values = [];
+    if (backgroundImageUrl) {
+        values.push(`--shadow-root--background-image-url: url(${backgroundImageUrl})`);
+    }
+    if (backgroundColor) {
+        values.push(`--shadow-root--background: ${backgroundColor}`);
+    }
+    return values.join(';');
+});
+</script>
+
+<svelte:head>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap" />
+  <meta name="theme-color" content="#242424" />
+  <meta name="color-scheme" content="dark" />
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+
+  <style>
+    html,
+    body {
+      background-color: #242424;
+      color-scheme: dark;
+    }
+  </style>
+</svelte:head>
+
+<div
+  class="shadow-root"
+  class:shadow-root--background-enabled={!backgroundDisabled}
+  class:shadow-root--background-active={!backgroundDisabled && backgroundImageUrl && backgroundImageUrl !== 'not-applicable'}
+  class:shadow-root--background-loading={!backgroundDisabled && !backgroundImageUrl}
+  style={styles}
+  data-theme={Theme.get()}>
+  {@render children()}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+:host,
+:global([data-theme="default"]) {
+  /* Backgrounds */
+  --sc-mc-color--bg-button: #ffffff;
+  --sc-mc-color--bg-card: #ffffff;
+  --sc-mc-color--bg-image: #d1d5db;
+  --sc-mc-color--bg-panel: #ffffff;
+  --sc-mc-color--bg-screen: #f9fafb;
+  /* Borders */
+  --sc-mc-color--border-brand: #144ab0;
+  --sc-mc-color--border-card: #f2f2f2;
+  /* Buttons */
+  --sc-mc-color--button-secondary: #9ca3af;
+  --sc-mc-color--button-player: #272727;
+  /* Icons */
+  --sc-mc-color--icon-brand: #144ab0;
+  --sc-mc-color--icon-destructive: #e71d36;
+  --sc-mc-color--icon-overlay: #ffffff;
+  --sc-mc-color--icon-overlay-shadow: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
+  --sc-mc-color--icon-primary: #1f2937;
+  --sc-mc-color--icon-secondary: #9ca3af;
+  --sc-mc-color--icon-success: #0cce6b;
+  --sc-mc-color--icon-warning: #ffa62b;
+  /* Text */
+  --sc-mc-color--text-brand: #144ab0;
+  --sc-mc-color--text-inverted: #ffffff;
+  --sc-mc-color--text-primary: #000000;
+  --sc-mc-color--text-secondary: #6b7280;
+  --sc-mc-color--text-white: #ffffff;
+  --sc-mc-color--text-white-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
+  --sc-mc-color--text-inactive: #e5e7eb;
+}
+
+:global([data-theme="dark"]) {
+  /* Backgrounds */
+  --sc-mc-color--bg-button: #111827;
+  --sc-mc-color--bg-card: #000000;
+  --sc-mc-color--bg-image: #374151;
+  --sc-mc-color--bg-panel: #000000;
+  --sc-mc-color--bg-screen: #1e1e1e;
+  /* Borders */
+  --sc-mc-color--border-brand: #5a8dec;
+  --sc-mc-color--border-card: #000000;
+  /* Buttons */
+  --sc-mc-color--button-secondary: #9ca3af;
+  --sc-mc-color--button-player: #000000;
+  /* Icons */
+  --sc-mc-color--icon-brand: #ffffff;
+  --sc-mc-color--icon-destructive: #d4172d;
+  --sc-mc-color--icon-overlay: #ffffff;
+  --sc-mc-color--icon-overlay-shadow: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
+  --sc-mc-color--icon-primary: #1f2937;
+  --sc-mc-color--icon-secondary: #9ca3af;
+  --sc-mc-color--icon-success: #0cce6b;
+  --sc-mc-color--icon-warning: #ffa62b;
+  /* Text */
+  --sc-mc-color--text-brand: #5a8dec;
+  --sc-mc-color--text-inverted: #ffffff;
+  --sc-mc-color--text-primary: #ffffff;
+  --sc-mc-color--text-secondary: #d1d5db;
+  --sc-mc-color--text-white: #ffffff;
+  --sc-mc-color--text-white-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
+  --sc-mc-color--text-inactive: #d1d5db;
+}
+
+.shadow-root {
+  --_shadow-root--background-color: rgb(from var(--shadow-root--background, var(--sc-mc-color--bg-screen)) r g b);
+  --_shadow-root--shield-color: rgb(from var(--shadow-root--background, rgb(from var(--sc-mc-color--bg-screen) r g b / 50%)) r g b / alpha);
+  --_shadow-root--background-image-url: var(--shadow-root--background-image-url);
+  font-family: "Inter", sans-serif;
+  font-size: 16px;
+  font-weight: normal;
+  color: var(--sc-mc-color--text-primary);
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.shadow-root:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  backdrop-filter: blur(30px);
+  background-color: var(--_shadow-root--shield-color);
+  display: none;
+}
+.shadow-root--background-enabled {
+  background-color: var(--_shadow-root--background-color);
+}
+.shadow-root--background-enabled:before {
+  display: block;
+}
+.shadow-root--background-active {
+  background-image: var(--_shadow-root--background-image-url);
+  background-size: cover;
+  background-blend-mode: multiply;
+}
+.shadow-root--background-loading {
+  background-color: transparent;
+}</style>

package/dist/ui/shadow-dom/colors.scss

@@ -0,0 +1,74 @@
+@use 'src/styles/colors';
+
+:host,
+:global([data-theme='default']) {
+  /* Backgrounds */
+  --sc-mc-color--bg-button: #{colors.$color-white};
+  --sc-mc-color--bg-card: #{colors.$color-white};
+  --sc-mc-color--bg-image: #{colors.$color-neutral-300};
+  --sc-mc-color--bg-panel: #{colors.$color-white};
+  --sc-mc-color--bg-screen: #{colors.$color-neutral-50};
+
+  /* Borders */
+  --sc-mc-color--border-brand: #{colors.$color-primary-500};
+  --sc-mc-color--border-card: #{colors.$color-gray-100};
+
+  /* Buttons */
+  --sc-mc-color--button-secondary: #{colors.$color-neutral-400};
+  --sc-mc-color--button-player: #{colors.$color-dark-500};
+
+  /* Icons */
+  --sc-mc-color--icon-brand: #{colors.$color-primary-500};
+  --sc-mc-color--icon-destructive: #{colors.$color-destructive-500};
+  --sc-mc-color--icon-overlay: #{colors.$color-white};
+  --sc-mc-color--icon-overlay-shadow: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
+  --sc-mc-color--icon-primary: #{colors.$color-neutral-800};
+  --sc-mc-color--icon-secondary: #{colors.$color-neutral-400};
+  --sc-mc-color--icon-success: #{colors.$color-success-500};
+  --sc-mc-color--icon-warning: #{colors.$color-warning-500};
+
+  /* Text */
+  --sc-mc-color--text-brand: #{colors.$color-primary-500};
+  --sc-mc-color--text-inverted: #{colors.$color-white};
+  --sc-mc-color--text-primary: #{colors.$color-black};
+  --sc-mc-color--text-secondary: #{colors.$color-neutral-500};
+  --sc-mc-color--text-white: #{colors.$color-white};
+  --sc-mc-color--text-white-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
+  --sc-mc-color--text-inactive: #{colors.$color-neutral-200};
+}
+
+:global([data-theme='dark']) {
+  /* Backgrounds */
+  --sc-mc-color--bg-button: #{colors.$color-neutral-900};
+  --sc-mc-color--bg-card: #{colors.$color-black};
+  --sc-mc-color--bg-image: #{colors.$color-neutral-700};
+  --sc-mc-color--bg-panel: #{colors.$color-black};
+  --sc-mc-color--bg-screen: #{colors.$color-dark-800};
+
+  /* Borders */
+  --sc-mc-color--border-brand: #{colors.$color-primary-400};
+  --sc-mc-color--border-card: #{colors.$color-black};
+
+  /* Buttons */
+  --sc-mc-color--button-secondary: #{colors.$color-neutral-400};
+  --sc-mc-color--button-player: #{colors.$color-black};
+
+  /* Icons */
+  --sc-mc-color--icon-brand: #{colors.$color-white};
+  --sc-mc-color--icon-destructive: #{colors.$color-destructive-600};
+  --sc-mc-color--icon-overlay: #{colors.$color-white};
+  --sc-mc-color--icon-overlay-shadow: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
+  --sc-mc-color--icon-primary: #{colors.$color-neutral-800};
+  --sc-mc-color--icon-secondary: #{colors.$color-neutral-400};
+  --sc-mc-color--icon-success: #{colors.$color-success-500};
+  --sc-mc-color--icon-warning: #{colors.$color-warning-500};
+
+  /* Text */
+  --sc-mc-color--text-brand: #{colors.$color-primary-400};
+  --sc-mc-color--text-inverted: #{colors.$color-white};
+  --sc-mc-color--text-primary: #{colors.$color-white};
+  --sc-mc-color--text-secondary: #{colors.$color-neutral-300};
+  --sc-mc-color--text-white: #{colors.$color-white};
+  --sc-mc-color--text-white-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
+  --sc-mc-color--text-inactive: #{colors.$color-neutral-300};
+}

package/dist/ui/shadow-dom/index.d.ts

@@ -1,2 +1,3 @@
 export { ModalShadowHost } from './modal-shadow-host';
 export { createShadowRoot } from './shadow-root-service';
+export { default as ShadowRoot } from './cmp.shadow-root.svelte';

package/dist/ui/shadow-dom/index.js

@@ -1,2 +1,3 @@
 export { ModalShadowHost } from './modal-shadow-host';
 export { createShadowRoot } from './shadow-root-service';
+export { default as ShadowRoot } from './cmp.shadow-root.svelte';

package/dist/ui/shadow-dom/shadow-root-service.js

@@ -3,10 +3,6 @@ import reset from './reset-shadow.css?raw';
 export const createShadowRoot = (host) => {
     prepareShadowRootHost(host);
     const shadowRoot = host.attachShadow({ mode: 'open' });
-    const link = document.createElement('link');
-    link.rel = 'stylesheet';
-    link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap';
-    shadowRoot.appendChild(link);
     const styleElement = document.createElement('style');
     styleElement.textContent = normalize + reset;
     shadowRoot.appendChild(styleElement);

package/dist/ui/slider/cmp.slider.svelte

@@ -301,10 +301,10 @@ const showClassicArrowsAndDots = $derived([SliderMode.ArrowsAndDots, SliderMode.
   font-size: 0.75rem;
   width: 1.875rem;
   height: 1.875rem;
-  background-color: #9ca3af;
+  background-color: var(--sc-mc-color--button-secondary);
   border-radius: 50%;
   text-align: center;
-  color: #ffffff;
+  color: var(--sc-mc-color--text-white);
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -342,17 +342,17 @@ const showClassicArrowsAndDots = $derived([SliderMode.ArrowsAndDots, SliderMode.
   font-weight: 300;
   width: 5.625rem;
   text-align: center;
-  color: #ffffff;
+  color: var(--sc-mc-color--text-white);
   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
 }
 .slider__counts-navigation-button {
   font-size: 0.75rem;
   width: 1.625rem;
   height: 1.625rem;
-  background-color: #9ca3af;
+  background-color: var(--sc-mc-color--button-secondary);
   border-radius: 50%;
   text-align: center;
-  color: #ffffff;
+  color: var(--sc-mc-color--text-white);
   visibility: hidden;
   /* Set 'container-type: inline-size;' to reference container*/
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "12.1.0",
+  "version": "13.0.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -33,6 +33,10 @@
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
     },
+    "./external-api": {
+      "types": "./dist/external-api/index.d.ts",
+      "svelte": "./dist/external-api/index.js"
+    },
     "./media-center": {
       "types": "./dist/media-center/index.d.ts",
       "svelte": "./dist/media-center/index.js"

package/dist/content-player/content-player-settings.d.ts

@@ -1,12 +0,0 @@
-import type { Locale } from '../core/locale';
-import type { PlayerColors } from '../ui/player/colors';
-export declare class ContentPlayerSettings {
-    locale: Locale;
-    showStreamsCloudWatermark: boolean;
-    playerColors: NonNullable<PlayerColors>;
-    constructor(init?: {
-        locale?: Locale;
-        showStreamsCloudWatermark?: boolean;
-        playerColors?: PlayerColors;
-    });
-}

package/dist/content-player/content-player-settings.js

@@ -1,22 +0,0 @@
-export class ContentPlayerSettings {
-    locale = 'en';
-    showStreamsCloudWatermark = false;
-    playerColors = {
-        brand: null,
-        button: null,
-        buttonInactive: null,
-        cardButton: null,
-        cardBackground: null,
-        playerBackground: null,
-        price: null,
-        salePrice: null,
-        sidebarBackground: null
-    };
-    constructor(init) {
-        if (init) {
-            this.locale = init.locale ?? this.locale;
-            this.showStreamsCloudWatermark = init.showStreamsCloudWatermark ?? this.showStreamsCloudWatermark;
-            this.playerColors = init?.playerColors ?? this.playerColors;
-        }
-    }
-}

package/dist/media-center/config/internal-media-center-config.d.ts

@@ -1,14 +0,0 @@
-import type { IMediaCenterConfig } from './types';
-export declare class InternalMediaCenterConfig implements IMediaCenterConfig {
-    postsPlayer: IMediaCenterConfig['postsPlayer'];
-    streamPlayer: IMediaCenterConfig['streamPlayer'];
-    handlers: IMediaCenterConfig['handlers'];
-    getConfig: IMediaCenterConfig['getConfig'];
-    private graphql;
-    constructor(input: {
-        mediaPageId: string;
-        initiator?: string;
-        graphqlOrigin?: string;
-        testingStuff?: boolean;
-    });
-}

package/dist/media-center/media-center/cmp.media-center.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { MediaCenterProps } from './types';
-declare const Cmp: import("svelte").Component<MediaCenterProps, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/media-center/media-center/discover/discover-header-localization.d.ts

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

package/dist/media-center/media-center/discover/discover-header-localization.js

@@ -1,15 +0,0 @@
-import {} from '../../../core/locale';
-export class DiscoverHeaderLocalization {
-    membersLabel;
-    locale;
-    constructor(locale) {
-        this.membersLabel = loc.membersLabel[locale];
-        this.locale = locale;
-    }
-}
-const loc = {
-    membersLabel: {
-        en: (count) => (count === 1 ? `Member` : `Members`),
-        no: (count) => (count === 1 ? `Medlem` : `Medlemmer`)
-    }
-};

package/dist/posts/handlers/index.d.ts

@@ -1 +0,0 @@
-export { InternalPostAnalyticsHandler } from './internal-post-analytics-handler';

package/dist/posts/handlers/index.js

@@ -1 +0,0 @@
-export { InternalPostAnalyticsHandler } from './internal-post-analytics-handler';

package/dist/short-videos/data-providers/index.d.ts

@@ -1 +0,0 @@
-export { InternalShortVideoPlayerItemsProvider } from './internal-short-video-player-items-provider';

package/dist/short-videos/data-providers/index.js

@@ -1 +0,0 @@
-export { InternalShortVideoPlayerItemsProvider } from './internal-short-video-player-items-provider';

package/dist/ui/with-background/cmp.with-background.svelte

@@ -1,86 +0,0 @@
-<script lang="ts">let { backgroundDisabled, backgroundImageUrl, backgroundColor, children } = $props();
-const styles = $derived.by(() => {
-    const values = [];
-    if (backgroundImageUrl) {
-        values.push(`--with-background--background-image-url: url(${backgroundImageUrl})`);
-    }
-    if (backgroundColor) {
-        values.push(`--with-background--background: ${backgroundColor}`);
-    }
-    return values.join(';');
-});
-export {};
-</script>
-
-<svelte:head>
-  <meta name="theme-color" content="#242424" />
-  <meta name="color-scheme" content="dark" />
-  <meta name="mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-
-  <style>
-    html,
-    body {
-      background-color: #242424;
-      color-scheme: dark;
-    }
-  </style>
-</svelte:head>
-
-<div
-  class="with-background"
-  class:with-background--background-enabled={!backgroundDisabled}
-  class:with-background--background-active={!backgroundDisabled && backgroundImageUrl && backgroundImageUrl !== 'not-applicable'}
-  class:with-background--background-loading={!backgroundDisabled && backgroundImageUrl !== 'not-applicable'}
-  style={styles}>
-  {@render children()}
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.with-background {
-  --_with-background--background: var(--with-background--background);
-  --_with-background--background-image-url: var(--with-background--background-image-url);
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-  container-type: inline-size;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
-.with-background:before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  backdrop-filter: blur(30px);
-  background-color: var(--_with-background--background);
-  display: none;
-}
-.with-background--background-enabled {
-  background-color: #7d7d7d;
-}
-.with-background--background-enabled:before {
-  display: block;
-}
-.with-background--background-active {
-  background-image: var(--_with-background--background-image-url);
-  background-size: cover;
-  background-blend-mode: multiply;
-}
-.with-background--background-loading {
-  background-color: transparent;
-}</style>

package/dist/ui/with-background/index.d.ts

@@ -1 +0,0 @@
-export { default as WithBackground } from './cmp.with-background.svelte';

package/dist/ui/with-background/index.js

@@ -1 +0,0 @@
-export { default as WithBackground } from './cmp.with-background.svelte';