Add tabs example

examples/element-factory/package.json

@@ -23,7 +23,10 @@
     "vitest": "^2.1.1"
   },
   "dependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@testing-library/svelte": "^5.2.2",
     "lit": "^3.2.0",
+    "svelte": "^4.2.19",
     "uuid": "^10.0.0"
   }
 }

examples/element-factory/src/login-form.js

@@ -0,0 +1,43 @@
+import { html, render } from 'lit';
+
+/**
+ * @typedef {Object} LoginFormProperties
+ * @property {string} action;
+ * @property {'get' | 'post' | 'dialog'} method;
+ * @property {(event: Event) => void} onSubmit;
+ */
+
+/**
+ * Renders a login form.
+ * @param {LoginFormProperties} parameters
+ * @returns {HTMLDivElement}
+ */
+export const createLoginForm = ({
+  action = '/login',
+  method = 'post',
+  onSubmit = () => {},
+} = {}) => {
+  const template = html`
+    <form
+      action="${action}"
+      method="${method}"
+      @submit="${onSubmit}"
+      aria-label="Login"
+    >
+      <label>
+        <span>Email</span>
+        <input type="email" name="email" placeholder="Email" />
+      </label>
+      <label>
+        <span>Password</span>
+        <input type="password" name="password" placeholder="Password" />
+      </label>
+      <button type="submit">Login</button>
+    </form>
+  `;
+
+  const container = document.createElement('div');
+  render(template, container);
+
+  return container;
+};

examples/element-factory/src/login-form.test.js

@@ -0,0 +1,28 @@
+import { screen } from '@testing-library/dom';
+import { createLoginForm } from './login-form';
+
+describe('LoginForm', async () => {
+  it('should render a login form', async () => {
+    document.body.replaceChildren(createLoginForm());
+
+    const form = screen.getByRole('form', { name: /login/i });
+
+    expect(form).toBeInTheDocument();
+  });
+
+  it('should render a login form with a custom action', async () => {
+    document.body.replaceChildren(createLoginForm({ action: '/custom' }));
+
+    const form = screen.getByRole('form', { name: /login/i });
+
+    expect(form).toHaveAttribute('action', '/custom');
+  });
+
+  it('should render a login form with a custom method', async () => {
+    document.body.replaceChildren(createLoginForm({ method: 'get' }));
+
+    const form = screen.getByRole('form', { name: /login/i });
+
+    expect(form).toHaveAttribute('method', 'get');
+  });
+});

examples/element-factory/src/secret-input.test.js

@@ -1,9 +1,9 @@
 import { screen } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
-import { createSecretInput } from './secret-input.js';
-
 import '@testing-library/jest-dom/vitest';
 
