update dependencies

package.json

@@ -20,39 +20,39 @@
     "format": "prettier . --write",
     "build": "rimraf ./dist && svelte-package -i ./src && publint",
     "build:docs": "storybook build -o docs",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "changeset:version": "changeset version",
     "changeset:publish": "git add --all && changeset publish",
-    "knip": "knip",
+    "knip": "knip"
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
   },
   "license": "MIT",
   "files": [
     "dist"
   ],
   "engines": {
-    "node": ">=18.20"
+    "node": ">=20.18"
   },
   "peerDependencies": {
-    "svelte": ">=4"
+    "svelte": ">=5"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.11",
+    "@changesets/cli": "^2.29.2",
-    "@chromatic-com/storybook": "^3.2.4",
+    "@chromatic-com/storybook": "^3.2.6",
     "@reuters-graphics/yaks-eslint": "^0.1.1",
     "@reuters-graphics/yaks-prettier": "^0.1.1",
-    "@storybook/addon-essentials": "^8.6.0",
+    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-interactions": "^8.6.0",
+    "@storybook/addon-interactions": "^8.6.12",
-    "@storybook/addon-svelte-csf": "5.0.0-next.27",
+    "@storybook/addon-svelte-csf": "5.0.0-next.28",
-    "@storybook/blocks": "^8.6.0",
+    "@storybook/blocks": "^8.6.12",
-    "@storybook/components": "^8.6.0",
+    "@storybook/components": "^8.6.12",
-    "@storybook/manager-api": "^8.6.0",
+    "@storybook/manager-api": "^8.6.12",
-    "@storybook/svelte": "^8.6.0",
+    "@storybook/svelte": "^8.6.12",
-    "@storybook/sveltekit": "^8.6.0",
+    "@storybook/sveltekit": "^8.6.12",
-    "@storybook/test": "^8.6.0",
+    "@storybook/test": "^8.6.12",
-    "@storybook/theming": "^8.6.0",
+    "@storybook/theming": "^8.6.12",
-    "@sveltejs/package": "^2.3.7",
+    "@sveltejs/package": "^2.3.11",
-    "@sveltejs/vite-plugin-svelte": "^4.0.4",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@types/css": "^0.0.37",
     "@types/eslint": "^9.6.1",
     "@types/fs-extra": "^11.0.4",
@@ -66,46 +66,47 @@
     "@types/pym.js": "^1.3.2",
     "@types/react": "^18.3.18",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "change-case": "^4.1.2",
+    "change-case": "^5.4.4",
-    "chromatic": "^7.6.0",
+    "chromatic": "^11.28.2",
     "css": "^3.0.0",
     "css-color-converter": "^2.0.0",
     "deep-object-diff": "^1.1.9",
-    "eslint": "^9.18.0",
+    "eslint": "^9.24.0",
-    "eslint-plugin-mdx": "^3.1.5",
+    "eslint-plugin-mdx": "^3.4.0",
     "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-storybook": "^0.11.2",
+    "eslint-plugin-storybook": "^0.12.0",
     "fs-extra": "^11.3.0",
     "kleur": "^4.1.5",
-    "knip": "^5.42.1",
+    "knip": "^5.50.5",
     "mermaid": "^10.9.3",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.5.1",
+    "postcss": "^8.5.3",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.2",
     "prettier-plugin-svelte": "^3.3.3",
     "prism-themes": "^1.9.0",
     "prompts": "^2.4.2",
     "prop-types": "^15.8.1",
-    "publint": "^0.2.12",
+    "publint": "^0.3.12",
     "react": "^18.3.1",
     "react-colorful": "^5.6.1",
     "react-dom": "^18.3.1",
     "react-syntax-highlighter": "^15.6.1",
     "remark-gfm": "^4.0.0",
-    "rimraf": "^5.0.10",
+    "rimraf": "^6.0.1",
-    "sass": "^1.85.0",
+    "sass": "^1.86.3",
-    "storybook": "^8.6.0",
+    "storybook": "^8.6.12",
-    "svelte": "^5.18.0",
+    "svelte": "^5.28.0",
+    "svelte-check": "^4.1.6",
     "svelte-loader": "^3.2.4",
     "tiny-glob": "^0.2.9",
-    "typescript": "^5.7.3",
+    "typescript": "^5.8.3",
-    "vite": "^6.2.0"
+    "vite": "^6.3.0"
   },
   "dependencies": {
-    "@fortawesome/free-regular-svg-icons": "^5.15.4",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@splidejs/svelte-splide": "^0.2.9",
-    "@sveltejs/kit": "^2.15.3",
+    "@sveltejs/kit": "^2.20.7",
     "dayjs": "^1.11.13",
     "journalize": "^2.6.0",
     "lodash-es": "^4.17.21",
@@ -114,9 +115,8 @@
     "proper-url-join": "^2.1.2",
     "pym.js": "^1.3.2",
     "slugify": "^1.6.6",
-    "svelte-fa": "^2.4.0",
+    "svelte-fa": "^4.0.3",
-    "svelte-intersection-observer": "^0.10.2",
+    "svelte-intersection-observer": "^1.0.0"
-    "svelte-search": "^2.1.1"
   },
   "exports": {
     ".": {
@@ -130,10 +130,5 @@
   "types": "./dist/index.d.ts",
   "bugs": {
     "url": "https://github.com/reuters-graphics/graphics-components/issues"
-  },
-  "eslintConfig": {
-    "extends": [
-      "plugin:storybook/recommended"
-    ]
   }
 }

src/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Fa from 'svelte-fa/src/fa.svelte';
+  import Fa from 'svelte-fa';
   import { faWindowRestore } from '@fortawesome/free-regular-svg-icons';
   interface Props {
     dev?: boolean;

src/components/Framer/Framer.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  // @ts-ignore Temporary
+  import Fa from 'svelte-fa';
-  import Fa from 'svelte-fa/src/fa.svelte';
   import { faDesktop, faLink } from '@fortawesome/free-solid-svg-icons';
   import pym from 'pym.js';
   import urljoin from 'proper-url-join';

src/components/Framer/Resizer/index.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { faDesktop, faMobileAlt } from '@fortawesome/free-solid-svg-icons';
-  // @ts-ignore Temporary
+  import Fa from 'svelte-fa';
-  import Fa from 'svelte-fa/src/fa.svelte';
   import { width } from '../stores.js';
 
   interface Props {

src/components/PaddingReset/PaddingReset.stories.svelte

@@ -8,7 +8,7 @@
   });
 </script>
 
-<script>
+<script lang="ts">
   import Block from '../Block/Block.svelte';
   let width: 'wide' | 'fluid' = 'fluid';
 

src/components/PhotoCarousel/PhotoCarousel.svelte

@@ -6,7 +6,7 @@
   import { Splide, SplideSlide, SplideTrack } from '@splidejs/svelte-splide';
 
   // Icons
-  import Fa from 'svelte-fa/src/fa.svelte';
+  import Fa from 'svelte-fa';
   import {
     faChevronLeft,
     faChevronRight,

src/components/Scroller/Scroller.stories.svelte

@@ -23,7 +23,7 @@
   });
 </script>
 
