diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
index 82743d9d6..998810120 100644
--- a/.github/workflows/chromatic.yml
+++ b/.github/workflows/chromatic.yml
@@ -24,6 +24,7 @@ on:
 
 env:
   PUBLIC_ENV: production
+  NODE_ENV: production
 
 jobs:
   chromatic-deployment:
@@ -43,7 +44,7 @@ jobs:
       - run: npm run sync
       - run: npm run build
       - name: Publish to Chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@v16.6.3
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           exitOnceUploaded: true
diff --git a/src/lib/components/accounts/Mailkey.svelte b/src/lib/components/accounts/Mailkey.svelte
index b48db42b0..8a174e0b2 100644
--- a/src/lib/components/accounts/Mailkey.svelte
+++ b/src/lib/components/accounts/Mailkey.svelte
@@ -68,10 +68,10 @@
     </p>
   {/if}
   <Flex gap={1} wrap justify="center">
-    <Button mode="primary" on:click={create}>
+    <Button mode="primary" onclick={create}>
       {$_("mailkey.create.button")}
     </Button>
-    <Button mode="danger" on:click={destroy}>
+    <Button mode="danger" onclick={destroy}>
       {$_("mailkey.destroy.button")}
     </Button>
   </Flex>
diff --git a/src/lib/components/accounts/Unverified.svelte b/src/lib/components/accounts/Unverified.svelte
index a8e8e3bc8..4e69789f3 100644
--- a/src/lib/components/accounts/Unverified.svelte
+++ b/src/lib/components/accounts/Unverified.svelte
@@ -51,7 +51,7 @@ a user who is logged in but has `verified_journalist = false`.
 </script>
 
 <Tip>
