@streamscloud/kit 0.86.0 → 0.88.0

package/dist/styles/_mixins.scss

@@ -82,14 +82,24 @@
   max-height: 100%;
 }
 
-@mixin scrollbar($thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563)), $track-color: var(--scrollbar--track-color, transparent)) {
+@mixin scrollbar(
+  $thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563)),
+  $track-color: var(--scrollbar--track-color, transparent),
+  $size: 6px,
+  $symmetric: null
+) {
   --_cross-browser-scrollbar--thumb-color: #{$thumb-color};
   --_cross-browser-scrollbar--track-color: #{$track-color};
 
-  @include _cross-browser-scrollbar;
+  @include _cross-browser-scrollbar($size, $symmetric);
 }
 
-@mixin scrollbar-on-hover($thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563)), $track-color: var(--scrollbar--track-color, transparent)) {
+@mixin scrollbar-on-hover(
+  $thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563)),
+  $track-color: var(--scrollbar--track-color, transparent),
+  $size: 6px,
+  $symmetric: null
+) {
   --_cross-browser-scrollbar--thumb-color: transparent;
   --_cross-browser-scrollbar--track-color: transparent;
 
@@ -98,29 +108,73 @@
     --_cross-browser-scrollbar--track-color: #{$track-color};
   }
 
-  @include _cross-browser-scrollbar;
+  @include _cross-browser-scrollbar($size, $symmetric);
 }
 
