@streamscloud/kit 0.27.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/grid-card/cmp.grid-card-media.svelte

@@ -111,6 +111,9 @@ a `Carousel` of mixed image / video items. Seek-bar renders below the media when
 (default true); the bar itself is hidden via `visibility: hidden` when the current item isn't
 playable (preserves card height). Optional `duration` overlay renders bottom-right.
 
+The play glyph of a playable item is a `PlayIndicator` — size and shadow are tuned with
+`--sc-kit--play-indicator--size` / `--sc-kit--play-indicator--filter`.
+
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|

package/dist/ui/grid-card/cmp.grid-card-media.svelte.d.ts

@@ -22,6 +22,9 @@ type Props = {
  * (default true); the bar itself is hidden via `visibility: hidden` when the current item isn't
  * playable (preserves card height). Optional `duration` overlay renders bottom-right.
  *
+ * The play glyph of a playable item is a `PlayIndicator` — size and shadow are tuned with
+ * `--sc-kit--play-indicator--size` / `--sc-kit--play-indicator--filter`.
+ *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|

package/dist/ui/grid-card/video-player-localization.d.ts

@@ -0,0 +1,4 @@
+export declare class VideoPlayerLocalization {
+    get play(): string;
+    get pause(): string;
+}

package/dist/ui/grid-card/video-player-localization.js

@@ -0,0 +1,19 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    play: {
+        en: 'Play',
+        no: 'Spill av'
+    },
+    pause: {
+        en: 'Pause',
+        no: 'Pause'
+    }
+};
+export class VideoPlayerLocalization {
+    get play() {
+        return loc.play[AppLocale.current];
+    }
+    get pause() {
+        return loc.pause[AppLocale.current];
+    }
+}

package/dist/ui/grid-card/video-player.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">import { randomNanoid } from '../../core/utils';
-import { Icon } from '../icon';
 import { PlaybackManager } from '../media-playback';
-import IconPause from '@fluentui/svg-icons/icons/pause_20_regular.svg?raw';
-import IconPlay from '@fluentui/svg-icons/icons/play_20_regular.svg?raw';
+import { PlayIndicator } from '../play-indicator';
+import { VideoPlayerLocalization } from './video-player-localization';
 import { untrack } from 'svelte';
 const { src, poster, active, on } = $props();
 const id = randomNanoid();
+const localization = new VideoPlayerLocalization();
 let videoEl = $state(null);
 let currentTime = $state(0);
 let duration = $state(NaN);
