@streamscloud/kit 0.85.1 → 0.87.0

package/dist/styles/reset.css

@@ -123,20 +123,27 @@ textarea {
   resize: vertical;
   --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+  --_cross-browser-scrollbar--gutter: 0px;
 }
-textarea::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-textarea::-webkit-scrollbar-track {
-  background: var(--_cross-browser-scrollbar--track-color);
-  border-radius: 100vw;
-}
-textarea::-webkit-scrollbar-thumb {
-  background: var(--_cross-browser-scrollbar--thumb-color);
-  border-radius: 100vw;
+@supports selector(::-webkit-scrollbar) {
+  textarea {
+    scrollbar-color: auto;
+    scrollbar-width: auto;
+  }
+  textarea::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  textarea::-webkit-scrollbar-track {
+    background: var(--_cross-browser-scrollbar--track-color);
+    border-radius: 100vw;
+  }
+  textarea::-webkit-scrollbar-thumb {
+    background: var(--_cross-browser-scrollbar--thumb-color);
+    border-radius: 100vw;
+  }
 }
-@supports (scrollbar-color: transparent transparent) {
+@supports not selector(::-webkit-scrollbar) {
   textarea {
     scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
     scrollbar-width: thin;

package/dist/ui/ai-panel/cmp.ai-panel.svelte

@@ -69,6 +69,33 @@ layout's concern. User-facing copy (placeholder, Generate label) is consumer-sup
   background: var(--_ai-panel--surface);
   border-radius: var(--_ai-panel--surface-radius);
   overflow-y: auto;
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+  --_cross-browser-scrollbar--gutter: 0px;
+}
+@supports selector(::-webkit-scrollbar) {
+  .ai-panel__body {
+    scrollbar-color: auto;
+    scrollbar-width: auto;
+  }
+  .ai-panel__body::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  .ai-panel__body::-webkit-scrollbar-track {
+    background: var(--_cross-browser-scrollbar--track-color);
+    border-radius: 100vw;
+  }
+  .ai-panel__body::-webkit-scrollbar-thumb {
+    background: var(--_cross-browser-scrollbar--thumb-color);
+    border-radius: 100vw;
+  }
+}
+@supports not selector(::-webkit-scrollbar) {
+  .ai-panel__body {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
 }
 .ai-panel__composer {
   position: relative;

package/dist/ui/cropper/image-editor-dialog/cmp.image-editor-dialog.svelte

@@ -1,8 +1,10 @@
-<script lang="ts">import { FileWithBlobDataHelper } from '../../../core/files';
+<script lang="ts">import { FileHelper } from '../../../core/files';
 import { Dialog, DialogButton, DialogCancelButton } from '../../dialog';
 import { Toastr } from '../../toast';
 import { ImgCropper, ImgCropperToolbar, ImgCropperView } from '../img-cropper';
 import { ImageEditorDialogLocalization } from './image-editor-dialog-localization';
+import { default as mime } from 'mime';
+import { nanoid } from 'nanoid';
 import { untrack } from 'svelte';
 const { controller, data } = $props();
 const loc = new ImageEditorDialogLocalization();
@@ -12,22 +14,16 @@ const cropper = untrack(() => new ImgCropper({
     fillColor: data.fillColor,
     tools: data.tools
 }));
-const url = $derived(data.url);
 const save = async () => {
     try {
-        const result = await cropper.save();
-        // Closed mid-save: destroy() already ran, and a file made now would leak its blob URL.
-        if (!cropper.ready) {
-            return;
-        }
+        const result = await cropper.save(data.resize);
         if (!result) {
             Toastr.error(loc.saveError);
             return;
         }
-        const croppedFile = Object.assign(FileWithBlobDataHelper.fromBlob(result.blob), {
-            width: result.width,
-            height: result.height
-        });
+        const baseName = data.fileName ? FileHelper.omitFileExtension(data.fileName) : nanoid(15);
+        const file = FileHelper.blobToFile(result.blob, `${baseName}.${mime.getExtension(result.blob.type)}`);
+        const croppedFile = Object.assign(file, { width: result.width, height: result.height });
         controller.ok({ croppedFile, selectedRatio: cropper.aspectRatio });
     }
     catch {
@@ -50,7 +46,7 @@ $effect(() => untrack(() => {
     {/snippet}
     {#snippet bodySection()}
       <div class="image-editor-dialog__workspace">
-        <ImgCropperView src={url} cropper={cropper}>
+        <ImgCropperView src={data.url} cropper={cropper}>
           {#snippet toolbar()}
             <ImgCropperToolbar cropper={cropper} />
           {/snippet}

package/dist/ui/cropper/image-editor-dialog/crop-and-resize.d.ts

@@ -1,5 +1,5 @@
-import type { FileWithBlobUrl } from '../../../core/files';
-import type { ImageEditorDynamicAspectRatio, ImageEditorTool } from './types';
+import { type ResizeLimits } from '../../../core/files';
+import type { CroppedFile, ImageEditorDynamicAspectRatio, ImageEditorTool } from './types';
 export type CropAndResizeOptions = {
     /** Fixed aspect ratio, or dynamic selector, or omit to follow the picture's own. */
     aspectRatio?: number | ImageEditorDynamicAspectRatio;
@@ -7,20 +7,13 @@ export type CropAndResizeOptions = {
     mode?: 'contain' | 'cover';
     /** Fill color for whatever the picture doesn't cover — `contain` gaps, free position, its own transparency (transparent by default). */
     fillColor?: string;
-    /**
-     * After cropping, downscale to fit these limits. `max1` / `max2` are not tied to width /
-     * height — the longer side matches the larger limit. Pass `false` to disable resize.
-     * @default `{ max1: 1600, max2: 1000 }`
-     */
-    resize?: {
-        max1: number;
-        max2: number;
-    } | false;
+    /** Renders the cropped picture straight at a size that fits these limits; `false` keeps its natural resolution. @default DEFAULT_RESIZE_LIMITS (1600 / 1000) */
+    resize?: ResizeLimits | false;
     /** Actions that rework the picture itself (e.g. background removal), one toolbar button each. */
     tools?: ImageEditorTool[];
 };
 /**
- * Opens the kit's image editor dialog, lets the user crop, and (optionally) downscales the result before returning.
+ * Opens the kit's image editor dialog and returns the cropped picture, rendered at a size that fits `resize`.
  * Returns `null` when the user cancels the dialog.
  */
-export declare const cropAndResizeImage: (file: File, options?: CropAndResizeOptions) => Promise<FileWithBlobUrl | null>;
+export declare const cropAndResizeImage: (file: File, options?: CropAndResizeOptions) => Promise<CroppedFile | null>;

package/dist/ui/cropper/image-editor-dialog/crop-and-resize.js

@@ -1,8 +1,7 @@
-import { FileWithBlobDataHelper, resizeBlob } from '../../../core/files';
+import { DEFAULT_RESIZE_LIMITS } from '../../../core/files';
 import { openImageEditorDialog } from './open-image-editor-dialog';
-const DEFAULT_RESIZE_LIMITS = { max1: 1600, max2: 1000 };
 /**
- * Opens the kit's image editor dialog, lets the user crop, and (optionally) downscales the result before returning.
+ * Opens the kit's image editor dialog and returns the cropped picture, rendered at a size that fits `resize`.
  * Returns `null` when the user cancels the dialog.
  */
 export const cropAndResizeImage = async (file, options = {}) => {
@@ -10,25 +9,14 @@ export const cropAndResizeImage = async (file, options = {}) => {
     try {
         const result = await openImageEditorDialog({
             url: sourceUrl,
+            fileName: file.name,
             aspectRatio: options.aspectRatio,
             mode: options.mode,
             fillColor: options.fillColor,
-            tools: options.tools
+            tools: options.tools,
+            resize: options.resize === false ? undefined : (options.resize ?? DEFAULT_RESIZE_LIMITS)
         });
-        if (result.wasCanceled) {
-            return null;
-        }
-        const cropped = result.value.croppedFile;
-        if (options.resize === false) {
-            return cropped;
-        }
-        const limits = options.resize ?? DEFAULT_RESIZE_LIMITS;
-        const resizedBlob = await resizeBlob(cropped, limits);
-        if (resizedBlob === cropped) {
-            return cropped;
-        }
-        FileWithBlobDataHelper.dispose(cropped.blobUrl);
-        return FileWithBlobDataHelper.fromBlob(resizedBlob, { id: cropped.id });
+        return result.wasCanceled ? null : result.value.croppedFile;
     }
     finally {
         URL.revokeObjectURL(sourceUrl);

package/dist/ui/cropper/image-editor-dialog/open-image-editor-dialog.d.ts

@@ -18,8 +18,13 @@ import type { ImageEditorDialogOptions, ImageEditorDialogResult } from './types'
  * - `tools` — one toolbar button per tool; `run` gets the picture as shown — cropped and rotated, at its natural
  *   resolution — and its result replaces it (`null` leaves it as it is). Reset returns to the source.
  *
+ * ### Size
+ * - `resize` — the saved picture is rendered straight at a size that fits these limits (one encode, no upscale past
+ *   them). Omitted — its natural resolution.
+ *
  * ### Result
- * - `croppedFile` — `FileWithBlobUrl` with `width`/`height` at natural resolution.
+ * - `croppedFile` — a plain `File` with its `width`/`height` — natural resolution, or fitted to `resize` when given; no
+ *   object URL is created for it. Named after `fileName` with the saved picture's extension, or randomly without it.
  * - `selectedRatio` — the active aspect ratio at save time (`null` when following the picture's own).
  */
 export declare const openImageEditorDialog: (options: ImageEditorDialogOptions) => Promise<DialogResult<ImageEditorDialogResult>>;

package/dist/ui/cropper/image-editor-dialog/open-image-editor-dialog.js

@@ -18,8 +18,13 @@ import { default as ImageEditorDialog } from './cmp.image-editor-dialog.svelte';
  * - `tools` — one toolbar button per tool; `run` gets the picture as shown — cropped and rotated, at its natural
  *   resolution — and its result replaces it (`null` leaves it as it is). Reset returns to the source.
  *
+ * ### Size
+ * - `resize` — the saved picture is rendered straight at a size that fits these limits (one encode, no upscale past
+ *   them). Omitted — its natural resolution.
+ *
  * ### Result
- * - `croppedFile` — `FileWithBlobUrl` with `width`/`height` at natural resolution.
+ * - `croppedFile` — a plain `File` with its `width`/`height` — natural resolution, or fitted to `resize` when given; no
+ *   object URL is created for it. Named after `fileName` with the saved picture's extension, or randomly without it.
  * - `selectedRatio` — the active aspect ratio at save time (`null` when following the picture's own).
  */
 export const openImageEditorDialog = async (options) => {

package/dist/ui/cropper/image-editor-dialog/types.d.ts

@@ -1,4 +1,4 @@
-import type { FileWithBlobUrl } from '../../../core/files';
+import type { ResizeLimits, SizedFile } from '../../../core/files';
 export type ImageEditorDynamicAspectRatio = {
     initial: number;
     supported: number[];
@@ -23,17 +23,20 @@ export type ImageEditorTool = {
 export type ImageEditorDialogOptions = {
     /** The picture to edit — same-origin, a `blob:` / `data:` URL, or a server that sends CORS headers; anything else fails to load. */
     url: string;
+    /** Name of the saved file; its extension follows the saved picture's type. Omitted — a random name. */
+    fileName?: string;
+    /** Fill color for whatever the picture doesn't cover — `contain` gaps, free position, its own transparency (transparent by default). */
     fillColor?: string;
     /** @default 'cover' */
     mode?: 'contain' | 'cover';
+    /** Fixed aspect ratio, or dynamic selector, or omit to follow the picture's own. */
     aspectRatio?: number | ImageEditorDynamicAspectRatio;
     /** Actions that rework the picture itself (e.g. background removal), one toolbar button each. */
     tools?: ImageEditorTool[];
+    /** Renders the saved picture straight at a size that fits these limits. Omitted — its natural resolution. */
+    resize?: ResizeLimits;
 };
-export type CroppedFile = FileWithBlobUrl & {
-    width: number;
-    height: number;
-};
+export type CroppedFile = SizedFile;
 export type ImageEditorDialogResult = {
     croppedFile: CroppedFile;
     selectedRatio: number | null;

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

@@ -1,3 +1,4 @@
+import { type ResizeLimits } from '../../../core/files';
 import { type FrameFitMode, type Point, type Rect, type Size } from './frame-geometry';
 export type CropperMode = FrameFitMode;
 export type { Point, Rect };
@@ -135,8 +136,11 @@ export declare class ImgCropper {
      * along and keeps what's inside it; a fixed-aspect frame can't turn, so the picture is laid out afresh instead. */
     rotate: (direction: 1 | -1) => void;
     reset: () => void;
-    /** Renders the frame to an image, applying a pending selection first; `null` when there's nothing to render or the browser can't. */
-    save: () => Promise<ImgCropperSaveResult | null>;
+    /**
+     * Renders the frame to an image, applying a pending selection first, downscaled to fit `limits` when given;
+     * `null` when there's nothing to render or the browser can't.
+     */
+    save: (limits?: ResizeLimits) => Promise<ImgCropperSaveResult | null>;
     /**
      * Where the whole turned source lands when the picture is drawn into `picture` — its center and its size on each axis,
      * before `rotation` swaps them. The view and `save()` both place the source through this, so they can't drift apart.

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

@@ -1,3 +1,4 @@
+import { fitSize, toPixelSize } from '../../../core/files';
 import { ColorHelper, Utils } from '../../../core/utils';
 import { alignBox, boxAtZoom, boxTurnedWithFrame, clampBox, containBox, containZoom, coverBox, fitFrame, MAX_FRAME_ZOOM, MIN_FREE_ZOOM, moveBox, scaleBox, selectionFromDrag, shiftSelection, zoomOf } from './frame-geometry';
 import { Picture } from './picture';
@@ -403,14 +404,17 @@ export class ImgCropper {
         this.aspectRatio = this._initialAspectRatio;
         this.layout();
     };
-    /** Renders the frame to an image, applying a pending selection first; `null` when there's nothing to render or the browser can't. */
-    save = async () => {
+    /**
+     * Renders the frame to an image, applying a pending selection first, downscaled to fit `limits` when given;
+     * `null` when there's nothing to render or the browser can't.
+     */
+    save = async (limits) => {
         if (this.hasSelection) {
             this.applyCrop();
         }
         this._processing = true;
         try {
-            const rendered = this._render();
+            const rendered = this._render(limits);
             if (!rendered) {
                 return null;
             }
@@ -441,7 +445,7 @@ export class ImgCropper {
             size: { w: turned.w * perX, h: turned.h * perY }
         };
     };
-    _render = () => {
+    _render = (limits) => {
         const source = this._current;
         const { box, frame, croppedSize } = this;
         if (this.failed || !source || !box || !frame || !croppedSize) {
@@ -450,13 +454,16 @@ export class ImgCropper {
         const nativeScale = croppedSize.w / box.w;
         const nativeArea = frame.w * frame.h * nativeScale * nativeScale;
         const areaLimit = Math.min(croppedSize.w * croppedSize.h * MAX_OUTPUT_AREA_UPSCALE, MAX_OUTPUT_PIXELS);
-        const scale = nativeArea > areaLimit ? nativeScale * Math.sqrt(areaLimit / nativeArea) : nativeScale;
-        const width = Math.max(1, Math.floor(frame.w * scale));
-        const height = Math.max(1, Math.floor(frame.h * scale));
-        const left = Math.round(box.x * scale);
-        const top = Math.round(box.y * scale);
-        const right = Math.round((box.x + box.w) * scale);
-        const bottom = Math.round((box.y + box.h) * scale);
+        const cappedScale = nativeArea > areaLimit ? nativeScale * Math.sqrt(areaLimit / nativeArea) : nativeScale;
+        const cappedSize = { width: frame.w * cappedScale, height: frame.h * cappedScale };
+        const { width, height } = limits ? fitSize(cappedSize, limits) : toPixelSize(cappedSize);
+        // Per axis from the whole-pixel canvas: one shared scale rounds a frame-wide box a pixel past the canvas edge.
+        const scaleX = width / frame.w;
+        const scaleY = height / frame.h;
+        const left = Math.round(box.x * scaleX);
+        const top = Math.round(box.y * scaleY);
+        const right = Math.round((box.x + box.w) * scaleX);
+        const bottom = Math.round((box.y + box.h) * scaleY);
         const canvas = document.createElement('canvas');
         canvas.width = width;
         canvas.height = height;

package/dist/ui/date-picker/cmp.date-time-picker.svelte

@@ -2,10 +2,47 @@
 import TimePicker from './cmp.time-picker.svelte';
 const { value, size = 'md', datePlaceholder = '', min, step = 30, on } = $props();
 const DEFAULT_TIME = '12:00';
+const MINUTES_PER_DAY = 24 * 60;
+const AFTER_LAST_SLOT = '24:00';
 const pad = (n) => n.toString().padStart(2, '0');
 const toTimeValue = (date) => `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+const minutesToTimeValue = (minutes) => `${pad(Math.floor(minutes / 60))}:${pad(minutes % 60)}`;
+const isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 const currentDate = $derived(value ? new Date(value) : null);
 const timeValue = $derived(currentDate ? toTimeValue(currentDate) : DEFAULT_TIME);
+const minDate = $derived.by(() => {
+    if (min === undefined) {
+        return null;
+    }
+    const date = new Date(min);
+    return Number.isNaN(date.getTime()) ? null : date;
+});
+const minSlotMinutes = $derived.by(() => {
+    if (!minDate) {
+        return null;
+    }
+    const elapsed = minDate.getHours() * 60 + minDate.getMinutes() + minDate.getSeconds() / 60 + minDate.getMilliseconds() / 60_000;
+    const slot = Math.ceil(elapsed / step) * step;
+    return slot < MINUTES_PER_DAY ? slot : null;
+});
+const firstAllowedDate = $derived.by(() => {
+    if (!minDate) {
+        return null;
+    }
+    if (minSlotMinutes === null) {
+        return new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate() + 1);
+    }
+    return new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate(), Math.floor(minSlotMinutes / 60), minSlotMinutes % 60);
+});
+const timeMin = $derived.by(() => {
+    if (!currentDate || !firstAllowedDate) {
+        return undefined;
+    }
+    if (isSameDay(currentDate, firstAllowedDate)) {
+        return minutesToTimeValue(firstAllowedDate.getHours() * 60 + firstAllowedDate.getMinutes());
+    }
+    return currentDate < firstAllowedDate ? AFTER_LAST_SLOT : undefined;
+});
 const onDateChange = (next) => {
     if (!next) {
         on?.change?.(null);
@@ -18,6 +55,9 @@ const onDateChange = (next) => {
         combined.setHours(hours, minutes, 0, 0);
     }
     combined.setFullYear(picked.getFullYear(), picked.getMonth(), picked.getDate());
+    if (minDate && minSlotMinutes !== null && combined < minDate) {
+        combined.setHours(Math.floor(minSlotMinutes / 60), minSlotMinutes % 60, 0, 0);
+    }
     on?.change?.(combined.toISOString());
 };
 const onTimeChange = (next) => {
@@ -31,35 +71,54 @@ const onTimeChange = (next) => {
 };
 </script>
 
-<div class="date-time" class:date-time--date-only={!currentDate}>
-  <DatePicker clearable size={size} value={value} placeholder={datePlaceholder} min={min} on={{ change: onDateChange }} />
+<div class="date-time date-time--{size}" class:date-time--date-only={!currentDate}>
+  <DatePicker clearable size={size} value={value} placeholder={datePlaceholder} min={firstAllowedDate ?? undefined} on={{ change: onDateChange }} />
   {#if currentDate}
-    <TimePicker clearable={false} size={size} step={step} value={timeValue} on={{ change: onTimeChange }} />
+    <TimePicker clearable={false} size={size} step={step} min={timeMin} value={timeValue} on={{ change: onTimeChange }} />
   {/if}
 </div>
 
 <!--
 @component
-DateTimePicker — composes `DatePicker` + `TimePicker` into one ISO date-time field. The time row appears
-only once a date is picked (defaulting to `12:00`); `size` and `step` thread down to both controls.
-Emits an ISO 8601 string — or `null` when the date is cleared — via `on.change`.
+DateTimePicker — composes `DatePicker` + `TimePicker` into one ISO 8601 date-time field whose time row appears
+once a date is picked (defaulting to `12:00`). Emits the ISO string — or `null` when the date is cleared — via `on.change`.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--date-time-picker--time-width` | Width of the time column | `6rem` |
+| `--sc-kit--date-time-picker--time-width` | Width of the time column | per size — `sm` 5.75rem, `md` 6.25rem, `lg` 6.75rem (+0.75rem without `::-webkit-scrollbar`, e.g. Firefox) |
 | `--sc-kit--date-time-picker--gap` | Gap between the date and time fields | `var(--sc-kit--space--2)` |
 -->
 
 <style>.date-time {
-  --_dtp--time-width: var(--sc-kit--date-time-picker--time-width, 6rem);
+  --_dtp--scrollbar-allowance: 0px;
+  --_dtp--time-width: var(
+    --sc-kit--date-time-picker--time-width,
+    calc(var(--_dtp--size-time-width, 6.25rem) + var(--_dtp--scrollbar-allowance))
+  );
   --_dtp--gap: var(--sc-kit--date-time-picker--gap, var(--sc-kit--space--2));
+}
+@supports not selector(::-webkit-scrollbar) {
+  .date-time {
+    --_dtp--scrollbar-allowance: 12px;
+  }
+}
+.date-time {
   display: grid;
   grid-template-columns: minmax(0, 1fr) var(--_dtp--time-width);
   gap: var(--_dtp--gap);
   width: 100%;
   max-width: 100%;
 }
+.date-time--sm {
+  --_dtp--size-time-width: 5.75rem;
+}
+.date-time--md {
+  --_dtp--size-time-width: 6.25rem;
+}
+.date-time--lg {
+  --_dtp--size-time-width: 6.75rem;
+}
 .date-time--date-only {
   grid-template-columns: minmax(0, 1fr);
 }</style>

package/dist/ui/date-picker/cmp.date-time-picker.svelte.d.ts

@@ -4,7 +4,11 @@ type Props = {
     /** @default 'md' */
     size?: 'sm' | 'md' | 'lg';
     datePlaceholder?: string;
-    /** Earliest selectable date (inclusive). */
+    /**
+     * Earliest selectable date-time (inclusive). On its day only the `step` slots at or after it are offered and an
+     * earlier time is raised to the first of them; a day with no slot left is not selectable. A `value` before the first
+     * allowed day still renders, but its time list is empty — only picking an allowed date changes it.
+     */
     min?: LikeDate;
     /** Minute interval for the time list. @default 30 */
     step?: number;
@@ -13,14 +17,13 @@ type Props = {
     };
 };
 /**
- * DateTimePicker — composes `DatePicker` + `TimePicker` into one ISO date-time field. The time row appears
- * only once a date is picked (defaulting to `12:00`); `size` and `step` thread down to both controls.
- * Emits an ISO 8601 string — or `null` when the date is cleared — via `on.change`.
+ * DateTimePicker — composes `DatePicker` + `TimePicker` into one ISO 8601 date-time field whose time row appears
+ * once a date is picked (defaulting to `12:00`). Emits the ISO string — or `null` when the date is cleared — via `on.change`.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--date-time-picker--time-width` | Width of the time column | `6rem` |
+ * | `--sc-kit--date-time-picker--time-width` | Width of the time column | per size — `sm` 5.75rem, `md` 6.25rem, `lg` 6.75rem (+0.75rem without `::-webkit-scrollbar`, e.g. Firefox) |
  * | `--sc-kit--date-time-picker--gap` | Gap between the date and time fields | `var(--sc-kit--space--2)` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;

package/dist/ui/date-picker/cmp.time-picker.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">import { Singleselect } from '../select';
-const { size = 'md', step = 30, placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, id, name, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, ...mode } = $props();
+const { size = 'md', step = 30, min, placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, id, name, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, ...mode } = $props();
 const MINUTES_PER_DAY = 24 * 60;
 const pad = (n) => n.toString().padStart(2, '0');
 const stepOptions = $derived.by(() => {
     const count = Math.max(1, Math.floor(MINUTES_PER_DAY / step));
-    return Array.from({ length: count }, (_, i) => {
+    const grid = Array.from({ length: count }, (_, i) => {
         const total = i * step;
         const label = `${pad(Math.floor(total / 60))}:${pad(total % 60)}`;
         return { label, value: label };
     });
+    return min ? grid.filter((option) => option.value >= min) : grid;
 });
 const options = $derived.by(() => {
     const current = mode.value;

package/dist/ui/date-picker/cmp.time-picker.svelte.d.ts

@@ -3,6 +3,8 @@ type BaseProps = {
     size?: 'sm' | 'md' | 'lg';
     /** Minute interval between generated options. @default 30 */
     step?: number;
+    /** Earliest selectable time (`'HH:mm'`, inclusive) — earlier grid slots are hidden; an earlier `value` still renders. */
+    min?: string;
     placeholder?: string;
     disabled?: boolean;
     /** Focusable, value visible, but selection cannot change. */

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

@@ -140,20 +140,27 @@ DialogContainer — wraps the native `<dialog>` element with sizing, positioning
   padding: var(--_dialog-container--padding);
   --_cross-browser-scrollbar--thumb-color: var(--sc-kit--color--border--strong);
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+  --_cross-browser-scrollbar--gutter: 0px;
 }
-.dialog-container::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.dialog-container::-webkit-scrollbar-track {
-  background: var(--_cross-browser-scrollbar--track-color);
-  border-radius: 100vw;
-}
-.dialog-container::-webkit-scrollbar-thumb {
-  background: var(--_cross-browser-scrollbar--thumb-color);
-  border-radius: 100vw;
+@supports selector(::-webkit-scrollbar) {
+  .dialog-container {
+    scrollbar-color: auto;
+    scrollbar-width: auto;
+  }
+  .dialog-container::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  .dialog-container::-webkit-scrollbar-track {
+    background: var(--_cross-browser-scrollbar--track-color);
+    border-radius: 100vw;
+  }
+  .dialog-container::-webkit-scrollbar-thumb {
+    background: var(--_cross-browser-scrollbar--thumb-color);
+    border-radius: 100vw;
+  }
 }
-@supports (scrollbar-color: transparent transparent) {
+@supports not selector(::-webkit-scrollbar) {
   .dialog-container {
     scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
     scrollbar-width: thin;

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

@@ -136,20 +136,27 @@ A structured dialog panel with header (title + close button), scrollable body, a
   padding: var(--_--dialog--body--padding-block) var(--_--dialog--body--padding-inline);
   --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+  --_cross-browser-scrollbar--gutter: 0px;
 }
-.dialog__body::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.dialog__body::-webkit-scrollbar-track {
-  background: var(--_cross-browser-scrollbar--track-color);
-  border-radius: 100vw;
-}
-.dialog__body::-webkit-scrollbar-thumb {
-  background: var(--_cross-browser-scrollbar--thumb-color);
-  border-radius: 100vw;
+@supports selector(::-webkit-scrollbar) {
+  .dialog__body {
+    scrollbar-color: auto;
+    scrollbar-width: auto;
+  }
+  .dialog__body::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  .dialog__body::-webkit-scrollbar-track {
+    background: var(--_cross-browser-scrollbar--track-color);
+    border-radius: 100vw;
+  }
+  .dialog__body::-webkit-scrollbar-thumb {
+    background: var(--_cross-browser-scrollbar--thumb-color);
+    border-radius: 100vw;
+  }
 }
-@supports (scrollbar-color: transparent transparent) {
+@supports not selector(::-webkit-scrollbar) {
   .dialog__body {
     scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
     scrollbar-width: thin;