+import { createSecretInput } from './secret-input.js';
+
 describe('createSecretInput', async () => {
   beforeEach(() => {
     vi.spyOn(localStorage, 'getItem').mockReturnValue('test secret');

examples/element-factory/src/tabs.svelte

@@ -0,0 +1,53 @@
+<script>
+  import { onMount } from 'svelte';
+
+  export let tabs = [];
+
+  let tabbedContent = null;
+
+  const selectTab = (event) => {
+    const tab = event.target;
+    const panel = tabbedContent.querySelector(
+      `#${tab.getAttribute('aria-controls')}`,
+    );
+
+    tabbedContent.querySelectorAll('[role="tab"]').forEach((t) => {
+      t.setAttribute('aria-selected', 'false');
+      t.setAttribute('tabindex', '-1');
+    });
+
+    tab.setAttribute('aria-selected', 'true');
+    tab.setAttribute('tabindex', '0');
+
+    tabbedContent.querySelectorAll('[role="tabpanel"]').forEach((p) => {
+      p.hidden = true;
+    });
+
+    panel.hidden = false;
+  };
+</script>
+
+<section bind:this={tabbedContent}>
+  <div role="tablist">
+    {#each tabs as tab, i}
+      {@const tabId = tab.id || i}
+      <button
+        role="tab"
+        id="tab-{tabId}"
+        aria-controls="panel-{tabId}"
+        aria-selected="false"
+        tabindex="-1"
+        on:click={selectTab}
+      >
+        {tab.title}
+      </button>
+    {/each}
+  </div>
+
+  {#each tabs as tab, i}
+    {@const tabId = tab.id || i}
+    <div role="tabpanel" id="panel-{tabId}" hidden>
+      <p>{tab.content}</p>
+    </div>
+  {/each}
+</section>

examples/element-factory/src/tabs.test.js

@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+
+import Tabs from './tabs.svelte';
+
+describe('Tabs', () => {
+  beforeEach(() => {
+    render(Tabs, {
+      tabs: [
+        {
+          label: 'Venue',
+          content: 'This year, we will be at this awesome venue',
+        },
+        { label: 'Lineup', content: 'Check out our exciting lineup!' },
+        { label: 'Tickets', content: 'Buy tickets today!' },
+      ],
+    });
+  });
+
+  it('should render three tabs', async () => {
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs).toHaveLength(3);
+  });
+
+  it('should switch tabs', async () => {
+    const tabs = screen.getAllByRole('tab');
+    const secondTab = tabs[1];
+
+    await userEvent.click(secondTab);
+
+    expect(secondTab).toHaveAttribute('aria-selected', 'true');
+  });
+
+  it('should render the content of the selected tab', async () => {
+    const tabs = screen.getAllByRole('tab');
+    const secondTab = tabs[1];
+
+    await userEvent.click(secondTab);
+
+    const content = screen.getByRole('tabpanel', { hidden: false });
+    expect(content).toHaveTextContent('lineup');
+  });
+});

examples/element-factory/vitest.config.ts

@@ -1,8 +1,11 @@
 import { defineConfig } from 'vitest/config';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
 
 export default defineConfig({
+  plugins: [svelte()],
   test: {
     environment: 'happy-dom',
     globals: true,
+    setupFiles: ['@testing-library/jest-dom/vitest'],
   },
 });

package-lock.json

@@ -113,7 +113,10 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
+        "@sveltejs/vite-plugin-svelte": "^3.1.2",
+        "@testing-library/svelte": "^5.2.2",
         "lit": "^3.2.0",
+        "svelte": "^4.2.19",
         "uuid": "^10.0.0"
       },
       "devDependencies": {
@@ -243,7 +246,6 @@
     },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
-      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -255,7 +257,6 @@
     },
     "node_modules/@babel/code-frame": {
       "version": "7.24.7",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/highlight": "^7.24.7",
@@ -398,7 +399,6 @@
     },
     "node_modules/@babel/helper-validator-identifier": {
       "version": "7.24.7",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -426,7 +426,6 @@
     },
     "node_modules/@babel/highlight": {
       "version": "7.24.7",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.24.7",
@@ -440,7 +439,6 @@
     },
     "node_modules/@babel/highlight/node_modules/ansi-styles": {
       "version": "3.2.1",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^1.9.0"
@@ -451,7 +449,6 @@
     },
     "node_modules/@babel/highlight/node_modules/chalk": {
       "version": "2.4.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^3.2.1",
@@ -464,7 +461,6 @@
     },
     "node_modules/@babel/highlight/node_modules/color-convert": {
       "version": "1.9.3",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "1.1.3"
@@ -472,12 +468,10 @@
     },
     "node_modules/@babel/highlight/node_modules/color-name": {
       "version": "1.1.3",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@babel/highlight/node_modules/has-flag": {
       "version": "3.0.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -485,7 +479,6 @@
     },
     "node_modules/@babel/highlight/node_modules/supports-color": {
       "version": "5.5.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-flag": "^3.0.0"
@@ -538,7 +531,6 @@
     },
     "node_modules/@babel/runtime": {
       "version": "7.25.6",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
@@ -636,7 +628,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -852,7 +843,6 @@
     },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.5",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
@@ -865,7 +855,6 @@
     },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.2",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -873,7 +862,6 @@
     },
     "node_modules/@jridgewell/set-array": {
       "version": "1.2.1",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -881,7 +869,6 @@
     },
     "node_modules/@jridgewell/source-map": {
       "version": "0.3.6",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "peer": true,
@@ -892,12 +879,10 @@
     },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.0",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -1011,7 +996,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1025,7 +1009,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1039,7 +1022,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1053,7 +1035,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1067,7 +1048,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1081,7 +1061,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1095,7 +1074,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1109,7 +1087,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1123,7 +1100,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1137,7 +1113,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1151,7 +1126,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1165,7 +1139,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1179,7 +1152,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1193,7 +1165,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1207,7 +1178,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1221,7 +1191,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1233,6 +1202,45 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@sveltejs/vite-plugin-svelte": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-3.1.2.tgz",
+      "integrity": "sha512-Txsm1tJvtiYeLUVRNqxZGKR/mI+CzuIQuc2gn+YCs9rMTowpNZ2Nqt53JdL8KF9bLhAf2ruR/dr9eZCwdTriRA==",
+      "license": "MIT",
+      "dependencies": {
+        "@sveltejs/vite-plugin-svelte-inspector": "^2.1.0",
+        "debug": "^4.3.4",
+        "deepmerge": "^4.3.1",
+        "kleur": "^4.1.5",
+        "magic-string": "^0.30.10",
+        "svelte-hmr": "^0.16.0",
+        "vitefu": "^0.2.5"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20"
+      },
+      "peerDependencies": {
+        "svelte": "^4.0.0 || ^5.0.0-next.0",
+        "vite": "^5.0.0"
+      }
+    },
+    "node_modules/@sveltejs/vite-plugin-svelte-inspector": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-2.1.0.tgz",
+      "integrity": "sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20"
+      },
+      "peerDependencies": {
+        "@sveltejs/vite-plugin-svelte": "^3.0.0",
+        "svelte": "^4.0.0 || ^5.0.0-next.0",
+        "vite": "^5.0.0"
+      }
+    },
     "node_modules/@tailwindcss/nesting": {
       "version": "0.0.0-insiders.565cd3e",
       "dev": true,
@@ -1264,7 +1272,6 @@
     },
     "node_modules/@testing-library/dom": {
       "version": "10.4.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
@@ -1356,6 +1363,31 @@
         }
       }
     },