@@ -132,12 +132,13 @@ export const seekTo = (time) => {
     type="button"
     class="video-player__control-button"
     class:is-playing={isPlaying}
+    aria-label={isPlaying ? localization.pause : localization.play}
     onmousedown={(e) => e.preventDefault()}
     onclick={(e) => {
       e.stopPropagation();
       togglePlay();
     }}>
-    <Icon src={isPlaying ? IconPause : IconPlay} color="on-accent" />
+    <PlayIndicator glyph={isPlaying ? 'pause' : 'play'} />
   </button>
 
   <div class="video-player__duration">{formatTime(duration - currentTime)}</div>
@@ -148,10 +149,14 @@ export const seekTo = (time) => {
 Internal video player used by `GridCardMedia` for a single playable media item. Integrates
 with the global `PlaybackManager` so only one player can play at a time. Exposes `seekTo(t)`
 via `bind:this` for parent seek-bar sync. Not exported standalone — use `GridCardMedia`.
+
+The centred control renders `PlayIndicator`, so its size and shadow are tuned through the
+`--sc-kit--play-indicator--*` variables set anywhere above the card.
 -->
 
 <style>.video-player {
   --_video-player--object-fit: var(--sc-kit--grid-card--media--object-fit, contain);
+  container-type: inline-size;
   position: relative;
   width: 100%;
   height: 100%;
@@ -171,7 +176,6 @@ via `bind:this` for parent seek-bar sync. Not exported standalone — use `GridC
   border: none;
   background: none;
   cursor: pointer;
-  --sc-kit--icon--filter: var(--sc-kit--filter--icon-overlay);
   transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }
 .video-player__control-button.is-playing {

package/dist/ui/grid-card/video-player.svelte.d.ts

@@ -20,6 +20,9 @@ type Props = {
  * Internal video player used by `GridCardMedia` for a single playable media item. Integrates
  * with the global `PlaybackManager` so only one player can play at a time. Exposes `seekTo(t)`
  * via `bind:this` for parent seek-bar sync. Not exported standalone — use `GridCardMedia`.
+ *
+ * The centred control renders `PlayIndicator`, so its size and shadow are tuned through the
+ * `--sc-kit--play-indicator--*` variables set anywhere above the card.
  */
 declare const VideoPlayer: import("svelte").Component<Props, {
     seekTo: (time: number) => void;

package/dist/ui/play-indicator/cmp.play-indicator.svelte

@@ -1,28 +1,38 @@
 <script lang="ts">import { Icon } from '../icon';
+import IconPause from '@fluentui/svg-icons/icons/pause_20_regular.svg?raw';
 import IconPlay from '@fluentui/svg-icons/icons/play_20_regular.svg?raw';
+const { glyph = 'play' } = $props();
 </script>
 
 <div class="play-indicator">
-  <Icon src={IconPlay} color="on-accent" />
+  <Icon src={glyph === 'pause' ? IconPause : IconPlay} color="on-accent" />
 </div>
 
 <!--
 @component
-Decorative play glyph overlaid on a static cover/thumbnail to mark it as video. Not a player: it plays
-nothing and is `pointer-events: none`. Matches the built-in play button of kit's `Video`. The parent
-positions it (typically absolute-centered) and must be `container-type: inline-size` for the default
-container-query size to scale.
+Playback glyph overlaid on a cover / thumbnail or on a player surface. It plays nothing and is
+`pointer-events: none` — it only depicts the state its parent owns, so an interactive parent wraps it
+in its own `<button>`. The parent positions it (typically absolute-centered) and must be
+`container-type: inline-size` for the default container-query size to scale.
+
+Lower the shadow on very light backgrounds: the default `drop-shadow(1px 1px #000)` reads as a harsh
+outline there — pass a softer filter, or `none`.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--play-indicator--size` | Glyph size; container-query clamp scales it to parent width | `clamp(1.75rem, 12cqi, 3.5rem)` |
+| `--sc-kit--play-indicator--size` | Glyph size; container-query clamp scales it to parent width, reaching the 40px ceiling at 500px | `clamp(1.75rem, 8cqi, 2.5rem)` |
+| `--sc-kit--play-indicator--filter` | Shadow applied to the glyph | `--sc-kit--filter--icon-overlay` |
 -->
 
 <style>.play-indicator {
-  --_play-indicator--size: var(--sc-kit--play-indicator--size, clamp(1.75rem, 12cqi, 3.5rem));
+  --_play-indicator--size: var(
+    --sc-kit--play-indicator--size,
+    var(--_--play-indicator--size, clamp(1.75rem, 8cqi, 2.5rem))
+  );
+  --_play-indicator--filter: var(--sc-kit--play-indicator--filter, var(--sc-kit--filter--icon-overlay));
   display: inline-flex;
   pointer-events: none;
   --sc-kit--icon--size: var(--_play-indicator--size);
-  --sc-kit--icon--filter: var(--sc-kit--filter--icon-overlay);
+  --sc-kit--icon--filter: var(--_play-indicator--filter);
 }</style>

package/dist/ui/play-indicator/cmp.play-indicator.svelte.d.ts

@@ -1,29 +1,22 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
+type Props = {
+    /** Which playback state to depict. @default 'play' */
+    glyph?: 'play' | 'pause';
+};
 /**
- * Decorative play glyph overlaid on a static cover/thumbnail to mark it as video. Not a player: it plays
- * nothing and is `pointer-events: none`. Matches the built-in play button of kit's `Video`. The parent
- * positions it (typically absolute-centered) and must be `container-type: inline-size` for the default
- * container-query size to scale.
+ * Playback glyph overlaid on a cover / thumbnail or on a player surface. It plays nothing and is
+ * `pointer-events: none` — it only depicts the state its parent owns, so an interactive parent wraps it
+ * in its own `<button>`. The parent positions it (typically absolute-centered) and must be
+ * `container-type: inline-size` for the default container-query size to scale.
+ *
+ * Lower the shadow on very light backgrounds: the default `drop-shadow(1px 1px #000)` reads as a harsh
+ * outline there — pass a softer filter, or `none`.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--play-indicator--size` | Glyph size; container-query clamp scales it to parent width | `clamp(1.75rem, 12cqi, 3.5rem)` |
+ * | `--sc-kit--play-indicator--size` | Glyph size; container-query clamp scales it to parent width, reaching the 40px ceiling at 500px | `clamp(1.75rem, 8cqi, 2.5rem)` |
+ * | `--sc-kit--play-indicator--filter` | Shadow applied to the glyph | `--sc-kit--filter--icon-overlay` |
  */
-declare const Cmp: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Cmp = InstanceType<typeof Cmp>;
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

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/dist/ui/video/cmp.video.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">import { randomNanoid } from '../../core/utils';
 import { Icon } from '../icon';
 import { MediaVolumeManager, PlaybackManager } from '../media-playback';
+import { PlayIndicator } from '../play-indicator';
 import { SeekBar } from '../seek-bar';
 import { VideoLocalization } from './video-localization';
-import IconPause from '@fluentui/svg-icons/icons/pause_20_regular.svg?raw';
-import IconPlay from '@fluentui/svg-icons/icons/play_20_regular.svg?raw';
 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(), 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', staticControls = false, on } = $props();
 const localization = new VideoLocalization();
 let video = $state(null);
 let videoContainerRef = $state(null);
@@ -243,7 +242,7 @@ const handleSeek = (percent) => {
 };
 </script>
 
-<div class="video" role="none" inert={inert} bind:this={videoContainerRef}>
+<div class="video" class:video--static-controls={staticControls} role="none" inert={inert} bind:this={videoContainerRef}>
   <video
     class="video__video"
     class:video__video--not-activated={!everActivated && !!poster}
@@ -273,16 +272,11 @@ const handleSeek = (percent) => {
     role="none">
     {#if isVideoPaused && !hidePlayButton}
       <button type="button" aria-label={localization.play} class="video__playback-button" onclick={togglePlay} onkeydown={() => ({})}>
-        <Icon src={IconPlay} color="on-accent" />
+        <PlayIndicator glyph="play" />
       </button>
     {:else if showControlsOnHover && !hidePlayButton}
-      <button
-        type="button"
-        aria-label={localization.pause}
-        class="video__playback-button video__playback-button--pause"
-        onclick={togglePlay}
-        onkeydown={() => ({})}>
-        <Icon src={IconPause} color="on-accent" />
+      <button type="button" aria-label={localization.pause} class="video__playback-button" onclick={togglePlay} onkeydown={() => ({})}>
+        <PlayIndicator glyph="pause" />
       </button>
     {/if}
 
@@ -323,13 +317,17 @@ const handleSeek = (percent) => {
 @component
 A full-featured video player with custom overlay controls, play/pause, mute, seek bar, poster image, autoplay-on-scroll, and global playback management.
 
+The root is a `container-type: inline-size` container, so the play / pause glyph scales with the
+player's own width. Pass `staticControls` to drop the container where size containment would break
+the surrounding layout.
+
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
 | `--sc-kit--video--background-color` | Player background | `black` |
 | `--sc-kit--video--border-radius` | Corner rounding | `0` |
 | `--sc-kit--video--media-fit` | Video object-fit mode | `contain` |
-| `--sc-kit--video--playback-button--size` | Size of the custom Play button | `2.5rem` |
+| `--sc-kit--video--playback-button--size` | Pins the play / pause glyph to a fixed size instead of letting `PlayIndicator` scale it with the player width | unset |
 | `--sc-kit--video--poster--media-fit` | Poster image object-fit mode | `cover` |
 -->
 
@@ -337,8 +335,9 @@ A full-featured video player with custom overlay controls, play/pause, mute, see
   --_video--background-color: var(--sc-kit--video--background-color, #000);
   --_video--border-radius: var(--sc-kit--video--border-radius, 0);
   --_video--media-fit: var(--sc-kit--video--media-fit, contain);
-  --_video--playback-button--size: var(--sc-kit--video--playback-button--size, 2.5rem);
   --_video--poster--media-fit: var(--sc-kit--video--poster--media-fit, cover);
+  --_--play-indicator--size: var(--sc-kit--video--playback-button--size, initial);
+  container-type: inline-size;
   height: 100%;
   min-height: 100%;
   max-height: 100%;
@@ -352,20 +351,14 @@ A full-featured video player with custom overlay controls, play/pause, mute, see
   background: var(--_video--background-color);
 }
 .video__playback-button {
-  --sc-kit--icon--size: var(--_video--playback-button--size);
-  --sc-kit--icon--filter: var(--sc-kit--filter--icon-overlay);
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
-.video__playback-button--pause {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .video__playback-button--pause {
-    display: none;
-  }
+.video--static-controls {
+  --_--play-indicator--size: var(--sc-kit--video--playback-button--size, 2.5rem);
+  container-type: normal;
 }
 .video__mute-button {
   --sc-kit--icon--size: 1.25rem;

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

@@ -21,6 +21,12 @@ type Props = {
     hidePlayButton?: boolean;
     /** Position the seek bar at the top or bottom of the overlay @default 'bottom' */
     scrubberPosition?: ScrubberPosition;
+    /**
+     * Removes `container-type: inline-size` from the root so the play glyph stays a fixed 40px.
+     * Use this when size containment would collapse a shrink-to-fit parent to zero width.
+     * @default false
+     */
+    staticControls?: boolean;
     on?: {
         started?: (data: {
             id: string;
@@ -41,13 +47,17 @@ type Props = {
 /**
  * A full-featured video player with custom overlay controls, play/pause, mute, seek bar, poster image, autoplay-on-scroll, and global playback management.
  *
+ * The root is a `container-type: inline-size` container, so the play / pause glyph scales with the
+ * player's own width. Pass `staticControls` to drop the container where size containment would break
+ * the surrounding layout.
+ *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
  * | `--sc-kit--video--background-color` | Player background | `black` |
  * | `--sc-kit--video--border-radius` | Corner rounding | `0` |
  * | `--sc-kit--video--media-fit` | Video object-fit mode | `contain` |
- * | `--sc-kit--video--playback-button--size` | Size of the custom Play button | `2.5rem` |
+ * | `--sc-kit--video--playback-button--size` | Pins the play / pause glyph to a fixed size instead of letting `PlayIndicator` scale it with the player width | unset |
  * | `--sc-kit--video--poster--media-fit` | Poster image object-fit mode | `cover` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;

package/package.json

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