@streamscloud/kit 0.86.0 → 0.87.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;

package/dist/ui/navigation/cmp.nav-menu.svelte

@@ -70,19 +70,28 @@ routing, or feature gating. Compose with `NavMenuGroup`, `NavMenuHeader`, `NavMe
   --_cross-browser-scrollbar--thumb-color: var(--sc-kit--color--border--strong);
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
 }
-.nav-menu__body::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.nav-menu__body::-webkit-scrollbar-track {
-  background: var(--_cross-browser-scrollbar--track-color);
-  border-radius: 100vw;
+.nav-menu__body {
+  --_cross-browser-scrollbar--gutter: 0px;
 }
-.nav-menu__body::-webkit-scrollbar-thumb {
-  background: var(--_cross-browser-scrollbar--thumb-color);
-  border-radius: 100vw;
+@supports selector(::-webkit-scrollbar) {
+  .nav-menu__body {
+    scrollbar-color: auto;
+    scrollbar-width: auto;
+  }
+  .nav-menu__body::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  .nav-menu__body::-webkit-scrollbar-track {
+    background: var(--_cross-browser-scrollbar--track-color);
+    border-radius: 100vw;
+  }
+  .nav-menu__body::-webkit-scrollbar-thumb {
+    background: var(--_cross-browser-scrollbar--thumb-color);
+    border-radius: 100vw;
+  }
 }
-@supports (scrollbar-color: transparent transparent) {
+@supports not selector(::-webkit-scrollbar) {
   .nav-menu__body {
     scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
     scrollbar-width: thin;

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

@@ -135,20 +135,27 @@ A loading `PagePanel` inside a loading layout draws its own spinner and overlay
   overflow-y: var(--_page-layout--body-overflow, auto);
   --_cross-browser-scrollbar--thumb-color: var(--sc-kit--color--border);
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+  --_cross-browser-scrollbar--gutter: 0px;
 }
-.page-layout__body::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.page-layout__body::-webkit-scrollbar-track {
-  background: var(--_cross-browser-scrollbar--track-color);
-  border-radius: 100vw;
-}
-.page-layout__body::-webkit-scrollbar-thumb {
-  background: var(--_cross-browser-scrollbar--thumb-color);
-  border-radius: 100vw;
+@supports selector(::-webkit-scrollbar) {
+  .page-layout__body {
+    scrollbar-color: auto;
+    scrollbar-width: auto;
+  }
+  .page-layout__body::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  .page-layout__body::-webkit-scrollbar-track {
+    background: var(--_cross-browser-scrollbar--track-color);
+    border-radius: 100vw;
+  }
+  .page-layout__body::-webkit-scrollbar-thumb {
+    background: var(--_cross-browser-scrollbar--thumb-color);
+    border-radius: 100vw;
+  }
 }
-@supports (scrollbar-color: transparent transparent) {
+@supports not selector(::-webkit-scrollbar) {
   .page-layout__body {
     scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
     scrollbar-width: thin;
@@ -158,20 +165,27 @@ A loading `PagePanel` inside a loading layout draws its own spinner and overlay
   overflow-y: auto;
   --_cross-browser-scrollbar--thumb-color: var(--sc-kit--color--border);
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+  --_cross-browser-scrollbar--gutter: 0px;
 }
-.page-layout--scrollable::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.page-layout--scrollable::-webkit-scrollbar-track {
-  background: var(--_cross-browser-scrollbar--track-color);
-  border-radius: 100vw;
-}
-.page-layout--scrollable::-webkit-scrollbar-thumb {
-  background: var(--_cross-browser-scrollbar--thumb-color);
-  border-radius: 100vw;
+@supports selector(::-webkit-scrollbar) {
+  .page-layout--scrollable {
+    scrollbar-color: auto;
+    scrollbar-width: auto;
+  }
+  .page-layout--scrollable::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  .page-layout--scrollable::-webkit-scrollbar-track {
+    background: var(--_cross-browser-scrollbar--track-color);
+    border-radius: 100vw;
+  }
+  .page-layout--scrollable::-webkit-scrollbar-thumb {
+    background: var(--_cross-browser-scrollbar--thumb-color);
+    border-radius: 100vw;
+  }
 }
-@supports (scrollbar-color: transparent transparent) {
+@supports not selector(::-webkit-scrollbar) {
   .page-layout--scrollable {
     scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
     scrollbar-width: thin;

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

@@ -145,19 +145,28 @@ line instead of doubling it. The collapse button stays put outside that track.
   --_cross-browser-scrollbar--thumb-color: var(--sc-kit--color--border--strong);
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
 }
-.page-panel-sidebars__sidebar::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.page-panel-sidebars__sidebar::-webkit-scrollbar-track {
-  background: var(--_cross-browser-scrollbar--track-color);
-  border-radius: 100vw;
+.page-panel-sidebars__sidebar {
+  --_cross-browser-scrollbar--gutter: 0px;
 }
-.page-panel-sidebars__sidebar::-webkit-scrollbar-thumb {
-  background: var(--_cross-browser-scrollbar--thumb-color);
-  border-radius: 100vw;
+@supports selector(::-webkit-scrollbar) {
+  .page-panel-sidebars__sidebar {
+    scrollbar-color: auto;
+    scrollbar-width: auto;
+  }
+  .page-panel-sidebars__sidebar::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  .page-panel-sidebars__sidebar::-webkit-scrollbar-track {
+    background: var(--_cross-browser-scrollbar--track-color);
+    border-radius: 100vw;
+  }
+  .page-panel-sidebars__sidebar::-webkit-scrollbar-thumb {
+    background: var(--_cross-browser-scrollbar--thumb-color);
+    border-radius: 100vw;
+  }
 }
-@supports (scrollbar-color: transparent transparent) {
+@supports not selector(::-webkit-scrollbar) {
   .page-panel-sidebars__sidebar {
     scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
     scrollbar-width: thin;
@@ -181,19 +190,28 @@ line instead of doubling it. The collapse button stays put outside that track.
   --_cross-browser-scrollbar--thumb-color: var(--sc-kit--color--border--strong);
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
 }
-.page-panel-sidebars__main::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.page-panel-sidebars__main::-webkit-scrollbar-track {
-  background: var(--_cross-browser-scrollbar--track-color);
-  border-radius: 100vw;
+.page-panel-sidebars__main {
+  --_cross-browser-scrollbar--gutter: 0px;
 }
-.page-panel-sidebars__main::-webkit-scrollbar-thumb {
-  background: var(--_cross-browser-scrollbar--thumb-color);
-  border-radius: 100vw;
+@supports selector(::-webkit-scrollbar) {
+  .page-panel-sidebars__main {
+    scrollbar-color: auto;
+    scrollbar-width: auto;
+  }
+  .page-panel-sidebars__main::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  .page-panel-sidebars__main::-webkit-scrollbar-track {
+    background: var(--_cross-browser-scrollbar--track-color);
+    border-radius: 100vw;
+  }
+  .page-panel-sidebars__main::-webkit-scrollbar-thumb {
+    background: var(--_cross-browser-scrollbar--thumb-color);
+    border-radius: 100vw;
+  }
 }
-@supports (scrollbar-color: transparent transparent) {
+@supports not selector(::-webkit-scrollbar) {
   .page-panel-sidebars__main {
     scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
     scrollbar-width: thin;

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

@@ -469,19 +469,28 @@ to min / max; Enter / Space toggle collapsed.
   --_cross-browser-scrollbar--thumb-color: var(--sc-kit--color--border--strong);
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
 }
-.page-panel__content::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.page-panel__content::-webkit-scrollbar-track {
-  background: var(--_cross-browser-scrollbar--track-color);
-  border-radius: 100vw;
+.page-panel__content {
+  --_cross-browser-scrollbar--gutter: 0px;
 }
-.page-panel__content::-webkit-scrollbar-thumb {
-  background: var(--_cross-browser-scrollbar--thumb-color);
-  border-radius: 100vw;
+@supports selector(::-webkit-scrollbar) {
+  .page-panel__content {
+    scrollbar-color: auto;
+    scrollbar-width: auto;
+  }
+  .page-panel__content::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  .page-panel__content::-webkit-scrollbar-track {
+    background: var(--_cross-browser-scrollbar--track-color);
+    border-radius: 100vw;
+  }
+  .page-panel__content::-webkit-scrollbar-thumb {
+    background: var(--_cross-browser-scrollbar--thumb-color);
+    border-radius: 100vw;
+  }
 }
-@supports (scrollbar-color: transparent transparent) {
+@supports not selector(::-webkit-scrollbar) {
   .page-panel__content {
     scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
     scrollbar-width: thin;

package/dist/ui/popover/cmp.popover.svelte

@@ -399,20 +399,27 @@ Props for keeping the popover open during interaction:
   overflow: var(--_dd--content-overflow);
   --_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;
 }
-.popover__panel--styled::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.popover__panel--styled::-webkit-scrollbar-track {
-  background: var(--_cross-browser-scrollbar--track-color);
-  border-radius: 100vw;
-}
-.popover__panel--styled::-webkit-scrollbar-thumb {
-  background: var(--_cross-browser-scrollbar--thumb-color);
-  border-radius: 100vw;
+@supports selector(::-webkit-scrollbar) {
+  .popover__panel--styled {
+    scrollbar-color: auto;
+    scrollbar-width: auto;
+  }
+  .popover__panel--styled::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  .popover__panel--styled::-webkit-scrollbar-track {
+    background: var(--_cross-browser-scrollbar--track-color);
+    border-radius: 100vw;
+  }
+  .popover__panel--styled::-webkit-scrollbar-thumb {
+    background: var(--_cross-browser-scrollbar--thumb-color);
+    border-radius: 100vw;
+  }
 }
-@supports (scrollbar-color: transparent transparent) {
+@supports not selector(::-webkit-scrollbar) {
   .popover__panel--styled {
     scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
     scrollbar-width: thin;

package/dist/ui/select/cmp.input-suggest.svelte

@@ -261,6 +261,7 @@ const handlePickRow = (row) => {
   <SelectListbox
     triggerEl={rootEl}
     isOpen={isPanelOpen}
+    size={size}
     rows={rows}
     highlight={activeIndex}
     listboxId={listboxId}

package/dist/ui/select/cmp.singleselect-async.svelte

@@ -136,6 +136,7 @@ const showClear = $derived(mode.clearable && hasValue && isInteractive && !core.
   <SelectListbox
     triggerEl={rootEl}
     isOpen={core.isOpen}
+    size={size}
     rows={core.rows}
     highlight={core.highlight}
     loading={core.loading}

package/dist/ui/select/multiselect-base.svelte

@@ -257,6 +257,7 @@ const handleDndFinalize = (e) => {
     <SelectListbox
       triggerEl={rootEl}
       isOpen={core.isOpen}
+      size={size}
       rows={core.rows}
       highlight={core.highlight}
       loading={core.loading}

package/dist/ui/select/select-core.svelte.js

@@ -11,6 +11,7 @@ export function createSelectCore(config) {
     let isOpen = $state(false);
     let query = $state('');
     let highlight = $state(0);
+    let highlightMovedByUser = false;
     let isFiltering = $state(false);
     let items = $state.raw([]);
     let loadToken = 0;
@@ -152,13 +153,28 @@ export function createSelectCore(config) {
         return out;
     });
     const navigableIndices = $derived(getNavigableIndices(rows));
-    const openPopover = () => {
-        if (!config.getInteractive() || isOpen) {
-            return;
+    const findSelectedRowIndex = () => {
+        const selected = config.getSelectedOptions()[0];
+        if (!selected) {
+            return navigableIndices[0] ?? 0;
         }
-        isOpen = true;
-        query = '';
-        isFiltering = false;
+        const compare = config.getCompare();
+        const idx = rows.findIndex((r) => r.kind === 'option' && compare(r.option.value, selected.value));
+        return idx >= 0 ? idx : (navigableIndices[0] ?? 0);
+    };
+    const moveHighlightByUser = (index) => {
+        highlight = index;
+        highlightMovedByUser = true;
+    };
+    const loadAndHighlightSelected = async () => {
+        highlight = findSelectedRowIndex();
+        highlightMovedByUser = false;
+        await runLoad('');
+        if (isOpen && !query && !highlightMovedByUser) {
+            highlight = findSelectedRowIndex();
+        }
+    };
+    const highlightFirstSelectedAndLoad = () => {
         const selected = config.getSelectedOptions()[0];
         if (selected) {
             const idx = rows.findIndex((r) => r.kind === 'option' && r.option === selected);
@@ -168,6 +184,20 @@ export function createSelectCore(config) {
             highlight = navigableIndices[0] ?? 0;
         }
         void runLoad('');
+    };
+    const openPopover = () => {
+        if (!config.getInteractive() || isOpen) {
+            return;
+        }
+        isOpen = true;
+        query = '';
+        isFiltering = false;
+        if (config.picker === 'single') {
+            void loadAndHighlightSelected();
+        }
+        else {
+            highlightFirstSelectedAndLoad();
+        }
         // Clicks land on the trigger root (div role=presentation) — focus the inner input so the
         // user can start typing immediately without a second click.
         config.getInputEl()?.focus();
@@ -292,7 +322,7 @@ export function createSelectCore(config) {
         if (!isOpen) {
             isOpen = true;
         }
-        highlight = navigableIndices[0] ?? 0;
+        moveHighlightByUser(navigableIndices[0] ?? 0);
         debouncedLoad(query);
     };
     const handleKeydown = (e) => {
@@ -308,11 +338,11 @@ export function createSelectCore(config) {
         }
         if (e.key === 'ArrowDown') {
             e.preventDefault();
-            highlight = moveHighlightIndex(navigableIndices, highlight, 1);
+            moveHighlightByUser(moveHighlightIndex(navigableIndices, highlight, 1));
         }
         else if (e.key === 'ArrowUp') {
             e.preventDefault();
-            highlight = moveHighlightIndex(navigableIndices, highlight, -1);
+            moveHighlightByUser(moveHighlightIndex(navigableIndices, highlight, -1));
         }
         else if (e.key === 'Enter') {
             e.preventDefault();
@@ -337,7 +367,7 @@ export function createSelectCore(config) {
             e.preventDefault();
             isFiltering = true;
             query = e.key;
-            highlight = navigableIndices[0] ?? 0;
+            moveHighlightByUser(navigableIndices[0] ?? 0);
             debouncedLoad(query);
         }
     };
@@ -381,7 +411,7 @@ export function createSelectCore(config) {
         closePopover,
         pickRow,
         setHighlight(i) {
-            highlight = i;
+            moveHighlightByUser(i);
         },
         refresh() {
             if (isOpen) {

package/dist/ui/select/select-listbox.svelte

@@ -6,7 +6,7 @@ import IconCheckboxChecked from '@fluentui/svg-icons/icons/checkbox_checked_16_f
 import IconCheckboxIndeterminate from '@fluentui/svg-icons/icons/checkbox_indeterminate_16_filled.svg?raw';
 import IconCheckboxUnchecked from '@fluentui/svg-icons/icons/checkbox_unchecked_16_regular.svg?raw';
 import IconCheckmark from '@fluentui/svg-icons/icons/checkmark_16_regular.svg?raw';
-let { triggerEl, isOpen, rows, highlight, loading = false, listboxId, matchTriggerWidth = true, selectedDisplay = 'checkmark', optionSnippet, headerSnippet, bodySnippet, hideCreateRows = false, createPrefix, suppressEmpty = false, on } = $props();
+let { triggerEl, isOpen, rows, highlight, loading = false, size = 'md', listboxId, matchTriggerWidth = true, selectedDisplay = 'checkmark', optionSnippet, headerSnippet, bodySnippet, hideCreateRows = false, createPrefix, suppressEmpty = false, on } = $props();
 const localization = new SelectListboxLocalization();
 // rows keep their index into the full `rows` array — `highlight` and row ids are core-side indices,
 // so filtering without preserving them shifts every row by one and Enter acts on the wrong row
@@ -115,7 +115,7 @@ $effect(() => {
 {#if isOpen && (hasRows || showEmpty)}
   <div
     bind:this={panelEl}
-    class="select-listbox select-listbox--display-{selectedDisplay}"
+    class="select-listbox select-listbox--{size} select-listbox--display-{selectedDisplay}"
     role="listbox"
     id={listboxId}
     tabindex="-1"
@@ -237,10 +237,10 @@ dismiss events upward. Floating UI handles placement with autoUpdate on scroll/r
 | `--sc-kit--select--panel--border-color` | Panel border | `var(--sc-kit--color--border)` |
 | `--sc-kit--select--panel--border-radius` | Panel radius | `var(--sc-kit--radius--md)` |
 | `--sc-kit--select--panel--box-shadow` | Panel shadow | `var(--sc-kit--shadow--lg)` |
-| `--sc-kit--select--panel--font-size` | Option / group / empty-state text size | `var(--sc-kit--font-size--md)` |
+| `--sc-kit--select--panel--font-size` | Option / group / empty-state text size | per size — `var(--sc-kit--font-size--{sm,md,lg})` |
 | `--sc-kit--select--panel--max-height` | Panel max height | `18rem` |
-| `--sc-kit--select--panel--padding` | Panel inner padding | `var(--sc-kit--space--1)` |
-| `--sc-kit--select--option--height` | Option row height | `var(--sc-kit--field--height--md)` (32px) |
+| `--sc-kit--select--panel--padding` | Panel inner padding; in Chrome / Safari the 4px scrollbar takes its share of the end side | `var(--sc-kit--space--1)` |
+| `--sc-kit--select--option--height` | Option row height | per size — `var(--sc-kit--field--height--{sm,md,lg})` |
 | `--sc-kit--select--option--padding-inline` | Option horizontal padding | `var(--sc-kit--space--3)` |
 | `--sc-kit--select--option--background--active` | Active / focused row background | `var(--sc-kit--color--accent--softer)` |
 | `--sc-kit--select--option--color` | Row text color | `var(--sc-kit--color--text--primary)` |
@@ -257,8 +257,8 @@ dismiss events upward. Floating UI handles placement with autoUpdate on scroll/r
   --_lb--box-shadow: var(--sc-kit--select--panel--box-shadow, var(--sc-kit--shadow--lg));
   --_lb--max-height: var(--sc-kit--select--panel--max-height, 18rem);
   --_lb--padding: var(--sc-kit--select--panel--padding, var(--sc-kit--space--1));
-  --_lb--font-size: var(--sc-kit--select--panel--font-size, var(--sc-kit--font-size--md));
-  --_lb--row-height: var(--sc-kit--select--option--height, var(--sc-kit--field--height--md));
+  --_lb--font-size: var(--sc-kit--select--panel--font-size, var(--_lb--size-font-size, var(--sc-kit--font-size--md)));
+  --_lb--row-height: var(--sc-kit--select--option--height, var(--_lb--size-row-height, var(--sc-kit--field--height--md)));
   --_lb--row-padding-inline: var(--sc-kit--select--option--padding-inline, var(--sc-kit--space--3));
   --_lb--row-background-active: var(--sc-kit--select--option--background--active, var(--sc-kit--color--accent--softer));
   --_lb--row-color: var(--sc-kit--select--option--color, var(--sc-kit--color--text--primary));
@@ -278,28 +278,51 @@ dismiss events upward. Floating UI handles placement with autoUpdate on scroll/r
   box-shadow: var(--_lb--box-shadow);
   max-height: var(--_lb--max-height);
   padding: var(--_lb--padding);
+  padding-inline-start: max(var(--_lb--padding), var(--_cross-browser-scrollbar--gutter, 0px));
+  padding-inline-end: max(0px, var(--_lb--padding) - var(--_cross-browser-scrollbar--gutter, 0px));
   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;
 }
-.select-listbox::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.select-listbox::-webkit-scrollbar-track {
-  background: var(--_cross-browser-scrollbar--track-color);
-  border-radius: 100vw;
-}
-.select-listbox::-webkit-scrollbar-thumb {
-  background: var(--_cross-browser-scrollbar--thumb-color);
-  border-radius: 100vw;
+@supports selector(::-webkit-scrollbar) {
+  .select-listbox {
+    scrollbar-color: auto;
+    scrollbar-width: auto;
+  }
+  .select-listbox::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+  .select-listbox::-webkit-scrollbar-track {
+    background: var(--_cross-browser-scrollbar--track-color);
+    border-radius: 100vw;
+  }
+  .select-listbox::-webkit-scrollbar-thumb {
+    background: var(--_cross-browser-scrollbar--thumb-color);
+    border-radius: 100vw;
+  }
 }
-@supports (scrollbar-color: transparent transparent) {
+@supports not selector(::-webkit-scrollbar) {
   .select-listbox {
     scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
     scrollbar-width: thin;
   }
 }
+@supports selector(::-webkit-scrollbar) {
+  .select-listbox {
+    --_cross-browser-scrollbar--gutter: 4px;
+    overflow-y: scroll;
+  }
+}
+.select-listbox--sm {
+  --_lb--size-font-size: var(--sc-kit--font-size--sm);
+  --_lb--size-row-height: var(--sc-kit--field--height--sm);
+}
+.select-listbox--lg {
+  --_lb--size-font-size: var(--sc-kit--font-size--lg);
+  --_lb--size-row-height: var(--sc-kit--field--height--lg);
+}
 .select-listbox__row {
   display: flex;
   align-items: center;

package/dist/ui/select/select-listbox.svelte.d.ts

@@ -9,6 +9,8 @@ declare function $$render<T>(): {
         /** Index into `rows` — highlighted row gets the active background and scrolls into view. */
         highlight: number;
         loading?: boolean;
+        /** Field size the rows follow (font size + row height). @default 'md' */
+        size?: "sm" | "md" | "lg";
         /** Stable id for aria-controls + aria-activedescendant. */
         listboxId: string;
         /** When true, panel width equals trigger width. @default true */
@@ -79,10 +81,10 @@ interface $$IsomorphicComponent {
  * | `--sc-kit--select--panel--border-color` | Panel border | `var(--sc-kit--color--border)` |
  * | `--sc-kit--select--panel--border-radius` | Panel radius | `var(--sc-kit--radius--md)` |
  * | `--sc-kit--select--panel--box-shadow` | Panel shadow | `var(--sc-kit--shadow--lg)` |
- * | `--sc-kit--select--panel--font-size` | Option / group / empty-state text size | `var(--sc-kit--font-size--md)` |
+ * | `--sc-kit--select--panel--font-size` | Option / group / empty-state text size | per size — `var(--sc-kit--font-size--{sm,md,lg})` |
  * | `--sc-kit--select--panel--max-height` | Panel max height | `18rem` |
- * | `--sc-kit--select--panel--padding` | Panel inner padding | `var(--sc-kit--space--1)` |
- * | `--sc-kit--select--option--height` | Option row height | `var(--sc-kit--field--height--md)` (32px) |
+ * | `--sc-kit--select--panel--padding` | Panel inner padding; in Chrome / Safari the 4px scrollbar takes its share of the end side | `var(--sc-kit--space--1)` |
+ * | `--sc-kit--select--option--height` | Option row height | per size — `var(--sc-kit--field--height--{sm,md,lg})` |
  * | `--sc-kit--select--option--padding-inline` | Option horizontal padding | `var(--sc-kit--space--3)` |
  * | `--sc-kit--select--option--background--active` | Active / focused row background | `var(--sc-kit--color--accent--softer)` |
  * | `--sc-kit--select--option--color` | Row text color | `var(--sc-kit--color--text--primary)` |

package/dist/ui/table/table-core.svelte

@@ -290,20 +290,27 @@ Not exported from `index.ts` — for kit-internal use only.
   overflow: 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;
 }
-.table-container__scroll::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.table-container__scroll::-webkit-scrollbar-track {
-  background: var(--_cross-browser-scrollbar--track-color);
-  border-radius: 100vw;
-}
-.table-container__scroll::-webkit-scrollbar-thumb {
-  background: var(--_cross-browser-scrollbar--thumb-color);
-  border-radius: 100vw;
+@supports selector(::-webkit-scrollbar) {
+  .table-container__scroll {
+    scrollbar-color: auto;
+    scrollbar-width: auto;
+  }
+  .table-container__scroll::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  .table-container__scroll::-webkit-scrollbar-track {
+    background: var(--_cross-browser-scrollbar--track-color);
+    border-radius: 100vw;
+  }
+  .table-container__scroll::-webkit-scrollbar-thumb {
+    background: var(--_cross-browser-scrollbar--thumb-color);
+    border-radius: 100vw;
+  }
 }
-@supports (scrollbar-color: transparent transparent) {
+@supports not selector(::-webkit-scrollbar) {
   .table-container__scroll {
     scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
     scrollbar-width: thin;

package/dist/ui/textarea/cmp.textarea.svelte

@@ -285,19 +285,28 @@ what the field shows. Blank lines inside the text are left alone. Typing is unto
   --_cross-browser-scrollbar--thumb-color: var(--sc-kit--color--border--strong);
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
 }
-.textarea__el::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.textarea__el::-webkit-scrollbar-track {
-  background: var(--_cross-browser-scrollbar--track-color);
-  border-radius: 100vw;
+.textarea__el {
+  --_cross-browser-scrollbar--gutter: 0px;
 }
-.textarea__el::-webkit-scrollbar-thumb {
-  background: var(--_cross-browser-scrollbar--thumb-color);
-  border-radius: 100vw;
+@supports selector(::-webkit-scrollbar) {
+  .textarea__el {
+    scrollbar-color: auto;
+    scrollbar-width: auto;
+  }
+  .textarea__el::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  .textarea__el::-webkit-scrollbar-track {
+    background: var(--_cross-browser-scrollbar--track-color);
+    border-radius: 100vw;
+  }
+  .textarea__el::-webkit-scrollbar-thumb {
+    background: var(--_cross-browser-scrollbar--thumb-color);
+    border-radius: 100vw;
+  }
 }
-@supports (scrollbar-color: transparent transparent) {
+@supports not selector(::-webkit-scrollbar) {
   .textarea__el {
     scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
     scrollbar-width: thin;

package/package.json

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