-@mixin _cross-browser-scrollbar {
-  &::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
+@mixin _cross-browser-scrollbar($size, $symmetric) {
+  --_cross-browser-scrollbar--gutter: 0px;
 
-  &::-webkit-scrollbar-track {
-    background: var(--_cross-browser-scrollbar--track-color);
-    border-radius: 100vw;
-  }
+  // a non-auto scrollbar-color / scrollbar-width (own or inherited) makes WebKit / Blink drop the 6px pseudo-element bar for the wider platform one
+  @include when-scrollbar-sizable {
+    scrollbar-color: auto;
+    scrollbar-width: auto;
+
+    &::-webkit-scrollbar {
+      width: $size;
+      height: $size;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: var(--_cross-browser-scrollbar--track-color);
+      border-radius: 100vw;
+    }
 
-  &::-webkit-scrollbar-thumb {
-    background: var(--_cross-browser-scrollbar--thumb-color);
-    border-radius: 100vw;
+    &::-webkit-scrollbar-thumb {
+      background: var(--_cross-browser-scrollbar--thumb-color);
+      border-radius: 100vw;
+    }
   }
 
-  @supports (scrollbar-color: transparent transparent) {
+  @include when-scrollbar-unsizable {
     scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
     scrollbar-width: thin;
   }
+
+  // not scrollbar-gutter: both-edges here — Safari reserves both gutters on the end side
+  @if $symmetric {
+    @include when-scrollbar-sizable {
+      --_cross-browser-scrollbar--gutter: #{$size};
+
+      overflow-y: scroll;
+    }
+  }
+
+  @if $symmetric == all {
+    @include when-scrollbar-unsizable {
+      scrollbar-gutter: stable both-edges;
+    }
+  }
+}
+
+@mixin when-scrollbar-sizable {
+  @supports selector(::-webkit-scrollbar) {
+    @content;
+  }
+}
+
+// room to reserve for the platform scrollbar where its width can't be set (~11px thin bar + 1px); never subtract it — overlay scrollbars take 0
+$unsizable-scrollbar-allowance: 12px;
+
+// no ::-webkit-scrollbar (Firefox): the platform bar can't shrink into a panel padding, so a box sized for the 4–6px bar clips its content unless it adds the allowance here
+@mixin when-scrollbar-unsizable {
+  @supports not selector(::-webkit-scrollbar) {
+    @content;
+  }
+}
+
+@mixin scrollbar-padding-inline($padding) {
+  padding-inline-start: max(#{$padding}, var(--_cross-browser-scrollbar--gutter, 0px));
+  padding-inline-end: max(0px, calc(#{$padding} - var(--_cross-browser-scrollbar--gutter, 0px)));
 }
 
 @mixin fade-in-animation($duration: 5s) {

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/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;

package/dist/ui/dialog/layout/cmp.stepper-dialog.svelte

@@ -174,6 +174,33 @@ Header, body and sidebar block padding follow `Dialog`'s header / body padding v
   border-inline-end: 1px solid var(--sc-kit--color--border);
   overflow-y: auto;
   min-block-size: 0;
+  --_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) {
+  .stepper-dialog__sidebar {
+    scrollbar-color: auto;
+    scrollbar-width: auto;
+  }
+  .stepper-dialog__sidebar::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  .stepper-dialog__sidebar::-webkit-scrollbar-track {
+    background: var(--_cross-browser-scrollbar--track-color);
+    border-radius: 100vw;
+  }
+  .stepper-dialog__sidebar::-webkit-scrollbar-thumb {
+    background: var(--_cross-browser-scrollbar--thumb-color);
+    border-radius: 100vw;
+  }
+}
+@supports not selector(::-webkit-scrollbar) {
+  .stepper-dialog__sidebar {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
 }
 @media screen and (max-width: 768px) {
   .stepper-dialog__sidebar {
@@ -194,4 +221,31 @@ Header, body and sidebar block padding follow `Dialog`'s header / body padding v
   min-block-size: 0;
   overflow-y: auto;
   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;
+}
+@supports selector(::-webkit-scrollbar) {
+  .stepper-dialog__body {
+    scrollbar-color: auto;
+    scrollbar-width: auto;
+  }
+  .stepper-dialog__body::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  .stepper-dialog__body::-webkit-scrollbar-track {
+    background: var(--_cross-browser-scrollbar--track-color);
+    border-radius: 100vw;
+  }
+  .stepper-dialog__body::-webkit-scrollbar-thumb {
+    background: var(--_cross-browser-scrollbar--thumb-color);
+    border-radius: 100vw;
+  }
+}
+@supports not selector(::-webkit-scrollbar) {
+  .stepper-dialog__body {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
 }</style>

package/dist/ui/emoji-picker/cmp.emoji-panel.svelte

@@ -148,20 +148,27 @@ can be embedded directly by input components.
   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;
 }
-.emoji-panel__categories::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.emoji-panel__categories::-webkit-scrollbar-track {
-  background: var(--_cross-browser-scrollbar--track-color);
-  border-radius: 100vw;
-}
-.emoji-panel__categories::-webkit-scrollbar-thumb {
-  background: var(--_cross-browser-scrollbar--thumb-color);
-  border-radius: 100vw;
+@supports selector(::-webkit-scrollbar) {
+  .emoji-panel__categories {
+    scrollbar-color: auto;
+    scrollbar-width: auto;
+  }
+  .emoji-panel__categories::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  .emoji-panel__categories::-webkit-scrollbar-track {
+    background: var(--_cross-browser-scrollbar--track-color);
+    border-radius: 100vw;
+  }
+  .emoji-panel__categories::-webkit-scrollbar-thumb {
+    background: var(--_cross-browser-scrollbar--thumb-color);
+    border-radius: 100vw;
+  }
 }
-@supports (scrollbar-color: transparent transparent) {
+@supports not selector(::-webkit-scrollbar) {
   .emoji-panel__categories {
     scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
     scrollbar-width: thin;

package/dist/ui/file-uploader/cmp.upload-progress-toaster.svelte

@@ -112,19 +112,28 @@ at the store's default concurrency of 20 can never push the toast off screen.
   --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
 }
-.upload-progress-toaster__files::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.upload-progress-toaster__files::-webkit-scrollbar-track {
-  background: var(--_cross-browser-scrollbar--track-color);
-  border-radius: 100vw;
+.upload-progress-toaster__files {
+  --_cross-browser-scrollbar--gutter: 0px;
 }
-.upload-progress-toaster__files::-webkit-scrollbar-thumb {
-  background: var(--_cross-browser-scrollbar--thumb-color);
-  border-radius: 100vw;
+@supports selector(::-webkit-scrollbar) {
+  .upload-progress-toaster__files {
+    scrollbar-color: auto;
+    scrollbar-width: auto;
+  }
+  .upload-progress-toaster__files::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  .upload-progress-toaster__files::-webkit-scrollbar-track {
+    background: var(--_cross-browser-scrollbar--track-color);
+    border-radius: 100vw;
+  }
+  .upload-progress-toaster__files::-webkit-scrollbar-thumb {
+    background: var(--_cross-browser-scrollbar--thumb-color);
+    border-radius: 100vw;
+  }
 }
-@supports (scrollbar-color: transparent transparent) {
+@supports not selector(::-webkit-scrollbar) {
   .upload-progress-toaster__files {
     scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
     scrollbar-width: thin;

package/dist/ui/grouped-sidebar/cmp.grouped-sidebar.svelte

@@ -111,19 +111,28 @@ dummy-placeholder + post-init bind needed:
   --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
 }
-.grouped-sidebar__sections::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.grouped-sidebar__sections::-webkit-scrollbar-track {
-  background: var(--_cross-browser-scrollbar--track-color);
-  border-radius: 100vw;
+.grouped-sidebar__sections {
+  --_cross-browser-scrollbar--gutter: 0px;
 }
-.grouped-sidebar__sections::-webkit-scrollbar-thumb {
-  background: var(--_cross-browser-scrollbar--thumb-color);
-  border-radius: 100vw;
+@supports selector(::-webkit-scrollbar) {
+  .grouped-sidebar__sections {
+    scrollbar-color: auto;
+    scrollbar-width: auto;
+  }
+  .grouped-sidebar__sections::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  .grouped-sidebar__sections::-webkit-scrollbar-track {
+    background: var(--_cross-browser-scrollbar--track-color);
+    border-radius: 100vw;
+  }
+  .grouped-sidebar__sections::-webkit-scrollbar-thumb {
+    background: var(--_cross-browser-scrollbar--thumb-color);
+    border-radius: 100vw;
+  }
 }
-@supports (scrollbar-color: transparent transparent) {
+@supports not selector(::-webkit-scrollbar) {
   .grouped-sidebar__sections {
     scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
     scrollbar-width: thin;