@streamscloud/kit 0.28.0 → 0.29.0

package/dist/styles/_semantic.scss

@@ -15,7 +15,7 @@
   --sc-kit--color--bg--hover: light-dark(#f3f5f8, #{$color-dark-700});
   --sc-kit--color--bg--active: light-dark(#eef2f8, #{$color-dark-600});
   --sc-kit--color--bg--menu-active: light-dark(#{$color-blue-50}, #{$color-dark-500});
-  --sc-kit--color--bg--images: light-dark(#{$color-neutral-300}, #{$color-neutral-700});
+  --sc-kit--color--bg--images: light-dark(#{$color-neutral-300}, #{$color-dark-50});
 
   // ============================================================
   // COLOR — TEXT

package/dist/ui/skeleton/cmp.skeleton.svelte

@@ -1,21 +1,27 @@
 <script lang="ts">"use strict";
-let { shape = 'rect', lines = 1, shimmer = false } = $props();
+let { shape = 'rect', placeholder = false, lines = 1, shimmer = false } = $props();
 </script>
 
 {#if shape === 'text' && lines > 1}
   <span class="skeleton-stack">
     {#each Array(lines) as _, i (i)}
-      <span class="skeleton skeleton--text" class:skeleton--shimmer={shimmer} class:skeleton--text-last={i === lines - 1}></span>
+      <span
+        class="skeleton skeleton--text"
+        class:skeleton--placeholder={placeholder}
+        class:skeleton--shimmer={shimmer}
+        class:skeleton--text-last={i === lines - 1}></span>
     {/each}
   </span>
 {:else}
-  <span class="skeleton skeleton--{shape}" class:skeleton--shimmer={shimmer}></span>
+  <span class="skeleton skeleton--{shape}" class:skeleton--placeholder={placeholder} class:skeleton--shimmer={shimmer}></span>
 {/if}
 
 <!--
 @component
 Skeleton — content placeholder rendered while data is loading. Three shapes: `rect` (default — generic block), `circle` (avatars), `text` (one or more text lines via `lines` — the last line is naturally shorter to suggest a paragraph end). All dimensions are CSS-var driven; sizing is the consumer's concern.
 
+`placeholder` swaps the fill for the image-backdrop color, so a media slot reads as an empty image / video frame rather than as loading content.
+
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
@@ -24,7 +30,7 @@ Skeleton — content placeholder rendered while data is loading. Three shapes: `
 | `--sc-kit--skeleton--text-height` | Per-line height in `shape='text'` | `0.75em` |
 | `--sc-kit--skeleton--text-last-width` | Width of the last line in multi-line text | `70%` |
 | `--sc-kit--skeleton--text-gap` | Vertical gap between text lines | `--sc-kit--space--2` |
-| `--sc-kit--skeleton--base-color` | Placeholder fill / shimmer darker stop | `--sc-kit--color--bg--active` |
+| `--sc-kit--skeleton--base-color` | Placeholder fill / shimmer darker stop | `--sc-kit--color--bg--active`, or `--sc-kit--color--bg--images` with `placeholder` |
 | `--sc-kit--skeleton--highlight-color` | Shimmer peak (lighter stop) — `shimmer` only | `--sc-kit--color--bg--hover` |
 | `--sc-kit--skeleton--radius` | Corner radius (rect / text) | `--sc-kit--radius--sm` |
 | `--sc-kit--skeleton--duration` | Shimmer cycle length — `shimmer` only | `2.2s` |
@@ -43,6 +49,9 @@ Skeleton — content placeholder rendered while data is loading. Three shapes: `
   width: var(--_skeleton--width);
   height: var(--_skeleton--height);
 }
+.skeleton--placeholder {
+  --_skeleton--base-color: var(--sc-kit--skeleton--base-color, var(--sc-kit--color--bg--images));
+}
 .skeleton--shimmer {
   --_skeleton--highlight-color: var(--sc-kit--skeleton--highlight-color, var(--sc-kit--color--bg--hover));
   --_skeleton--duration: var(--sc-kit--skeleton--duration, 2.2s);

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

@@ -1,6 +1,8 @@
 type Props = {
     /** Shape variant. @default 'rect' */
     shape?: 'rect' | 'circle' | 'text';
+    /** Fill with the image-backdrop color, for a media slot standing in for an image or video rather than for loading content. @default false */
+    placeholder?: boolean;
     /** For `shape='text'` only — render N stacked text lines (last one naturally shorter to suggest paragraph end). @default 1 */
     lines?: number;
     /** Animate a shimmer sweep instead of a flat static placeholder. @default false */
@@ -9,6 +11,8 @@ type Props = {
 /**
  * Skeleton — content placeholder rendered while data is loading. Three shapes: `rect` (default — generic block), `circle` (avatars), `text` (one or more text lines via `lines` — the last line is naturally shorter to suggest a paragraph end). All dimensions are CSS-var driven; sizing is the consumer's concern.
  *
+ * `placeholder` swaps the fill for the image-backdrop color, so a media slot reads as an empty image / video frame rather than as loading content.
+ *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
@@ -17,7 +21,7 @@ type Props = {
  * | `--sc-kit--skeleton--text-height` | Per-line height in `shape='text'` | `0.75em` |
  * | `--sc-kit--skeleton--text-last-width` | Width of the last line in multi-line text | `70%` |
  * | `--sc-kit--skeleton--text-gap` | Vertical gap between text lines | `--sc-kit--space--2` |
- * | `--sc-kit--skeleton--base-color` | Placeholder fill / shimmer darker stop | `--sc-kit--color--bg--active` |
+ * | `--sc-kit--skeleton--base-color` | Placeholder fill / shimmer darker stop | `--sc-kit--color--bg--active`, or `--sc-kit--color--bg--images` with `placeholder` |
  * | `--sc-kit--skeleton--highlight-color` | Shimmer peak (lighter stop) — `shimmer` only | `--sc-kit--color--bg--hover` |
  * | `--sc-kit--skeleton--radius` | Corner radius (rect / text) | `--sc-kit--radius--sm` |
  * | `--sc-kit--skeleton--duration` | Shimmer cycle length — `shimmer` only | `2.2s` |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",