@streamscloud/kit 0.2.42-1778522742378 → 0.9.0

package/dist/ui/icon-text/cmp.icon-text.svelte

@@ -1,41 +1,35 @@
-<script lang="ts">import { Icon } from '../icon';
-let { icon, iconColor, iconPosition = 'left', secondaryIcon, secondaryIconColor, trimText = false, hideText = false, children } = $props();
-const iconAsSnippet = $derived(icon && typeof icon === 'function' ? icon : null);
-const iconAsString = $derived(icon && typeof icon !== 'function' ? icon : null);
-const secondaryIconAsSnippet = $derived(secondaryIcon && typeof secondaryIcon === 'function' ? secondaryIcon : null);
-const secondaryIconAsString = $derived(secondaryIcon && typeof secondaryIcon !== 'function' ? secondaryIcon : null);
+<script lang="ts">import { IconSlot } from '../icon';
+let { icon, iconPosition = 'leading', secondaryIcon, trimText = false, hideText = false, size, children } = $props();
 </script>
 
-<span class="icon-text" class:icon-text--right={iconPosition === 'right'}>
+<span
+  class="icon-text"
+  class:icon-text--trailing={iconPosition === 'trailing'}
+  class:icon-text--sm={size === 'sm'}
+  class:icon-text--md={size === 'md'}
+  class:icon-text--lg={size === 'lg'}>
   <span class="icon-text__icon">
