update

src/lib/components/ThemeSelect.svelte

@@ -2,8 +2,9 @@
     import { type Theme, currentTheme } from '$routes/+layout.svelte';
 
     import Select, { type SelectOption } from './Select.svelte';
+    import { Select as S } from '$lib/components/ui';
 
-    const options: SelectOption<Theme>[] = [
+    const options = [
         {
             value: 'dark',
             label: 'Dark',
@@ -23,3 +24,4 @@
 </script>
 
 <Select {options} bind:value={$currentTheme} placement="top" />
+<S {options} bind:value={$currentTheme} />

src/lib/components/ui/index.ts

@@ -1,3 +1,4 @@
 export { default as Button } from './button.svelte';
 export { default as InlineTag } from './inline-tag.svelte';
 export { default as Icon, type IconType } from './icon';
+export { default as Select } from './select.svelte';

src/lib/components/ui/select.svelte

@@ -1,21 +1,32 @@
 <script lang="ts">
-    import { Select } from 'melt/builders';
+    import { Select, type SelectProps } from 'melt/builders';
 
     type Props = {
         options: Array<{
             label: string;
             value: string;
+            icon: string;
         }>;
-    };
+        defaultValue?: string;
+        value?: string;
+    } & SelectProps<string>;
 
-    const { options }: Props = $props();
+    const {
+        options,
+        value = $bindable(),
+        defaultValue = 'Select a value',
+        ...rest
+    }: Props = $props();
     type Option = (typeof options)[number];
 
-    const select = new Select<Option['value']>();
+    const select = new Select<Option['value']>({
+        value,
+        ...rest
+    });
 </script>
 
 <button {...select.trigger}>
-    {select.value ?? 'Select an anime'}
+    {select.value ?? defaultValue}
 </button>
 
 <div {...select.content}>

src/routes/+layout.svelte

@@ -195,33 +195,16 @@
     <link rel="canonical" href={canonicalUrl} />
 </svelte:head>
 
-<a class="skip" href="#main">Skip to content</a>
+<a
+    class="bg-mint-500 focus:pointer-events-all pointer-events-none absolute inset-y-0 z-9999 block px-5 py-3 text-black underline opacity-0 focus:relative focus:opacity-1"
+    href="#main">Skip to content</a
+>
 
 <slot />
+<SvelteTheme />
 
 <style lang="scss">
     :global(html) {
         color-scheme: dark;
     }
-
-    .skip {
-        position: absolute;
-        inset-block-start: 0;
-        z-index: 9999;
-
-        display: block;
-        background-color: hsl(var(--web-color-mint-500));
-        color: hsl(var(--web-color-black));
-        text-decoration: underline;
-        opacity: 0;
-
-        padding: 0.75rem 1.25rem;
-        pointer-events: none;
-    }
-
-    .skip:focus {
-        opacity: 1;
-        position: relative;
-        pointer-events: all;
-    }
 </style>