@streamscloud/kit 0.74.0 → 0.75.1

package/dist/core/actions/index.d.ts

@@ -1,3 +1,2 @@
 export { horizontalWheelScroll } from './horizontal-wheel-scroll';
 export { swallowTouch } from './swallow-touch';
-export { predecodeOnLoad } from './predecode-on-load';

package/dist/core/actions/index.js

@@ -1,3 +1,2 @@
 export { horizontalWheelScroll } from './horizontal-wheel-scroll';
 export { swallowTouch } from './swallow-touch';
-export { predecodeOnLoad } from './predecode-on-load';

package/dist/core/i18n/resolve-plural-form.js

@@ -1,3 +1,4 @@
+import { DEV } from 'esm-env';
 /**
  * Picks the plural form matching `count` for `locale`.
  *
@@ -17,7 +18,7 @@
  */
 export const resolvePluralForm = ({ count, candidates, locale }) => {
     const { index, categoriesLength } = indexerFor(locale);
-    if (import.meta.env?.DEV && candidates.length !== categoriesLength) {
+    if (DEV && candidates.length !== categoriesLength) {
         throw new Error(`resolvePluralForm(): locale "${locale}" needs ${categoriesLength} candidate(s), got ${JSON.stringify(candidates)}.`);
     }
     const template = candidates[index(count)] ?? candidates[candidates.length - 1];

package/dist/core/utils/dom-helper.d.ts

@@ -2,7 +2,8 @@ export declare class DomHelper {
     private static readonly _interactiveSelector;
     /**
      * First interactive descendant of `root`, or `null`. Use to reject interactive content from a
-     * container that must stay non-interactive (a `<button>` trigger, a `<label>`).
+     * container that must stay non-interactive (a `<button>` trigger, a `<label>`). Anything inside an
+     * `inert` subtree is skipped — it takes neither focus nor clicks.
      */
     static findInteractiveDescendant(root: Element): HTMLElement | null;
     /**

package/dist/core/utils/dom-helper.js

@@ -2,10 +2,12 @@ export class DomHelper {
     static _interactiveSelector = 'button, a[href], input:not([type="hidden"]), select, textarea, [role="button"], [role="link"], [role="menuitem"], [tabindex]:not([tabindex="-1"])';
     /**
      * First interactive descendant of `root`, or `null`. Use to reject interactive content from a
-     * container that must stay non-interactive (a `<button>` trigger, a `<label>`).
+     * container that must stay non-interactive (a `<button>` trigger, a `<label>`). Anything inside an
+     * `inert` subtree is skipped — it takes neither focus nor clicks.
      */
     static findInteractiveDescendant(root) {
-        return root.querySelector(DomHelper._interactiveSelector);
+        const candidates = root.querySelectorAll(DomHelper._interactiveSelector);
+        return Array.from(candidates).find((candidate) => !candidate.closest('[inert]')) ?? null;
     }
     /**
      * True when the target is, or sits inside, interactive content — i.e. something that owns its own

package/dist/ui/color-picker/cmp.color-picker.svelte

@@ -35,12 +35,9 @@ const previewBackgroundColor = $derived.by(() => {
 });
 const alphaPercent = $derived(displayColor ? `${Math.round(colord(displayColor).alpha() * 100)}%` : '');
 const triggerPlaceholder = $derived(placeholder ?? loc.notSet);
-const resetValue = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (clearable) {
-        on?.change?.('');
-    }
+const clearButtonVisible = $derived(clearable && !disabled && !children && variant === 'fill' && !!value);
+const resetValue = () => {
+    on?.change?.('');
 };
 const onColorPickerInput = ({ hex }) => {
     on?.change?.(ColorHelper.normalizeHex(hex));
@@ -88,10 +85,8 @@ const onColorPickerInput = ({ hex }) => {
                 <span class="color-picker__chevron" aria-hidden="true">
                   <Icon src={IconChevronDown} color={displayColor ? undefined : 'muted'} />
                 </span>
-              {:else if clearable}
-                <button type="button" class="color-picker__clear" aria-label={loc.clear} onclick={resetValue}>
-                  <Icon src={IconDismiss} />
-                </button>
+              {:else if clearButtonVisible}
+                <span class="color-picker__clear-glyph"><Icon src={IconDismiss} /></span>
               {:else}
                 <span class="color-picker__chevron" aria-hidden="true">
                   <Icon src={IconChevronDown} />
@@ -111,6 +106,9 @@ const onColorPickerInput = ({ hex }) => {
         textInputModes={['hex']} />
     </div>
   </Popover>
+  {#if clearButtonVisible}
+    <button type="button" class="color-picker__clear" class:color-picker__clear--sm={size === 'sm'} aria-label={loc.clear} onclick={resetValue}></button>
+  {/if}
 </div>
 
 <!--
@@ -123,19 +121,6 @@ same height.
 When `value` is set, the trigger's background fills with the color and the swatch text auto-flips
 between black and white for contrast.
 
-### Props
-| Prop | Type | Default |
-|---|---|---|
-| `value` | `string \| null \| undefined` | required |
-| `variant` | `'fill' \| 'field'` | `'fill'` |
-| `label` | `string` (field variant row label) | — |
-| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` |
-| `clearable` | `boolean` | `false` |
-| `disabled` | `boolean` | `false` |
-| `defaultColor` | `string \| undefined` | `undefined` |
-| `placeholder` | `string \| undefined` | localized "not set" |
-| `previewIcon` | `string \| Snippet` | color-droplet glyph |
-
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
@@ -206,19 +191,29 @@ between black and white for contrast.
   color: var(--sc-kit--color--text--secondary);
   font-size: var(--sc-kit--font-size--sm);
 }
-.color-picker__chevron, .color-picker__clear {
+.color-picker__chevron, .color-picker__clear-glyph {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  line-height: 0;
+}
+.color-picker__clear {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  aspect-ratio: 1;
+  padding: 0;
   background: transparent;
   border: 0;
-  padding: 0;
-  line-height: 0;
-  color: inherit;
+  border-radius: var(--sc-kit--field--border-radius--md);
   cursor: pointer;
 }
-.color-picker__chevron {
-  cursor: inherit;
+.color-picker__clear:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: -2px;
+}
+.color-picker__clear--sm {
+  border-radius: var(--sc-kit--field--border-radius--sm);
 }
 .color-picker__panel {
   --focus-color: none;

package/dist/ui/color-picker/cmp.color-picker.svelte.d.ts

@@ -13,7 +13,7 @@ type Props = {
     clearable?: boolean;
     /** Visual disabled state — popover won't open. */
     disabled?: boolean;
-    /** Placeholder shown on the swatch trigger when no value is selected. */
+    /** Placeholder shown on the swatch trigger when no value is selected. @default localized "Not set" */
     placeholder?: string;
     on?: {
         change?: (value: string) => void;
@@ -35,19 +35,6 @@ type Props = {
  * When `value` is set, the trigger's background fills with the color and the swatch text auto-flips
  * between black and white for contrast.
  *
- * ### Props
- * | Prop | Type | Default |
- * |---|---|---|
- * | `value` | `string \| null \| undefined` | required |
- * | `variant` | `'fill' \| 'field'` | `'fill'` |
- * | `label` | `string` (field variant row label) | — |
- * | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` |
- * | `clearable` | `boolean` | `false` |
- * | `disabled` | `boolean` | `false` |
- * | `defaultColor` | `string \| undefined` | `undefined` |
- * | `placeholder` | `string \| undefined` | localized "not set" |
- * | `previewIcon` | `string \| Snippet` | color-droplet glyph |
- *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|

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

@@ -8,7 +8,7 @@ import { ProportionalContainer } from '../proportional-container';
 import { SeekBar } from '../seek-bar';
 import VideoPlayer from './video-player.svelte';
 import IconImageOff from '@fluentui/svg-icons/icons/image_off_20_regular.svg?raw';
-const { items, aspectRatio = 'vertical', objectFit = 'contain', showSeekBar = true, duration, predecode = false } = $props();
+const { items, aspectRatio = 'vertical', objectFit = 'contain', showSeekBar = true, duration } = $props();
 let currentIndex = $state(0);
 let currentTime = $state(0);
 let mediaDuration = $state(NaN);
@@ -63,7 +63,7 @@ const onCarouselIndexChanged = (index) => {
             active={true}
             on={{ timeUpdate: onPlayerTimeUpdate, durationChange: onPlayerDurationChange, activate: onPlayerActivate }} />
         {:else}
-          <Image src={items[0].url} showStubOnError={true} predecode={predecode} />
+          <Image src={items[0].url} showStubOnError={true} />
         {/if}
       </div>
     {:else}
@@ -78,7 +78,7 @@ const onCarouselIndexChanged = (index) => {
                   active={item === items[currentIndex]}
                   on={{ timeUpdate: onPlayerTimeUpdate, durationChange: onPlayerDurationChange, activate: onPlayerActivate }} />
               {:else}
-                <Image src={item.url} showStubOnError={true} predecode={predecode} />
+                <Image src={item.url} showStubOnError={true} />
               {/if}
             </div>
           {/snippet}

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

@@ -15,8 +15,6 @@ type Props = {
     showSeekBar?: boolean;
     /** Duration in seconds; rendered as a badge overlay at the bottom-right of the media. `≤ 0` / `undefined` renders nothing. */
     duration?: number;
-    /** Forwarded to each `Image`. Set it when the card sits in a `DragSource`, or the first drag ghost comes out without the picture. @default false */
-    predecode?: boolean;
 };
 /**
  * Media slot for `GridCard`. Renders an empty placeholder, a single `Image` / `VideoPlayer`, or

package/dist/ui/image/cmp.image.svelte

@@ -1,8 +1,7 @@
-<script lang="ts">import { predecodeOnLoad } from '../../core/actions';
-import { Icon } from '../icon';
+<script lang="ts">import { Icon } from '../icon';
 import { calculateImageState } from './image-state';
 import IconImageOff from '@fluentui/svg-icons/icons/image_off_20_regular.svg?raw';
-let { src, alt = '', showStubOnError = false, predecode = false, on, stub } = $props();
+let { src, alt = '', showStubOnError = false, on, stub } = $props();
 let hasError = $state(false);
 const imageState = $derived(calculateImageState(src, hasError, showStubOnError));
 // A 0.01x density makes the intrinsic size 100× the natural one, so `contain` sizing always scales the picture
@@ -27,7 +26,6 @@ const onLoadError = () => {
       srcset={srcset}
       alt={alt || ''}
       draggable="false"
-      use:predecodeOnLoad={predecode}
       onload={onLoad}
       onerror={onLoadError} />
   {/if}

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

@@ -5,8 +5,6 @@ type Props = {
     alt?: string;
     /** Show a placeholder stub instead of an error icon when image fails to load */
     showStubOnError?: boolean;
-    /** Decodes the picture once right after it loads. Set it when the element can be dragged, or the first drag ghost comes out empty. @default false */
-    predecode?: boolean;
     on?: {
         /** Fires after load attempt; `true` if successful, `false` on error */
         load?: (loadedSuccessfully: boolean) => void;

package/dist/ui/popover/validate-trigger.js

@@ -1,4 +1,5 @@
 import { DomHelper } from '../../core/utils';
+import { DEV } from 'esm-env';
 /**
  * Dev-only guard for the Popover trigger. The trigger renders inside a `<button>`, so its content
  * must be non-interactive (use `Button` with `type="presentational"` for a button-looking trigger).
@@ -6,7 +7,7 @@ import { DomHelper } from '../../core/utils';
  * node and outlines the trigger in red. No-op in production.
  */
 export const validateTrigger = (node) => {
-    if (!import.meta.env?.DEV) {
+    if (!DEV) {
         return;
     }
     const check = () => {

package/dist/ui/tile-card/cmp.tile-card.svelte

@@ -1,11 +1,10 @@
-<script lang="ts">import { predecodeOnLoad } from '../../core/actions';
-import { Checkbox } from '../checkbox';
+<script lang="ts">import { Checkbox } from '../checkbox';
 import { ToolbarIconButton } from '../page-toolbar';
 import { PlayIndicator } from '../play-indicator';
 import { Popover } from '../popover';
 import { TileCardLocalization } from './tile-card-localization';
 import IconMore from '@fluentui/svg-icons/icons/more_vertical_20_regular.svg?raw';
-const { title, meta, preview, predecode = false, menu, menuLabel, selected = false, checkboxVisibility = 'hover', on } = $props();
+const { title, meta, preview, menu, menuLabel, selected = false, checkboxVisibility = 'hover', on } = $props();
 const localization = new TileCardLocalization();
 // Safari paints no frame for preload="metadata" until a seek target is given.
 const withFirstFrame = (src) => (src.includes('#') ? src : `${src}#t=0.001`);
@@ -20,7 +19,7 @@ const withFirstFrame = (src) => (src.includes('#') ? src : `${src}#t=0.001`);
       {#if typeof preview === 'function'}
         {@render preview()}
       {:else if 'image' in preview}
-        <img class="tile-card__picture" src={preview.image} alt="" use:predecodeOnLoad={predecode} />
+        <img class="tile-card__picture" src={preview.image} alt="" />
       {:else}
         <video class="tile-card__picture" src={withFirstFrame(preview.video)} poster={preview.poster} preload="metadata" muted playsinline></video>
         <span class="tile-card__play"><PlayIndicator /></span>
@@ -137,10 +136,12 @@ checkbox via `on.select`, whole-card activation via `on.activate`. For a drop-ta
   pointer-events: none;
 }
 .tile-card__picture {
+  position: absolute;
+  inset: 0;
   display: block;
   max-inline-size: 100%;
   max-block-size: 100%;
-  object-fit: contain;
+  margin: auto;
 }
 .tile-card__play {
   position: absolute;

package/dist/ui/tile-card/cmp.tile-card.svelte.d.ts

@@ -6,8 +6,6 @@ type Props = {
     meta?: string;
     /** Top area: `image` / `video` render a drag-safe picture or frame (contain, never upscaled; a video gets a play glyph); a snippet renders custom content. The area is `pointer-events: none` — interactive content belongs in `menu` or `on.activate`. */
     preview?: TileCardPreview;
-    /** Decodes the `image` preview once right after it loads. Set it when the tile sits in a `DragSource`, or the first drag ghost comes out without the picture — an `<img>` in a preview snippet needs `use:predecodeOnLoad` from its owner. @default false */
-    predecode?: boolean;
     /** `PopoverItem`s of the kebab menu at the end of the footer. */
     menu?: Snippet;
     /** Accessible name of the kebab menu. @default localized "Actions" */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.74.0",
+  "version": "0.75.1",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -495,6 +495,7 @@
     "colord": "^2.9.3",
     "dequal": "^2.0.3",
     "dompurify": "^3.4.5",
+    "esm-env": "^1.2.2",
     "fuse.js": "^7.3.0",
     "hugerte": "^1.0.10",
     "mime": "^4.1.0",
@@ -534,6 +535,7 @@
     "eslint-plugin-promise": "^7.3.0",
     "eslint-plugin-svelte": "^3.23.0",
     "eslint-plugin-unused-imports": "^4.4.1",
+    "esm-env": "^1.2.2",
     "fuse.js": "^7.3.0",
     "globals": "^17.12.0",
     "hugerte": "^1.0.10",

package/dist/core/actions/predecode-on-load.d.ts

@@ -1,3 +0,0 @@
-import type { Action } from 'svelte/action';
-/** Decodes the `<img>` once after every load, so a drag ghost snapshotted right after includes the picture. A broken image is ignored. `false` turns it off. */
-export declare const predecodeOnLoad: Action<HTMLImageElement, boolean | undefined>;

package/dist/core/actions/predecode-on-load.js

@@ -1,31 +0,0 @@
-/** Decodes the `<img>` once after every load, so a drag ghost snapshotted right after includes the picture. A broken image is ignored. `false` turns it off. */
-export const predecodeOnLoad = (node, enabled = true) => {
-    let active = enabled;
-    const decode = async () => {
-        try {
-            await node.decode();
-        }
-        catch {
-            // a broken image has nothing to decode
-        }
-    };
-    const decodeLoaded = () => {
-        if (active && node.complete && node.naturalWidth > 0) {
-            void decode();
-        }
-    };
-    node.addEventListener('load', decodeLoaded);
-    decodeLoaded();
-    return {
-        update(nextEnabled = true) {
-            const turnedOn = nextEnabled && !active;
-            active = nextEnabled;
-            if (turnedOn) {
-                decodeLoaded();
-            }
-        },
-        destroy() {
-            node.removeEventListener('load', decodeLoaded);
-        }
-    };
-};