From 050f17ac64a12cc961161bea773454a6e128ffc3 Mon Sep 17 00:00:00 2001
From: Peter-Paul van Gemerden <mail@ppvg.nl>
Date: Sun, 20 Oct 2024 21:22:42 +0200
Subject: [PATCH] chore(docs): update svelte to v5

---
 docs/package.json                             |   8 +-
 docs/src/lib/BreadcrumbNav.svelte             |   6 +-
 docs/src/lib/Code.svelte                      |  18 +-
 docs/src/lib/DefaultFooter.svelte             |   2 +-
 docs/src/lib/DefaultHeader.svelte             |   7 +-
 docs/src/lib/NavLink.svelte                   |  17 +-
 docs/src/lib/SideMenu.svelte                  |  12 +-
 docs/src/lib/SiteNav.svelte                   |   4 +-
 docs/src/lib/SiteNavLinks.svelte              |   7 +-
 .../lib/{breadcrumbs.js => breadcrumbs.ts}    |  40 +--
 docs/src/lib/{manon.js => manon.ts}           |   0
 docs/src/redirects.js                         |   4 +-
 docs/src/routes/(docs)/+layout.svelte         |   6 +-
 docs/src/routes/(docs)/+page.svelte           |   4 +-
 .../src/routes/(docs)/components/+page.svelte |   4 +-
 .../components/accordion-test/+page.svelte    |   4 +-
 .../(docs)/components/accordion/+page.svelte  |   4 +-
 .../components/application-base/+page.svelte  |   4 +-
 .../article-content-wrapper-test/+page.svelte |   4 +-
 .../article-content-wrapper/+page.svelte      |   4 +-
 .../components/article-test/+page.svelte      |   4 +-
 .../(docs)/components/article/+page.svelte    |   4 +-
 .../components/body-text-set/+page.svelte     |   4 +-
 .../components/branding-colors/+page.svelte   |   4 +-
 .../breadcrumb-bar-example/+page.svelte       |   4 +-
 .../components/breadcrumb-bar/+page.svelte    |   4 +-
 .../components/button-base/+page.svelte       |   4 +-
 .../button-call-to-action-test/+page.svelte   |   4 +-
 .../button-call-to-action/+page.svelte        |   4 +-
 .../button-container-test/+page.svelte        |   4 +-
 .../components/button-container/+page.svelte  |   4 +-
 .../button-destructive-test/+page.svelte      |   4 +-
 .../button-destructive/+page.svelte           |   4 +-
 .../components/button-dropdown/+page.svelte   |   6 +-
 .../components/button-ghost-test/+page.svelte |   4 +-
 .../components/button-ghost/+page.svelte      |   4 +-
 .../components/button-icon-only/+page.svelte  |   4 +-
 .../components/button-icon/+page.svelte       |   4 +-
 .../components/button-test/+page.svelte       |   4 +-
 .../components/button-to-top/+page.svelte     |   4 +-
 .../(docs)/components/button/+page.svelte     |   4 +-
 .../(docs)/components/card/+page.svelte       |   4 +-
 .../components/checkbox-test/+page.svelte     |   4 +-
 .../(docs)/components/checkbox/+page.svelte   |   4 +-
 .../components/collapsible-menu/+page.svelte  |   4 +-
 .../components/collapsible/+page.svelte       |   6 +-
 .../de-emphasized-test/+page.svelte           |   4 +-
 .../components/de-emphasized/+page.svelte     |   4 +-
 .../components/description-list/+page.svelte  |   4 +-
 .../div-content-wrapper-test/+page.svelte     |   4 +-
 .../div-content-wrapper/+page.svelte          |   4 +-
 .../(docs)/components/div-test/+page.svelte   |   4 +-
 .../routes/(docs)/components/div/+page.svelte |   4 +-
 .../components/emphasized-test/+page.svelte   |   4 +-
 .../(docs)/components/emphasized/+page.svelte |   4 +-
 .../fieldset-checkbox-test/+page.svelte       |   4 +-
 .../components/fieldset-checkbox/+page.svelte |   4 +-
 .../components/fieldset-radio/+page.svelte    |   4 +-
 .../components/filter-test/+page.svelte       |   4 +-
 .../(docs)/components/filter/+page.svelte     |   4 +-
 .../(docs)/components/finn-large/+page.svelte |   4 +-
 .../components/finn-medium/+page.svelte       |   4 +-
 .../(docs)/components/finn-small/+page.svelte |   4 +-
 .../components/focus-only-test/+page.svelte   |   4 +-
 .../(docs)/components/focus-only/+page.svelte |   4 +-
 .../(docs)/components/font/+page.svelte       |   4 +-
 .../footer-two-thirds-one-third/+page.svelte  |   4 +-
 .../(docs)/components/footer/+page.svelte     |   4 +-
 .../form-accent-color-test/+page.svelte       |   4 +-
 .../components/form-accent-color/+page.svelte |   4 +-
 .../components/form-base-test/+page.svelte    |   4 +-
 .../(docs)/components/form-base/+page.svelte  |   4 +-
 .../components/form-columns-test/+page.svelte |   4 +-
 .../components/form-columns/+page.svelte      |   4 +-
 .../form-combined-fields-test/+page.svelte    |   4 +-
 .../form-combined-fields/+page.svelte         |   4 +-
 .../form-fieldset-invisible/+page.svelte      |   4 +-
 .../components/form-fieldset/+page.svelte     |   4 +-
 .../components/form-help-test/+page.svelte    |   4 +-
 .../(docs)/components/form-help/+page.svelte  |   4 +-
 .../form-horizontal-view-test/+page.svelte    |   4 +-
 .../form-horizontal-view/+page.svelte         |   4 +-
 .../components/form-inline-test/+page.svelte  |   4 +-
 .../components/form-inline/+page.svelte       |   4 +-
 .../form-input-color-filled-test/+page.svelte |   4 +-
 .../form-input-color-filled/+page.svelte      |   4 +-
 .../form-input-color-test/+page.svelte        |   4 +-
 .../components/form-input-color/+page.svelte  |   4 +-
 .../form-input-date-test/+page.svelte         |   4 +-
 .../components/form-input-date/+page.svelte   |   4 +-
 .../form-input-email-test/+page.svelte        |   4 +-
 .../components/form-input-email/+page.svelte  |   4 +-
 .../form-input-file-test/+page.svelte         |   4 +-
 .../components/form-input-file/+page.svelte   |   4 +-
 .../form-input-password-test/+page.svelte     |   4 +-
 .../form-input-password/+page.svelte          |   4 +-
 .../form-input-radio-test/+page.svelte        |   4 +-
 .../components/form-input-radio/+page.svelte  |   4 +-
 .../form-input-range-test/+page.svelte        |   4 +-
 .../components/form-input-range/+page.svelte  |   4 +-
 .../components/form-input-test/+page.svelte   |   4 +-
 .../form-input-textarea-test/+page.svelte     |   4 +-
 .../form-input-textarea/+page.svelte          |   4 +-
 .../(docs)/components/form-input/+page.svelte |   4 +-
 .../form-notification-test/+page.svelte       |   4 +-
 .../components/form-notification/+page.svelte |   4 +-
 .../form-required-test/+page.svelte           |   4 +-
 .../components/form-required/+page.svelte     |   4 +-
 .../components/form-select-test/+page.svelte  |   4 +-
 .../components/form-select/+page.svelte       |   4 +-
 .../(docs)/components/forms/+page.svelte      |   4 +-
 .../components/header-navigation/+page.svelte |   4 +-
 .../example-content-wrapper/+page@.svelte     |   7 +-
 .../example-form-button/+page@.svelte         |  11 +-
 .../+page@.svelte                             |   6 +-
 .../example-logo-above/+page@.svelte          |   6 +-
 .../example-logo/+page@.svelte                |   6 +-
 .../example-multiple-menus/+page@.svelte      |   7 +-
 .../example-search/+page@.svelte              |   7 +-
 .../header-navigation/example/+page@.svelte   |   6 +-
 .../components/heading-base-set/+page.svelte  |   4 +-
 .../components/headings-test/+page.svelte     |   4 +-
 .../(docs)/components/headings/+page.svelte   |   4 +-
 .../(docs)/components/hidden/+page.svelte     |   4 +-
 .../horizontal-center-test/+page.svelte       |   4 +-
 .../components/horizontal-center/+page.svelte |   4 +-
 .../horizontal-scroll-test/+page.svelte       |   4 +-
 .../components/horizontal-scroll/+page.svelte |   4 +-
 .../horizontal-view-test/+page.svelte         |   4 +-
 .../components/horizontal-view/+page.svelte   |   4 +-
 .../(docs)/components/icons/+page.svelte      |   6 +-
 .../components/icons/add-set/+page.svelte     |   4 +-
 .../(docs)/components/icons/test/+page.svelte |   4 +-
 .../components/image-cover-test/+page.svelte  |   4 +-
 .../components/image-cover/+page.svelte       |   4 +-
 .../(docs)/components/image-icon/+page.svelte |   4 +-
 .../components/image-round-test/+page.svelte  |   4 +-
 .../components/image-round/+page.svelte       |   4 +-
 .../components/image-square-test/+page.svelte |   4 +-
 .../components/image-square/+page.svelte      |   4 +-
 .../language-selector-test/+page.svelte       |   4 +-
 .../components/language-selector/+page.svelte |   4 +-
 .../layout-authentication-test/+page.svelte   |   4 +-
 .../layout-authentication/+page.svelte        |   4 +-
 .../layout-centered-test/+page.svelte         |   4 +-
 .../components/layout-centered/+page.svelte   |   4 +-
 .../layout-column-2-test/+page.svelte         |   4 +-
 .../components/layout-column-2/+page.svelte   |   4 +-
 .../layout-column-3-test/+page.svelte         |   4 +-
 .../components/layout-column-3/+page.svelte   |   4 +-
 .../layout-column-4-test/+page.svelte         |   4 +-
 .../components/layout-column-4/+page.svelte   |   4 +-
 .../layout-fifty-fifty-test/+page.svelte      |   4 +-
 .../layout-fifty-fifty/+page.svelte           |   4 +-
 .../components/layout-form/+page.svelte       |   4 +-
 .../+page.svelte                              |   4 +-
 .../layout-one-third-two-thirds/+page.svelte  |   4 +-
 .../(docs)/components/layout-set/+page.svelte |   4 +-
 .../+page.svelte                              |   4 +-
 .../layout-two-thirds-one-third/+page.svelte  |   4 +-
 .../(docs)/components/link/+page.svelte       |   4 +-
 .../components/login-meta-test/+page.svelte   |   4 +-
 .../(docs)/components/login-meta/+page.svelte |   4 +-
 .../(docs)/components/logo/+page.svelte       |   4 +-
 .../main-content-wrapper/+page.svelte         |   4 +-
 .../+page.svelte                              |   4 +-
 .../components/main-test-direct/+page.svelte  |   4 +-
 .../components/main-test-div/+page.svelte     |   4 +-
 .../(docs)/components/main-test/+page.svelte  |   4 +-
 .../(docs)/components/main/+page.svelte       |   4 +-
 .../components/max-line-length/+page.svelte   |   4 +-
 .../components/message-counter/+page.svelte   |   4 +-
 .../(docs)/components/navigation/+page.svelte |   4 +-
 .../components/nota-bene-test/+page.svelte    |   4 +-
 .../(docs)/components/nota-bene/+page.svelte  |   4 +-
 .../notification-confirmation/+page.svelte    |   4 +-
 .../notification-error/+page.svelte           |   4 +-
 .../notification-explanation/+page.svelte     |   4 +-
 .../notification-system-message/+page.svelte  |   4 +-
 .../notification-warning/+page.svelte         |   4 +-
 .../+page.svelte                              |   4 +-
 .../notifications-block-element/+page.svelte  |   4 +-
 .../+page.svelte                              |   4 +-
 .../+page.svelte                              |   4 +-
 .../+page.svelte                              |   4 +-
 .../+page.svelte                              |   4 +-
 .../+page.svelte                              |   4 +-
 .../notifications-page/+page.svelte           |   4 +-
 .../notifications-paragraph-test/+page.svelte |   4 +-
 .../notifications-paragraph/+page.svelte      |   4 +-
 .../notifications-table-test/+page.svelte     |   4 +-
 .../notifications-table/+page.svelte          |   4 +-
 .../components/notifications/+page.svelte     |   4 +-
 .../components/nowrap-test/+page.svelte       |   4 +-
 .../(docs)/components/nowrap/+page.svelte     |   4 +-
 .../components/pagination-test/+page.svelte   |   4 +-
 .../(docs)/components/pagination/+page.svelte |   4 +-
 .../components/paragraph-test/+page.svelte    |   4 +-
 .../(docs)/components/paragraph/+page.svelte  |   4 +-
 .../section-content-wrapper-test/+page.svelte |   4 +-
 .../section-content-wrapper/+page.svelte      |   4 +-
 .../components/section-test/+page.svelte      |   4 +-
 .../(docs)/components/section/+page.svelte    |   4 +-
 .../(docs)/components/sidemenu/+page.svelte   |   4 +-
 .../sidemenu/in-page-collapsible/+page.svelte |   4 +-
 .../components/sidemenu/in-page/+page.svelte  |   4 +-
 .../next-to-page-collapsible/+page@.svelte    |  10 +-
 .../sidemenu/next-to-page/+page@.svelte       |   8 +-
 .../(docs)/components/spot-large/+page.svelte |   4 +-
 .../components/spot-medium/+page.svelte       |   4 +-
 .../(docs)/components/spot-mini/+page.svelte  |   4 +-
 .../(docs)/components/spot-small/+page.svelte |   4 +-
 .../table-action-buttons-test/+page.svelte    |   4 +-
 .../table-action-buttons/+page.svelte         |   4 +-
 .../(docs)/components/table-base/+page.svelte |   4 +-
 .../table-caption-test/+page.svelte           |   4 +-
 .../components/table-caption/+page.svelte     |   4 +-
 .../table-checkbox-test/+page.svelte          |   4 +-
 .../components/table-checkbox/+page.svelte    |  15 +-
 .../table-condensed-test/+page.svelte         |   4 +-
 .../components/table-condensed/+page.svelte   |   4 +-
 .../components/table-expando-row/+page.svelte |   4 +-
 .../table-multiple-columns-test/+page.svelte  |   4 +-
 .../table-multiple-columns/+page.svelte       |   4 +-
 .../table-multiple-rows-test/+page.svelte     |   4 +-
 .../table-multiple-rows/+page.svelte          |   4 +-
 .../table-notifications-test/+page.svelte     |   4 +-
 .../table-notifications/+page.svelte          |   4 +-
 .../table-numerical-data-test/+page.svelte    |   4 +-
 .../table-numerical-data/+page.svelte         |   4 +-
 .../components/table-scope-test/+page.svelte  |   4 +-
 .../components/table-scope/+page.svelte       |   4 +-
 .../components/table-sortable/+page.svelte    |  57 ++--
 .../table-sticky-header-test/+page.svelte     |   4 +-
 .../table-sticky-header/+page.svelte          |   4 +-
 .../table-summary-test/+page.svelte           |   4 +-
 .../components/table-summary/+page.svelte     |   4 +-
 .../(docs)/components/table/+page.svelte      |   4 +-
 .../(docs)/components/tabs-test/+page.svelte  |   4 +-
 .../(docs)/components/tabs/+page.svelte       |   4 +-
 .../routes/(docs)/components/tag/+page.svelte |   4 +-
 .../(docs)/components/tags-6-3/+page.svelte   |   4 +-
 .../(docs)/components/tags-6/+page.svelte     |   4 +-
 .../(docs)/components/tags/+page.svelte       |   4 +-
 .../components/tile-cover-image/+page.svelte  |   4 +-
 .../components/tile-groups-test/+page.svelte  |   4 +-
 .../components/tile-groups/+page.svelte       |   4 +-
 .../(docs)/components/tiles-test/+page.svelte |   4 +-
 .../(docs)/components/tiles/+page.svelte      |   4 +-
 .../routes/(docs)/documentation/+page.svelte  |   4 +-
 .../(docs)/documentation/add-js/+page.svelte  |   2 +-
 .../documentation/import-styling/+page.svelte |   4 +-
 .../use-css-variable/+page.svelte             |   4 +-
 .../documentation/variables/+page.svelte      |   4 +-
 docs/src/routes/+layout.server.js             |   8 -
 docs/src/routes/+layout.server.ts             |   8 +
 docs/src/routes/+layout.svelte                |   8 +-
 docs/src/routes/{+layout.js => +layout.ts}    |   6 +-
 pnpm-lock.yaml                                | 275 +++++++++---------
 259 files changed, 756 insertions(+), 746 deletions(-)
 rename docs/src/lib/{breadcrumbs.js => breadcrumbs.ts} (61%)
 rename docs/src/lib/{manon.js => manon.ts} (100%)
 delete mode 100644 docs/src/routes/+layout.server.js
 create mode 100644 docs/src/routes/+layout.server.ts
 rename docs/src/routes/{+layout.js => +layout.ts} (79%)

diff --git a/docs/package.json b/docs/package.json
index b844dc29..31b7d5e8 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -18,14 +18,14 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^3.0.5",
-    "@sveltejs/kit": "^2.5.24",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@sveltejs/kit": "^2.7.2",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.7",
     "rimraf": "^6.0.1",
     "sass": "^1.79.4",
