@streamscloud/kit 0.45.0 → 0.47.0

package/dist/ui/cropper/img-cropper/cmp.img-cropper.svelte

@@ -137,13 +137,6 @@ When `showImageShadow` is enabled on the cropper instance, a dark semi-transpare
 the canvas bounds so the surrounding area is dimmed. The parent element should set
 `overflow: hidden` to clip the shadow at its boundaries.
 
-### Props
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `src` | `string` | — | Image source URL |
-| `cropper` | `ImgCropper` | — | Cropper controller instance |
-| `showControls` | `boolean` | `true` | Show built-in Apply/Cancel crop controls |
-
 ### CSS Custom Properties
 None — canvas background, shadow, and sizing are controlled by the `ImgCropper` instance.
 -->
@@ -161,6 +154,8 @@ None — canvas background, shadow, and sizing are controlled by the `ImgCropper
 .img-cropper__canvas {
   width: 100%;
   height: 100%;
+  min-width: 0;
+  min-height: 0;
   background-color: var(--_fill-color);
   visibility: hidden;
 }

package/dist/ui/cropper/img-cropper/cmp.img-cropper.svelte.d.ts

@@ -2,6 +2,7 @@ import type { ImgCropper } from './img-cropper.svelte';
 type Props = {
     src: string;
     cropper: ImgCropper;
+    /** Show the built-in Apply/Cancel crop controls @default true */
     showControls?: boolean;
 };
 /**
@@ -41,13 +42,6 @@ type Props = {
  * the canvas bounds so the surrounding area is dimmed. The parent element should set
  * `overflow: hidden` to clip the shadow at its boundaries.
  *
- * ### Props
- * | Prop | Type | Default | Description |
- * |---|---|---|---|
- * | `src` | `string` | — | Image source URL |
- * | `cropper` | `ImgCropper` | — | Cropper controller instance |
- * | `showControls` | `boolean` | `true` | Show built-in Apply/Cancel crop controls |
- *
  * ### CSS Custom Properties
  * None — canvas background, shadow, and sizing are controlled by the `ImgCropper` instance.
  */

package/dist/ui/cropper/img-cropper/img-cropper-base-worker.svelte.d.ts

@@ -22,7 +22,7 @@ export declare abstract class ImgCropperBaseWorker implements ImgCropperWorker {
     reset: () => Promise<void>;
     crop: (options?: {
         fillColor?: string;
-    }) => Promise<ImgCropperResult>;
+    }) => Promise<ImgCropperResult | null>;
     save: (options?: {
         fillColor?: string;
     }) => Promise<ImgCropperResult>;

package/dist/ui/cropper/img-cropper/img-cropper-base-worker.svelte.js

@@ -24,7 +24,8 @@ export class ImgCropperBaseWorker {
         this._selectHandle = params.selectHandle;
         this.canvasGeometry = { aspectRatio: params.aspectRatio, width: 0, height: 0 };
         const onSelectionChange = (e) => {
-            const { width, height } = e.detail;
+            // CropperSelection emits before committing, so a change the boundary handler cancelled never reaches the selection.
+            const { width, height } = e.defaultPrevented ? this._selection : e.detail;
             this.cropBoxVisible = width > 0 && height > 0;
         };
         let handlingBoundary = false;
@@ -40,8 +41,9 @@ export class ImgCropperBaseWorker {
                 handlingBoundary = false;
             }
         };
-        this._selection.addEventListener('change', onSelectionChange);
+        // Boundary check first — onSelectionChange reads defaultPrevented, which it must not set itself.
         this._selection.addEventListener('change', onBoundaryCheck);
+        this._selection.addEventListener('change', onSelectionChange);
         this.destroy = () => {
             this._selection.removeEventListener('change', onSelectionChange);
             this._selection.removeEventListener('change', onBoundaryCheck);
@@ -75,6 +77,10 @@ export class ImgCropperBaseWorker {
         await this._fitImage();
     };
     crop = async (options) => {
+        // An empty selection exports a 0x0 canvas, and assigning its "data:," data URL leaves the cropper with an unloadable source.
+        if (this._selection.width <= 0 || this._selection.height <= 0) {
+            return null;
+        }
         const fillColor = options?.fillColor;
         const imageScale = computeImageScale(this._image.$getTransform());
         const outputSize = computeNaturalOutputSize({ displayWidth: this._selection.width, displayHeight: this._selection.height, imageScale });
@@ -107,8 +113,10 @@ export class ImgCropperBaseWorker {
         // Compute output dimensions before micro-zoom so the result matches
         // the source pixel density, not the display size.
         const imageScale = computeImageScale(this._image.$getTransform());
-        const displayWidth = this.cropBoxVisible ? this._selection.width : this._canvas.offsetWidth;
-        const displayHeight = this.cropBoxVisible ? this._selection.height : this._canvas.offsetHeight;
+        // A zero-sized selection exports a 0x0 canvas, whose toDataURL is the unusable "data:," string.
+        const hasCropBox = this._selection.width > 0 && this._selection.height > 0;
+        const displayWidth = hasCropBox ? this._selection.width : this._canvas.offsetWidth;
+        const displayHeight = hasCropBox ? this._selection.height : this._canvas.offsetHeight;
         const outputSize = computeNaturalOutputSize({ displayWidth, displayHeight, imageScale });
         const toCanvasOptions = { width: outputSize.width, height: outputSize.height, beforeDraw };
         // CropperJS $toCanvas exports only the visible portion of the canvas.
@@ -116,12 +124,12 @@ export class ImgCropperBaseWorker {
         // tightly fits the canvas. A micro-zoom nudges the image slightly past
         // the boundary so the export captures the full area; the zoom is
         // reversed immediately after.
-        const needsMicroZoom = !this.cropBoxVisible;
+        const needsMicroZoom = !hasCropBox;
         if (needsMicroZoom) {
             // Forward zoom increases coverage — safe without suspending cover check
             this._image.$zoom(0.003);
         }
-        const canvas = this.cropBoxVisible ? await this._selection.$toCanvas(toCanvasOptions) : await this._canvas.$toCanvas(toCanvasOptions);
+        const canvas = hasCropBox ? await this._selection.$toCanvas(toCanvasOptions) : await this._canvas.$toCanvas(toCanvasOptions);
         if (needsMicroZoom) {
             // Reverse zoom shrinks image — must suspend cover check to avoid clamping
             this._wrapTransformOp(() => this._image.$zoom(-0.003));

package/dist/ui/cropper/img-cropper/img-cropper-contain-worker.svelte.js

@@ -1,5 +1,5 @@
 import { ImgCropperBaseWorker } from './img-cropper-base-worker.svelte';
-import { fitInContainer } from './img-cropper-utils';
+import { fitInContainer, resolveCanvasGeometry } from './img-cropper-utils';
 export class ImgCropperContainWorker extends ImgCropperBaseWorker {
     _centerMode = 'contain';
     constructor(params) {
@@ -24,16 +24,28 @@ export class ImgCropperContainWorker extends ImgCropperBaseWorker {
             const fitted = fitInContainer({ ratio: aspectRatio, containerWidth, containerHeight });
             const maxWidth = Math.max(visualWidth, visualHeight * aspectRatio);
             const width = Math.min(fitted.width, maxWidth);
-            this.canvasGeometry = { aspectRatio, width, height: width / aspectRatio };
+            this.canvasGeometry = resolveCanvasGeometry({ aspectRatio, width, height: width / aspectRatio, maxWidth: fitted.width, maxHeight: containerHeight });
         }
         else if (visualWidth <= containerWidth && visualHeight <= containerHeight) {
-            // Free ratio, image fits naturally — no upscale
-            this.canvasGeometry = { aspectRatio, width: visualWidth, height: visualHeight };
+            const fitted = fitInContainer({ ratio: visualWidth / visualHeight, containerWidth, containerHeight });
+            this.canvasGeometry = resolveCanvasGeometry({
+                aspectRatio,
+                width: visualWidth,
+                height: visualHeight,
+                maxWidth: fitted.width,
+                maxHeight: containerHeight
+            });
         }
         else {
             // Free ratio, image too large — scale down to fit
             const fitted = fitInContainer({ ratio: visualWidth / visualHeight, containerWidth, containerHeight });
-            this.canvasGeometry = { aspectRatio, width: fitted.width, height: fitted.height };
+            this.canvasGeometry = resolveCanvasGeometry({
+                aspectRatio,
+                width: fitted.width,
+                height: fitted.height,
+                maxWidth: fitted.width,
+                maxHeight: containerHeight
+            });
         }
     };
 }

package/dist/ui/cropper/img-cropper/img-cropper-cover-worker.svelte.js

@@ -1,5 +1,5 @@
 import { ImgCropperBaseWorker } from './img-cropper-base-worker.svelte';
-import { fitInContainer, handleCoverCheck } from './img-cropper-utils';
+import { fitInContainer, handleCoverCheck, resolveCanvasGeometry } from './img-cropper-utils';
 export class ImgCropperCoverWorker extends ImgCropperBaseWorker {
     _centerMode = 'cover';
     constructor(params) {
@@ -53,18 +53,37 @@ export class ImgCropperCoverWorker extends ImgCropperBaseWorker {
             // Cap so the image can cover the canvas without upscaling
             const maxWidth = visualWidth > 0 && visualHeight > 0 ? Math.min(visualWidth, visualHeight * aspectRatio) : fitted.width;
             const width = Math.min(fitted.width, maxWidth);
-            this.canvasGeometry = { aspectRatio, width, height: width / aspectRatio };
+            this.canvasGeometry = resolveCanvasGeometry({ aspectRatio, width, height: width / aspectRatio, maxWidth: fitted.width, maxHeight: containerHeight });
         }
         else if (visualWidth <= 0 || visualHeight <= 0) {
-            this.canvasGeometry = { aspectRatio, width: containerWidth, height: containerHeight };
+            this.canvasGeometry = resolveCanvasGeometry({
+                aspectRatio,
+                width: containerWidth,
+                height: containerHeight,
+                maxWidth: containerWidth,
+                maxHeight: containerHeight
+            });
         }
         else if (visualWidth <= containerWidth && visualHeight <= containerHeight) {
-            this.canvasGeometry = { aspectRatio, width: visualWidth, height: visualHeight };
+            const fitted = fitInContainer({ ratio: visualWidth / visualHeight, containerWidth, containerHeight });
+            this.canvasGeometry = resolveCanvasGeometry({
+                aspectRatio,
+                width: visualWidth,
+                height: visualHeight,
+                maxWidth: fitted.width,
+                maxHeight: containerHeight
+            });
         }
         else {
             // Fit at image AR; per-axis capping collapses an oversized image to the container AR.
             const fitted = fitInContainer({ ratio: visualWidth / visualHeight, containerWidth, containerHeight });
-            this.canvasGeometry = { aspectRatio, width: fitted.width, height: fitted.height };
+            this.canvasGeometry = resolveCanvasGeometry({
+                aspectRatio,
+                width: fitted.width,
+                height: fitted.height,
+                maxWidth: fitted.width,
+                maxHeight: containerHeight
+            });
         }
     };
 }

package/dist/ui/cropper/img-cropper/img-cropper-utils.d.ts

@@ -1,3 +1,4 @@
+import type { CanvasGeometry } from './img-cropper-worker.svelte';
 import type { CropperCanvas, CropperImage, CropperSelection } from 'cropperjs';
 type Rect = {
     left: number;
@@ -34,6 +35,17 @@ export declare const fitInContainer: (params: {
     width: number;
     height: number;
 };
+/**
+ * Applies the minimum canvas size by scaling the whole rect, bounded by `maxWidth` / `maxHeight`, and rounds to whole pixels.
+ * The minimums are soft: a container smaller than them wins, and the returned canvas is smaller than `MIN_CANVAS_WIDTH` / `MIN_CANVAS_HEIGHT`.
+ */
+export declare const resolveCanvasGeometry: (params: {
+    aspectRatio: number | null;
+    width: number;
+    height: number;
+    maxWidth: number;
+    maxHeight: number;
+}) => CanvasGeometry;
 export declare const handleSelectionBoundary: (params: {
     event: Event;
     selection: CropperSelection;

package/dist/ui/cropper/img-cropper/img-cropper-utils.js

@@ -1,5 +1,7 @@
 import { Base64Helper } from '../../../core/files/base64-helper';
 import { default as mime } from 'mime';
+const COVERAGE_TOLERANCE = 0.5;
+const SHRINK_THRESHOLD = 0.5;
 // Detect MIME type from a URL without fetching the resource.
 // Returns a MIME string for data: URLs, extension-based URLs, or null for blob: / unknown URLs.
 export const detectMimeFromUrl = (url) => {
@@ -84,35 +86,56 @@ export const handleCoverCheck = (params) => {
         right: currentRect.right + (newAABB.right - oldAABB.right),
         bottom: currentRect.bottom + (newAABB.bottom - oldAABB.bottom)
     };
-    // Strict check (tolerance 0) — any gap triggers clamping
-    if (rectCoversRect(proposedRect, canvasRect, 0)) {
+    // Sub-pixel tolerance: a stricter check re-enters on the clamped transform this handler issues itself.
+    if (rectCoversRect(proposedRect, canvasRect, COVERAGE_TOLERANCE)) {
         return;
     }
     event.preventDefault();
-    // If the proposed image is still large enough to cover the canvas, clamp
-    // translation to maintain coverage. Otherwise block the transform entirely.
     const proposedWidth = proposedRect.right - proposedRect.left;
     const proposedHeight = proposedRect.bottom - proposedRect.top;
     const canvasWidth = canvasRect.right - canvasRect.left;
     const canvasHeight = canvasRect.bottom - canvasRect.top;
+    const oldAABBWidth = oldAABB.right - oldAABB.left;
+    const oldAABBHeight = oldAABB.bottom - oldAABB.top;
+    const newAABBWidth = newAABB.right - newAABB.left;
+    const newAABBHeight = newAABB.bottom - newAABB.top;
+    const shrinksImage = newAABBWidth < oldAABBWidth - SHRINK_THRESHOLD || newAABBHeight < oldAABBHeight - SHRINK_THRESHOLD;
+    let [scaleX, skewY, skewX, scaleY] = matrix;
+    let clampedRect = proposedRect;
     if (proposedWidth < canvasWidth - 0.5 || proposedHeight < canvasHeight - 0.5) {
-        return;
+        // Rescaling anything but a shrink would turn a pan, whose proposal is the same size, into an upscale.
+        if (!shrinksImage) {
+            return;
+        }
+        const coverScale = Math.max(canvasWidth / proposedWidth, canvasHeight / proposedHeight);
+        if (!Number.isFinite(coverScale)) {
+            return;
+        }
+        scaleX *= coverScale;
+        skewY *= coverScale;
+        skewX *= coverScale;
+        scaleY *= coverScale;
+        const halfWidth = (proposedWidth * coverScale) / 2;
+        const halfHeight = (proposedHeight * coverScale) / 2;
+        const centerX = (proposedRect.left + proposedRect.right) / 2;
+        const centerY = (proposedRect.top + proposedRect.bottom) / 2;
+        clampedRect = { left: centerX - halfWidth, top: centerY - halfHeight, right: centerX + halfWidth, bottom: centerY + halfHeight };
     }
     let clampedTx = matrix[4];
     let clampedTy = matrix[5];
-    if (proposedRect.left > canvasRect.left) {
-        clampedTx -= proposedRect.left - canvasRect.left;
+    if (clampedRect.left > canvasRect.left) {
+        clampedTx -= clampedRect.left - canvasRect.left;
     }
-    else if (proposedRect.right < canvasRect.right) {
-        clampedTx += canvasRect.right - proposedRect.right;
+    else if (clampedRect.right < canvasRect.right) {
+        clampedTx += canvasRect.right - clampedRect.right;
     }
-    if (proposedRect.top > canvasRect.top) {
-        clampedTy -= proposedRect.top - canvasRect.top;
+    if (clampedRect.top > canvasRect.top) {
+        clampedTy -= clampedRect.top - canvasRect.top;
     }
-    else if (proposedRect.bottom < canvasRect.bottom) {
-        clampedTy += canvasRect.bottom - proposedRect.bottom;
+    else if (clampedRect.bottom < canvasRect.bottom) {
+        clampedTy += canvasRect.bottom - clampedRect.bottom;
     }
-    image.$setTransform(matrix[0], matrix[1], matrix[2], matrix[3], clampedTx, clampedTy);
+    image.$setTransform(scaleX, skewY, skewX, scaleY, clampedTx, clampedTy);
 };
 export const fitInContainer = (params) => {
     const { ratio, containerWidth, containerHeight } = params;
@@ -121,6 +144,24 @@ export const fitInContainer = (params) => {
     }
     return { width: containerHeight * ratio, height: containerHeight };
 };
+// Same limits cropper-canvas declares in its shadow style, where they clamp one axis at a time and break the canvas ratio.
+const MIN_CANVAS_WIDTH = 200;
+const MIN_CANVAS_HEIGHT = 100;
+/**
+ * Applies the minimum canvas size by scaling the whole rect, bounded by `maxWidth` / `maxHeight`, and rounds to whole pixels.
+ * The minimums are soft: a container smaller than them wins, and the returned canvas is smaller than `MIN_CANVAS_WIDTH` / `MIN_CANVAS_HEIGHT`.
+ */
+export const resolveCanvasGeometry = (params) => {
+    const { aspectRatio, width, height, maxWidth, maxHeight } = params;
+    if (width <= 0 || height <= 0) {
+        return { aspectRatio, width: 0, height: 0 };
+    }
+    const ratio = width / height;
+    const floorScale = Math.max(MIN_CANVAS_WIDTH / width, MIN_CANVAS_HEIGHT / height, 1);
+    const boundedWidth = Math.min(width * floorScale, maxWidth, maxHeight * ratio);
+    // A zero side reads as "unset" in the template, which falls the canvas back to its CSS size and desyncs it from this geometry.
+    return { aspectRatio, width: Math.max(1, Math.round(boundedWidth)), height: Math.max(1, Math.round(boundedWidth / ratio)) };
+};
 export const handleSelectionBoundary = (params) => {
     const { event, selection, canvas } = params;
     const { x, y, width, height } = event.detail;

package/dist/ui/cropper/img-cropper/img-cropper-worker.svelte.d.ts

@@ -32,7 +32,7 @@ export interface ImgCropperWorker {
     reset: () => Promise<void>;
     crop: (options?: {
         fillColor?: string;
-    }) => Promise<ImgCropperResult>;
+    }) => Promise<ImgCropperResult | null>;
     save: (options?: {
         fillColor?: string;
     }) => Promise<ImgCropperResult>;

package/dist/ui/document-tabs/cmp.document-tabs.svelte

@@ -0,0 +1,245 @@
+<script lang="ts" generics="T">import { horizontalWheelScroll } from '../../core/actions';
+import { Icon } from '../icon';
+import DocumentTabItem from './document-tab.svelte';
+import { DocumentTabsLocalization } from './document-tabs-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';
+const { value, tabs, overflow = 'visible', compare, on } = $props();
+const localization = new DocumentTabsLocalization();
+const SCROLL_STEP = 160;
+let trackNode = $state(null);
+let canScrollBack = $state(false);
+let canScrollForward = $state(false);
+let scrollSyncArmed = false;
+const isActive = (tab) => (compare ? compare(value, tab.value) : value === tab.value);
+const isClosable = (tab) => !!on?.close && tab.closable !== false && !tab.disabled;
+const activeIndex = $derived(tabs.findIndex((tab) => isActive(tab)));
+const tabButtons = () => Array.from(trackNode?.querySelectorAll('[role="tab"]') ?? []);
+const updateScrollState = (node) => {
+    if (overflow !== 'scroll') {
+        canScrollBack = false;
+        canScrollForward = false;
+        return;
+    }
+    const { scrollLeft, scrollWidth, clientWidth } = node;
+    canScrollBack = scrollLeft > 0;
+    canScrollForward = scrollLeft < scrollWidth - clientWidth - 1;
+};
+const trackMounted = (node) => {
+    trackNode = node;
+    const observer = new ResizeObserver(() => updateScrollState(node));
+    observer.observe(node);
+    updateScrollState(node);
+    return {
+        destroy: () => observer.disconnect()
+    };
+};
+const scrollBack = () => {
+    trackNode?.scrollBy({ left: -SCROLL_STEP, behavior: 'smooth' });
+};
+const scrollForward = () => {
+    trackNode?.scrollBy({ left: SCROLL_STEP, behavior: 'smooth' });
+};
+const stepFocus = (buttons, from, step) => {
+    const count = buttons.length;
+    for (let offset = 1; offset <= count; offset++) {
+        const candidate = buttons[(((from + step * offset) % count) + count) % count];
+        if (!candidate.disabled) {
+            return candidate;
+        }
+    }
+    return null;
+};
+const handleKeydown = (event) => {
+    const buttons = tabButtons();
+    const current = buttons.indexOf(document.activeElement);
+    if (current === -1) {
+        return;
+    }
+    if (event.key === 'Delete' || event.key === 'Backspace') {
+        const tab = tabs[current];
+        if (tab && isClosable(tab)) {
+            event.preventDefault();
+            on?.close?.(tab.value);
+        }
+        return;
+    }
+    let target;
+    switch (event.key) {
+        case 'ArrowRight':
+            target = stepFocus(buttons, current, 1);
+            break;
+        case 'ArrowLeft':
+            target = stepFocus(buttons, current, -1);
+            break;
+        case 'Home':
+            target = stepFocus(buttons, -1, 1);
+            break;
+        case 'End':
+            target = stepFocus(buttons, buttons.length, -1);
+            break;
+        default:
+            return;
+    }
+    if (!target) {
+        return;
+    }
+    event.preventDefault();
+    target.focus();
+    target.click();
+};
+$effect(() => {
+    const index = activeIndex;
+    if (!trackNode || index < 0) {
+        return;
+    }
+    if (!scrollSyncArmed) {
+        scrollSyncArmed = true;
+        return;
+    }
+    tabButtons()[index]?.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
+});
+</script>
+
+<div class="document-tabs">
+  {#if canScrollBack}
+    <button type="button" class="document-tabs__scroll-btn document-tabs__scroll-btn--back" onclick={scrollBack} aria-label={localization.scrollBack}>
+      <Icon src={IconChevronLeft} size="sm" />
+    </button>
+  {/if}
+  <div
+    class="document-tabs__track"
+    class:document-tabs__track--scrollable={overflow === 'scroll'}
+    class:document-tabs__track--mask-back={canScrollBack && !canScrollForward}
+    class:document-tabs__track--mask-forward={canScrollForward && !canScrollBack}
+    class:document-tabs__track--mask-both={canScrollBack && canScrollForward}
+    role="tablist"
+    use:trackMounted
+    use:horizontalWheelScroll={{ isolateScroll: overflow === 'scroll' }}
+    onscroll={(event) => updateScrollState(event.currentTarget)}>
+    {#each tabs as tab (tab.value)}
+      <DocumentTabItem tab={tab} active={isActive(tab)} closable={isClosable(tab)} on={{ select: on?.change, close: on?.close, keydown: handleKeydown }} />
+    {/each}
+  </div>
+  {#if canScrollForward}
+    <button type="button" class="document-tabs__scroll-btn document-tabs__scroll-btn--forward" onclick={scrollForward} aria-label={localization.scrollForward}>
+      <Icon src={IconChevronRight} size="sm" />
+    </button>
+  {/if}
+</div>
+
+<!--
+@component
+DocumentTabs — browser-style tabs for an editor: the active tab is taller than its neighbours and
+sits flush on the container's bottom rule, so it reads as continuous with the panel below while the
+inactive ones stay behind that line. Each tab carries an optional icon, an unsaved-changes dot, a
+`tone` for a tab of a different kind (a live preview), and its own `closable` opt-out. A closable or
+dirty tab reserves the trailing slot permanently: the dot sits there at rest, the close button takes
+its place on hover, and a tab's width never depends on which of them is showing. Arrow keys / Home /
+End move between tabs (roving tabindex), Delete closes the focused one.
+
+`overflow="scroll"` gives the strip its own scroll container with edge fades, chevrons and
+wheel-to-scroll. Leave it `'visible'` where the container already scrolls the strip — two nested
+scrollers fight each other.
+
+The active tab dips `--sc-kit--document-tabs--baseline-overlap` below the strip to cover the bottom
+rule of the bar it sits in. A container that clips (any `overflow` other than `visible`) has to
+leave that last pixel inside its own clip region, or the overlap is cut off.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--document-tabs--height` | Inactive tab height | `29px` |
+| `--sc-kit--document-tabs--height--active` | Active tab height | `32px` |
+| `--sc-kit--document-tabs--padding-inline` | Tab horizontal padding — the same in both states, so activating a tab shifts nothing sideways | `10px` |
+| `--sc-kit--document-tabs--min-width` | Minimum tab width | `112px` |
+| `--sc-kit--document-tabs--max-width` | Maximum tab width — the label ellipsizes past it | `200px` |
+| `--sc-kit--document-tabs--gap` | Gap between tabs | `1px` |
+| `--sc-kit--document-tabs--tab--gap` | Gap between a tab's icon, label and trailing slot | `8px` |
+| `--sc-kit--document-tabs--radius` | Top corner radius | `--sc-kit--radius--sm` |
+| `--sc-kit--document-tabs--border-width` | Tab border width | `1px` |
+| `--sc-kit--document-tabs--border-color` | Tab border color | `--sc-kit--color--border` |
+| `--sc-kit--document-tabs--baseline-overlap` | How far the active tab dips below the strip to cover its container's bottom rule | `1px` |
+| `--sc-kit--document-tabs--background` | Inactive tab background | `--sc-kit--color--bg--app` |
+| `--sc-kit--document-tabs--background--active` | Active tab background — matches the pane below | `--sc-kit--color--bg--panel` |
+| `--sc-kit--document-tabs--background--hover` | Inactive tab hover background | `--sc-kit--color--bg--hover` |
+| `--sc-kit--document-tabs--color` | Inactive tab label color | `--sc-kit--color--text--secondary` |
+| `--sc-kit--document-tabs--color--active` | Active tab label color | `--sc-kit--color--text--primary` |
+| `--sc-kit--document-tabs--color--hover` | Inactive tab hover label color | `--sc-kit--color--text--primary` |
+| `--sc-kit--document-tabs--color--disabled` | Disabled tab label color | `--sc-kit--color--text--muted` |
+| `--sc-kit--document-tabs--font-size` | Label font size | `--sc-kit--font-size--sm` |
+| `--sc-kit--document-tabs--font-weight` | Label font weight | `--sc-kit--font-weight--regular` |
+| `--sc-kit--document-tabs--scroll-btn--background` | Fade behind the overflow chevrons | `--sc-kit--color--bg--panel` |
+-->
+
+<style>.document-tabs {
+  --_document-tabs--gap: var(--sc-kit--document-tabs--gap, 1px);
+  --_document-tabs--baseline-overlap: var(--sc-kit--document-tabs--baseline-overlap, 1px);
+  --_document-tabs--scroll-btn-background: var(--sc-kit--document-tabs--scroll-btn--background, var(--sc-kit--color--bg--panel));
+  position: relative;
+  display: flex;
+  align-self: stretch;
+  align-items: flex-end;
+  min-inline-size: 0;
+  margin-block-end: calc(-1 * var(--_document-tabs--baseline-overlap));
+}
+.document-tabs:hover {
+  --_scroll-btn-opacity: 1;
+}
+.document-tabs__track {
+  --_mask-size: 1.5rem;
+  display: flex;
+  align-items: flex-end;
+  gap: var(--_document-tabs--gap);
+  min-inline-size: 0;
+}
+.document-tabs__track--scrollable {
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.document-tabs__track--scrollable::-webkit-scrollbar {
+  display: none;
+}
+.document-tabs__track--mask-back {
+  mask-image: linear-gradient(to right, transparent 0%, black var(--_mask-size), black 100%);
+}
+.document-tabs__track--mask-forward {
+  mask-image: linear-gradient(to right, black 0%, black calc(100% - var(--_mask-size)), transparent 100%);
+}
+.document-tabs__track--mask-both {
+  mask-image: linear-gradient(to right, transparent 0%, black var(--_mask-size), black calc(100% - var(--_mask-size)), transparent 100%);
+}
+.document-tabs__scroll-btn {
+  position: absolute;
+  inset-block: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline: 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);
+}
+.document-tabs__scroll-btn:hover {
+  color: var(--sc-kit--color--text--primary);
+}
+.document-tabs__scroll-btn:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: -2px;
+  opacity: 1;
+}
+.document-tabs__scroll-btn--back {
+  inset-inline-start: 0;
+  padding-inline-end: 0.625rem;
+  background: linear-gradient(to right, var(--_document-tabs--scroll-btn-background) 60%, transparent);
+}
+.document-tabs__scroll-btn--forward {
+  inset-inline-end: 0;
+  padding-inline-start: 0.625rem;
+  background: linear-gradient(to left, var(--_document-tabs--scroll-btn-background) 60%, transparent);
+}</style>