@streamscloud/embeddable 12.0.0 → 12.2.0

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.0.0",
+  "version": "12.2.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",

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/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';