-    "svelte": "^4.2.19",
-    "svelte-check": "^4.0.4",
+    "svelte": "^5.0.3",
+    "svelte-check": "^4.0.5",
     "svelte-preprocess-import-assets": "^1.1.0",
     "typescript": "^5.6.2",
     "vite": "^5.4.8"
diff --git a/docs/src/lib/BreadcrumbNav.svelte b/docs/src/lib/BreadcrumbNav.svelte
index 325878c6..f0d9cd05 100644
--- a/docs/src/lib/BreadcrumbNav.svelte
+++ b/docs/src/lib/BreadcrumbNav.svelte
@@ -1,9 +1,9 @@
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import { page } from "$app/stores";
-  import { getBreadcrumbs } from "$lib/breadcrumbs.js";
+  import { getBreadcrumbs } from "$lib/breadcrumbs";
   import NavLink from "./NavLink.svelte";
-  $: breadcrumbs = getBreadcrumbs($page.route.id, $page.data.breadcrumbNames);
+  let breadcrumbs = $derived(getBreadcrumbs($page.route.id, $page.data.breadcrumbNames));
 </script>
 
 {#if breadcrumbs.length > 1}
diff --git a/docs/src/lib/Code.svelte b/docs/src/lib/Code.svelte
index b7d4e692..4dcfbefa 100644
--- a/docs/src/lib/Code.svelte
+++ b/docs/src/lib/Code.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module lang="ts">
   import hljs from "highlight.js/lib/core";
   import xml from "highlight.js/lib/languages/xml";
   import css from "highlight.js/lib/languages/css";
@@ -11,17 +11,17 @@
   hljs.registerLanguage("plaintext", plaintext);
 </script>
 
-<script>
+<script lang="ts">
   import "highlight.js/styles/github.css";
 
-  /** @param {string} markup */
-  const trim = (markup) => markup.replace(/^(\s*\n)+/, "").replace(/\n\s*$/, "");
+  interface Props {
+    language?: "html" | "css" | "scss" | "plaintext";
+    code?: string;
+  }
 
-  /** @type {'html' | 'css' | 'scss' | 'plaintext'} */
-  export let language = "plaintext";
-  export let code = "";
-  $: trimmed = trim(code);
-  $: highlighted = hljs.highlight(trimmed, { language }).value;
+  let { language = "plaintext", code = "" }: Props = $props();
+  let trimmed = $derived(code.replace(/^(\s*\n)+/, "").replace(/\n\s*$/, ""));
+  let highlighted = $derived(hljs.highlight(trimmed, { language }).value);
 </script>
 
 <pre><code>{@html highlighted}</code></pre>
diff --git a/docs/src/lib/DefaultFooter.svelte b/docs/src/lib/DefaultFooter.svelte
index 68e6d41c..056c66a7 100644
--- a/docs/src/lib/DefaultFooter.svelte
+++ b/docs/src/lib/DefaultFooter.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import SiteNavLinks from "$lib/SiteNavLinks.svelte";
 </script>
 
diff --git a/docs/src/lib/DefaultHeader.svelte b/docs/src/lib/DefaultHeader.svelte
index 25629776..082b1e90 100644
--- a/docs/src/lib/DefaultHeader.svelte
+++ b/docs/src/lib/DefaultHeader.svelte
@@ -1,9 +1,12 @@
-<script>
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
   import SiteNav from "$lib/SiteNav.svelte";
   import BreadcrumbNav from "$lib/BreadcrumbNav.svelte";
+
+  let props: HTMLAttributes<HTMLElement> = $props();
 </script>
 
-<header {...$$props}>
+<header {...props}>
   <div>
     <a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>
     <SiteNav />
diff --git a/docs/src/lib/NavLink.svelte b/docs/src/lib/NavLink.svelte
index 3b3da334..fce06745 100644
--- a/docs/src/lib/NavLink.svelte
+++ b/docs/src/lib/NavLink.svelte
@@ -1,12 +1,17 @@
-<script>
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
   import { page } from "$app/stores";
 
-  export let href = "";
+  interface Props {
+    children: Snippet;
+    href: string;
+  }
 
-  /** @type {"page"|undefined} */
-  $: ariaCurrent = $page.url.pathname === href ? "page" : undefined;
+  let { href = "", children, ...rest }: Props & HTMLAnchorAttributes = $props();
+  let ariaCurrent = $derived($page.url.pathname === href ? ("page" as const) : undefined);
 </script>
 
-<a {href} aria-current={ariaCurrent} {...$$restProps}>
-  <slot />
+<a {href} aria-current={ariaCurrent} {...rest}>
+  {@render children?.()}
 </a>
diff --git a/docs/src/lib/SideMenu.svelte b/docs/src/lib/SideMenu.svelte
index fdb00c97..c2d45296 100644
--- a/docs/src/lib/SideMenu.svelte
+++ b/docs/src/lib/SideMenu.svelte
@@ -1,7 +1,9 @@
-<script>
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
   import { onMount } from "svelte";
-  import { browser } from "$app/environment";
-  import { initSidemenus } from "$lib/manon.js";
+  import { initSidemenus } from "$lib/manon";
+
+  let props: HTMLAttributes<HTMLElement> = $props();
   onMount(initSidemenus);
 </script>
 
@@ -9,7 +11,7 @@
   data-open-label="Zijbalknavigatie"
   data-close-label="Sluit zijbalknavigatie"
   aria-label="Document-navigatie"
-  {...$$props}
+  {...props}
 >
-  <slot />
+  {@render props.children?.()}
 </nav>
diff --git a/docs/src/lib/SiteNav.svelte b/docs/src/lib/SiteNav.svelte
index 6b68453b..e6826157 100644
--- a/docs/src/lib/SiteNav.svelte
+++ b/docs/src/lib/SiteNav.svelte
@@ -1,8 +1,8 @@
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import { onMount } from "svelte";
   import SiteNavLinks from "$lib/SiteNavLinks.svelte";
-  import { initCollapsible } from "$lib/manon.js";
+  import { initCollapsible } from "$lib/manon";
   onMount(initCollapsible);
 </script>
 
diff --git a/docs/src/lib/SiteNavLinks.svelte b/docs/src/lib/SiteNavLinks.svelte
index dbf112ee..cfa321b9 100644
--- a/docs/src/lib/SiteNavLinks.svelte
+++ b/docs/src/lib/SiteNavLinks.svelte
@@ -1,9 +1,12 @@
-<script>
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
   import { base } from "$app/paths";
   import NavLink from "$lib/NavLink.svelte";
+
+  let props: HTMLAttributes<HTMLElement> = $props();
 </script>
 
-<ul {...$$props}>
+<ul {...props}>
   <li><NavLink href="{base}/">Home</NavLink></li>
   <li><NavLink href="{base}/components">Componenten</NavLink></li>
   <li><NavLink href="{base}/documentation">Documentatie</NavLink></li>
diff --git a/docs/src/lib/breadcrumbs.js b/docs/src/lib/breadcrumbs.ts
similarity index 61%
rename from docs/src/lib/breadcrumbs.js
rename to docs/src/lib/breadcrumbs.ts
index 3003ae69..fbf09e29 100644
--- a/docs/src/lib/breadcrumbs.js
+++ b/docs/src/lib/breadcrumbs.ts
@@ -1,9 +1,9 @@
-/**
- * @param {string | null} routeId
- * @param {import('./types').BreadcrumbNames} breadcrumbNames
- * @return {Array<import('./types').Breadcrumb>}
- */
-export function getBreadcrumbs(routeId, breadcrumbNames) {
+import type { Breadcrumb, BreadcrumbNames } from "./types";
+
+export function getBreadcrumbs(
+  routeId: string | null,
+  breadcrumbNames: BreadcrumbNames,
+): Array<Breadcrumb> {
   if (!routeId || !breadcrumbNames) return [];
   const breadcrumbs = [];
   let route = "";
@@ -17,19 +17,15 @@ export function getBreadcrumbs(routeId, breadcrumbNames) {
   return breadcrumbs;
 }
 
-/**
- * @return {Promise<import('./types').BreadcrumbNames>}
- */
-export async function loadBreadcrumbNames() {
+export async function loadBreadcrumbNames(): Promise<BreadcrumbNames> {
   const modules = import.meta.glob("../routes/**/+page.svelte");
-  /** @type import('./types').BreadcrumbNames */
-  const names = {};
+  const names: BreadcrumbNames = {};
   await Promise.all(
     Object.entries(modules).map(async ([key, value]) => {
       key = routeFromModulePath(key);
       if (!key) return;
       const name = (await nameFromModule(value)) || nameFromKey(key);
-      names[/** @type {import('./types').Route} */ (key)] = name;
+      names[key] = name;
     }),
   );
   return names;
@@ -40,10 +36,8 @@ const routeSegmentPattern = /\/[^+.(\/]+/g;
 /**
  * Strip the "../routes/" prefix, "/+page.svelte" suffix, and any route
  * "(group)/"s from the module path.
- * @param {string} path
- * @return {string}
  */
-function routeFromModulePath(path) {
+function routeFromModulePath(path: string): string {
   routeSegmentPattern.lastIndex = 0;
   let route = "";
   let match;
@@ -54,20 +48,12 @@ function routeFromModulePath(path) {
   return route;
 }
 
-/**
- * @param {() => Promise<any>} mod
- * @return {Promise<string>}
- */
-async function nameFromModule(mod) {
-  const name = /** @type {any} */ (await mod()).breadcrumb;
+async function nameFromModule(mod: () => Promise<any>): Promise<string> {
+  const name = (await mod()).breadcrumb;
   return typeof name === "string" ? name : "";
 }
 
-/**
- * @param {string} key
- * @return {string}
- */
-function nameFromKey(key) {
+function nameFromKey(key: string): string {
   const parts = key.split("/");
   if (parts.length < 3) return "";
   const name = parts[parts.length - 2];
diff --git a/docs/src/lib/manon.js b/docs/src/lib/manon.ts
similarity index 100%
rename from docs/src/lib/manon.js
rename to docs/src/lib/manon.ts
diff --git a/docs/src/redirects.js b/docs/src/redirects.js
index 45ffea5f..ec31306d 100644
--- a/docs/src/redirects.js
+++ b/docs/src/redirects.js
@@ -1,9 +1,11 @@
 /**
- * Record mapping old URLs to new URLs. The root +layout.js uses this to
+ * Record mapping old URLs to new URLs. The root +layout.ts uses this to
  * generate redirect pages for the old URLs during a build. The keys (old URLs)
  * are added to the kit.prerender.entries array in svelte.config.js to ensure
  * they are included in the build.
  *
+ * NB: this needs to be a .js file because it's imported from svelte.config.js.
+ *
  * @type {Record<string, string>}
  */
 export const redirects = {
diff --git a/docs/src/routes/(docs)/+layout.svelte b/docs/src/routes/(docs)/+layout.svelte
index 9b483225..98ef1cd4 100644
--- a/docs/src/routes/(docs)/+layout.svelte
+++ b/docs/src/routes/(docs)/+layout.svelte
@@ -1,10 +1,12 @@
-<script>
+<script lang="ts">
   import DefaultHeader from "$lib/DefaultHeader.svelte";
   import DefaultFooter from "$lib/DefaultFooter.svelte";
+
+  let { children } = $props();
 </script>
 
 <DefaultHeader />
 
-<slot />
+{@render children?.()}
 
 <DefaultFooter />
diff --git a/docs/src/routes/(docs)/+page.svelte b/docs/src/routes/(docs)/+page.svelte
index 3431c9e8..5843a449 100644
--- a/docs/src/routes/(docs)/+page.svelte
+++ b/docs/src/routes/(docs)/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Manon";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/+page.svelte b/docs/src/routes/(docs)/components/+page.svelte
index 60871d20..bd336a94 100644
--- a/docs/src/routes/(docs)/components/+page.svelte
+++ b/docs/src/routes/(docs)/components/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Componenten";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import NavLink from "$lib/NavLink.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/accordion-test/+page.svelte b/docs/src/routes/(docs)/components/accordion-test/+page.svelte
index 0a166b24..b5c64045 100644
--- a/docs/src/routes/(docs)/components/accordion-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/accordion-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Accordeon testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/accordion/+page.svelte b/docs/src/routes/(docs)/components/accordion/+page.svelte
index 425f1870..66f7c7f2 100644
--- a/docs/src/routes/(docs)/components/accordion/+page.svelte
+++ b/docs/src/routes/(docs)/components/accordion/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Accordeon";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/application-base/+page.svelte b/docs/src/routes/(docs)/components/application-base/+page.svelte
index 8d2e362b..bc71e143 100644
--- a/docs/src/routes/(docs)/components/application-base/+page.svelte
+++ b/docs/src/routes/(docs)/components/application-base/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Stijlkeuzes op applicatie-niveau";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/article-content-wrapper-test/+page.svelte b/docs/src/routes/(docs)/components/article-content-wrapper-test/+page.svelte
index 1c097fc7..6f3d30f4 100644
--- a/docs/src/routes/(docs)/components/article-content-wrapper-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/article-content-wrapper-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Main testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/article-content-wrapper/+page.svelte b/docs/src/routes/(docs)/components/article-content-wrapper/+page.svelte
index 53086bc0..9acc81ca 100644
--- a/docs/src/routes/(docs)/components/article-content-wrapper/+page.svelte
+++ b/docs/src/routes/(docs)/components/article-content-wrapper/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Article content wrapper";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/article-test/+page.svelte b/docs/src/routes/(docs)/components/article-test/+page.svelte
index cac8b45a..758f1e96 100644
--- a/docs/src/routes/(docs)/components/article-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/article-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Article testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/article/+page.svelte b/docs/src/routes/(docs)/components/article/+page.svelte
index 7e7d3217..bf5dd2bb 100644
--- a/docs/src/routes/(docs)/components/article/+page.svelte
+++ b/docs/src/routes/(docs)/components/article/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Artikel";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/body-text-set/+page.svelte b/docs/src/routes/(docs)/components/body-text-set/+page.svelte
index 0bafaa42..45518280 100644
--- a/docs/src/routes/(docs)/components/body-text-set/+page.svelte
+++ b/docs/src/routes/(docs)/components/body-text-set/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Body text set";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/branding-colors/+page.svelte b/docs/src/routes/(docs)/components/branding-colors/+page.svelte
index 633cdf16..145b34fa 100644
--- a/docs/src/routes/(docs)/components/branding-colors/+page.svelte
+++ b/docs/src/routes/(docs)/components/branding-colors/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Kleuren";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import SideMenu from "$lib/SideMenu.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/breadcrumb-bar-example/+page.svelte b/docs/src/routes/(docs)/components/breadcrumb-bar-example/+page.svelte
index 244488e2..440e8100 100644
--- a/docs/src/routes/(docs)/components/breadcrumb-bar-example/+page.svelte
+++ b/docs/src/routes/(docs)/components/breadcrumb-bar-example/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Kruimelpad voorbeeld";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/breadcrumb-bar/+page.svelte b/docs/src/routes/(docs)/components/breadcrumb-bar/+page.svelte
index 95c78222..5c183c1e 100644
--- a/docs/src/routes/(docs)/components/breadcrumb-bar/+page.svelte
+++ b/docs/src/routes/(docs)/components/breadcrumb-bar/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Kruimelpad - breadcrumb-bar";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/button-base/+page.svelte b/docs/src/routes/(docs)/components/button-base/+page.svelte
index 40ec8c25..de047593 100644
--- a/docs/src/routes/(docs)/components/button-base/+page.svelte
+++ b/docs/src/routes/(docs)/components/button-base/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Knoppen (basisweergave)";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/button-call-to-action-test/+page.svelte b/docs/src/routes/(docs)/components/button-call-to-action-test/+page.svelte
index 68b2f51f..00b439c1 100644
--- a/docs/src/routes/(docs)/components/button-call-to-action-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/button-call-to-action-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = '"Call to action" testpagina';
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/button-call-to-action/+page.svelte b/docs/src/routes/(docs)/components/button-call-to-action/+page.svelte
index 5087e352..4e0de8a3 100644
--- a/docs/src/routes/(docs)/components/button-call-to-action/+page.svelte
+++ b/docs/src/routes/(docs)/components/button-call-to-action/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Call to action button";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/button-container-test/+page.svelte b/docs/src/routes/(docs)/components/button-container-test/+page.svelte
index 17c1a9cd..51183f2b 100644
--- a/docs/src/routes/(docs)/components/button-container-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/button-container-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Knoppen groeperen testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/button-container/+page.svelte b/docs/src/routes/(docs)/components/button-container/+page.svelte
index 17d2ac4d..9737cea1 100644
--- a/docs/src/routes/(docs)/components/button-container/+page.svelte
+++ b/docs/src/routes/(docs)/components/button-container/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Knoppen groeperen";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/button-destructive-test/+page.svelte b/docs/src/routes/(docs)/components/button-destructive-test/+page.svelte
index e6eaa42e..17ff3e9c 100644
--- a/docs/src/routes/(docs)/components/button-destructive-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/button-destructive-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Destructieve knop testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/button-destructive/+page.svelte b/docs/src/routes/(docs)/components/button-destructive/+page.svelte
index bcd916c9..ff05c8fd 100644
--- a/docs/src/routes/(docs)/components/button-destructive/+page.svelte
+++ b/docs/src/routes/(docs)/components/button-destructive/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Destructieve knop";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/button-dropdown/+page.svelte b/docs/src/routes/(docs)/components/button-dropdown/+page.svelte
index aa9a2d94..f062f3cf 100644
--- a/docs/src/routes/(docs)/components/button-dropdown/+page.svelte
+++ b/docs/src/routes/(docs)/components/button-dropdown/+page.svelte
@@ -1,12 +1,12 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Dropdown button";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import { onMount } from "svelte";
   import Code from "$lib/Code.svelte";
-  import { initCollapsible } from "$lib/manon.js";
+  import { initCollapsible } from "$lib/manon";
   onMount(initCollapsible);
   import SideMenu from "$lib/SideMenu.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/button-ghost-test/+page.svelte b/docs/src/routes/(docs)/components/button-ghost-test/+page.svelte
index 717ab344..49614a2f 100644
--- a/docs/src/routes/(docs)/components/button-ghost-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/button-ghost-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = '"Ghost button" testpagina';
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/button-ghost/+page.svelte b/docs/src/routes/(docs)/components/button-ghost/+page.svelte
index 96664778..22325361 100644
--- a/docs/src/routes/(docs)/components/button-ghost/+page.svelte
+++ b/docs/src/routes/(docs)/components/button-ghost/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Ghost button";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/button-icon-only/+page.svelte b/docs/src/routes/(docs)/components/button-icon-only/+page.svelte
index 241c507e..6014cefb 100644
--- a/docs/src/routes/(docs)/components/button-icon-only/+page.svelte
+++ b/docs/src/routes/(docs)/components/button-icon-only/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Icoonknoppen zonder achtergrond";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/button-icon/+page.svelte b/docs/src/routes/(docs)/components/button-icon/+page.svelte
index 8fd426f7..c5a3098d 100644
--- a/docs/src/routes/(docs)/components/button-icon/+page.svelte
+++ b/docs/src/routes/(docs)/components/button-icon/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Icoonknoppen";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/button-test/+page.svelte b/docs/src/routes/(docs)/components/button-test/+page.svelte
index 52d9f2f0..72918fbf 100644
--- a/docs/src/routes/(docs)/components/button-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/button-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Knoppen testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/button-to-top/+page.svelte b/docs/src/routes/(docs)/components/button-to-top/+page.svelte
index eb97effb..8b8f478b 100644
--- a/docs/src/routes/(docs)/components/button-to-top/+page.svelte
+++ b/docs/src/routes/(docs)/components/button-to-top/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Terug naar hoofdmenu knop";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/button/+page.svelte b/docs/src/routes/(docs)/components/button/+page.svelte
index 27ee9728..3f26f314 100644
--- a/docs/src/routes/(docs)/components/button/+page.svelte
+++ b/docs/src/routes/(docs)/components/button/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Knoppen";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import SideMenu from "$lib/SideMenu.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/card/+page.svelte b/docs/src/routes/(docs)/components/card/+page.svelte
index d19959df..0decd326 100644
--- a/docs/src/routes/(docs)/components/card/+page.svelte
+++ b/docs/src/routes/(docs)/components/card/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Kaart";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/checkbox-test/+page.svelte b/docs/src/routes/(docs)/components/checkbox-test/+page.svelte
index 9b377b14..69b316b4 100644
--- a/docs/src/routes/(docs)/components/checkbox-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/checkbox-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Selectievak testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/checkbox/+page.svelte b/docs/src/routes/(docs)/components/checkbox/+page.svelte
index e529225d..033a10b5 100644
--- a/docs/src/routes/(docs)/components/checkbox/+page.svelte
+++ b/docs/src/routes/(docs)/components/checkbox/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Selectievak - checkbox";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/collapsible-menu/+page.svelte b/docs/src/routes/(docs)/components/collapsible-menu/+page.svelte
index 5326d930..522971bc 100644
--- a/docs/src/routes/(docs)/components/collapsible-menu/+page.svelte
+++ b/docs/src/routes/(docs)/components/collapsible-menu/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Inklapbaar menu";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/collapsible/+page.svelte b/docs/src/routes/(docs)/components/collapsible/+page.svelte
index 69684be1..be56e072 100644
--- a/docs/src/routes/(docs)/components/collapsible/+page.svelte
+++ b/docs/src/routes/(docs)/components/collapsible/+page.svelte
@@ -1,12 +1,12 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Inklapbaar component";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import { onMount } from "svelte";
   import Code from "$lib/Code.svelte";
-  import { initCollapsible } from "$lib/manon.js";
+  import { initCollapsible } from "$lib/manon";
   onMount(initCollapsible);
   import SideMenu from "$lib/SideMenu.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/de-emphasized-test/+page.svelte b/docs/src/routes/(docs)/components/de-emphasized-test/+page.svelte
index 0cf9220a..b69d6336 100644
--- a/docs/src/routes/(docs)/components/de-emphasized-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/de-emphasized-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Subtielere weergave testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/de-emphasized/+page.svelte b/docs/src/routes/(docs)/components/de-emphasized/+page.svelte
index 0fe88a51..974bbea5 100644
--- a/docs/src/routes/(docs)/components/de-emphasized/+page.svelte
+++ b/docs/src/routes/(docs)/components/de-emphasized/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Subtielere weergave";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/description-list/+page.svelte b/docs/src/routes/(docs)/components/description-list/+page.svelte
index c5cc3025..6398233c 100644
--- a/docs/src/routes/(docs)/components/description-list/+page.svelte
+++ b/docs/src/routes/(docs)/components/description-list/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Description list";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/div-content-wrapper-test/+page.svelte b/docs/src/routes/(docs)/components/div-content-wrapper-test/+page.svelte
index bea9e64b..4aa2302b 100644
--- a/docs/src/routes/(docs)/components/div-content-wrapper-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/div-content-wrapper-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Div content wrapper test";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/div-content-wrapper/+page.svelte b/docs/src/routes/(docs)/components/div-content-wrapper/+page.svelte
index 79192164..83bbd922 100644
--- a/docs/src/routes/(docs)/components/div-content-wrapper/+page.svelte
+++ b/docs/src/routes/(docs)/components/div-content-wrapper/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Div content wrapper";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/div-test/+page.svelte b/docs/src/routes/(docs)/components/div-test/+page.svelte
index d7b43237..84374b32 100644
--- a/docs/src/routes/(docs)/components/div-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/div-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Div testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/div/+page.svelte b/docs/src/routes/(docs)/components/div/+page.svelte
index 9254c900..865e9854 100644
--- a/docs/src/routes/(docs)/components/div/+page.svelte
+++ b/docs/src/routes/(docs)/components/div/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Sectie";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/emphasized-test/+page.svelte b/docs/src/routes/(docs)/components/emphasized-test/+page.svelte
index 6f9c22dc..bd57eec9 100644
--- a/docs/src/routes/(docs)/components/emphasized-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/emphasized-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Benadrukte weergave testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/emphasized/+page.svelte b/docs/src/routes/(docs)/components/emphasized/+page.svelte
index 9cd3394b..8e87b969 100644
--- a/docs/src/routes/(docs)/components/emphasized/+page.svelte
+++ b/docs/src/routes/(docs)/components/emphasized/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Benadrukte weergave";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/fieldset-checkbox-test/+page.svelte b/docs/src/routes/(docs)/components/fieldset-checkbox-test/+page.svelte
index 0f64835c..3bd6e8ee 100644
--- a/docs/src/routes/(docs)/components/fieldset-checkbox-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/fieldset-checkbox-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Fieldset selectievak testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/fieldset-checkbox/+page.svelte b/docs/src/routes/(docs)/components/fieldset-checkbox/+page.svelte
index 3975d709..98521152 100644
--- a/docs/src/routes/(docs)/components/fieldset-checkbox/+page.svelte
+++ b/docs/src/routes/(docs)/components/fieldset-checkbox/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Fieldset Selectievak - checkbox";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/fieldset-radio/+page.svelte b/docs/src/routes/(docs)/components/fieldset-radio/+page.svelte
index 178f9f43..f62af154 100644
--- a/docs/src/routes/(docs)/components/fieldset-radio/+page.svelte
+++ b/docs/src/routes/(docs)/components/fieldset-radio/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Fieldset Radio-selecteerknop - radio";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/filter-test/+page.svelte b/docs/src/routes/(docs)/components/filter-test/+page.svelte
index 7ffc7b6b..371b1bbf 100644
--- a/docs/src/routes/(docs)/components/filter-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/filter-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Filter testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/filter/+page.svelte b/docs/src/routes/(docs)/components/filter/+page.svelte
index d1d509f1..c399cf98 100644
--- a/docs/src/routes/(docs)/components/filter/+page.svelte
+++ b/docs/src/routes/(docs)/components/filter/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Filter";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/finn-large/+page.svelte b/docs/src/routes/(docs)/components/finn-large/+page.svelte
index d8a90e86..5fa8e47b 100644
--- a/docs/src/routes/(docs)/components/finn-large/+page.svelte
+++ b/docs/src/routes/(docs)/components/finn-large/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Finn groot";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/finn-medium/+page.svelte b/docs/src/routes/(docs)/components/finn-medium/+page.svelte
index 61f5e4c6..0e11a2ad 100644
--- a/docs/src/routes/(docs)/components/finn-medium/+page.svelte
+++ b/docs/src/routes/(docs)/components/finn-medium/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Finn middel";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/finn-small/+page.svelte b/docs/src/routes/(docs)/components/finn-small/+page.svelte
index ed75b607..ee816dbe 100644
--- a/docs/src/routes/(docs)/components/finn-small/+page.svelte
+++ b/docs/src/routes/(docs)/components/finn-small/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Finn klein";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/focus-only-test/+page.svelte b/docs/src/routes/(docs)/components/focus-only-test/+page.svelte
index 95fba7a4..bf7e0eeb 100644
--- a/docs/src/routes/(docs)/components/focus-only-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/focus-only-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Focus only testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/focus-only/+page.svelte b/docs/src/routes/(docs)/components/focus-only/+page.svelte
index d8baef40..c939076a 100644
--- a/docs/src/routes/(docs)/components/focus-only/+page.svelte
+++ b/docs/src/routes/(docs)/components/focus-only/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = '"Focus only"';
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/font/+page.svelte b/docs/src/routes/(docs)/components/font/+page.svelte
index 9eb6b0ba..8e450564 100644
--- a/docs/src/routes/(docs)/components/font/+page.svelte
+++ b/docs/src/routes/(docs)/components/font/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Font";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/footer-two-thirds-one-third/+page.svelte b/docs/src/routes/(docs)/components/footer-two-thirds-one-third/+page.svelte
index 19f8c8d8..5c87383b 100644
--- a/docs/src/routes/(docs)/components/footer-two-thirds-one-third/+page.svelte
+++ b/docs/src/routes/(docs)/components/footer-two-thirds-one-third/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Footer tweederde eenderde";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/footer/+page.svelte b/docs/src/routes/(docs)/components/footer/+page.svelte
index a49be48e..add95f06 100644
--- a/docs/src/routes/(docs)/components/footer/+page.svelte
+++ b/docs/src/routes/(docs)/components/footer/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Footer";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/form-accent-color-test/+page.svelte b/docs/src/routes/(docs)/components/form-accent-color-test/+page.svelte
index 8409a686..3b5ae3eb 100644
--- a/docs/src/routes/(docs)/components/form-accent-color-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-accent-color-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Accentkleur op formulierelementen testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/form-accent-color/+page.svelte b/docs/src/routes/(docs)/components/form-accent-color/+page.svelte
index b772a408..2d631672 100644
--- a/docs/src/routes/(docs)/components/form-accent-color/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-accent-color/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Accentkleur op formulierelementen";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/form-base-test/+page.svelte b/docs/src/routes/(docs)/components/form-base-test/+page.svelte
index 39a63c48..98f9aed7 100644
--- a/docs/src/routes/(docs)/components/form-base-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-base-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Basisformulier testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/form-base/+page.svelte b/docs/src/routes/(docs)/components/form-base/+page.svelte
index 218339cd..92c31bad 100644
--- a/docs/src/routes/(docs)/components/form-base/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-base/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Basisformulier";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/form-columns-test/+page.svelte b/docs/src/routes/(docs)/components/form-columns-test/+page.svelte
index 4df37572..8a466949 100644
--- a/docs/src/routes/(docs)/components/form-columns-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-columns-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Weergave in kolommen testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/form-columns/+page.svelte b/docs/src/routes/(docs)/components/form-columns/+page.svelte
index f8a580f0..541282d2 100644
--- a/docs/src/routes/(docs)/components/form-columns/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-columns/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Weergave in kolommen";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/form-combined-fields-test/+page.svelte b/docs/src/routes/(docs)/components/form-combined-fields-test/+page.svelte
index b79b7bd5..d7a66496 100644
--- a/docs/src/routes/(docs)/components/form-combined-fields-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-combined-fields-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Gecombineerde testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/form-combined-fields/+page.svelte b/docs/src/routes/(docs)/components/form-combined-fields/+page.svelte
index a75afed6..ff4abe97 100644
--- a/docs/src/routes/(docs)/components/form-combined-fields/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-combined-fields/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Gecombineerde velden";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/form-fieldset-invisible/+page.svelte b/docs/src/routes/(docs)/components/form-fieldset-invisible/+page.svelte
index 041bd207..79814335 100644
--- a/docs/src/routes/(docs)/components/form-fieldset-invisible/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-fieldset-invisible/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Onzichtbare fieldset";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/form-fieldset/+page.svelte b/docs/src/routes/(docs)/components/form-fieldset/+page.svelte
index a8b81926..f83aaddf 100644
--- a/docs/src/routes/(docs)/components/form-fieldset/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-fieldset/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Fieldset";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/form-help-test/+page.svelte b/docs/src/routes/(docs)/components/form-help-test/+page.svelte
index 1de4a9ad..9cf820a5 100644
--- a/docs/src/routes/(docs)/components/form-help-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-help-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Hulpteksten testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/form-help/+page.svelte b/docs/src/routes/(docs)/components/form-help/+page.svelte
index b1c985e6..71ed2ed1 100644
--- a/docs/src/routes/(docs)/components/form-help/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-help/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Hulpteksten";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/form-horizontal-view-test/+page.svelte b/docs/src/routes/(docs)/components/form-horizontal-view-test/+page.svelte
index 579804d0..5e19c6c6 100644
--- a/docs/src/routes/(docs)/components/form-horizontal-view-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-horizontal-view-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Horizontaal uitgelijnde testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/form-horizontal-view/+page.svelte b/docs/src/routes/(docs)/components/form-horizontal-view/+page.svelte
index 763168dd..880a43f7 100644
--- a/docs/src/routes/(docs)/components/form-horizontal-view/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-horizontal-view/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Horizontaal uitgelijnd";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/form-inline-test/+page.svelte b/docs/src/routes/(docs)/components/form-inline-test/+page.svelte
index 3500f97e..132e377a 100644
--- a/docs/src/routes/(docs)/components/form-inline-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-inline-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Inlineformulier testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/form-inline/+page.svelte b/docs/src/routes/(docs)/components/form-inline/+page.svelte
index 4648f316..6d0eb11a 100644
--- a/docs/src/routes/(docs)/components/form-inline/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-inline/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = '"inline"-formulier';
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/form-input-color-filled-test/+page.svelte b/docs/src/routes/(docs)/components/form-input-color-filled-test/+page.svelte
index 651f5b35..6054598f 100644
--- a/docs/src/routes/(docs)/components/form-input-color-filled-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-color-filled-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Kleurselector volledig gevuld";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/form-input-color-filled/+page.svelte b/docs/src/routes/(docs)/components/form-input-color-filled/+page.svelte
index 73371599..62aaeec2 100644
--- a/docs/src/routes/(docs)/components/form-input-color-filled/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-color-filled/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Kleurselector volledig gevuld";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/form-input-color-test/+page.svelte b/docs/src/routes/(docs)/components/form-input-color-test/+page.svelte
index a6eef997..018b2e3f 100644
--- a/docs/src/routes/(docs)/components/form-input-color-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-color-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Datum";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/form-input-color/+page.svelte b/docs/src/routes/(docs)/components/form-input-color/+page.svelte
index ed8a61ba..4a0a2f8c 100644
--- a/docs/src/routes/(docs)/components/form-input-color/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-color/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Kleurselector";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/form-input-date-test/+page.svelte b/docs/src/routes/(docs)/components/form-input-date-test/+page.svelte
index 26129755..731b2d9e 100644
--- a/docs/src/routes/(docs)/components/form-input-date-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-date-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Datum";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/form-input-date/+page.svelte b/docs/src/routes/(docs)/components/form-input-date/+page.svelte
index b08f31e1..d1034546 100644
--- a/docs/src/routes/(docs)/components/form-input-date/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-date/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Datum";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/form-input-email-test/+page.svelte b/docs/src/routes/(docs)/components/form-input-email-test/+page.svelte
index 04cd03d3..5884e18c 100644
--- a/docs/src/routes/(docs)/components/form-input-email-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-email-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Email";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/form-input-email/+page.svelte b/docs/src/routes/(docs)/components/form-input-email/+page.svelte
index 25717590..d50745a7 100644
--- a/docs/src/routes/(docs)/components/form-input-email/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-email/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Email";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/form-input-file-test/+page.svelte b/docs/src/routes/(docs)/components/form-input-file-test/+page.svelte
index b3614ea4..7b029c70 100644
--- a/docs/src/routes/(docs)/components/form-input-file-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-file-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Bestand testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/form-input-file/+page.svelte b/docs/src/routes/(docs)/components/form-input-file/+page.svelte
index f55e54dd..291d92cd 100644
--- a/docs/src/routes/(docs)/components/form-input-file/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-file/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Bestand";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/form-input-password-test/+page.svelte b/docs/src/routes/(docs)/components/form-input-password-test/+page.svelte
index 11276440..94f2cd27 100644
--- a/docs/src/routes/(docs)/components/form-input-password-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-password-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Wachtwoord testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/form-input-password/+page.svelte b/docs/src/routes/(docs)/components/form-input-password/+page.svelte
index 4df88808..54251327 100644
--- a/docs/src/routes/(docs)/components/form-input-password/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-password/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Wachtwoord";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/form-input-radio-test/+page.svelte b/docs/src/routes/(docs)/components/form-input-radio-test/+page.svelte
index 0a6e2999..4542224c 100644
--- a/docs/src/routes/(docs)/components/form-input-radio-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-radio-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Radio-selecteerknop testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/form-input-radio/+page.svelte b/docs/src/routes/(docs)/components/form-input-radio/+page.svelte
index 94f59b64..80461625 100644
--- a/docs/src/routes/(docs)/components/form-input-radio/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-radio/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Radio-selecteerknop - radio";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/form-input-range-test/+page.svelte b/docs/src/routes/(docs)/components/form-input-range-test/+page.svelte
index 48a428ab..dbc89d4e 100644
--- a/docs/src/routes/(docs)/components/form-input-range-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-range-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Bereik testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/form-input-range/+page.svelte b/docs/src/routes/(docs)/components/form-input-range/+page.svelte
index 77689008..51a885e6 100644
--- a/docs/src/routes/(docs)/components/form-input-range/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-range/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Bereik";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/form-input-test/+page.svelte b/docs/src/routes/(docs)/components/form-input-test/+page.svelte
index 2bda9707..5b5ec159 100644
--- a/docs/src/routes/(docs)/components/form-input-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Invoerveld testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/form-input-textarea-test/+page.svelte b/docs/src/routes/(docs)/components/form-input-textarea-test/+page.svelte
index c7fefab3..458db823 100644
--- a/docs/src/routes/(docs)/components/form-input-textarea-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-textarea-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tekstveld testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/form-input-textarea/+page.svelte b/docs/src/routes/(docs)/components/form-input-textarea/+page.svelte
index efec0cd3..29cf5135 100644
--- a/docs/src/routes/(docs)/components/form-input-textarea/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-textarea/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tekstveld";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/form-input/+page.svelte b/docs/src/routes/(docs)/components/form-input/+page.svelte
index 42788bdd..6a48064f 100644
--- a/docs/src/routes/(docs)/components/form-input/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Invoerveld";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/form-notification-test/+page.svelte b/docs/src/routes/(docs)/components/form-notification-test/+page.svelte
index 7ea245b0..5f797299 100644
--- a/docs/src/routes/(docs)/components/form-notification-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-notification-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Notificatie binnen formulier";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/form-notification/+page.svelte b/docs/src/routes/(docs)/components/form-notification/+page.svelte
index 97a5579a..d8989510 100644
--- a/docs/src/routes/(docs)/components/form-notification/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-notification/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Notificatie binnen formulier";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/form-required-test/+page.svelte b/docs/src/routes/(docs)/components/form-required-test/+page.svelte
index 22ba4e64..75729726 100644
--- a/docs/src/routes/(docs)/components/form-required-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-required-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Verplichte testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/form-required/+page.svelte b/docs/src/routes/(docs)/components/form-required/+page.svelte
index 1af3d862..80f3717d 100644
--- a/docs/src/routes/(docs)/components/form-required/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-required/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Verplichte velden";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/form-select-test/+page.svelte b/docs/src/routes/(docs)/components/form-select-test/+page.svelte
index df443e7f..7541ef54 100644
--- a/docs/src/routes/(docs)/components/form-select-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-select-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Selectielijst testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/form-select/+page.svelte b/docs/src/routes/(docs)/components/form-select/+page.svelte
index 839c50b2..b71c0e51 100644
--- a/docs/src/routes/(docs)/components/form-select/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-select/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Selectielijst";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/forms/+page.svelte b/docs/src/routes/(docs)/components/forms/+page.svelte
index e0562ed7..199e58c5 100644
--- a/docs/src/routes/(docs)/components/forms/+page.svelte
+++ b/docs/src/routes/(docs)/components/forms/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Formulieren";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/header-navigation/+page.svelte b/docs/src/routes/(docs)/components/header-navigation/+page.svelte
index cfba84a6..433339d7 100644
--- a/docs/src/routes/(docs)/components/header-navigation/+page.svelte
+++ b/docs/src/routes/(docs)/components/header-navigation/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Header";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/header-navigation/example-content-wrapper/+page@.svelte b/docs/src/routes/(docs)/components/header-navigation/example-content-wrapper/+page@.svelte
index 0187874f..0964a432 100644
--- a/docs/src/routes/(docs)/components/header-navigation/example-content-wrapper/+page@.svelte
+++ b/docs/src/routes/(docs)/components/header-navigation/example-content-wrapper/+page@.svelte
@@ -4,18 +4,17 @@ layout at (docs)/+layout.svelte.
 See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-of-layouts
 -->
 
-<script context="module">
+<script module>
   export const breadcrumb = "Header content wrapper visueel voorbeeld";
 </script>
 
-<script>
-  import { base } from "$app/paths";
+<script lang="ts">
   import { onMount } from "svelte";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
   import SiteNavLinks from "$lib/SiteNavLinks.svelte";
   import DefaultFooter from "$lib/DefaultFooter.svelte";
-  import { initCollapsible } from "$lib/manon.js";
+  import { initCollapsible } from "$lib/manon";
   onMount(initCollapsible);
 </script>
 
diff --git a/docs/src/routes/(docs)/components/header-navigation/example-form-button/+page@.svelte b/docs/src/routes/(docs)/components/header-navigation/example-form-button/+page@.svelte
index 9deeb2e3..ff81f5b3 100644
--- a/docs/src/routes/(docs)/components/header-navigation/example-form-button/+page@.svelte
+++ b/docs/src/routes/(docs)/components/header-navigation/example-form-button/+page@.svelte
@@ -4,18 +4,17 @@ layout at (docs)/+layout.svelte.
 See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-of-layouts
 -->
 
-<script context="module">
+<script module>
   export const breadcrumb = "Header met navigatie met meerdere menus en form button";
 </script>
 
-<script>
-  import { base } from "$app/paths";
+<script lang="ts">
   import { onMount } from "svelte";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
   import SiteNavLinks from "$lib/SiteNavLinks.svelte";
   import DefaultFooter from "$lib/DefaultFooter.svelte";
-  import { initCollapsible } from "$lib/manon.js";
+  import { initCollapsible } from "$lib/manon";
   onMount(initCollapsible);
 </script>
 
@@ -40,7 +39,7 @@ See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-
           <li>
             <form class="inline">
               <input type="hidden" name="_token" value="" />
-              <a href="#" class="button" type="submit">Logout</a>
+              <a href="./example-form-button" class="button" type="submit">Logout</a>
             </form>
           </li>
         </ul>
@@ -96,7 +95,7 @@ See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-
             </ul>
 
             <ul class="actions">
-              <li><a href="#" class="avatar">A</a></li>
+              <li><a href="./example-form-button" class="avatar">A</a></li>
               <li>
                 <form action="http://localhost/logout" method="POST" class="inline">
                   <input type="hidden" name="_token" value="">
diff --git a/docs/src/routes/(docs)/components/header-navigation/example-language-select-list/+page@.svelte b/docs/src/routes/(docs)/components/header-navigation/example-language-select-list/+page@.svelte
index 43cb70b2..944aaa19 100644
--- a/docs/src/routes/(docs)/components/header-navigation/example-language-select-list/+page@.svelte
+++ b/docs/src/routes/(docs)/components/header-navigation/example-language-select-list/+page@.svelte
@@ -4,18 +4,18 @@ layout at (docs)/+layout.svelte.
 See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-of-layouts
 -->
 
-<script context="module">
+<script module>
   export const breadcrumb = "Header met language selector list";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import { onMount } from "svelte";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
   import SiteNavLinks from "$lib/SiteNavLinks.svelte";
   import DefaultFooter from "$lib/DefaultFooter.svelte";
-  import { initCollapsible } from "$lib/manon.js";
+  import { initCollapsible } from "$lib/manon";
   onMount(initCollapsible);
 </script>
 
diff --git a/docs/src/routes/(docs)/components/header-navigation/example-logo-above/+page@.svelte b/docs/src/routes/(docs)/components/header-navigation/example-logo-above/+page@.svelte
index f9931e8b..bdc0bbd5 100644
--- a/docs/src/routes/(docs)/components/header-navigation/example-logo-above/+page@.svelte
+++ b/docs/src/routes/(docs)/components/header-navigation/example-logo-above/+page@.svelte
@@ -4,18 +4,18 @@ layout at (docs)/+layout.svelte.
 See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-of-layouts
 -->
 
-<script context="module">
+<script module>
   export const breadcrumb = "Header met logo bovenaan";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import { onMount } from "svelte";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
   import SiteNavLinks from "$lib/SiteNavLinks.svelte";
   import DefaultFooter from "$lib/DefaultFooter.svelte";
-  import { initCollapsible } from "$lib/manon.js";
+  import { initCollapsible } from "$lib/manon";
   onMount(initCollapsible);
 </script>
 
diff --git a/docs/src/routes/(docs)/components/header-navigation/example-logo/+page@.svelte b/docs/src/routes/(docs)/components/header-navigation/example-logo/+page@.svelte
index 9ef52801..0f805e6e 100644
--- a/docs/src/routes/(docs)/components/header-navigation/example-logo/+page@.svelte
+++ b/docs/src/routes/(docs)/components/header-navigation/example-logo/+page@.svelte
@@ -4,18 +4,18 @@ layout at (docs)/+layout.svelte.
 See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-of-layouts
 -->
 
-<script context="module">
+<script module>
   export const breadcrumb = "Header voorbeeld met logo";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import { onMount } from "svelte";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
   import SiteNavLinks from "$lib/SiteNavLinks.svelte";
   import DefaultFooter from "$lib/DefaultFooter.svelte";
-  import { initCollapsible } from "$lib/manon.js";
+  import { initCollapsible } from "$lib/manon";
   onMount(initCollapsible);
 </script>
 
diff --git a/docs/src/routes/(docs)/components/header-navigation/example-multiple-menus/+page@.svelte b/docs/src/routes/(docs)/components/header-navigation/example-multiple-menus/+page@.svelte
index 6a4f5453..7ddbe2d0 100644
--- a/docs/src/routes/(docs)/components/header-navigation/example-multiple-menus/+page@.svelte
+++ b/docs/src/routes/(docs)/components/header-navigation/example-multiple-menus/+page@.svelte
@@ -4,18 +4,17 @@ layout at (docs)/+layout.svelte.
 See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-of-layouts
 -->
 
-<script context="module">
+<script module>
   export const breadcrumb = "Header met navigatie met meerdere menus";
 </script>
 
-<script>
-  import { base } from "$app/paths";
+<script lang="ts">
   import { onMount } from "svelte";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
   import SiteNavLinks from "$lib/SiteNavLinks.svelte";
   import DefaultFooter from "$lib/DefaultFooter.svelte";
-  import { initCollapsible } from "$lib/manon.js";
+  import { initCollapsible } from "$lib/manon";
   onMount(initCollapsible);
 </script>
 
diff --git a/docs/src/routes/(docs)/components/header-navigation/example-search/+page@.svelte b/docs/src/routes/(docs)/components/header-navigation/example-search/+page@.svelte
index 615ad435..eb6aa089 100644
--- a/docs/src/routes/(docs)/components/header-navigation/example-search/+page@.svelte
+++ b/docs/src/routes/(docs)/components/header-navigation/example-search/+page@.svelte
@@ -4,18 +4,17 @@ layout at (docs)/+layout.svelte.
 See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-of-layouts
 -->
 
-<script context="module">
+<script module>
   export const breadcrumb = "Header met navigatie met een zoekveld";
 </script>
 
-<script>
-  import { base } from "$app/paths";
+<script lang="ts">
   import { onMount } from "svelte";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
   import SiteNavLinks from "$lib/SiteNavLinks.svelte";
   import DefaultFooter from "$lib/DefaultFooter.svelte";
-  import { initCollapsible } from "$lib/manon.js";
+  import { initCollapsible } from "$lib/manon";
   onMount(initCollapsible);
 </script>
 
diff --git a/docs/src/routes/(docs)/components/header-navigation/example/+page@.svelte b/docs/src/routes/(docs)/components/header-navigation/example/+page@.svelte
index 12edb444..ad914a4c 100644
--- a/docs/src/routes/(docs)/components/header-navigation/example/+page@.svelte
+++ b/docs/src/routes/(docs)/components/header-navigation/example/+page@.svelte
@@ -4,17 +4,17 @@ layout at (docs)/+layout.svelte.
 See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-of-layouts
 -->
 
-<script context="module">
+<script module>
   export const breadcrumb = "Header visueel voorbeeld";
 </script>
 
-<script>
+<script lang="ts">
   import { onMount } from "svelte";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
   import SiteNavLinks from "$lib/SiteNavLinks.svelte";
   import DefaultFooter from "$lib/DefaultFooter.svelte";
-  import { initCollapsible } from "$lib/manon.js";
+  import { initCollapsible } from "$lib/manon";
   onMount(initCollapsible);
 </script>
 
diff --git a/docs/src/routes/(docs)/components/heading-base-set/+page.svelte b/docs/src/routes/(docs)/components/heading-base-set/+page.svelte
index 4ce0fbe9..cc23f7b8 100644
--- a/docs/src/routes/(docs)/components/heading-base-set/+page.svelte
+++ b/docs/src/routes/(docs)/components/heading-base-set/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Titel basisset";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/headings-test/+page.svelte b/docs/src/routes/(docs)/components/headings-test/+page.svelte
index e0592f76..68d840a3 100644
--- a/docs/src/routes/(docs)/components/headings-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/headings-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Titel testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/headings/+page.svelte b/docs/src/routes/(docs)/components/headings/+page.svelte
index 8317d9aa..3fa82dc6 100644
--- a/docs/src/routes/(docs)/components/headings/+page.svelte
+++ b/docs/src/routes/(docs)/components/headings/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Titel";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/hidden/+page.svelte b/docs/src/routes/(docs)/components/hidden/+page.svelte
index 9f1806d6..fb850902 100644
--- a/docs/src/routes/(docs)/components/hidden/+page.svelte
+++ b/docs/src/routes/(docs)/components/hidden/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Verbergen";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/horizontal-center-test/+page.svelte b/docs/src/routes/(docs)/components/horizontal-center-test/+page.svelte
index c043a99f..1dd1bbb9 100644
--- a/docs/src/routes/(docs)/components/horizontal-center-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/horizontal-center-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Horizontaal gecentreerd testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/horizontal-center/+page.svelte b/docs/src/routes/(docs)/components/horizontal-center/+page.svelte
index 6c7842bc..49448aa2 100644
--- a/docs/src/routes/(docs)/components/horizontal-center/+page.svelte
+++ b/docs/src/routes/(docs)/components/horizontal-center/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Horizontaal gecentreerd";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/horizontal-scroll-test/+page.svelte b/docs/src/routes/(docs)/components/horizontal-scroll-test/+page.svelte
index 72a5dc6f..0f1ada04 100644
--- a/docs/src/routes/(docs)/components/horizontal-scroll-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/horizontal-scroll-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Horizontale scroll testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/horizontal-scroll/+page.svelte b/docs/src/routes/(docs)/components/horizontal-scroll/+page.svelte
index 2fcacd4d..1c682fe0 100644
--- a/docs/src/routes/(docs)/components/horizontal-scroll/+page.svelte
+++ b/docs/src/routes/(docs)/components/horizontal-scroll/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Horizontale scroll";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/horizontal-view-test/+page.svelte b/docs/src/routes/(docs)/components/horizontal-view-test/+page.svelte
index d914cf8a..a3d65d4a 100644
--- a/docs/src/routes/(docs)/components/horizontal-view-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/horizontal-view-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Horizontaal uitgelijnd testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/horizontal-view/+page.svelte b/docs/src/routes/(docs)/components/horizontal-view/+page.svelte
index 11b7e3e0..3abc41ab 100644
--- a/docs/src/routes/(docs)/components/horizontal-view/+page.svelte
+++ b/docs/src/routes/(docs)/components/horizontal-view/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Horizontaal uitgelijnd";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/icons/+page.svelte b/docs/src/routes/(docs)/components/icons/+page.svelte
index 237236dc..ceee9af6 100644
--- a/docs/src/routes/(docs)/components/icons/+page.svelte
+++ b/docs/src/routes/(docs)/components/icons/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Iconen";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
@@ -357,7 +357,7 @@
         <ul id="default-iconset" class="background-color-offset grid-iconset">
           {#each icons as icon}
             <li>
-              <span class="icon icon-{icon}" aria-hidden="true" />
+              <span class="icon icon-{icon}" aria-hidden="true"></span>
               <code lang="en">{icon}</code>
             </li>
           {/each}
diff --git a/docs/src/routes/(docs)/components/icons/add-set/+page.svelte b/docs/src/routes/(docs)/components/icons/add-set/+page.svelte
index 9433bba4..87e33513 100644
--- a/docs/src/routes/(docs)/components/icons/add-set/+page.svelte
+++ b/docs/src/routes/(docs)/components/icons/add-set/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Icoon-set toevoegen";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/icons/test/+page.svelte b/docs/src/routes/(docs)/components/icons/test/+page.svelte
index 3dd59c72..484acc5a 100644
--- a/docs/src/routes/(docs)/components/icons/test/+page.svelte
+++ b/docs/src/routes/(docs)/components/icons/test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Iconen testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/image-cover-test/+page.svelte b/docs/src/routes/(docs)/components/image-cover-test/+page.svelte
index c42a279b..977efe1c 100644
--- a/docs/src/routes/(docs)/components/image-cover-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/image-cover-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Cover-afbeelding testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/image-cover/+page.svelte b/docs/src/routes/(docs)/components/image-cover/+page.svelte
index 8e6d41b1..b80ba95d 100644
--- a/docs/src/routes/(docs)/components/image-cover/+page.svelte
+++ b/docs/src/routes/(docs)/components/image-cover/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Cover-afbeelding";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/image-icon/+page.svelte b/docs/src/routes/(docs)/components/image-icon/+page.svelte
index fc8f99ce..92239d10 100644
--- a/docs/src/routes/(docs)/components/image-icon/+page.svelte
+++ b/docs/src/routes/(docs)/components/image-icon/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Icoon-afbeelding";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/image-round-test/+page.svelte b/docs/src/routes/(docs)/components/image-round-test/+page.svelte
index 1922a0b4..33525f22 100644
--- a/docs/src/routes/(docs)/components/image-round-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/image-round-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Ronde afbeelding testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/image-round/+page.svelte b/docs/src/routes/(docs)/components/image-round/+page.svelte
index 31d8d9f7..4978c55c 100644
--- a/docs/src/routes/(docs)/components/image-round/+page.svelte
+++ b/docs/src/routes/(docs)/components/image-round/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Ronde afbeelding";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/image-square-test/+page.svelte b/docs/src/routes/(docs)/components/image-square-test/+page.svelte
index 9f81da3d..b6f98378 100644
--- a/docs/src/routes/(docs)/components/image-square-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/image-square-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Vierkante afbeelding testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/image-square/+page.svelte b/docs/src/routes/(docs)/components/image-square/+page.svelte
index 298c5add..06d1892d 100644
--- a/docs/src/routes/(docs)/components/image-square/+page.svelte
+++ b/docs/src/routes/(docs)/components/image-square/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Vierkante afbeelding";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/language-selector-test/+page.svelte b/docs/src/routes/(docs)/components/language-selector-test/+page.svelte
index 0dccf0ef..7e87e436 100644
--- a/docs/src/routes/(docs)/components/language-selector-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/language-selector-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Taalselectie testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/language-selector/+page.svelte b/docs/src/routes/(docs)/components/language-selector/+page.svelte
index 6b55f39f..5437e38f 100644
--- a/docs/src/routes/(docs)/components/language-selector/+page.svelte
+++ b/docs/src/routes/(docs)/components/language-selector/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Taalselectie";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/layout-authentication-test/+page.svelte b/docs/src/routes/(docs)/components/layout-authentication-test/+page.svelte
index cecc915c..56f6928b 100644
--- a/docs/src/routes/(docs)/components/layout-authentication-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/layout-authentication-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Layout authenticatie testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/layout-authentication/+page.svelte b/docs/src/routes/(docs)/components/layout-authentication/+page.svelte
index b19a492f..7c942f92 100644
--- a/docs/src/routes/(docs)/components/layout-authentication/+page.svelte
+++ b/docs/src/routes/(docs)/components/layout-authentication/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Layout authentication";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/layout-centered-test/+page.svelte b/docs/src/routes/(docs)/components/layout-centered-test/+page.svelte
index c8105f49..aaf7614d 100644
--- a/docs/src/routes/(docs)/components/layout-centered-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/layout-centered-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Layout gecentreerd testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/layout-centered/+page.svelte b/docs/src/routes/(docs)/components/layout-centered/+page.svelte
index e7738e47..6dd166b6 100644
--- a/docs/src/routes/(docs)/components/layout-centered/+page.svelte
+++ b/docs/src/routes/(docs)/components/layout-centered/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Layout gecentreerd";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/layout-column-2-test/+page.svelte b/docs/src/routes/(docs)/components/layout-column-2-test/+page.svelte
index bffdf960..e81954a9 100644
--- a/docs/src/routes/(docs)/components/layout-column-2-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/layout-column-2-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Layout twee kolommen testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/layout-column-2/+page.svelte b/docs/src/routes/(docs)/components/layout-column-2/+page.svelte
index 468671ea..fe2d471a 100644
--- a/docs/src/routes/(docs)/components/layout-column-2/+page.svelte
+++ b/docs/src/routes/(docs)/components/layout-column-2/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Layout twee kolommen";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/layout-column-3-test/+page.svelte b/docs/src/routes/(docs)/components/layout-column-3-test/+page.svelte
index ecc02f45..838d8077 100644
--- a/docs/src/routes/(docs)/components/layout-column-3-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/layout-column-3-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Layout drie kolommen testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/layout-column-3/+page.svelte b/docs/src/routes/(docs)/components/layout-column-3/+page.svelte
index 8fbb67f2..6dce94f6 100644
--- a/docs/src/routes/(docs)/components/layout-column-3/+page.svelte
+++ b/docs/src/routes/(docs)/components/layout-column-3/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Layout drie kolommen";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/layout-column-4-test/+page.svelte b/docs/src/routes/(docs)/components/layout-column-4-test/+page.svelte
index f3b93f66..25063d39 100644
--- a/docs/src/routes/(docs)/components/layout-column-4-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/layout-column-4-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Layout vier kolommen testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/layout-column-4/+page.svelte b/docs/src/routes/(docs)/components/layout-column-4/+page.svelte
index 5369c97e..2f50b872 100644
--- a/docs/src/routes/(docs)/components/layout-column-4/+page.svelte
+++ b/docs/src/routes/(docs)/components/layout-column-4/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Layout vier kolommen";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/layout-fifty-fifty-test/+page.svelte b/docs/src/routes/(docs)/components/layout-fifty-fifty-test/+page.svelte
index cdb06453..78276f74 100644
--- a/docs/src/routes/(docs)/components/layout-fifty-fifty-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/layout-fifty-fifty-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Layout fifty-fifty testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/layout-fifty-fifty/+page.svelte b/docs/src/routes/(docs)/components/layout-fifty-fifty/+page.svelte
index 6b968c6b..ec5a091e 100644
--- a/docs/src/routes/(docs)/components/layout-fifty-fifty/+page.svelte
+++ b/docs/src/routes/(docs)/components/layout-fifty-fifty/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Layout fifty-fifty";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/layout-form/+page.svelte b/docs/src/routes/(docs)/components/layout-form/+page.svelte
index b71b643e..0d3017e4 100644
--- a/docs/src/routes/(docs)/components/layout-form/+page.svelte
+++ b/docs/src/routes/(docs)/components/layout-form/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Layout form";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/layout-one-third-two-thirds-test/+page.svelte b/docs/src/routes/(docs)/components/layout-one-third-two-thirds-test/+page.svelte
index d2a81a3e..110d5b86 100644
--- a/docs/src/routes/(docs)/components/layout-one-third-two-thirds-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/layout-one-third-two-thirds-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Layout eenderde tweederde testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/layout-one-third-two-thirds/+page.svelte b/docs/src/routes/(docs)/components/layout-one-third-two-thirds/+page.svelte
index 69aa90e7..2b5b282a 100644
--- a/docs/src/routes/(docs)/components/layout-one-third-two-thirds/+page.svelte
+++ b/docs/src/routes/(docs)/components/layout-one-third-two-thirds/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Layout";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/layout-set/+page.svelte b/docs/src/routes/(docs)/components/layout-set/+page.svelte
index b415e210..68b1e2c5 100644
--- a/docs/src/routes/(docs)/components/layout-set/+page.svelte
+++ b/docs/src/routes/(docs)/components/layout-set/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Layout set";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/layout-two-thirds-one-third-test/+page.svelte b/docs/src/routes/(docs)/components/layout-two-thirds-one-third-test/+page.svelte
index 8df90c6a..5e95756f 100644
--- a/docs/src/routes/(docs)/components/layout-two-thirds-one-third-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/layout-two-thirds-one-third-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Layout tweederde eenderde testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/layout-two-thirds-one-third/+page.svelte b/docs/src/routes/(docs)/components/layout-two-thirds-one-third/+page.svelte
index cc9fd815..efdd69b4 100644
--- a/docs/src/routes/(docs)/components/layout-two-thirds-one-third/+page.svelte
+++ b/docs/src/routes/(docs)/components/layout-two-thirds-one-third/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Layout";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/link/+page.svelte b/docs/src/routes/(docs)/components/link/+page.svelte
index c6cc5b21..882c6fda 100644
--- a/docs/src/routes/(docs)/components/link/+page.svelte
+++ b/docs/src/routes/(docs)/components/link/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Links";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/login-meta-test/+page.svelte b/docs/src/routes/(docs)/components/login-meta-test/+page.svelte
index 14252000..106b2541 100644
--- a/docs/src/routes/(docs)/components/login-meta-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/login-meta-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Ingelogd als testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/login-meta/+page.svelte b/docs/src/routes/(docs)/components/login-meta/+page.svelte
index 14a9d4e7..22479732 100644
--- a/docs/src/routes/(docs)/components/login-meta/+page.svelte
+++ b/docs/src/routes/(docs)/components/login-meta/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Ingelogd als";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/logo/+page.svelte b/docs/src/routes/(docs)/components/logo/+page.svelte
index 638c6bfb..f1a8d019 100644
--- a/docs/src/routes/(docs)/components/logo/+page.svelte
+++ b/docs/src/routes/(docs)/components/logo/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Logo";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/main-content-wrapper/+page.svelte b/docs/src/routes/(docs)/components/main-content-wrapper/+page.svelte
index 670718ca..0f933007 100644
--- a/docs/src/routes/(docs)/components/main-content-wrapper/+page.svelte
+++ b/docs/src/routes/(docs)/components/main-content-wrapper/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Main content wrapper";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/main-test-content-wrapper-div/+page.svelte b/docs/src/routes/(docs)/components/main-test-content-wrapper-div/+page.svelte
index 522ef5a7..40c6c7fa 100644
--- a/docs/src/routes/(docs)/components/main-test-content-wrapper-div/+page.svelte
+++ b/docs/src/routes/(docs)/components/main-test-content-wrapper-div/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Main testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/main-test-direct/+page.svelte b/docs/src/routes/(docs)/components/main-test-direct/+page.svelte
index 191ce30d..cacd8532 100644
--- a/docs/src/routes/(docs)/components/main-test-direct/+page.svelte
+++ b/docs/src/routes/(docs)/components/main-test-direct/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Main testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/main-test-div/+page.svelte b/docs/src/routes/(docs)/components/main-test-div/+page.svelte
index 9ea9eec3..0b299f61 100644
--- a/docs/src/routes/(docs)/components/main-test-div/+page.svelte
+++ b/docs/src/routes/(docs)/components/main-test-div/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Main testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/main-test/+page.svelte b/docs/src/routes/(docs)/components/main-test/+page.svelte
index aaecf6f8..0182f2ce 100644
--- a/docs/src/routes/(docs)/components/main-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/main-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Main testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/main/+page.svelte b/docs/src/routes/(docs)/components/main/+page.svelte
index 8f41be41..c6ff0677 100644
--- a/docs/src/routes/(docs)/components/main/+page.svelte
+++ b/docs/src/routes/(docs)/components/main/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Main";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/max-line-length/+page.svelte b/docs/src/routes/(docs)/components/max-line-length/+page.svelte
index 71c12e23..d937521a 100644
--- a/docs/src/routes/(docs)/components/max-line-length/+page.svelte
+++ b/docs/src/routes/(docs)/components/max-line-length/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Maximale regellengte";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/message-counter/+page.svelte b/docs/src/routes/(docs)/components/message-counter/+page.svelte
index 48b3f22d..ec8d19e9 100644
--- a/docs/src/routes/(docs)/components/message-counter/+page.svelte
+++ b/docs/src/routes/(docs)/components/message-counter/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Notificatie-teller";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/navigation/+page.svelte b/docs/src/routes/(docs)/components/navigation/+page.svelte
index 49cb0fe1..aeb0dfc7 100644
--- a/docs/src/routes/(docs)/components/navigation/+page.svelte
+++ b/docs/src/routes/(docs)/components/navigation/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Links";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/nota-bene-test/+page.svelte b/docs/src/routes/(docs)/components/nota-bene-test/+page.svelte
index 714b9e25..bf63f589 100644
--- a/docs/src/routes/(docs)/components/nota-bene-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/nota-bene-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Nota bene testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/nota-bene/+page.svelte b/docs/src/routes/(docs)/components/nota-bene/+page.svelte
index dd84274d..49d80803 100644
--- a/docs/src/routes/(docs)/components/nota-bene/+page.svelte
+++ b/docs/src/routes/(docs)/components/nota-bene/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Nota bene";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/notification-confirmation/+page.svelte b/docs/src/routes/(docs)/components/notification-confirmation/+page.svelte
index 0fb49622..4e91508a 100644
--- a/docs/src/routes/(docs)/components/notification-confirmation/+page.svelte
+++ b/docs/src/routes/(docs)/components/notification-confirmation/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Bevestiging";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/notification-error/+page.svelte b/docs/src/routes/(docs)/components/notification-error/+page.svelte
index e592ef64..e0353d31 100644
--- a/docs/src/routes/(docs)/components/notification-error/+page.svelte
+++ b/docs/src/routes/(docs)/components/notification-error/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Foutmelding";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/notification-explanation/+page.svelte b/docs/src/routes/(docs)/components/notification-explanation/+page.svelte
index d8b5c02b..7843fae7 100644
--- a/docs/src/routes/(docs)/components/notification-explanation/+page.svelte
+++ b/docs/src/routes/(docs)/components/notification-explanation/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Toelichting";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/notification-system-message/+page.svelte b/docs/src/routes/(docs)/components/notification-system-message/+page.svelte
index b0b918da..8094fb61 100644
--- a/docs/src/routes/(docs)/components/notification-system-message/+page.svelte
+++ b/docs/src/routes/(docs)/components/notification-system-message/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Systeembericht";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/notification-warning/+page.svelte b/docs/src/routes/(docs)/components/notification-warning/+page.svelte
index 9cdeecee..c274d052 100644
--- a/docs/src/routes/(docs)/components/notification-warning/+page.svelte
+++ b/docs/src/routes/(docs)/components/notification-warning/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Waarschuwing";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/notifications-block-element-test/+page.svelte b/docs/src/routes/(docs)/components/notifications-block-element-test/+page.svelte
index bb290127..c98fe24d 100644
--- a/docs/src/routes/(docs)/components/notifications-block-element-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/notifications-block-element-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Blok-element testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/notifications-block-element/+page.svelte b/docs/src/routes/(docs)/components/notifications-block-element/+page.svelte
index 39a39a0f..96361c26 100644
--- a/docs/src/routes/(docs)/components/notifications-block-element/+page.svelte
+++ b/docs/src/routes/(docs)/components/notifications-block-element/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Blok-element";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/notifications-page-example-confirmation/+page.svelte b/docs/src/routes/(docs)/components/notifications-page-example-confirmation/+page.svelte
index d6da7c41..e5ed9f50 100644
--- a/docs/src/routes/(docs)/components/notifications-page-example-confirmation/+page.svelte
+++ b/docs/src/routes/(docs)/components/notifications-page-example-confirmation/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Pagina-notificatie bevestiging voorbeeld";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/notifications-page-example-error/+page.svelte b/docs/src/routes/(docs)/components/notifications-page-example-error/+page.svelte
index 725375b4..d0ec4543 100644
--- a/docs/src/routes/(docs)/components/notifications-page-example-error/+page.svelte
+++ b/docs/src/routes/(docs)/components/notifications-page-example-error/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Pagina-notificatie foutmelding voorbeeld";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/notifications-page-example-explanation/+page.svelte b/docs/src/routes/(docs)/components/notifications-page-example-explanation/+page.svelte
index 5187c9cf..7921e6ef 100644
--- a/docs/src/routes/(docs)/components/notifications-page-example-explanation/+page.svelte
+++ b/docs/src/routes/(docs)/components/notifications-page-example-explanation/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Pagina-notificatie toelichting voorbeeld";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/notifications-page-example-system/+page.svelte b/docs/src/routes/(docs)/components/notifications-page-example-system/+page.svelte
index b7e9760f..e76f21a5 100644
--- a/docs/src/routes/(docs)/components/notifications-page-example-system/+page.svelte
+++ b/docs/src/routes/(docs)/components/notifications-page-example-system/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Pagina-notificatie systeembericht voorbeeld";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/notifications-page-example-warning/+page.svelte b/docs/src/routes/(docs)/components/notifications-page-example-warning/+page.svelte
index 34a48ebe..b511db63 100644
--- a/docs/src/routes/(docs)/components/notifications-page-example-warning/+page.svelte
+++ b/docs/src/routes/(docs)/components/notifications-page-example-warning/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Pagina-notificatie waarschuwing voorbeeld";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/notifications-page/+page.svelte b/docs/src/routes/(docs)/components/notifications-page/+page.svelte
index d8aa23ff..a0d1f590 100644
--- a/docs/src/routes/(docs)/components/notifications-page/+page.svelte
+++ b/docs/src/routes/(docs)/components/notifications-page/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Pagina-notificatie";
 </script>
 
-<script>
+<script lang="ts">
   import SideMenu from "$lib/SideMenu.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/notifications-paragraph-test/+page.svelte b/docs/src/routes/(docs)/components/notifications-paragraph-test/+page.svelte
index 1c4f8d0a..6d045614 100644
--- a/docs/src/routes/(docs)/components/notifications-paragraph-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/notifications-paragraph-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Notifactie op een paragraaf testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/notifications-paragraph/+page.svelte b/docs/src/routes/(docs)/components/notifications-paragraph/+page.svelte
index 11d385f0..f14d8e84 100644
--- a/docs/src/routes/(docs)/components/notifications-paragraph/+page.svelte
+++ b/docs/src/routes/(docs)/components/notifications-paragraph/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Notifactie op een paragraaf";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/notifications-table-test/+page.svelte b/docs/src/routes/(docs)/components/notifications-table-test/+page.svelte
index b75c82c5..2abb7099 100644
--- a/docs/src/routes/(docs)/components/notifications-table-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/notifications-table-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Notifactie op een paragraaf testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/notifications-table/+page.svelte b/docs/src/routes/(docs)/components/notifications-table/+page.svelte
index 05817b91..6e3b1e3a 100644
--- a/docs/src/routes/(docs)/components/notifications-table/+page.svelte
+++ b/docs/src/routes/(docs)/components/notifications-table/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Notifactie binnen tabellen";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/notifications/+page.svelte b/docs/src/routes/(docs)/components/notifications/+page.svelte
index d772f550..1326ef46 100644
--- a/docs/src/routes/(docs)/components/notifications/+page.svelte
+++ b/docs/src/routes/(docs)/components/notifications/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Notificaties";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/nowrap-test/+page.svelte b/docs/src/routes/(docs)/components/nowrap-test/+page.svelte
index 05089bb6..77751323 100644
--- a/docs/src/routes/(docs)/components/nowrap-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/nowrap-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "nowrap testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/nowrap/+page.svelte b/docs/src/routes/(docs)/components/nowrap/+page.svelte
index 3bc718ad..6c58d94f 100644
--- a/docs/src/routes/(docs)/components/nowrap/+page.svelte
+++ b/docs/src/routes/(docs)/components/nowrap/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "nowrap";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/pagination-test/+page.svelte b/docs/src/routes/(docs)/components/pagination-test/+page.svelte
index f5efd894..8b11ca5f 100644
--- a/docs/src/routes/(docs)/components/pagination-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/pagination-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Paginering testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/pagination/+page.svelte b/docs/src/routes/(docs)/components/pagination/+page.svelte
index cbe9c95d..dd77402f 100644
--- a/docs/src/routes/(docs)/components/pagination/+page.svelte
+++ b/docs/src/routes/(docs)/components/pagination/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Paginering";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/paragraph-test/+page.svelte b/docs/src/routes/(docs)/components/paragraph-test/+page.svelte
index f45770f7..d39563ee 100644
--- a/docs/src/routes/(docs)/components/paragraph-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/paragraph-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Paragraaf testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/paragraph/+page.svelte b/docs/src/routes/(docs)/components/paragraph/+page.svelte
index 9e904b0a..7afe68bf 100644
--- a/docs/src/routes/(docs)/components/paragraph/+page.svelte
+++ b/docs/src/routes/(docs)/components/paragraph/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Paragraaf";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/section-content-wrapper-test/+page.svelte b/docs/src/routes/(docs)/components/section-content-wrapper-test/+page.svelte
index ea6060e6..73480ece 100644
--- a/docs/src/routes/(docs)/components/section-content-wrapper-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/section-content-wrapper-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Section content wrapper test";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/section-content-wrapper/+page.svelte b/docs/src/routes/(docs)/components/section-content-wrapper/+page.svelte
index b43e9b3d..ccc07f37 100644
--- a/docs/src/routes/(docs)/components/section-content-wrapper/+page.svelte
+++ b/docs/src/routes/(docs)/components/section-content-wrapper/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Sectie content wrapper";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/section-test/+page.svelte b/docs/src/routes/(docs)/components/section-test/+page.svelte
index a5b627c1..9d27e456 100644
--- a/docs/src/routes/(docs)/components/section-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/section-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Main testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/components/section/+page.svelte b/docs/src/routes/(docs)/components/section/+page.svelte
index 3c975d29..e18e6d4d 100644
--- a/docs/src/routes/(docs)/components/section/+page.svelte
+++ b/docs/src/routes/(docs)/components/section/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Sectie";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/sidemenu/+page.svelte b/docs/src/routes/(docs)/components/sidemenu/+page.svelte
index 72ba89bf..fa3242c6 100644
--- a/docs/src/routes/(docs)/components/sidemenu/+page.svelte
+++ b/docs/src/routes/(docs)/components/sidemenu/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Zijmenu";
 </script>
 
-<script>
+<script lang="ts">
   import SideMenu from "$lib/SideMenu.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/sidemenu/in-page-collapsible/+page.svelte b/docs/src/routes/(docs)/components/sidemenu/in-page-collapsible/+page.svelte
index 418342fd..456a3ea9 100644
--- a/docs/src/routes/(docs)/components/sidemenu/in-page-collapsible/+page.svelte
+++ b/docs/src/routes/(docs)/components/sidemenu/in-page-collapsible/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Zijmenu";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/sidemenu/in-page/+page.svelte b/docs/src/routes/(docs)/components/sidemenu/in-page/+page.svelte
index cbf07106..fa3c37bd 100644
--- a/docs/src/routes/(docs)/components/sidemenu/in-page/+page.svelte
+++ b/docs/src/routes/(docs)/components/sidemenu/in-page/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Zijmenu binnen de pagina";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/sidemenu/next-to-page-collapsible/+page@.svelte b/docs/src/routes/(docs)/components/sidemenu/next-to-page-collapsible/+page@.svelte
index be00c913..cc127d75 100644
--- a/docs/src/routes/(docs)/components/sidemenu/next-to-page-collapsible/+page@.svelte
+++ b/docs/src/routes/(docs)/components/sidemenu/next-to-page-collapsible/+page@.svelte
@@ -4,19 +4,19 @@ layout at (docs)/+layout.svelte.
 See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-of-layouts
 -->
 
-<script context="module">
+<script module>
   export const breadcrumb = "Zijmenu naast de pagina";
 </script>
 
-<script>
+<script lang="ts">
+  import type { Action } from "svelte/action";
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
   import DefaultHeader from "$lib/DefaultHeader.svelte";
   import DefaultFooter from "$lib/DefaultFooter.svelte";
 
-  /** @type {import('svelte/action').Action}  */
-  function sidemenuClass(node) {
+  const sidemenuClass: Action = (node) => {
     // Add the "sidemenu" class while this page is mounted.
     node.classList.add("sidemenu");
     return {
@@ -24,7 +24,7 @@ See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-
         node.classList.remove("sidemenu");
       },
     };
-  }
+  };
 </script>
 
 <svelte:head>
diff --git a/docs/src/routes/(docs)/components/sidemenu/next-to-page/+page@.svelte b/docs/src/routes/(docs)/components/sidemenu/next-to-page/+page@.svelte
index ae6d96c1..668633ea 100644
--- a/docs/src/routes/(docs)/components/sidemenu/next-to-page/+page@.svelte
+++ b/docs/src/routes/(docs)/components/sidemenu/next-to-page/+page@.svelte
@@ -4,19 +4,19 @@ layout at (docs)/+layout.svelte.
 See: https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-of-layouts
 -->
 
-<script context="module">
+<script module>
   export const breadcrumb = "Zijmenu naast de pagina";
 </script>
 
-<script>
+<script lang="ts">
+  import type { Action } from "svelte/action";
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
   import DefaultHeader from "$lib/DefaultHeader.svelte";
   import DefaultFooter from "$lib/DefaultFooter.svelte";
 
-  /** @type {import('svelte/action').Action}  */
-  function sidemenuClass(node) {
+  const sidemenuClass: Action = (node) => {
     // Add the "sidemenu" class while this page is mounted.
     node.classList.add("sidemenu");
     return {
diff --git a/docs/src/routes/(docs)/components/spot-large/+page.svelte b/docs/src/routes/(docs)/components/spot-large/+page.svelte
index fb2ade9d..38022bfa 100644
--- a/docs/src/routes/(docs)/components/spot-large/+page.svelte
+++ b/docs/src/routes/(docs)/components/spot-large/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Spot large";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/spot-medium/+page.svelte b/docs/src/routes/(docs)/components/spot-medium/+page.svelte
index 7365676d..53420772 100644
--- a/docs/src/routes/(docs)/components/spot-medium/+page.svelte
+++ b/docs/src/routes/(docs)/components/spot-medium/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Spot medium";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/spot-mini/+page.svelte b/docs/src/routes/(docs)/components/spot-mini/+page.svelte
index 84af7206..26751af2 100644
--- a/docs/src/routes/(docs)/components/spot-mini/+page.svelte
+++ b/docs/src/routes/(docs)/components/spot-mini/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Spot mini";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/spot-small/+page.svelte b/docs/src/routes/(docs)/components/spot-small/+page.svelte
index 69fadf89..a9ca0ca3 100644
--- a/docs/src/routes/(docs)/components/spot-small/+page.svelte
+++ b/docs/src/routes/(docs)/components/spot-small/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Spot klein";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/table-action-buttons-test/+page.svelte b/docs/src/routes/(docs)/components/table-action-buttons-test/+page.svelte
index aec78d88..1604c66d 100644
--- a/docs/src/routes/(docs)/components/table-action-buttons-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-action-buttons-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tabel met actieknoppen testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/table-action-buttons/+page.svelte b/docs/src/routes/(docs)/components/table-action-buttons/+page.svelte
index 4d410d17..607c1378 100644
--- a/docs/src/routes/(docs)/components/table-action-buttons/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-action-buttons/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tabel met actieknoppen";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/table-base/+page.svelte b/docs/src/routes/(docs)/components/table-base/+page.svelte
index a5d609d0..ea62cc00 100644
--- a/docs/src/routes/(docs)/components/table-base/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-base/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tabel basisweergave";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/table-caption-test/+page.svelte b/docs/src/routes/(docs)/components/table-caption-test/+page.svelte
index 03313f24..39ad693d 100644
--- a/docs/src/routes/(docs)/components/table-caption-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-caption-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tabel bijschrift caption testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/table-caption/+page.svelte b/docs/src/routes/(docs)/components/table-caption/+page.svelte
index f84404af..7b1d639d 100644
--- a/docs/src/routes/(docs)/components/table-caption/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-caption/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tabel bijschrift caption";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/table-checkbox-test/+page.svelte b/docs/src/routes/(docs)/components/table-checkbox-test/+page.svelte
index df22209a..c4b941f5 100644
--- a/docs/src/routes/(docs)/components/table-checkbox-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-checkbox-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tabel met checkbox testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/table-checkbox/+page.svelte b/docs/src/routes/(docs)/components/table-checkbox/+page.svelte
index 73f22101..583d1cc3 100644
--- a/docs/src/routes/(docs)/components/table-checkbox/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-checkbox/+page.svelte
@@ -1,15 +1,16 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tabelrij met checkbox";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
-  let lorem = false;
-  let ipsum = false;
-  let dolor = false;
-  $: allSelected = lorem && ipsum && dolor;
+
+  let lorem = $state(false);
+  let ipsum = $state(false);
+  let dolor = $state(false);
+  let allSelected = $derived(lorem && ipsum && dolor);
   const toggleAll = () => {
     lorem = ipsum = dolor = !(lorem && ipsum && dolor);
   };
@@ -118,7 +119,7 @@
                 <tr>
                   <th scope="col">
                     <span class="visually-hidden">Selectie</span>
-                    <input type="checkbox" bind:checked={allSelected} on:change={toggleAll} />
+                    <input type="checkbox" checked={allSelected} onchange={toggleAll} />
                   </th>
                   <th scope="col">Naam</th>
                   <th scope="col">Actie</th>
diff --git a/docs/src/routes/(docs)/components/table-condensed-test/+page.svelte b/docs/src/routes/(docs)/components/table-condensed-test/+page.svelte
index fcfe0a12..07d84b3f 100644
--- a/docs/src/routes/(docs)/components/table-condensed-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-condensed-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Gecomprimeerde weergave testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/table-condensed/+page.svelte b/docs/src/routes/(docs)/components/table-condensed/+page.svelte
index 2627534b..b347a433 100644
--- a/docs/src/routes/(docs)/components/table-condensed/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-condensed/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Gecomprimeerde weergave";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/table-expando-row/+page.svelte b/docs/src/routes/(docs)/components/table-expando-row/+page.svelte
index 016679d1..3eba2d90 100644
--- a/docs/src/routes/(docs)/components/table-expando-row/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-expando-row/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Uitklapbare tabelrij";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/table-multiple-columns-test/+page.svelte b/docs/src/routes/(docs)/components/table-multiple-columns-test/+page.svelte
index 10268d83..7bda234c 100644
--- a/docs/src/routes/(docs)/components/table-multiple-columns-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-multiple-columns-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tabeldata over meerdere kolommen testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/table-multiple-columns/+page.svelte b/docs/src/routes/(docs)/components/table-multiple-columns/+page.svelte
index 813dca9d..55d19cdc 100644
--- a/docs/src/routes/(docs)/components/table-multiple-columns/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-multiple-columns/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tabeldata over meerdere kolommen";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/table-multiple-rows-test/+page.svelte b/docs/src/routes/(docs)/components/table-multiple-rows-test/+page.svelte
index bec6aca0..dc9e6400 100644
--- a/docs/src/routes/(docs)/components/table-multiple-rows-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-multiple-rows-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tabeldata over meerdere rijen testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/table-multiple-rows/+page.svelte b/docs/src/routes/(docs)/components/table-multiple-rows/+page.svelte
index bb915a32..79a46d2f 100644
--- a/docs/src/routes/(docs)/components/table-multiple-rows/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-multiple-rows/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tabeldata over meerdere rijen";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/table-notifications-test/+page.svelte b/docs/src/routes/(docs)/components/table-notifications-test/+page.svelte
index 23d04d52..ebdea9dd 100644
--- a/docs/src/routes/(docs)/components/table-notifications-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-notifications-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Meldingen op tabel-elementen testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/table-notifications/+page.svelte b/docs/src/routes/(docs)/components/table-notifications/+page.svelte
index 5f481289..414aa63f 100644
--- a/docs/src/routes/(docs)/components/table-notifications/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-notifications/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Meldingen op tabel-elementen";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/table-numerical-data-test/+page.svelte b/docs/src/routes/(docs)/components/table-numerical-data-test/+page.svelte
index 68e955bb..40c5dbd8 100644
--- a/docs/src/routes/(docs)/components/table-numerical-data-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-numerical-data-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tabel numerieke data testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/table-numerical-data/+page.svelte b/docs/src/routes/(docs)/components/table-numerical-data/+page.svelte
index 20a6b262..190be979 100644
--- a/docs/src/routes/(docs)/components/table-numerical-data/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-numerical-data/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tabel met numerieke data";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/table-scope-test/+page.svelte b/docs/src/routes/(docs)/components/table-scope-test/+page.svelte
index 0a39c1e9..4c068636 100644
--- a/docs/src/routes/(docs)/components/table-scope-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-scope-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tabelrichting testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/table-scope/+page.svelte b/docs/src/routes/(docs)/components/table-scope/+page.svelte
index a5b62862..3cb585dd 100644
--- a/docs/src/routes/(docs)/components/table-scope/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-scope/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tabelrichting";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/table-sortable/+page.svelte b/docs/src/routes/(docs)/components/table-sortable/+page.svelte
index ca5ee821..906a7767 100644
--- a/docs/src/routes/(docs)/components/table-sortable/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-sortable/+page.svelte
@@ -1,11 +1,13 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Sorteerbare tabel";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
 
+  type Column = "firstname" | "lastname" | "age";
+
   const demoTableRows = [
     { firstname: "Janine", lastname: "Hinde", age: 16 },
     { firstname: "Henk", lastname: "de Vries", age: 8 },
@@ -13,30 +15,29 @@
     { firstname: "John", lastname: "Doe", age: 64 },
   ];
 
-  /** @type {'firstname'|'lastname'|'age'|undefined} */
-  let sortColumn = undefined;
+  let sortColumn: Column | undefined = $state(undefined);
 
-  /** @type {'ascending'|'descending'} */
-  let sortDirection = "ascending";
+  let sortDirection: "ascending" | "descending" = $state("ascending");
 
-  $: numeric = sortColumn === "age";
+  let numeric = $derived(sortColumn === "age");
 
-  $: sortedDemoTableRows = demoTableRows
-    .slice()
-    .sort(
-      sortDirection === "ascending"
-        ? (a, b) =>
-            sortColumn
-              ? ("" + a[sortColumn]).localeCompare(String(b[sortColumn]), undefined, { numeric })
-              : 0
-        : (a, b) =>
-            sortColumn
-              ? ("" + b[sortColumn]).localeCompare(String(a[sortColumn]), undefined, { numeric })
-              : 0,
-    );
+  let sortedDemoTableRows = $derived(
+    demoTableRows
+      .slice()
+      .sort(
+        sortDirection === "ascending"
+          ? (a, b) =>
+              sortColumn
+                ? ("" + a[sortColumn]).localeCompare(String(b[sortColumn]), undefined, { numeric })
+                : 0
+          : (a, b) =>
+              sortColumn
+                ? ("" + b[sortColumn]).localeCompare(String(a[sortColumn]), undefined, { numeric })
+                : 0,
+      ),
+  );
 
-  /** @type {(column: 'firstname'|'lastname'|'age') => void} */
-  const toggleSort = (column) => {
+  const toggleSort: (column: Column) => void = (column): void => {
     if (column === sortColumn) {
       sortDirection = sortDirection === "ascending" ? "descending" : "ascending";
     } else {
@@ -184,7 +185,7 @@
             <thead>
               <tr>
                 <th scope="col" aria-sort={sortColumn === "firstname" ? sortDirection : undefined}>
-                  <button class="sort" on:click={() => toggleSort("firstname")}>
+                  <button class="sort" onclick={() => toggleSort("firstname")}>
                     Voornaam
                     <span
                       aria-hidden="true"
@@ -194,7 +195,7 @@
                         sortDirection === "ascending"}
                       class:icon-descending={sortColumn === "firstname" &&
                         sortDirection === "descending"}
-                    />
+                    ></span>
                   </button>
                 </th>
                 <th
@@ -202,7 +203,7 @@
                   abbr="Achternaam"
                   aria-sort={sortColumn === "lastname" ? sortDirection : undefined}
                 >
-                  <button class="sort" on:click={() => toggleSort("lastname")}>
+                  <button class="sort" onclick={() => toggleSort("lastname")}>
                     Achternaam (met tussenvoegsel)
                     <span
                       aria-hidden="true"
@@ -212,7 +213,7 @@
                         sortDirection === "ascending"}
                       class:icon-descending={sortColumn === "lastname" &&
                         sortDirection === "descending"}
-                    />
+                    ></span>
                   </button>
                 </th>
                 <th
@@ -220,7 +221,7 @@
                   class="number"
                   aria-sort={sortColumn === "age" ? sortDirection : undefined}
                 >
-                  <button class="sort" on:click={() => toggleSort("age")}>
+                  <button class="sort" onclick={() => toggleSort("age")}>
                     Leeftijd
                     <span
                       aria-hidden="true"
@@ -228,7 +229,7 @@
                       class:icon-sortable={sortColumn !== "age"}
                       class:icon-ascending={sortColumn === "age" && sortDirection === "ascending"}
                       class:icon-descending={sortColumn === "age" && sortDirection === "descending"}
-                    />
+                    ></span>
                   </button>
                 </th>
               </tr>
diff --git a/docs/src/routes/(docs)/components/table-sticky-header-test/+page.svelte b/docs/src/routes/(docs)/components/table-sticky-header-test/+page.svelte
index e5075021..30d56b44 100644
--- a/docs/src/routes/(docs)/components/table-sticky-header-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-sticky-header-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = '"Sticky header" testpagina';
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/table-sticky-header/+page.svelte b/docs/src/routes/(docs)/components/table-sticky-header/+page.svelte
index 0c8b8757..2c78c53e 100644
--- a/docs/src/routes/(docs)/components/table-sticky-header/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-sticky-header/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = '"sticky header"';
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/table-summary-test/+page.svelte b/docs/src/routes/(docs)/components/table-summary-test/+page.svelte
index 752d0ab0..e73a9bb0 100644
--- a/docs/src/routes/(docs)/components/table-summary-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-summary-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Samenvattingstabel testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/table-summary/+page.svelte b/docs/src/routes/(docs)/components/table-summary/+page.svelte
index d3fdc5ff..e35fcdf4 100644
--- a/docs/src/routes/(docs)/components/table-summary/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-summary/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Samenvattingstabel";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/table/+page.svelte b/docs/src/routes/(docs)/components/table/+page.svelte
index 5b3b4adb..864cf657 100644
--- a/docs/src/routes/(docs)/components/table/+page.svelte
+++ b/docs/src/routes/(docs)/components/table/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tabel";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/tabs-test/+page.svelte b/docs/src/routes/(docs)/components/tabs-test/+page.svelte
index 7259273c..7c4a786d 100644
--- a/docs/src/routes/(docs)/components/tabs-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/tabs-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tabbladen testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/tabs/+page.svelte b/docs/src/routes/(docs)/components/tabs/+page.svelte
index 8f02d762..c7a1329d 100644
--- a/docs/src/routes/(docs)/components/tabs/+page.svelte
+++ b/docs/src/routes/(docs)/components/tabs/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tabbladen";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/tag/+page.svelte b/docs/src/routes/(docs)/components/tag/+page.svelte
index 6de9a722..a760411b 100644
--- a/docs/src/routes/(docs)/components/tag/+page.svelte
+++ b/docs/src/routes/(docs)/components/tag/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tag";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/tags-6-3/+page.svelte b/docs/src/routes/(docs)/components/tags-6-3/+page.svelte
index fb148018..5d18b00d 100644
--- a/docs/src/routes/(docs)/components/tags-6-3/+page.svelte
+++ b/docs/src/routes/(docs)/components/tags-6-3/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tags kleurenset zes kleuren & drie tinten";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/tags-6/+page.svelte b/docs/src/routes/(docs)/components/tags-6/+page.svelte
index 21f0b76b..95179602 100644
--- a/docs/src/routes/(docs)/components/tags-6/+page.svelte
+++ b/docs/src/routes/(docs)/components/tags-6/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tags kleurenset zes kleuren";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/tags/+page.svelte b/docs/src/routes/(docs)/components/tags/+page.svelte
index d38cb4ea..53675c6a 100644
--- a/docs/src/routes/(docs)/components/tags/+page.svelte
+++ b/docs/src/routes/(docs)/components/tags/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tags";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/tile-cover-image/+page.svelte b/docs/src/routes/(docs)/components/tile-cover-image/+page.svelte
index 0bcdc198..d12db35b 100644
--- a/docs/src/routes/(docs)/components/tile-cover-image/+page.svelte
+++ b/docs/src/routes/(docs)/components/tile-cover-image/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tegelweergave met cover-afbeelding";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/tile-groups-test/+page.svelte b/docs/src/routes/(docs)/components/tile-groups-test/+page.svelte
index 4d72e4f9..1c3ff770 100644
--- a/docs/src/routes/(docs)/components/tile-groups-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/tile-groups-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tegelweergave testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/tile-groups/+page.svelte b/docs/src/routes/(docs)/components/tile-groups/+page.svelte
index 4660aea6..c7c85bc0 100644
--- a/docs/src/routes/(docs)/components/tile-groups/+page.svelte
+++ b/docs/src/routes/(docs)/components/tile-groups/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Gegroepeerde content binnen tegels";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/components/tiles-test/+page.svelte b/docs/src/routes/(docs)/components/tiles-test/+page.svelte
index aafa9934..72439666 100644
--- a/docs/src/routes/(docs)/components/tiles-test/+page.svelte
+++ b/docs/src/routes/(docs)/components/tiles-test/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tegelweergave testpagina";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/components/tiles/+page.svelte b/docs/src/routes/(docs)/components/tiles/+page.svelte
index 98dbb54e..436c4693 100644
--- a/docs/src/routes/(docs)/components/tiles/+page.svelte
+++ b/docs/src/routes/(docs)/components/tiles/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Tegelweergave";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
diff --git a/docs/src/routes/(docs)/documentation/+page.svelte b/docs/src/routes/(docs)/documentation/+page.svelte
index 5b0508dd..e6981032 100644
--- a/docs/src/routes/(docs)/documentation/+page.svelte
+++ b/docs/src/routes/(docs)/documentation/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Documentatie";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/documentation/add-js/+page.svelte b/docs/src/routes/(docs)/documentation/add-js/+page.svelte
index 40ec7f62..9f0ba500 100644
--- a/docs/src/routes/(docs)/documentation/add-js/+page.svelte
+++ b/docs/src/routes/(docs)/documentation/add-js/+page.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   export const breadcrumb = "JavaScript toevoegen";
 </script>
 
diff --git a/docs/src/routes/(docs)/documentation/import-styling/+page.svelte b/docs/src/routes/(docs)/documentation/import-styling/+page.svelte
index a02924b6..ad422813 100644
--- a/docs/src/routes/(docs)/documentation/import-styling/+page.svelte
+++ b/docs/src/routes/(docs)/documentation/import-styling/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Componenten gebruiken en styling toevoegen";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
 </script>
diff --git a/docs/src/routes/(docs)/documentation/use-css-variable/+page.svelte b/docs/src/routes/(docs)/documentation/use-css-variable/+page.svelte
index 14bd3e90..2672ac88 100644
--- a/docs/src/routes/(docs)/documentation/use-css-variable/+page.svelte
+++ b/docs/src/routes/(docs)/documentation/use-css-variable/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "CSS-variabelen gebruiken";
 </script>
 
-<script>
+<script lang="ts">
   import Code from "$lib/Code.svelte";
 </script>
 
diff --git a/docs/src/routes/(docs)/documentation/variables/+page.svelte b/docs/src/routes/(docs)/documentation/variables/+page.svelte
index 2f3757af..71c5994b 100644
--- a/docs/src/routes/(docs)/documentation/variables/+page.svelte
+++ b/docs/src/routes/(docs)/documentation/variables/+page.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Variabelen";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
 </script>
 
diff --git a/docs/src/routes/+layout.server.js b/docs/src/routes/+layout.server.js
deleted file mode 100644
index f87e2fda..00000000
--- a/docs/src/routes/+layout.server.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { loadBreadcrumbNames } from "$lib/breadcrumbs.js";
-
-/** @type {import('./$types').LayoutLoad} */
-export async function load() {
-  return {
-    breadcrumbNames: await loadBreadcrumbNames(),
-  };
-}
diff --git a/docs/src/routes/+layout.server.ts b/docs/src/routes/+layout.server.ts
new file mode 100644
index 00000000..69b37584
--- /dev/null
+++ b/docs/src/routes/+layout.server.ts
@@ -0,0 +1,8 @@
+import type { LayoutLoad } from "./$types";
+import { loadBreadcrumbNames } from "$lib/breadcrumbs";
+
+export const load: LayoutLoad = async () => {
+  return {
+    breadcrumbNames: await loadBreadcrumbNames(),
+  };
+};
diff --git a/docs/src/routes/+layout.svelte b/docs/src/routes/+layout.svelte
index 0efce446..de9d7cc6 100644
--- a/docs/src/routes/+layout.svelte
+++ b/docs/src/routes/+layout.svelte
@@ -1,7 +1,9 @@
-<script>
+<script lang="ts">
   import "$scss/main.scss";
   import { onMount } from "svelte";
-  import { initManon } from "$lib/manon.js";
+  import { initManon } from "$lib/manon";
+
+  let { children } = $props();
   onMount(initManon);
 </script>
 
@@ -10,4 +12,4 @@
   <link href="$img/favicon.ico" rel="shortcut icon" />
 </svelte:head>
 
-<slot />
+{@render children?.()}
diff --git a/docs/src/routes/+layout.js b/docs/src/routes/+layout.ts
similarity index 79%
rename from docs/src/routes/+layout.js
rename to docs/src/routes/+layout.ts
index 6fd89b7b..1a399a65 100644
--- a/docs/src/routes/+layout.js
+++ b/docs/src/routes/+layout.ts
@@ -1,11 +1,11 @@
+import type { LayoutLoad } from "./$types";
 import { redirect } from "@sveltejs/kit";
 import { redirects } from "../redirects.js";
 import { base } from "$app/paths";
 
 export const prerender = true;
 
-/** @type {import('./$types').LayoutLoad} */
-export function load({ url }) {
+export const load: LayoutLoad = ({ url }) => {
   let { pathname } = url;
   if (base && pathname.startsWith(base)) {
     pathname = pathname.replace(base, "");
@@ -13,4 +13,4 @@ export function load({ url }) {
   if (pathname in redirects) {
     return redirect(301, base + redirects[pathname]);
   }
-}
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d1980138..b277438b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,19 +25,19 @@ importers:
     devDependencies:
       '@sveltejs/adapter-static':
         specifier: ^3.0.5
-        version: 3.0.5(@sveltejs/kit@2.5.24(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.19)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2)))(svelte@4.2.19)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2)))
+        version: 3.0.5(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.3)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2)))(svelte@5.0.3)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2)))
       '@sveltejs/kit':
-        specifier: ^2.5.24
-        version: 2.5.24(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.19)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2)))(svelte@4.2.19)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2))
+        specifier: ^2.7.2
+        version: 2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.3)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2)))(svelte@5.0.3)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2))
       '@sveltejs/vite-plugin-svelte':
