@streamscloud/kit 0.40.0 → 0.40.2

package/dist/styles/_semantic.scss

@@ -16,6 +16,7 @@
   --sc-kit--color--bg--active: light-dark(#eef2f8, #{$color-dark-600});
   --sc-kit--color--bg--menu-active: light-dark(#{$color-blue-50}, #{$color-dark-500});
   --sc-kit--color--bg--images: light-dark(#{$color-neutral-300}, #{$color-dark-50});
+  --sc-kit--color--bg--images-subtle: light-dark(#{$color-neutral-100}, #{$color-dark-50});
 
   // ============================================================
   // COLOR — TEXT

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

@@ -71,6 +71,7 @@ sticky panel headers.
 | `--sc-kit--page-layout--color` | Page text color | `--sc-kit--color--text--primary` |
 | `--sc-kit--page-layout--border-color` | Header divider color | `--sc-kit--color--border` |
 | `--sc-kit--page-layout--title--font-size` | Title font size | `18px` |
+| `--sc-kit--page-layout--header--padding-inline` | Header inline padding | `24px` |
 -->
 <style>.page-layout {
   --_page-layout--background: var(--sc-kit--page-layout--background, var(--sc-kit--color--bg--panel));
@@ -78,6 +79,7 @@ sticky panel headers.
   --_page-layout--color: var(--sc-kit--page-layout--color, var(--sc-kit--color--text--primary));
   --_page-layout--border-color: var(--sc-kit--page-layout--border-color, var(--sc-kit--color--border));
   --_page-layout--title-font-size: var(--sc-kit--page-layout--title--font-size, 1.125rem);
+  --_page-layout--header-padding-inline: var(--sc-kit--page-layout--header--padding-inline, 1.5rem);
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -90,7 +92,7 @@ sticky panel headers.
   align-items: center;
   justify-content: space-between;
   height: 4.1875rem;
-  padding: 1.25rem 1.5rem 0.875rem;
+  padding: 1.25rem var(--_page-layout--header-padding-inline) 0.875rem;
   background: var(--_page-layout--header-background);
   border-bottom: 1px solid var(--_page-layout--border-color);
   flex-shrink: 0;

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

@@ -28,6 +28,7 @@ type Props = {
  * | `--sc-kit--page-layout--color` | Page text color | `--sc-kit--color--text--primary` |
  * | `--sc-kit--page-layout--border-color` | Header divider color | `--sc-kit--color--border` |
  * | `--sc-kit--page-layout--title--font-size` | Title font size | `18px` |
+ * | `--sc-kit--page-layout--header--padding-inline` | Header inline padding | `24px` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/page-layout/cmp.page-panel.svelte

@@ -1,11 +1,19 @@
-<script lang="ts">import { slideHorizontally, transitionDuration } from '../../core/transitions';
+<script lang="ts">import { horizontalWheelScroll } from '../../core/actions';
+import { slideHorizontally, transitionDuration } from '../../core/transitions';
+import { Icon } from '../icon';
 import PanelCollapseButton from './cmp.panel-collapse-button.svelte';
 import { PageLayoutLocalization } from './page-layout-localization';
+import IconChevronLeft from '@fluentui/svg-icons/icons/chevron_left_20_regular.svg?raw';
+import IconChevronRight from '@fluentui/svg-icons/icons/chevron_right_20_regular.svg?raw';
 import { untrack } from 'svelte';
 const { panelState, children, id, header, footer, title, actionsLeft, actionsCenter, actionsRight, collapseButtons, hideHeader = false, balanceHeaderCenter = false, resizing = null, borders = [], on } = $props();
 const localization = new PageLayoutLocalization();
 const isFlex = untrack(() => !resizing);
+const HEADER_SCROLL_STEP = 160;
 let panelRef = $state(undefined);
+let headerLeftTrack = $state(undefined);
+let canScrollHeaderLeftBack = $state(false);
+let canScrollHeaderLeftForward = $state(false);
 const { id: panelId, entry } = untrack(() => panelState.register({
     id,
     initialWidth: resizing?.initialWidth ?? null,
@@ -15,6 +23,26 @@ const canResize = $derived(resizing && [resizing.initialWidth, resizing.minWidth
 const widthCss = $derived(entry.width !== null ? `${entry.width}px` : undefined);
 const leftCollapseIds = $derived((collapseButtons ?? []).filter((cid) => panelState.get(cid)?.collapseDirection === 'left'));
 const rightCollapseIds = $derived((collapseButtons ?? []).filter((cid) => panelState.get(cid)?.collapseDirection === 'right'));
+const updateHeaderLeftScrollState = (node) => {
+    const { scrollLeft, scrollWidth, clientWidth } = node;
+    canScrollHeaderLeftBack = scrollLeft > 0;
+    canScrollHeaderLeftForward = scrollLeft < scrollWidth - clientWidth - 1;
+};
+const headerLeftTrackMounted = (node) => {
+    headerLeftTrack = node;
+    const observer = new ResizeObserver(() => updateHeaderLeftScrollState(node));
+    observer.observe(node);
+    updateHeaderLeftScrollState(node);
+    return {
+        destroy: () => observer.disconnect()
+    };
+};
+const scrollHeaderLeftBack = () => {
+    headerLeftTrack?.scrollBy({ left: -HEADER_SCROLL_STEP, behavior: 'smooth' });
+};
+const scrollHeaderLeftForward = () => {
+    headerLeftTrack?.scrollBy({ left: HEADER_SCROLL_STEP, behavior: 'smooth' });
+};
 $effect(() => {
     const collapsed = entry.collapsed;
     untrack(() => {
@@ -117,16 +145,43 @@ $effect(() => {
         {:else}
           {#if balanceHeaderCenter || leftCollapseIds.length > 0 || title || actionsLeft}
             <div class="page-panel__header-left" class:page-panel__header-left--balanced={balanceHeaderCenter}>
-              {#each leftCollapseIds as cid (cid)}
-                <PanelCollapseButton panelState={panelState} panelId={cid} />
-              {/each}
-              {#if typeof title === 'function'}
-                {@render title()}
-              {:else if title}
-                <span class="page-panel__title">{title}</span>
+              {#if canScrollHeaderLeftBack}
+                <button
+                  type="button"
+                  class="page-panel__header-scroll-btn page-panel__header-scroll-btn--back"
+                  onclick={scrollHeaderLeftBack}
+                  aria-label={localization.scrollBack}>
+                  <Icon src={IconChevronLeft} size="sm" />
+                </button>
               {/if}
-              {#if actionsLeft}
-                {@render actionsLeft()}
+              <div
+                class="page-panel__header-left-track"
+                class:page-panel__header-left-track--mask-back={canScrollHeaderLeftBack && !canScrollHeaderLeftForward}
+                class:page-panel__header-left-track--mask-forward={canScrollHeaderLeftForward && !canScrollHeaderLeftBack}
+                class:page-panel__header-left-track--mask-both={canScrollHeaderLeftBack && canScrollHeaderLeftForward}
+                use:headerLeftTrackMounted
+                use:horizontalWheelScroll
+                onscroll={(e) => updateHeaderLeftScrollState(e.currentTarget)}>
+                {#each leftCollapseIds as cid (cid)}
+                  <PanelCollapseButton panelState={panelState} panelId={cid} />
+                {/each}
+                {#if typeof title === 'function'}
+                  {@render title()}
+                {:else if title}
+                  <span class="page-panel__title">{title}</span>
+                {/if}
+                {#if actionsLeft}
+                  {@render actionsLeft()}
+                {/if}
+              </div>
+              {#if canScrollHeaderLeftForward}
+                <button
+                  type="button"
+                  class="page-panel__header-scroll-btn page-panel__header-scroll-btn--forward"
+                  onclick={scrollHeaderLeftForward}
+                  aria-label={localization.scrollForward}>
+                  <Icon src={IconChevronRight} size="sm" />
+                </button>
               {/if}
             </div>
           {/if}
@@ -282,13 +337,66 @@ to min / max; Enter / Space toggle collapsed.
   display: flex;
   align-self: stretch;
   align-items: center;
-  gap: 1rem;
   min-width: 0;
-  overflow-x: clip;
+  position: relative;
 }
 .page-panel__header-left--balanced {
   justify-self: start;
 }
+.page-panel__header-left:hover {
+  --_scroll-btn-opacity: 1;
+}
+.page-panel__header-left-track {
+  --_mask-size: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.page-panel__header-left-track::-webkit-scrollbar {
+  display: none;
+}
+.page-panel__header-left-track--mask-back {
+  mask-image: linear-gradient(to right, transparent 0%, black var(--_mask-size), black 100%);
+}
+.page-panel__header-left-track--mask-forward {
+  mask-image: linear-gradient(to right, black 0%, black calc(100% - var(--_mask-size)), transparent 100%);
+}
+.page-panel__header-left-track--mask-both {
+  mask-image: linear-gradient(to right, transparent 0%, black var(--_mask-size), black calc(100% - var(--_mask-size)), transparent 100%);
+}
+.page-panel__header-scroll-btn {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.25rem;
+  background: transparent;
+  backdrop-filter: blur(2px);
+  border: none;
+  cursor: pointer;
+  color: var(--sc-kit--color--text--secondary);
+  opacity: var(--_scroll-btn-opacity, 0);
+  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.page-panel__header-scroll-btn:hover {
+  color: var(--sc-kit--color--text--primary);
+}
+.page-panel__header-scroll-btn--back {
+  left: 0;
+  padding-right: 0.625rem;
+  background: linear-gradient(to right, var(--_page-panel--header-background) 60%, transparent);
+}
+.page-panel__header-scroll-btn--forward {
+  right: 0;
+  padding-left: 0.625rem;
+  background: linear-gradient(to left, var(--_page-panel--header-background) 60%, transparent);
+}
 .page-panel__header-center {
   display: flex;
   align-items: center;

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

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

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

@@ -19,6 +19,14 @@ const loc = {
     close: {
         en: 'Close',
         no: 'Lukk'
+    },
+    scrollBack: {
+        en: 'Scroll back',
+        no: 'Rull tilbake'
+    },
+    scrollForward: {
+        en: 'Scroll forward',
+        no: 'Rull fremover'
     }
 };
 export class PageLayoutLocalization {
@@ -37,4 +45,10 @@ export class PageLayoutLocalization {
     get close() {
         return loc.close[AppLocale.current];
     }
+    get scrollBack() {
+        return loc.scrollBack[AppLocale.current];
+    }
+    get scrollForward() {
+        return loc.scrollForward[AppLocale.current];
+    }
 }

package/dist/ui/table/table-cells/table-image-cell.svelte

@@ -32,7 +32,18 @@ const getValueForColumn = (column, item) => (column.valueFactory ? column.valueF
   {/if}
 </div>
 
+<!--
+@component
+Image cell for table rows. Renders one of several image layouts depending on `column.format`.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--table-image-cell--image--background` | Background behind a `square-contain` image (letterboxing) | `var(--sc-kit--color--bg--images-subtle)` |
+-->
+
 <style>.table-image-cell {
+  --_table-image-cell--image--background: var(--sc-kit--table-image-cell--image--background, var(--sc-kit--color--bg--images-subtle));
   display: flex;
   height: 3.125em;
   min-height: 3.125em;
@@ -60,6 +71,7 @@ const getValueForColumn = (column, item) => (column.valueFactory ? column.valueF
 }
 .table-image-cell__image--contain {
   --sc-kit--image--object-fit: contain;
+  --sc-kit--image--background: var(--_table-image-cell--image--background);
   height: var(--_table-image-cell--cover-height);
 }
 .table-image-cell__image--cover {

package/dist/ui/table/table-cells/table-image-cell.svelte.d.ts

@@ -32,6 +32,14 @@ interface $$IsomorphicComponent {
     }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
+/**
+ * Image cell for table rows. Renders one of several image layouts depending on `column.format`.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--table-image-cell--image--background` | Background behind a `square-contain` image (letterboxing) | `var(--sc-kit--color--bg--images-subtle)` |
+ */
 declare const TableImageCell: $$IsomorphicComponent;
 type TableImageCell<T extends {
     id: string;

package/package.json

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