@streamscloud/kit 0.85.1 → 0.87.0

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) {