-<script>
+<script lang="ts">
   import MyBackground from './demo/components/basic/Step.svelte';
   import MyInteractiveForeground from './demo/components/basic/InteractiveForeground.svelte';
 

src/components/SimpleTimeline/SimpleTimeline.svelte

@@ -1,6 +1,6 @@
 <!-- @component `SimpleTimeline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-simpletimeline--docs) -->
 <script lang="ts">
-  import Fa from 'svelte-fa/src/fa.svelte';
+  import Fa from 'svelte-fa';
   import { faLink } from '@fortawesome/free-solid-svg-icons';
   import Block from '../Block/Block.svelte';
   import Markdown from '../Markdown/Markdown.svelte';

svelte.config.js

@@ -1,5 +1,26 @@
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
-export default {
+/** @type {import('@sveltejs/kit').Config} */
-  preprocess: [vitePreprocess()],
+const config = {
+  kit: {
+    paths: {
+      base: '/graphics-components',
+    },
+    alias: {
+      $lib: 'src',
+      '$lib/*': 'src/*',
+      $docs: 'src/docs',
+      '$docs/*': 'src/docs/*',
+    },
+  },
+  /** @type {import('@sveltejs/vite-plugin-svelte').SvelteConfig['onwarn']} */
+  onwarn: (warning, handler) => {
+    // Triggered by our use of SCSS mixins ...
+    if (warning.code === 'vite-plugin-svelte-preprocess-many-dependencies')
+      return;
+    handler(warning);
+  },
+  preprocess: [vitePreprocess({})],
 };
+
+export default config;

tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "extends": "./.svelte-kit/tsconfig.json",
   "compilerOptions": {
     "module": "ESNext",
     "target": "ESNext",
@@ -11,16 +12,9 @@
     "checkJs": true,
     "emitDeclarationOnly": true,
     "jsx": "react",
-    "baseUrl": ".",
     "rootDir": ".",
     "rootDirs": [".", "docs/docs-components"],
     "outDir": "dist",
-    "paths": {
-      "$lib": ["src"],
-      "$lib/*": ["src/*"],
-      "$docs": ["src/docs"],
-      "$docs/*": ["src/docs/*"]
-    },
     "sourceMap": true,
     "strict": true,
     "skipLibCheck": true,

vite.config.ts

@@ -3,7 +3,6 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import path from 'path';
 
 const config: UserConfig = defineConfig({
-  base: 'https://reuters-graphics.github.io/graphics-components/',
   resolve: {
     alias: {
       '@reuters-graphics/graphics-components': path.resolve('./src'),
@@ -11,6 +10,9 @@ const config: UserConfig = defineConfig({
       $docs: path.resolve('./src/docs'),
     },
   },
+  css: {
+    preprocessorOptions: { scss: { quietDeps: true, api: 'modern-compiler' } },
+  },
   plugins: [sveltekit()],
 });