@streamscloud/kit 0.86.0 → 0.88.0

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;