first

src/lib/components/ui/select/select-content.svelte

@@ -0,0 +1,36 @@
+<script>
+  import { Select as SelectPrimitive } from "bits-ui";
+  import SelectScrollUpButton from "./select-scroll-up-button.svelte";
+  import SelectScrollDownButton from "./select-scroll-down-button.svelte";
+  import { cn } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    sideOffset = 4,
+    children,
+    ...restProps
+  } = $props();
+</script>
+
+<SelectPrimitive.Portal>
+  <SelectPrimitive.Content
+    bind:ref
+    {sideOffset}
+    class={cn(
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...restProps}
+  >
+    <SelectScrollUpButton />
+    <SelectPrimitive.Viewport
+      class={cn(
+        "h-[var(--bits-select-anchor-height)] w-full min-w-[var(--bits-select-anchor-width)] p-1",
+      )}
+    >
+      {@render children?.()}
+    </SelectPrimitive.Viewport>
+    <SelectScrollDownButton />
+  </SelectPrimitive.Content>
+</SelectPrimitive.Portal>