`Select` - checkmark is not placed in exact option when trying to update value programatically.

[hardcommitoneself]

Note: I have changed the value grammatically, but after that the check mark was not placed in exact option.

Reproduce: So, I have selected one option and refresh the page... the select language switcher has got the selected lang which is stored in session when mount...

Codebase:

<script context="module" lang="ts">
    const locales: SelectOption[] = [
        {
            value: "de",
            label: "German",
        },
        {
            value: "en",
            label: "English",
        },
        {
            value: "es",
            label: "Spanish",
        },
    ];

    function getSelectOption(locale: string): SelectOption {
        return locales.find((l) => l.value === locale) ?? locales[0];
    }
</script>

<script lang="ts">
    import Select from "$lib/components/Select/Select.svelte";
    import type { SelectOption } from "stwui/types";
    import { safelySetLocale } from "./I18nStore";
    import { browser } from "$app/environment";
    import { onMount } from "svelte";

    export let locale = "de";
    export let preferredLocale: string | null;

    let value = getSelectOption(locale);
    let initialized = false;

    $: if (!value) value = getSelectOption("de");

    $: locale = value.value;
    $: safelySetLocale(value.value);

    $: {
        if (browser && initialized) {
            window.localStorage.setItem("lang", value.value);
        }
    }

    onMount(() => {
        if (!preferredLocale) {
            const persistedLanguage = window.localStorage.getItem("lang");
            if (persistedLanguage) {
                value = getSelectOption(persistedLanguage);
            }
        } else {
            window.localStorage.setItem("lang", preferredLocale);
            value = getSelectOption(preferredLocale);
        }
        initialized = true;
    });
</script>

<Select name="" options={locales} bind:value className="w-40" />

Select component

<script lang="ts">
    import { emptyFunction } from "$lib/utils";
    import Select from "stwui/select";
    import type { SelectOption } from "stwui/types";

    export let name = "";
    export let placeholder = "";
    export let label = "";
    export let value: SelectOption | SelectOption[];
    export let options: SelectOption[] = [];
    export let className = "";
    export let error = "";
    export let handleChange = emptyFunction;
</script>

<Select {name} {placeholder} {error} bind:value on:change={handleChange} class={className}>
    <Select.Label slot="label">{label}</Select.Label>

    <Select.Options slot="options">
        {#each options as option}
            <Select.Options.Option {option} />
        {/each}
    </Select.Options>
</Select>

Screenshots: