move d3-array, d3-interpolate-path, d3-shape, d3-scale, @iconify/svel…

…te from package devDeps to deps

.github/workflows/test.yml

@@ -21,7 +21,6 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18
-          registry-url: https://registry.npmjs.org
 
       - name: Install dependencies
         run: |
@@ -40,6 +39,12 @@ jobs:
       - name: Check out repo
         uses: actions/checkout@v3
 
+      - name: Set up node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          registry-url: https://registry.npmjs.org
+
       - name: Build package and publish to NPM
         run: |
           npm install

package.json

@@ -21,10 +21,16 @@
     "test:unit": "vitest tests/unit/*.ts",
     "test:e2e": "playwright test tests/*.ts",
     "changelog": "npx auto-changelog --package --output changelog.md --unreleased-only --hide-credit --commit-limit false",
-    "update-coverage": "pnpm test:unit --run --coverage && npx istanbul-badges-readme"
+    "update-coverage": "vitest tests/unit --run --coverage && npx istanbul-badges-readme"
   },
-  "devDependencies": {
+  "dependencies": {
     "@iconify/svelte": "^3.0.1",
+    "d3-array": "^3.2.1",
+    "d3-interpolate-path": "^2.3.0",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0"
+  },
+  "devDependencies": {
     "@playwright/test": "^1.29.1",
     "@sveltejs/adapter-static": "1.0.0",
     "@sveltejs/kit": "1.0.1",
@@ -36,10 +42,6 @@
     "@typescript-eslint/eslint-plugin": "^5.47.0",
     "@typescript-eslint/parser": "^5.47.0",
     "@vitest/coverage-c8": "^0.26.3",
-    "d3-array": "^3.2.1",
-    "d3-interpolate-path": "^2.3.0",
-    "d3-scale": "^4.0.2",
-    "d3-shape": "^3.2.0",
     "eslint": "^8.30.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.1.0",

src/lib/ColorCustomizer.svelte

@@ -13,16 +13,18 @@
   }
 </script>
 
-<h2
-  on:click={() => (open = !open)}
-  on:keyup={(e) => [`Enter`, ` `].includes(e.key) && (open = !open)}
-  title={!open && collapsible ? `Click to open color picker` : null}
-  style:cursor={collapsible ? `pointer` : `default`}
-  transition:fade|local
->
-  <Icon icon="ion:color-palette" />
-  Customize Colors
-</h2>
+<slot name="title">
+  <h2
+    on:click={() => (open = !open)}
+    on:keyup={(e) => [`Enter`, ` `].includes(e.key) && (open = !open)}
+    title={!open && collapsible ? `Click to open color picker` : null}
+    style:cursor={collapsible ? `pointer` : `default`}
+    transition:fade|local
+  >
+    <Icon icon="ion:color-palette" />
+    Customize Colors
+  </h2>
+</slot>
 <div class="grid" transition:fade|local>
   {#if open || !collapsible}
     {#each Object.keys($category_colors) as category}

src/lib/Icon.svelte

@@ -4,5 +4,5 @@
 </script>
 
 {#if $show_icons}
-  <Icon inline {...$$props} style="padding: 0 6pt 0 0;" />
+  <Icon inline {...$$props} style="padding: 0 5pt 0 0;" />
 {/if}

vite.config.ts

@@ -20,7 +20,6 @@ const vite_config: UserConfig & { test: VitestConfig } = {
     environment: `jsdom`,
     css: true,
     coverage: {
-      // add 'json'/'html' for more detailed reports
       reporter: [`text`, `json-summary`],
     },
   },