+    "node_modules/@testing-library/svelte": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/svelte/-/svelte-5.2.2.tgz",
+      "integrity": "sha512-MZsnX83EVGQf7MoXZ5nzCUs2HywGwtkEYUv/QlltCWQ0ug4lAry7+di2jc3iPMXGnEWQJnzyqPyvpwUYR+eRrw==",
+      "license": "MIT",
+      "dependencies": {
+        "@testing-library/dom": "^10.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "peerDependencies": {
+        "svelte": "^3 || ^4 || ^5 || ^5.0.0-next.0",
+        "vite": "*",
+        "vitest": "*"
+      },
+      "peerDependenciesMeta": {
+        "vite": {
+          "optional": true
+        },
+        "vitest": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@testing-library/user-event": {
       "version": "14.5.2",
       "dev": true,
@@ -1370,7 +1402,6 @@
     },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/babel__core": {
@@ -1438,7 +1469,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
       "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/express": {
@@ -1544,7 +1574,7 @@
     },
     "node_modules/@types/node": {
       "version": "22.5.5",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.19.2"
@@ -1685,7 +1715,7 @@
     },
     "node_modules/@vitest/expect": {
       "version": "2.1.1",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@vitest/spy": "2.1.1",
@@ -1699,7 +1729,7 @@
     },
     "node_modules/@vitest/mocker": {
       "version": "2.1.1",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@vitest/spy": "^2.1.0-beta.1",
@@ -1725,7 +1755,7 @@
     },
     "node_modules/@vitest/pretty-format": {
       "version": "2.1.1",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "tinyrainbow": "^1.2.0"
@@ -1736,7 +1766,7 @@
     },
     "node_modules/@vitest/runner": {
       "version": "2.1.1",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@vitest/utils": "2.1.1",
@@ -1748,7 +1778,7 @@
     },
     "node_modules/@vitest/snapshot": {
       "version": "2.1.1",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@vitest/pretty-format": "2.1.1",
@@ -1761,7 +1791,7 @@
     },
     "node_modules/@vitest/spy": {
       "version": "2.1.1",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "tinyspy": "^3.0.0"
@@ -1792,7 +1822,7 @@
     },
     "node_modules/@vitest/utils": {
       "version": "2.1.1",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@vitest/pretty-format": "2.1.1",
@@ -1820,10 +1850,7 @@
     },
     "node_modules/acorn": {
       "version": "8.12.1",
-      "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1930,7 +1957,6 @@
     },
     "node_modules/aria-query": {
       "version": "5.3.0",
-      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "dequal": "^2.0.3"
@@ -1942,7 +1968,7 @@
     },
     "node_modules/assertion-error": {
       "version": "2.0.1",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -1991,6 +2017,15 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axobject-query": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "dev": true,
@@ -2106,7 +2141,6 @@
     },
     "node_modules/buffer-from": {
       "version": "1.1.2",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "peer": true
@@ -2124,7 +2158,7 @@
     },
     "node_modules/cac": {
       "version": "6.7.14",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -2180,7 +2214,7 @@
     },
     "node_modules/chai": {
       "version": "5.1.1",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "assertion-error": "^2.0.1",
@@ -2195,7 +2229,6 @@
     },
     "node_modules/chalk": {
       "version": "4.1.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.1.0",
@@ -2210,7 +2243,6 @@
     },
     "node_modules/chalk/node_modules/ansi-styles": {
       "version": "4.3.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -2228,7 +2260,7 @@
     },
     "node_modules/check-error": {
       "version": "2.1.1",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">= 16"
@@ -2372,9 +2404,21 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/code-red": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
+      "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@types/estree": "^1.0.1",
+        "acorn": "^8.10.0",
+        "estree-walker": "^3.0.3",
+        "periscopic": "^3.1.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -2385,7 +2429,6 @@
     },
     "node_modules/color-name": {
       "version": "1.1.4",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/combined-stream": {
@@ -2509,6 +2552,19 @@
       "resolved": "packages/css-configuration",
       "link": true
     },
