add select

src/app.css

@@ -215,16 +215,50 @@
     max-width: 75rem;
 }
 
-@layer components {
+@utility border-gradient {
-    .mask {
+    --border-gradient-before: linear-gradient(
-        mask-image: linear-gradient(
+        180deg,
-            to var(--mask-direction, top),
+        rgba(255, 255, 255, 0.16) 0%,
-            transparent,
+        rgba(255, 255, 255, 0) 100%
-            black var(--mask-height, 32px),
+    );
-            black calc(100% - var(--mask-height, 32px)),
+    --border-gradient-after: linear-gradient(
-            black
+        180deg,
-        );
+        rgba(255, 255, 255, 0.12) 0%,
+        rgba(255, 255, 255, 0) 125.11%
+    );
+    --border-radius: 0.5rem;
+
+    &::before,
+    &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: var(--border-radius);
+        border: 1px solid transparent;
+        mask:
+            linear-gradient(#fff 0 0) padding-box,
+            linear-gradient(#fff 0 0);
+        mask-composite: exclude;
+        pointer-events: none;
     }
+
+    &::before {
+        background: var(--border-gradient-before) border-box;
+    }
+
+    &::after {
+        background: var(--border-gradient-after) border-box;
+    }
+}
+
+@utility mask {
+    mask-image: linear-gradient(
+        to var(--mask-direction, top),
+        transparent,
+        black var(--mask-height, 32px),
+        black calc(100% - var(--mask-height, 32px)),
+        black
+    );
 }
 
 :root,

src/lib/components/ui/select.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-    import { classNames } from '$lib/utils/classnames';
     import { Select, type SelectProps } from 'melt/builders';
-    import type { HTMLButtonAttributes, SvelteHTMLElements } from 'svelte/elements';
 
     type Props = {
         options: Array<{
@@ -16,25 +14,30 @@
     const {
         options,
         value = $bindable(),
+        onValueChange,
         defaultValue = 'Select a value',
         ...rest
     }: Props = $props();
-    type Option = (typeof options)[number];
 
-    const select = new Select<Option['value']>({
+    const select = new Select<Props['options'][number]['value']>({
         value,
+        sameWidth: true,
+        forceVisible: false,
         ...rest
     });
 </script>
 
 <button
-    class="web-select is-colored text-primary relative flex h-8 min-w-[145px] cursor-pointer items-center text-sm leading-[1] select-none [all:unset]"
+    class="border-gradient text-primary relative flex h-8 min-w-[145px] cursor-pointer items-center text-sm leading-[1] select-none"
     {...select.trigger}
 >
     {select.value ?? defaultValue}
 </button>
 
-<div {...select.content}>
+<div
+    class="text-primary relative box-border flex max-w-xs flex-col gap-2 overflow-y-auto rounded-xl p-1 text-sm leading-[1.2] select-none"
+    {...select.content}
+>
     {#each options as option}
         <div {...select.getOption(option.value)}>
             {option.label}