-        specifier: ^3.1.1
-        version: 3.1.1(svelte@4.2.19)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2))
+        specifier: ^4.0.0
+        version: 4.0.0(svelte@5.0.3)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2))
       prettier:
         specifier: ^3.3.3
         version: 3.3.3
       prettier-plugin-svelte:
         specifier: ^3.2.7
-        version: 3.2.7(prettier@3.3.3)(svelte@4.2.19)
+        version: 3.2.7(prettier@3.3.3)(svelte@5.0.3)
       rimraf:
         specifier: ^6.0.1
         version: 6.0.1
@@ -45,14 +45,14 @@ importers:
         specifier: ^1.79.4
         version: 1.79.4
       svelte:
-        specifier: ^4.2.19
-        version: 4.2.19
+        specifier: ^5.0.3
+        version: 5.0.3
       svelte-check:
-        specifier: ^4.0.4
-        version: 4.0.4(svelte@4.2.19)(typescript@5.6.2)
+        specifier: ^4.0.5
+        version: 4.0.5(svelte@5.0.3)(typescript@5.6.2)
       svelte-preprocess-import-assets:
         specifier: ^1.1.0
-        version: 1.1.0(svelte@4.2.19)
+        version: 1.1.0(svelte@5.0.3)
       typescript:
         specifier: ^5.6.2
         version: 5.6.2