+    "node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
     "node_modules/css.escape": {
       "version": "1.5.1",
       "dev": true,
@@ -2559,7 +2615,6 @@
     },
     "node_modules/debug": {
       "version": "4.3.7",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -2582,12 +2637,21 @@
     },
     "node_modules/deep-eql": {
       "version": "5.0.2",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/define-data-property": {
       "version": "1.1.4",
       "license": "MIT",
@@ -2622,7 +2686,6 @@
     },
     "node_modules/dequal": {
       "version": "2.0.3",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -2656,7 +2719,6 @@
     },
     "node_modules/dom-accessibility-api": {
       "version": "0.5.16",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/eastasianwidth": {
@@ -2715,7 +2777,6 @@
     },
     "node_modules/esbuild": {
       "version": "0.21.5",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -2764,7 +2825,6 @@
     },
     "node_modules/escape-string-regexp": {
       "version": "1.0.5",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.8.0"
@@ -2772,7 +2832,6 @@
     },
     "node_modules/estree-walker": {
       "version": "3.0.3",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "^1.0.0"
@@ -3004,7 +3063,6 @@
     },
     "node_modules/fsevents": {
       "version": "2.3.3",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3043,7 +3101,7 @@
     },
     "node_modules/get-func-name": {
       "version": "2.0.2",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": "*"
@@ -3156,7 +3214,6 @@
     },
     "node_modules/has-flag": {
       "version": "4.0.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -3370,6 +3427,15 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/is-reference": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
+      "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "dev": true,
@@ -3633,6 +3699,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/kleur": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "dev": true,
@@ -3671,6 +3746,12 @@
         "@types/trusted-types": "^2.0.2"
       }
     },
+    "node_modules/locate-character": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
+      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+      "license": "MIT"
+    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "dev": true,
@@ -3692,7 +3773,7 @@
     },
     "node_modules/loupe": {
       "version": "3.1.1",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "get-func-name": "^2.0.1"
@@ -3712,7 +3793,6 @@
     },
     "node_modules/lz-string": {
       "version": "1.5.0",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "lz-string": "bin/bin.js"
@@ -3720,12 +3800,17 @@
     },
     "node_modules/magic-string": {
       "version": "0.30.11",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "license": "CC0-1.0"
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "license": "MIT",
@@ -3920,7 +4005,6 @@
     },
     "node_modules/nanoid": {
       "version": "3.3.7",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -4072,20 +4156,30 @@
     },
     "node_modules/pathe": {
       "version": "1.1.2",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/pathval": {
       "version": "2.0.0",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">= 14.16"
       }
     },
