@streamscloud/kit 0.28.0 → 0.29.1

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/navigation/cmp.nav-menu-item.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">import { IconSlot } from '../icon';
-const { label, icon, href, active = false, disabled = false, badge, target, rel, on } = $props();
+const { label, icon, href, active = false, activeStyle = 'plain', disabled = false, badge, target, rel, on } = $props();
+const activeFilled = $derived(active && activeStyle === 'filled');
 const badgeText = $derived(typeof badge === 'number' && badge > 99 ? '99+' : badge);
 const hasBadge = $derived(badge !== undefined && badge !== null && badge !== '');
 const handleClick = () => {
@@ -24,6 +25,7 @@ const handleClick = () => {
   <a
     class="nav-menu-item"
     class:nav-menu-item--active={active}
+    class:nav-menu-item--active-filled={activeFilled}
     class:nav-menu-item--disabled={disabled}
     href={href}
     target={target}
@@ -38,6 +40,7 @@ const handleClick = () => {
     type="button"
     class="nav-menu-item"
     class:nav-menu-item--active={active}
+    class:nav-menu-item--active-filled={activeFilled}
     class:nav-menu-item--disabled={disabled}
     disabled={disabled}
     aria-current={active ? 'page' : undefined}
@@ -51,7 +54,9 @@ const handleClick = () => {
 NavMenuItem — single row inside a `NavMenuGroup`. Icon + label, optional badge in the top-right of
 the icon (numbers > 99 truncate to `99+`). The icon accepts an SVG source string or a snippet.
 Renders as `<a>` when `href` is set, `<button>` otherwise. Active state is consumer-controlled
-(`active` prop) — wire it to your router's pathname matching upstream.
+(`active` prop) — wire it to your router's pathname matching upstream. `activeStyle` picks how the
+active row reads: `'plain'` (default) leaves color as the only signal and keeps the hover background
+working on the active row, `'filled'` plates it and suppresses hover there.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -63,7 +68,7 @@ Renders as `<a>` when `href` is set, `<button>` otherwise. Active state is consu
 | `--sc-kit--nav-menu-item--color--active` | Active / hover text color | `--sc-kit--color--text--primary` |
 | `--sc-kit--nav-menu-item--color--disabled` | Disabled text color | `--sc-kit--color--text--muted` |
 | `--sc-kit--nav-menu-item--background--hover` | Hover background | `--sc-kit--color--bg--hover` |
-| `--sc-kit--nav-menu-item--background--active` | Active background | `--sc-kit--color--bg--menu-active` |
+| `--sc-kit--nav-menu-item--background--active` | Active background — `activeStyle="filled"` only | `--sc-kit--color--bg--menu-active` |
 | `--sc-kit--nav-menu-item--badge--background` | Badge background | `--sc-kit--color--accent` |
 | `--sc-kit--nav-menu-item--badge--color` | Badge text color | `--sc-kit--color--text--on-accent` |
 -->
@@ -93,13 +98,13 @@ Renders as `<a>` when `href` is set, `<button>` otherwise. Active state is consu
   text-align: left;
   transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default), background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }
-.nav-menu-item:hover:not(.nav-menu-item--active):not(.nav-menu-item--disabled):not(:disabled) {
+.nav-menu-item:hover:not(.nav-menu-item--active-filled):not(.nav-menu-item--disabled):not(:disabled) {
   background: var(--_nav-menu-item--background-hover);
 }
 .nav-menu-item:hover:not(.nav-menu-item--disabled):not(:disabled), .nav-menu-item--active {
   color: var(--_nav-menu-item--color-active);
 }
-.nav-menu-item--active {
+.nav-menu-item--active-filled {
   background: var(--_nav-menu-item--background-active);
 }
 .nav-menu-item--disabled, .nav-menu-item:disabled {

package/dist/ui/navigation/cmp.nav-menu-item.svelte.d.ts

@@ -7,6 +7,8 @@ type Props = {
     href?: string;
     /** Highlight as the current item. Consumer-controlled. @default false */
     active?: boolean;
+    /** Active row visuals — `'plain'` uses color only and keeps hover, `'filled'` paints the active background (no hover on it). @default 'plain' */
+    activeStyle?: 'filled' | 'plain';
     disabled?: boolean;
     /** Notification badge on the icon (top-right corner). Numbers > 99 render as `99+`; strings render as-is. */
     badge?: number | string;
@@ -22,7 +24,9 @@ type Props = {
  * NavMenuItem — single row inside a `NavMenuGroup`. Icon + label, optional badge in the top-right of
  * the icon (numbers > 99 truncate to `99+`). The icon accepts an SVG source string or a snippet.
  * Renders as `<a>` when `href` is set, `<button>` otherwise. Active state is consumer-controlled
- * (`active` prop) — wire it to your router's pathname matching upstream.
+ * (`active` prop) — wire it to your router's pathname matching upstream. `activeStyle` picks how the
+ * active row reads: `'plain'` (default) leaves color as the only signal and keeps the hover background
+ * working on the active row, `'filled'` plates it and suppresses hover there.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
@@ -34,7 +38,7 @@ type Props = {
  * | `--sc-kit--nav-menu-item--color--active` | Active / hover text color | `--sc-kit--color--text--primary` |
  * | `--sc-kit--nav-menu-item--color--disabled` | Disabled text color | `--sc-kit--color--text--muted` |
  * | `--sc-kit--nav-menu-item--background--hover` | Hover background | `--sc-kit--color--bg--hover` |
- * | `--sc-kit--nav-menu-item--background--active` | Active background | `--sc-kit--color--bg--menu-active` |
+ * | `--sc-kit--nav-menu-item--background--active` | Active background — `activeStyle="filled"` only | `--sc-kit--color--bg--menu-active` |
  * | `--sc-kit--nav-menu-item--badge--background` | Badge background | `--sc-kit--color--accent` |
  * | `--sc-kit--nav-menu-item--badge--color` | Badge text color | `--sc-kit--color--text--on-accent` |
  */

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.1",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",