@streamscloud/embeddable 12.0.0 → 12.2.0

package/dist/ui/button/resources/button-theme.svelte

@@ -10,7 +10,6 @@ let { style = undefined, size = ButtonSize.Standard, children } = $props();
   class:button-theme--white={style === ButtonStyle.White}
   class:button-theme--gray={style === ButtonStyle.Gray}
   class:button-theme--green={style === ButtonStyle.Green}
-  class:button-theme--black={style === ButtonStyle.Black}
   class:button-theme--text-only={style === ButtonStyle.TextOnly}
   class:button-theme--transparent-success={style === ButtonStyle.TransparentSuccess}
   class:button-theme--transparent-primary={style === ButtonStyle.TransparentPrimary}
@@ -37,158 +36,8 @@ let { style = undefined, size = ButtonSize.Standard, children } = $props();
 }
 .button-theme {
   display: contents;
-  /*Style*/
   /*Size*/
 }
-.button-theme--primary {
-  --button--font--color: #ffffff;
-  --button--background: #144ab0;
-  --button--background--hover: #1244a0;
-  --button--background--active: #103a89;
-  --button--background--disabled: #91b3f3;
-}
-:global([data-theme="dark"]) .button-theme--primary {
-  --button--background--disabled: #91b3f3;
-}
-.button-theme--standard {
-  --button--font--color: #2e2e2e;
-  --button--background: #ffffff;
-  --button--background--hover: #f9fafb;
-  --button--background--active: #f3f4f6;
-  --button--background--disabled: #f3f4f6;
-  --button--border: 1px solid #e5e7eb;
-}
-:global([data-theme="dark"]) .button-theme--standard {
-  --button--font--color: #ffffff;
-  --button--background: #111827;
-  --button--background--hover: #1f2937;
-  --button--background--active: #374151;
-  --button--background--disabled: #374151;
-}
-:global([data-theme="dark"]) .button-theme--standard {
-  --button--border: 1px solid #4b5563;
-}
-.button-theme--white {
-  --button--font--color: #2e2e2e;
-  --button--background: #ffffff;
-  --button--background--hover: #f9fafb;
-  --button--background--active: #f3f4f6;
-  --button--background--disabled: #f3f4f6;
-}
-:global([data-theme="dark"]) .button-theme--white {
-  --button--font--color: #ffffff;
-  --button--background: #111827;
-  --button--background--hover: #1f2937;
-  --button--background--active: #374151;
-  --button--background--disabled: #374151;
-}
-.button-theme--gray {
-  --button--font--color: #2e2e2e;
-  --button--background: #f3f4f6;
-  --button--background--hover: #f9fafb;
-  --button--background--active: #f3f4f6;
-  --button--background--disabled: #f3f4f6;
-  --button--border: 1px solid #e5e7eb;
-}
-:global([data-theme="dark"]) .button-theme--gray {
-  --button--font--color: #ffffff;
-  --button--background: #374151;
-  --button--background--hover: #1f2937;
-  --button--background--active: #374151;
-  --button--background--disabled: #374151;
-  --button--border: 1px solid #4b5563;
-}
-.button-theme--green {
-  --button--font--color: #0cce6b;
-  --button--background: #066031;
-  --button--background--hover: #088745;
-  --button--background--active: #088745;
-  --button--background--disabled: #0aa454;
-  --button--border: 1px solid #066031;
-}
-:global([data-theme="dark"]) .button-theme--green {
-  --button--font--color: #ffffff;
-  --button--background: #374151;
-  --button--background--hover: #1f2937;
-  --button--background--active: #374151;
-  --button--background--disabled: #374151;
-  --button--border: 1px solid #4b5563;
-}
-.button-theme--black {
-  --button--font--color: #ffffff;
-  --button--background: #1c1c1c;
-  --button--background--hover: #1f2937;
-  --button--background--active: #374151;
-  --button--background--disabled: #374151;
-}
-:global([data-theme="dark"]) .button-theme--black {
-  --button--font--color: #2e2e2e;
-  --button--background: #fafafa;
-  --button--background--hover: #f3f4f6;
-  --button--background--active: #e5e7eb;
-  --button--background--disabled: #e5e7eb;
-}
-.button-theme--alert {
-  --button--font--color: #ffffff;
-  --button--background: #e71d36;
-  --button--background--hover: #d4172d;
-  --button--background--active: #b81427;
-  --button--background--disabled: #f6a7b1;
-}
-.button-theme--text-only {
-  --button--font--color: #2e2e2e;
-  --button--background: transparent;
-  --button--background--hover: #f3f4f6;
-  --button--background--active: #e5e7eb;
-  --button--border: none;
-}
-:global([data-theme="dark"]) .button-theme--text-only {
-  --button--font--color: #ffffff;
-  --button--background--hover: #111827;
-  --button--background--active: #1f2937;
-  --button--border: none;
-}
-.button-theme--transparent-success {
-  --button--font--color: #0cce6b;
-  --button--background: #ecfef4;
-  --button--border: 1px solid #0cce6b;
-  --button--background--active: #d4fce7;
-}
-.button-theme--transparent-primary {
-  --button--font--color: #144ab0;
-  --button--background: #f1f6fd;
-  --button--border: 1px solid #144ab0;
-  --button--background--active: #dfe9fb;
-}
-.button-theme--transparent-white {
-  --button--font--color: #ffffff;
-  --button--background: transparent;
-  --button--border: 1px solid #ffffff;
-}
-.button-theme--transparent-gray {
-  --button--font--color: #6b7280;
-  --button--background: #f9fafb;
-  --button--border: 1px solid #6b7280;
-  --button--background--active: #f3f4f6;
-}
-:global([data-theme="dark"]) .button-theme--transparent-gray {
-  --button--font--color: #e5e7eb;
-  --button--background: #1f2937;
-  --button--border: 1px solid #e5e7eb;
-  --button--background--active: #374151;
-}
-.button-theme--transparent-warning {
-  --button--font--color: #ffa62b;
-  --button--background: #fffbeb;
-  --button--border: 1px solid #ffa62b;
-  --button--background--active: #fef3c7;
-}
-.button-theme--transparent-destructive {
-  --button--font--color: #e71d36;
-  --button--background: #fef1f3;
-  --button--border: 1px solid #e71d36;
-  --button--background--active: #fde8ea;
-}
 .button-theme--size-standard {
   --button--height: 2em;
   --button--text--font-size: 0.75em;

package/dist/ui/button/resources/button-types.d.ts

@@ -5,7 +5,6 @@ export declare enum ButtonStyle {
     White = "white",
     Gray = "gray",
     Green = "green",
-    Black = "black",
     TextOnly = "text-only",
     TransparentSuccess = "transparent-success",
     TransparentPrimary = "transparent-primary",

package/dist/ui/button/resources/button-types.js

@@ -6,7 +6,6 @@ export var ButtonStyle;
     ButtonStyle["White"] = "white";
     ButtonStyle["Gray"] = "gray";
     ButtonStyle["Green"] = "green";
-    ButtonStyle["Black"] = "black";
     ButtonStyle["TextOnly"] = "text-only";
     ButtonStyle["TransparentSuccess"] = "transparent-success";
     ButtonStyle["TransparentPrimary"] = "transparent-primary";

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

@@ -32,50 +32,30 @@ let { src, color = null } = $props();
   --_icon--size: var(--icon--size, 1.25em);
   --_icon--stroke-color: var(--icon--stroke-color);
   --_icon--stroke-width: var(--icon--stroke-width, 0);
+  /*--_icon--filter: drop-shadow(1px 1px 0 rgb(from var(--_icon--color) calc(255 - r) calc(255 - g) calc(255 - b) / 90%));*/
   --_icon--filter: var(--icon--filter, none);
   display: contents;
 }
 .icon--white {
-  --_icon--color: #ffffff;
-}
-:global([data-theme="dark"]) .icon--white {
-  --_icon--color: #ffffff;
+  --_icon--color: var(--sc-mc-color--icon-overlay);
 }
 .icon--text {
-  --_icon--color: #2e2e2e;
-}
-:global([data-theme="dark"]) .icon--text {
-  --_icon--color: #ffffff;
+  --_icon--color: var(--sc-mc-color--text-primary);
 }
 .icon--gray {
-  --_icon--color: #6b7280;
-}
-:global([data-theme="dark"]) .icon--gray {
-  --_icon--color: #6b7280;
+  --_icon--color: var(--sc-mc-color--icon-secondary);
 }
 .icon--green {
-  --_icon--color: #0cce6b;
-}
-:global([data-theme="dark"]) .icon--green {
-  --_icon--color: #0cce6b;
+  --_icon--color: var(--sc-mc-color--icon-success);
 }
 .icon--red {
-  --_icon--color: #e71d36;
-}
-:global([data-theme="dark"]) .icon--red {
-  --_icon--color: #e71d36;
+  --_icon--color: var(--sc-mc-color--icon-destructive);
 }
 .icon--orange {
-  --_icon--color: #ffa62b;
-}
-:global([data-theme="dark"]) .icon--orange {
-  --_icon--color: #ffa62b;
+  --_icon--color: var(--sc-mc-color--icon-warning);
 }
 .icon--blue {
-  --_icon--color: #144ab0;
-}
-:global([data-theme="dark"]) .icon--blue {
-  --_icon--color: #91b3f3;
+  --_icon--color: var(--sc-mc-color--icon-brand);
 }
 .icon :global(svg) {
   display: inline-block;

package/dist/ui/image/cmp.image-rounded.svelte

@@ -27,19 +27,16 @@ let { src, alt = '', noBorders = false, on } = $props();
     --image--rounded--image--border-radius,
     calc(var(--image--rounded--inner--border-radius_) - var(--image--rounded--inner--border-width_))
   );
-  --image--rounded--inner--border-color_: var(--image--rounded--inner--border-color, #ffffff);
+  --image--rounded--inner--border-color_: var(--image--rounded--inner--border-color, var(--sc-mc-color--bg-card));
   --image--rounded--inner--border-radius_: var(
     --image--rounded--inner--border-radius,
     calc(var(--image--rounded--outer--border-radius_) - var(--image--rounded--outer--border-width_))
   );
   --image--rounded--inner--border-width_: var(--image--rounded--inner--border-width, 4px);
-  --image--rounded--outer--border-color_: var(
-    --image--rounded--outer--border-color,
-    linear-gradient(#144ab0, #dfe9fb)
-  );
+  --image--rounded--outer--border-color_: var(--image--rounded--outer--border-color, var(--sc-mc-color--bg-card));
   --image--rounded--outer--border-radius_: var(--image--rounded--outer--border-radius, 0);
   --image--rounded--outer--border-width_: var(--image--rounded--outer--border-width, 2px);
-  --image--rounded--stub--background_: var(--image--rounded--stub--background, #f3f4f6);
+  --image--rounded--stub--background_: var(--image--rounded--stub--background, var(--sc-mc-color--bg-image));
   width: var(--image--rounded--width_);
   height: var(--image--rounded--height_);
   border-radius: var(--image--rounded--outer--border-radius_);
@@ -47,10 +44,6 @@ let { src, alt = '', noBorders = false, on } = $props();
   background: var(--image--rounded--outer--border-color_);
   overflow: hidden;
 }
-:global([data-theme="dark"]) .rounded-img {
-  --image--rounded--inner--border-color_: var(--image--rounded--inner--border-color, #000000);
-  --image--rounded--stub--background_: var(--image--rounded--stub--background, #374151);
-}
 .rounded-img--stub {
   background: var(--image--rounded--stub--background_);
 }

package/dist/ui/image/cmp.image-stub.svelte

@@ -18,7 +18,7 @@ import IconImage from '@fluentui/svg-icons/icons/image_20_regular.svg?raw';
   }
 }
 .image-stub {
-  --_image-stub--color: var(--image-stub--color, #d1d5db);
+  --_image-stub--color: var(--image-stub--color, var(--sc-mc-color--bg-image));
   width: 100%;
   height: 100%;
   z-index: 2;
@@ -28,7 +28,4 @@ import IconImage from '@fluentui/svg-icons/icons/image_20_regular.svg?raw';
   color: var(--_image-stub--color);
   border: 1px solid var(--_image-stub--color);
   border-radius: 0.25rem;
-}
-:global([data-theme="dark"]) .image-stub {
-  --_image-stub--color: var(--image-stub--color, #374151);
 }</style>

package/dist/ui/image/cmp.image.svelte

@@ -49,7 +49,7 @@ const onLoadError = () => {
   --_image--background: var(--image--background, transparent);
   --_image--border-radius: var(--image--border-radius, 0);
   --_image--object-fit: var(--image--object-fit, cover);
-  --_image--stub--background: var(--image--stub--background, #e5e7eb);
+  --_image--stub--background: var(--image--stub--background, var(--sc-mc-color--bg-image));
   position: relative;
   width: 100%;
   height: 100%;
@@ -57,9 +57,6 @@ const onLoadError = () => {
   border-radius: var(--_image--border-radius);
   background: var(--_image--background);
 }
-:global([data-theme="dark"]) .image {
-  --_image--stub--background: var(--image--stub--background, #374151);
-}
 .image__img {
   width: 100%;
   height: 100%;

package/dist/ui/loading/cmp.loading.svelte

@@ -43,7 +43,7 @@ onMount(() => {
 }
 
 .la-ball-clip-rotate {
-  --loading--spinner-color_: var(--loading--spinner-color, #144ab0);
+  --loading--spinner-color_: var(--loading--spinner-color, var(--sc-mc-color--text-brand));
   color: var(--loading--spinner-color_);
   display: block;
   opacity: 0;
@@ -51,9 +51,6 @@ onMount(() => {
   height: 2em;
   z-index: 10;
 }
-:global([data-theme="dark"]) .la-ball-clip-rotate {
-  --loading--spinner-color_: var(--loading--spinner-color, #5a8dec);
-}
 .la-ball-clip-rotate--visible {
   opacity: 1;
 }

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

@@ -35,9 +35,9 @@ let { actions } = $props();
   justify-content: center;
   align-items: center;
   padding: 1rem;
-  --icon--color: #ffffff;
+  --icon--color: var(--sc-mc-color--icon-overlay);
   --icon--size: 2rem;
-  --icon--filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
+  --icon--filter: var(--sc-mc-color--icon-overlay-shadow);
 }
 .mobile-player-buttons-group__action-icon {
   display: block;

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

@@ -1,6 +1,6 @@
-import type { PlayerButtonsGroupAction } from './types';
+import type { PlayerButtonDef } from './types';
 type Props = {
-    actions: PlayerButtonsGroupAction[];
+    actions: PlayerButtonDef[];
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -30,8 +30,11 @@ const styles = $derived.by(() => {
   }
 }
 .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--color: var(--player-button--color, rgb(from var(--sc-mc-color--button-player) r g b / 95%));
+  --_player-button--color--inactive: var(
+    --player-button--color--inactive,
+    rgb(from var(--_player-button--color, var(--sc-mc-color--button-player)) r g b / 60%)
+  );
   --_player-button--icon-scale: 1;
   pointer-events: auto;
   padding: 0.625rem;
@@ -41,7 +44,8 @@ const styles = $derived.by(() => {
   background-color: var(--_player-button--color--inactive);
   transition: background-color 0.5s;
   border-radius: 50%;
-  --icon--color: #ffffff;
+  color: var(--sc-mc-color--text-white);
+  --icon--color: var(--sc-mc-color--icon-overlay);
   --icon--size: 1.75rem;
   /* Set 'container-type: inline-size;' to reference container*/
 }

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

@@ -34,10 +34,10 @@ const styles = $derived.by(() => {
   }
 }
 .player-buttons-group {
-  --_player-buttons-group--active-color: var(--player-buttons-group--active-color, rgb(from #000000 r g b / 95%));
+  --_player-buttons-group--active-color: var(--player-buttons-group--active-color, rgb(from var(--sc-mc-color--button-player) r g b / 95%));
   --_player-buttons-group--background-color: var(
     --player-buttons-group--background-color,
-    rgb(from var(--_player-buttons-group--active-color, #000000) r g b / 60%)
+    rgb(from var(--_player-buttons-group--active-color, var(--sc-mc-color--button-player)) r g b / 60%)
   );
   cursor: pointer;
   display: flex;
@@ -56,7 +56,8 @@ const styles = $derived.by(() => {
   align-items: center;
   padding: 0.5625rem;
   border-radius: 1.25rem;
-  --icon--color: #ffffff;
+  color: var(--sc-mc-color--text-white);
+  --icon--color: var(--sc-mc-color--icon-overlay);
   --icon--size: 1.75rem;
   transition: background-color 0.5s;
 }

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

@@ -1,8 +1,8 @@
-import type { PlayerButtonsGroupAction } from './types';
+import type { PlayerButtonDef } from './types';
 type Props = {
     activeColor: string | null;
     backgroundColor: string | null;
-    actions: PlayerButtonsGroupAction[];
+    actions: PlayerButtonDef[];
     scaleEffect?: boolean;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

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

@@ -1,4 +1,4 @@
 export { default as PlayerButton } from './cmp.player-button.svelte';
 export { default as PlayerButtonsGroup } from './cmp.player-buttons-group.svelte';
 export { default as MobilePlayerButtonsGroup } from './cmp.mobile-player-buttons-group.svelte';
-export type { PlayerButtonsGroupAction } from './types';
+export type { PlayerButtonDef } from './types';

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

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

package/dist/ui/player/colors/player-colors.d.ts

@@ -4,6 +4,7 @@ export type PlayerColors = {
     buttonInactive: string | null;
     cardButton: string | null;
     cardBackground: string | null;
+    menuBackground: string | null;
     playerBackground: string | null;
     price: string | null;
     salePrice: string | null;

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

@@ -0,0 +1,156 @@
+<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-screen: #f9fafb;
+  --sc-mc-color--bg-card: #ffffff;
+  --sc-mc-color--bg-panel: #ffffff;
+  --sc-mc-color--bg-image: #d1d5db;
+  /* 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-screen: #1e1e1e;
+  --sc-mc-color--bg-card: #000000;
+  --sc-mc-color--bg-panel: #000000;
+  --sc-mc-color--bg-image: #374151;
+  /* 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,72 @@
+@use 'src/styles/colors';
+
+:host,
+:global([data-theme='default']) {
+  /* Backgrounds */
+  --sc-mc-color--bg-screen: #{colors.$color-neutral-50};
+  --sc-mc-color--bg-card: #{colors.$color-white};
+  --sc-mc-color--bg-panel: #{colors.$color-white};
+  --sc-mc-color--bg-image: #{colors.$color-neutral-300};
+
+  /* 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-screen: #{colors.$color-dark-800};
+  --sc-mc-color--bg-card: #{colors.$color-black};
+  --sc-mc-color--bg-panel: #{colors.$color-black};
+  --sc-mc-color--bg-image: #{colors.$color-neutral-700};
+
+  /* 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';