@streamscloud/kit 0.54.1 → 0.55.1

package/dist/ui/player/buttons/cmp.mobile-player-buttons.svelte

@@ -1,28 +1,42 @@
 <script lang="ts">import { IconSlot } from '../../icon';
-let { actions } = $props();
+import PlayerContextMenu from './player-context-menu.svelte';
+let { actions, contextActions = [], contextPosition = 'left-end' } = $props();
 </script>
 
 <div class="mobile-player-buttons">
-  {#each actions as action (action.icon)}
+  {#each actions as action, index (index)}
     <button type="button" class="mobile-player-buttons__action" disabled={action.disabled} onclick={action.callback}>
       <span class="mobile-player-buttons__action-icon">
         <IconSlot icon={action.icon} />
       </span>
     </button>
   {/each}
+  {#if contextActions.length}
+    <div class="mobile-player-buttons__action mobile-player-buttons__action--menu">
+      <PlayerContextMenu actions={contextActions} position={contextPosition} />
+    </div>
+  {/if}
 </div>
 
 <!--
 @component
 A vertically stacked column of player action buttons optimized for mobile touch targets.
+`contextActions` appends an overflow-menu cell below the buttons.
 
-### Props
-| Prop | Type | Description |
+### CSS Custom Properties
+| Property | Description | Default |
 |---|---|---|
-| `actions` | `PlayerButtonDef[]` | Array of button definitions (icon, callback, disabled state) |
+| `--sc-kit--player-button--color--inactive` | Overflow menu panel background | 60% opacity of `black` |
+| `--sc-kit--player-button--menu--border-color` | Overflow menu panel border | `white` at 15% |
+| `--sc-kit--player-button--menu--item--color` | Overflow menu row text / icon color | `--sc-kit--color--text--on-accent` |
+| `--sc-kit--player-button--menu--item--background--hover` | Overflow menu row hover background | `white` at 12% |
 -->
 
 <style>.mobile-player-buttons {
+  --_player-button--color--inactive: var(--sc-kit--player-button--color--inactive, rgb(0 0 0 / 60%));
+  --_player-button--menu--border-color: var(--sc-kit--player-button--menu--border-color, rgb(255 255 255 / 15%));
+  --_player-button--menu--item-color: var(--sc-kit--player-button--menu--item--color, var(--sc-kit--color--text--on-accent));
+  --_player-button--menu--item-background-hover: var(--sc-kit--player-button--menu--item--background--hover, rgb(255 255 255 / 12%));
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -30,10 +44,11 @@ A vertically stacked column of player action buttons optimized for mobile touch
   pointer-events: auto;
 }
 .mobile-player-buttons__action {
+  --_player-button--cell-padding: var(--sc-kit--space--4);
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: var(--sc-kit--space--4);
+  padding: var(--_player-button--cell-padding);
   --sc-kit--icon--color: var(--sc-kit--color--text--on-accent);
   --sc-kit--icon--size: 2rem;
   --sc-kit--icon--filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
@@ -42,6 +57,15 @@ A vertically stacked column of player action buttons optimized for mobile touch
   opacity: 0.5;
   cursor: default;
 }
+.mobile-player-buttons__action--menu {
+  padding: 0;
+  min-block-size: calc(var(--sc-kit--icon--size) + 2 * var(--_player-button--cell-padding));
+  min-inline-size: calc(var(--sc-kit--icon--size) + 2 * var(--_player-button--cell-padding));
+  --sc-kit--popover--content--background: var(--_player-button--color--inactive);
+  --sc-kit--popover--content--border-color: var(--_player-button--menu--border-color);
+  --sc-kit--popover-item--color: var(--_player-button--menu--item-color);
+  --sc-kit--popover-item--background--hover: var(--_player-button--menu--item-background-hover);
+}
 .mobile-player-buttons__action-icon {
   display: block;
 }</style>

package/dist/ui/player/buttons/cmp.mobile-player-buttons.svelte.d.ts

@@ -1,14 +1,23 @@
-import type { PlayerButtonDef } from './types';
+import type { PlayerButtonDef, PlayerContextActionDef } from './types';
+import type { Placement } from '@floating-ui/dom';
 type Props = {
     actions: PlayerButtonDef[];
+    /** Rows of an overflow menu rendered as the final cell — an ellipsis trigger opening a popover. Empty ⇒ no menu cell. @default [] */
+    contextActions?: PlayerContextActionDef[];
+    /** Floating UI placement of the overflow menu panel @default 'left-end' */
+    contextPosition?: Placement;
 };
 /**
  * A vertically stacked column of player action buttons optimized for mobile touch targets.
+ * `contextActions` appends an overflow-menu cell below the buttons.
  *
- * ### Props
- * | Prop | Type | Description |
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
  * |---|---|---|
- * | `actions` | `PlayerButtonDef[]` | Array of button definitions (icon, callback, disabled state) |
+ * | `--sc-kit--player-button--color--inactive` | Overflow menu panel background | 60% opacity of `black` |
+ * | `--sc-kit--player-button--menu--border-color` | Overflow menu panel border | `white` at 15% |
+ * | `--sc-kit--player-button--menu--item--color` | Overflow menu row text / icon color | `--sc-kit--color--text--on-accent` |
+ * | `--sc-kit--player-button--menu--item--background--hover` | Overflow menu row hover background | `white` at 12% |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/player/buttons/cmp.player-buttons.svelte

@@ -1,23 +1,32 @@
 <script lang="ts">import { IconSlot } from '../../icon';
-let { actions, scaleEffect = false, zoom = 1 } = $props();
+import PlayerContextMenu from './player-context-menu.svelte';
+let { actions, contextActions = [], contextPosition = 'left-end', scaleEffect = false, zoom = 1 } = $props();
+const hasMenu = $derived(contextActions.length > 0);
+const cellCount = $derived(actions.length + (hasMenu ? 1 : 0));
 </script>
 
-{#if actions.length === 1}
-  {@const action = actions[0]}
-  <button
-    type="button"
-    class="player-button"
-    style:zoom={zoom}
-    class:player-button--scale-effect={scaleEffect}
-    disabled={action.disabled}
-    onclick={action.callback}>
-    <span class="player-button__icon">
-      <IconSlot icon={action.icon} />
-    </span>
-  </button>
-{:else if actions.length > 1}
+{#if cellCount === 1}
+  {#if hasMenu}
+    <div class="player-button player-button--menu" style:zoom={zoom}>
+      <PlayerContextMenu actions={contextActions} position={contextPosition} />
+    </div>
+  {:else}
+    {@const action = actions[0]}
+    <button
+      type="button"
+      class="player-button"
+      style:zoom={zoom}
+      class:player-button--scale-effect={scaleEffect}
+      disabled={action.disabled}
+      onclick={action.callback}>
+      <span class="player-button__icon">
+        <IconSlot icon={action.icon} />
+      </span>
+    </button>
+  {/if}
+{:else if cellCount > 1}
   <div class="player-buttons" style:zoom={zoom}>
-    {#each actions as action (action.icon)}
+    {#each actions as action, index (index)}
       <button
         type="button"
         class="player-buttons__action"
@@ -29,26 +38,40 @@ let { actions, scaleEffect = false, zoom = 1 } = $props();
         </span>
       </button>
     {/each}
+    {#if hasMenu}
+      <div class="player-buttons__action player-buttons__action--menu">
+        <PlayerContextMenu actions={contextActions} position={contextPosition} />
+      </div>
+    {/if}
   </div>
 {/if}
 
 <!--
 @component
 Desktop player action buttons — renders a single circular button or a vertically stacked pill for multiple actions.
+`contextActions` adds an overflow-menu cell as the last item; it counts towards the single / pill split, so one
+action plus a menu renders as a two-cell pill.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
 | `--sc-kit--player-button--color` | Button background at full opacity | `dark-500` / `black` at 95% |
-| `--sc-kit--player-button--color--inactive` | Button background at rest | 60% opacity of `--color` |
+| `--sc-kit--player-button--color--inactive` | Button background at rest — the overflow menu panel takes the same value | 60% opacity of `--color` |
+| `--sc-kit--player-button--menu--border-color` | Overflow menu panel border | `white` at 15% |
+| `--sc-kit--player-button--menu--item--color` | Overflow menu row text / icon color | `--sc-kit--color--text--on-accent` |
+| `--sc-kit--player-button--menu--item--background--hover` | Overflow menu row hover background | `white` at 12% |
 -->
 
 <style>.player-button {
   --_player-button--color: var(--sc-kit--player-button--color, rgb(0 0 0 / 95%));
   --_player-button--color--inactive: var(--sc-kit--player-button--color--inactive, rgb(0 0 0 / 60%));
+  --_player-button--menu--border-color: var(--sc-kit--player-button--menu--border-color, rgb(255 255 255 / 15%));
+  --_player-button--menu--item-color: var(--sc-kit--player-button--menu--item--color, var(--sc-kit--color--text--on-accent));
+  --_player-button--menu--item-background-hover: var(--sc-kit--player-button--menu--item--background--hover, rgb(255 255 255 / 12%));
   --_player-button--icon-scale: 1;
+  --_player-button--cell-padding: 0.625rem;
   pointer-events: auto;
-  padding: 0.625rem;
+  padding: var(--_player-button--cell-padding);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -69,6 +92,18 @@ Desktop player action buttons — renders a single circular button or a vertical
 .player-button--scale-effect:hover:not(:disabled) {
   --_player-button--icon-scale: 1.2;
 }
+.player-button--menu {
+  padding: 0;
+  min-block-size: calc(var(--sc-kit--icon--size) + 2 * var(--_player-button--cell-padding));
+  min-inline-size: calc(var(--sc-kit--icon--size) + 2 * var(--_player-button--cell-padding));
+  --sc-kit--popover--content--background: var(--_player-button--color--inactive);
+  --sc-kit--popover--content--border-color: var(--_player-button--menu--border-color);
+  --sc-kit--popover-item--color: var(--_player-button--menu--item-color);
+  --sc-kit--popover-item--background--hover: var(--_player-button--menu--item-background-hover);
+}
+.player-button--menu:hover:not(:disabled) {
+  background-color: var(--_player-button--color--inactive);
+}
 .player-button__icon {
   display: block;
   transform: scale(var(--_player-button--icon-scale));
@@ -79,7 +114,7 @@ Desktop player action buttons — renders a single circular button or a vertical
 }
 @container (width < 576px) {
   .player-button {
-    padding: 0.5rem;
+    --_player-button--cell-padding: 0.5rem;
     --sc-kit--icon--size: 1.5rem;
   }
 }
@@ -87,6 +122,9 @@ Desktop player action buttons — renders a single circular button or a vertical
 .player-buttons {
   --_player-button--color: var(--sc-kit--player-button--color, rgb(0 0 0 / 95%));
   --_player-button--color--inactive: var(--sc-kit--player-button--color--inactive, rgb(0 0 0 / 60%));
+  --_player-button--menu--border-color: var(--sc-kit--player-button--menu--border-color, rgb(255 255 255 / 15%));
+  --_player-button--menu--item-color: var(--sc-kit--player-button--menu--item--color, var(--sc-kit--color--text--on-accent));
+  --_player-button--menu--item-background-hover: var(--sc-kit--player-button--menu--item--background--hover, rgb(255 255 255 / 12%));
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -98,10 +136,11 @@ Desktop player action buttons — renders a single circular button or a vertical
 }
 .player-buttons__action {
   --_player-button--icon-scale: 1;
+  --_player-button--cell-padding: 0.5625rem;
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 0.5625rem;
+  padding: var(--_player-button--cell-padding);
   border-radius: 1.25rem;
   color: var(--sc-kit--color--text--on-accent);
   --sc-kit--icon--color: var(--sc-kit--color--text--on-accent);
@@ -119,6 +158,18 @@ Desktop player action buttons — renders a single circular button or a vertical
   --_player-button--icon-scale: 1.2;
   background-color: transparent;
 }
+.player-buttons__action--menu {
+  padding: 0;
+  min-block-size: calc(var(--sc-kit--icon--size) + 2 * var(--_player-button--cell-padding));
+  min-inline-size: calc(var(--sc-kit--icon--size) + 2 * var(--_player-button--cell-padding));
+  --sc-kit--popover--content--background: var(--_player-button--color--inactive);
+  --sc-kit--popover--content--border-color: var(--_player-button--menu--border-color);
+  --sc-kit--popover-item--color: var(--_player-button--menu--item-color);
+  --sc-kit--popover-item--background--hover: var(--_player-button--menu--item-background-hover);
+}
+.player-buttons__action--menu:hover:not(:disabled) {
+  background-color: transparent;
+}
 .player-buttons__action-icon {
   display: block;
   transform: scale(var(--_player-button--icon-scale));

package/dist/ui/player/buttons/cmp.player-buttons.svelte.d.ts

@@ -1,7 +1,12 @@
-import type { PlayerButtonDef } from './types';
+import type { PlayerButtonDef, PlayerContextActionDef } from './types';
+import type { Placement } from '@floating-ui/dom';
 type Props = {
     /** Array of button definitions (icon, callback, disabled state) */
     actions: PlayerButtonDef[];
+    /** Rows of an overflow menu rendered as the final cell — an ellipsis trigger opening a popover. Empty ⇒ no menu cell. @default [] */
+    contextActions?: PlayerContextActionDef[];
+    /** Floating UI placement of the overflow menu panel @default 'left-end' */
+    contextPosition?: Placement;
     /** Scale the icon on hover */
     scaleEffect?: boolean;
     /** CSS zoom level applied to the button container @default 1 */
@@ -9,12 +14,17 @@ type Props = {
 };
 /**
  * Desktop player action buttons — renders a single circular button or a vertically stacked pill for multiple actions.
+ * `contextActions` adds an overflow-menu cell as the last item; it counts towards the single / pill split, so one
+ * action plus a menu renders as a two-cell pill.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
  * | `--sc-kit--player-button--color` | Button background at full opacity | `dark-500` / `black` at 95% |
- * | `--sc-kit--player-button--color--inactive` | Button background at rest | 60% opacity of `--color` |
+ * | `--sc-kit--player-button--color--inactive` | Button background at rest — the overflow menu panel takes the same value | 60% opacity of `--color` |
+ * | `--sc-kit--player-button--menu--border-color` | Overflow menu panel border | `white` at 15% |
+ * | `--sc-kit--player-button--menu--item--color` | Overflow menu row text / icon color | `--sc-kit--color--text--on-accent` |
+ * | `--sc-kit--player-button--menu--item--background--hover` | Overflow menu row hover background | `white` at 12% |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/player/buttons/cmp.responsive-player-buttons.svelte

@@ -1,25 +1,29 @@
 <script lang="ts">import { default as MobilePlayerButtons } from './cmp.mobile-player-buttons.svelte';
 import { default as PlayerButtons } from './cmp.player-buttons.svelte';
-let { scaleEffect = false, actions } = $props();
+let { scaleEffect = false, actions, contextActions = [], contextPosition = 'left-end' } = $props();
 </script>
 
 <div class="desktop-controls">
-  <PlayerButtons actions={actions} scaleEffect={scaleEffect} />
+  <PlayerButtons actions={actions} contextActions={contextActions} contextPosition={contextPosition} scaleEffect={scaleEffect} />
 </div>
 
 <div class="mobile-controls">
-  <MobilePlayerButtons actions={actions} />
+  <MobilePlayerButtons actions={actions} contextActions={contextActions} contextPosition={contextPosition} />
 </div>
 
 <!--
 @component
 Renders `PlayerButtons` on desktop and `MobilePlayerButtons` on mobile, switching via container query.
+Both branches stay mounted, so `contextActions` builds a menu in each; only the visible one is reachable.
 
-### Props
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `actions` | `PlayerButtonDef[]` | — | Array of button definitions |
-| `scaleEffect` | `boolean` | `false` | Whether icons scale on hover (desktop only) |
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--player-button--color` | Button background at full opacity (desktop only — the mobile column paints no button background) | `black` at 95% |
+| `--sc-kit--player-button--color--inactive` | Button background at rest — the overflow menu panel takes the same value | 60% opacity of `--color` |
+| `--sc-kit--player-button--menu--border-color` | Overflow menu panel border | `white` at 15% |
+| `--sc-kit--player-button--menu--item--color` | Overflow menu row text / icon color | `--sc-kit--color--text--on-accent` |
+| `--sc-kit--player-button--menu--item--background--hover` | Overflow menu row hover background | `white` at 12% |
 -->
 
 <style>.desktop-controls {

package/dist/ui/player/buttons/cmp.responsive-player-buttons.svelte.d.ts

@@ -1,16 +1,26 @@
-import type { PlayerButtonDef } from './types';
+import type { PlayerButtonDef, PlayerContextActionDef } from './types';
+import type { Placement } from '@floating-ui/dom';
 type Props = {
     actions: PlayerButtonDef[];
+    /** Rows of an overflow menu rendered as the final cell — an ellipsis trigger opening a popover. Empty ⇒ no menu cell. @default [] */
+    contextActions?: PlayerContextActionDef[];
+    /** Floating UI placement of the overflow menu panel @default 'left-end' */
+    contextPosition?: Placement;
+    /** Scale the icon on hover (desktop only) */
     scaleEffect?: boolean;
 };
 /**
  * Renders `PlayerButtons` on desktop and `MobilePlayerButtons` on mobile, switching via container query.
+ * Both branches stay mounted, so `contextActions` builds a menu in each; only the visible one is reachable.
  *
- * ### Props
- * | Prop | Type | Default | Description |
- * |---|---|---|---|
- * | `actions` | `PlayerButtonDef[]` | — | Array of button definitions |
- * | `scaleEffect` | `boolean` | `false` | Whether icons scale on hover (desktop only) |
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--player-button--color` | Button background at full opacity (desktop only — the mobile column paints no button background) | `black` at 95% |
+ * | `--sc-kit--player-button--color--inactive` | Button background at rest — the overflow menu panel takes the same value | 60% opacity of `--color` |
+ * | `--sc-kit--player-button--menu--border-color` | Overflow menu panel border | `white` at 15% |
+ * | `--sc-kit--player-button--menu--item--color` | Overflow menu row text / icon color | `--sc-kit--color--text--on-accent` |
+ * | `--sc-kit--player-button--menu--item--background--hover` | Overflow menu row hover background | `white` at 12% |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/player/buttons/index.d.ts

@@ -1,4 +1,4 @@
 export { default as MobilePlayerButtons } from './cmp.mobile-player-buttons.svelte';
 export { default as PlayerButtons } from './cmp.player-buttons.svelte';
 export { default as ResponsivePlayerButtons } from './cmp.responsive-player-buttons.svelte';
-export type { PlayerButtonDef } from './types';
+export type { PlayerButtonDef, PlayerContextActionDef } from './types';

package/dist/ui/player/buttons/player-buttons-localization.d.ts

@@ -0,0 +1,3 @@
+export declare class PlayerButtonsLocalization {
+    get moreActions(): string;
+}

package/dist/ui/player/buttons/player-buttons-localization.js

@@ -0,0 +1,12 @@
+import { AppLocale } from '../../../core/locale';
+const loc = {
+    moreActions: {
+        en: 'More actions',
+        no: 'Flere handlinger'
+    }
+};
+export class PlayerButtonsLocalization {
+    get moreActions() {
+        return loc.moreActions[AppLocale.current];
+    }
+}

package/dist/ui/player/buttons/player-context-menu.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">import { IconSlot } from '../../icon';
+import { IconText } from '../../icon-text';
+import { Popover, PopoverItem } from '../../popover';
+import { PlayerButtonsLocalization } from './player-buttons-localization';
+import IconMoreVertical from '@fluentui/svg-icons/icons/more_vertical_28_regular.svg?raw';
+let { actions, position = 'left-end' } = $props();
+const localization = new PlayerButtonsLocalization();
+</script>
+
+<Popover position={position} fixedPosition fillContainer aria-label={localization.moreActions}>
+  {#snippet trigger()}
+    <IconSlot icon={IconMoreVertical} />
+  {/snippet}
+
+  {#each actions as action (action.label)}
+    <PopoverItem disabled={action.disabled} on={{ click: action.callback }}>
+      <IconText icon={action.icon} size="sm">{action.label}</IconText>
+    </PopoverItem>
+  {/each}
+</Popover>

package/dist/ui/player/buttons/player-context-menu.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { PlayerContextActionDef } from './types';
+import type { Placement } from '@floating-ui/dom';
+type Props = {
+    actions: PlayerContextActionDef[];
+    position?: Placement;
+};
+declare const PlayerContextMenu: import("svelte").Component<Props, {}, "">;
+type PlayerContextMenu = ReturnType<typeof PlayerContextMenu>;
+export default PlayerContextMenu;

package/dist/ui/player/buttons/types.d.ts

@@ -4,3 +4,9 @@ export type PlayerButtonDef = {
     callback: () => void;
     disabled?: boolean;
 };
+export type PlayerContextActionDef = {
+    icon: IconProp;
+    label: string;
+    callback: () => void;
+    disabled?: boolean;
+};

package/dist/ui/spinner/cmp.spinner.svelte

@@ -12,11 +12,11 @@ $effect(() => {
 });
 </script>
 
-{#if visible}
-  {#if blocking}
-    <div class="spinner-overlay" class:spinner-overlay--fixed={position === 'fixed-center'}></div>
-  {/if}
+{#if blocking}
+  <div class="spinner-overlay" class:spinner-overlay--fixed={position === 'fixed-center'} class:spinner-overlay--dimmed={visible}></div>
+{/if}
 
+{#if visible}
   <span
     class="spinner spinner--{size}"
     class:spinner--accent={color === 'accent'}
@@ -41,7 +41,9 @@ $effect(() => {
 @component
 Spinner — indeterminate loading indicator. Single-arc circle rotating at a constant rate. Color preset (`accent` default) resolves to a semantic token; override the public CSS vars on any ancestor for global theming. Pass `label` to expose it to screen readers as a live status region.
 
-Convenience props for the common "load happens, show a centered spinner with optional dimmer" pattern: `position` centers it within the nearest positioned ancestor (`absolute-center`) or the viewport (`fixed-center`); `blocking` adds a semi-transparent overlay; `timeout` delays visibility to avoid flicker for fast operations.
+Convenience props for the common "load happens, show a centered spinner with optional dimmer" pattern: `position` centers it within the nearest positioned ancestor (`absolute-center`) or the viewport (`fixed-center`); `blocking` adds an overlay; `timeout` delays visibility to avoid flicker for fast operations.
+
+`blocking` and `timeout` are orthogonal. The overlay mounts with the component and swallows pointer input from the first millisecond regardless of `timeout`; once `timeout` elapses the spinner appears and the overlay fades to its dim background. Pointer input only — a focused control underneath still reacts to the keyboard; wrap the region in `inert` if that matters.
 
 For tight inline glyphs inside other kit cmps (Button loading state, async Select), use the internal `_internal/spinner` instead — that one fills its inline box and inherits `currentColor` for stroke.
 
@@ -58,7 +60,7 @@ For tight inline glyphs inside other kit cmps (Button loading state, async Selec
 | `--sc-kit--spinner--color-text` | Color for `text` preset | `--sc-kit--color--text--primary` |
 | `--sc-kit--spinner--color-on-accent` | Color for `on-accent` preset | `--sc-kit--color--text--on-accent` |
 | `--sc-kit--spinner--duration` | Rotation duration | `1.6s` |
-| `--sc-kit--spinner--overlay--background` | Backdrop color when `blocking` is true | `rgba(0, 0, 0, 0.3)` |
+| `--sc-kit--spinner--overlay--background` | Backdrop color the `blocking` overlay fades to once the spinner shows | `rgba(0, 0, 0, 0.3)` |
 | `--sc-kit--spinner--overlay--z-index` | Backdrop stacking | `--sc-kit--z-index--popover` minus 1 |
 
 ### Size presets
@@ -74,12 +76,17 @@ For tight inline glyphs inside other kit cmps (Button loading state, async Selec
   --_overlay--z-index: var(--sc-kit--spinner--overlay--z-index, calc(var(--sc-kit--z-index--popover) - 1));
   position: absolute;
   inset: 0;
-  background: var(--_overlay--background);
+  background-color: var(--_overlay--background);
+  opacity: 0;
   z-index: var(--_overlay--z-index);
+  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }
 .spinner-overlay--fixed {
   position: fixed;
 }
+.spinner-overlay--dimmed {
+  opacity: 1;
+}
 
 .spinner {
   --_spinner--size: var(--sc-kit--spinner--size, 1.25rem);

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

@@ -7,15 +7,17 @@ type Props = {
     label?: string;
     /** Centering mode. `absolute-center` centers within the closest positioned ancestor; `fixed-center` centers in the viewport. Omit for an inline-flex glyph at the current position. */
     position?: 'absolute-center' | 'fixed-center';
-    /** Renders a semi-transparent overlay behind the spinner. Pair with `position` for a full-area dimmer. */
+    /** Renders an overlay that swallows pointer input immediately, independent of `timeout`; it stays invisible until `timeout` elapses, then fades to its dim background. Pair with `position` for a full-area dimmer. */
     blocking?: boolean;
-    /** Delay in ms before the spinner becomes visible (and the optional overlay renders). Prevents flicker for fast operations. @default 0 */
+    /** Delay in ms before the spinner becomes visible (and a `blocking` overlay dims). Prevents flicker for fast operations. @default 0 */
     timeout?: number;
 };
 /**
  * Spinner — indeterminate loading indicator. Single-arc circle rotating at a constant rate. Color preset (`accent` default) resolves to a semantic token; override the public CSS vars on any ancestor for global theming. Pass `label` to expose it to screen readers as a live status region.
  *
- * Convenience props for the common "load happens, show a centered spinner with optional dimmer" pattern: `position` centers it within the nearest positioned ancestor (`absolute-center`) or the viewport (`fixed-center`); `blocking` adds a semi-transparent overlay; `timeout` delays visibility to avoid flicker for fast operations.
+ * Convenience props for the common "load happens, show a centered spinner with optional dimmer" pattern: `position` centers it within the nearest positioned ancestor (`absolute-center`) or the viewport (`fixed-center`); `blocking` adds an overlay; `timeout` delays visibility to avoid flicker for fast operations.
+ *
+ * `blocking` and `timeout` are orthogonal. The overlay mounts with the component and swallows pointer input from the first millisecond regardless of `timeout`; once `timeout` elapses the spinner appears and the overlay fades to its dim background. Pointer input only — a focused control underneath still reacts to the keyboard; wrap the region in `inert` if that matters.
  *
  * For tight inline glyphs inside other kit cmps (Button loading state, async Select), use the internal `_internal/spinner` instead — that one fills its inline box and inherits `currentColor` for stroke.
  *
@@ -32,7 +34,7 @@ type Props = {
  * | `--sc-kit--spinner--color-text` | Color for `text` preset | `--sc-kit--color--text--primary` |
  * | `--sc-kit--spinner--color-on-accent` | Color for `on-accent` preset | `--sc-kit--color--text--on-accent` |
  * | `--sc-kit--spinner--duration` | Rotation duration | `1.6s` |
- * | `--sc-kit--spinner--overlay--background` | Backdrop color when `blocking` is true | `rgba(0, 0, 0, 0.3)` |
+ * | `--sc-kit--spinner--overlay--background` | Backdrop color the `blocking` overlay fades to once the spinner shows | `rgba(0, 0, 0, 0.3)` |
  * | `--sc-kit--spinner--overlay--z-index` | Backdrop stacking | `--sc-kit--z-index--popover` minus 1 |
  *
  * ### Size presets

package/package.json

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