@@ -311,6 +311,9 @@ packages:
   '@jridgewell/sourcemap-codec@1.4.15':
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
 
+  '@jridgewell/sourcemap-codec@1.5.0':
+    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
+
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
@@ -418,8 +421,8 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^2.0.0
 
-  '@sveltejs/kit@2.5.24':
-    resolution: {integrity: sha512-Nr2oxsCsDfEkdS/zzQQQbsPYTbu692Qs3/iE3L7VHzCVjG2+WujF9oMUozWI7GuX98KxYSoPMlAsfmDLSg44hQ==}
+  '@sveltejs/kit@2.7.2':
+    resolution: {integrity: sha512-bFwrl+0bNr0/DHQZM0INwwSPNYqDjfsKRhUoa6rj9d8tDZzszBrJ3La6/HVFxWGONEigtG+SzHXa1BEa1BLdwA==}
     engines: {node: '>=18.13'}
     hasBin: true
     peerDependencies:
@@ -427,19 +430,19 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: ^5.0.3
 
-  '@sveltejs/vite-plugin-svelte-inspector@2.1.0':
-    resolution: {integrity: sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==}
-    engines: {node: ^18.0.0 || >=20}
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.0':
+    resolution: {integrity: sha512-hBxSYW/66989cq9dN248omD/ziskSdIV1NqfuueuAI1z6jGcg14k9Zd98pDIEnoA6wC9kWUGuQ6adzBbWwQyRg==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22}
     peerDependencies:
