Update Website

src/components/Card.svelte

@@ -66,14 +66,21 @@
         transition: scale 300ms cubic-bezier(0.2, 3, 0.67, 0.6);
 
         :global(h1) {
-            @apply text-xl font-bold mt-4;
+            margin-top: 1rem;
+            font-size: 1.25rem;
+            line-height: 1.75rem;
+            font-weight: 700;
             font-family: "Barlow Condensed", sans-serif;
             letter-spacing: 0.06em;
         }
 
         :global(svg) {
             color: #f59e0b;
-            @apply transition-transform duration-300 ease-in-out hover:scale-110;
+            transition: transform 300ms ease-in-out;
+        }
+
+        :global(svg:hover) {
+            transform: scale(1.1);
         }
     }
 

src/components/DashboardComponent.svelte

@@ -18,7 +18,7 @@
   -->
 
 <script lang="ts">
-    import {t} from "astro-i18n"
+    import {t} from "$lib/i18n"
     import UserInfo from "./dashboard/UserInfo.svelte";
     import {dataRepo} from "@repo/data.ts";
     import UploadModal from "@components/dashboard/UploadModal.svelte";

src/components/EloTable.svelte

@@ -18,7 +18,7 @@
   -->
 
 <script lang="ts">
-    import {t} from "astro-i18n";
+    import {t} from "$lib/i18n";
     import {statsRepo} from "@repo/stats.ts";
     import "@styles/table.css"
 

src/components/FightStatistics.svelte

@@ -19,7 +19,7 @@
 
 <script lang="ts">
     import FightStatsChart from "./FightStatsChart.svelte";
-    import { t } from "astro-i18n";
+    import { t } from "$lib/i18n";
     import { statsRepo } from "@repo/stats.ts";
 
     let request = getStats();

src/components/FightTable.svelte

@@ -20,7 +20,7 @@
 
 <script lang="ts">
     import { window } from "./utils.ts";
-    import { astroI18n, t } from "astro-i18n";
+    import { astroI18n, t } from "$lib/i18n";
     import type { EventFight, ExtendedEvent } from "@type/event";
     import "@styles/table.css";
 

src/components/GroupTable.svelte

@@ -20,7 +20,7 @@
 
 <script lang="ts">
     import { window } from "./utils.ts";
-    import { t } from "astro-i18n";
+    import { t } from "$lib/i18n";
     import type { ExtendedEvent } from "@type/event.ts";
     import "@styles/table.css";
 

src/components/LanguageWarning.astro

@@ -1,5 +1,5 @@
 ---
-import { t } from "astro-i18n";
+import { t } from "$lib/i18n";
 ---
 
 <div class="border-l-2 border-amber-500 bg-amber-500/5 p-4" role="alert">

src/components/Login.svelte

@@ -20,7 +20,7 @@
 <script lang="ts">
     import { preventDefault } from "svelte/legacy";
     import { l } from "@utils/util.ts";
-    import { t } from "astro-i18n";
+    import { t } from "$lib/i18n";
     import { get } from "svelte/store";
     import { navigate } from "astro:transitions/client";
     import { onMount } from "svelte";

src/components/Navbar.svelte

@@ -20,10 +20,10 @@
 <script lang="ts">
     import "../styles/button.css";
     import { CaretDownOutline, GlobeOutline } from "flowbite-svelte-icons";
-    import { t, l } from "astro-i18n";
+    import { t, l } from "$lib/i18n";
     import { onMount } from "svelte";
     import { loggedIn } from "@repo/authv2.ts";
-    import { astroI18n } from "astro-i18n";
+    import { astroI18n } from "$lib/i18n";
     interface Props {
         logo?: import("svelte").Snippet;
     }

src/components/PostComponent.astro

@@ -1,7 +1,7 @@
 ---
 import type { CollectionEntry } from "astro:content";
 import { l } from "../util/util";
-import { astroI18n } from "astro-i18n";
+import { astroI18n, stripLocaleFromPath } from "$lib/i18n";
 import { Image } from "astro:assets";
 import TagComponent from "./TagComponent.astro";
 import P from "./P.astro";
@@ -19,7 +19,7 @@ const {
     slim: boolean;
 } = Astro.props as Props;
 
-const postUrl = l(`/announcements/${post.slug.split("/").slice(1).join("/")}`);
+const postUrl = l(`/announcements/${stripLocaleFromPath(post.id)}`);
 ---
 
 <Card extraClasses={`w-full items-start mx-0 ${slim ? "m-0 p-2 backdrop-blur-xl bg-transparent border-0" : "border-t-2 border-t-amber-500/30"}`} hoverEffect={false}>

