svelte-common 6.15.21 → 6.15.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-common",
-  "version": "6.15.21",
+  "version": "6.15.22",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -32,16 +32,16 @@
   ],
   "license": "BSD-2-Clause",
   "scripts": {
-    "prepare": "npm run prepare:vite && npm run prepare:typescript",
+    "prepare": "node --run prepare:vite && node --run prepare:typescript",
     "prepare:vite": "vite build",
     "prepare:typescript": "tsc --allowJs --declaration --emitDeclarationOnly --declarationDir types --resolveJsonModule --target es2024 --lib es2024 --lib dom -m esnext --module nodenext --moduleResolution nodenext --rootDir src ./src**/*.mjs",
     "start": "vite",
-    "test": "npm run test:ava && npm run test:cafe",
+    "test": "node --run test:ava && node --run test:cafe",
     "test:cafe": "testcafe $BROWSER:headless tests/cafe/*-cafe.mjs --esm -s build/test --page-request-timeout 5000 --app-init-delay 8000 --app vite",
     "test:ava": "ava --timeout 4m tests/*-ava.mjs tests/*-ava-node.mjs",
     "cover": "c8 -x 'tests/**/*' --temp-directory build/tmp ava --timeout 4m tests/*-ava.mjs tests/*-ava-node.mjs && c8 report -r lcov -o build/coverage --temp-directory build/tmp",
     "docs": "documentation readme --section=API ./src/**/*.mjs",
-    "lint": "npm run lint:css && npm run lint:docs && npm run lint:typescript",
+    "lint": "node --run lint:css && node --run lint:docs && node --run lint:typescript",
     "lint:docs": "documentation lint ./src/**/*.mjs",
     "lint:css": "stylelint ./src/*.css",
     "lint:typescript": "tsc --allowJs --checkJs --noEmit --resolveJsonModule --target es2024 --lib es2024 --lib dom -m esnext --module nodenext --moduleResolution nodenext ./src**/*.mjs",
@@ -57,23 +57,23 @@
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/github": "^11.0.0",
     "@semantic-release/release-notes-generator": "^14.0.1",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.8",
-    "ava": "^6.1.3",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "ava": "^6.2.0",
     "c8": "^10.1.2",
     "documentation": "^14.0.3",
     "mf-styling": "^3.2.4",
-    "npm-pkgbuild": "^15.6.2",
-    "semantic-release": "^24.1.2",
+    "npm-pkgbuild": "^15.6.4",
+    "semantic-release": "^24.2.0",
     "stylelint": "^16.10.0",
     "stylelint-config-standard": "^36.0.1",
-    "svelte": "^5.0.0-next.269",
+    "svelte": "^5.1.9",
     "testcafe": "^3.6.2",
     "typescript": "^5.7.0-beta",
-    "vite": "^5.4.9",
+    "vite": "^5.4.10",
     "vite-plugin-compression2": "^1.3.0"
   },
   "peerDependencies": {
-    "svelte": "^5.0.0-next.0"
+    "svelte": "^5.1.9"
   },
   "optionalDependencies": {
     "mf-hosting-cloudflare": "^1.0.7",
@@ -152,7 +152,8 @@
       "arlac77/template-css",
       "arlac77/template-npm-pkgbuild",
       "arlac77/template-svelte-component",
-      "arlac77/template-typescript"
+      "arlac77/template-typescript",
+      "arlac77/template-web-component"
     ]
   }
 }

package/src/components/About.svelte

@@ -1,5 +1,15 @@
+<script>
+  /**
+   * @typedef {Object} Props
+   * @property {import('svelte').Snippet} [children]
+   */
+
+  /** @type {Props} */
+  let { children } = $props();
+</script>
+
 <table class="bordered striped">
   <tbody>
-    <slot />
+    {@render children?.()}
   </tbody>
 </table>

package/src/components/Collapse.svelte

@@ -1,4 +1,12 @@
 <script>
+  /**
+   * @typedef {Object} Props
+   * @property {import('svelte').Snippet} [children]
+   * @property {import('svelte').Snippet} [content]
+   */
+
+  /** @type {Props} */
+  let { children, content } = $props();
   let open = $state(false);
 
   function onclick(event) {
@@ -8,8 +16,8 @@
 </script>
 
 <button {onclick}>
-  <slot />
+  {@render children?.()}
 </button>
 {#if open}
-  <slot name="content" />
+  {@render content?.()}
 {/if}

package/src/components/Modal.svelte

@@ -1,5 +1,5 @@
 <script>
-  let { close } = $props();
+  let { close, children } = $props();
 
   let background;
 
@@ -28,7 +28,7 @@
 >
   <div class="center modal">
     <div class="window">
-      <slot />
+      {@render children?.()}
     </div>
   </div>
 </div>

package/src/components/Tabs.svelte

@@ -1,12 +1,19 @@
 <script>
   import { setContext } from "svelte";
+  /**
+   * @typedef {Object} Props
+   * @property {import('svelte').Snippet} [children]
+   */
+
+  /** @type {Props} */
+  let { children } = $props();
 
   const tabs = { current: "t5", tab: {} };
 
   setContext("TABS", tabs);
 </script>
 
-<slot />
+{@render children?.()}
 
 <!---
 {#each Object.entries(tabs.tab) as tab}

package/src/components/TopNav.svelte

@@ -1,6 +1,6 @@
 <script>
   /** @type {{offset?: number, tolerance?: number, children?: import('svelte').Snippet}} */
-  let { offset = 0, tolerance = 0 } = $props();
+  let { offset = 0, tolerance = 0, children } = $props();
 
   let headerClass = $state("show");
   let y = $state(0);
@@ -30,5 +30,5 @@
 <svelte:window bind:scrollY={y} />
 
 <nav class={headerClass}>
-  <slot />
+  {@render children?.()}
 </nav>