@streamscloud/kit 0.2.25 → 0.2.27-1775513705074

package/dist/ui/color-picker/cmp.color-picker.svelte

@@ -46,7 +46,7 @@ const onColorPickerInput = ({ hex }) => {
 </script>
 
 <div class="color-picker">
-  <Dropdown position="bottom-start" keepDropdownOpen>
+  <Dropdown position="bottom-start" keepDropdownOpen panel={false}>
     {#snippet trigger()}
       <div class="color-picker__trigger">
         {#if children}

package/dist/ui/cropper/img-cropper/cmp.img-cropper-toolbar.svelte

@@ -50,7 +50,7 @@ const selectedRatioLabel = $derived.by(() => {
   {#if cropper.ratioOptions}
     <div class="img-cropper-toolbar__ratio">
       <span class="img-cropper-toolbar__label">{loc.ratio}</span>
-      <Dropdown position="top">
+      <Dropdown position="top" panel={false}>
         {#snippet trigger()}
           <div class="img-cropper-toolbar__ratio-trigger">{selectedRatioLabel}</div>
         {/snippet}

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

@@ -53,6 +53,7 @@ A structured dialog panel with header (title + close button), scrollable body, a
 | `--sc-kit--dialog--min-height` | Minimum height | `auto` |
 | `--sc-kit--dialog--padding-block` | Vertical padding for header/body/footer | `1.25rem` |
 | `--sc-kit--dialog--padding-inline` | Horizontal padding for header/body/footer | `1.5rem` |
+| `--sc-kit--dialog--body--overflow-y` | Body vertical overflow | `visible` |
 | `--sc-kit--dialog--body--padding-block` | Body-specific vertical padding | inherits `--padding-block` |
 | `--sc-kit--dialog--body--padding-inline` | Body-specific horizontal padding | inherits `--padding-inline` |
 | `--sc-kit--dialog--header--padding-block` | Header-specific vertical padding | inherits `--padding-block` |
@@ -70,6 +71,7 @@ A structured dialog panel with header (title + close button), scrollable body, a
   --_dialog--min-height: var(--sc-kit--dialog--min-height, auto);
   --_dialog--padding-block: var(--sc-kit--dialog--padding-block, 1.25rem);
   --_dialog--padding-inline: var(--sc-kit--dialog--padding-inline, 1.5rem);
+  --_dialog--body--overflow-y: var(--sc-kit--dialog--body--overflow-y, visible);
   --_dialog--body--padding-block: var(--sc-kit--dialog--body--padding-block, var(--_dialog--padding-block));
   --_dialog--body--padding-inline: var(--sc-kit--dialog--body--padding-inline, var(--_dialog--padding-inline));
   --_dialog--header--padding-block: var(--sc-kit--dialog--header--padding-block, var(--_dialog--padding-block));
@@ -114,7 +116,7 @@ A structured dialog panel with header (title + close button), scrollable body, a
 .dialog__body {
   flex: 1;
   min-height: 0;
-  overflow-y: auto;
+  overflow-y: var(--_dialog--body--overflow-y);
   padding: var(--_dialog--body--padding-block) var(--_dialog--body--padding-inline);
   --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);

package/dist/ui/dialog/cmp.dialog.svelte.d.ts

@@ -54,6 +54,7 @@ interface $$IsomorphicComponent {
  * | `--sc-kit--dialog--min-height` | Minimum height | `auto` |
  * | `--sc-kit--dialog--padding-block` | Vertical padding for header/body/footer | `1.25rem` |
  * | `--sc-kit--dialog--padding-inline` | Horizontal padding for header/body/footer | `1.5rem` |
+ * | `--sc-kit--dialog--body--overflow-y` | Body vertical overflow | `visible` |
  * | `--sc-kit--dialog--body--padding-block` | Body-specific vertical padding | inherits `--padding-block` |
  * | `--sc-kit--dialog--body--padding-inline` | Body-specific horizontal padding | inherits `--padding-inline` |
  * | `--sc-kit--dialog--header--padding-block` | Header-specific vertical padding | inherits `--padding-block` |

package/dist/ui/emoji-picker/cmp.emoji-picker.svelte

@@ -5,7 +5,7 @@ import IconEmoji from '@fluentui/svg-icons/icons/emoji_20_regular.svg?raw';
 let { dropdownPosition = 'bottom-end', on, children } = $props();
 </script>
 
-<Dropdown position={dropdownPosition} keepDropdownOpen={true}>
+<Dropdown position={dropdownPosition} keepDropdownOpen={true} panel={false}>
   {#snippet trigger()}
     <div class="emoji-picker__trigger">
       {#if children}

package/dist/ui/inputs/input-emoji-picker/cmp.input-emoji-picker.svelte

@@ -11,7 +11,7 @@ let { on } = $props();
 </button>
 
 <div class="input-emoji-picker">
-  <Dropdown position="bottom-end" matchTriggerWidth on={{ mounted: (e) => (toggleDropdown = e.toggleOpen) }} keepDropdownOpen={true}>
+  <Dropdown position="bottom-end" matchTriggerWidth panel={false} on={{ mounted: (e) => (toggleDropdown = e.toggleOpen) }} keepDropdownOpen={true}>
     {#snippet trigger()}
       <div class="input-emoji-picker__trigger-stub"></div>
     {/snippet}

package/dist/ui/video/cmp.video.svelte

@@ -8,7 +8,7 @@ import IconSpeaker from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg?raw'
 import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg?raw';
 import { untrack } from 'svelte';
 import { fade } from 'svelte/transition';
-let { src, poster, id = randomNanoid(), controls = false, autoplay = false, loop = false, inert = false, allowPreloading = false, hideSpeaker = false, hidePlayButton = false, intersectionContainer, scrubberPosition = 'bottom', on } = $props();
+let { src, poster, id = randomNanoid(), autoplay = false, loop = false, inert = false, allowPreloading = false, hideSpeaker = false, hidePlayButton = false, intersectionContainer, scrubberPosition = 'bottom', on } = $props();
 let video = $state(null);
 let videoContainerRef = $state(null);
 let showControlsOnHover = $state(false);
@@ -111,7 +111,7 @@ $effect(() => {
             }
         }, {
             root: intersectionContainer,
-            rootMargin: '0px',
+            rootMargin: poster ? '0px' : '200px',
             threshold: [0.1, 0.4, 0.6]
         });
         observer.observe(container);
@@ -229,12 +229,11 @@ const handleSeek = (percent) => {
 <div class="video" role="none" inert={inert} bind:this={videoContainerRef}>
   <video
     class="video__video"
-    class:video__video--not-activated={!everActivated}
+    class:video__video--not-activated={!everActivated && !!poster}
     width="100%"
-    controls={controls && everActivated}
     poster={poster}
     loop={loop}
-    preload="metadata"
+    preload={poster ? 'metadata' : 'auto'}
     onvolumechange={onVolumeChange}
     ontimeupdate={onTimeUpdate}
     onloadeddata={onLoaded}
@@ -248,56 +247,54 @@ const handleSeek = (percent) => {
   {#if !everActivated && poster}
     <img class="video__poster" src={poster} alt="" />
   {/if}
-  {#if !controls || !everActivated}
-    <div
-      class="video__overlay"
-      onclick={togglePlay}
-      onkeydown={() => ({})}
-      onmouseenter={() => (showControlsOnHover = true)}
-      onmouseleave={() => (showControlsOnHover = false)}
-      role="none">
-      {#if isVideoPaused && !hidePlayButton}
-        <button type="button" aria-label="play" class="video__playback-button" onclick={togglePlay} onkeydown={() => ({})}>
-          <Icon src={IconPlay} color="white" />
-        </button>
-      {:else if showControlsOnHover && !hidePlayButton}
-        <button type="button" aria-label="pause" class="video__playback-button video__playback-button--pause" onclick={togglePlay} onkeydown={() => ({})}>
-          <Icon src={IconPause} color="white" />
-        </button>
-      {/if}
+  <div
+    class="video__overlay"
+    onclick={togglePlay}
+    onkeydown={() => ({})}
+    onmouseenter={() => (showControlsOnHover = true)}
+    onmouseleave={() => (showControlsOnHover = false)}
+    role="none">
+    {#if isVideoPaused && !hidePlayButton}
+      <button type="button" aria-label="play" class="video__playback-button" onclick={togglePlay} onkeydown={() => ({})}>
+        <Icon src={IconPlay} color="white" />
+      </button>
+    {:else if showControlsOnHover && !hidePlayButton}
+      <button type="button" aria-label="pause" class="video__playback-button video__playback-button--pause" onclick={togglePlay} onkeydown={() => ({})}>
+        <Icon src={IconPause} color="white" />
+      </button>
+    {/if}
 
-      {#if (showControlsOnHover || MediaVolumeManager.isMuted) && !hideSpeaker}
-        <button type="button" aria-label={MediaVolumeManager.isMuted ? 'mute' : 'unmute'} class="video__mute-button" onclick={toggleMute}>
-          {#if MediaVolumeManager.isMuted}
-            <Icon src={IconSpeakerMute} color="white" />
-          {:else}
-            <Icon src={IconSpeaker} color="white" />
-          {/if}
-        </button>
-      {/if}
+    {#if (showControlsOnHover || MediaVolumeManager.isMuted) && !hideSpeaker}
+      <button type="button" aria-label={MediaVolumeManager.isMuted ? 'mute' : 'unmute'} class="video__mute-button" onclick={toggleMute}>
+        {#if MediaVolumeManager.isMuted}
+          <Icon src={IconSpeakerMute} color="white" />
+        {:else}
+          <Icon src={IconSpeaker} color="white" />
+        {/if}
+      </button>
+    {/if}
 
-      {#if everActivated}
-        <div
-          class="video__progress-container"
-          class:video__progress-container--top={scrubberPosition === 'top'}
-          class:video__progress-container--bottom={scrubberPosition === 'bottom'}
-          onmouseenter={() => (showProgressOnHover = true)}
-          onmouseleave={() => (showProgressOnHover = false)}
-          role="none">
-          {#if showProgressOnHover || (!showProgressOnHover && isVideoPaused)}
-            <div
-              class="video__seek-bar"
-              transition:fade={{ duration: isVideoPaused ? 0 : 300 }}
-              onclick={(e) => e.stopPropagation()}
-              onkeydown={() => ({})}
-              role="none">
-              <SeekBar value={percentageCompleted} on={{ seek: handleSeek }} />
-            </div>
-          {/if}
-        </div>
-      {/if}
-    </div>
-  {/if}
+    {#if everActivated}
+      <div
+        class="video__progress-container"
+        class:video__progress-container--top={scrubberPosition === 'top'}
+        class:video__progress-container--bottom={scrubberPosition === 'bottom'}
+        onmouseenter={() => (showProgressOnHover = true)}
+        onmouseleave={() => (showProgressOnHover = false)}
+        role="none">
+        {#if showProgressOnHover || (!showProgressOnHover && isVideoPaused)}
+          <div
+            class="video__seek-bar"
+            transition:fade={{ duration: isVideoPaused ? 0 : 300 }}
+            onclick={(e) => e.stopPropagation()}
+            onkeydown={() => ({})}
+            role="none">
+            <SeekBar value={percentageCompleted} on={{ seek: handleSeek }} />
+          </div>
+        {/if}
+      </div>
+    {/if}
+  </div>
 </div>
 
 <!--

package/dist/ui/video/cmp.video.svelte.d.ts

@@ -6,8 +6,6 @@ type Props = {
     poster: string | null | undefined;
     /** Unique player ID for the global PlaybackManager @default nanoid() */
     id?: string;
-    /** Show native browser controls once playback starts */
-    controls?: boolean;
     /** Autoplay strategy: `true` plays immediately, `'on-appearance'` plays when scrolled into view */
     autoplay?: true | false | 'on-appearance';
     loop?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.2.25",
+  "version": "0.2.27-1775513705074",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",