@streamscloud/kit 0.9.13 → 0.9.15

package/dist/core/utils/number-helper.js

@@ -9,7 +9,7 @@ export class NumberHelper {
         const isNegative = n < 0;
         let modulo = isNegative ? 0 - n : n;
         const output = [];
-        for (; modulo >= 1000; modulo = Math.floor(n / 1000)) {
+        for (; modulo >= 1000; modulo = Math.floor(modulo / 1000)) {
             output.unshift(String(modulo % 1000).padStart(3, '0'));
         }
         output.unshift(modulo);

package/dist/ui/collection-list/cmp.collection-list.svelte

@@ -0,0 +1,242 @@
+<script lang="ts" generics="T">import { Icon, IconSlot } from '../icon';
+import { CollectionListLocalization } from './collection-list-localization';
+import IconReorderDotsVertical from '@fluentui/svg-icons/icons/re_order_dots_vertical_20_regular.svg?raw';
+import { flip } from 'svelte/animate';
+import { dndzone } from 'svelte-dnd-action';
+let { items, actions = [], orderable = true, showImage = true, actionsAlwaysVisible = false, view, on } = $props();
+const localization = new CollectionListLocalization();
+// unique per instance so two lists on one screen can't drag items between each other
+const dndType = `collection-list-${crypto.randomUUID()}`;
+const flipDurationMs = 200;
+let dndItems = $state.raw([]);
+$effect(() => {
+    dndItems = items ?? [];
+});
+const dragDisabled = $derived(!orderable || dndItems.length < 2);
+const handleConsider = (e) => {
+    dndItems = e.detail.items;
+};
+const handleFinalize = (e) => {
+    const reordered = e.detail.items;
+    dndItems = reordered;
+    const newIndex = reordered.findIndex((i) => i.id === e.detail.info.id);
+    on?.reorder?.(reordered.map((i) => i.originalItem), newIndex);
+};
+// strip the library's default yellow outline on the cloned drag element
+const cleanDraggedElement = (element) => {
+    if (element) {
+        element.style.outline = 'none';
+    }
+};
+const visibleActions = (item, index) => actions.filter((a) => !a.hidden || !a.hidden(item.originalItem, index));
+</script>
+
+{#snippet builtinBody(item: CollectionItem<T>)}
+  {#if showImage}
+    <span class="collection-list__thumbnail">
+      {#if item.image}
+        <img class="collection-list__thumbnail-image" src={item.image} alt="" draggable="false" />
+      {/if}
+    </span>
+  {/if}
+  {#if item.icon}
+    <span class="collection-list__icon"><IconSlot icon={item.icon} /></span>
+  {/if}
+  {#if item.description}
+    <span class="collection-list__description" title={item.description}>{item.description}</span>
+  {/if}
+{/snippet}
+
+<div
+  class="collection-list"
+  use:dndzone={{
+    items: dndItems,
+    type: dndType,
+    flipDurationMs,
+    dropTargetStyle: {},
+    morphDisabled: true,
+    dragDisabled,
+    transformDraggedElement: cleanDraggedElement
+  }}
+  onconsider={handleConsider}
+  onfinalize={handleFinalize}>
+  {#each dndItems as item, index (item.id)}
+    {@const rowActions = visibleActions(item, index)}
+    <div class="collection-list__row" class:collection-list__row--actions-always={actionsAlwaysVisible} animate:flip={{ duration: flipDurationMs }}>
+      {#if !dragDisabled}
+        <span class="collection-list__handle" role="img" aria-label={localization.reorderHandle}>
+          <Icon src={IconReorderDotsVertical} />
+        </span>
+      {/if}
+
+      {#if view}
+        <div class="collection-list__body">{@render view({ item: item.originalItem, index })}</div>
+      {:else if item.imageClickCallback}
+        <button type="button" class="collection-list__body collection-list__body--clickable" onclick={() => item.imageClickCallback?.(item.originalItem)}>
+          {@render builtinBody(item)}
+        </button>
+      {:else}
+        <div class="collection-list__body">{@render builtinBody(item)}</div>
+      {/if}
+
+      {#if rowActions.length > 0}
+        <div class="collection-list__actions">
+          {#each rowActions as action (action)}
+            <button
+              type="button"
+              class="collection-list__action"
+              aria-label={action.label ?? localization.action}
+              onclick={() => action.callback(item.originalItem, index)}>
+              <IconSlot icon={action.icon} />
+            </button>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<!--
+@component
+A reorderable vertical list of items: each row is an optional drag handle, an optional square
+thumbnail + description (or a fully custom `view`), and hover-revealed icon actions. Generic over
+the item payload `T`; the consumer maps its data into `CollectionItem<T>` and reads `on.reorder`.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--collection-list--gap` | Gap between rows | `var(--sc-kit--space--2)` |
+| `--sc-kit--collection-list--row--gap` | Gap between a row's handle / body / actions | `var(--sc-kit--space--3)` |
+| `--sc-kit--collection-list--thumbnail--size` | Thumbnail inline size | `3.125rem` |
+| `--sc-kit--collection-list--thumbnail--aspect-ratio` | Thumbnail aspect ratio | `1` |
+| `--sc-kit--collection-list--thumbnail--radius` | Thumbnail corner radius | `var(--sc-kit--radius--sm)` |
+| `--sc-kit--collection-list--thumbnail--background` | Thumbnail placeholder background | `var(--sc-kit--color--bg--element)` |
+| `--sc-kit--collection-list--description--color` | Description / leading-icon color | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--collection-list--handle--color` | Drag handle icon color | `var(--sc-kit--color--text--secondary)` |
+| `--sc-kit--collection-list--action--color` | Action icon color | `var(--sc-kit--color--text--secondary)` |
+| `--sc-kit--collection-list--action--background` | Action button background | `transparent` |
+| `--sc-kit--collection-list--action--background--hover` | Action button hover background | `var(--sc-kit--color--bg--hover)` |
+-->
+
+<style>.collection-list {
+  --_cl--gap: var(--sc-kit--collection-list--gap, var(--sc-kit--space--2));
+  display: flex;
+  flex-direction: column;
+  gap: var(--_cl--gap);
+}
+.collection-list__row {
+  --_cl--row-gap: var(--sc-kit--collection-list--row--gap, var(--sc-kit--space--3));
+  --_cl--thumbnail-size: var(--sc-kit--collection-list--thumbnail--size, 3.125rem);
+  --_cl--thumbnail-aspect-ratio: var(--sc-kit--collection-list--thumbnail--aspect-ratio, 1);
+  --_cl--thumbnail-radius: var(--sc-kit--collection-list--thumbnail--radius, var(--sc-kit--radius--sm));
+  --_cl--thumbnail-background: var(--sc-kit--collection-list--thumbnail--background, var(--sc-kit--color--bg--element));
+  --_cl--description-color: var(--sc-kit--collection-list--description--color, var(--sc-kit--color--text--primary));
+  --_cl--handle-color: var(--sc-kit--collection-list--handle--color, var(--sc-kit--color--text--secondary));
+  --_cl--action-color: var(--sc-kit--collection-list--action--color, var(--sc-kit--color--text--secondary));
+  --_cl--action-background: var(--sc-kit--collection-list--action--background, transparent);
+  --_cl--action-background-hover: var(--sc-kit--collection-list--action--background--hover, var(--sc-kit--color--bg--hover));
+  --_cl--actions-opacity: 0;
+  --_cl--actions-pointer-events: none;
+  display: flex;
+  align-items: center;
+  gap: var(--_cl--row-gap);
+  min-width: 0;
+}
+.collection-list__row:hover, .collection-list__row:focus-within {
+  --_cl--actions-opacity: 1;
+  --_cl--actions-pointer-events: auto;
+}
+.collection-list__row--actions-always {
+  --_cl--actions-opacity: 1;
+  --_cl--actions-pointer-events: auto;
+}
+.collection-list__handle {
+  --sc-kit--icon--size: 1.25rem;
+  --sc-kit--icon--color: var(--_cl--handle-color);
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  cursor: grab;
+}
+.collection-list__handle:active {
+  cursor: grabbing;
+}
+.collection-list__body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--_cl--row-gap);
+}
+.collection-list__body--clickable {
+  appearance: none;
+  border: none;
+  background: none;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+.collection-list__thumbnail {
+  flex: none;
+  position: relative;
+  inline-size: var(--_cl--thumbnail-size);
+  aspect-ratio: var(--_cl--thumbnail-aspect-ratio);
+  border-radius: var(--_cl--thumbnail-radius);
+  background: var(--_cl--thumbnail-background);
+  overflow: hidden;
+}
+.collection-list__thumbnail-image {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+.collection-list__icon {
+  --sc-kit--icon--size: 1rem;
+  --sc-kit--icon--color: var(--_cl--description-color);
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+}
+.collection-list__description {
+  flex: 1;
+  min-width: 0;
+  color: var(--_cl--description-color);
+  font-size: var(--sc-kit--font-size--md);
+  line-height: var(--sc-kit--line-height--md);
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.collection-list__actions {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--sc-kit--space--1);
+  margin-inline-start: auto;
+  opacity: var(--_cl--actions-opacity);
+  pointer-events: var(--_cl--actions-pointer-events);
+  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.collection-list__action {
+  --sc-kit--icon--size: 1.25rem;
+  --sc-kit--icon--color: var(--_cl--action-color);
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  border: none;
+  border-radius: var(--sc-kit--radius--sm);
+  background: var(--_cl--action-background);
+  cursor: pointer;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.collection-list__action:hover {
+  background: var(--_cl--action-background-hover);
+}</style>

package/dist/ui/collection-list/cmp.collection-list.svelte.d.ts

@@ -0,0 +1,64 @@
+import type { CollectionAction, CollectionItem } from './types';
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        items: CollectionItem<T>[] | null;
+        /** Per-row icon buttons, revealed on row hover (or pinned via `actionsAlwaysVisible`). */
+        actions?: CollectionAction<T>[];
+        /** Enables drag reorder. Auto-disabled when fewer than 2 items. @default true */
+        orderable?: boolean;
+        /** Render the leading square thumbnail in the built-in row. Ignored when `view` is set. @default true */
+        showImage?: boolean;
+        /** Pin row actions visible instead of revealing them on hover/focus. @default false */
+        actionsAlwaysVisible?: boolean;
+        /** Replaces the built-in row body (thumbnail + description); the drag handle and actions still render around it. */
+        view?: Snippet<[{
+            item: T;
+            index: number;
+        }]>;
+        on?: {
+            reorder?: (items: T[], newIndex: number) => void;
+        };
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * A reorderable vertical list of items: each row is an optional drag handle, an optional square
+ * thumbnail + description (or a fully custom `view`), and hover-revealed icon actions. Generic over
+ * the item payload `T`; the consumer maps its data into `CollectionItem<T>` and reads `on.reorder`.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--collection-list--gap` | Gap between rows | `var(--sc-kit--space--2)` |
+ * | `--sc-kit--collection-list--row--gap` | Gap between a row's handle / body / actions | `var(--sc-kit--space--3)` |
+ * | `--sc-kit--collection-list--thumbnail--size` | Thumbnail inline size | `3.125rem` |
+ * | `--sc-kit--collection-list--thumbnail--aspect-ratio` | Thumbnail aspect ratio | `1` |
+ * | `--sc-kit--collection-list--thumbnail--radius` | Thumbnail corner radius | `var(--sc-kit--radius--sm)` |
+ * | `--sc-kit--collection-list--thumbnail--background` | Thumbnail placeholder background | `var(--sc-kit--color--bg--element)` |
+ * | `--sc-kit--collection-list--description--color` | Description / leading-icon color | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--collection-list--handle--color` | Drag handle icon color | `var(--sc-kit--color--text--secondary)` |
+ * | `--sc-kit--collection-list--action--color` | Action icon color | `var(--sc-kit--color--text--secondary)` |
+ * | `--sc-kit--collection-list--action--background` | Action button background | `transparent` |
+ * | `--sc-kit--collection-list--action--background--hover` | Action button hover background | `var(--sc-kit--color--bg--hover)` |
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/ui/collection-list/collection-list-localization.d.ts

@@ -0,0 +1,4 @@
+export declare class CollectionListLocalization {
+    get reorderHandle(): string;
+    get action(): string;
+}

package/dist/ui/collection-list/collection-list-localization.js

@@ -0,0 +1,19 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    reorderHandle: {
+        en: 'Drag to reorder',
+        no: 'Dra for å endre rekkefølge'
+    },
+    action: {
+        en: 'Action',
+        no: 'Handling'
+    }
+};
+export class CollectionListLocalization {
+    get reorderHandle() {
+        return loc.reorderHandle[AppLocale.current];
+    }
+    get action() {
+        return loc.action[AppLocale.current];
+    }
+}

package/dist/ui/collection-list/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CollectionList } from './cmp.collection-list.svelte';
+export { CollectionItem, type CollectionAction } from './types';

package/dist/ui/collection-list/index.js

@@ -0,0 +1,2 @@
+export { default as CollectionList } from './cmp.collection-list.svelte';
+export { CollectionItem } from './types';

package/dist/ui/collection-list/types.d.ts

@@ -0,0 +1,28 @@
+import type { IconProp } from '../icon';
+/**
+ * A row in a {@link CollectionList}. Wraps the consumer's payload (`originalItem`) with the
+ * presentation fields the built-in row renders. Construct one per item; `id` auto-fills when omitted.
+ */
+export declare class CollectionItem<T> {
+    originalItem: T;
+    id: string;
+    image: string | null;
+    icon: IconProp | null;
+    description: string | null;
+    imageClickCallback: ((item: T) => void) | null;
+    constructor(init: {
+        originalItem: T;
+        id?: string;
+        image?: string | null;
+        icon?: IconProp | null;
+        description?: string | null;
+        imageClickCallback?: (item: T) => void;
+    });
+}
+export type CollectionAction<T> = {
+    icon: IconProp;
+    /** Accessible name for the icon-only button. Falls back to a generic localized label. */
+    label?: string;
+    callback: (item: T, index: number) => void;
+    hidden?: (item: T, index: number) => boolean;
+};

package/dist/ui/collection-list/types.js

@@ -0,0 +1,20 @@
+/**
+ * A row in a {@link CollectionList}. Wraps the consumer's payload (`originalItem`) with the
+ * presentation fields the built-in row renders. Construct one per item; `id` auto-fills when omitted.
+ */
+export class CollectionItem {
+    originalItem;
+    id;
+    image;
+    icon;
+    description;
+    imageClickCallback;
+    constructor(init) {
+        this.originalItem = init.originalItem;
+        this.id = init.id ?? crypto.randomUUID();
+        this.image = init.image ?? null;
+        this.icon = init.icon ?? null;
+        this.description = init.description ?? null;
+        this.imageClickCallback = init.imageClickCallback ?? null;
+    }
+}

package/dist/ui/file-uploader/cmp.file-uploader.svelte

@@ -1,13 +1,8 @@
-<script lang="ts">import { FileValidator } from '../../core/files';
+<script lang="ts">import { deriveAccept, FileValidator } from '../../core/files';
 import { Icon } from '../icon';
 import IconArrowUpload from '@fluentui/svg-icons/icons/arrow_upload_24_regular.svg?raw';
 const { multiple = false, validationRules, disabled = false, title = '', description = '', on } = $props();
-// Auto-derive the native picker `accept` from any Mime-style rule that exposes its accept
-// string. Single source of truth — consumer writes the MIME pattern once on the rule.
-const accept = $derived(validationRules
-    ?.map((r) => r.accept)
-    .filter((a) => !!a)
-    .join(',') ?? '');
+const accept = $derived(deriveAccept(validationRules ?? []));
 let inputRef = $state.raw(undefined);
 let dragOver = $state(false);
 // Snapshot of MIME types captured at dragenter — DataTransfer.files is empty during drag

package/dist/ui/file-uploader/cmp.file-uploader.svelte.d.ts

@@ -1,13 +1,16 @@
-import type { FileValidationResult, FileValidationRule } from '../../core/files';
+import type { FileValidationResult, FileValidationRule, FileValidationRuleSets } from '../../core/files';
 type Props = {
     /** Allow multi-file selection. @default false */
     multiple?: boolean;
     /**
-     * Validation rules applied to each picked / dropped file. The native picker filter and
-     * drag-over visual hint are auto-derived from any `FileRules.Mime(...)` rule's `accept`
-     * — pass it once via the rule, the cmp wires the rest.
+     * Validation rules applied to each picked / dropped file — a single set
+     * (`FileValidationRule[]`) or several sets (`FileValidationRule[][]`). With several sets,
+     * each file is validated by the first set whose `accept` matches it (a set with no `accept`
+     * rule matches anything; a file matching none is rejected). The native picker filter and
+     * drag-over visual hint are auto-derived from every set's `FileRules.Mime(...)` rule's
+     * `accept` — pass it once via the rule, the cmp wires the rest.
      */
-    validationRules?: FileValidationRule[];
+    validationRules?: FileValidationRule[] | FileValidationRuleSets;
     disabled?: boolean;
     /** Headline shown inside the drop zone. */
     title?: string;

package/dist/ui/open-file-button/cmp.open-file-button.svelte

@@ -1,11 +1,7 @@
-<script lang="ts">import { FileValidator, openFile } from '../../core/files';
+<script lang="ts">import { deriveAccept, FileValidator, openFile } from '../../core/files';
 import { Button } from '../button';
 const { size = 'md', variant = 'secondary', disabled = false, multiple = false, capture, validationRules, icon, iconPosition = 'leading', children, 'aria-label': ariaLabel, on } = $props();
-// Auto-derive native picker `accept` from any Mime-style rule that exposes its accept string.
-const accept = $derived(validationRules
-    ?.map((r) => r.accept)
-    .filter((a) => !!a)
-    .join(',') ?? '');
+const accept = $derived(deriveAccept(validationRules ?? []));
 const handleClick = async () => {
     const files = await openFile({ multiple, accept, capture });
     if (files.length === 0) {

package/dist/ui/open-file-button/cmp.open-file-button.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { FileValidationResult, FileValidationRule } from '../../core/files';
+import type { FileValidationResult, FileValidationRule, FileValidationRuleSets } from '../../core/files';
 import type { ButtonSize, ButtonVariant } from '../button';
 import type { IconProp } from '../icon';
 import type { Snippet } from 'svelte';
@@ -12,10 +12,13 @@ type Props = {
     /** Optional file-picker capture hint (mobile camera / mic). */
     capture?: 'user' | 'environment';
     /**
-     * Rules applied to picked files. The native picker `accept` filter is auto-derived from
-     * any `FileRules.Mime(...)` rule's `accept` — pass the MIME pattern once via the rule.
+     * Rules applied to picked files — a single set (`FileValidationRule[]`) or several sets
+     * (`FileValidationRule[][]`). With several sets, each file is validated by the first set
+     * whose `accept` matches it (a set with no `accept` rule matches anything; a file matching
+     * none is rejected). The native picker `accept` filter is auto-derived from every set's
+     * `FileRules.Mime(...)` rule — pass the MIME pattern once via the rule.
      */
-    validationRules?: FileValidationRule[];
+    validationRules?: FileValidationRule[] | FileValidationRuleSets;
     /** Icon — forwarded to the underlying Button. */
     icon?: IconProp;
     /** Icon position. @default 'leading' */

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

@@ -35,6 +35,7 @@ const core = createSelectCore({
     getDebounceMs: () => debounceMs,
     getCompare: () => compare,
     getCanCreate: () => canCreate,
+    getHideCreateRow: () => showCreateSection,
     getGroupHeader: () => groupHeader,
     getSelectionMode: () => selectionMode,
     isPicked: (option) => isPicked(option.value),

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

@@ -13,6 +13,8 @@ export type SelectCoreConfig<T> = {
     getCompare: () => (a: T, b: T) => boolean;
     /** Optional `canCreate` validator — presence enables creatable mode. */
     getCanCreate: () => ((q: string) => boolean) | undefined;
+    /** When true, no `kind:'create'` row is emitted (the host renders its own create UI) — keyboard navigation must not reach a row the listbox doesn't show. @default false */
+    getHideCreateRow?: () => boolean;
     /** Group-header behavior. `toggle-all` only makes sense for multi. */
     getGroupHeader: () => 'static' | 'value' | 'toggle-all';
     /**

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

@@ -83,7 +83,7 @@ export function createSelectCore(config) {
     const groupMap = $derived(buildGroupMap(items));
     const rows = $derived.by(() => {
         const out = [];
-        if (showCreateRow) {
+        if (showCreateRow && !config.getHideCreateRow?.()) {
             out.push({ kind: 'create', query });
         }
         const compare = config.getCompare();
@@ -187,9 +187,13 @@ export function createSelectCore(config) {
         cancelInFlightLoad();
     };
     const resetFilterKeepFocus = () => {
+        // keep highlight on the picked row unless a filter was narrowing the list — else it flashes to the first row after a click
+        const wasFiltering = isFiltering || query !== '';
         query = '';
         isFiltering = false;
-        highlight = navigableIndices[0] ?? 0;
+        if (wasFiltering) {
+            highlight = navigableIndices[0] ?? 0;
+        }
         config.getInputEl()?.focus();
         void runLoad('');
     };

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

@@ -8,9 +8,12 @@ import IconCheckboxUnchecked from '@fluentui/svg-icons/icons/checkbox_unchecked_
 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, suppressEmpty = false, on } = $props();
 const localization = new SelectListboxLocalization();
-const visibleRows = $derived(hideCreateRows ? rows.filter((r) => r.kind !== 'create') : rows);
+// 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
+const visibleRows = $derived(rows.map((row, index) => ({ row, index })).filter(({ row }) => !hideCreateRows || row.kind !== 'create'));
 const hasRows = $derived(visibleRows.length > 0 || !!headerSnippet);
 const showEmpty = $derived(!hasRows && !loading && !suppressEmpty);
+const isHighlightMode = $derived(selectedDisplay === 'highlight');
 let panelEl = $state.raw(undefined);
 let triggerWidth = $state(undefined);
 // Floating UI: position when open, autoUpdate on scroll/resize, cleanup on close.
@@ -129,14 +132,15 @@ $effect(() => {
     {#if visibleRows.length === 0 && !headerSnippet}
       <div class="select-listbox__empty">{localization.noMatches}</div>
     {:else if bodySnippet}
-      {@render bodySnippet({ rows: visibleRows, highlight, triggerWidth, on: { pickRow: on.pickRow, hoverRow: on.hoverRow } })}
+      {@render bodySnippet({ rows: visibleRows.map(({ row }) => row), highlight, triggerWidth, on: { pickRow: on.pickRow, hoverRow: on.hoverRow } })}
     {:else}
-      {#each visibleRows as row, i (i)}
-        {@const rowId = `${listboxId}-row-${i}`}
+      {#each visibleRows as { row, index } (index)}
+        {@const rowId = `${listboxId}-row-${index}`}
         {#if row.kind === 'create'}
           <div
             class="select-listbox__row select-listbox__row--create"
-            class:select-listbox__row--active={i === highlight}
+            class:select-listbox__row--active={index === highlight}
+            class:select-listbox__row--ring={isHighlightMode && index === highlight}
             role="option"
             aria-selected="false"
             tabindex="-1"
@@ -144,7 +148,7 @@ $effect(() => {
             data-row-id={rowId}
             onclick={() => on.pickRow(row)}
             onkeydown={() => undefined}
-            onmouseenter={() => on.hoverRow(i)}>
+            onmouseenter={() => on.hoverRow(index)}>
             <span class="select-listbox__row-icon"><Icon src={IconAdd} /></span>
             <span class="select-listbox__row-label">{localization.createLabel(row.query)}</span>
           </div>
@@ -152,8 +156,10 @@ $effect(() => {
           {#if row.selectable}
             <div
               class="select-listbox__row select-listbox__row--group-header select-listbox__row--selectable"
-              class:select-listbox__row--active={i === highlight}
+              class:select-listbox__row--active={index === highlight}
               class:select-listbox__row--selected={row.selected}
+              class:select-listbox__row--ring={isHighlightMode && index === highlight}
+              class:select-listbox__row--fill={isHighlightMode && row.selected}
               role="option"
               aria-selected={row.state === 'checked'}
               aria-checked={row.state === 'indeterminate' ? 'mixed' : row.state === 'checked'}
@@ -162,7 +168,7 @@ $effect(() => {
               data-row-id={rowId}
               onclick={() => on.pickRow(row)}
               onkeydown={() => undefined}
-              onmouseenter={() => on.hoverRow(i)}>
+              onmouseenter={() => on.hoverRow(index)}>
               {#if selectedDisplay === 'checkbox'}
                 {@render checkboxGlyph(row.state)}
               {/if}
@@ -179,8 +185,10 @@ $effect(() => {
         {:else}
           <div
             class="select-listbox__row select-listbox__row--option"
-            class:select-listbox__row--active={i === highlight}
+            class:select-listbox__row--active={index === highlight}
             class:select-listbox__row--selected={row.selected}
+            class:select-listbox__row--ring={isHighlightMode && index === highlight}
+            class:select-listbox__row--fill={isHighlightMode && row.selected}
             class:select-listbox__row--disabled={row.option.disabled}
             class:select-listbox__row--indent={row.indent}
             role="option"
@@ -191,7 +199,7 @@ $effect(() => {
             data-row-id={rowId}
             onclick={() => on.pickRow(row)}
             onkeydown={() => undefined}
-            onmouseenter={() => on.hoverRow(i)}>
+            onmouseenter={() => on.hoverRow(index)}>
             {#if selectedDisplay === 'checkbox'}
               {@render checkboxGlyph(row.selected ? 'checked' : 'unchecked')}
             {/if}
@@ -228,7 +236,7 @@ dismiss events upward. Floating UI handles placement with autoUpdate on scroll/r
 | `--sc-kit--select--panel--padding` | Panel inner padding | `var(--sc-kit--space--1)` |
 | `--sc-kit--select--option--padding-block` | Option vertical padding | `var(--sc-kit--space--2)` |
 | `--sc-kit--select--option--padding-inline` | Option horizontal padding | `var(--sc-kit--space--3)` |
-| `--sc-kit--select--option--background--active` | Active row background | `var(--sc-kit--color--bg--hover)` |
+| `--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)` |
 | `--sc-kit--select--option--color--selected` | Selected row text color | `var(--sc-kit--color--accent)` |
 | `--sc-kit--select--group-header--color` | Group header text color | `var(--sc-kit--color--text--muted)` |
@@ -245,12 +253,15 @@ dismiss events upward. Floating UI handles placement with autoUpdate on scroll/r
   --_lb--padding: var(--sc-kit--select--panel--padding, var(--sc-kit--space--1));
   --_lb--row-padding-block: var(--sc-kit--select--option--padding-block, var(--sc-kit--space--2));
   --_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--bg--hover));
+  --_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));
   --_lb--row-color-selected: var(--sc-kit--select--option--color--selected, var(--sc-kit--color--accent));
   --_lb--group-header-color: var(--sc-kit--select--group-header--color, var(--sc-kit--color--text--muted));
   --_lb--group-header-font-size: var(--sc-kit--select--group-header--font-size, var(--sc-kit--font-size--xs));
   --_lb--empty-color: var(--sc-kit--select--empty--color, var(--sc-kit--color--text--muted));
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
   position: absolute;
   z-index: var(--sc-kit--z-index--popover);
   background: var(--_lb--background);
@@ -298,6 +309,14 @@ dismiss events upward. Floating UI handles placement with autoUpdate on scroll/r
 .select-listbox__row--selected {
   color: var(--_lb--row-color-selected);
 }
+.select-listbox__row--ring {
+  background: transparent;
+  box-shadow: inset 0 0 0 2px var(--sc-kit--color--accent--soft);
+}
+.select-listbox__row--fill {
+  background: var(--sc-kit--color--accent--softer);
+  color: var(--_lb--row-color);
+}
 .select-listbox__row--disabled {
   color: var(--sc-kit--color--text--muted);
   cursor: default;
@@ -355,10 +374,6 @@ dismiss events upward. Floating UI handles placement with autoUpdate on scroll/r
 .select-listbox__row-checkbox--checked, .select-listbox__row-checkbox--indeterminate {
   --sc-kit--icon--color: var(--_lb--row-color-selected);
 }
-.select-listbox--display-highlight .select-listbox__row--selected {
-  background: var(--_lb--row-background-active);
-  color: var(--_lb--row-color);
-}
 .select-listbox__header {
   margin-block-end: var(--sc-kit--space--1);
 }