-      '@sveltejs/vite-plugin-svelte': ^3.0.0
-      svelte: ^4.0.0 || ^5.0.0-next.0
+      '@sveltejs/vite-plugin-svelte': ^4.0.0-next.0||^4.0.0
+      svelte: ^5.0.0-next.96 || ^5.0.0
       vite: ^5.0.0
 
-  '@sveltejs/vite-plugin-svelte@3.1.1':
-    resolution: {integrity: sha512-rimpFEAboBBHIlzISibg94iP09k/KYdHgVhJlcsTfn7KMBhc70jFX/GRWkRdFCc2fdnk+4+Bdfej23cMDnJS6A==}
-    engines: {node: ^18.0.0 || >=20}
+  '@sveltejs/vite-plugin-svelte@4.0.0':
+    resolution: {integrity: sha512-kpVJwF+gNiMEsoHaw+FJL76IYiwBikkxYU83+BpqQLdVMff19KeRKLd2wisS8niNBMJ2omv5gG+iGDDwd8jzag==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22}
     peerDependencies:
-      svelte: ^4.0.0 || ^5.0.0-next.0
+      svelte: ^5.0.0-next.96 || ^5.0.0
       vite: ^5.0.0
 
   '@types/cookie@0.6.0':
@@ -451,11 +454,21 @@ packages:
   '@types/node@20.11.30':
     resolution: {integrity: sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==}
 
