@streamscloud/kit 0.0.1-1771006168898 → 0.0.1-1771072688121

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

@@ -38,7 +38,7 @@ export {};
   --sc-kit--button--background--disabled: var(--sc-kit--button--primary--background--disabled, #91b3f3);
   --sc-kit--button--border: var(--sc-kit--button--primary--border, none);
   --sc-kit--button--border--disabled: var(--sc-kit--button--primary--border--disabled, none);
-  --sc-kit--button--box-shadow: var(--sc-kit--button--primary--box-shadow, 0px 3px 0px 0px rgba(colors.$color-white, 0.3) inset);
+  --sc-kit--button--box-shadow: var(--sc-kit--button--primary--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
 }
 .button-theme--standard {
   --sc-kit--button--font--color: var(--sc-kit--button--standard--font--color, light-dark(#2e2e2e, #ffffff));
@@ -68,10 +68,7 @@ export {};
     --sc-kit--button--standard--border--disabled,
     1px solid light-dark(#e5e7eb, #4b5563)
   );
-  --sc-kit--button--box-shadow: var(
-    --sc-kit--button--standard--box-shadow,
-    0px 3px 0px 0px light-dark(transparent, rgba(colors.$color-white, 0.3)) inset
-  );
+  --sc-kit--button--box-shadow: var(--sc-kit--button--standard--box-shadow, 0px 3px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.3)) inset);
 }
 .button-theme--white {
   --sc-kit--button--font--color: var(--sc-kit--button--white--font--color, light-dark(#2e2e2e, #ffffff));
@@ -95,7 +92,7 @@ export {};
   );
   --sc-kit--button--border: var(--sc-kit--button--white--border, none);
   --sc-kit--button--border--disabled: var(--sc-kit--button--white--border--disabled, none);
-  --sc-kit--button--box-shadow: var(--sc-kit--button--white--box-shadow, 0px 3px 0px 0px light-dark(transparent, rgba(colors.$color-white, 0.3)) inset);
+  --sc-kit--button--box-shadow: var(--sc-kit--button--white--box-shadow, 0px 3px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.3)) inset);
 }
 .button-theme--gray {
   --sc-kit--button--font--color: var(--sc-kit--button--gray--font--color, light-dark(#2e2e2e, #ffffff));
@@ -122,7 +119,7 @@ export {};
     --sc-kit--button--gray--border--disabled,
     1px solid light-dark(#e5e7eb, #4b5563)
   );
-  --sc-kit--button--box-shadow: var(--sc-kit--button--gray--box-shadow, 0px 3px 0px 0px rgba(colors.$color-white, 0.3) inset);
+  --sc-kit--button--box-shadow: var(--sc-kit--button--gray--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
 }
 .button-theme--green {
   --sc-kit--button--font--color: var(--sc-kit--button--green--font--color, light-dark(#0cce6b, #ffffff));
@@ -152,7 +149,7 @@ export {};
     --sc-kit--button--green--border--disabled,
     1px solid light-dark(#0cce6b, #4b5563)
   );
-  --sc-kit--button--box-shadow: var(--sc-kit--button--green--box-shadow, 0px 3px 0px 0px rgba(colors.$color-white, 0.3) inset);
+  --sc-kit--button--box-shadow: var(--sc-kit--button--green--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
 }
 .button-theme--black {
   --sc-kit--button--font--color: var(--sc-kit--button--black--font--color, light-dark(#ffffff, #2e2e2e));
@@ -176,7 +173,7 @@ export {};
   );
   --sc-kit--button--border: var(--sc-kit--button--black--border, none);
   --sc-kit--button--border--disabled: var(--sc-kit--button--black--border--disabled, none);
-  --sc-kit--button--box-shadow: var(--sc-kit--button--black--box-shadow, 0px 3px 0px 0px rgba(colors.$color-white, 0.3) inset);
+  --sc-kit--button--box-shadow: var(--sc-kit--button--black--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
 }
 .button-theme--alert {
   --sc-kit--button--font--color: var(--sc-kit--button--alert--font--color, #ffffff);
@@ -188,7 +185,7 @@ export {};
   --sc-kit--button--background--disabled: var(--sc-kit--button--alert--background--disabled, #f6a7b1);
   --sc-kit--button--border: var(--sc-kit--button--alert--border, none);
   --sc-kit--button--border--disabled: var(--sc-kit--button--alert--border--disabled, none);
-  --sc-kit--button--box-shadow: var(--sc-kit--button--alert--box-shadow, 0px 3px 0px 0px rgba(colors.$color-white, 0.3) inset);
+  --sc-kit--button--box-shadow: var(--sc-kit--button--alert--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
 }
 .button-theme--warning {
   --sc-kit--button--font--color: var(--sc-kit--button--warning--font--color, #ffffff);
@@ -200,7 +197,7 @@ export {};
   --sc-kit--button--background--disabled: var(--sc-kit--button--warning--background--disabled, #fcd34d);
   --sc-kit--button--border: var(--sc-kit--button--warning--border, none);
   --sc-kit--button--border--disabled: var(--sc-kit--button--warning--border--disabled, none);
-  --sc-kit--button--box-shadow: var(--sc-kit--button--warning--box-shadow, 0px 3px 0px 0px rgba(colors.$color-white, 0.3) inset);
+  --sc-kit--button--box-shadow: var(--sc-kit--button--warning--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
 }
 .button-theme--text-only {
   --sc-kit--button--font--color: var(--sc-kit--button--text-only--font--color, light-dark(#2e2e2e, #ffffff));

package/dist/ui/dialog/cmp.dialog-container.svelte

@@ -85,7 +85,7 @@ const customWidth = $derived(isCustomWidth ? size : null);
 </dialog>
 
 <style>.dialog-container {
-  --_dialog-container--backdrop: var(--sc-kit--dialog-container--backdrop, light-dark(rgba(colors.$color-black, 0.5), rgba(colors.$color-white, 0.15)));
+  --_dialog-container--backdrop: var(--sc-kit--dialog-container--backdrop, light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.15)));
   --_dialog-container--border-radius: var(--sc-kit--dialog-container--border-radius, 0.5rem);
   --_dialog-container--max-width: var(--sc-kit--dialog-container--max-width, 64rem);
   --_dialog-container--padding: var(--sc-kit--dialog-container--padding, 1rem);

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

@@ -0,0 +1,37 @@
+<script lang="ts">import { Icon } from '../../icon';
+let { actions } = $props();
+</script>
+
+<div class="mobile-player-buttons">
+  {#each actions as action (action.icon)}
+    <button type="button" class="mobile-player-buttons__action" disabled={action.disabled} onclick={action.callback}>
+      <span class="mobile-player-buttons__action-icon">
+        <Icon src={action.icon} color={action.iconColor} />
+      </span>
+    </button>
+  {/each}
+</div>
+
+<style>.mobile-player-buttons {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  pointer-events: auto;
+}
+.mobile-player-buttons__action {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+  --sc-kit--icon--color: #ffffff;
+  --sc-kit--icon--size: 2rem;
+  --sc-kit--icon--filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
+}
+.mobile-player-buttons__action:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.mobile-player-buttons__action-icon {
+  display: block;
+}</style>

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

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

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

@@ -0,0 +1,127 @@
+<script lang="ts">import { Icon } from '../../icon';
+let { actions, scaleEffect = false, zoom = 1 } = $props();
+</script>
+
+{#if actions.length === 1}
+  {@const action = actions[0]}
+  <button
+    type="button"
+    class="player-button"
+    style:zoom={zoom}
+    class:player-button--scale-effect={scaleEffect}
+    disabled={action.disabled}
+    onclick={action.callback}>
+    <span class="player-button__icon">
+      <Icon src={action.icon} color={action.iconColor} />
+    </span>
+  </button>
+{:else if actions.length > 1}
+  <div class="player-buttons" style:zoom={zoom}>
+    {#each actions as action (action.icon)}
+      <button
+        type="button"
+        class="player-buttons__action"
+        class:player-buttons__action--scale-effect={scaleEffect}
+        disabled={action.disabled}
+        onclick={action.callback}>
+        <span class="player-buttons__action-icon">
+          <Icon src={action.icon} color={action.iconColor} />
+        </span>
+      </button>
+    {/each}
+  </div>
+{/if}
+
+<style>.player-button {
+  --_player-button--color: var(--sc-kit--player-button--color, rgb(from light-dark(#272727, #000000) r g b / 95%));
+  --_player-button--color--inactive: var(--sc-kit--player-button--color--inactive, rgb(from var(--_player-button--color) 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: var(--_player-button--color--inactive);
+  transition: background-color 0.5s;
+  border-radius: 50%;
+  color: #ffffff;
+  --sc-kit--icon--color: #ffffff;
+  --sc-kit--icon--size: 1.75rem;
+}
+.player-button:hover:not(:disabled) {
+  background-color: var(--_player-button--color);
+}
+.player-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.player-button--scale-effect:hover:not(:disabled) {
+  --_player-button--icon-scale: 1.2;
+}
+.player-button__icon {
+  display: block;
+  transform: scale(var(--_player-button--icon-scale));
+  transition: 0.3s;
+}
+.player-button {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .player-button {
+    padding: 0.5rem;
+    --sc-kit--icon--size: 1.5rem;
+  }
+}
+
+.player-buttons {
+  --_player-button--color: var(--sc-kit--player-button--color, rgb(from light-dark(#272727, #000000) r g b / 95%));
+  --_player-button--color--inactive: var(--sc-kit--player-button--color--inactive, rgb(from var(--_player-button--color) r g b / 60%));
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 1.25rem;
+  background: var(--_player-button--color--inactive);
+  padding: 0.4375rem 0.0625rem;
+  pointer-events: auto;
+}
+.player-buttons__action {
+  --_player-button--icon-scale: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.5625rem;
+  border-radius: 1.25rem;
+  color: #ffffff;
+  --sc-kit--icon--color: #ffffff;
+  --sc-kit--icon--size: 1.75rem;
+  transition: background-color 0.5s;
+}
+.player-buttons__action:hover:not(:disabled) {
+  background-color: var(--_player-button--color);
+}
+.player-buttons__action:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.player-buttons__action--scale-effect:hover:not(:disabled) {
+  --_player-button--icon-scale: 1.2;
+  background-color: transparent;
+}
+.player-buttons__action-icon {
+  display: block;
+  transform: scale(var(--_player-button--icon-scale));
+  transition: 0.3s;
+}
+.player-buttons {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .player-buttons {
+    border-radius: 0.9375rem;
+    padding: 0.25rem 0.0625rem;
+  }
+  .player-buttons__action {
+    --sc-kit--icon--size: 1.5rem;
+  }
+}</style>

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

@@ -0,0 +1,9 @@
+import type { PlayerButtonDef } from './types';
+type Props = {
+    actions: PlayerButtonDef[];
+    scaleEffect?: boolean;
+    zoom?: number;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/player/buttons/cmp.responsive-player-buttons.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">import { default as MobilePlayerButtons } from './cmp.mobile-player-buttons.svelte';
+import { default as PlayerButtons } from './cmp.player-buttons.svelte';
+let { scaleEffect = false, actions } = $props();
+</script>
+
+<div class="desktop-controls">
+  <PlayerButtons actions={actions} scaleEffect={scaleEffect} />
+</div>
+
+<div class="mobile-controls">
+  <MobilePlayerButtons actions={actions} />
+</div>
+
+<style>.desktop-controls {
+  display: contents;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .desktop-controls {
+    display: none;
+  }
+}
+
+.mobile-controls {
+  display: none;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .mobile-controls {
+    display: contents;
+  }
+}</style>

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

@@ -0,0 +1,8 @@
+import type { PlayerButtonDef } from './types';
+type Props = {
+    actions: PlayerButtonDef[];
+    scaleEffect?: boolean;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,4 @@
+export { default as MobilePlayerButtons } from './cmp.mobile-player-buttons.svelte';
+export { default as PlayerButtons } from './cmp.player-buttons.svelte';
+export { default as ResponsivePlayerButtons } from './cmp.responsive-player-buttons.svelte';
+export type { PlayerButtonDef } from './types';

package/dist/ui/player/buttons/index.js

@@ -0,0 +1,3 @@
+export { default as MobilePlayerButtons } from './cmp.mobile-player-buttons.svelte';
+export { default as PlayerButtons } from './cmp.player-buttons.svelte';
+export { default as ResponsivePlayerButtons } from './cmp.responsive-player-buttons.svelte';

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

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

package/dist/ui/player/buttons/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/player/carousel/carousel-localization.d.ts

@@ -0,0 +1,3 @@
+export declare class CarouselLocalization {
+    get nOfM(): (n: number, m: number) => string;
+}

package/dist/ui/player/carousel/carousel-localization.js

@@ -0,0 +1,12 @@
+import { getLocale } from '../../../locale';
+export class CarouselLocalization {
+    get nOfM() {
+        return loc.nOfM[getLocale()];
+    }
+}
+const loc = {
+    nOfM: {
+        en: (n, m) => `${n} of ${m}`,
+        no: (n, m) => `${n} av ${m}`
+    }
+};