next: migrate to svelte 5

packages/svelte-ux/package.json

@@ -72,7 +72,7 @@
     "zod": "^3.24.1"
   },
   "peerDependencies": {
-    "svelte": "^3.56.0 || ^4.0.0 || ^5.0.0"
+    "svelte": "^5.0.0"
   },
   "main": "./dist/index.js",
   "exports": {

packages/svelte-ux/src/docs/Blockquote.svelte

@@ -2,6 +2,13 @@
   import { mdiInformation } from '@mdi/js';
   import Icon from '../lib/components/Icon.svelte';
   import { cls } from '$lib/utils/styles.js';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    children?: Snippet;
+  }
+
+  let { children }: Props = $props();
 </script>
 
 <div
@@ -11,5 +18,5 @@
   )}
 >
   <Icon data={mdiInformation} class="text-primary" />
-  <slot />
+  {@render children?.()}
 </div>

packages/svelte-ux/src/docs/Header1.svelte

@@ -1,5 +1,12 @@
 <script lang="ts">
+  import type { ComponentProps, Snippet } from 'svelte';
   import { SectionDivider } from 'svelte-ux';
+
+  interface Props {
+    children?: Snippet;
+  }
+
+  let { children, ...restProps }: Props & ComponentProps<typeof SectionDivider> = $props();
 </script>
 
 <!--