src/components/ServerStatus.svelte

@@ -18,7 +18,7 @@
   -->
 
 <script lang="ts">
-    import { t } from "astro-i18n"
+    import { t } from "$lib/i18n"
     import {server} from "./stores/stores.ts";
 
     function generateVersionString(version: string): string {

src/components/admin/pages/event/RefereesList.svelte

@@ -116,6 +116,6 @@
 
 <style>
     li {
-        @apply py-2;
+        padding-block: 0.5rem;
     }
 </style>

src/components/dashboard/SchematicInfoModal.svelte

@@ -18,7 +18,7 @@
   -->
 
 <script lang="ts">
-    import {astroI18n, t} from "astro-i18n";
+    import {astroI18n, t} from "$lib/i18n";
     import {CheckSolid, XCircleOutline} from "flowbite-svelte-icons";
     import type {SchematicInfo} from "@type/schem.ts";
     import {createEventDispatcher} from "svelte";

src/components/dashboard/SchematicList.svelte

@@ -20,7 +20,7 @@
 <script lang="ts">
   import { preventDefault } from 'svelte/legacy';
 
-    import {t} from "astro-i18n";
+    import {t} from "$lib/i18n";
     import {
         ChevronDoubleRightOutline,
         FolderOutline,
@@ -143,15 +143,32 @@
 
 <style lang="postcss">
   table {
-    @apply w-full;
+    width: 100%;
   }
 
   tr {
-    @apply transition-colors cursor-pointer border-b
-        dark:hover:bg-gray-800 hover:bg-gray-300;
+    cursor: pointer;
+    border-bottom: 1px solid #e5e7eb;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-duration: 150ms;
+  }
+
+  tr:hover {
+    background-color: #d1d5db;
+  }
+
+  :global(.dark) tr:hover {
+    background-color: #1f2937;
   }
 
   th {
-    @apply text-left py-4 md:px-2;
+    padding-block: 1rem;
+    text-align: left;
   }
-</style>
+
+  @media (min-width: 768px) {
+    th {
+      padding-inline: 0.5rem;
+    }
+  }
+</style>

src/components/dashboard/SchematicListTile.svelte

@@ -21,7 +21,7 @@
   import { createBubbler, preventDefault } from 'svelte/legacy';
 
   const bubble = createBubbler();
-    import {astroI18n, t} from "astro-i18n";
+    import {astroI18n, t} from "$lib/i18n";
     import {CheckSolid, FileOutline, FolderOutline, XCircleOutline} from "flowbite-svelte-icons";
     import type {Schematic} from "@type/schem.ts";
     import type {Player} from "@type/data.ts";
@@ -82,11 +82,32 @@
 
 <style lang="scss">
     tr {
-        @apply transition-colors cursor-pointer border-b border-gray-300
-            dark:hover:bg-gray-800 hover:bg-gray-300 dark:border-neutral-700;
+        cursor: pointer;
+        border-bottom: 1px solid #d1d5db;
+        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+        transition-duration: 150ms;
+    }
+
+    tr:hover {
+        background-color: #d1d5db;
+    }
+
+    :global(.dark) tr {
+        border-bottom-color: #404040;
+    }
+
+    :global(.dark) tr:hover {
+        background-color: #1f2937;
     }
 
     th {
-        @apply text-left py-4 md:px-2;
+        padding-block: 1rem;
+        text-align: left;
     }
-</style>
+
+    @media (min-width: 768px) {
+        th {
+            padding-inline: 0.5rem;
+        }
+    }
+</style>

src/components/dashboard/Statistics.svelte

@@ -19,7 +19,7 @@
 
 <script lang="ts">
     import type {Player} from "@type/data.ts";
-    import {astroI18n, t} from "astro-i18n"
+    import {astroI18n, t} from "$lib/i18n"
     import {statsRepo} from "@repo/stats.ts";
 
   interface Props {

src/components/dashboard/UploadModal.svelte

@@ -21,7 +21,7 @@
     import {createEventDispatcher} from "svelte";
     import {schemRepo} from "@repo/schem.ts";
     import SWModal from "@components/styled/SWModal.svelte";
-    import {t} from "astro-i18n";
+    import {t} from "$lib/i18n";
 
     const dispatch = createEventDispatcher();
 

src/components/dashboard/UserInfo.svelte

@@ -18,7 +18,7 @@
   -->
 
 <script lang="ts">
-    import { t } from "astro-i18n";
+    import { t } from "$lib/i18n";
     import type { Player } from "@type/data.ts";
     import { l } from "@utils/util.ts";
     import Statistics from "./Statistics.svelte";

src/components/event/Calendar.svelte

@@ -3,7 +3,7 @@
     import "dayjs/locale/de";
     import type { ExtendedEvent } from "../types/event";
     import { Button } from "../ui/button";
-    import { ChevronLeft, ChevronRight } from "lucide-svelte";
+    import { ChevronLeft, ChevronRight } from "@lucide/svelte";
     import * as Card from "../ui/card";
     import EventCard from "./EventCard.svelte";
     import SWButton from "@components/styled/SWButton.svelte";

src/components/event/EventPage.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
     import type { ExtendedEvent } from "../types/event";
     import { Button } from "../ui/button";
-    import { Calendar } from "lucide-svelte";
-    import { List } from "lucide-svelte";
+    import { Calendar } from "@lucide/svelte";
+    import { List } from "@lucide/svelte";
     import EventList from "./EventList.svelte";
     import CalendarView from "./Calendar.svelte";
 

src/components/moderator/components/FightEdit.svelte

@@ -8,7 +8,7 @@
     import { Popover, PopoverContent, PopoverTrigger } from "@components/ui/popover";
     import { gamemodes, maps } from "@components/stores/stores";
     import { CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, Command } from "@components/ui/command";
-    import { ChevronsUpDown, Check } from "lucide-svelte";
+    import { ChevronsUpDown, Check } from "@lucide/svelte";
     import { Button } from "@components/ui/button";
     import { cn } from "@components/utils";
     import { Select, SelectContent, SelectItem, SelectTrigger } from "@components/ui/select";

src/components/moderator/components/GroupSelector.svelte

@@ -2,7 +2,7 @@
     import type { GroupUpdateEdit, ResponseGroups, SWEvent } from "@type/event";
     import { Popover, PopoverContent, PopoverTrigger } from "@components/ui/popover";
     import { CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, Command } from "@components/ui/command";
-    import { ChevronsUpDownIcon, PlusIcon, CheckIcon, MinusIcon } from "lucide-svelte";
+    import { ChevronsUpDownIcon, PlusIcon, CheckIcon, MinusIcon } from "@lucide/svelte";
     import { Button } from "@components/ui/button";
     import { cn } from "@components/utils";
     import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@components/ui/dialog";

src/components/moderator/components/TeamSelector.svelte

@@ -7,7 +7,7 @@
     import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/ui/tabs";
     import { Tooltip, TooltipContent, TooltipTrigger } from "@components/ui/tooltip";
     import { cn } from "@components/utils";
-    import { Check, ChevronsUpDown, GitPullRequestArrow, Plus } from "lucide-svelte";
+    import { Check, ChevronsUpDown, GitPullRequestArrow, Plus } from "@lucide/svelte";
     import type { EventModel } from "../pages/event/eventmodel.svelte";
     import { Select, SelectContent, SelectItem, SelectTrigger } from "@components/ui/select";
     import { Label } from "@components/ui/label";

src/components/moderator/layout/NavLinks.svelte

@@ -18,14 +18,14 @@
   -->
 
 <script lang="ts">
-    import { location } from "svelte-spa-router";
+    import { router } from "svelte-spa-router";
 </script>
 
 <nav class="flex items-center space-x-4 lg:space-x-6 mx-6">
-    <a href="#/" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted-foreground={$location !== "/"}> Dashboard </a>
-    <a href="#/events" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted-foreground={!$location.startsWith("/event")}> Events </a>
-    <a href="#/players" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted-foreground={$location !== "/players"}> Players </a>
-    <a href="#/pages" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted-foreground={$location !== "/pages"}> Pages </a>
-    <a href="#/schematics" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted-foreground={$location !== "/schematics"}> Schematics </a>
-    <a href="#/logs" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted-foreground={$location !== "/logs"}> Logs </a>
+    <a href="#/" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted-foreground={router.location !== "/"}> Dashboard </a>
+    <a href="#/events" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted-foreground={!router.location.startsWith("/event")}> Events </a>
+    <a href="#/players" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted-foreground={router.location !== "/players"}> Players </a>
+    <a href="#/pages" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted-foreground={router.location !== "/pages"}> Pages </a>
+    <a href="#/schematics" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted-foreground={router.location !== "/schematics"}> Schematics </a>
+    <a href="#/logs" class="hover:text-primary text-sm font-medium transition-colors" class:text-muted-foreground={router.location !== "/logs"}> Logs </a>
 </nav>

src/components/moderator/pages/event/EventEdit.svelte

@@ -25,10 +25,10 @@
     import DateTimePicker from "@components/ui/datetime-picker/DateTimePicker.svelte";
     import { fromAbsolute } from "@internationalized/date";
     import { Button, buttonVariants } from "@components/ui/button";
-    import { ChevronsUpDown } from "lucide-svelte";
+    import { ChevronsUpDown } from "@lucide/svelte";
     import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@components/ui/command";
     import { schemTypes } from "@stores/stores.ts";
-    import Check from "lucide-svelte/icons/check";
+    import Check from "@lucide/svelte/icons/check";
     import { cn } from "@components/utils.ts";
     import { Switch } from "@components/ui/switch";
     import { eventRepo } from "@repo/event.ts";

src/components/moderator/pages/event/EventFightList.svelte

@@ -34,7 +34,7 @@
     import GroupEditDialog from "./GroupEditDialog.svelte";
     import GroupResultsDialog from "./GroupResultsDialog.svelte";
     import type { ResponseGroups } from "@type/event";
-    import { EditIcon, GroupIcon, LinkIcon } from "lucide-svelte";
+    import { EditIcon, GroupIcon, LinkIcon } from "@lucide/svelte";
     import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@components/ui/dropdown-menu";
     import GroupSelector from "@components/moderator/components/GroupSelector.svelte";
     import { fightRepo } from "@components/repo/fight";

src/components/moderator/pages/event/FightEditRow.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { EventFight, EventFightEdit, ResponseGroups, ResponseRelation, SWEvent } from "@type/event";
     import { Button } from "@components/ui/button";
-    import { EditIcon, CopyIcon } from "lucide-svelte";
+    import { EditIcon, CopyIcon } from "@lucide/svelte";
     import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@components/ui/dialog";
     import FightEdit from "@components/moderator/components/FightEdit.svelte";
     import type { Team } from "@components/types/team";

src/components/moderator/pages/events/Events.svelte

@@ -25,7 +25,7 @@
     import { Input } from "@components/ui/input/index.js";
     import { Label } from "@components/ui/label/index.js";
     import DateTimePicker from "@components/ui/datetime-picker/DateTimePicker.svelte";
-    import { PlusIcon } from "lucide-svelte";
+    import { PlusIcon } from "@lucide/svelte";
     import dayjs from "dayjs";
     import { fromAbsolute, now, ZonedDateTime } from "@internationalized/date";
 

src/components/moderator/pages/generators/gens/elimination/DoubleEliminationGenerator.svelte

@@ -12,7 +12,7 @@
     import { Slider } from "@components/ui/slider";
     import { fromAbsolute } from "@internationalized/date";
     import dayjs from "dayjs";
-    import { Plus, Shuffle } from "lucide-svelte";
+    import { Plus, Shuffle } from "@lucide/svelte";
     import { replace } from "svelte-spa-router";
 
     let { data }: { data: ExtendedEvent } = $props();

src/components/moderator/pages/generators/gens/elimination/SingleEliminationGenerator.svelte

@@ -12,7 +12,7 @@
     import { Slider } from "@components/ui/slider";
     import { fromAbsolute } from "@internationalized/date";
     import dayjs from "dayjs";
-    import { Plus, Shuffle } from "lucide-svelte";
+    import { Plus, Shuffle } from "@lucide/svelte";
     import { replace } from "svelte-spa-router";
 
     let { data }: { data: ExtendedEvent } = $props();

src/components/moderator/pages/generators/gens/group/GroupPhaseGenerator.svelte

@@ -16,7 +16,7 @@
     import { Slider } from "@components/ui/slider";
     import { fromAbsolute, fromDate, parseDateTime, parseDuration } from "@internationalized/date";
     import dayjs from "dayjs";
-    import { Plus } from "lucide-svelte";
+    import { Plus } from "@lucide/svelte";
     import { replace } from "svelte-spa-router";
     let {
         data,

src/components/moderator/pages/logs/AuditLog.svelte

@@ -11,7 +11,7 @@
     import { Input } from "@components/ui/input";
     import { Popover, PopoverContent, PopoverTrigger } from "@components/ui/popover";
     import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@components/ui/command";
-    import { Check } from "lucide-svelte";
+    import { Check } from "@lucide/svelte";
     import { cn } from "@components/utils";
     import DateTimePicker from "@components/ui/datetime-picker/DateTimePicker.svelte";
     import PlayerSelector from "@components/ui/PlayerSelector.svelte";

src/components/moderator/pages/pages/EditorWithTabs.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { manager, OpenEditPage } from "./page.svelte";
-    import { File, FileCode2, FileText, Save, X } from "lucide-svelte";
+    import { File, FileCode2, FileText, Save, X } from "@lucide/svelte";
     import { onMount } from "svelte";
     import { EditorView } from "@codemirror/view";
     import { basicSetup } from "codemirror";

src/components/moderator/pages/pages/FrontmatterEditor.svelte

@@ -3,7 +3,7 @@
     import { Input } from "@components/ui/input";
     import { Label } from "@components/ui/label";
     import { Checkbox } from "@components/ui/checkbox";
-    import { Plus, X } from "lucide-svelte";
+    import { Plus, X } from "@lucide/svelte";
     import yaml from "js-yaml";
     import { manager } from "./page.svelte";
     import type { FrontmatterFieldSchema } from "../../../../content/frontmatter-editor-schemas";

src/components/moderator/pages/pages/Pages.svelte

@@ -6,7 +6,7 @@
     import EditorWithTabs from "./EditorWithTabs.svelte";
     import { Popover, PopoverContent, PopoverTrigger } from "@components/ui/popover";
     import { Button } from "@components/ui/button";
-    import { Check, ChevronsUpDown, RefreshCw, FileImage, Plus, GitBranch, Upload } from "lucide-svelte";
+    import { Check, ChevronsUpDown, RefreshCw, FileImage, Plus, GitBranch, Upload } from "@lucide/svelte";
     import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@components/ui/command";
     import { cn } from "@components/utils";
     import { pageRepo } from "@components/repo/page";

src/components/moderator/pages/pages/PagesList.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { ChevronDown, ChevronRight, Folder, FileJson, FileText, File, FilePlus } from "lucide-svelte";
+    import { ChevronDown, ChevronRight, Folder, FileJson, FileText, File, FilePlus } from "@lucide/svelte";
     import type { DirTree } from "./page.svelte";
     import PagesList from "./PagesList.svelte";
     import { slide } from "svelte/transition";

src/components/moderator/pages/pages/frontmatter/EventSelector.svelte

@@ -4,7 +4,7 @@
     import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@components/ui/command";
     import { eventRepo } from "@repo/event";
     import type { ShortEvent } from "@type/event";
-    import { CalendarDays, Check, ChevronsUpDown } from "lucide-svelte";
+    import { CalendarDays, Check, ChevronsUpDown } from "@lucide/svelte";
 
     const {
         value,

src/components/moderator/pages/pages/frontmatter/ImageFrontmatterSelector.svelte

@@ -2,7 +2,7 @@
     import { Button } from "@components/ui/button";
     import { Input } from "@components/ui/input";
     import { Popover, PopoverContent, PopoverTrigger } from "@components/ui/popover";
-    import { Image, Search } from "lucide-svelte";
+    import { Image, Search } from "@lucide/svelte";
     import { manager } from "../page.svelte";
 
     const {

src/components/moderator/pages/pages/frontmatter/ViewConfigEditor.svelte

@@ -4,7 +4,7 @@
     import { Label } from "@components/ui/label";
     import { eventRepo } from "@repo/event";
     import type { EventFight, ExtendedEvent, ResponseGroups } from "@type/event";
-    import { Plus, Trash2 } from "lucide-svelte";
+    import { Plus, Trash2 } from "@lucide/svelte";
 
     type StageType = "GROUP" | "ELEMINATION" | "DOUBLE_ELEMINATION";
     type RoundPrefix = "Runde" | "Tag";

src/components/ui/PlayerSelector.svelte

@@ -2,7 +2,7 @@
     import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@components/ui/command";
     import { Popover, PopoverContent, PopoverTrigger } from "@components/ui/popover";
     import { Button } from "@components/ui/button";
-    import { Check, ChevronsUpDown } from "lucide-svelte";
+    import { Check, ChevronsUpDown } from "@lucide/svelte";
     import { cn } from "@components/utils";
     import { dataRepo } from "@repo/data";
     import type { Player } from "@type/data";

src/components/ui/accordion/accordion-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Accordion as AccordionPrimitive } from "bits-ui";
-	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import ChevronDown from "@lucide/svelte/icons/chevron-down";
 	import { cn } from "$lib/components/utils.js";
 
 	type $$Props = AccordionPrimitive.TriggerProps;

src/components/ui/breadcrumb/breadcrumb-ellipsis.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Ellipsis from "lucide-svelte/icons/ellipsis";
+	import Ellipsis from "@lucide/svelte/icons/ellipsis";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "$lib/components/utils.js";
 

src/components/ui/breadcrumb/breadcrumb-separator.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLLiAttributes } from "svelte/elements";
-	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import ChevronRight from "@lucide/svelte/icons/chevron-right";
 	import { cn } from "$lib/components/utils.js";
 
 	type $$Props = HTMLLiAttributes & {

src/components/ui/calendar/calendar-next-button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import ChevronRight from "@lucide/svelte/icons/chevron-right";
 	import { buttonVariants } from "$lib/components/ui/button/index.js";
 	import { cn } from "$lib/components/utils.js";
 

src/components/ui/calendar/calendar-prev-button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import ChevronLeft from "lucide-svelte/icons/chevron-left";
+	import ChevronLeft from "@lucide/svelte/icons/chevron-left";
 	import { buttonVariants } from "$lib/components/ui/button/index.js";
 	import { cn } from "$lib/components/utils.js";
 

src/components/ui/carousel/carousel-next.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ArrowRight from "lucide-svelte/icons/arrow-right";
+	import ArrowRight from "@lucide/svelte/icons/arrow-right";
 	import type { VariantProps } from "tailwind-variants";
 	import { getEmblaContext } from "./context.js";
 	import { cn } from "$lib/components/utils.js";

src/components/ui/carousel/carousel-previous.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ArrowLeft from "lucide-svelte/icons/arrow-left";
+	import ArrowLeft from "@lucide/svelte/icons/arrow-left";
 	import type { VariantProps } from "tailwind-variants";
 	import { getEmblaContext } from "./context.js";
 	import { cn } from "$lib/components/utils.js";

src/components/ui/command/command-input.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "bits-ui";
-	import Search from "lucide-svelte/icons/search";
+	import Search from "@lucide/svelte/icons/search";
 	import { cn } from "$lib/components/utils.js";
 
 	let {

src/components/ui/context-menu/context-menu-checkbox-item.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import Check from "lucide-svelte/icons/check";
+	import Check from "@lucide/svelte/icons/check";
 	import { cn } from "$lib/components/utils.js";
 
 	type $$Props = ContextMenuPrimitive.CheckboxItemProps;
-	type $$Events = ContextMenuPrimitive.CheckboxItemEvents;
-
 	let className: $$Props["class"] = undefined;
 	export let checked: $$Props["checked"] = undefined;
 	export { className as class };
@@ -26,10 +24,12 @@
 	on:pointerleave
 	on:pointermove
 >
-	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<ContextMenuPrimitive.CheckboxIndicator>
+	{#snippet children({ checked })}
+		<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		{#if checked}
 			<Check class="h-4 w-4" />
-		</ContextMenuPrimitive.CheckboxIndicator>
-	</span>
-	<slot />
+		{/if}
+		</span>
+		<slot />
+	{/snippet}
 </ContextMenuPrimitive.CheckboxItem>

src/components/ui/context-menu/context-menu-label.svelte

@@ -2,7 +2,7 @@
 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
 	import { cn } from "$lib/components/utils.js";
 
-	type $$Props = ContextMenuPrimitive.LabelProps & {
+	type $$Props = ContextMenuPrimitive.GroupHeadingProps & {
 		inset?: boolean;
 	};
 
@@ -11,9 +11,9 @@
 	export { className as class };
 </script>
 
-<ContextMenuPrimitive.Label
+<ContextMenuPrimitive.GroupHeading
 	class={cn("text-foreground px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
 	{...$$restProps}
 >
 	<slot />
-</ContextMenuPrimitive.Label>
+</ContextMenuPrimitive.GroupHeading>

src/components/ui/context-menu/context-menu-radio-item.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import Circle from "lucide-svelte/icons/circle";
+	import Circle from "@lucide/svelte/icons/circle";
 	import { cn } from "$lib/components/utils.js";
 
 	type $$Props = ContextMenuPrimitive.RadioItemProps;
-	type $$Events = ContextMenuPrimitive.RadioItemEvents;
-
 	let className: $$Props["class"] = undefined;
 	export let value: ContextMenuPrimitive.RadioItemProps["value"];
 	export { className as class };
@@ -26,10 +24,12 @@
 	on:pointerleave
 	on:pointermove
 >
-	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<ContextMenuPrimitive.RadioIndicator>
+	{#snippet children({ checked })}
+		<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		{#if checked}
 			<Circle class="h-2 w-2 fill-current" />
-		</ContextMenuPrimitive.RadioIndicator>
-	</span>
-	<slot />
+		{/if}
+		</span>
+		<slot />
+	{/snippet}
 </ContextMenuPrimitive.RadioItem>

src/components/ui/context-menu/context-menu-sub-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import ChevronRight from "@lucide/svelte/icons/chevron-right";
 	import { cn } from "$lib/components/utils.js";
 
 	type $$Props = ContextMenuPrimitive.SubTriggerProps & {

src/components/ui/datetime-picker/DateTimePicker.svelte

@@ -22,7 +22,7 @@
     import { Button } from "@components/ui/button";
     import { Popover, PopoverContent, PopoverTrigger } from "$lib/components/ui/popover";
     import { ScrollArea } from "$lib/components/ui/scroll-area";
-    import { CalendarIcon } from "lucide-svelte";
+    import { CalendarIcon } from "@lucide/svelte";
     import { cn } from "@components/utils";
     import { fromDate, type ZonedDateTime } from "@internationalized/date";
     import Input from "../input/input.svelte";

src/components/ui/dialog/dialog-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import X from "lucide-svelte/icons/x";
+	import X from "@lucide/svelte/icons/x";
 	import type { Snippet } from "svelte";
 	import * as Dialog from "./index.js";
 	import { cn } from "$lib/components/utils.js";

src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import Check from "lucide-svelte/icons/check";
+	import Check from "@lucide/svelte/icons/check";
 	import { cn } from "$lib/components/utils.js";
 
 	type $$Props = DropdownMenuPrimitive.CheckboxItemProps;
-	type $$Events = DropdownMenuPrimitive.CheckboxItemEvents;
-
 	let className: $$Props["class"] = undefined;
 	export let checked: $$Props["checked"] = undefined;
 	export { className as class };
@@ -26,10 +24,12 @@
 	on:pointerleave
 	on:pointermove
 >
-	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<DropdownMenuPrimitive.CheckboxIndicator>
+	{#snippet children({ checked })}
+		<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		{#if checked}
 			<Check class="h-4 w-4" />
-		</DropdownMenuPrimitive.CheckboxIndicator>
-	</span>
-	<slot />
+		{/if}
+		</span>
+		<slot />
+	{/snippet}
 </DropdownMenuPrimitive.CheckboxItem>

src/components/ui/dropdown-menu/dropdown-menu-label.svelte

@@ -2,7 +2,7 @@
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 	import { cn } from "$lib/components/utils.js";
 
-	type $$Props = DropdownMenuPrimitive.LabelProps & {
+	type $$Props = DropdownMenuPrimitive.GroupHeadingProps & {
 		inset?: boolean;
 	};
 
@@ -11,9 +11,9 @@
 	export { className as class };
 </script>
 
-<DropdownMenuPrimitive.Label
+<DropdownMenuPrimitive.GroupHeading
 	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
 	{...$$restProps}
 >
 	<slot />
-</DropdownMenuPrimitive.Label>
+</DropdownMenuPrimitive.GroupHeading>

src/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import Circle from "lucide-svelte/icons/circle";
+	import Circle from "@lucide/svelte/icons/circle";
 	import { cn } from "$lib/components/utils.js";
 
 	type $$Props = DropdownMenuPrimitive.RadioItemProps;
-	type $$Events = DropdownMenuPrimitive.RadioItemEvents;
-
 	let className: $$Props["class"] = undefined;
 	export let value: $$Props["value"];
 	export { className as class };
@@ -26,10 +24,12 @@
 	on:pointerleave
 	on:pointermove
 >
-	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<DropdownMenuPrimitive.RadioIndicator>
+	{#snippet children({ checked })}
+		<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		{#if checked}
 			<Circle class="h-2 w-2 fill-current" />
-		</DropdownMenuPrimitive.RadioIndicator>
-	</span>
-	<slot />
+		{/if}
+		</span>
+		<slot />
+	{/snippet}
 </DropdownMenuPrimitive.RadioItem>

src/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import ChevronRight from "@lucide/svelte/icons/chevron-right";
 	import { cn } from "$lib/components/utils.js";
 
 	type $$Props = DropdownMenuPrimitive.SubTriggerProps & {

src/components/ui/menubar/menubar-label.svelte

@@ -2,7 +2,7 @@
 	import { Menubar as MenubarPrimitive } from "bits-ui";
 	import { cn } from "$lib/components/utils.js";
 
-	type $$Props = MenubarPrimitive.LabelProps & {
+	type $$Props = MenubarPrimitive.GroupHeadingProps & {
 		inset?: boolean;
 	};
 
@@ -11,9 +11,9 @@
 	export { className as class };
 </script>
 
-<MenubarPrimitive.Label
+<MenubarPrimitive.GroupHeading
 	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
 	{...$$restProps}
 >
 	<slot />
-</MenubarPrimitive.Label>
+</MenubarPrimitive.GroupHeading>

src/components/ui/pagination/pagination-ellipsis.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Ellipsis from "lucide-svelte/icons/ellipsis";
+	import Ellipsis from "@lucide/svelte/icons/ellipsis";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "$lib/components/utils.js";
 

src/components/ui/pagination/pagination-next-button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Pagination as PaginationPrimitive } from "bits-ui";
-	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import ChevronRight from "@lucide/svelte/icons/chevron-right";
 	import { Button } from "$lib/components/ui/button/index.js";
 	import { cn } from "$lib/components/utils.js";
 

src/components/ui/pagination/pagination-prev-button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Pagination as PaginationPrimitive } from "bits-ui";
-	import ChevronLeft from "lucide-svelte/icons/chevron-left";
+	import ChevronLeft from "@lucide/svelte/icons/chevron-left";
 	import { Button } from "$lib/components/ui/button/index.js";
 	import { cn } from "$lib/components/utils.js";
 

src/components/ui/radio-group/radio-group-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
-	import Circle from "lucide-svelte/icons/circle";
+	import Circle from "@lucide/svelte/icons/circle";
 	import { cn } from "$lib/components/utils.js";
 
 	type $$Props = RadioGroupPrimitive.ItemProps;

src/components/ui/range-calendar/range-calendar-next-button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import ChevronRight from "@lucide/svelte/icons/chevron-right";
 	import { buttonVariants } from "$lib/components/ui/button/index.js";
 	import { cn } from "$lib/components/utils.js";
 

src/components/ui/range-calendar/range-calendar-prev-button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-	import ChevronLeft from "lucide-svelte/icons/chevron-left";
+	import ChevronLeft from "@lucide/svelte/icons/chevron-left";
 	import { buttonVariants } from "$lib/components/ui/button/index.js";
 	import { cn } from "$lib/components/utils.js";
 

src/components/ui/resizable/resizable-handle.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import GripVertical from "lucide-svelte/icons/grip-vertical";
+	import GripVertical from "@lucide/svelte/icons/grip-vertical";
 	import * as ResizablePrimitive from "paneforge";
 	import { cn } from "$lib/components/utils.js";
 

src/components/ui/select/select-item.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Check from "lucide-svelte/icons/check";
+	import Check from "@lucide/svelte/icons/check";
 	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
 	import { cn } from "$lib/components/utils.js";
 

src/components/ui/select/select-label.svelte

@@ -2,15 +2,15 @@
 	import { Select as SelectPrimitive } from "bits-ui";
 	import { cn } from "$lib/components/utils.js";
 
-	type $$Props = SelectPrimitive.LabelProps;
+	type $$Props = SelectPrimitive.GroupHeadingProps;
 
 	let className: $$Props["class"] = undefined;
 	export { className as class };
 </script>
 
-<SelectPrimitive.Label
+<SelectPrimitive.GroupHeading
 	class={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
 	{...$$restProps}
 >
 	<slot />
-</SelectPrimitive.Label>
+</SelectPrimitive.GroupHeading>

src/components/ui/select/select-scroll-down-button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import ChevronDown from "@lucide/svelte/icons/chevron-down";
 	import { Select as SelectPrimitive, type WithoutChildrenOrChild } from "bits-ui";
 	import { cn } from "$lib/components/utils.js";
 

src/components/ui/select/select-scroll-up-button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ChevronUp from "lucide-svelte/icons/chevron-up";
+	import ChevronUp from "@lucide/svelte/icons/chevron-up";
 	import { Select as SelectPrimitive, type WithoutChildrenOrChild } from "bits-ui";
 	import { cn } from "$lib/components/utils.js";
 

src/components/ui/select/select-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
-	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import ChevronDown from "@lucide/svelte/icons/chevron-down";
 	import { cn } from "$lib/components/utils.js";
 
 	let {