+  acorn-typescript@1.4.13:
+    resolution: {integrity: sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==}
+    peerDependencies:
+      acorn: '>=8.9.0'
+
   acorn@8.12.1:
     resolution: {integrity: sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==}
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  acorn@8.13.0:
+    resolution: {integrity: sha512-8zSiw54Oxrdym50NlZ9sUusyO1Z1ZchgRLWRaK6c86XJFClyCgFKetdowBg5bKxyp/u+CDBJG4Mpp0m3HLZl9w==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
   ajv@8.12.0:
     resolution: {integrity: sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==}
 
@@ -463,8 +476,8 @@ packages:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
 
-  ansi-regex@6.0.1:
-    resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
+  ansi-regex@6.1.0:
+    resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
     engines: {node: '>=12'}
 
   ansi-styles@3.2.1:
@@ -482,8 +495,9 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
-  aria-query@5.3.0:
-    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
 
   array-union@2.1.0:
     resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
@@ -493,8 +507,9 @@ packages:
     resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
     engines: {node: '>=8'}
 
-  axobject-query@4.0.0:
-    resolution: {integrity: sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==}
+  axobject-query@4.1.0:
+    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
+    engines: {node: '>= 0.4'}
 
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@@ -524,9 +539,6 @@ packages:
     resolution: {integrity: sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==}
     engines: {node: '>= 14.16.0'}
 
-  code-red@1.0.4:
-    resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==}
-
   color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
 