@@ -9,6 +16,6 @@
       - Maybe possible to set/get props from markdown/mdsvex
         - Example: `#API { id: 'api' }
 -->
-<SectionDivider {...$$restProps}>
-  <slot />
+<SectionDivider {...restProps}>
+  {@render children?.()}
 </SectionDivider>

packages/svelte-ux/src/docs/Layout.svelte

@@ -1,15 +1,21 @@
-<script context="module">
+<script module>
   // Custom components: https://mdsvex.com/docs#custom-components
   import blockquote from './Blockquote.svelte';
   import a from './Link.svelte';
   import h1 from './Header1.svelte';
+  import type { Snippet } from 'svelte';
 
   export { a, blockquote };
 </script>
 
 <script lang="ts">
+  interface Props {
+    children?: Snippet;
+  }
+
+  let { children }: Props = $props();
   // frontmatter: https://mdsvex.com/docs#frontmatter-1
   // export let description = undefined;
 </script>
 
-<slot />
+{@render children?.()}

packages/svelte-ux/src/docs/Link.svelte

@@ -1,5 +1,16 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+  interface Props {
+    children?: Snippet;
+  }
+
+  let { children, ...restProps }: Props & HTMLAnchorAttributes = $props();
+</script>
+
 <!-- href provided by markdown/mdsvex -->
-<!-- svelte-ignore a11y-missing-attribute -->
-<a class="text-primary font-medium" {...$$restProps}>
-  <slot />
+<!-- svelte-ignore a11y_missing_attribute -->
+<a class="text-primary font-medium" {...restProps}>
+  {@render children?.()}
 </a>

packages/svelte-ux/src/docs/ViewSourceButton.svelte

@@ -8,41 +8,51 @@
   import Toggle from '../lib/components/Toggle.svelte';
   import Tooltip from '../lib/components/Tooltip.svelte';
 
-  export let label: string;
-  export let source: string | undefined = undefined;
-  export let href: string | undefined = undefined;
-  export let icon: ComponentProps<Button>['icon'];
+  interface Props {
+    label: string;
+    source?: string;
+    href?: string;
+    icon: ComponentProps<typeof Button>['icon'];
+  }
+
+  let { label, source, href, icon }: Props = $props();
 </script>
 
 {#if source}
-  <Toggle let:on={open} let:toggle let:toggleOff>
-    <Button {icon} on:click={toggle} variant="fill-light" color="primary" size="sm">{label}</Button>
-    <Dialog
-      {open}
-      on:close={toggleOff}
-      class="max-h-[98dvh] md:max-h-[90dvh] max-w-[98vw] md:max-w-[90vw] grid grid-rows-[auto,1fr,auto]"
-    >
-      <div class="grid grid-cols-[1fr,auto] gap-3 items-center p-4">
-        <div class="overflow-auto">
-          <div class="text-lg font-semibold">{label}</div>
-          <div class="text-xs text-surface-content/50 truncate">{href}</div>
-        </div>
+  <Toggle>
+    {#snippet children({ on: open, toggle, toggleOff })}
+      <Button {icon} onclick={toggle} variant="fill-light" color="primary" size="sm"
+        >{label}</Button
+      >
+      <Dialog
+        {open}
+        onClose={toggleOff}
+        class="max-h-[98dvh] md:max-h-[90dvh] max-w-[98vw] md:max-w-[90vw] grid grid-rows-[auto,1fr,auto]"
+      >
+        <div class="grid grid-cols-[1fr,auto] gap-3 items-center p-4">
+          <div class="overflow-auto">
+            <div class="text-lg font-semibold">{label}</div>
+            <div class="text-xs text-surface-content/50 truncate">{href}</div>
+          </div>
 
-        {#if href}
-          <Button icon={mdiGithub} variant="fill-light" color="primary" {href} target="_blank">
-            View on Github
-          </Button>
-        {/if}
-      </div>
+          {#if href}
+            <Button icon={mdiGithub} variant="fill-light" color="primary" {href} target="_blank">
+              View on Github
+            </Button>
+          {/if}
+        </div>
 
-      <div class="overflow-auto">
-        <Code {source} language={source.startsWith('<script') ? 'svelte' : 'js'} />
-      </div>
+        <div class="overflow-auto">
+          <Code {source} language={source.startsWith('<script') ? 'svelte' : 'js'} />
+        </div>
 
-      <div slot="actions">
-        <Button variant="fill" color="primary">Close</Button>
-      </div>
-    </Dialog>
+        {#snippet actions()}
+          <div>
+            <Button variant="fill" color="primary">Close</Button>
+          </div>
+        {/snippet}
+      </Dialog>
+    {/snippet}
   </Toggle>
 {:else if href}
   <Tooltip title="Edit this page">

packages/svelte-ux/src/lib/actions/table.ts

@@ -39,9 +39,7 @@ export const tableCell: Action<HTMLElement, TableCellOptions> = (node, options)
         tracker.addClass('cursor-pointer');
 
         if (order) {
-          tracker.addEventListener('click', () =>
-            order.onHeaderClick(new CustomEvent('headerClick', { detail: { column } }))
-          );
+          tracker.addEventListener('click', () => order.onHeaderClick(column));
         }
       }
     }

packages/svelte-ux/src/lib/actions/types.d.ts

@@ -2,23 +2,23 @@
 declare namespace svelteHTML {
   interface HTMLAttributes<T> {
     // use:intersection
-    'on:intersecting'?: (event: CustomEvent<IntersectionObserverEntry>) => void;
+    'onintersecting'?: (event: CustomEvent<IntersectionObserverEntry>) => void;
 
     // use:mutate
-    'on:mutate'?: (event: CustomEvent<MutationRecord[]>) => void;
+    'onmutate'?: (event: CustomEvent<MutationRecord[]>) => void;
 
     // use:movable
-    'on:movestart'?: (event: CustomEvent<{ x: number; y: number }>) => void;
-    'on:move'?: (event: CustomEvent<{ x: number; y: number; dx: number; dy: number }>) => void;
-    'on:moveend'?: (event: CustomEvent<{ x: number; y: number }>) => void;
+    'onmovestart'?: (event: CustomEvent<{ x: number; y: number }>) => void;
+    'onmove'?: (event: CustomEvent<{ x: number; y: number; dx: number; dy: number }>) => void;
+    'onmoveend'?: (event: CustomEvent<{ x: number; y: number }>) => void;
 
     // use:popover
-    'on:clickOutside'?: (event: CustomEvent) => void;
+    'onclickOutside'?: (event: CustomEvent) => void;
 
     // use:overflow
-    'on:overflow'?: (event: CustomEvent<{ overflowX: number; overflowY: number }>) => void;
+    'onoverflow'?: (event: CustomEvent<{ overflowX: number; overflowY: number }>) => void;
 
     // use:longpress
-    'on:longpress'?: (event: CustomEvent) => void;
+    'onlongpress'?: (event: CustomEvent) => void;
   }
 }