-    {#if iconAsSnippet}
-      {@render iconAsSnippet()}
-    {:else if iconAsString}
-      <Icon src={iconAsString} color={iconColor} />
-    {/if}
+    <IconSlot icon={icon} size={size} />
   </span>
   {#if children && !hideText}
     <span class="icon-text__text" class:icon-text__text--trim={trimText}>
       {@render children()}
     </span>
   {/if}
-  {#if secondaryIconAsSnippet || secondaryIconAsString}
-    <span class="icon-text__secondary-icon">
-      {#if secondaryIconAsSnippet}
-        {@render secondaryIconAsSnippet()}
-      {:else if secondaryIconAsString}
-        <Icon src={secondaryIconAsString} color={secondaryIconColor} />
-      {/if}
+  {#if secondaryIcon}
+    <span class="icon-text__secondary">
+      <IconSlot icon={secondaryIcon} size={size} />
     </span>
   {/if}
 </span>
 
 <!--
 @component
-Displays an icon alongside text in a horizontal layout. The icon can be an SVG string
-(rendered via `Icon`) or a custom `Snippet`. Use `iconPosition` to place the icon
-before or after the text. The optional `secondaryIcon` is always rendered on the
-opposite side of the text from the primary icon.
+Displays icons + text in a horizontal layout. Primary `icon` sits on the leading side by
+default; flip with `iconPosition='trailing'`. Optional `secondaryIcon` always renders on
+the opposite side of text from the primary, useful for "label + chevron" / "label +
+status" dropdown-trigger patterns. Each icon prop accepts a string SVG source, an
+`{ src, color }` object to apply a color preset, or a custom `Snippet`.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -44,12 +38,12 @@ opposite side of the text from the primary icon.
 | `--sc-kit--icon-text--root--color` | Root text color | — |
 | `--sc-kit--icon-text--text--display` | Display mode of the text slot (set `none` to hide) | `flex` |
 | `--sc-kit--icon-text--text--font-size` | Font size of the text slot | `1em` |
-| `--sc-kit--icon-text--icon--font-size` | Font size of the icon slot | text font size |
-| `--sc-kit--icon-text--icon--color` | Icon color (also forwarded to `Icon`) | global color |
+| `--sc-kit--icon-text--icon--font-size` | Font size of the primary icon | text font size |
+| `--sc-kit--icon-text--icon--color` | Primary icon color | global color |
 | `--sc-kit--icon-text--gap` | Gap between icon and text | `0.5em` |
 | `--sc-kit--icon-text--justify-content` | Flex justify-content | `normal` |
-| `--sc-kit--icon-text--secondary-icon--font-size` | Font size of the secondary icon | text font size |
-| `--sc-kit--icon-text--secondary-icon--color` | Secondary icon color | global color |
+| `--sc-kit--icon-text--secondary--font-size` | Font size of the secondary icon | text font size |
+| `--sc-kit--icon-text--secondary--color` | Secondary icon color | global color |
 -->
 
 <style>.icon-text {
@@ -61,8 +55,8 @@ opposite side of the text from the primary icon.
   --_icon-text--icon--color: var(--sc-kit--icon-text--icon--color, var(--_icon-text--root--color));
   --_icon-text--gap: var(--sc-kit--icon-text--gap, 0.5em);
   --_icon-text--justify-content: var(--sc-kit--icon-text--justify-content, normal);
-  --_icon-text--secondary-icon--font-size: var(--sc-kit--icon-text--secondary-icon--font-size, var(--_icon-text--icon--font-size));
-  --_icon-text--secondary-icon--color: var(--sc-kit--icon-text--secondary-icon--color, var(--_icon-text--root--color));
+  --_icon-text--secondary--font-size: var(--sc-kit--icon-text--secondary--font-size, var(--_icon-text--icon--font-size));
+  --_icon-text--secondary--color: var(--sc-kit--icon-text--secondary--color, var(--_icon-text--root--color));
   display: flex;
   align-items: center;
   justify-content: var(--_icon-text--justify-content);
@@ -71,9 +65,18 @@ opposite side of the text from the primary icon.
   color: var(--_icon-text--root--color);
   min-width: 0;
 }
-.icon-text--right {
+.icon-text--trailing {
   flex-direction: row-reverse;
 }
+.icon-text--sm {
+  --sc-kit--icon-text--text--font-size: var(--sc-kit--font-size--sm);
+}
+.icon-text--md {
+  --sc-kit--icon-text--text--font-size: var(--sc-kit--font-size--md);
+}
+.icon-text--lg {
+  --sc-kit--icon-text--text--font-size: var(--sc-kit--font-size--lg);
+}
 .icon-text__text {
   font-size: var(--_icon-text--text--font-size);
   display: var(--_icon-text--text--display);
@@ -93,10 +96,10 @@ opposite side of the text from the primary icon.
   --sc-kit--icon--color: var(--_icon-text--icon--color);
   --sc-kit--icon--size: 1em;
 }
-.icon-text__secondary-icon {
-  font-size: var(--_icon-text--secondary-icon--font-size);
-  color: var(--_icon-text--secondary-icon--color);
+.icon-text__secondary {
+  font-size: var(--_icon-text--secondary--font-size);
+  color: var(--_icon-text--secondary--color);
   display: flex;
-  --sc-kit--icon--color: var(--_icon-text--secondary-icon--color);
+  --sc-kit--icon--color: var(--_icon-text--secondary--color);
   --sc-kit--icon--size: 1em;
 }</style>

package/dist/ui/icon-text/cmp.icon-text.svelte.d.ts

@@ -1,27 +1,26 @@
-import { type IconColor } from '../icon';
+import { type IconProp } from '../icon';
 import type { Snippet } from 'svelte';
 type Props = {
-    /** SVG string or custom snippet for the icon */
-    icon?: string | Snippet;
-    /** Color preset passed to the Icon component */
-    iconColor?: IconColor | null;
-    /** Icon placement relative to text @default 'left' */
-    iconPosition?: 'left' | 'right';
-    /** SVG string or custom snippet for a secondary icon on the opposite side of text from the primary icon */
-    secondaryIcon?: string | Snippet;
-    /** Color preset for the secondary icon */
-    secondaryIconColor?: IconColor | null;
+    /** Primary icon. SVG source string, `{ src, color }` object, or custom snippet. */
+    icon?: IconProp;
+    /** Side of the text where the primary icon sits. @default 'leading' */
+    iconPosition?: 'leading' | 'trailing';
+    /** Optional secondary icon — always rendered on the opposite side of text from the primary. */
+    secondaryIcon?: IconProp;
     /** Truncate text with ellipsis on overflow */
     trimText?: boolean;
     /** Hide text, showing only the icon(s) */
     hideText?: boolean;
+    /** Font-size preset — scales icon + text together (em-based). Inherits (`1em`) when unset. */
+    size?: 'sm' | 'md' | 'lg';
     children?: Snippet;
 };
 /**
- * Displays an icon alongside text in a horizontal layout. The icon can be an SVG string
- * (rendered via `Icon`) or a custom `Snippet`. Use `iconPosition` to place the icon
- * before or after the text. The optional `secondaryIcon` is always rendered on the
- * opposite side of the text from the primary icon.
+ * Displays icons + text in a horizontal layout. Primary `icon` sits on the leading side by
+ * default; flip with `iconPosition='trailing'`. Optional `secondaryIcon` always renders on
+ * the opposite side of text from the primary, useful for "label + chevron" / "label +
+ * status" dropdown-trigger patterns. Each icon prop accepts a string SVG source, an
+ * `{ src, color }` object to apply a color preset, or a custom `Snippet`.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
@@ -30,12 +29,12 @@ type Props = {
  * | `--sc-kit--icon-text--root--color` | Root text color | — |
  * | `--sc-kit--icon-text--text--display` | Display mode of the text slot (set `none` to hide) | `flex` |
  * | `--sc-kit--icon-text--text--font-size` | Font size of the text slot | `1em` |
- * | `--sc-kit--icon-text--icon--font-size` | Font size of the icon slot | text font size |
- * | `--sc-kit--icon-text--icon--color` | Icon color (also forwarded to `Icon`) | global color |
+ * | `--sc-kit--icon-text--icon--font-size` | Font size of the primary icon | text font size |
+ * | `--sc-kit--icon-text--icon--color` | Primary icon color | global color |
  * | `--sc-kit--icon-text--gap` | Gap between icon and text | `0.5em` |
  * | `--sc-kit--icon-text--justify-content` | Flex justify-content | `normal` |
- * | `--sc-kit--icon-text--secondary-icon--font-size` | Font size of the secondary icon | text font size |
- * | `--sc-kit--icon-text--secondary-icon--color` | Secondary icon color | global color |
+ * | `--sc-kit--icon-text--secondary--font-size` | Font size of the secondary icon | text font size |
+ * | `--sc-kit--icon-text--secondary--color` | Secondary icon color | global color |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -11,6 +11,8 @@ let { src, alt = '', ring = false, on } = $props();
 <!--
 @component
 A rounded-corner image with an optional decorative double-border ring (outer gradient + inner solid).
+Ring defaults derive from semantic tokens (`--sc-kit--color--accent` family + `--bg--panel`) so the ring
+re-themes automatically with the rest of the kit.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -19,13 +21,13 @@ A rounded-corner image with an optional decorative double-border ring (outer gra
 | `--sc-kit--image--rounded--width` | Container width | inherits `--size` |
 | `--sc-kit--image--rounded--height` | Container height | inherits `--size` |
 | `--sc-kit--image--rounded--image--border-radius` | Inner image corner radius | computed |
-| `--sc-kit--image--rounded--inner--border-color` | Inner border color | `white` / `dark-900` |
+| `--sc-kit--image--rounded--inner--border-color` | Inner border color | `--sc-kit--color--bg--panel` |
 | `--sc-kit--image--rounded--inner--border-radius` | Inner border radius | computed |
 | `--sc-kit--image--rounded--inner--border-width` | Inner border thickness | `4px` |
-| `--sc-kit--image--rounded--outer--border-color` | Outer ring gradient | `primary-500` to `primary-100` |
-| `--sc-kit--image--rounded--outer--border-radius` | Outer border radius | `2px` |
+| `--sc-kit--image--rounded--outer--border-color` | Outer ring gradient | `accent → accent--soft` |
+| `--sc-kit--image--rounded--outer--border-radius` | Outer border radius | `--sc-kit--radius--md` |
 | `--sc-kit--image--rounded--outer--border-width` | Outer ring thickness | `2px` |
-| `--sc-kit--image--rounded--stub--background` | Background when `src` is empty | `neutral-300` / `neutral-700` |
+| `--sc-kit--image--rounded--stub--background` | Background when `src` is empty | `var(--sc-kit--color--bg--images)` |
 -->
 
 <style>.rounded-img {
@@ -36,7 +38,7 @@ A rounded-corner image with an optional decorative double-border ring (outer gra
     --sc-kit--image--rounded--image--border-radius,
     calc(var(--_image--rounded--inner--border-radius) - var(--_image--rounded--inner--border-width))
   );
-  --_image--rounded--inner--border-color: var(--sc-kit--image--rounded--inner--border-color, light-dark(#ffffff, #121212));
+  --_image--rounded--inner--border-color: var(--sc-kit--image--rounded--inner--border-color, var(--sc-kit--color--bg--panel));
   --_image--rounded--inner--border-radius: var(
     --sc-kit--image--rounded--inner--border-radius,
     calc(var(--_image--rounded--outer--border-radius) - var(--_image--rounded--outer--border-width))
@@ -44,17 +46,11 @@ A rounded-corner image with an optional decorative double-border ring (outer gra
   --_image--rounded--inner--border-width: var(--sc-kit--image--rounded--inner--border-width, 4px);
   --_image--rounded--outer--border-color: var(
     --sc-kit--image--rounded--outer--border-color,
-    linear-gradient(
-      light-dark(#144ab0, #5a8dec),
-      light-dark(#dfe9fb, #0c2d69)
-    )
+    linear-gradient(var(--sc-kit--color--accent), var(--sc-kit--color--accent--soft))
   );
-  --_image--rounded--outer--border-radius: var(--sc-kit--image--rounded--outer--border-radius, 2px);
+  --_image--rounded--outer--border-radius: var(--sc-kit--image--rounded--outer--border-radius, var(--sc-kit--radius--md));
   --_image--rounded--outer--border-width: var(--sc-kit--image--rounded--outer--border-width, 2px);
-  --_image--rounded--stub--background: var(
-    --sc-kit--image--rounded--stub--background,
-    var(--sc-color--bg-images, light-dark(#d1d5db, #374151))
-  );
+  --_image--rounded--stub--background: var(--sc-kit--image--rounded--stub--background, var(--sc-kit--color--bg--images));
   width: var(--_image--rounded--width);
   height: var(--_image--rounded--height);
   border-radius: var(--_image--rounded--outer--border-radius);

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

@@ -10,6 +10,8 @@ type Props = {
 };
 /**
  * A rounded-corner image with an optional decorative double-border ring (outer gradient + inner solid).
+ * Ring defaults derive from semantic tokens (`--sc-kit--color--accent` family + `--bg--panel`) so the ring
+ * re-themes automatically with the rest of the kit.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
@@ -18,13 +20,13 @@ type Props = {
  * | `--sc-kit--image--rounded--width` | Container width | inherits `--size` |
  * | `--sc-kit--image--rounded--height` | Container height | inherits `--size` |
  * | `--sc-kit--image--rounded--image--border-radius` | Inner image corner radius | computed |
- * | `--sc-kit--image--rounded--inner--border-color` | Inner border color | `white` / `dark-900` |
+ * | `--sc-kit--image--rounded--inner--border-color` | Inner border color | `--sc-kit--color--bg--panel` |
  * | `--sc-kit--image--rounded--inner--border-radius` | Inner border radius | computed |
  * | `--sc-kit--image--rounded--inner--border-width` | Inner border thickness | `4px` |
- * | `--sc-kit--image--rounded--outer--border-color` | Outer ring gradient | `primary-500` to `primary-100` |
- * | `--sc-kit--image--rounded--outer--border-radius` | Outer border radius | `2px` |
+ * | `--sc-kit--image--rounded--outer--border-color` | Outer ring gradient | `accent → accent--soft` |
+ * | `--sc-kit--image--rounded--outer--border-radius` | Outer border radius | `--sc-kit--radius--md` |
  * | `--sc-kit--image--rounded--outer--border-width` | Outer ring thickness | `2px` |
- * | `--sc-kit--image--rounded--stub--background` | Background when `src` is empty | `neutral-300` / `neutral-700` |
+ * | `--sc-kit--image--rounded--stub--background` | Background when `src` is empty | `var(--sc-kit--color--bg--images)` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -13,11 +13,11 @@ A placeholder image stub showing a generic image icon, used as a fallback when n
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--image-stub--color` | Icon and border color | `neutral-300` / `neutral-700` |
+| `--sc-kit--image-stub--color` | Icon and border color | `var(--sc-kit--color--bg--images)` |
 -->
 
 <style>.image-stub {
-  --_image-stub--color: var(--sc-kit--image-stub--color, var(--sc-color--bg-images, light-dark(#d1d5db, #374151)));
+  --_image-stub--color: var(--sc-kit--image-stub--color, var(--sc-kit--color--bg--images));
   width: 100%;
   height: 100%;
   z-index: 2;

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

@@ -17,7 +17,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--image-stub--color` | Icon and border color | `neutral-300` / `neutral-700` |
+ * | `--sc-kit--image-stub--color` | Icon and border color | `var(--sc-kit--color--bg--images)` |
  */
 declare const Cmp: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;

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

@@ -1,5 +1,5 @@
 <script lang="ts">import { Icon } from '../icon';
-import { calculateImageState, ImageState } from './image-state';
+import { calculateImageState } from './image-state';
 import IconImageOff from '@fluentui/svg-icons/icons/image_off_20_regular.svg?raw';
 let { src, alt = '', showStubOnError = false, on, stub } = $props();
 let hasError = $state(false);
@@ -16,16 +16,16 @@ const onLoadError = () => {
 
 <div class="image">
   {#if !!src}
-    <img class="image__img" class:image__img--hidden={imageState !== ImageState.showImage} src={src} alt={alt || ''} onload={onLoad} onerror={onLoadError} />
+    <img class="image__img" class:image__img--hidden={imageState !== 'showImage'} src={src} alt={alt || ''} onload={onLoad} onerror={onLoadError} />
   {/if}
 
-  {#if imageState === ImageState.showError}
+  {#if imageState === 'showError'}
     <div class="image__load-error">
       <Icon src={IconImageOff} />
     </div>
   {/if}
 
-  {#if imageState === ImageState.showStub}
+  {#if imageState === 'showStub'}
     {#if stub}
       {@render stub()}
     {:else}
@@ -44,17 +44,14 @@ Displays an image with loading states: shows the image on success, an error icon
 | `--sc-kit--image--background` | Container background | `transparent` |
 | `--sc-kit--image--border-radius` | Corner rounding | `0` |
 | `--sc-kit--image--object-fit` | Image object-fit mode | `cover` |
-| `--sc-kit--image--stub--background` | Stub placeholder background | `neutral-300` / `neutral-700` |
+| `--sc-kit--image--stub--background` | Stub placeholder background | `var(--sc-kit--color--bg--images)` |
 -->
 
 <style>.image {
   --_image--background: var(--sc-kit--image--background, transparent);
   --_image--border-radius: var(--sc-kit--image--border-radius, 0);
   --_image--object-fit: var(--sc-kit--image--object-fit, cover);
-  --_image--stub--background: var(
-    --sc-kit--image--stub--background,
-    var(--sc-color--bg-images, light-dark(#d1d5db, #374151))
-  );
+  --_image--stub--background: var(--sc-kit--image--stub--background, var(--sc-kit--color--bg--images));
   position: relative;
   width: 100%;
   height: 100%;

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

@@ -21,7 +21,7 @@ type Props = {
  * | `--sc-kit--image--background` | Container background | `transparent` |
  * | `--sc-kit--image--border-radius` | Corner rounding | `0` |
  * | `--sc-kit--image--object-fit` | Image object-fit mode | `cover` |
- * | `--sc-kit--image--stub--background` | Stub placeholder background | `neutral-300` / `neutral-700` |
+ * | `--sc-kit--image--stub--background` | Stub placeholder background | `var(--sc-kit--color--bg--images)` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/image/image-state.d.ts

@@ -1,6 +1,2 @@
-export declare enum ImageState {
-    showImage = 0,
-    showError = 1,
-    showStub = 2
-}
+export type ImageState = 'showImage' | 'showError' | 'showStub';
 export declare const calculateImageState: (src: string | null | undefined, isError: boolean, showStubOnError: boolean) => ImageState;

package/dist/ui/image/image-state.js

@@ -1,17 +1,11 @@
-export var ImageState;
-(function (ImageState) {
-    ImageState[ImageState["showImage"] = 0] = "showImage";
-    ImageState[ImageState["showError"] = 1] = "showError";
-    ImageState[ImageState["showStub"] = 2] = "showStub";
-})(ImageState || (ImageState = {}));
 export const calculateImageState = (src, isError, showStubOnError) => {
     if (isError && !showStubOnError) {
-        return ImageState.showError;
+        return 'showError';
     }
     else if (!src || (isError && showStubOnError)) {
-        return ImageState.showStub;
+        return 'showStub';
     }
     else {
-        return ImageState.showImage;
+        return 'showImage';
     }
 };

package/dist/ui/image/index.d.ts

@@ -2,4 +2,5 @@ export { default as Image } from './cmp.image.svelte';
 export { default as ImageRound } from './cmp.image-round.svelte';
 export { default as ImageRounded } from './cmp.image-rounded.svelte';
 export { default as ImageStub } from './cmp.image-stub.svelte';
-export { ImageState, calculateImageState } from './image-state';
+export { calculateImageState } from './image-state';
+export type { ImageState } from './image-state';

package/dist/ui/image/index.js

@@ -2,4 +2,4 @@ export { default as Image } from './cmp.image.svelte';
 export { default as ImageRound } from './cmp.image-round.svelte';
 export { default as ImageRounded } from './cmp.image-rounded.svelte';
 export { default as ImageStub } from './cmp.image-stub.svelte';
-export { ImageState, calculateImageState } from './image-state';
+export { calculateImageState } from './image-state';

package/dist/ui/infinite-scroll/cmp.infinite-scroll.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">import { Spinner } from '../spinner';
+let { loadMore, container = null, rootMargin = '200px', children, loading } = $props();
+let isLoading = $state(false);
+let paginationTrigger = $state(null);
+let itemsContainer = $state(null);
+$effect(() => {
+    if (!paginationTrigger || !itemsContainer) {
+        return;
+    }
+    const trigger = paginationTrigger;
+    const items = itemsContainer;
+    const intersectionObserver = new IntersectionObserver((e) => {
+        const [entries] = e;
+        if (entries.isIntersecting) {
+            void onLoadMore();
+        }
+    }, {
+        root: container,
+        rootMargin
+    });
+    // Re-observe trigger on container resize to force IntersectionObserver
+    // to re-evaluate visibility — it won't fire on its own when siblings resize.
+    const resizeObserver = new ResizeObserver(() => {
+        intersectionObserver.unobserve(trigger);
+        intersectionObserver.observe(trigger);
+    });
+    resizeObserver.observe(items);
+    return () => {
+        resizeObserver.disconnect();
+        intersectionObserver.disconnect();
+    };
+});
+const onLoadMore = async () => {
+    if (isLoading) {
+        return;
+    }
+    isLoading = true;
+    try {
+        await loadMore();
+    }
+    finally {
+        isLoading = false;
+    }
+};
+</script>
+
+<div class="infinite-scroll">
+  <div class="infinite-scroll__items" bind:this={itemsContainer}>
+    {@render children()}
+  </div>
+
+  <div class="infinite-scroll__pagination-trigger" bind:this={paginationTrigger}></div>
+  {#if isLoading}
+    {#if loading}
+      {@render loading()}
+    {:else}
+      <div class="infinite-scroll__loading-container">
+        <Spinner timeout={500} />
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<!--
+@component
+Triggers an async `loadMore` callback when a sentinel element scrolls into view, using IntersectionObserver. Re-observes the sentinel on container resize so layout shifts inside the parent re-evaluate visibility (a known IntersectionObserver gotcha). Internal `isLoading` guard prevents overlapping fires while a load is in flight.
+
+Pairs with `core/data-loaders` (`CursorDataLoader`, `PageDataLoader`, `CursorDataLoaderWithSearch`) — wire `loadMore={loader.loadMore}` and `{#each loader.items as item}` directly.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--infinite-scroll--display` | Display mode for root and items container | `block` |
+| `--sc-kit--infinite-scroll--flex` | Flex shorthand for root and items container | `initial` |
+| `--sc-kit--infinite-scroll--overflow-y` | Vertical overflow behavior | `initial` |
+-->
+
+<style>.infinite-scroll {
+  --_infinite-scroll--display: var(--sc-kit--infinite-scroll--display, block);
+  --_infinite-scroll--flex: var(--sc-kit--infinite-scroll--flex, initial);
+  --_infinite-scroll--overflow-y: var(--sc-kit--infinite-scroll--overflow-y, initial);
+  display: var(--_infinite-scroll--display);
+  flex-direction: column;
+  flex: var(--_infinite-scroll--flex);
+  overflow-y: var(--_infinite-scroll--overflow-y);
+  min-height: 2.625em;
+  position: relative;
+  width: 100%;
+}
+.infinite-scroll__items {
+  display: var(--_infinite-scroll--display);
+  flex-direction: column;
+  flex: var(--_infinite-scroll--flex);
+}
+.infinite-scroll__pagination-trigger {
+  border: 1px solid transparent;
+}
+.infinite-scroll__loading-container {
+  position: absolute;
+  bottom: 0.3125em;
+  left: 50%;
+  transform: translateX(-50%);
+}</style>

package/dist/ui/infinite-scroll/cmp.infinite-scroll.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Async callback invoked when the sentinel becomes visible. Should resolve when the next batch is appended (or no-op when there are no more items — `CursorDataLoader.loadMore` already returns `[]` in that case). */
+    loadMore: () => Promise<unknown>;
+    /** Scroll ancestor used as the IntersectionObserver root. Required when the viewport differs from the scrolling container. */
+    container?: HTMLElement | null;
+    /** IntersectionObserver `rootMargin`. Default `'200px'` — fires the load a viewport-screen before reaching the bottom. */
+    rootMargin?: string;
+    children: Snippet;
+    /** Custom loading indicator snippet. Defaults to the kit `Spinner`. */
+    loading?: Snippet;
+};
+/**
+ * Triggers an async `loadMore` callback when a sentinel element scrolls into view, using IntersectionObserver. Re-observes the sentinel on container resize so layout shifts inside the parent re-evaluate visibility (a known IntersectionObserver gotcha). Internal `isLoading` guard prevents overlapping fires while a load is in flight.
+ *
+ * Pairs with `core/data-loaders` (`CursorDataLoader`, `PageDataLoader`, `CursorDataLoaderWithSearch`) — wire `loadMore={loader.loadMore}` and `{#each loader.items as item}` directly.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--infinite-scroll--display` | Display mode for root and items container | `block` |
+ * | `--sc-kit--infinite-scroll--flex` | Flex shorthand for root and items container | `initial` |
+ * | `--sc-kit--infinite-scroll--overflow-y` | Vertical overflow behavior | `initial` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/infinite-scroll/index.d.ts

@@ -0,0 +1 @@
+export { default as InfiniteScroll } from './cmp.infinite-scroll.svelte';

package/dist/ui/infinite-scroll/index.js

@@ -0,0 +1 @@
+export { default as InfiniteScroll } from './cmp.infinite-scroll.svelte';