-  <Unverified24 slot="icon" />
+  {#snippet icon()}<Unverified24 />{/snippet}
   <p>{$_("unverified.verify")}</p>
   <Flex class="buttons" gap={1}>
     <Button mode="primary" href={SQUARELET_ORGS_URL} target="_blank">
diff --git a/src/lib/components/accounts/UserMenu.svelte b/src/lib/components/accounts/UserMenu.svelte
index 3190e2034..634d54ca5 100644
--- a/src/lib/components/accounts/UserMenu.svelte
+++ b/src/lib/components/accounts/UserMenu.svelte
@@ -36,28 +36,36 @@
 <Dropdown {position}>
   {#snippet anchor()}
     <NavItem title="Open Menu">
-      <Avatar {user} slot="start" />
+      {#snippet start()}
+        <Avatar {user} />
+      {/snippet}
       {#if width && width > remToPx(48)}
         <span class="name">{getUserName(user)}</span>
       {/if}
-      <div class="dropdownArrow" slot="end">
-        {#if position.includes("bottom")}
-          <ChevronDown12 />
-        {:else}
-          <ChevronUp12 />
-        {/if}
-      </div>
+      {#snippet end()}
+        <div class="dropdownArrow">
+          {#if position.includes("bottom")}
+            <ChevronDown12 />
+          {:else}
+            <ChevronUp12 />
+          {/if}
+        </div>
+      {/snippet}
     </NavItem>
   {/snippet}
   {#snippet inner(close)}
     <Menu>
-      <NavItem href={SQUARELET_BASE} target="_blank" on:click={close}>
-        <Gear16 slot="start" />
+      <NavItem href={SQUARELET_BASE} target="_blank" onclick={close}>
+        {#snippet start()}
+          <Gear16 />
+        {/snippet}
         {$_("authSection.user.acctSettings")}
       </NavItem>
 
-      <NavItem href={SIGN_OUT_URL} on:click={close}>
-        <SignOut16 slot="start" />
+      <NavItem href={SIGN_OUT_URL} onclick={close}>
+        {#snippet start()}
+          <SignOut16 />
+        {/snippet}
         {$_("authSection.user.signOut")}
       </NavItem>
     </Menu>
diff --git a/src/lib/components/accounts/tests/__snapshots__/Mailkey.test.ts.snap b/src/lib/components/accounts/tests/__snapshots__/Mailkey.test.ts.snap
index 25781c81e..296a7e685 100644
--- a/src/lib/components/accounts/tests/__snapshots__/Mailkey.test.ts.snap
+++ b/src/lib/components/accounts/tests/__snapshots__/Mailkey.test.ts.snap
@@ -17,6 +17,7 @@ exports[`Mailkey 1`] = `
           title=""
           type="button"
         >
+          <!---->
           <svg
             class="octicon octicon-x-circle"
             height="24"
@@ -32,6 +33,7 @@ exports[`Mailkey 1`] = `
               d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Z"
             />
           </svg>
+          
           <!---->
         </button>
         
@@ -75,7 +77,8 @@ exports[`Mailkey 1`] = `
         <!---->
          
         <div
-          style="display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 1rem;"
+          class="row align-stretch justify-center wrap  svelte-vh2qhd"
+          style="--gap: 1rem;"
         >
           <!---->
           <!---->
@@ -84,7 +87,9 @@ exports[`Mailkey 1`] = `
             title=""
             type="button"
           >
+            <!---->
             Create New Email Address
+            
             <!---->
           </button>
           
@@ -96,7 +101,9 @@ exports[`Mailkey 1`] = `
             title=""
             type="button"
           >
+            <!---->
             Delete Existing Address
+            
             <!---->
           </button>
           
@@ -129,6 +136,7 @@ exports[`Mailkey 2`] = `
           title=""
           type="button"
         >
+          <!---->
           <svg
             class="octicon octicon-x-circle"
             height="24"
@@ -144,6 +152,7 @@ exports[`Mailkey 2`] = `
               d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Z"
             />
           </svg>
+          
           <!---->
         </button>
         
@@ -192,7 +201,8 @@ exports[`Mailkey 2`] = `
         <!---->
          
         <div
-          style="display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 1rem;"
+          class="row align-stretch justify-center wrap  svelte-vh2qhd"
+          style="--gap: 1rem;"
         >
           <!---->
           <!---->
@@ -201,7 +211,9 @@ exports[`Mailkey 2`] = `
             title=""
             type="button"
           >
+            <!---->
             Create New Email Address
+            
             <!---->
           </button>
           
@@ -213,7 +225,9 @@ exports[`Mailkey 2`] = `
             title=""
             type="button"
           >
+            <!---->
             Delete Existing Address
+            
             <!---->
           </button>
           
diff --git a/src/lib/components/accounts/tests/__snapshots__/UserMenu.test.ts.snap b/src/lib/components/accounts/tests/__snapshots__/UserMenu.test.ts.snap
index 635533243..4f7742341 100644
--- a/src/lib/components/accounts/tests/__snapshots__/UserMenu.test.ts.snap
+++ b/src/lib/components/accounts/tests/__snapshots__/UserMenu.test.ts.snap
@@ -46,7 +46,6 @@ exports[`UserMenu 1`] = `
        
       <div
         class="dropdownArrow svelte-13wiold"
-        slot="end"
       >
         <svg
           class="octicon octicon-chevron-down"
@@ -87,7 +86,6 @@ exports[`UserMenu 1`] = `
         <svg
           class="octicon octicon-gear"
           height="16"
-          slot="start"
           viewBox="0 0 16 16"
           width="16"
           xmlns="http://www.w3.org/2000/svg"
@@ -120,7 +118,6 @@ exports[`UserMenu 1`] = `
         <svg
           class="octicon octicon-sign-out"
           height="16"
-          slot="start"
           viewBox="0 0 16 16"
           width="16"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/lib/components/addons/AddOnPin.svelte b/src/lib/components/addons/AddOnPin.svelte
index eb7702389..0671dc28b 100644
--- a/src/lib/components/addons/AddOnPin.svelte
+++ b/src/lib/components/addons/AddOnPin.svelte
@@ -19,9 +19,7 @@
 
   let endpoint = $derived(new URL(`/api/addons/${addon.id}/`, BASE_API_URL));
 
-  async function toggle(event) {
-    event.preventDefault();
-
+  async function toggle() {
     const csrftoken = getCsrfToken();
     if (!csrftoken) {
       console.error("No CSRF token found");
@@ -62,7 +60,7 @@
 
 <Pin
   active={addon.active}
-  on:click={toggle}
+  onclick={toggle}
   {size}
   --fill={addon.active ? "var(--orange)" : "var(--gray-3)"}
 />
diff --git a/src/lib/components/addons/AddOnsNavigation.svelte b/src/lib/components/addons/AddOnsNavigation.svelte
index ac3502d3a..e4105553b 100644
--- a/src/lib/components/addons/AddOnsNavigation.svelte
+++ b/src/lib/components/addons/AddOnsNavigation.svelte
@@ -27,7 +27,9 @@
       href="/add-ons/"
       --hover-background="var(--blue-2)"
     >
-      <Infinity16 fill="var(--blue-3)" slot="start" />
+      {#snippet start()}
+        <Infinity16 fill="var(--blue-3)" />
+      {/snippet}
       All
     </NavItem>
     <NavItem
@@ -35,7 +37,9 @@
       href="/add-ons/?active=true"
       --hover-background="var(--orange-2)"
     >
-      <Pin --fill="var(--orange-3)" slot="start" />
+      {#snippet start()}
+        <Pin --fill="var(--orange-3)" />
+      {/snippet}
       Pinned
     </NavItem>
     <NavItem
@@ -43,7 +47,9 @@
       href="/add-ons/?featured=true"
       --hover-background="var(--yellow-2)"
     >
-      <StarFill16 fill="var(--yellow-3)" slot="start" />
+      {#snippet start()}
+        <StarFill16 fill="var(--yellow-3)" />
+      {/snippet}
       Featured
     </NavItem>
     <NavItem
@@ -51,7 +57,9 @@
       href="/add-ons/?premium=true"
       --hover-background="var(--green-2)"
     >
-      <Premium --fill="var(--green-3)" slot="start" />
+      {#snippet start()}
+        <Premium --fill="var(--green-3)" />
+      {/snippet}
       Premium
     </NavItem>
   </Flex>
diff --git a/src/lib/components/addons/DocumentList.svelte b/src/lib/components/addons/DocumentList.svelte
index f386d8716..3ddc742bb 100644
--- a/src/lib/components/addons/DocumentList.svelte
+++ b/src/lib/components/addons/DocumentList.svelte
@@ -51,7 +51,7 @@
             <Button
               ghost
               minW={false}
-              on:click={() => ($sidebars["navigation"] = true)}
+              onclick={() => ($sidebars["navigation"] = true)}
             >
               <span class="flipV">
                 <SidebarExpand16 />
diff --git a/src/lib/components/addons/History.svelte b/src/lib/components/addons/History.svelte
index 37c765d1b..fd70da4bb 100644
--- a/src/lib/components/addons/History.svelte
+++ b/src/lib/components/addons/History.svelte
@@ -77,7 +77,9 @@
 <SidebarGroup>
   {#snippet title()}
     <NavItem>
-      <History16 slot="start" />
+      {#snippet start()}
+        <History16 />
+      {/snippet}
       {$_("addonRuns.previous")}
     </NavItem>
   {/snippet}
@@ -100,10 +102,10 @@
     <Paginator
       has_next={Boolean(next)}
       has_previous={Boolean(previous)}
-      on:next={() => {
+      onnext={() => {
         if (next) load(new URL(next));
       }}
-      on:previous={() => {
+      onprevious={() => {
         if (previous) load(new URL(previous));
       }}
     />
diff --git a/src/lib/components/addons/HistoryEvent.svelte b/src/lib/components/addons/HistoryEvent.svelte
index 1e8d3c85d..12e59b8d3 100644
--- a/src/lib/components/addons/HistoryEvent.svelte
+++ b/src/lib/components/addons/HistoryEvent.svelte
@@ -156,7 +156,7 @@
           minW={false}
           ghost
           disabled={!csrftoken}
-          on:click={() => dismissRun()}
+          onclick={() => dismissRun()}
         >
           {$_("dialog.dismiss")}
         </Button>
@@ -168,7 +168,7 @@
           mode="danger"
           ghost
           disabled={!csrftoken}
-          on:click={() => cancelRun()}
+          onclick={() => cancelRun()}
           title={$_("dialog.cancel")}
         >
           {$_("dialog.cancel")}
diff --git a/src/lib/components/addons/Scheduled.svelte b/src/lib/components/addons/Scheduled.svelte
index ed40a4a21..102a4ed37 100644
--- a/src/lib/components/addons/Scheduled.svelte
+++ b/src/lib/components/addons/Scheduled.svelte
@@ -55,7 +55,9 @@
 <SidebarGroup>
   {#snippet title()}
     <NavItem>
-      <Clock16 slot="start" />
+      {#snippet start()}
+        <Clock16 />
+      {/snippet}
       {$_("addonRuns.scheduled")}
     </NavItem>
   {/snippet}
@@ -80,12 +82,12 @@
     <Paginator
       has_next={Boolean(next)}
       has_previous={Boolean(previous)}
-      on:next={() => {
+      onnext={() => {
         if (next) {
           load(new URL(next));
         }
       }}
-      on:previous={() => {
+      onprevious={() => {
         if (previous) {
           load(new URL(previous));
         }
diff --git a/src/lib/components/addons/ScheduledEvent.svelte b/src/lib/components/addons/ScheduledEvent.svelte
index 8a8774e27..2e336f240 100644
--- a/src/lib/components/addons/ScheduledEvent.svelte
+++ b/src/lib/components/addons/ScheduledEvent.svelte
@@ -29,9 +29,10 @@
 
   interface Props {
     event: Event;
+    onclick?: () => void;
   }
 
-  let { event }: Props = $props();
+  let { event, onclick }: Props = $props();
 
   let addon = $derived(isAddon(event.addon) ? event.addon : undefined);
   let disabled = $derived(event.event === 0);
@@ -44,7 +45,7 @@
   }
 </script>
 
-<NavItem href={url(event)} on:click>
+<NavItem href={url(event)} {onclick}>
   <div class="info" class:disabled>
     <p class="name">
       {addon?.name}
diff --git a/src/lib/components/addons/tests/__snapshots__/AddOnsNavigation.test.ts.snap b/src/lib/components/addons/tests/__snapshots__/AddOnsNavigation.test.ts.snap
index a97ea477c..b8bba09a4 100644
--- a/src/lib/components/addons/tests/__snapshots__/AddOnsNavigation.test.ts.snap
+++ b/src/lib/components/addons/tests/__snapshots__/AddOnsNavigation.test.ts.snap
@@ -3,7 +3,8 @@
 exports[`AddOnsNavigation 1`] = `
 <div>
   <div
-    style="display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 1rem;"
+    class="column align-stretch justify-start nowrap  svelte-vh2qhd"
+    style="--gap: 1rem;"
   >
     <header
       class="header"
@@ -18,7 +19,8 @@ exports[`AddOnsNavigation 1`] = `
     </header>
      
     <div
-      style="display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0.5rem;"
+      class="column align-stretch justify-start nowrap  svelte-vh2qhd"
+      style="--gap: 0.5rem;"
     >
       <svelte-css-wrapper
         style="display: contents; --hover-background: var(--blue-2);"
@@ -33,7 +35,6 @@ exports[`AddOnsNavigation 1`] = `
             class="octicon octicon-infinity"
             fill="var(--blue-3)"
             height="16"
-            slot="start"
             viewBox="0 0 16 16"
             width="16"
             xmlns="http://www.w3.org/2000/svg"
@@ -114,7 +115,6 @@ exports[`AddOnsNavigation 1`] = `
             class="octicon octicon-star-fill"
             fill="var(--yellow-3)"
             height="16"
-            slot="start"
             viewBox="0 0 16 16"
             width="16"
             xmlns="http://www.w3.org/2000/svg"
@@ -192,7 +192,8 @@ exports[`AddOnsNavigation 1`] = `
     <!---->
      
     <div
-      style="display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0.5rem;"
+      class="column align-stretch justify-start nowrap  svelte-vh2qhd"
+      style="--gap: 0.5rem;"
     >
       <svelte-css-wrapper
         style="display: contents; --color: var(--gray-4);"
diff --git a/src/lib/components/common/Button.svelte b/src/lib/components/common/Button.svelte
index 100de9eb3..a0b7350ca 100644
--- a/src/lib/components/common/Button.svelte
+++ b/src/lib/components/common/Button.svelte
@@ -1,32 +1,58 @@
 <script lang="ts">
-  export let mode:
-    | "standard"
-    | "success"
-    | "failure"
-    | "primary"
-    | "danger"
-    | "premium" = "standard";
-  export let ghost = false;
-  export let full = false;
-  export let size: "small" | "normal" = "normal";
-  export let minW = true;
-
-  export let disabled = false;
-  export let hover = false; // force hover state
-
-  export let title: string = "";
-  export let type: "submit" | "reset" | "button" = "button";
-  export let label = "Submit";
-  // anchor-specific properties
-  export let href: undefined | string = undefined;
-  export let target: undefined | string = undefined;
-  export let download: undefined | boolean | string = undefined;
-  export let rel: undefined | string =
-    target === "_blank" ? "noopener noreferrer" : undefined;
-  // button-specific properties
-  export let name: undefined | string = undefined;
-  export let value: any = undefined;
-  export let formaction: undefined | string = undefined;
+  import type { Snippet } from "svelte";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+
+  interface Props extends HTMLButtonAttributes {
+    mode?:
+      | "standard"
+      | "success"
+      | "failure"
+      | "primary"
+      | "danger"
+      | "premium";
+    ghost?: boolean;
+    full?: boolean;
+    size?: "small" | "normal";
+    minW?: boolean;
+    disabled?: boolean;
+    hover?: boolean; // force hover state
+    title?: string;
+    type?: "submit" | "reset" | "button";
+    label?: string;
+    // anchor-specific properties
+    href?: undefined | string;
+    target?: undefined | string;
+    download?: undefined | boolean | string;
+    rel?: undefined | string;
+    // button-specific properties
+    name?: undefined | string;
+    value?: any;
+    formaction?: undefined | string;
+    children?: Snippet;
+    [key: string]: any;
+  }
+
+  let {
+    mode = "standard",
+    ghost = false,
+    full = false,
+    size = "normal",
+    minW = true,
+    disabled = false,
+    hover = false,
+    title = "",
+    type = "button",
+    label = "Submit",
+    href = undefined,
+    target = undefined,
+    download = undefined,
+    rel = target === "_blank" ? "noopener noreferrer" : undefined,
+    name = undefined,
+    value = undefined,
+    formaction = undefined,
+    children,
+    ...rest
+  }: Props = $props();
 </script>
 
 {#if href}
@@ -36,20 +62,18 @@
     {target}
     {rel}
     {download}
-    on:click
     class="{mode} {size}"
     class:ghost
     class:full
     class:minW
     class:hover
-    {...$$restProps}
+    {...rest}
   >
-    <slot>{label}</slot>
+    {#if children}{@render children()}{:else}{label}{/if}
   </a>
 {:else}
   <button
     {title}
-    on:click
     class="{mode} {size}"
     {disabled}
     {type}
@@ -60,9 +84,9 @@
     class:full
     class:minW
     class:hover
-    {...$$restProps}
+    {...rest}
   >
-    <slot>{label}</slot>
+    {#if children}{@render children()}{:else}{label}{/if}
   </button>
 {/if}
 
diff --git a/src/lib/components/common/Copy.svelte b/src/lib/components/common/Copy.svelte
index 5d7f7f6aa..64ab734d0 100644
--- a/src/lib/components/common/Copy.svelte
+++ b/src/lib/components/common/Copy.svelte
@@ -17,7 +17,7 @@
 <Button
   size="small"
   ghost
-  on:click={() => copy(text)}
+  onclick={() => copy(text)}
   disabled={!navigator.clipboard}
 >
   <Copy16 height={14} width={14} />
diff --git a/src/lib/components/common/Flex.svelte b/src/lib/components/common/Flex.svelte
index 450a9dfda..248344cc0 100644
--- a/src/lib/components/common/Flex.svelte
+++ b/src/lib/components/common/Flex.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { Snippet } from "svelte";
   import type { AriaRole } from "svelte/elements";
 
   /* Based on https://github.com/himynameisdave/svelte-flex */
@@ -7,44 +8,106 @@
   type Justify = "around" | "between" | "center" | "end" | "evenly" | "start";
   type Direction = "column" | "row";
 
-  export let direction: Direction = "row";
-  export let align: Align = "stretch";
-  export let justify: Justify = "start";
-  export let reverse = false;
-  export let gap: number = 0.5;
-  export let wrap: boolean = false;
-  export let role: null | AriaRole = null;
-
-  const alignMap: Record<Align, string> = {
-    start: "flex-start",
-    center: "center",
-    end: "flex-end",
-    stretch: "stretch",
-    baseline: "baseline",
-  };
-
-  const justifyMap: Record<Justify, string> = {
-    start: "flex-start",
-    center: "center",
-    end: "flex-end",
-    around: "space-around",
-    between: "space-between",
-    evenly: "space-evenly",
-  };
-
-  $: directionWithReverse = reverse ? `${direction}-reverse` : direction;
+  interface Props {
+    direction?: Direction;
+    align?: Align;
+    justify?: Justify;
+    reverse?: boolean;
+    gap?: number;
+    wrap?: boolean;
+    role?: null | AriaRole;
+    children: Snippet;
+    [key: string]: any;
+  }
+
+  let {
+    direction = "row",
+    align = "stretch",
+    justify = "start",
+    reverse = false,
+    gap = 0.5,
+    wrap = false,
+    role = null,
+    children,
+    ...rest
+  }: Props = $props();
+
+  let directionClass = $derived(reverse ? `${direction}-reverse` : direction);
 </script>
 
 <div
-  {...$$restProps}
-  style:display="flex"
-  style:flex-direction={directionWithReverse}
-  style:flex-wrap={wrap ? "wrap" : "nowrap"}
-  style:align-items={alignMap[align]}
-  style:justify-content={justifyMap[justify]}
-  style:gap={`${gap}rem`}
-  class={$$restProps.class}
+  {...rest}
+  class="{directionClass} align-{align} justify-{justify} {wrap
+    ? 'wrap'
+    : 'nowrap'} {rest.class ?? ''}"
+  style:--gap="{gap}rem"
   {role}
 >
-  <slot />
+  {@render children()}
 </div>
+
+<style>
+  div {
+    display: flex;
+    gap: var(--gap);
+  }
+
+  /* direction */
+  div.row {
+    flex-direction: row;
+  }
+  div.row-reverse {
+    flex-direction: row-reverse;
+  }
+  div.column {
+    flex-direction: column;
+  }
+  div.column-reverse {
+    flex-direction: column-reverse;
+  }
+
+  /* align-items */
+  div.align-start {
+    align-items: flex-start;
+  }
+  div.align-center {
+    align-items: center;
+  }
+  div.align-end {
+    align-items: flex-end;
+  }
+  div.align-stretch {
+    align-items: stretch;
+  }
+  div.align-baseline {
+    align-items: baseline;
+  }
+
+  /* justify-content */
+  div.justify-start {
+    justify-content: flex-start;
+  }
+  div.justify-center {
+    justify-content: center;
+  }
+  div.justify-end {
+    justify-content: flex-end;
+  }
+  div.justify-around {
+    justify-content: space-around;
+  }
+  div.justify-between {
+    justify-content: space-between;
+  }
+  div.justify-evenly {
+    justify-content: space-evenly;
+  }
+
+  /* wrap */
+  div.wrap {
+    flex-wrap: wrap;
+  }
+  div.nowrap {
+    flex-wrap: nowrap;
+  }
+</style>
diff --git a/src/lib/components/common/NavItem.svelte b/src/lib/components/common/NavItem.svelte
index ef130a6ff..bcddd3ddb 100644
--- a/src/lib/components/common/NavItem.svelte
+++ b/src/lib/components/common/NavItem.svelte
@@ -1,17 +1,43 @@
 <script lang="ts">
+  import type { Snippet } from "svelte";
   import type { Maybe } from "$lib/api/types";
 
-  export let active = false;
-  export let disabled = false;
-  export let small = false;
-  export let hover = false;
-  export let title = "";
-  export let inline = false;
-  // handling link behavior
-  export let href: Maybe<string> = undefined;
-  export let target: Maybe<string> = undefined;
-  export let rel: Maybe<string> = undefined;
-  export let download: Maybe<boolean | string> = undefined;
+  interface Props {
+    active?: boolean;
+    disabled?: boolean;
+    small?: boolean;
+    hover?: boolean;
+    title?: string;
+    inline?: boolean;
+    // handling link behavior
+    href?: Maybe<string>;
+    target?: Maybe<string>;
+    rel?: Maybe<string>;
+    download?: Maybe<boolean | string>;
+    start?: Snippet;
+    children?: Snippet;
+    end?: Snippet;
+    onclick?: (e: MouseEvent) => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+  }
+
+  let {
+    active = false,
+    disabled = false,
+    small = false,
+    hover = false,
+    title = "",
+    inline = false,
+    href = undefined,
+    target = undefined,
+    rel = undefined,
+    download = undefined,
+    start,
+    children,
+    end,
+    onclick,
+    onkeydown,
+  }: Props = $props();
 </script>
 
 {#if href}
@@ -26,12 +52,12 @@
     class:disabled
     class:small
     class:inline
-    on:click
-    on:keydown
+    onclick={(e) => onclick?.(e)}
+    onkeydown={(e) => onkeydown?.(e)}
   >
-    <slot name="start" />
-    <span class="label"><slot /></span>
-    <slot name="end" />
+    {@render start?.()}
+    <span class="label">{@render children?.()}</span>
+    {@render end?.()}
   </a>
 {:else}
   <span
@@ -42,14 +68,14 @@
     class:disabled
     class:small
     class:inline
-    on:click
-    on:keydown
+    onclick={(e) => onclick?.(e)}
+    onkeydown={(e) => onkeydown?.(e)}
     role="button"
     tabindex={0}
   >
-    <slot name="start" />
-    <span class="label"><slot /></span>
-    <slot name="end" />
+    {@render start?.()}
+    <span class="label">{@render children?.()}</span>
+    {@render end?.()}
   </span>
 {/if}
 
diff --git a/src/lib/components/common/Paginator.svelte b/src/lib/components/common/Paginator.svelte
index 8624bb0c4..51d108b51 100644
--- a/src/lib/components/common/Paginator.svelte
+++ b/src/lib/components/common/Paginator.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte";
   import { _ } from "svelte-i18n";
   import Button from "$lib/components/common/Button.svelte";
   import {
@@ -9,37 +8,54 @@
     MoveToStart16,
   } from "svelte-octicons";
 
-  export let page: number | undefined = undefined;
-  export let totalPages: number | undefined = undefined;
-  export let has_next = false;
-  export let has_previous = false;
-  export let goToNav = false;
+  interface Props {
+    page?: number | undefined;
+    totalPages?: number | undefined;
+    has_next?: boolean;
+    has_previous?: boolean;
+    goToNav?: boolean;
+    onnext?: (n: number) => void;
+    onprevious?: (n: number) => void;
+    ongoto?: (n: number) => void;
+  }
+
+  let {
+    page = $bindable(undefined),
+    totalPages = undefined,
+    has_next = false,
+    has_previous = false,
+    goToNav = false,
+    onnext,
+    onprevious,
+    ongoto,
+  }: Props = $props();
 
   var isInt = /^[0-9]+$/;
 
-  const dispatch = createEventDispatcher();
-  let input: HTMLInputElement;
+  let input: HTMLInputElement | undefined = $state();
   // proxy the page value so we can reset it if needed
-  let inputValue = page;
-  $: inputWidth = String(inputValue ?? 0).length;
-  $: invalidValue =
+  let inputValue = $state(page);
+  let inputWidth = $derived(String(inputValue ?? 0).length);
+  let invalidValue = $derived(
     (inputValue && totalPages && inputValue > totalPages) ||
-    !inputValue ||
-    !isInt.test(inputValue.toString());
-  $: {
+      !inputValue ||
+      !isInt.test(inputValue.toString()),
+  );
+  $effect(() => {
+    // stash the in-flight value
     inputValue = page;
-  }
+  });
 
   function previous() {
-    if (has_previous) dispatch("previous", (page ?? 0) - 1);
+    if (has_previous) onprevious?.((page ?? 0) - 1);
   }
 
   function next() {
-    if (has_next) dispatch("next", (page ?? 0) + 1);
+    if (has_next) onnext?.((page ?? 0) + 1);
   }
 
   function goTo(page: number) {
-    dispatch("goTo", page);
+    ongoto?.(page);
   }
 
   function handleChange(event: Event) {
@@ -70,7 +86,7 @@
       mode="primary"
       minW={false}
       disabled={page === 1}
-      on:click={() => goTo(1)}
+      onclick={() => goTo(1)}
       title={$_("paginator.first")}
     >
       <MoveToStart16 />
@@ -82,7 +98,7 @@
     mode="primary"
     minW={false}
     disabled={!has_previous}
-    on:click={previous}
+    onclick={previous}
     title={$_("paginator.previous")}
   >
     <ArrowLeft16 />
@@ -102,8 +118,8 @@
           max={totalPages}
           bind:this={input}
           bind:value={inputValue}
-          on:change={handleChange}
-          on:keyup={handleKeyup}
+          onchange={handleChange}
+          onkeyup={handleKeyup}
           style={`min-width: ${inputWidth}ch`}
         />
       {:else}
@@ -123,7 +139,7 @@
     mode="primary"
     minW={false}
     disabled={!has_next}
-    on:click={next}
+    onclick={next}
     title={$_("paginator.next")}
   >
     <ArrowRight16 />
@@ -135,7 +151,7 @@
       mode="primary"
       minW={false}
       disabled={page === totalPages}
-      on:click={() => goTo(totalPages)}
+      onclick={() => goTo(totalPages)}
       title={$_("paginator.last")}
     >
       <MoveToEnd16 />
diff --git a/src/lib/components/common/Pin.svelte b/src/lib/components/common/Pin.svelte
index 856e5c823..f68411207 100644
--- a/src/lib/components/common/Pin.svelte
+++ b/src/lib/components/common/Pin.svelte
@@ -1,19 +1,26 @@
 <script lang="ts">
   import Pin from "../icons/Pin.svelte";
 
-  export let size: number = 1;
-  export let active: boolean = false;
-  export let disabled: boolean = false;
-
-  $: title = disabled
-    ? "Pinning is disabled"
-    : active
-      ? "Click to Unpin"
-      : "Click to Pin";
-
-  $: cssVarStyles = `--padding:${size * 0.25}em; --border-radius:${
-    size * 4
-  }px;`;
+  interface Props {
+    size?: number;
+    active?: boolean;
+    disabled?: boolean;
+    onclick?: (e: MouseEvent) => void;
+  }
+
+  let { size = 1, active = false, disabled = false, onclick }: Props = $props();
+
+  let title = $derived(
+    disabled
+      ? "Pinning is disabled"
+      : active
+        ? "Click to Unpin"
+        : "Click to Pin",
+  );
+
+  let cssVarStyles = $derived(
+    `--padding:${size * 0.25}em; --border-radius:${size * 4}px;`,
+  );
 </script>
 
 <button
@@ -22,7 +29,11 @@
   class:active
   class:disabled
   style={cssVarStyles}
-  on:click|stopPropagation|preventDefault
+  onclick={(e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    onclick?.(e);
+  }}
 >
   <Pin {title} {size} />
 </button>
diff --git a/src/lib/components/common/Premium.svelte b/src/lib/components/common/Premium.svelte
index 587c01da6..1b73810d5 100644
--- a/src/lib/components/common/Premium.svelte
+++ b/src/lib/components/common/Premium.svelte
@@ -4,22 +4,30 @@
   The "basic" slot is available as a fallback.
 -->
 <script lang="ts">
-  import { getContext } from "svelte";
-  import type { Writable } from "svelte/store";
-  import type { User } from "$lib/api/types";
+  import type { Snippet } from "svelte";
+
   import { isOrg } from "$lib/api/accounts";
+  import { getCurrentUser } from "$lib/utils/permissions";
+
+  interface Props {
+    children?: Snippet;
+    basic?: Snippet;
+  }
+
+  let { children, basic }: Props = $props();
 
-  const me = getContext<Writable<User>>("me");
+  const me = getCurrentUser();
 
-  $: org = $me?.organization;
-  $: isPremium =
+  let org = $derived($me?.organization);
+  let isPremium = $derived(
     isOrg(org) && org.plan
       ? ["Organization", "Professional"].includes(org.plan)
-      : false;
+      : false,
+  );
 </script>
 
 {#if isPremium}
-  <slot />
+  {@render children?.()}
 {:else}
-  <slot name="basic" />
+  {@render basic?.()}
 {/if}
diff --git a/src/lib/components/common/Tip.svelte b/src/lib/components/common/Tip.svelte
index 73432152a..6544a246c 100644
--- a/src/lib/components/common/Tip.svelte
+++ b/src/lib/components/common/Tip.svelte
@@ -1,14 +1,26 @@
 <script lang="ts">
+  import type { Snippet } from "svelte";
   import { LightBulb24 } from "svelte-octicons";
 
-  export let mode: "normal" | "primary" | "premium" | "danger" | "error" =
-    "normal";
+  interface Props {
+    mode?: "normal" | "primary" | "premium" | "danger" | "error";
+    icon?: Snippet;
+    children?: Snippet;
+  }
+
+  let { mode = "normal", icon, children }: Props = $props();
 </script>
 
 <aside class="tip {mode}">
-  <div class="icon"><slot name="icon"><LightBulb24 /></slot></div>
+  <div class="icon">
+    {#if icon}
+      {@render icon()}
+    {:else}
+      <LightBulb24 />
+    {/if}
+  </div>
   <div class="inner">
-    <slot />
+    {@render children?.()}
   </div>
 </aside>
 
diff --git a/src/lib/components/common/stories/Dropdown.stories.svelte b/src/lib/components/common/stories/Dropdown.stories.svelte
index d479362e2..d0a29e447 100644
--- a/src/lib/components/common/stories/Dropdown.stories.svelte
+++ b/src/lib/components/common/stories/Dropdown.stories.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import Menu from "$lib/components/common/Menu.svelte";
   import MenuItem from "$lib/components/common/MenuItem.svelte";
@@ -18,9 +18,13 @@
   <Dropdown>
     {#snippet anchor()}
       <NavItem>
-        <Globe16 slot="start" />
+        {#snippet start()}
+          <Globe16 />
+        {/snippet}
         Open Dropdown
-        <ChevronDown12 slot="end" />
+        {#snippet end()}
+          <ChevronDown12 />
+        {/snippet}
       </NavItem>
     {/snippet}
     {#snippet inner({ close })}
@@ -37,9 +41,13 @@
   <Dropdown border>
     {#snippet anchor()}
       <NavItem>
-        <Globe16 slot="start" />
+        {#snippet start()}
+          <Globe16 />
+        {/snippet}
         Open Dropdown
-        <ChevronDown12 slot="end" />
+        {#snippet end()}
+          <ChevronDown12 />
+        {/snippet}
       </NavItem>
     {/snippet}
     {#snippet inner({ close })}
@@ -56,9 +64,13 @@
   <Dropdown overlay>
     {#snippet anchor()}
       <NavItem>
-        <Globe16 slot="start" />
+        {#snippet start()}
+          <Globe16 />
+        {/snippet}
         Open Dropdown
-        <ChevronDown12 slot="end" />
+        {#snippet end()}
+          <ChevronDown12 />
+        {/snippet}
       </NavItem>
     {/snippet}
     {#snippet inner({ close })}
@@ -75,9 +87,13 @@
   <Dropdown position="right">
     {#snippet anchor()}
       <NavItem>
-        <Globe16 slot="start" />
+        {#snippet start()}
+          <Globe16 />
+        {/snippet}
         Open Dropdown
-        <ChevronRight12 slot="end" />
+        {#snippet end()}
+          <ChevronRight12 />
+        {/snippet}
       </NavItem>
     {/snippet}
     {#snippet inner({ close })}
@@ -94,20 +110,26 @@
   <Dropdown position="right">
     {#snippet anchor()}
       <NavItem>
-        <Globe16 slot="start" />
+        {#snippet start()}
+          <Globe16 />
+        {/snippet}
         Open Dropdown
-        <ChevronRight12 slot="end" />
+        {#snippet end()}
+          <ChevronRight12 />
+        {/snippet}
       </NavItem>
     {/snippet}
     {#snippet inner({ close })}
       <Menu>
-        <NavItem on:click={close}>Item 1</NavItem>
-        <NavItem on:click={close}>Item 2</NavItem>
+        <NavItem onclick={close}>Item 1</NavItem>
+        <NavItem onclick={close}>Item 2</NavItem>
         <Dropdown position="right">
           {#snippet anchor()}
             <NavItem>
               Item 3
-              <ChevronRight12 slot="end" />
+              {#snippet end()}
+                <ChevronRight12 />
+              {/snippet}
             </NavItem>
           {/snippet}
           {#snippet inner()}
@@ -127,9 +149,13 @@
     <Dropdown>
       {#snippet anchor()}
         <NavItem>
-          <Globe16 slot="start" />
+          {#snippet start()}
+            <Globe16 />
+          {/snippet}
           First Dropdown
-          <ChevronDown12 slot="end" />
+          {#snippet end()}
+            <ChevronDown12 />
+          {/snippet}
         </NavItem>
       {/snippet}
       {#snippet inner({ close })}
@@ -144,9 +170,13 @@
     <Dropdown>
       {#snippet anchor()}
         <NavItem>
-          <Globe16 slot="start" />
+          {#snippet start()}
+            <Globe16 />
+          {/snippet}
           Second Dropdown
-          <ChevronDown12 slot="end" />
+          {#snippet end()}
+            <ChevronDown12 />
+          {/snippet}
         </NavItem>
       {/snippet}
       {#snippet inner({ close })}
@@ -161,9 +191,13 @@
     <Dropdown border>
       {#snippet anchor()}
         <NavItem>
-          <Globe16 slot="start" />
+          {#snippet start()}
+            <Globe16 />
+          {/snippet}
           Third Dropdown
-          <ChevronDown12 slot="end" />
+          {#snippet end()}
+            <ChevronDown12 />
+          {/snippet}
         </NavItem>
       {/snippet}
       {#snippet inner({ close })}
@@ -182,9 +216,13 @@
     <Dropdown>
       {#snippet anchor()}
         <NavItem>
-          <Globe16 slot="start" />
+          {#snippet start()}
+            <Globe16 />
+          {/snippet}
           Simple Dropdown
-          <ChevronDown12 slot="end" />
+          {#snippet end()}
+            <ChevronDown12 />
+          {/snippet}
         </NavItem>
       {/snippet}
       {#snippet inner({ close })}
@@ -199,9 +237,13 @@
     <Dropdown position="bottom-start">
       {#snippet anchor()}
         <NavItem>
-          <Globe16 slot="start" />
+          {#snippet start()}
+            <Globe16 />
+          {/snippet}
           Dropdown With Nested
-          <ChevronDown12 slot="end" />
+          {#snippet end()}
+            <ChevronDown12 />
+          {/snippet}
         </NavItem>
       {/snippet}
       {#snippet inner({ close })}
@@ -212,7 +254,9 @@
             {#snippet anchor()}
               <NavItem>
                 Nested Item
-                <ChevronRight12 slot="end" />
+                {#snippet end()}
+                  <ChevronRight12 />
+                {/snippet}
               </NavItem>
             {/snippet}
             {#snippet inner()}
diff --git a/src/lib/components/common/stories/Flex.stories.svelte b/src/lib/components/common/stories/Flex.stories.svelte
new file mode 100644
index 000000000..eacbf4e64
--- /dev/null
+++ b/src/lib/components/common/stories/Flex.stories.svelte
@@ -0,0 +1,74 @@
+<script context="module" lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import Flex from "../Flex.svelte";
+
+  const { Story } = defineMeta({
+    title: "Common / Flex",
+    component: Flex,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="default" asChild>
+  <Flex>
+    <div>One</div>
+    <div>Two</div>
+    <div>Three</div>
+  </Flex>
+</Story>
+
+<Story name="column" asChild>
+  <Flex direction="column">
+    <div>One</div>
+    <div>Two</div>
+    <div>Three</div>
+  </Flex>
+</Story>
+
+<Story name="row reverse" asChild>
+  <Flex reverse>
+    <div>One</div>
+    <div>Two</div>
+    <div>Three</div>
+  </Flex>
+</Story>
+
+<Story name="justify between" asChild>
+  <Flex justify="between">
+    <div>Left</div>
+    <div>Right</div>
+  </Flex>
+</Story>
+
+<Story name="justify center" asChild>
+  <Flex justify="center">
+    <div>Centered</div>
+  </Flex>
+</Story>
+
+<Story name="align center" asChild>
+  <Flex align="center" style="height: 100px;">
+    <div>Short</div>
+    <div style="height: 80px;">Tall</div>
+    <div>Short</div>
+  </Flex>
+</Story>
+
+<Story name="wrap" asChild>
+  <Flex wrap style="width: 200px;">
+    <div>One</div>
+    <div>Two</div>
+    <div>Three</div>
+    <div>Four</div>
+    <div>Five</div>
+    <div>Six</div>
+  </Flex>
+</Story>
+
+<Story name="custom gap" asChild>
+  <Flex gap={2}>
+    <div>Wide</div>
+    <div>Gap</div>
+    <div>Items</div>
+  </Flex>
+</Story>
diff --git a/src/lib/components/common/stories/NavItem.stories.svelte b/src/lib/components/common/stories/NavItem.stories.svelte
index 8aa5f1115..0a13029f0 100644
--- a/src/lib/components/common/stories/NavItem.stories.svelte
+++ b/src/lib/components/common/stories/NavItem.stories.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import { action } from "@storybook/addon-actions";
   import {
@@ -19,7 +19,6 @@
   });
 
   const click = action("Click");
-  const keydown = action("Keydown");
 </script>
 
 <Story name="Text Only" asChild>
@@ -28,19 +27,25 @@
 
 <Story name="Text and Icon" asChild>
   <NavItem>
-    <Comment16 slot="start" /> Add a note…
+    {#snippet start()}
+      <Comment16 />
+    {/snippet} Add a note…
   </NavItem>
 </Story>
 
 <Story name="Link" asChild>
-  <NavItem href="/" on:click={click} on:keydown={keydown}>
-    <Home16 slot="start" /> Go Home
+  <NavItem href="/" onclick={click}>
+    {#snippet start()}
+      <Home16 />
+    {/snippet} Go Home
   </NavItem>
 </Story>
 
 <Story name="Hover" asChild>
   <NavItem hover>
-    <Home16 slot="start" /> Go Home
+    {#snippet start()}
+      <Home16 />
+    {/snippet} Go Home
   </NavItem>
 </Story>
 
@@ -48,7 +53,9 @@
   <Flex>
     <NavItem active>Static</NavItem>
     <NavItem active href="#">
-      <Link16 slot="start" /> Link
+      {#snippet start()}
+        <Link16 />
+      {/snippet} Link
     </NavItem>
     <NavItem
       active
@@ -56,27 +63,35 @@
       --active-color="var(--orange-4)"
       --active-fill="var(--orange-3)"
     >
-      <Paintbrush16 slot="start" /> Custom Active Colors
+      {#snippet start()}
+        <Paintbrush16 />
+      {/snippet} Custom Active Colors
     </NavItem>
   </Flex>
 </Story>
 
 <Story name="Small" asChild>
   <NavItem small>
-    <Comment16 slot="start" /> Add a note…
+    {#snippet start()}
+      <Comment16 />
+    {/snippet} Add a note…
   </NavItem>
 </Story>
 
 <Story name="Disabled" asChild>
   <NavItem disabled>
-    <Comment16 slot="start" /> Add a note…
+    {#snippet start()}
+      <Comment16 />
+    {/snippet} Add a note…
   </NavItem>
 </Story>
 
 <Story name="With Overflow" asChild>
   <div class="maxW-16">
     <NavItem disabled>
-      <FileDirectory16 slot="start" /> A very long sidebar item maybe a project
+      {#snippet start()}
+        <FileDirectory16 />
+      {/snippet} A very long sidebar item maybe a project
     </NavItem>
   </div>
 </Story>
diff --git a/src/lib/components/common/stories/Paginator.stories.svelte b/src/lib/components/common/stories/Paginator.stories.svelte
index b5c9a3b75..55a4094b6 100644
--- a/src/lib/components/common/stories/Paginator.stories.svelte
+++ b/src/lib/components/common/stories/Paginator.stories.svelte
@@ -1,4 +1,5 @@
 <script context="module" lang="ts">
+  import type { ComponentProps } from "svelte";
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import { action } from "@storybook/addon-actions";
 
@@ -18,15 +19,17 @@
     },
     render: template,
   });
+
+  type Args = ComponentProps<typeof Paginator>;
 </script>
 
-{#snippet template(args)}
+{#snippet template(args: Args)}
   <div class="container">
     <Paginator
       {...args}
-      on:goTo={action("Go To")}
-      on:next={action("Next")}
-      on:previous={action("Previous")}
+      ongoto={action("Go To")}
+      onnext={action("Next")}
+      onprevious={action("Previous")}
     />
   </div>
 {/snippet}
diff --git a/src/lib/components/common/stories/Pin.stories.svelte b/src/lib/components/common/stories/Pin.stories.svelte
index defc887af..b16980c75 100644
--- a/src/lib/components/common/stories/Pin.stories.svelte
+++ b/src/lib/components/common/stories/Pin.stories.svelte
@@ -21,7 +21,7 @@
 </script>
 
 {#snippet template(args)}
-  <Pin {...args} on:click={onClick} />
+  <Pin {...args} onclick={onClick} />
 {/snippet}
 
 <Story name="Default" {args} />
diff --git a/src/lib/components/common/stories/Tip.stories.svelte b/src/lib/components/common/stories/Tip.stories.svelte
index baae58429..701d58dee 100644
--- a/src/lib/components/common/stories/Tip.stories.svelte
+++ b/src/lib/components/common/stories/Tip.stories.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import { Info24, Alert24 } from "svelte-octicons";
 
@@ -20,7 +20,9 @@
 
 <Story name="With Icon" asChild>
   <Tip>
-    <Pin size={1.5} slot="icon" />
+    {#snippet icon()}
+      <Pin size={1.5} />
+    {/snippet}
     Pinned items will appear here.
   </Tip>
 </Story>
@@ -29,32 +31,32 @@
   <Flex direction="column" gap={2}>
     <Tip mode="normal">This is a helpful tip.</Tip>
     <Tip mode="primary">
-      <Info24 slot="icon" />
+      {#snippet icon()}<Info24 />{/snippet}
       I am important!
     </Tip>
     <Tip mode="premium">
-      <Premium size={1.75} slot="icon" />
+      {#snippet icon()}<Premium />{/snippet}
       This feature is for premium users.
     </Tip>
     <Tip mode="danger">
-      <Alert24 slot="icon" />
+      {#snippet icon()}<Alert24 />{/snippet}
       Watch out ahead!
     </Tip>
     <Tip mode="error">
-      <Alert24 slot="icon" />
+      {#snippet icon()}<Alert24 />{/snippet}
       Something went wrong!
     </Tip>
   </Flex>
 </Story>
 
-<Story name="With Large Icon" asChild>
+<Story name="Custom Styles" asChild>
   <Tip
     --color="var(--blue-5)"
     --fill="var(--blue-4)"
     --background-color="var(--blue-1)"
     --border-color="var(--blue-3)"
   >
-    <Info24 height="32" width="32" slot="icon" />
+    {#snippet icon()}<Info24 />{/snippet}
     Learn about all the interesting facts
   </Tip>
 </Story>
diff --git a/src/lib/components/documents/Data.svelte b/src/lib/components/documents/Data.svelte
index c4295f86e..b13e737f6 100644
--- a/src/lib/components/documents/Data.svelte
+++ b/src/lib/components/documents/Data.svelte
@@ -36,7 +36,9 @@
 <SidebarGroup name="projects:viewer">
   {#snippet title()}
     <NavItem>
-      <Tag16 slot="start" />
+      {#snippet start()}
+        <Tag16 />
+      {/snippet}
       {$_("sidebar.data.title")}
     </NavItem>
   {/snippet}
diff --git a/src/lib/components/documents/Header.svelte b/src/lib/components/documents/Header.svelte
index c53f9bc22..19116c8fb 100644
--- a/src/lib/components/documents/Header.svelte
+++ b/src/lib/components/documents/Header.svelte
@@ -49,7 +49,7 @@
   {#if $me && access}
     <div class="access">
       {#if document.edit_access}
-        <Button ghost minW={false} on:click={() => (edit = true)}>
+        <Button ghost minW={false} onclick={() => (edit = true)}>
           <Access level={access} />
         </Button>
       {:else}
diff --git a/src/lib/components/documents/HighlightGroup.svelte b/src/lib/components/documents/HighlightGroup.svelte
index b3d9b5166..2f2dd32dc 100644
--- a/src/lib/components/documents/HighlightGroup.svelte
+++ b/src/lib/components/documents/HighlightGroup.svelte
@@ -68,7 +68,7 @@
               minW={false}
               size="small"
               ghost
-              on:click={collapseAll}
+              onclick={collapseAll}
               title={$_("search.collapseAll")}
             >
               <Fold16 height={14} width={14} />
@@ -79,7 +79,7 @@
               minW={false}
               size="small"
               ghost
-              on:click={expandAll}
+              onclick={expandAll}
               title={$_("search.expandAll")}
             >
               <Unfold16 height={14} width={14} />
diff --git a/src/lib/components/documents/Pending.svelte b/src/lib/components/documents/Pending.svelte
index b50be95a5..cc0a3a6ae 100644
--- a/src/lib/components/documents/Pending.svelte
+++ b/src/lib/components/documents/Pending.svelte
@@ -20,7 +20,7 @@
     --gap="0.75rem"
     --padding="0.5rem 0.75rem"
   >
-    <Sync24 slot="icon" />
+    {#snippet icon()}<Sync24 />{/snippet}
     <h4>{$_("processingBar.processing")}</h4>
     <p>
       {$_("processingBar.processingDocuments", {
diff --git a/src/lib/components/documents/Projects.svelte b/src/lib/components/documents/Projects.svelte
index f840b05b2..228f7b6b3 100644
--- a/src/lib/components/documents/Projects.svelte
+++ b/src/lib/components/documents/Projects.svelte
@@ -32,7 +32,9 @@
 <SidebarGroup name="projects:viewer">
   {#snippet title()}
     <NavItem>
-      <FileDirectory16 slot="start" />
+      {#snippet start()}
+        <FileDirectory16 />
+      {/snippet}
       {$_("projects.header")}
     </NavItem>
   {/snippet}
@@ -62,9 +64,7 @@
 {#if edit}
   <Portal>
     <Modal on:close={hide}>
-      {#snippet title()}
-        <h1>{$_("projects.header")}</h1>
-      {/snippet}
+      <h1 slot="title">{$_("projects.header")}</h1>
       <Projects documents={[document]} on:close={hide} />
     </Modal>
   </Portal>
diff --git a/src/lib/components/documents/ResultsList.svelte b/src/lib/components/documents/ResultsList.svelte
index c681a6fa8..dc1474eb5 100644
--- a/src/lib/components/documents/ResultsList.svelte
+++ b/src/lib/components/documents/ResultsList.svelte
@@ -195,7 +195,7 @@
         ghost
         mode="primary"
         disabled={search.loading}
-        on:click={async () => {
+        onclick={async () => {
           error = await onNext();
         }}
       >
diff --git a/src/lib/components/documents/VisibleFields.svelte b/src/lib/components/documents/VisibleFields.svelte
index d862b337c..bf214de7d 100644
--- a/src/lib/components/documents/VisibleFields.svelte
+++ b/src/lib/components/documents/VisibleFields.svelte
@@ -100,9 +100,11 @@
         <NavItem
           active={deepEqual(view.fields, $visibleFields)}
           hover
-          on:click={() => visibleFields?.set(view.fields)}
+          onclick={() => visibleFields?.set(view.fields)}
         >
-          <view.icon slot="start" />
+          {#snippet start()}
+            <view.icon />
+          {/snippet}
           {$_(view.label)}
         </NavItem>
       </div>
@@ -112,7 +114,9 @@
     <fieldset class="fields">
       <legend>
         <NavItem small>
-          <Paintbrush16 height={14} width={14} slot="start" />
+          {#snippet start()}
+            <Paintbrush16 height={14} width={14} />
+          {/snippet}
           {$_("documentBrowser.fields.customize")}
         </NavItem>
       </legend>
diff --git a/src/lib/components/documents/search/AtomEditor.svelte b/src/lib/components/documents/search/AtomEditor.svelte
index 1e06aac71..54fb25472 100644
--- a/src/lib/components/documents/search/AtomEditor.svelte
+++ b/src/lib/components/documents/search/AtomEditor.svelte
@@ -213,7 +213,7 @@
 
   <hr class="atom-editor-separator" />
 
-  <Button mode="danger" size="small" ghost full on:click={handleDelete}>
+  <Button mode="danger" size="small" ghost full onclick={handleDelete}>
     Remove
   </Button>
 </div>
diff --git a/src/lib/components/forms/AddOnDispatch.svelte b/src/lib/components/forms/AddOnDispatch.svelte
index c7eea3e13..2a04b7984 100644
--- a/src/lib/components/forms/AddOnDispatch.svelte
+++ b/src/lib/components/forms/AddOnDispatch.svelte
@@ -15,7 +15,7 @@
   } from "$lib/api/types";
 
   import { enhance } from "$app/forms";
-  import { page } from "$app/state";
+  import { page } from "$app/stores"; // until storybook supports it
   import { afterNavigate } from "$app/navigation";
 
   import { Validator, type Schema } from "@cfworker/json-schema";
@@ -99,7 +99,7 @@
       };
     }
     // prefill values from search params
-    new URLSearchParams(page.url.searchParams).forEach((v, k) => {
+    new URLSearchParams($page.url.searchParams).forEach((v, k) => {
       if (k in properties) {
         $values[k] = v;
       }
@@ -171,7 +171,7 @@
   });
   let hasEvents = $derived(eventOptions && eventOptions.events.length > 0);
   let hasFields = $derived(Object.keys(properties).length > 0);
-  let sign_in_url = $derived(buildSignInUrl(page.url.href, $values));
+  let sign_in_url = $derived(buildSignInUrl($page.url.href, $values));
 </script>
 
 <form method="post" {action} bind:this={form} use:enhance={onSubmit}>
@@ -179,7 +179,7 @@
   {#if event}
     <div class="tip">
       <Tip mode="normal">
-        <Pencil24 slot="icon" />
+        {#snippet icon()}<Pencil24 />{/snippet}
         {$_("addonDispatchDialog.editing")}
       </Tip>
     </div>
@@ -260,7 +260,7 @@
           {/if}
         </Button>
       {/if}
-      <Button type="button" ghost mode="primary" on:click={reset}>
+      <Button type="button" ghost mode="primary" onclick={reset}>
         {$_("dialog.reset")}
       </Button>
     </div>
diff --git a/src/lib/components/forms/ChangeOwner.svelte b/src/lib/components/forms/ChangeOwner.svelte
index 859f3ba82..3f6793444 100644
--- a/src/lib/components/forms/ChangeOwner.svelte
+++ b/src/lib/components/forms/ChangeOwner.svelte
@@ -176,13 +176,13 @@ Change owner of one or more documents.
       <Flex direction="column">
         <h2>{$_("change_owner.really", { values: { n: count } })}</h2>
         <Tip mode="danger">
-          <Alert24 slot="icon" />
+          {#snippet icon()}<Alert24 />{/snippet}
           {$_("change_owner.continue", { values: { n: count } })}
         </Tip>
       </Flex>
       {#snippet oversize()}
         <Tip mode="danger">
-          <Alert24 slot="icon" />
+          {#snippet icon()}<Alert24 />{/snippet}
           {$_("change_owner.toomany", { values: { n: MAX_EDIT_BATCH } })}
         </Tip>
       {/snippet}
@@ -235,7 +235,7 @@ Change owner of one or more documents.
       <Button type="submit" mode="primary" {disabled}>
         {$_("change_owner.confirm")}
       </Button>
-      <Button on:click={() => onclose?.()}>
+      <Button onclick={() => onclose?.()}>
         {$_("change_owner.cancel")}
       </Button>
     </Flex>
diff --git a/src/lib/components/forms/ConfirmDelete.svelte b/src/lib/components/forms/ConfirmDelete.svelte
index ab9814cc8..5c5e5e16c 100644
--- a/src/lib/components/forms/ConfirmDelete.svelte
+++ b/src/lib/components/forms/ConfirmDelete.svelte
@@ -90,7 +90,7 @@ Confirm deletion or one or more documents.
       </div>
       {#snippet oversize()}
         <Tip mode="danger">
-          <Alert24 slot="icon" />
+          {#snippet icon()}<Alert24 />{/snippet}
           {$_("delete.toomany", { values: { n: MAX_EDIT_BATCH } })}
         </Tip>
       {/snippet}
@@ -113,7 +113,7 @@ Confirm deletion or one or more documents.
         <Trash16 />
         {$_("delete.confirm")}
       </Button>
-      <Button on:click={() => onclose?.()}>
+      <Button onclick={() => onclose?.()}>
         {$_("delete.cancel")}
       </Button>
     </Flex>
diff --git a/src/lib/components/forms/ConfirmRedaction.svelte b/src/lib/components/forms/ConfirmRedaction.svelte
index 54a4e81d6..1e8ca699d 100644
--- a/src/lib/components/forms/ConfirmRedaction.svelte
+++ b/src/lib/components/forms/ConfirmRedaction.svelte
@@ -81,7 +81,7 @@ This almost certainly lives in a modal.
         <Check16 />
         {$_("redact.confirm")}
       </Button>
-      <Button on:click={() => dispatch("close")}>
+      <Button onclick={() => dispatch("close")}>
         {$_("redact.cancel")}
       </Button>
     </Flex>
diff --git a/src/lib/components/forms/DeleteProject.svelte b/src/lib/components/forms/DeleteProject.svelte
index 829bff000..7156365ca 100644
--- a/src/lib/components/forms/DeleteProject.svelte
+++ b/src/lib/components/forms/DeleteProject.svelte
@@ -28,7 +28,7 @@ Confirm project deletion.
       <Trash16 />
       {$_("delete.confirm")}
     </Button>
-    <Button on:click={() => dispatch("close")}>
+    <Button onclick={() => dispatch("close")}>
       {$_("delete.cancel")}
     </Button>
   </Flex>
diff --git a/src/lib/components/forms/Edit.svelte b/src/lib/components/forms/Edit.svelte
index 12c3da4d0..b89cdaf9c 100644
--- a/src/lib/components/forms/Edit.svelte
+++ b/src/lib/components/forms/Edit.svelte
@@ -91,7 +91,7 @@ Usually this will be rendered inside a modal, but it doesn't have to be.
 
     {#if error}
       <Tip mode="error">
-        <Alert24 slot="icon" />
+        {#snippet icon()}<Alert24 />{/snippet}
         <p>{error.message}</p>
         {#if Object.keys(error.errors ?? {}).length}
           <ul>
@@ -164,7 +164,7 @@ Usually this will be rendered inside a modal, but it doesn't have to be.
 
     <Flex class="buttons">
       <Button type="submit" mode="primary" full>{$_("edit.save")}</Button>
-      <Button full on:click={(e) => onclose?.()}>
+      <Button full onclick={(e) => onclose?.()}>
         {$_("edit.cancel")}
       </Button>
     </Flex>
diff --git a/src/lib/components/forms/EditAccess.svelte b/src/lib/components/forms/EditAccess.svelte
index 36003bb9b..e97404705 100644
--- a/src/lib/components/forms/EditAccess.svelte
+++ b/src/lib/components/forms/EditAccess.svelte
@@ -86,7 +86,7 @@ Usually this will be rendered inside a modal, but it doesn't have to be.
 
     {#if error}
       <Tip mode="error">
-        <Alert24 slot="icon" />
+        {#snippet icon()}<Alert24 />{/snippet}
         <p>{error.message}</p>
         {#if Object.keys(error.errors ?? {}).length}
           <ul>
@@ -132,7 +132,7 @@ Usually this will be rendered inside a modal, but it doesn't have to be.
       >
         {$_("edit.save")}
       </Button>
-      <Button full on:click={() => onclose?.()}>
+      <Button full onclick={() => onclose?.()}>
         {$_("edit.cancel")}
       </Button>
     </Flex>
diff --git a/src/lib/components/forms/EditDataMany.svelte b/src/lib/components/forms/EditDataMany.svelte
index 62f2566bc..40a37a531 100644
--- a/src/lib/components/forms/EditDataMany.svelte
+++ b/src/lib/components/forms/EditDataMany.svelte
@@ -213,13 +213,13 @@ This will mostly merge with existing data.
       <p>{$_("data.many", { values: { n: documents.length } })}</p>
       {#snippet empty()}
         <Tip mode="error">
-          <Alert24 slot="icon" />
+          {#snippet icon()}<Alert24 />{/snippet}
           {$_("edit.nodocs")}
         </Tip>
       {/snippet}
       {#snippet oversize()}
         <Tip mode="danger">
-          <Alert24 slot="icon" />
+          {#snippet icon()}<Alert24 />{/snippet}
           {$_("edit.toomany", { values: { n: MAX_EDIT_BATCH } })}
         </Tip>
       {/snippet}
@@ -228,7 +228,7 @@ This will mostly merge with existing data.
 
   {#if error}
     <Tip mode="error">
-      <Alert24 slot="icon" />
+      {#snippet icon()}<Alert24 />{/snippet}
       <p>{error.message}</p>
       {#if Object.keys(error.errors ?? {}).length}
         <ul>
@@ -307,7 +307,7 @@ This will mostly merge with existing data.
   />
 
   <Flex class="buttons" align="center" gap={1}>
-    <Button on:click={close}>{$_("dialog.done")}</Button>
+    <Button onclick={close}>{$_("dialog.done")}</Button>
     {#if total_edited > 0}
       <p class="unsaved" transition:fade>
         {$_("data.total_edited", { values: { n: total_edited } })}
diff --git a/src/lib/components/forms/EditMany.svelte b/src/lib/components/forms/EditMany.svelte
index dfb3ebfcc..d632d299f 100644
--- a/src/lib/components/forms/EditMany.svelte
+++ b/src/lib/components/forms/EditMany.svelte
@@ -88,13 +88,13 @@ Usually this will be rendered inside a modal, but it doesn't have to be.
     <ShowSize size={documents.length}>
       {#snippet empty()}
         <Tip mode="error">
-          <Alert24 slot="icon" />
+          {#snippet icon()}<Alert24 />{/snippet}
           {$_("edit.nodocs")}
         </Tip>
       {/snippet}
       {#snippet oversize()}
         <Tip mode="danger">
-          <Alert24 slot="icon" />
+          {#snippet icon()}<Alert24 />{/snippet}
           {$_("edit.toomany", { values: { n: MAX_EDIT_BATCH } })}
         </Tip>
       {/snippet}
@@ -102,7 +102,7 @@ Usually this will be rendered inside a modal, but it doesn't have to be.
 
     {#if error}
       <Tip mode="error">
-        <Alert24 slot="icon" />
+        {#snippet icon()}<Alert24 />{/snippet}
         <p>{error.message}</p>
         {#if Object.keys(error.errors ?? {}).length}
           <ul>
@@ -154,7 +154,7 @@ Usually this will be rendered inside a modal, but it doesn't have to be.
       <Button type="submit" mode="primary" full {disabled}>
         {$_("edit.save")}
       </Button>
-      <Button full on:click={() => onclose?.()}>
+      <Button full onclick={() => onclose?.()}>
         {$_("edit.cancel")}
       </Button>
     </Flex>
diff --git a/src/lib/components/forms/EditNote.svelte b/src/lib/components/forms/EditNote.svelte
index 5fd6bb974..09cae66ad 100644
--- a/src/lib/components/forms/EditNote.svelte
+++ b/src/lib/components/forms/EditNote.svelte
@@ -75,7 +75,7 @@ Positioning and generating coordinates should happen outside of this form.
     <Flex class="buttons" justify="between">
       <Flex>
         <Button type="submit" mode="primary">{$_("annotate.save")}</Button>
-        <Button type="reset" on:click={() => dispatch("close")}
+        <Button type="reset" onclick={() => dispatch("close")}
           >{$_("annotate.cancel")}
         </Button>
       </Flex>
diff --git a/src/lib/components/forms/EditProject.svelte b/src/lib/components/forms/EditProject.svelte
index d2a52d768..477431c63 100644
--- a/src/lib/components/forms/EditProject.svelte
+++ b/src/lib/components/forms/EditProject.svelte
@@ -71,7 +71,7 @@ Edit project metadata
           {$_("projects.create")}
         </Button>
       {/if}
-      <Button full on:click={(e) => dispatch("close")}>
+      <Button full onclick={(e) => dispatch("close")}>
         {$_("edit.cancel")}
       </Button>
     </Flex>
diff --git a/src/lib/components/forms/EditSectionRow.svelte b/src/lib/components/forms/EditSectionRow.svelte
index 4cfab307f..f035c80ca 100644
--- a/src/lib/components/forms/EditSectionRow.svelte
+++ b/src/lib/components/forms/EditSectionRow.svelte
@@ -71,7 +71,7 @@ One row of the `EditSections.svelte` form, to encapsulate logic.
         name="action"
         value="update"
         {disabled}
-        on:click={async () => {
+        onclick={async () => {
           const section = { id, page_number, title };
           await update(document.id, id, section, csrftoken);
           await invalidate(`document:${document.id}`);
@@ -86,7 +86,7 @@ One row of the `EditSections.svelte` form, to encapsulate logic.
         minW={false}
         name="action"
         value="delete"
-        on:click={async () => {
+        onclick={async () => {
           await remove(document.id, id, csrftoken);
           await invalidate(`document:${document.id}`);
         }}
@@ -102,7 +102,7 @@ One row of the `EditSections.svelte` form, to encapsulate logic.
         name="action"
         value="add"
         {disabled}
-        on:click={async (e) => {
+        onclick={async (e) => {
           await create(document.id, { title, page_number }, csrftoken);
           await invalidate(`document:${document.id}`);
           reset();
@@ -116,7 +116,7 @@ One row of the `EditSections.svelte` form, to encapsulate logic.
         mode="primary"
         title={$_("sections.clear")}
         minW={false}
-        on:click={reset}
+        onclick={reset}
       >
         <XCircle16 />
       </Button>
diff --git a/src/lib/components/forms/EditSections.svelte b/src/lib/components/forms/EditSections.svelte
index 5eac54b45..0985dd90f 100644
--- a/src/lib/components/forms/EditSections.svelte
+++ b/src/lib/components/forms/EditSections.svelte
@@ -83,7 +83,7 @@ This form is entirely client-side.
     </tfoot>
   </table>
   <div class="buttons">
-    <Button mode="primary" on:click={() => dispatch("close")}>
+    <Button mode="primary" onclick={() => dispatch("close")}>
       {$_("dialog.done")}
     </Button>
   </div>
diff --git a/src/lib/components/forms/InviteCollaborator.svelte b/src/lib/components/forms/InviteCollaborator.svelte
index 73883438b..c8858c67e 100644
--- a/src/lib/components/forms/InviteCollaborator.svelte
+++ b/src/lib/components/forms/InviteCollaborator.svelte
@@ -64,7 +64,7 @@ Invite a new collaborator to a project
 
   <Flex class="buttons">
     <Button type="submit" mode="primary">{$_("collaborators.add")}</Button>
-    <Button on:click={() => dispatch("close")}>{$_("dialog.cancel")}</Button>
+    <Button onclick={() => dispatch("close")}>{$_("dialog.cancel")}</Button>
   </Flex>
 </form>
 
diff --git a/src/lib/components/forms/Projects.svelte b/src/lib/components/forms/Projects.svelte
index 480415fc2..4785e8edd 100644
--- a/src/lib/components/forms/Projects.svelte
+++ b/src/lib/components/forms/Projects.svelte
@@ -106,13 +106,13 @@ and we don't want to do that everywhere.
     <p>{$_("edit.many", { values: { n: documents.length } })}</p>
     {#snippet empty()}
       <Tip mode="error">
-        <Alert24 slot="icon" />
+        {#snippet icon()}<Alert24 />{/snippet}
         {$_("edit.nodocs")}
       </Tip>
     {/snippet}
     {#snippet oversize()}
       <Tip mode="danger">
-        <Alert24 slot="icon" />
+        {#snippet icon()}<Alert24 />{/snippet}
         {$_("edit.toomany", { values: { n: MAX_EDIT_BATCH } })}
       </Tip>
     {/snippet}
@@ -136,7 +136,7 @@ and we don't want to do that everywhere.
     {/each}
   </div>
   <footer>
-    <Button ghost mode="primary" on:click={() => (createProjectOpen = true)}>
+    <Button ghost mode="primary" onclick={() => (createProjectOpen = true)}>
       <PlusCircle16 />
       {$_("projects.create")}
     </Button>
@@ -145,7 +145,7 @@ and we don't want to do that everywhere.
       name="documents"
       value={documents.map((d) => d.id).join(",")}
     />
-    <Button on:click={() => dispatch("close")}>{$_("dialog.done")}</Button>
+    <Button onclick={() => dispatch("close")}>{$_("dialog.done")}</Button>
   </footer>
 </div>
 
diff --git a/src/lib/components/forms/RemoveCollaborator.svelte b/src/lib/components/forms/RemoveCollaborator.svelte
index 1b9664ba9..55217e3df 100644
--- a/src/lib/components/forms/RemoveCollaborator.svelte
+++ b/src/lib/components/forms/RemoveCollaborator.svelte
@@ -48,7 +48,7 @@ Remove a collaborator from a project
   <input type="hidden" name="user" value={user.user.id} />
   <Flex class="buttons">
     <Button type="submit" mode="danger">{$_("dialog.remove")}</Button>
-    <Button on:click={() => dispatch("close")}>{$_("dialog.cancel")}</Button>
+    <Button onclick={() => dispatch("close")}>{$_("dialog.cancel")}</Button>
   </Flex>
 </form>
 
diff --git a/src/lib/components/forms/Reprocess.svelte b/src/lib/components/forms/Reprocess.svelte
index 5fa197148..1ae344e57 100644
--- a/src/lib/components/forms/Reprocess.svelte
+++ b/src/lib/components/forms/Reprocess.svelte
@@ -158,7 +158,7 @@ This will mostly be used inside a modal but isn't dependent on one.
     {/if}
     {#if errors}
       <Tip mode="error">
-        <Alert24 slot="icon" />
+        {#snippet icon()}<Alert24 />{/snippet}
         <p>{errors.message}</p>
         {#if errors.errors}
           <ul>
@@ -172,7 +172,7 @@ This will mostly be used inside a modal but isn't dependent on one.
 
     {#if pending.length > 0}
       <Tip mode="error">
-        <Alert24 slot="icon" />
+        {#snippet icon()}<Alert24 />{/snippet}
         <p>{$_("dialogReprocessDialog.pending")}</p>
         <ul>
           {#each pending as document}
@@ -184,7 +184,7 @@ This will mostly be used inside a modal but isn't dependent on one.
 
     {#if multilingual}
       <Tip mode="danger">
-        <Alert24 slot="icon" />
+        {#snippet icon()}<Alert24 />{/snippet}
         <p>{$_("dialogReprocessDialog.multilingual")}</p>
       </Tip>
     {/if}
@@ -224,7 +224,7 @@ This will mostly be used inside a modal but isn't dependent on one.
 
           {#snippet oversize()}
             <Tip mode="danger">
-              <Alert24 slot="icon" />
+              {#snippet icon()}<Alert24 />{/snippet}
               {$_("dialogReprocessDialog.toomany", {
                 values: { max: MAX_EDIT_BATCH, n: documents.length },
               })}
@@ -250,7 +250,7 @@ This will mostly be used inside a modal but isn't dependent on one.
       <Button {disabled} type="submit" full mode="danger">
         <IssueReopened16 />{$_("dialogReprocessDialog.confirm")}
       </Button>
-      <Button full on:click={() => onclose?.()}>
+      <Button full onclick={() => onclose?.()}>
         {$_("edit.cancel")}
       </Button>
     </Flex>
diff --git a/src/lib/components/forms/Share.svelte b/src/lib/components/forms/Share.svelte
index a4a80e745..4fc0410a4 100644
--- a/src/lib/components/forms/Share.svelte
+++ b/src/lib/components/forms/Share.svelte
@@ -116,13 +116,13 @@
   {#if access === "private"}
     <div class="banner">
       <Tip mode="danger">
-        <ShieldLock24 slot="icon" />
+        {#snippet icon()}<ShieldLock24 />{/snippet}
         <div class="privateWarning">
           <div style:flex="1 1 auto">
             {$_("share.privateWarning", { values: { type: "document" } })}
           </div>
           {#if document.edit_access}
-            <Button mode="danger" size="small" on:click={openEditing}>
+            <Button mode="danger" size="small" onclick={openEditing}>
               {$_("share.privateFix")}
             </Button>
           {/if}
@@ -132,13 +132,13 @@
   {:else if access === "organization"}
     <div class="banner">
       <Tip mode="premium">
-        <Organization24 slot="icon" />
+        {#snippet icon()}<Organization24 />{/snippet}
         <div class="privateWarning">
           <div style:flex="1 1 auto">
             {$_("share.orgWarning", { values: { type: "document" } })}
           </div>
           {#if document.edit_access}
-            <Button mode="danger" size="small" on:click={openEditing}>
+            <Button mode="danger" size="small" onclick={openEditing}>
               {$_("share.privateFix")}
             </Button>
           {/if}
@@ -240,7 +240,7 @@
                 size="small"
                 ghost
                 mode="primary"
-                on:click={() => (customizeEmbedOpen = false)}
+                onclick={() => (customizeEmbedOpen = false)}
               >
                 <Check16 />
                 {$_("share.save")}
@@ -250,7 +250,7 @@
                 size="small"
                 ghost
                 mode="primary"
-                on:click={() => (customizeEmbedOpen = true)}
+                onclick={() => (customizeEmbedOpen = true)}
                 disabled={currentTab !== "document"}
               >
                 <Sliders16 />
diff --git a/src/lib/components/forms/UpdateCollaborator.svelte b/src/lib/components/forms/UpdateCollaborator.svelte
index ac5787611..90186bd93 100644
--- a/src/lib/components/forms/UpdateCollaborator.svelte
+++ b/src/lib/components/forms/UpdateCollaborator.svelte
@@ -55,7 +55,7 @@ Update permissions for a single collaborator on a project
 
   <Flex class="buttons">
     <Button type="submit" mode="primary">{$_("dialog.update")}</Button>
-    <Button on:click={() => dispatch("close")}>{$_("dialog.cancel")}</Button>
+    <Button onclick={() => dispatch("close")}>{$_("dialog.cancel")}</Button>
   </Flex>
 </form>
 
diff --git a/src/lib/components/forms/Upload.svelte b/src/lib/components/forms/Upload.svelte
index b410045f6..21c0e8d60 100644
--- a/src/lib/components/forms/Upload.svelte
+++ b/src/lib/components/forms/Upload.svelte
@@ -432,15 +432,17 @@ progress through the three-part upload process.
                   {$_("uploadDialog.revisionControlHelp")}
                 </p>{/snippet}
             </Field>
-            <Field inline slot="basic">
-              <Switch name="revision_control" disabled />
-              <FieldLabel premium>
-                {$_("uploadDialog.revisionControl")}
-              </FieldLabel>
-              {#snippet help()}<p>
-                  {$_("uploadDialog.revisionControlHelp")}
-                </p>{/snippet}
-            </Field>
+            {#snippet basic()}
+              <Field inline>
+                <Switch name="revision_control" disabled />
+                <FieldLabel premium>
+                  {$_("uploadDialog.revisionControl")}
+                </FieldLabel>
+                {#snippet help()}<p>
+                    {$_("uploadDialog.revisionControlHelp")}
+                  </p>{/snippet}
+              </Field>
+            {/snippet}
           </Premium>
         </Flex>
       </div>
diff --git a/src/lib/components/forms/UploadListItem.svelte b/src/lib/components/forms/UploadListItem.svelte
index 296e27743..802c0f03d 100644
--- a/src/lib/components/forms/UploadListItem.svelte
+++ b/src/lib/components/forms/UploadListItem.svelte
@@ -73,11 +73,7 @@
           {#if status?.error}
             <p class="error">
               {status?.error.message}
-              <Button
-                ghost
-                minW={false}
-                on:click={() => dispatch("remove", id)}
-              >
+              <Button ghost minW={false} onclick={() => dispatch("remove", id)}>
                 {$_("dialog.remove")}?
               </Button>
             </p>
@@ -116,7 +112,7 @@
       minW={false}
       ghost
       title={$_("dialog.remove")}
-      on:click={() => dispatch("remove", id)}
+      onclick={() => dispatch("remove", id)}
     >
       <XCircleFill24 />
     </Button>
diff --git a/src/lib/components/forms/stories/AddOnDispatch.stories.svelte b/src/lib/components/forms/stories/AddOnDispatch.stories.svelte
index f9072b1ed..412bc2109 100644
--- a/src/lib/components/forms/stories/AddOnDispatch.stories.svelte
+++ b/src/lib/components/forms/stories/AddOnDispatch.stories.svelte
@@ -128,6 +128,15 @@
           ),
         },
       },
+      // not yet supported
+      state: {
+        page: {
+          url: new URL(
+            "/?site=https://example.com&project=123&keywords=foo,bar&notAfield=hahagotya",
+            APP_URL,
+          ),
+        },
+      },
     },
   }}
 />
diff --git a/src/lib/components/inputs/ArrayField.svelte b/src/lib/components/inputs/ArrayField.svelte
index 6488084e8..ddaad4b36 100644
--- a/src/lib/components/inputs/ArrayField.svelte
+++ b/src/lib/components/inputs/ArrayField.svelte
@@ -65,13 +65,13 @@
       </Field>
 
       {#if numItems > 1}
-        <Button minW={false} on:click={(e) => remove(e, i)}><X16 /></Button>
+        <Button minW={false} onclick={(e) => remove(e, i)}><X16 /></Button>
       {/if}
     </div>
   {/each}
 
   <div class="array-controls">
-    <Button on:click={push}><Plus16 fill="white" /></Button>
+    <Button onclick={push}><Plus16 fill="white" /></Button>
   </div>
 </fieldset>
 
diff --git a/src/lib/components/inputs/File.svelte b/src/lib/components/inputs/File.svelte
index 442ba52a7..ae88724f9 100644
--- a/src/lib/components/inputs/File.svelte
+++ b/src/lib/components/inputs/File.svelte
@@ -4,38 +4,51 @@
 -->
 
 <script lang="ts">
-  import type { ComponentProps } from "svelte";
+  import type { ComponentProps, Snippet } from "svelte";
   import { DOCUMENT_TYPES } from "@/config/config.js";
   import Button from "$lib/components/common/Button.svelte";
 
-  export let name: null | string = null;
-  export let onFileSelect: (files: FileList) => void;
-  export let multiple = false;
-  export let buttonMode: ComponentProps<Button>["mode"] = "primary";
-  export let files: null | FileList = null;
-  export let disabled = false;
+  interface Props {
+    name?: null | string;
+    onFileSelect: (files: File[]) => void;
+    multiple?: boolean;
+    buttonMode?: ComponentProps<typeof Button>["mode"];
+    files?: null | FileList;
+    disabled?: boolean;
+    children?: Snippet;
+  }
+
+  let {
+    name = null,
+    onFileSelect,
+    multiple = false,
+    buttonMode = "primary",
+    files = $bindable(null),
+    disabled = false,
+    children,
+  }: Props = $props();
 
   // Bound to the file picker input
-  let picker: HTMLInputElement;
+  let picker: HTMLInputElement | undefined = $state();
 
   function openFilePicker() {
-    picker.click();
+    picker?.click();
   }
 
   function handleFiles() {
+    if (!picker) return;
     const fileList = picker.files;
     if (fileList && fileList.length > 0) {
       // Clone the file list so the input can be safely cleared
-      const listCopy: FileList = Object.assign([], fileList);
-      onFileSelect(listCopy);
+      onFileSelect(Array.from(fileList));
     }
     picker.value = "";
   }
 </script>
 
 <span class="container" class:disabled>
-  <Button mode={buttonMode} on:click={openFilePicker} {disabled}>
-    <slot />
+  <Button mode={buttonMode} onclick={openFilePicker} {disabled}>
+    {@render children?.()}
   </Button>
   <input
     type="file"
@@ -45,7 +58,7 @@
     {disabled}
     bind:files
     bind:this={picker}
-    on:change={handleFiles}
+    onchange={handleFiles}
     class="picker"
   />
 </span>
diff --git a/src/lib/components/inputs/KeyValue.svelte b/src/lib/components/inputs/KeyValue.svelte
index f1d2cb25e..eb00b6f59 100644
--- a/src/lib/components/inputs/KeyValue.svelte
+++ b/src/lib/components/inputs/KeyValue.svelte
@@ -199,7 +199,7 @@ This uses `svelecte` to let users more easily choose existing keys.
           minW={false}
           value="add"
           disabled={!key || !value || !onadd || disabled}
-          on:click={handleAdd}
+          onclick={handleAdd}
           aria-label={$_("data.update")}
         >
           <PlusCircle24 />
@@ -213,7 +213,7 @@ This uses `svelecte` to let users more easily choose existing keys.
           mode="primary"
           disabled={!edited || !onedit || !value.trim() || disabled}
           value="edit"
-          on:click={handleEdit}
+          onclick={handleEdit}
           aria-label={$_("dialog.update")}
         >
           <CheckCircle24 />
@@ -227,7 +227,7 @@ This uses `svelecte` to let users more easily choose existing keys.
           minW={false}
           value="delete"
           disabled={!ondelete || disabled}
-          on:click={handleDelete}
+          onclick={handleDelete}
           aria-label={$_("data.delete")}
           --fill="var(--caution)"
           --background="var(--orange-2)"
diff --git a/src/lib/components/layouts/AddOnBrowser.svelte b/src/lib/components/layouts/AddOnBrowser.svelte
index b95923260..9ac4a4c33 100644
--- a/src/lib/components/layouts/AddOnBrowser.svelte
+++ b/src/lib/components/layouts/AddOnBrowser.svelte
@@ -25,11 +25,15 @@
   import AddOns from "$lib/components/sidebar/AddOns.svelte";
   import SidebarLayout from "./SidebarLayout.svelte";
 
-  export let addons: Promise<APIResponse<Page<AddOn>>>;
-  export let events: Promise<APIResponse<Page<Event>>>;
-  export let runs: Promise<APIResponse<Page<Run>>>;
-  export let active: string = "all";
-  export let query: string = "";
+  interface Props {
+    addons: Promise<APIResponse<Page<AddOn>>>;
+    events: Promise<APIResponse<Page<Event>>>;
+    runs: Promise<APIResponse<Page<Run>>>;
+    active?: string;
+    query?: string;
+  }
+
+  let { addons, events, runs, active = "all", query = "" }: Props = $props();
 
   // TODO: Improve cursor handling in page data responses
   /** The pagination URL provided in the reponse corresponds to an API query.
@@ -44,7 +48,7 @@
     goto(url);
   }
 
-  $: showTip = ["active", "featured", "premium"].includes(active);
+  let showTip = $derived(["active", "featured", "premium"].includes(active));
 </script>
 
 <SidebarLayout>
@@ -53,105 +57,110 @@
     <Projects />
     <AddOns />
   </svelte:fragment>
-  <div class="container" slot="content">
-    <main>
-      <ContentLayout>
-        {#snippet header()}
-          <PageToolbar>
-            {#snippet center()}
-              <Search name="query" {query} />
-            {/snippet}
-          </PageToolbar>
-        {/snippet}
-
-        {#if showTip}
-          <div class="tip">
-            {#if active === "active"}
-              <Tip
-                --background-color="var(--orange-1)"
-                --border-color="var(--orange)"
-                --fill="var(--orange-4)"
-              >
-                <Pin size={1.75} slot="icon" />
-                {$_("addonBrowserDialog.pinnedTip")}
-              </Tip>
-            {:else if active === "featured"}
-              <Tip
-                --background-color="var(--yellow-1)"
-                --border-color="var(--yellow)"
-                --fill="var(--yellow-4)"
-              >
-                <Star size={1.75} slot="icon" />
-                {$_("addonBrowserDialog.featuredTip")}
-              </Tip>
-            {:else if active === "premium"}
-              <Tip
-                --background-color="var(--green-1)"
-                --border-color="var(--green)"
-                --fill="var(--green-4)"
-              >
-                <Premium size={1.75} slot="icon" />
-                {$_("addonBrowserDialog.premiumTip")}
-              </Tip>
-            {/if}
-          </div>
-        {/if}
-        {#await addons}
+  <svelte:fragment slot="content">
+    <div class="container">
+      <main>
+        <ContentLayout>
+          {#snippet header()}
+            <PageToolbar>
+              {#snippet center()}
+                <Search name="query" {query} />
+              {/snippet}
+            </PageToolbar>
+          {/snippet}
+          {#if showTip}
+            <div class="tip">
+              {#if active === "active"}
+                <Tip
+                  --background-color="var(--orange-1)"
+                  --border-color="var(--orange)"
+                  --fill="var(--orange-4)"
+                >
+                  {#snippet icon()}
+                    <Pin size={1.75} />
+                  {/snippet}
+                  {$_("addonBrowserDialog.pinnedTip")}
+                </Tip>
+              {:else if active === "featured"}
+                <Tip
+                  --background-color="var(--yellow-1)"
+                  --border-color="var(--yellow)"
+                  --fill="var(--yellow-4)"
+                >
+                  {#snippet icon()}
+                    <Star size={1.75} />
+                  {/snippet}
+                  {$_("addonBrowserDialog.featuredTip")}
+                </Tip>
+              {:else if active === "premium"}
+                <Tip
+                  --background-color="var(--green-1)"
+                  --border-color="var(--green)"
+                  --fill="var(--green-4)"
+                >
+                  {#snippet icon()}
+                    <Premium size={1.75} />
+                  {/snippet}
+                  {$_("addonBrowserDialog.premiumTip")}
+                </Tip>
+              {/if}
+            </div>
+          {/if}
+          {#await addons}
+            <Empty icon={Hourglass24}>{$_("common.loading")}</Empty>
+          {:then { data: page }}
+            {#each page?.results ?? [] as addon}
+              <ListItem {addon} />
+            {:else}
+              <Empty icon={Plug24}>{$_("addonBrowserDialog.empty")}</Empty>
+            {/each}
+          {:catch error}
+            <Error>{String(error)}</Error>
+          {/await}
+          {#snippet footer()}
+            <PageToolbar>
+              {#snippet center()}
+                {#await addons}
+                  <Paginator />
+                {:then { data: page }}
+                  <Paginator
+                    has_next={Boolean(page?.next)}
+                    has_previous={Boolean(page?.previous)}
+                    onnext={() => {
+                      if (page?.next) paginate(page.next);
+                    }}
+                    onprevious={() => {
+                      if (page?.previous) paginate(page.previous);
+                    }}
+                  />
+                {/await}
+              {/snippet}
+            </PageToolbar>
+          {/snippet}
+        </ContentLayout>
+      </main>
+      <aside class="history">
+        {#await events}
           <Empty icon={Hourglass24}>{$_("common.loading")}</Empty>
-        {:then { data: page }}
-          {#each page?.results ?? [] as addon}
-            <ListItem {addon} />
-          {:else}
-            <Empty icon={Plug24}>{$_("addonBrowserDialog.empty")}</Empty>
-          {/each}
-        {:catch error}
-          <Error>{String(error)}</Error>
+        {:then { data: events }}
+          <Scheduled
+            events={events?.results ?? []}
+            next={events?.next}
+            previous={events?.previous}
+          />
         {/await}
-
-        {#snippet footer()}
-          <PageToolbar>
-            {#snippet center()}
-              {#await addons}
-                <Paginator />
-              {:then { data: page }}
-                <Paginator
-                  has_next={Boolean(page?.next)}
-                  has_previous={Boolean(page?.previous)}
-                  on:next={() => {
-                    if (page?.next) paginate(page.next);
-                  }}
-                  on:previous={() => {
-                    if (page?.previous) paginate(page.previous);
-                  }}
-                />
-              {/await}
-            {/snippet}
-          </PageToolbar>
-        {/snippet}
-      </ContentLayout>
-    </main>
-    <aside class="history">
-      {#await events}
-        <Empty icon={Hourglass24}>{$_("common.loading")}</Empty>
-      {:then { data: events }}
-        <Scheduled
-          events={events?.results ?? []}
-          next={events?.next}
-          previous={events?.previous}
-        />
-      {/await}
-
-      {#await runs}
-        <Empty icon={Hourglass24}>{$_("common.loading")}</Empty>
-      {:then { data: runs }}
-        <History
-          runs={runs?.results ?? []}
-          next={runs?.next}
-          previous={runs?.previous}
-        />
-      {/await}
-    </aside>
-  </div>
+        {#await runs}
+          <Empty icon={Hourglass24}>{$_("common.loading")}</Empty>
+        {:then { data: runs }}
+          <History
+            runs={runs?.results ?? []}
+            next={runs?.next}
+            previous={runs?.previous}
+          />
+        {/await}
+      </aside>
+    </div>
+  </svelte:fragment>
 </SidebarLayout>
 
 <style>
diff --git a/src/lib/components/layouts/AddOnLayout.svelte b/src/lib/components/layouts/AddOnLayout.svelte
index faac080bf..c3820b92a 100644
--- a/src/lib/components/layouts/AddOnLayout.svelte
+++ b/src/lib/components/layouts/AddOnLayout.svelte
@@ -128,7 +128,7 @@
               <Button
                 ghost
                 minW={false}
-                on:click={() => ($sidebars["navigation"] = true)}
+                onclick={() => ($sidebars["navigation"] = true)}
               >
                 <span class="flipV">
                   <SidebarExpand16 />
@@ -211,7 +211,7 @@
                     <Button
                       ghost
                       mode="primary"
-                      on:click={() => (docSelectModalOpen = true)}
+                      onclick={() => (docSelectModalOpen = true)}
                     >
                       {$_("addonDispatchDialog.selectDocuments")}
                     </Button>
@@ -241,7 +241,7 @@
               <Button
                 mode="primary"
                 ghost
-                on:click={() => (docSelectModalOpen = false)}
+                onclick={() => (docSelectModalOpen = false)}
                 minW={false}
               >
                 {$_("dialog.done")}
diff --git a/src/lib/components/layouts/DocumentBrowser.svelte b/src/lib/components/layouts/DocumentBrowser.svelte
index e77ec61c7..22ea87cf3 100644
--- a/src/lib/components/layouts/DocumentBrowser.svelte
+++ b/src/lib/components/layouts/DocumentBrowser.svelte
@@ -107,7 +107,7 @@
                   <Button
                     ghost
                     minW={false}
-                    on:click={() => ($sidebars["navigation"] = true)}
+                    onclick={() => ($sidebars["navigation"] = true)}
                   >
                     <span class="flipV">
                       <SidebarExpand16 />
@@ -121,7 +121,7 @@
                   <Button
                     ghost
                     minW={false}
-                    on:click={() => ($sidebars["action"] = true)}
+                    onclick={() => ($sidebars["action"] = true)}
                   >
                     <SidebarExpand16 />
                   </Button>
@@ -168,7 +168,9 @@
                         !search.editable}
                     >
                       {$_("bulk.title")}
-                      <ChevronUp12 slot="end" />
+                      {#snippet end()}
+                        <ChevronUp12 />
+                      {/snippet}
                     </NavItem>
                   {/snippet}
                   {#snippet inner({ close })}
diff --git a/src/lib/components/layouts/EmbedLayout.svelte b/src/lib/components/layouts/EmbedLayout.svelte
index 0716d8b8b..06c2a56b2 100644
--- a/src/lib/components/layouts/EmbedLayout.svelte
+++ b/src/lib/components/layouts/EmbedLayout.svelte
@@ -73,7 +73,7 @@
             isFullscreen ? "embed.exitFullscreen" : "embed.enterFullscreen",
           )}
         >
-          <Button size="small" ghost minW={false} on:click={toggleFullscreen}>
+          <Button size="small" ghost minW={false} onclick={toggleFullscreen}>
             {#if isFullscreen}
               <ScreenNormal16 />
             {:else}
diff --git a/src/lib/components/layouts/Error.svelte b/src/lib/components/layouts/Error.svelte
index 209a8c5a1..5859b6474 100644
--- a/src/lib/components/layouts/Error.svelte
+++ b/src/lib/components/layouts/Error.svelte
@@ -54,7 +54,7 @@
       ghost
       size="small"
       mode="primary"
-      on:click={() => (feedbackOpen = true)}
+      onclick={() => (feedbackOpen = true)}
     >
       {$_("error.report")}
     </Button>
diff --git a/src/lib/components/layouts/Modal.svelte b/src/lib/components/layouts/Modal.svelte
index 492c5918d..ac4cc8592 100644
--- a/src/lib/components/layouts/Modal.svelte
+++ b/src/lib/components/layouts/Modal.svelte
@@ -54,7 +54,7 @@ of the $modal store. These are used to set the active modal on any given page.
         minW={false}
         ghost
         mode="primary"
-        on:click={() => dispatch("close")}
+        onclick={() => dispatch("close")}
       >
         <XCircle24 />
       </Button>
diff --git a/src/lib/components/layouts/Navigation.svelte b/src/lib/components/layouts/Navigation.svelte
index 98f6c704f..ef01b6bba 100644
--- a/src/lib/components/layouts/Navigation.svelte
+++ b/src/lib/components/layouts/Navigation.svelte
@@ -80,7 +80,7 @@
         minW={false}
         ghost
         mode="primary"
-        on:click={() => (feedbackOpen = true)}
+        onclick={() => (feedbackOpen = true)}
         id="feedback"
       >
         {$_("common.feedback")}
diff --git a/src/lib/components/layouts/Sidebar.svelte b/src/lib/components/layouts/Sidebar.svelte
index 2deacaaa1..bca9fa650 100644
--- a/src/lib/components/layouts/Sidebar.svelte
+++ b/src/lib/components/layouts/Sidebar.svelte
@@ -64,7 +64,7 @@
       {#if $$slots.title}
         <span class="title"><slot name="title" /></span>
       {/if}
-      <Button ghost minW={false} on:click={close}>
+      <Button ghost minW={false} onclick={close}>
         <span class="icon" class:flipV={position === "left"}>
           <SidebarCollapse16 />
         </span>
diff --git a/src/lib/components/layouts/stories/Toaster.stories.svelte b/src/lib/components/layouts/stories/Toaster.stories.svelte
index 1a7de9615..77dcdd299 100644
--- a/src/lib/components/layouts/stories/Toaster.stories.svelte
+++ b/src/lib/components/layouts/stories/Toaster.stories.svelte
@@ -14,27 +14,27 @@
 
 <Story name="With Title">
   <Flex direction="column">
-    <Button on:click={() => toast("A standard message")}>Send Toast</Button>
-    <Button on:click={() => toast("Did you know?", { status: "info" })}
+    <Button onclick={() => toast("A standard message")}>Send Toast</Button>
+    <Button onclick={() => toast("Did you know?", { status: "info" })}
       >Send Info</Button
     >
-    <Button on:click={() => toast("Great job!", { status: "success" })}
+    <Button onclick={() => toast("Great job!", { status: "success" })}
       >Send Success</Button
     >
-    <Button on:click={() => toast("Look out ahead!", { status: "warning" })}
+    <Button onclick={() => toast("Look out ahead!", { status: "warning" })}
       >Send Warning</Button
     >
-    <Button on:click={() => toast("Bad things happen", { status: "error" })}
+    <Button onclick={() => toast("Bad things happen", { status: "error" })}
       >Send Error</Button
     >
     <Button
-      on:click={() =>
+      onclick={() =>
         toast("I won't go away on my own", { status: "info", lifespan: null })}
     >
       Permanent Toast
     </Button>
     <Button
-      on:click={() => toast(Kv, { props: { key: "Type", value: "Component" } })}
+      onclick={() => toast(Kv, { props: { key: "Type", value: "Component" } })}
     >
       Component Toast
     </Button>
diff --git a/src/lib/components/navigation/Breadcrumbs.svelte b/src/lib/components/navigation/Breadcrumbs.svelte
index 85026d2ec..1febf3264 100644
--- a/src/lib/components/navigation/Breadcrumbs.svelte
+++ b/src/lib/components/navigation/Breadcrumbs.svelte
@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   export interface Breadcrumb {
     title: string;
     href?: string;
@@ -13,18 +13,23 @@
 
   import { remToPx } from "$lib/utils/layout";
 
-  export let trail: Breadcrumb[] = [];
+  interface Props {
+    trail?: Breadcrumb[];
+    root?: import("svelte").Snippet;
+  }
+
+  let { trail = [], root }: Props = $props();
 
-  let width: number = 1000;
+  let width: number = $state(1000);
 
-  $: SHOW_BREADCRUMBS = width > remToPx(32);
+  let SHOW_BREADCRUMBS = $derived(width > remToPx(32));
 </script>
 
 <div class="breadcrumbs" bind:clientWidth={width}>
   <Flex gap={0.375} align="center">
-    <slot name="root">
+    {#if root}{@render root()}{:else}
       <a href="/" class="logo crumb"><Logo /></a>
-    </slot>
+    {/if}
     {#if SHOW_BREADCRUMBS}
       {#each trail as { href, title }}
         <span class="divider"><TriangleRight16 fill="var(--gray-3)" /></span>
diff --git a/src/lib/components/navigation/HelpMenu.svelte b/src/lib/components/navigation/HelpMenu.svelte
index df4c00040..e7e3d1026 100644
--- a/src/lib/components/navigation/HelpMenu.svelte
+++ b/src/lib/components/navigation/HelpMenu.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { page } from "$app/stores";
+  import { page } from "$app/state";
 
   import { _ } from "svelte-i18n";
   import {
@@ -25,68 +25,92 @@
 
   import { startTour, isTourAvailable } from "../onboarding/GuidedTour.svelte";
 
-  export let position: Placement = "bottom-end";
+  interface Props {
+    position?: Placement;
+  }
+
+  let { position = "bottom-end" }: Props = $props();
 
   function onTourClick() {
     close();
     startTour();
   }
 
-  $: showTour = isTourAvailable($page?.route?.id);
+  let showTour = $derived(isTourAvailable(page.route.id));
 </script>
 
 <!-- Help Menu -->
 <Dropdown {position}>
   {#snippet anchor()}
     <NavItem>
-      <Question24 slot="start" />
-      <div class="dropdownArrow" slot="end">
-        {#if position.includes("bottom")}
-          <ChevronDown12 />
-        {:else}
-          <ChevronUp12 />
-        {/if}
-      </div>
+      {#snippet start()}
+        <Question24 />
+      {/snippet}
+      {#snippet end()}
+        <div class="dropdownArrow">
+          {#if position.includes("bottom")}
+            <ChevronDown12 />
+          {:else}
+            <ChevronUp12 />
+          {/if}
+        </div>
+      {/snippet}
     </NavItem>
   {/snippet}
   {#snippet inner(close)}
     <Menu>
       {#if showTour}
-        <NavItem hover on:click={onTourClick}>
-          <Milestone16 slot="start" />
+        <NavItem hover onclick={onTourClick}>
+          {#snippet start()}
+            <Milestone16 />
+          {/snippet}
           Guided Tour
         </NavItem>
       {/if}
-      <NavItem href="/help/faq/" on:click={close}>
-        <CommentDiscussion16 slot="start" />
+      <NavItem href="/help/faq/" onclick={close}>
+        {#snippet start()}
+          <CommentDiscussion16 />
+        {/snippet}
         {$_("authSection.help.faq")}
       </NavItem>
-      <NavItem href="/help/search/" on:click={close}>
-        <Search16 slot="start" />
+      <NavItem href="/help/search/" onclick={close}>
+        {#snippet start()}
+          <Search16 />
+        {/snippet}
         {$_("authSection.help.searchDocs")}
       </NavItem>
-      <NavItem href="/help/api/" on:click={close}>
-        <Code16 slot="start" />
+      <NavItem href="/help/api/" onclick={close}>
+        {#snippet start()}
+          <Code16 />
+        {/snippet}
         {$_("authSection.help.apiDocs")}
       </NavItem>
-      <NavItem href="/help/add-ons/" on:click={close}>
-        <Plug16 slot="start" />
+      <NavItem href="/help/add-ons/" onclick={close}>
+        {#snippet start()}
+          <Plug16 />
+        {/snippet}
         {$_("authSection.help.addOns")}
       </NavItem>
-      <NavItem href="/help/premium/" on:click={close}>
-        <Premium slot="start" />
+      <NavItem href="/help/premium/" onclick={close}>
+        {#snippet start()}
+          <Premium />
+        {/snippet}
         {$_("authSection.help.premium")}
       </NavItem>
-      <NavItem href="https://www.muckrock.com/donate/" on:click={close}>
-        <Gift16 slot="start" />
+      <NavItem href="https://www.muckrock.com/donate/" onclick={close}>
+        {#snippet start()}
+          <Gift16 />
+        {/snippet}
         {$_("authSection.help.donate")}
       </NavItem>
       <NavItem
         href="mailto:info@documentcloud.org"
         target="_blank"
-        on:click={close}
+        onclick={close}
       >
-        <Mail16 slot="start" />
+        {#snippet start()}
+          <Mail16 />
+        {/snippet}
         {$_("authSection.help.emailUs")}
       </NavItem>
     </Menu>
diff --git a/src/lib/components/navigation/LanguageMenu.svelte b/src/lib/components/navigation/LanguageMenu.svelte
index b5b8d0646..efdaba745 100644
--- a/src/lib/components/navigation/LanguageMenu.svelte
+++ b/src/lib/components/navigation/LanguageMenu.svelte
@@ -11,10 +11,15 @@
 
   import { LANGUAGES } from "@/config/config.js";
 
-  export let position: Placement = "bottom-end";
+  interface Props {
+    position?: Placement;
+  }
+
+  let { position = "bottom-end" }: Props = $props();
 
-  $: currentLang =
-    LANGUAGES.find(([_, code]) => code === $locale) ?? LANGUAGES[0];
+  let currentLang = $derived(
+    LANGUAGES.find(([_, code]) => code === $locale) ?? LANGUAGES[0],
+  );
 
   function updateLanguage(code: string) {
     $locale = code;
@@ -29,22 +34,26 @@
   <Dropdown {position}>
     {#snippet anchor()}
       <NavItem>
-        <span class="flag" slot="start">{currentLang?.[2]}</span>
+        {#snippet start()}
+          <span class="flag">{currentLang?.[2]}</span>
+        {/snippet}
         <!-- <span class="lang">{currentLang[0]}</span> -->
-        <div class="dropdownArrow" slot="end">
-          {#if position.includes("bottom")}
-            <ChevronDown12 />
-          {:else}
-            <ChevronUp12 />
-          {/if}
-        </div>
+        {#snippet end()}
+          <div class="dropdownArrow">
+            {#if position.includes("bottom")}
+              <ChevronDown12 />
+            {:else}
+              <ChevronUp12 />
+            {/if}
+          </div>
+        {/snippet}
       </NavItem>
     {/snippet}
     {#snippet inner(close)}
       <Menu>
         {#each LANGUAGES as [name, code, flag]}
           <NavItem
-            on:click={() => {
+            onclick={() => {
               updateLanguage(code ?? "");
               close();
             }}
diff --git a/src/lib/components/navigation/OrgMenu.svelte b/src/lib/components/navigation/OrgMenu.svelte
index 6cd1dfee2..1ca4db564 100644
--- a/src/lib/components/navigation/OrgMenu.svelte
+++ b/src/lib/components/navigation/OrgMenu.svelte
@@ -82,38 +82,46 @@
   {#snippet anchor()}
     {#if active_org.individual}
       <NavItem --fill="var(--green-3)" --color="var(--green-5)">
-        <PremiumIcon slot="start" />
+        {#snippet start()}
+          <PremiumIcon />
+        {/snippet}
         {isPro
           ? $_("authSection.pro.title")
           : $_("authSection.premiumUpgrade.title")}
-        <div class="dropdownArrow" slot="end">
-          {#if position.includes("bottom")}
-            <ChevronDown12 />
-          {:else}
-            <ChevronUp12 />
-          {/if}
-        </div>
+        {#snippet end()}
+          <div class="dropdownArrow">
+            {#if position.includes("bottom")}
+              <ChevronDown12 />
+            {:else}
+              <ChevronUp12 />
+            {/if}
+          </div>
+        {/snippet}
       </NavItem>
     {:else}
       <NavItem>
-        <div class="avatar" slot="start">
-          <img
-            alt={$_("authSection.org.avatar", {
-              values: { name: active_org.name },
-            })}
-            src={active_org.avatar_url}
-          />
-        </div>
+        {#snippet start()}
+          <div class="avatar">
+            <img
+              alt={$_("authSection.org.avatar", {
+                values: { name: active_org.name },
+              })}
+              src={active_org.avatar_url}
+            />
+          </div>
+        {/snippet}
         {#if width && width > remToPx(48)}<p class="orgname hide-sm">
             {active_org.name}
           </p>{/if}
-        <div class="dropdownArrow" slot="end">
-          {#if position.includes("bottom")}
-            <ChevronDown12 />
-          {:else}
-            <ChevronUp12 />
-          {/if}
-        </div>
+        {#snippet end()}
+          <div class="dropdownArrow">
+            {#if position.includes("bottom")}
+              <ChevronDown12 />
+            {:else}
+              <ChevronUp12 />
+            {/if}
+          </div>
+        {/snippet}
       </NavItem>
     {/if}
   {/snippet}
@@ -157,7 +165,9 @@
           <SidebarGroup>
             {#snippet title()}
               <NavItem>
-                <People16 slot="start" />
+                {#snippet start()}
+                  <People16 />
+                {/snippet}
                 {$_("authSection.org.userCount", {
                   values: { n: users.length },
                 })}
@@ -167,14 +177,14 @@
               {#each users as user}
                 {@const href = searchUrl(userDocs(user)).href}
                 <li>
-                  <NavItem {href} on:click={close}>
-                    <svelte:fragment slot="start">
+                  <NavItem {href} onclick={close}>
+                    {#snippet start()}
                       {#if user.avatar_url}
                         <img src={user.avatar_url} class="avatar" alt="" />
                       {:else}
                         <span class="icon"><Person16 /></span>
                       {/if}
-                    </svelte:fragment>
+                    {/snippet}
                     <span class="username">{getUserName(user)}</span>
                     {#if user.admin_organizations.includes(active_org.id)}
                       <span class="badge">
@@ -194,16 +204,20 @@
           <Dropdown>
             {#snippet anchor()}
               <NavItem>
-                <div class="avatar" slot="start">
-                  <img
-                    alt={$_("authSection.org.avatar", {
-                      values: { name: active_org.name },
-                    })}
-                    src={active_org.avatar_url}
-                  />
-                </div>
+                {#snippet start()}
+                  <div class="avatar">
+                    <img
+                      alt={$_("authSection.org.avatar", {
+                        values: { name: active_org.name },
+                      })}
+                      src={active_org.avatar_url}
+                    />
+                  </div>
+                {/snippet}
                 <p class="orgname">{active_org.name}</p>
-                <span class="arrow" slot="end"><ChevronDown12 /></span>
+                {#snippet end()}
+                  <span class="arrow"><ChevronDown12 /></span>
+                {/snippet}
               </NavItem>
             {/snippet}
             {#snippet inner()}
@@ -211,7 +225,7 @@
                 {#each otherOrgs as otherOrg}
                   <NavItem
                     hover
-                    on:click={(e) => {
+                    onclick={() => {
                       switchOrg(otherOrg);
                       close();
                     }}
diff --git a/src/lib/components/navigation/stories/Breadcrumbs.stories.svelte b/src/lib/components/navigation/stories/Breadcrumbs.stories.svelte
index 1a2480df4..ef90843a2 100644
--- a/src/lib/components/navigation/stories/Breadcrumbs.stories.svelte
+++ b/src/lib/components/navigation/stories/Breadcrumbs.stories.svelte
@@ -1,42 +1,44 @@
-<script context="module" lang="ts">
-  import { Story } from "@storybook/addon-svelte-csf";
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
   import Breadcrumbs from "../Breadcrumbs.svelte";
 
-  export const meta = {
+  const { Story } = defineMeta({
     title: "Navigation / Breadcrumbs",
     component: Breadcrumbs,
     parameters: { layout: "fullscreen" },
-  };
+  });
 </script>
 
-<Story name="Root">
-  <Breadcrumbs />
-</Story>
+<Story name="Root" />
 
-<Story name="One Crumb">
-  <Breadcrumbs trail={[{ href: "/documents", title: "Documents" }]} />
-</Story>
+<Story
+  name="One Crumb"
+  args={{ trail: [{ href: "/documents", title: "Documents" }] }}
+/>
 
-<Story name="Two Crumbs">
-  <Breadcrumbs
-    trail={[
+<Story
+  name="Two Crumbs"
+  args={{
+    trail: [
       { href: "/documents", title: "Documents" },
       { href: "/documents/[id]", title: "The Santa Anas" },
-    ]}
-  />
-</Story>
+    ],
+  }}
+/>
 
-<Story name="Three Crumbs">
-  <Breadcrumbs
-    trail={[
+<Story
+  name="Three Crumbs"
+  args={{
+    trail: [
       { title: "Documents" },
       { href: "/documents/[id]", title: "The Santa Anas" },
       { href: "/documents/[id]/organize", title: "Organize" },
-    ]}
-  />
-</Story>
+    ],
+  }}
+/>
 
-<Story name="Long Crumb">
+<Story name="Long Crumb" asChild>
   <div style="width: 100%;">
     <Breadcrumbs
       trail={[
@@ -50,7 +52,7 @@
   </div>
 </Story>
 
-<Story name="Custom Root">
+<Story name="Custom Root" asChild>
   <Breadcrumbs
     trail={[
       { href: "/documents", title: "Documents" },
@@ -58,6 +60,8 @@
       { href: "/documents/[id]/organize", title: "Organize" },
     ]}
   >
-    <p slot="root">DocumentCloud</p>
+    {#snippet root()}
+      <p>DocumentCloud</p>
+    {/snippet}
   </Breadcrumbs>
 </Story>
diff --git a/src/lib/components/notes/Note.svelte b/src/lib/components/notes/Note.svelte
index 0e002bc2c..2dc1b729f 100644
--- a/src/lib/components/notes/Note.svelte
+++ b/src/lib/components/notes/Note.svelte
@@ -78,7 +78,7 @@
   <header>
     <NoteTitle {doc} {note} {embed} />
     {#if canClose}
-      <Button minW={false} ghost on:click={closeNote}>
+      <Button minW={false} ghost onclick={closeNote}>
         <XCircle16 />
       </Button>
     {/if}
diff --git a/src/lib/components/notes/NoteActions.svelte b/src/lib/components/notes/NoteActions.svelte
index 86c8b6f78..1266076fa 100644
--- a/src/lib/components/notes/NoteActions.svelte
+++ b/src/lib/components/notes/NoteActions.svelte
@@ -52,7 +52,7 @@
     </Button>
   {/if}
   {#if canShare}
-    <Button ghost minW={false} mode="primary" size="small" on:click={onShare}>
+    <Button ghost minW={false} mode="primary" size="small" onclick={onShare}>
       <Share16 />
       {$_("dialog.share")}
     </Button>
diff --git a/src/lib/components/premium-credits/UpgradePrompt.svelte b/src/lib/components/premium-credits/UpgradePrompt.svelte
index 632a9626e..2f14b8520 100644
--- a/src/lib/components/premium-credits/UpgradePrompt.svelte
+++ b/src/lib/components/premium-credits/UpgradePrompt.svelte
@@ -19,7 +19,7 @@
   </div>
   {#if callToAction}
     <div class="action">
-      <Button premium label={callToAction} {href} on:click />
+      <Button premium label={callToAction} {href} />
     </div>
   {/if}
 </div>
diff --git a/src/lib/components/processing/AddOns.svelte b/src/lib/components/processing/AddOns.svelte
index 58fc2315f..9f0ba03b5 100644
--- a/src/lib/components/processing/AddOns.svelte
+++ b/src/lib/components/processing/AddOns.svelte
@@ -53,13 +53,15 @@ This component should update on a timer.
   <SidebarGroup name="processing.addons">
     {#snippet title()}
       <NavItem>
-        <Plug16 slot="start" />
+        {#snippet start()}
+          <Plug16 />
+        {/snippet}
         {$_("processing.addons")}
       </NavItem>
     {/snippet}
 
     {#snippet action()}
-      <Button ghost on:click={dismissAll} {disabled}>
+      <Button ghost onclick={dismissAll} {disabled}>
         {$_("dialog.dismissAll")}
       </Button>
     {/snippet}
diff --git a/src/lib/components/processing/Documents.svelte b/src/lib/components/processing/Documents.svelte
index ede143bde..6f52b7c00 100644
--- a/src/lib/components/processing/Documents.svelte
+++ b/src/lib/components/processing/Documents.svelte
@@ -73,7 +73,9 @@ Invalidation of finished documents is handled by ProcessContext.
   <SidebarGroup name="processing.documents">
     {#snippet title()}
       <NavItem>
-        <File16 slot="start" />
+        {#snippet start()}
+          <File16 />
+        {/snippet}
         {$_("processing.documents")}
       </NavItem>
     {/snippet}
@@ -112,7 +114,9 @@ Invalidation of finished documents is handled by ProcessContext.
 {#if reprocess}
   <Portal>
     <Modal on:close={() => (reprocess = null)}>
-      <h1 slot="title">{$_("dialogReprocessDialog.title")}</h1>
+      {#snippet title()}
+        <h1>{$_("dialogReprocessDialog.title")}</h1>
+      {/snippet}
       <Reprocess documents={[reprocess]} onclose={() => (reprocess = null)} />
     </Modal>
   </Portal>
diff --git a/src/lib/components/projects/Collaborators.svelte b/src/lib/components/projects/Collaborators.svelte
index 6207bb850..ba288da3f 100644
--- a/src/lib/components/projects/Collaborators.svelte
+++ b/src/lib/components/projects/Collaborators.svelte
@@ -94,7 +94,9 @@
   <SidebarGroup name="collaborators">
     {#snippet title()}
       <NavItem>
-        <People16 slot="start" />
+        {#snippet start()}
+          <People16 />
+        {/snippet}
         {$_("projects.collaborators.title")}
       </NavItem>
     {/snippet}
@@ -107,7 +109,7 @@
             mode="primary"
             size="small"
             minW={false}
-            on:click={() => (show = "invite")}
+            onclick={() => (show = "invite")}
           >
             <PlusCircle16 height={14} width={14} />
             {$_("projects.collaborators.add")}
@@ -125,46 +127,52 @@
       {#each members as user}
         {#if isProjectUser || project.edit_access}
           <NavItem small>
-            <Avatar user={user.user} slot="start" />
+            {#snippet start()}
+              <Avatar user={user.user} />
+            {/snippet}
             {getUserName(user.user)}
-            <Flex gap={0} slot="end">
-              {#if project.add_remove_access && !isMe(user, $me)}
-                <Tooltip caption={actions.update}>
-                  <Button
-                    ghost
-                    mode="primary"
-                    minW={false}
-                    size="small"
-                    title={actions.update}
-                    on:click={() => {
-                      user_to_update = user;
-                      show = "update";
-                    }}
-                  >
-                    <Pencil16 height={14} width={14} />
-                  </Button>
-                </Tooltip>
-                <Tooltip caption={actions.remove}>
-                  <Button
-                    ghost
-                    mode="danger"
-                    minW={false}
-                    size="small"
-                    title={actions.remove}
-                    on:click={() => {
-                      user_to_update = user;
-                      show = "remove";
-                    }}
-                  >
-                    <XCircle16 height={14} width={14} />
-                  </Button>
-                </Tooltip>
-              {/if}
-            </Flex>
+            {#snippet end()}
+              <Flex gap={0}>
+                {#if project.add_remove_access && !isMe(user, $me)}
+                  <Tooltip caption={actions.update}>
+                    <Button
+                      ghost
+                      mode="primary"
+                      minW={false}
+                      size="small"
+                      title={actions.update}
+                      onclick={() => {
+                        user_to_update = user;
+                        show = "update";
+                      }}
+                    >
+                      <Pencil16 height={14} width={14} />
+                    </Button>
+                  </Tooltip>
+                  <Tooltip caption={actions.remove}>
+                    <Button
+                      ghost
+                      mode="danger"
+                      minW={false}
+                      size="small"
+                      title={actions.remove}
+                      onclick={() => {
+                        user_to_update = user;
+                        show = "remove";
+                      }}
+                    >
+                      <XCircle16 height={14} width={14} />
+                    </Button>
+                  </Tooltip>
+                {/if}
+              </Flex>
+            {/snippet}
           </NavItem>
         {:else}
           <NavItem small>
-            <Avatar user={user.user} slot="start" />
+            {#snippet start()}
+              <Avatar user={user.user} />
+            {/snippet}
             {getUserName(user.user)}
           </NavItem>
         {/if}
diff --git a/src/lib/components/projects/ProjectPin.svelte b/src/lib/components/projects/ProjectPin.svelte
index 38a90e5b7..f68cb4a8d 100644
--- a/src/lib/components/projects/ProjectPin.svelte
+++ b/src/lib/components/projects/ProjectPin.svelte
@@ -17,11 +17,11 @@
 <script lang="ts">
   import { invalidate } from "$app/navigation";
 
+  import Pin from "$lib/components/common/Pin.svelte";
+
   import { canonicalUrl } from "$lib/api/projects";
   import { getCsrfToken } from "$lib/utils/api";
   import { getCurrentUser } from "$lib/utils/permissions";
-
-  import Pin from "$lib/components/common/Pin.svelte";
   import { pinProject } from "$lib/api/projects";
 
   interface Props {
@@ -33,7 +33,7 @@
 
   const me = getCurrentUser();
 
-  async function toggle(e) {
+  async function toggle(e: MouseEvent) {
     e.preventDefault();
     const csrf_token = getCsrfToken();
     if (!csrf_token) {
@@ -63,4 +63,4 @@
   }
 </script>
 
-<Pin active={project.pinned} {size} disabled={!$me} on:click={toggle} />
+<Pin active={project.pinned} {size} disabled={!$me} onclick={toggle} />
diff --git a/src/lib/components/projects/ProjectShare.svelte b/src/lib/components/projects/ProjectShare.svelte
index 08c4f47d2..b7072bdbf 100644
--- a/src/lib/components/projects/ProjectShare.svelte
+++ b/src/lib/components/projects/ProjectShare.svelte
@@ -46,13 +46,13 @@
     {#if isPrivate}
       <div class="banner">
         <Tip mode="danger">
-          <ShieldLock24 slot="icon" />
+          {#snippet icon()}<ShieldLock24 />{/snippet}
           <div class="privateWarning">
             <div style:flex="1 1 auto">
               {$_("share.privateWarning", { values: { type: "project" } })}
             </div>
             {#if project.edit_access}
-              <Button mode="danger" size="small" on:click={openEditing}>
+              <Button mode="danger" size="small" onclick={openEditing}>
                 {$_("share.privateFix")}
               </Button>
             {/if}
@@ -102,7 +102,9 @@
 {#if editing}
   <Portal>
     <Modal on:close={closeEditing}>
-      <h1 slot="title">{$_("projects.edit")}</h1>
+      {#snippet title()}
+        <h1>{$_("projects.edit")}</h1>
+      {/snippet}
       <EditProject {project} on:close={closeEditing} />
     </Modal>
   </Portal>
diff --git a/src/lib/components/sidebar/AddOns.svelte b/src/lib/components/sidebar/AddOns.svelte
index 5dc7eefa4..8f6144204 100644
--- a/src/lib/components/sidebar/AddOns.svelte
+++ b/src/lib/components/sidebar/AddOns.svelte
@@ -50,7 +50,9 @@
 <SidebarGroup name="addons">
   {#snippet title()}
     <NavItem>
-      <Plug16 slot="start" />
+      {#snippet start()}
+        <Plug16 />
+      {/snippet}
       {$_("sidebar.addons.title")}
     </NavItem>
   {/snippet}
@@ -68,11 +70,15 @@
   {/snippet}
 
   <NavItem small href="/add-ons/?featured=true">
-    <Star16 width={14} height={14} slot="start" />
+    {#snippet start()}
+      <Star16 width={14} height={14} />
+    {/snippet}
     Featured
   </NavItem>
   <NavItem small href="/add-ons/?premium=true">
-    <Zap16 width={14} height={14} slot="start" />
+    {#snippet start()}
+      <Zap16 width={14} height={14} />
+    {/snippet}
     Premium
   </NavItem>
   <SignedIn>
@@ -84,12 +90,16 @@
       {:else}
         {#each data?.results ?? [] as addon}
           <NavItem small href={getHref(query, addon)}>
-            <Pin size={0.875} active={addon.active} slot="start" />
+            {#snippet start()}
+              <Pin size={0.875} active={addon.active} />
+            {/snippet}
             {addon.name}
           </NavItem>
         {:else}
           <NavItem small disabled>
-            <Pin16 slot="start" />
+            {#snippet start()}
+              <Pin16 />
+            {/snippet}
             {$_("sidebar.addons.pinned")}
           </NavItem>
         {/each}
diff --git a/src/lib/components/sidebar/DocumentActions.svelte b/src/lib/components/sidebar/DocumentActions.svelte
index 8ba2d6cc5..02951f868 100644
--- a/src/lib/components/sidebar/DocumentActions.svelte
+++ b/src/lib/components/sidebar/DocumentActions.svelte
@@ -97,7 +97,7 @@ Most actual actions are deferred to their own forms, so this is more of a switch
 <Flex direction="column" align="start">
   <Button
     ghost
-    on:click={() => show("share")}
+    onclick={() => show("share")}
     disabled={search.selected?.length !== 1}
   >
     <Share16 />
@@ -107,7 +107,7 @@ Most actual actions are deferred to their own forms, so this is more of a switch
   <Button
     ghost
     mode="primary"
-    on:click={() => show("edit")}
+    onclick={() => show("edit")}
     disabled={!search.editable}
   >
     <Pencil16 />
@@ -117,7 +117,7 @@ Most actual actions are deferred to their own forms, so this is more of a switch
   <Button
     ghost
     mode="primary"
-    on:click={() => show("data")}
+    onclick={() => show("data")}
     disabled={!search.editable}
   >
     <Tag16 />
@@ -127,7 +127,7 @@ Most actual actions are deferred to their own forms, so this is more of a switch
   <Button
     ghost
     mode="primary"
-    on:click={() => show("project")}
+    onclick={() => show("project")}
     disabled={!search.selected || search.selected?.length < 1}
   >
     <FileDirectory16 />
@@ -137,7 +137,7 @@ Most actual actions are deferred to their own forms, so this is more of a switch
   <Button
     ghost
     mode="danger"
-    on:click={() => show("reprocess")}
+    onclick={() => show("reprocess")}
     disabled={!search.editable}
   >
     <IssueReopened16 />
@@ -149,7 +149,7 @@ Most actual actions are deferred to their own forms, so this is more of a switch
   <Button
     ghost
     mode="danger"
-    on:click={() => show("delete")}
+    onclick={() => show("delete")}
     disabled={!search.editable}
   >
     <Alert16 />
@@ -159,7 +159,7 @@ Most actual actions are deferred to their own forms, so this is more of a switch
   <Button
     ghost
     mode="danger"
-    on:click={() => show("change_owner")}
+    onclick={() => show("change_owner")}
     disabled={!canChangeOwner($me, search.selected)}
   >
     <Person16 />
diff --git a/src/lib/components/sidebar/Documents.svelte b/src/lib/components/sidebar/Documents.svelte
index 1051589c4..33c1b8b88 100644
--- a/src/lib/components/sidebar/Documents.svelte
+++ b/src/lib/components/sidebar/Documents.svelte
@@ -95,7 +95,9 @@
   <SidebarGroup name="documents">
     {#snippet title()}
       <NavItem>
-        <File16 slot="start" />
+        {#snippet start()}
+          <File16 />
+        {/snippet}
         {$_("documents.documents")}
       </NavItem>
     {/snippet}
@@ -108,7 +110,9 @@
     {/snippet}
 
     <NavItem small hover href={searchUrl(mine).href} active={query === mine}>
-      <Person16 height={14} width={14} slot="start" />
+      {#snippet start()}
+        <Person16 height={14} width={14} />
+      {/snippet}
       {$_("documents.yourDocuments")}
     </NavItem>
     <NavItem
@@ -117,7 +121,9 @@
       href={searchUrl(minePrivate).href}
       active={query === minePrivate}
     >
-      <Lock16 height={14} width={14} slot="start" />
+      {#snippet start()}
+        <Lock16 height={14} width={14} />
+      {/snippet}
       {$_("documents.accessDocuments", {
         values: { access: "Private " },
       })}
@@ -128,7 +134,9 @@
       href={searchUrl(minePublic).href}
       active={query === minePublic}
     >
-      <Globe16 height={14} width={14} slot="start" />
+      {#snippet start()}
+        <Globe16 height={14} width={14} />
+      {/snippet}
       {$_("documents.accessDocuments", {
         values: { access: "Public " },
       })}
@@ -140,7 +148,9 @@
         href={searchUrl(orgDocs).href}
         active={query === orgDocs}
       >
-        <Organization16 height={14} width={14} slot="start" />
+        {#snippet start()}
+          <Organization16 height={14} width={14} />
+        {/snippet}
         {$_("documents.nameDocuments", {
           values: { name: $org.name, access: "" },
         })}
@@ -160,23 +170,27 @@
             href={searchUrl(savedSearch.query).href}
             active={query === savedSearch.query}
           >
-            <Bookmark16 height={14} width={14} slot="start" />
+            {#snippet start()}
+              <Bookmark16 height={14} width={14} />
+            {/snippet}
             {savedSearch.name}
-            <span slot="end">
-              <Button
-                ghost
-                minW={false}
-                size="small"
-                title={$_("documents.savedSearches.edit")}
-                on:click={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  editing = savedSearch;
-                }}
-              >
-                <Pencil16 height={12} width={12} />
-              </Button>
-            </span>
+            {#snippet end()}
+              <span>
+                <Button
+                  ghost
+                  minW={false}
+                  size="small"
+                  title={$_("documents.savedSearches.edit")}
+                  onclick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    editing = savedSearch;
+                  }}
+                >
+                  <Pencil16 height={12} width={12} />
+                </Button>
+              </span>
+            {/snippet}
           </NavItem>
         {:else}
           <p class="help">
@@ -193,7 +207,7 @@
           size="small"
           disabled={isCurrentSearchSaved}
           title={$_("documents.savedSearches.saveTitle")}
-          on:click={() => (editing = "create")}
+          onclick={() => (editing = "create")}
         >
           <Plus16 height={14} width={14} />
           {$_("documents.savedSearches.save")}
@@ -203,7 +217,9 @@
   </SidebarGroup>
   {#snippet signedOut()}
     <NavItem href={searchUrl("").href}>
-      <File16 slot="start" />
+      {#snippet start()}
+        <File16 />
+      {/snippet}
       {$_("documents.publicDocuments")}
     </NavItem>
   {/snippet}
diff --git a/src/lib/components/sidebar/ProjectActions.svelte b/src/lib/components/sidebar/ProjectActions.svelte
index a1b6491a9..4fabf4565 100644
--- a/src/lib/components/sidebar/ProjectActions.svelte
+++ b/src/lib/components/sidebar/ProjectActions.svelte
@@ -39,20 +39,20 @@
 
 <Flex direction="column" align="start">
   <!-- Viewer Actions -->
-  <Button ghost on:click={() => (show = "share")}>
+  <Button ghost onclick={() => (show = "share")}>
     <Share16 />{$_("sidebar.shareEmbedProject")}
   </Button>
   {#if project.edit_access || project.add_remove_access}
     <!-- Admin & Editor Actions -->
     {#if project.edit_access}
-      <Button ghost mode="primary" on:click={() => (show = "edit")}>
+      <Button ghost mode="primary" onclick={() => (show = "edit")}>
         <Pencil16 />
         {$_("sidebar.editProject")}
       </Button>
     {/if}
 
     {#if project.edit_access}
-      <Button ghost mode="danger" on:click={() => (show = "delete")}>
+      <Button ghost mode="danger" onclick={() => (show = "delete")}>
         <Trash16 />
         {$_("sidebar.deleteProject")}
       </Button>
diff --git a/src/lib/components/sidebar/Projects.svelte b/src/lib/components/sidebar/Projects.svelte
index 2147963e0..e556ae4f9 100644
--- a/src/lib/components/sidebar/Projects.svelte
+++ b/src/lib/components/sidebar/Projects.svelte
@@ -36,7 +36,9 @@
   <SidebarGroup name="projects">
     {#snippet title()}
       <NavItem>
-        <FileDirectory16 slot="start" />
+        {#snippet start()}
+          <FileDirectory16 />
+        {/snippet}
         {$_("sidebar.projects.title")}
       </NavItem>
     {/snippet}
@@ -57,7 +59,9 @@
       active={$page.url.searchParams?.get("list") === "owned"}
       href="/projects?list=owned"
     >
-      <Person16 height={14} width={14} slot="start" />
+      {#snippet start()}
+        <Person16 height={14} width={14} />
+      {/snippet}
       {$_("projects.yours")}
     </NavItem>
     <NavItem
@@ -65,7 +69,9 @@
       active={$page.url.searchParams?.get("list") === "shared"}
       href="/projects?list=shared"
     >
-      <People16 height={14} width={14} slot="start" />
+      {#snippet start()}
+        <People16 height={14} width={14} />
+      {/snippet}
       {$_("projects.shared")}
     </NavItem>
     {#await pinned}
@@ -73,12 +79,16 @@
     {:then projects}
       {#each sort(projects) as project}
         <NavItem small href={canonicalUrl(project).href}>
-          <Pin size={0.875} active={project.pinned} slot="start" />
+          {#snippet start()}
+            <Pin size={0.875} active={project.pinned} />
+          {/snippet}
           {project.title}
         </NavItem>
       {:else}
         <NavItem small disabled>
-          <Pin16 slot="start" />
+          {#snippet start()}
+            <Pin16 />
+          {/snippet}
           {$_("sidebar.projects.pinned")}
         </NavItem>
       {/each}
diff --git a/src/lib/components/sidebar/SavedSearchForm.svelte b/src/lib/components/sidebar/SavedSearchForm.svelte
index b6873354f..8546b0543 100644
--- a/src/lib/components/sidebar/SavedSearchForm.svelte
+++ b/src/lib/components/sidebar/SavedSearchForm.svelte
@@ -103,7 +103,7 @@ Renders inside a modal.
 
     {#if error}
       <Tip mode="error">
-        <Alert24 slot="icon" />
+        {#snippet icon()}<Alert24 />{/snippet}
         {error}
       </Tip>
     {/if}
@@ -112,7 +112,7 @@ Renders inside a modal.
       <Button type="submit" mode="primary" full disabled={loading}>
         {$_("edit.save")}
       </Button>
-      <Button full on:click={onclose} disabled={loading}>
+      <Button full onclick={onclose} disabled={loading}>
         {$_("edit.cancel")}
       </Button>
     </Flex>
@@ -120,12 +120,12 @@ Renders inside a modal.
     {#if savedSearch}
       {#if confirmDelete}
         <Flex>
-          <Button mode="danger" full on:click={handleDelete} disabled={loading}>
+          <Button mode="danger" full onclick={handleDelete} disabled={loading}>
             {$_("documents.savedSearches.confirmDelete")}
           </Button>
           <Button
             full
-            on:click={() => (confirmDelete = false)}
+            onclick={() => (confirmDelete = false)}
             disabled={loading}
           >
             {$_("edit.cancel")}
@@ -135,7 +135,7 @@ Renders inside a modal.
         <Button
           ghost
           mode="danger"
-          on:click={() => (confirmDelete = true)}
+          onclick={() => (confirmDelete = true)}
           disabled={loading}
         >
           {$_("documents.savedSearches.delete")}
diff --git a/src/lib/components/sidebar/UploadButton.svelte b/src/lib/components/sidebar/UploadButton.svelte
index 548dd95a6..23a5291a8 100644
--- a/src/lib/components/sidebar/UploadButton.svelte
+++ b/src/lib/components/sidebar/UploadButton.svelte
@@ -35,7 +35,7 @@
     <Button
       full
       mode="primary"
-      on:click={onUploadClick}
+      onclick={onUploadClick}
       disabled={!project.edit_access}
     >
       <PlusCircle16 />
diff --git a/src/lib/components/sidebar/ViewerActions.svelte b/src/lib/components/sidebar/ViewerActions.svelte
index 6a93da569..4220bf140 100644
--- a/src/lib/components/sidebar/ViewerActions.svelte
+++ b/src/lib/components/sidebar/ViewerActions.svelte
@@ -90,14 +90,14 @@
       <Download16 />
       {$_("sidebar.download")}
     </Button>
-    <Button ghost on:click={() => show("share")}>
+    <Button ghost onclick={() => show("share")}>
       <Share16 />
       {$_("sidebar.shareEmbed")}
     </Button>
   </div>
   {#if document.edit_access}
     <div class="actions">
-      <Button ghost mode="primary" minW={false} on:click={() => show("edit")}>
+      <Button ghost mode="primary" minW={false} onclick={() => show("edit")}>
         <Pencil16 />
         {$_("sidebar.edit")}
       </Button>
@@ -105,7 +105,7 @@
         ghost
         mode="premium"
         minW={false}
-        on:click={() => show("revisions")}
+        onclick={() => show("revisions")}
       >
         <History16 />
         {$_("sidebar.revisions")}
@@ -117,7 +117,7 @@
         ghost
         mode="danger"
         disabled={document.status === "nofile"}
-        on:click={() => show("reprocess")}
+        onclick={() => show("reprocess")}
       >
         {#if processing}
           <IssueReopened16 class="spin" />
@@ -127,7 +127,7 @@
           {$_("sidebar.reprocess")}
         {/if}
       </Button>
-      <Button ghost mode="danger" on:click={() => show("delete")}>
+      <Button ghost mode="danger" onclick={() => show("delete")}>
         <Trash16 />
         {$_("sidebar.delete")}
       </Button>
@@ -136,7 +136,7 @@
         <Button
           ghost
           mode="danger"
-          on:click={() => show("change_owner")}
+          onclick={() => show("change_owner")}
           disabled={!canChangeOwner(user, [document])}
         >
           <Person16 />
@@ -146,7 +146,9 @@
 
       {#if processing}
         <Tip>
-          <span slot="icon"></span>
+          {#snippet icon()}
+            <span></span>
+          {/snippet}
           {$_("processing.document")}
         </Tip>
       {/if}
diff --git a/src/lib/components/sidebar/stories/SidebarGroup.stories.svelte b/src/lib/components/sidebar/stories/SidebarGroup.stories.svelte
index 26a50f839..3e0fa0c8c 100644
--- a/src/lib/components/sidebar/stories/SidebarGroup.stories.svelte
+++ b/src/lib/components/sidebar/stories/SidebarGroup.stories.svelte
@@ -26,7 +26,9 @@
   <SidebarGroup>
     {#snippet title()}
       <NavItem>
-        <FileDirectory16 slot="start" />
+        {#snippet start()}
+          <FileDirectory16 />
+        {/snippet}
         Project
       </NavItem>
     {/snippet}
@@ -35,15 +37,21 @@
     {/snippet}
     <Flex direction="column" gap={0}>
       <NavItem small href="/project/1">
-        <Pin active slot="start" />
+        {#snippet start()}
+          <Pin active />
+        {/snippet}
         Oldest Computer
       </NavItem>
       <NavItem small href="/project/2">
-        <Pin active slot="start" />
+        {#snippet start()}
+          <Pin active />
+        {/snippet}
         FBI Files
       </NavItem>
       <NavItem small href="/project/3">
-        <Pin active slot="start" />
+        {#snippet start()}
+          <Pin active />
+        {/snippet}
         1033 Project
       </NavItem>
     </Flex>
@@ -55,7 +63,9 @@
     <SidebarGroup>
       {#snippet title()}
         <NavItem>
-          <ListOrdered16 slot="start" />
+          {#snippet start()}
+            <ListOrdered16 />
+          {/snippet}
           Sections
         </NavItem>
       {/snippet}
@@ -74,7 +84,9 @@
   <SidebarGroup name="storybook-files">
     {#snippet title()}
       <NavItem>
-        <FileDirectory16 slot="start" />
+        {#snippet start()}
+          <FileDirectory16 />
+        {/snippet}
         Project
       </NavItem>
     {/snippet}
@@ -83,15 +95,21 @@
     {/snippet}
     <Flex direction="column" gap={0}>
       <NavItem small href="/project/1">
-        <Pin active slot="start" />
+        {#snippet start()}
+          <Pin active />
+        {/snippet}
         Oldest Computer
       </NavItem>
       <NavItem small href="/project/2">
-        <Pin active slot="start" />
+        {#snippet start()}
+          <Pin active />
+        {/snippet}
         FBI Files
       </NavItem>
       <NavItem small href="/project/3">
-        <Pin active slot="start" />
+        {#snippet start()}
+          <Pin active />
+        {/snippet}
         1033 Project
       </NavItem>
     </Flex>
diff --git a/src/lib/components/toolbars/DocumentListToolbar.svelte b/src/lib/components/toolbars/DocumentListToolbar.svelte
index 33ecff122..a7b4bf2e8 100644
--- a/src/lib/components/toolbars/DocumentListToolbar.svelte
+++ b/src/lib/components/toolbars/DocumentListToolbar.svelte
@@ -56,9 +56,13 @@
         <Dropdown>
           {#snippet anchor()}
             <NavItem>
-              <Eye16 slot="start" />
+              {#snippet start()}
+                <Eye16 />
+              {/snippet}
               {$_("documentBrowser.fieldsAnchor")}
-              <ChevronDown12 slot="end" />
+              {#snippet end()}
+                <ChevronDown12 />
+              {/snippet}
             </NavItem>
           {/snippet}
           {#snippet inner()}
diff --git a/src/lib/components/toolbars/PaginationToolbar.svelte b/src/lib/components/toolbars/PaginationToolbar.svelte
index aba60c527..27c9da10a 100644
--- a/src/lib/components/toolbars/PaginationToolbar.svelte
+++ b/src/lib/components/toolbars/PaginationToolbar.svelte
@@ -81,9 +81,13 @@
         {#snippet anchor()}
           <div class="toolbarItem">
             <NavItem>
-              <ListOrdered16 slot="start" />
+              {#snippet start()}
+                <ListOrdered16 />
+              {/snippet}
               Sections
-              <ChevronUp12 slot="end" />
+              {#snippet end()}
+                <ChevronUp12 />
+              {/snippet}
             </NavItem>
           </div>
         {/snippet}
@@ -108,7 +112,7 @@
                 <Button
                   ghost
                   mode="primary"
-                  on:click={() => (sectionsOpen = true)}
+                  onclick={() => (sectionsOpen = true)}
                 >
                   {$_("sidebar.toc.cta")}
                 </Button>
@@ -116,7 +120,7 @@
                 <Button
                   ghost
                   mode="primary"
-                  on:click={() => (sectionsOpen = true)}
+                  onclick={() => (sectionsOpen = true)}
                 >
                   {$_("sections.edit")}
                 </Button>
@@ -132,9 +136,9 @@
     <div class="paginator">
       <Paginator
         goToNav
-        on:goTo={(e) => gotoPage(e.detail)}
-        on:next={next}
-        on:previous={previous}
+        ongoto={(n) => gotoPage(n)}
+        onnext={next}
+        onprevious={previous}
         bind:page={$currentPage}
         {totalPages}
         has_next={$currentPage < totalPages}
diff --git a/src/lib/components/toolbars/ReadingToolbar.svelte b/src/lib/components/toolbars/ReadingToolbar.svelte
index 847ba955e..3a6d00cd6 100644
--- a/src/lib/components/toolbars/ReadingToolbar.svelte
+++ b/src/lib/components/toolbars/ReadingToolbar.svelte
@@ -112,12 +112,16 @@ Assumes it's a child of a ViewerContext
       <Dropdown position="bottom-start">
         {#snippet anchor()}
           <NavItem>
-            {@const CurrentModeIcon = icons[$mode]}
-            {#if CurrentModeIcon}
-              <CurrentModeIcon slot="start" />
-            {/if}
+            {#snippet start()}
+              {@const CurrentModeIcon = icons[$mode]}
+              {#if CurrentModeIcon}
+                <CurrentModeIcon />
+              {/if}
+            {/snippet}
             {current}
-            <ChevronDown12 slot="end" />
+            {#snippet end()}
+              <ChevronDown12 />
+            {/snippet}
           </NavItem>
         {/snippet}
         {#snippet inner({ close })}
diff --git a/src/lib/components/toolbars/RedactionToolbar.svelte b/src/lib/components/toolbars/RedactionToolbar.svelte
index 28d51a094..d483dd5fb 100644
--- a/src/lib/components/toolbars/RedactionToolbar.svelte
+++ b/src/lib/components/toolbars/RedactionToolbar.svelte
@@ -67,7 +67,7 @@ Assumes it's a child of a ViewerContext
       mode="danger"
       title={$_("redact.cancel")}
       minW={false}
-      on:click={onCancel}
+      onclick={onCancel}
     >
       <X16 />
       {#if BREAKPOINTS.SHOW_LABELS}
@@ -80,7 +80,7 @@ Assumes it's a child of a ViewerContext
       disabled={!hasRedactions}
       title={$_("redact.undo")}
       minW={false}
-      on:click={(e) => undo()}
+      onclick={(e) => undo()}
     >
       <Undo16 />
       {#if BREAKPOINTS.SHOW_LABELS}
@@ -92,7 +92,7 @@ Assumes it's a child of a ViewerContext
       mode="primary"
       title={$_("redact.confirm")}
       minW={!BREAKPOINTS.X_SMALL}
-      on:click={() => (confirmOpen = true)}
+      onclick={() => (confirmOpen = true)}
     >
       <Check16 />
       {#if BREAKPOINTS.SHOW_LABELS}
diff --git a/src/lib/components/viewer/Viewer.svelte b/src/lib/components/viewer/Viewer.svelte
index 7c9d7cc00..f0691d428 100644
--- a/src/lib/components/viewer/Viewer.svelte
+++ b/src/lib/components/viewer/Viewer.svelte
@@ -61,7 +61,7 @@ Assumes it's a child of a ViewerContext
             <Button
               ghost
               minW={false}
-              on:click={() => ($sidebars["navigation"] = true)}
+              onclick={() => ($sidebars["navigation"] = true)}
             >
               <span class="flipV">
                 <SidebarExpand16 />
@@ -83,7 +83,7 @@ Assumes it's a child of a ViewerContext
             <Button
               ghost
               minW={false}
-              on:click={() => ($sidebars["action"] = true)}
+              onclick={() => ($sidebars["action"] = true)}
             >
               <SidebarExpand16 />
             </Button>
diff --git a/src/lib/components/viewer/sidebar/Notes.svelte b/src/lib/components/viewer/sidebar/Notes.svelte
index 3efd2174d..d39545528 100644
--- a/src/lib/components/viewer/sidebar/Notes.svelte
+++ b/src/lib/components/viewer/sidebar/Notes.svelte
@@ -12,16 +12,24 @@
   import { canonicalUrl, pageUrl } from "$lib/api/documents";
   import { noteUrl, isPageLevel } from "$lib/api/notes";
 
-  export let document: Document;
+  interface Props {
+    document: Document;
+  }
+
+  let { document }: Props = $props();
 
-  $: notes = document.notes ?? [];
-  $: annotate = new URL("?mode=annotating", canonicalUrl(document)).href;
+  let notes = $derived(document.notes ?? []);
+  let annotate = $derived(
+    new URL("?mode=annotating", canonicalUrl(document)).href,
+  );
 </script>
 
 <SidebarGroup name="notes">
   {#snippet title()}
     <NavItem>
-      <Note16 slot="start" />
+      {#snippet start()}
+        <Note16 />
+      {/snippet}
       {$_("sidebar.toc.notes")}
     </NavItem>
   {/snippet}
@@ -34,10 +42,12 @@
       <li>
         <NavItem {href} small>
           <span class="note_title">{note.title}</span>
-          <span class="page_number" slot="start">
-            {$_("sidebar.toc.pageAbbrev")}
-            {note.page_number + 1}
-          </span>
+          {#snippet start()}
+            <span class="page_number">
+              {$_("sidebar.toc.pageAbbrev")}
+              {note.page_number + 1}
+            </span>
+          {/snippet}
         </NavItem>
       </li>
     {:else}
diff --git a/src/routes/(app)/projects/+page.svelte b/src/routes/(app)/projects/+page.svelte
index 1e3a4a288..cc717d3ad 100644
--- a/src/routes/(app)/projects/+page.svelte
+++ b/src/routes/(app)/projects/+page.svelte
@@ -67,7 +67,7 @@
             <Button
               ghost
               minW={false}
-              on:click={() => ($sidebars["navigation"] = true)}
+              onclick={() => ($sidebars["navigation"] = true)}
             >
               <span class="flipV">
                 <SidebarExpand16 />
@@ -89,7 +89,7 @@
             <Button
               ghost
               minW={false}
-              on:click={() => ($sidebars["action"] = true)}
+              onclick={() => ($sidebars["action"] = true)}
             >
               <SidebarExpand16 />
             </Button>
@@ -110,8 +110,8 @@
           <Paginator
             has_next={Boolean(next)}
             has_previous={Boolean(previous)}
-            on:next={() => paginate(next)}
-            on:previous={() => paginate(previous)}
+            onnext={() => paginate(next)}
+            onprevious={() => paginate(previous)}
           />
         {/snippet}
       </PageToolbar>
@@ -120,7 +120,7 @@
 
   <svelte:fragment slot="action">
     {#if $me}
-      <Button mode="primary" on:click={() => (create = true)}>
+      <Button mode="primary" onclick={() => (create = true)}>
         {$_("projects.create")}
       </Button>
     {/if}