@streamscloud/kit 0.65.0 → 0.66.0

package/dist/core/actions/horizontal-wheel-scroll.d.ts

@@ -1,5 +1,9 @@
 import type { Action } from 'svelte/action';
-export declare const horizontalWheelScroll: Action<HTMLElement, {
+type HorizontalWheelScrollParams = {
     isolateScroll: boolean;
+    /** `false` lets the wheel through to the page once the element can't scroll further that way. @default true */
+    isolateAtEdges?: boolean;
     speed?: number;
-} | undefined>;
+};
+export declare const horizontalWheelScroll: Action<HTMLElement, HorizontalWheelScrollParams | undefined>;
+export {};

package/dist/core/actions/horizontal-wheel-scroll.js

@@ -5,8 +5,10 @@ export const horizontalWheelScroll = (node, param = { isolateScroll: true, speed
             return;
         }
         const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;
+        const maxScrollLeft = node.scrollWidth - node.clientWidth;
+        const atEdge = (delta < 0 && node.scrollLeft <= 0) || (delta > 0 && node.scrollLeft >= maxScrollLeft - 1);
         node.scrollBy({ left: delta * (param.speed ?? 1) });
-        if (param.isolateScroll) {
+        if (param.isolateScroll && (param.isolateAtEdges !== false || !atEdge)) {
             event.preventDefault();
             event.stopPropagation();
         }

package/dist/ui/breadcrumb/breadcrumb-localization.d.ts

@@ -1,3 +1,4 @@
 export declare class BreadcrumbLocalization {
     get navLabel(): string;
+    get hiddenLevels(): string;
 }

package/dist/ui/breadcrumb/breadcrumb-localization.js

@@ -3,10 +3,17 @@ const loc = {
     navLabel: {
         en: 'Breadcrumb',
         no: 'Brødsmuler'
+    },
+    hiddenLevels: {
+        en: 'Show hidden levels',
+        no: 'Vis skjulte nivåer'
     }
 };
 export class BreadcrumbLocalization {
     get navLabel() {
         return loc.navLabel[AppLocale.current];
     }
+    get hiddenLevels() {
+        return loc.hiddenLevels[AppLocale.current];
+    }
 }

package/dist/ui/breadcrumb/cmp.breadcrumb.svelte

@@ -1,19 +1,95 @@
-<script lang="ts">import { BreadcrumbLocalization } from './breadcrumb-localization';
-let { items, separator = '/', underline = 'hover' } = $props();
+<script lang="ts">import { horizontalWheelScroll } from '../../core/actions';
+import { Popover } from '../popover';
+import { BreadcrumbLocalization } from './breadcrumb-localization';
+import { tick } from 'svelte';
+let { items, separator = '/', underline = 'hover', overflow = 'wrap', maxItems } = $props();
 const localization = new BreadcrumbLocalization();
+let canScrollBack = $state(false);
+let canScrollForward = $state(false);
+let menuOpened = $state(false);
+const tailLength = $derived(maxItems === undefined ? 0 : Math.max(2, maxItems) - 1);
+const collapsed = $derived(maxItems !== undefined && items.length > tailLength + 1);
+const hiddenItems = $derived(collapsed ? items.slice(1, items.length - tailLength) : []);
+const shownItems = $derived(collapsed ? [items[0], ...items.slice(items.length - tailLength)] : items);
+const scrolls = $derived(overflow === 'scroll');
+// The "…" Popover renders inside the track; a mask would hide it.
+const masked = $derived(scrolls && !menuOpened);
+const updateScrollState = (node) => {
+    canScrollBack = node.scrollLeft > 0;
+    canScrollForward = node.scrollLeft < node.scrollWidth - node.clientWidth - 1;
+};
+const scrollTrack = (node, _items) => {
+    const scrollToCurrent = () => {
+        if (scrolls) {
+            node.scrollLeft = node.scrollWidth;
+        }
+        updateScrollState(node);
+    };
+    // Children too: the track's own box is pinned at max-width, so a web-font swap only resizes its content.
+    const observer = new ResizeObserver(scrollToCurrent);
+    const observeTrackAndCrumbs = () => {
+        observer.disconnect();
+        observer.observe(node);
+        for (const child of node.children) {
+            observer.observe(child);
+        }
+    };
+    observeTrackAndCrumbs();
+    return {
+        update: async () => {
+            await tick();
+            observeTrackAndCrumbs();
+            scrollToCurrent();
+        },
+        destroy: () => observer.disconnect()
+    };
+};
 </script>
 
-<div class="breadcrumb breadcrumb--underline-{underline}" role="navigation" aria-label={localization.navLabel}>
-  {#each items as item, i (item.label + i)}
+{#snippet crumb(item: BreadcrumbItem, current: boolean, menuItem: boolean)}
+  {#if current}
+    <span class="breadcrumb__current" aria-current="page">{item.label}</span>
+  {:else if item.href}
+    <a class="breadcrumb__link" class:breadcrumb__link--menu={menuItem} href={item.href} onclick={(e) => item.on?.click?.(e)}>{item.label}</a>
+  {:else if item.on?.click}
+    <button type="button" class="breadcrumb__link" class:breadcrumb__link--menu={menuItem} onclick={(e) => item.on?.click?.(e)}>{item.label}</button>
+  {:else}
+    <span class="breadcrumb__current" class:breadcrumb__current--menu={menuItem}>{item.label}</span>
+  {/if}
+{/snippet}
+
+<div
+  class="breadcrumb breadcrumb--underline-{underline}"
+  class:breadcrumb--scroll={scrolls}
+  class:breadcrumb--mask-back={masked && canScrollBack && !canScrollForward}
+  class:breadcrumb--mask-forward={masked && canScrollForward && !canScrollBack}
+  class:breadcrumb--mask-both={masked && canScrollBack && canScrollForward}
+  role="navigation"
+  aria-label={localization.navLabel}
+  use:scrollTrack={shownItems}
+  use:horizontalWheelScroll={{ isolateScroll: scrolls, isolateAtEdges: false }}
+  onscroll={(e) => updateScrollState(e.currentTarget)}>
+  {#each shownItems as item, i (`${i}:${item.label}`)}
     {#if i > 0}<span class="breadcrumb__separator" aria-hidden="true">{separator}</span>{/if}
-    {#if i === items.length - 1}
-      <span class="breadcrumb__current" aria-current="page">{item.label}</span>
-    {:else if item.href}
-      <a class="breadcrumb__link" href={item.href} onclick={(e) => item.on?.click?.(e)}>{item.label}</a>
-    {:else if item.on?.click}
-      <button type="button" class="breadcrumb__link" onclick={(e) => item.on?.click?.(e)}>{item.label}</button>
-    {:else}
-      <span class="breadcrumb__current">{item.label}</span>
+    {@render crumb(item, i === shownItems.length - 1, false)}
+    {#if i === 0 && collapsed}
+      <span class="breadcrumb__separator" aria-hidden="true">{separator}</span>
+      <span class="breadcrumb__more" onwheel={(e) => e.stopPropagation()}>
+        <Popover
+          position="bottom-start"
+          fixedPosition
+          aria-label={localization.hiddenLevels}
+          on={{ opened: () => (menuOpened = true), closed: () => (menuOpened = false) }}>
+          {#snippet trigger()}
+            <span class="breadcrumb__more-trigger">…</span>
+          {/snippet}
+          <div class="breadcrumb__menu">
+            {#each hiddenItems as hidden, j (`${j}:${hidden.label}`)}
+              {@render crumb(hidden, false, true)}
+            {/each}
+          </div>
+        </Popover>
+      </span>
     {/if}
   {/each}
 </div>
@@ -27,7 +103,9 @@ A horizontal trail of crumbs ending at the current page. Each non-last item rend
 - plain text `<span>` when neither is set.
 
 The last item is always plain text with `aria-current="page"`. `underline` decides whether the crumb
-links show their underline on hover only (default), always, or never.
+links show their underline on hover only (default), always, or never. `overflow="scroll"` keeps the
+trail on one line that scrolls sideways; `maxItems` folds the middle into a "…" crumb that lists the
+hidden levels.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -63,7 +141,34 @@ links show their underline on hover only (default), always, or never.
 .breadcrumb--underline-never {
   --_breadcrumb--link-text-decoration-hover: none;
 }
+.breadcrumb--scroll {
+  --_breadcrumb--mask-size: 1.5rem;
+  flex-wrap: nowrap;
+  max-width: 100%;
+  padding-block: 0.25rem;
+  margin-block: -0.25rem;
+  white-space: nowrap;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.breadcrumb--scroll::-webkit-scrollbar {
+  display: none;
+}
+.breadcrumb--mask-back {
+  mask-image: linear-gradient(to right, transparent 0%, black var(--_breadcrumb--mask-size), black 100%);
+}
+.breadcrumb--mask-forward {
+  mask-image: linear-gradient(to right, black 0%, black calc(100% - var(--_breadcrumb--mask-size)), transparent 100%);
+}
+.breadcrumb--mask-both {
+  mask-image: linear-gradient(to right, transparent 0%, black var(--_breadcrumb--mask-size), black calc(100% - var(--_breadcrumb--mask-size)), transparent 100%);
+}
 .breadcrumb__link {
+  padding: 0;
+  font: inherit;
+  background: none;
+  border: none;
+  cursor: pointer;
   color: var(--_breadcrumb--link-color);
   text-decoration: var(--_breadcrumb--link-text-decoration);
   transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
@@ -77,11 +182,44 @@ links show their underline on hover only (default), always, or never.
   outline-offset: 2px;
   border-radius: var(--sc-kit--radius--sm);
 }
+.breadcrumb__link--menu {
+  display: block;
+  width: 100%;
+  padding: var(--sc-kit--space--1) var(--sc-kit--space--3);
+  text-align: start;
+  border-radius: var(--sc-kit--radius--sm);
+  white-space: nowrap;
+}
+.breadcrumb__link--menu:hover {
+  background: var(--sc-kit--color--bg--hover);
+}
 .breadcrumb__current {
   color: var(--_breadcrumb--current-color);
   font-weight: var(--sc-kit--font-weight--medium);
 }
+.breadcrumb__current--menu {
+  display: block;
+  padding: var(--sc-kit--space--1) var(--sc-kit--space--3);
+  font-weight: var(--sc-kit--font-weight--regular);
+  white-space: nowrap;
+}
 .breadcrumb__separator {
   color: var(--_breadcrumb--color);
   user-select: none;
+}
+.breadcrumb__more {
+  display: inline-flex;
+}
+.breadcrumb__more-trigger {
+  color: var(--_breadcrumb--link-color);
+  transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.breadcrumb__more-trigger:hover {
+  color: var(--_breadcrumb--link-color-hover);
+}
+.breadcrumb__menu {
+  display: flex;
+  flex-direction: column;
+  padding: var(--sc-kit--space--1);
+  font-size: var(--_breadcrumb--font-size);
 }</style>

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

@@ -5,6 +5,10 @@ type Props = {
     separator?: string;
     /** When the crumb links show their underline: only on hover, permanently, or not at all. @default 'hover' */
     underline?: 'hover' | 'always' | 'never';
+    /** `'wrap'` breaks the trail onto new lines; `'scroll'` keeps one line that scrolls sideways (wheel included) and starts scrolled to the current crumb. @default 'wrap' */
+    overflow?: 'wrap' | 'scroll';
+    /** Collapse the middle of a longer trail: keep the first crumb and the last `maxItems - 1`, the hidden ones open from a "…" crumb. Values below 2 count as 2. */
+    maxItems?: number;
 };
 /**
  * A horizontal trail of crumbs ending at the current page. Each non-last item renders as:
@@ -14,7 +18,9 @@ type Props = {
  * - plain text `<span>` when neither is set.
  *
  * The last item is always plain text with `aria-current="page"`. `underline` decides whether the crumb
- * links show their underline on hover only (default), always, or never.
+ * links show their underline on hover only (default), always, or never. `overflow="scroll"` keeps the
+ * trail on one line that scrolls sideways; `maxItems` folds the middle into a "…" crumb that lists the
+ * hidden levels.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

package/dist/ui/dialog/cmp.dialog-container.svelte

@@ -11,8 +11,9 @@ const DialogView = $derived(dialog.view);
 // doesn't always prevent dialog close. Using keydown to block ESC earlier.
 // Remove when browser bug is fixed.
 // See: https://issues.chromium.org/issues/41487622
+// On window, not <dialog>: after a stacked dialog unmounts focus is on <body> and Esc natively closes this one.
 const handleKeydown = (event) => {
-    if (event.key !== /*@wc-ignore*/ 'Escape') {
+    if (event.key !== 'Escape' || !isActive) {
         return;
     }
     if (!canDismiss) {
@@ -62,6 +63,8 @@ const customWidth = $derived(isCustomWidth ? size : null);
 const isStretchContent = $derived(position === 'full-screen' || position === 'full-height' || position === 'side-left' || position === 'side-right');
 </script>
 
+<svelte:window onkeydown={handleKeydown} />
+
 <dialog
   bind:this={dialogElement}
   class="dialog-container"
@@ -79,7 +82,6 @@ const isStretchContent = $derived(position === 'full-screen' || position === 'fu
   class:dialog-container--position-full-height={position === 'full-height'}
   class:dialog-container--position-side-left={position === 'side-left'}
   class:dialog-container--position-side-right={position === 'side-right'}
-  onkeydown={handleKeydown}
   oncancel={handleCancel}
   onclick={handleBackdropClick}
   style:--dialog-container--custom-width={customWidth}>

package/dist/ui/seek-bar/cmp.seek-bar.svelte

@@ -52,16 +52,16 @@ const onMouseDown = (e) => {
 const handleScrubberKeyDown = (event) => {
     const step = 0.05;
     let newValue;
-    if (event.key === /*@wc-ignore*/ 'ArrowLeft') {
+    if (event.key === 'ArrowLeft') {
         newValue = Math.max(0, value - step);
     }
-    else if (event.key === /*@wc-ignore*/ 'ArrowRight') {
+    else if (event.key === 'ArrowRight') {
         newValue = Math.min(1, value + step);
     }
-    else if (event.key === /*@wc-ignore*/ 'Home') {
+    else if (event.key === 'Home') {
         newValue = 0;
     }
-    else if (event.key === /*@wc-ignore*/ 'End') {
+    else if (event.key === 'End') {
         newValue = 1;
     }
     if (newValue !== undefined) {