@@ -576,8 +588,8 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  debug@4.3.5:
-    resolution: {integrity: sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==}
+  debug@4.3.6:
+    resolution: {integrity: sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==}
     engines: {node: '>=6.0'}
     peerDependencies:
       supports-color: '*'
@@ -585,8 +597,8 @@ packages:
       supports-color:
         optional: true
 
-  debug@4.3.6:
-    resolution: {integrity: sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==}
+  debug@4.3.7:
+    resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==}
     engines: {node: '>=6.0'}
     peerDependencies:
       supports-color: '*'
@@ -598,12 +610,8 @@ packages:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
 
-  dequal@2.0.3:
-    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
-    engines: {node: '>=6'}
-
-  devalue@5.0.0:
-    resolution: {integrity: sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA==}
+  devalue@5.1.1:
+    resolution: {integrity: sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==}
 
   dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
@@ -637,6 +645,9 @@ packages:
   esm-env@1.0.0:
     resolution: {integrity: sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==}
 
+  esrap@1.2.2:
+    resolution: {integrity: sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==}
+
   estree-walker@3.0.3:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
 
@@ -835,6 +846,9 @@ packages:
   magic-string@0.30.10:
     resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
 
+  magic-string@0.30.12:
+    resolution: {integrity: sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==}
+
   magic-string@0.30.5:
     resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==}
     engines: {node: '>=12'}
