V5: some custom CSS variable do not seem to have effect

[yogimargarine]

Hello,

It seems like some particular custom border-related CSS properties do not modify the component style (namely --border, -border-hover, --list-border, --border-focused). It works for e.g. --error-border though. Am I doing something wrong?

<script>
   window.process = {env: {}} // REPL issue, ignore
   import Select from 'svelte-select';

   let items = ['One', 'Two', 'Three'];
   let value = null;
   let _theme="dark";
   let isElliotTypesEmpty =false;
</script>

<svelte:head>
    <script src="https://cdn.tailwindcss.com"></script>
</svelte:head>

<Select {items} bind:value
     --error-background={_theme == "dark" ? "#3f3f46" : "#f9fafb"}
     --error-border = "border-color: red;"
     --list-max-height="180px"
     --multi-item-color="#3f3f46"
     --item-color={_theme == "dark" ? "#f9fafb" : "black" } 
     --item-hover-color = "black"
     --background = {_theme == "dark" ? "#3f3f46" : "#f9fafb"} 
     --list-background = {_theme == "dark" ? "#3f3f46" : "#f9fafb"} 
     --item-hover-bg = "#e5e7eb"
     --border = "border-color: green;"
     --border-hover = "border-color: red;"
     --list-border = "border-color: purple;"
     --border-focused = "border-color: #f9fafb;"
     name="elliot_types"
     id="elliot_types"
     hasError={isElliotTypesEmpty}
     containerStyles="width:250px;"
     multiple
     clearable
     multiFullItemClearable     
/>

[rob-balfre]

You just don't need the 'border-color' stuff in there...

https://svelte.dev/repl/c6cbc6f80a3f443394c542ac8ab377ea?version=3.55.1

[yogimargarine]

Thanks a lot for the quick reply and for the REPL!