@streamscloud/kit 0.26.0 → 0.28.0

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/page-layout/cmp.page-layout.svelte

@@ -1,7 +1,9 @@
-<script lang="ts">import { Icon } from '../icon';
+<script lang="ts">import LayoutControlButton from './layout-control-button.svelte';
 import { PageLayoutLocalization } from './page-layout-localization';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
 import IconWindow from '@fluentui/svg-icons/icons/window_20_regular.svg?raw';
-const { children, title, actions, windowToggleActive = false, scrollable = false, on } = $props();
+import IconWindowMultiple from '@fluentui/svg-icons/icons/window_multiple_20_regular.svg?raw';
+const { children, title, actions, navigationToggle, editorControls, scrollable = false } = $props();
 const localization = new PageLayoutLocalization();
 </script>
 
@@ -18,16 +20,29 @@ const localization = new PageLayoutLocalization();
       {#if actions}
         {@render actions()}
       {/if}
-      {#if on?.windowToggle}
-        <button
-          type="button"
-          class="page-layout__window-toggle"
-          class:page-layout__window-toggle--active={windowToggleActive}
-          onclick={on.windowToggle}
-          aria-label={localization.toggleNavigation}
-          aria-pressed={windowToggleActive}>
-          <Icon src={IconWindow} />
-        </button>
+      {#if navigationToggle || editorControls}
+        <div class="page-layout__controls">
+          {#if navigationToggle}
+            <LayoutControlButton
+              icon={IconWindow}
+              label={localization.toggleNavigation}
+              variant="flat"
+              active={navigationToggle.active}
+              on={{ click: navigationToggle.onClick }} />
+          {/if}
+          {#if editorControls}
+            <LayoutControlButton
+              icon={IconWindowMultiple}
+              label={localization.togglePanels}
+              active={editorControls.panelsToggle.active}
+              on={{ click: editorControls.panelsToggle.onClick }} />
+            <LayoutControlButton
+              icon={IconDismiss}
+              label={localization.close}
+              active={editorControls.close.active}
+              on={{ click: editorControls.close.onClick }} />
+          {/if}
+        </div>
       {/if}
     </div>
   </div>
@@ -38,12 +53,14 @@ const localization = new PageLayoutLocalization();
 
 <!--
 @component
-PageLayout — top-level window chrome. Renders a fixed-height header (title + actions + optional
-window-toggle button) above a flex-column body that typically contains a `PagePanels` row.
+PageLayout — top-level window chrome. Renders a fixed-height header (title + actions + an optional
+group of chrome buttons) above a flex-column body that typically contains a `PagePanels` row.
 
-Pass `on.windowToggle` to surface a navigation-toggle button at the header's right edge — wire it to
-whatever sidebar / drawer state your app owns. Omit it to hide the button. Set `scrollable` to let
-the whole page scroll as one document with sticky panel headers.
+`navigationToggle` surfaces the app-navigation button as a bare glyph; `editorControls` is the fixed
+editor pair — panels toggle + close, both required so an editor never ships half the preset, drawn as
+outlined squares. Every entry takes `{ active?, onClick }`, and the group renders in the order
+navigation → panels → close. Set `scrollable` to let the whole page scroll as one document with
+sticky panel headers.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -86,27 +103,10 @@ the whole page scroll as one document with sticky panel headers.
   align-items: center;
   gap: 1rem;
 }
-.page-layout__window-toggle {
-  --sc-kit--icon--size: 1.125rem;
-  display: inline-flex;
+.page-layout__controls {
+  display: flex;
   align-items: center;
-  justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  padding: 0;
-  background: none;
-  border: none;
-  border-radius: var(--sc-kit--radius--sm);
-  color: var(--sc-kit--color--text--muted);
-  cursor: pointer;
-}
-.page-layout__window-toggle:hover {
-  background: var(--sc-kit--color--bg--hover);
-  color: var(--sc-kit--color--text--primary);
-}
-.page-layout__window-toggle--active {
-  background: var(--sc-kit--color--bg--active);
-  color: var(--sc-kit--color--text--primary);
+  gap: var(--sc-kit--space--2);
 }
 .page-layout__body {
   flex: 1;

package/dist/ui/page-layout/cmp.page-layout.svelte.d.ts

@@ -1,23 +1,24 @@
+import type { EditorControls, PageLayoutAction } from './types';
 import type { Snippet } from 'svelte';
 type Props = {
     children: Snippet;
     title?: string | Snippet;
     actions?: Snippet;
-    /** Visual + ARIA state for the window-toggle button. Set `true` when the navigation it controls is hidden / collapsed — the button gets `aria-pressed` and an active background. @default false */
-    windowToggleActive?: boolean;
+    /** Hides / shows the host app's own navigation. When set, a bare glyph button is rendered in the header's control group. */
+    navigationToggle?: PageLayoutAction;
+    /** Editor chrome — the fixed panels-toggle + close pair. Set it to render both buttons; omit it entirely for a non-editor page. */
+    editorControls?: EditorControls;
     scrollable?: boolean;
-    on?: {
-        /** When set, a window-toggle button is rendered at the right edge of the header. */
-        windowToggle?: () => void;
-    };
 };
 /**
- * PageLayout — top-level window chrome. Renders a fixed-height header (title + actions + optional
- * window-toggle button) above a flex-column body that typically contains a `PagePanels` row.
+ * PageLayout — top-level window chrome. Renders a fixed-height header (title + actions + an optional
+ * group of chrome buttons) above a flex-column body that typically contains a `PagePanels` row.
  *
- * Pass `on.windowToggle` to surface a navigation-toggle button at the header's right edge — wire it to
- * whatever sidebar / drawer state your app owns. Omit it to hide the button. Set `scrollable` to let
- * the whole page scroll as one document with sticky panel headers.
+ * `navigationToggle` surfaces the app-navigation button as a bare glyph; `editorControls` is the fixed
+ * editor pair — panels toggle + close, both required so an editor never ships half the preset, drawn as
+ * outlined squares. Every entry takes `{ active?, onClick }`, and the group renders in the order
+ * navigation → panels → close. Set `scrollable` to let the whole page scroll as one document with
+ * sticky panel headers.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

package/dist/ui/page-layout/index.d.ts

@@ -5,4 +5,4 @@ export { default as PagePanels } from './cmp.page-panels.svelte';
 export { default as PanelCollapseButton } from './cmp.panel-collapse-button.svelte';
 export { default as PanelContent } from './cmp.panel-content.svelte';
 export { PanelEntry, PanelState } from './panel-state.svelte';
-export type { PanelBorder, PanelResizingSettings } from './types';
+export type { EditorControls, PageLayoutAction, PanelBorder, PanelResizingSettings } from './types';

package/dist/ui/page-layout/layout-control-button.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">import { Icon } from '../icon';
+const { icon, label, variant = 'outlined', active, on } = $props();
+</script>
+
+<button
+  type="button"
+  class="layout-control-button layout-control-button--{variant}"
+  class:layout-control-button--active={active}
+  aria-label={label}
+  aria-pressed={active}
+  onclick={on.click}>
+  <Icon src={icon} size={variant === 'flat' ? 'control-xl' : 'control-md'} />
+</button>
+
+<!--
+@component
+Folder-internal chrome button for the `PageLayout` header. Two variants: `flat` for the
+app-navigation toggle and `outlined` for the editor pair. Rendered by `PageLayout`; not exported.
+-->
+<style>.layout-control-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: var(--_lcb--size);
+  block-size: var(--_lcb--size);
+  padding: 0;
+  color: var(--_lcb--color);
+  background: var(--_lcb--background);
+  border: 1px solid var(--_lcb--border-color);
+  border-radius: var(--_lcb--border-radius);
+  cursor: pointer;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.layout-control-button--outlined {
+  --_lcb--size: var(--sc-kit--field--height--md);
+  --_lcb--border-radius: var(--sc-kit--field--border-radius--md);
+  --_lcb--color: var(--sc-kit--color--text--primary);
+  --_lcb--color-hover: var(--sc-kit--color--text--primary);
+  --_lcb--color-active: var(--sc-kit--color--text--primary);
+  --_lcb--background: var(--sc-kit--color--bg--panel);
+  --_lcb--background-hover: var(--sc-kit--color--bg--hover);
+  --_lcb--background-active: var(--sc-kit--color--bg--active);
+  --_lcb--border-color: var(--sc-kit--color--border);
+  --_lcb--border-color-active: var(--sc-kit--color--border--strong);
+}
+.layout-control-button--flat {
+  --_lcb--size: 1.75rem;
+  --_lcb--border-radius: var(--sc-kit--radius--sm);
+  --_lcb--color: var(--sc-kit--color--text--muted);
+  --_lcb--color-hover: var(--sc-kit--color--text--primary);
+  --_lcb--color-active: var(--sc-kit--color--text--primary);
+  --_lcb--background: transparent;
+  --_lcb--background-hover: var(--sc-kit--color--bg--hover);
+  --_lcb--background-active: var(--sc-kit--color--bg--active);
+  --_lcb--border-color: transparent;
+  --_lcb--border-color-active: transparent;
+}
+.layout-control-button:hover {
+  color: var(--_lcb--color-hover);
+  background: var(--_lcb--background-hover);
+}
+.layout-control-button:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
+}
+.layout-control-button--active {
+  color: var(--_lcb--color-active);
+  background: var(--_lcb--background-active);
+  border-color: var(--_lcb--border-color-active);
+}</style>

package/dist/ui/page-layout/layout-control-button.svelte.d.ts

@@ -0,0 +1,19 @@
+type Props = {
+    /** Glyph — a string SVG source. */
+    icon: string;
+    label: string;
+    /** `flat` = bare 20px glyph in a 28px hit area (app-navigation toggle); `outlined` = 32px bordered square with a 16px glyph (editor chrome). @default 'outlined' */
+    variant?: 'outlined' | 'flat';
+    /** Toggle state. Leave undefined for a plain action button so no `aria-pressed` is emitted. */
+    active?: boolean;
+    on: {
+        click: () => void;
+    };
+};
+/**
+ * Folder-internal chrome button for the `PageLayout` header. Two variants: `flat` for the
+ * app-navigation toggle and `outlined` for the editor pair. Rendered by `PageLayout`; not exported.
+ */
+declare const LayoutControlButton: import("svelte").Component<Props, {}, "">;
+type LayoutControlButton = ReturnType<typeof LayoutControlButton>;
+export default LayoutControlButton;

package/dist/ui/page-layout/page-layout-localization.d.ts

@@ -2,4 +2,6 @@ export declare class PageLayoutLocalization {
     get resizePanel(): string;
     get togglePanel(): string;
     get toggleNavigation(): string;
+    get togglePanels(): string;
+    get close(): string;
 }

package/dist/ui/page-layout/page-layout-localization.js

@@ -11,6 +11,14 @@ const loc = {
     toggleNavigation: {
         en: 'Toggle navigation',
         no: 'Veksle navigasjon'
+    },
+    togglePanels: {
+        en: 'Toggle panels',
+        no: 'Veksle paneler'
+    },
+    close: {
+        en: 'Close',
+        no: 'Lukk'
     }
 };
 export class PageLayoutLocalization {
@@ -23,4 +31,10 @@ export class PageLayoutLocalization {
     get toggleNavigation() {
         return loc.toggleNavigation[AppLocale.current];
     }
+    get togglePanels() {
+        return loc.togglePanels[AppLocale.current];
+    }
+    get close() {
+        return loc.close[AppLocale.current];
+    }
 }

package/dist/ui/page-layout/types.d.ts

@@ -17,3 +17,16 @@ export type PanelResizingSettings = {
     maxWidth?: number;
 };
 export type PanelBorder = 'top' | 'right' | 'bottom' | 'left';
+/**
+ * Config for one `PageLayout` header chrome button. Set `active` only for toggles — it drives both
+ * `aria-pressed` and the pressed background, and is omitted entirely for plain action buttons.
+ */
+export type PageLayoutAction = {
+    active?: boolean;
+    onClick: () => void;
+};
+/** Editor chrome — a fixed pair, so an editor never ships half of it. */
+export type EditorControls = {
+    panelsToggle: PageLayoutAction;
+    close: PageLayoutAction;
+};

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/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.26.0",
+  "version": "0.28.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",