@@ -876,6 +890,9 @@ packages:
   ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
 
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
   nanoid@3.3.7:
     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -908,9 +925,6 @@ packages:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
-  periscopic@3.1.0:
-    resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==}
-
   picocolors@1.1.0:
     resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==}
 
@@ -1022,9 +1036,9 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
-  sirv@2.0.4:
-    resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
-    engines: {node: '>= 10'}
+  sirv@3.0.0:
+    resolution: {integrity: sha512-BPwJGUeDaDCHihkORDchNyyTvWFhcusy1XMmhEVTQTwGeybFbp8YEmB+njbPnth1FibULBSBVwCQni25XlCUDg==}
+    engines: {node: '>=18'}
 
   slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
@@ -1116,20 +1130,14 @@ packages:
     resolution: {integrity: sha512-2rn0BZ+/f7puLOHZm1HOJfwBggfaHXUpPUSSG/SWM4TWp5KCfmNYwnC3hruy2rZlMnmWZ+QAGpZfchu3f3695A==}
     engines: {node: '>=14.18'}
 
-  svelte-check@4.0.4:
-    resolution: {integrity: sha512-AcHWIPuZb1mh/jKoIrww0ebBPpAvwWd1bfXCnwC2dx4OkydNMaiG//+Xnry91RJMHFH7CiE+6Y2p332DRIaOXQ==}
+  svelte-check@4.0.5:
+    resolution: {integrity: sha512-icBTBZ3ibBaywbXUat3cK6hB5Du+Kq9Z8CRuyLmm64XIe2/r+lQcbuBx/IQgsbrC+kT2jQ0weVpZSSRIPwB6jQ==}
     engines: {node: '>= 18.0.0'}
     hasBin: true
     peerDependencies:
       svelte: ^4.0.0 || ^5.0.0-next.0
       typescript: '>=5.0.0'
 
-  svelte-hmr@0.16.0:
-    resolution: {integrity: sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==}
-    engines: {node: ^12.20 || ^14.13.1 || >= 16}
-    peerDependencies:
-      svelte: ^3.19.0 || ^4.0.0
-
   svelte-parse-markup@0.1.2:
     resolution: {integrity: sha512-DycY7DJr7VqofiJ63ut1/NEG92HrWWL56VWITn/cJCu+LlZhMoBkBXT4opUitPEEwbq1nMQbv4vTKUfbOqIW1g==}
     peerDependencies:
@@ -1140,9 +1148,9 @@ packages:
     peerDependencies:
       svelte: ^3.37.0 || ^4.0.0 || ^5.0.0-next.1
 
-  svelte@4.2.19:
-    resolution: {integrity: sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==}
-    engines: {node: '>=16'}
+  svelte@5.0.3:
+    resolution: {integrity: sha512-i8DopbAPRP9iaR3qqe++LPv4povQRshSseH3kSrzI4URZ9/7OTt3vCJPBp+5ACRQDik0S/tM1ZRA6EW/sGcKfw==}
+    engines: {node: '>=18'}
 
   svg-tags@1.0.0:
     resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
@@ -1212,10 +1220,10 @@ packages:
       terser:
         optional: true
 
-  vitefu@0.2.5:
-    resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==}
+  vitefu@1.0.3:
+    resolution: {integrity: sha512-iKKfOMBHob2WxEJbqbJjHAkmYgvFDPhuqrO82om83S8RLk+17FtyMBfcyeH8GqD0ihShtkMW/zzJgiA51hCNCQ==}
     peerDependencies:
-      vite: ^3.0.0 || ^4.0.0 || ^5.0.0
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0-beta.0
     peerDependenciesMeta:
       vite:
         optional: true
@@ -1241,6 +1249,9 @@ packages:
     resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
+  zimmerframe@1.1.2:
+    resolution: {integrity: sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==}
+
 snapshots:
 
   '@ampproject/remapping@2.3.0':
@@ -1360,7 +1371,7 @@ snapshots:
   '@jridgewell/gen-mapping@0.3.5':
     dependencies:
       '@jridgewell/set-array': 1.2.1
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.25
 
   '@jridgewell/resolve-uri@3.1.2': {}
@@ -1375,6 +1386,8 @@ snapshots:
 
   '@jridgewell/sourcemap-codec@1.4.15': {}
 
+  '@jridgewell/sourcemap-codec@1.5.0': {}
+
   '@jridgewell/trace-mapping@0.3.25':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
@@ -1445,16 +1458,16 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.22.4':
     optional: true
 
-  '@sveltejs/adapter-static@3.0.5(@sveltejs/kit@2.5.24(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.19)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2)))(svelte@4.2.19)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2)))':
+  '@sveltejs/adapter-static@3.0.5(@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.3)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2)))(svelte@5.0.3)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2)))':
     dependencies:
-      '@sveltejs/kit': 2.5.24(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.19)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2)))(svelte@4.2.19)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2))
+      '@sveltejs/kit': 2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.3)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2)))(svelte@5.0.3)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2))
 
-  '@sveltejs/kit@2.5.24(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.19)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2)))(svelte@4.2.19)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2))':
+  '@sveltejs/kit@2.7.2(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.3)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2)))(svelte@5.0.3)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.1(svelte@4.2.19)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2))
+      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.0.3)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2))
       '@types/cookie': 0.6.0
       cookie: 0.7.2
-      devalue: 5.0.0
+      devalue: 5.1.1
       esm-env: 1.0.0
       import-meta-resolve: 4.1.0
       kleur: 4.1.5
@@ -1462,31 +1475,30 @@ snapshots:
       mrmime: 2.0.0
       sade: 1.8.1
       set-cookie-parser: 2.6.0
-      sirv: 2.0.4
-      svelte: 4.2.19
+      sirv: 3.0.0
+      svelte: 5.0.3
       tiny-glob: 0.2.9
       vite: 5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2)
 
-  '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.19)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2)))(svelte@4.2.19)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2))':
+  '@sveltejs/vite-plugin-svelte-inspector@3.0.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.3)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2)))(svelte@5.0.3)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.1(svelte@4.2.19)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2))
-      debug: 4.3.6
-      svelte: 4.2.19
+      '@sveltejs/vite-plugin-svelte': 4.0.0(svelte@5.0.3)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2))
+      debug: 4.3.7
+      svelte: 5.0.3
       vite: 5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.19)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2))':
+  '@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.3)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.19)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2)))(svelte@4.2.19)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2))
-      debug: 4.3.5
+      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0(@sveltejs/vite-plugin-svelte@4.0.0(svelte@5.0.3)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2)))(svelte@5.0.3)(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2))
+      debug: 4.3.7
       deepmerge: 4.3.1
       kleur: 4.1.5
-      magic-string: 0.30.10
-      svelte: 4.2.19
-      svelte-hmr: 0.16.0(svelte@4.2.19)
+      magic-string: 0.30.12
+      svelte: 5.0.3
       vite: 5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2)
-      vitefu: 0.2.5(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2))
+      vitefu: 1.0.3(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2))
     transitivePeerDependencies:
       - supports-color
 
@@ -1499,8 +1511,15 @@ snapshots:
       undici-types: 5.26.5
     optional: true
 
+  acorn-typescript@1.4.13(acorn@8.12.1):
+    dependencies:
+      acorn: 8.12.1
+
   acorn@8.12.1: {}
 
+  acorn@8.13.0:
+    optional: true
+
   ajv@8.12.0:
     dependencies:
       fast-deep-equal: 3.1.3
@@ -1510,7 +1529,7 @@ snapshots:
 
   ansi-regex@5.0.1: {}
 
-  ansi-regex@6.0.1: {}
+  ansi-regex@6.1.0: {}
 
   ansi-styles@3.2.1:
     dependencies:
@@ -1524,17 +1543,13 @@ snapshots:
 
   argparse@2.0.1: {}
 
-  aria-query@5.3.0:
-    dependencies:
-      dequal: 2.0.3
+  aria-query@5.3.2: {}
 
   array-union@2.1.0: {}
 
   astral-regex@2.0.0: {}
 
-  axobject-query@4.0.0:
-    dependencies:
-      dequal: 2.0.3
+  axobject-query@4.1.0: {}
 
   balanced-match@1.0.2: {}
 
@@ -1563,14 +1578,6 @@ snapshots:
     dependencies:
       readdirp: 4.0.1
 
-  code-red@1.0.4:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.15
-      '@types/estree': 1.0.5
-      acorn: 8.12.1
-      estree-walker: 3.0.3
-      periscopic: 3.1.0
-
   color-convert@1.9.3:
     dependencies:
       color-name: 1.1.3
@@ -1614,19 +1621,17 @@ snapshots:
 
   cssesc@3.0.0: {}
 
-  debug@4.3.5:
+  debug@4.3.6:
     dependencies:
       ms: 2.1.2
 
-  debug@4.3.6:
+  debug@4.3.7:
     dependencies:
-      ms: 2.1.2
+      ms: 2.1.3
 
   deepmerge@4.3.1: {}
 
-  dequal@2.0.3: {}
-
-  devalue@5.0.0: {}
+  devalue@5.1.1: {}
 
   dir-glob@3.0.1:
     dependencies:
@@ -1674,6 +1679,11 @@ snapshots:
 
   esm-env@1.0.0: {}
 
+  esrap@1.2.2:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@types/estree': 1.0.5
+
   estree-walker@3.0.3:
     dependencies:
       '@types/estree': 1.0.5
@@ -1842,6 +1852,10 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
 
+  magic-string@0.30.12:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
   magic-string@0.30.5:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
@@ -1871,6 +1885,8 @@ snapshots:
 
   ms@2.1.2: {}
 
+  ms@2.1.3: {}
+
   nanoid@3.3.7: {}
 
   normalize-path@3.0.0: {}
@@ -1897,12 +1913,6 @@ snapshots:
 
   path-type@4.0.0: {}
 
-  periscopic@3.1.0:
-    dependencies:
-      '@types/estree': 1.0.5
-      estree-walker: 3.0.3
-      is-reference: 3.0.2
-
   picocolors@1.1.0: {}
 
   picomatch@2.3.1: {}
@@ -1932,10 +1942,10 @@ snapshots:
       picocolors: 1.1.0
       source-map-js: 1.2.1
 
-  prettier-plugin-svelte@3.2.7(prettier@3.3.3)(svelte@4.2.19):
+  prettier-plugin-svelte@3.2.7(prettier@3.3.3)(svelte@5.0.3):
     dependencies:
       prettier: 3.3.3
-      svelte: 4.2.19
+      svelte: 5.0.3
 
   prettier@3.3.3: {}
 
@@ -2004,7 +2014,7 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
-  sirv@2.0.4:
+  sirv@3.0.0:
     dependencies:
       '@polka/url': 1.0.0-next.25
       mrmime: 2.0.0
@@ -2047,7 +2057,7 @@ snapshots:
 
   strip-ansi@7.1.0:
     dependencies:
-      ansi-regex: 6.0.1
+      ansi-regex: 6.1.0
 
   stylelint-config-recommended-scss@14.0.0(postcss@8.4.47)(stylelint@16.9.0(typescript@5.6.2)):
     dependencies:
@@ -2142,49 +2152,44 @@ snapshots:
       has-flag: 4.0.0
       supports-color: 7.2.0
 
-  svelte-check@4.0.4(svelte@4.2.19)(typescript@5.6.2):
+  svelte-check@4.0.5(svelte@5.0.3)(typescript@5.6.2):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       chokidar: 4.0.1
       fdir: 6.4.0
       picocolors: 1.1.0
       sade: 1.8.1
-      svelte: 4.2.19
+      svelte: 5.0.3
       typescript: 5.6.2
     transitivePeerDependencies:
       - picomatch
 
-  svelte-hmr@0.16.0(svelte@4.2.19):
-    dependencies:
-      svelte: 4.2.19
-
-  svelte-parse-markup@0.1.2(svelte@4.2.19):
+  svelte-parse-markup@0.1.2(svelte@5.0.3):
     dependencies:
-      svelte: 4.2.19
+      svelte: 5.0.3
 
-  svelte-preprocess-import-assets@1.1.0(svelte@4.2.19):
+  svelte-preprocess-import-assets@1.1.0(svelte@5.0.3):
     dependencies:
       estree-walker: 3.0.3
       magic-string: 0.30.5
-      svelte: 4.2.19
-      svelte-parse-markup: 0.1.2(svelte@4.2.19)
+      svelte: 5.0.3
+      svelte-parse-markup: 0.1.2(svelte@5.0.3)
 
-  svelte@4.2.19:
+  svelte@5.0.3:
     dependencies:
       '@ampproject/remapping': 2.3.0
-      '@jridgewell/sourcemap-codec': 1.4.15
-      '@jridgewell/trace-mapping': 0.3.25
+      '@jridgewell/sourcemap-codec': 1.5.0
       '@types/estree': 1.0.5
       acorn: 8.12.1
-      aria-query: 5.3.0
-      axobject-query: 4.0.0
-      code-red: 1.0.4
-      css-tree: 2.3.1
-      estree-walker: 3.0.3
+      acorn-typescript: 1.4.13(acorn@8.12.1)
+      aria-query: 5.3.2
+      axobject-query: 4.1.0
+      esm-env: 1.0.0
+      esrap: 1.2.2
       is-reference: 3.0.2
       locate-character: 3.0.0
-      magic-string: 0.30.10
-      periscopic: 3.1.0
+      magic-string: 0.30.12
+      zimmerframe: 1.1.2
 
   svg-tags@1.0.0: {}
 
@@ -2199,7 +2204,7 @@ snapshots:
   terser@5.29.2:
     dependencies:
       '@jridgewell/source-map': 0.3.6
-      acorn: 8.12.1
+      acorn: 8.13.0
       commander: 2.20.3
       source-map-support: 0.5.21
     optional: true
@@ -2237,7 +2242,7 @@ snapshots:
       sass: 1.79.4
       terser: 5.29.2
 
-  vitefu@0.2.5(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2)):
+  vitefu@1.0.3(vite@5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2)):
     optionalDependencies:
       vite: 5.4.8(@types/node@20.11.30)(sass@1.79.4)(terser@5.29.2)
 
@@ -2265,3 +2270,5 @@ snapshots:
     dependencies:
       imurmurhash: 0.1.4
       signal-exit: 4.1.0
+
+  zimmerframe@1.1.2: {}