+    "node_modules/periscopic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
+      "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^3.0.0",
+        "is-reference": "^3.0.0"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.0",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -4117,7 +4211,6 @@
     },
     "node_modules/postcss": {
       "version": "8.4.45",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -4355,7 +4448,6 @@
     },
     "node_modules/pretty-format": {
       "version": "27.5.1",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1",
@@ -4368,7 +4460,6 @@
     },
     "node_modules/pretty-format/node_modules/ansi-regex": {
       "version": "5.0.1",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -4376,7 +4467,6 @@
     },
     "node_modules/pretty-format/node_modules/ansi-styles": {
       "version": "5.2.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -4500,7 +4590,6 @@
     },
     "node_modules/react-is": {
       "version": "17.0.2",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/read-cache": {
@@ -4547,7 +4636,6 @@
     },
     "node_modules/regenerator-runtime": {
       "version": "0.14.1",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/require-directory": {
@@ -4592,7 +4680,6 @@
       "version": "4.22.5",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.22.5.tgz",
       "integrity": "sha512-WoinX7GeQOFMGznEcWA1WrTQCd/tpEbMkc3nuMs9BT0CPjMdSjPMTVClwWd4pgSQwJdP65SK9mTCNvItlr5o7w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.6"
@@ -4829,7 +4916,7 @@
     },
     "node_modules/siginfo": {
       "version": "2.0.0",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC"
     },
     "node_modules/signal-exit": {
@@ -4866,7 +4953,6 @@
     },
     "node_modules/source-map": {
       "version": "0.6.1",
-      "dev": true,
       "license": "BSD-3-Clause",
       "optional": true,
       "peer": true,
@@ -4876,7 +4962,6 @@
     },
     "node_modules/source-map-js": {
       "version": "1.2.1",
-      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -4884,7 +4969,6 @@
     },
     "node_modules/source-map-support": {
       "version": "0.5.21",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "peer": true,
@@ -4914,7 +4998,7 @@
     },
     "node_modules/stackback": {
       "version": "0.0.2",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/statuses": {
@@ -4926,7 +5010,7 @@
     },
     "node_modules/std-env": {
       "version": "3.7.0",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/strict-event-emitter": {
@@ -5062,7 +5146,6 @@
     },
     "node_modules/supports-color": {
       "version": "7.2.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-flag": "^4.0.0"
@@ -5082,6 +5165,43 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svelte": {
+      "version": "4.2.19",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.19.tgz",
+      "integrity": "sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==",
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@jridgewell/trace-mapping": "^0.3.18",
+        "@types/estree": "^1.0.1",
+        "acorn": "^8.9.0",
+        "aria-query": "^5.3.0",
+        "axobject-query": "^4.0.0",
+        "code-red": "^1.0.3",
+        "css-tree": "^2.3.1",
+        "estree-walker": "^3.0.3",
+        "is-reference": "^3.0.1",
+        "locate-character": "^3.0.0",
+        "magic-string": "^0.30.4",
+        "periscopic": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/svelte-hmr": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.16.0.tgz",
+      "integrity": "sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==",
+      "license": "ISC",
+      "engines": {
+        "node": "^12.20 || ^14.13.1 || >= 16"
+      },
+      "peerDependencies": {
+        "svelte": "^3.19.0 || ^4.0.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "dev": true,
@@ -5140,7 +5260,6 @@
     },
     "node_modules/terser": {
       "version": "5.32.0",
-      "dev": true,
       "license": "BSD-2-Clause",
       "optional": true,
       "peer": true,
@@ -5159,7 +5278,6 @@
     },
     "node_modules/terser/node_modules/commander": {
       "version": "2.20.3",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "peer": true
@@ -5185,12 +5303,12 @@
     },
     "node_modules/tinybench": {
       "version": "2.9.0",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/tinyexec": {
       "version": "0.3.0",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/tinyglobby": {
@@ -5207,7 +5325,7 @@
     },
     "node_modules/tinypool": {
       "version": "1.0.1",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": "^18.0.0 || >=20.0.0"
@@ -5215,7 +5333,7 @@
     },
     "node_modules/tinyrainbow": {
       "version": "1.2.0",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=14.0.0"
@@ -5223,7 +5341,7 @@
     },
     "node_modules/tinyspy": {
       "version": "3.0.2",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=14.0.0"
@@ -5348,7 +5466,7 @@
     },
     "node_modules/undici-types": {
       "version": "6.19.8",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/universalify": {
@@ -5440,7 +5558,6 @@
     },
     "node_modules/vite": {
       "version": "5.4.6",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.21.3",
@@ -5498,7 +5615,7 @@
     },
     "node_modules/vite-node": {
       "version": "2.1.1",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "cac": "^6.7.14",
@@ -5516,9 +5633,23 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/vitefu": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz",
+      "integrity": "sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "vite": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vitest": {
       "version": "2.1.1",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@vitest/expect": "2.1.1",
@@ -5653,7 +5784,7 @@
     },
     "node_modules/why-is-node-running": {
       "version": "2.3.0",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "siginfo": "^2.0.0",