From 3e1a49506dd37664efcf50a6e016d143f14e2ab8 Mon Sep 17 00:00:00 2001
From: NathanosDev <contact@nathanos.dev>
Date: Thu, 9 Jan 2025 01:43:37 +0100
Subject: [PATCH] ci: add playwright tests, update turbo

---
 .bun-version                                  |   1 +
 .github/actions/setup-bun/action.yml          |   4 +-
 .github/actions/setup-node/action.yml         |  23 +-
 .github/workflows/build.yml                   |  31 ++
 .github/workflows/codestyle.yml               |  41 +++
 .github/workflows/integration-test.yml        |  39 ---
 .github/workflows/mainnet-deploy.yml          |  11 +-
 .github/workflows/rust-tests.yml              |  24 --
 .github/workflows/tests.yml                   |  76 ++++
 .github/workflows/typescript-tests.yml        |  23 --
 .gitignore                                    |   2 +
 .vscode/extensions.json                       |   3 +-
 README.md                                     |  42 ++-
 lib/ui/.storybook/main.ts                     |  20 +-
 lib/ui/.storybook/preview.ts                  |   2 +-
 lib/ui/package.json                           |  23 +-
 lib/ui/playwright.config.ts                   |   6 +
 lib/ui/src/coercion/coerce-boolean.ts         |  26 ++
 lib/ui/src/coercion/coerce-theme.ts           |  13 +
 lib/ui/src/coercion/index.ts                  |   2 +
 .../src/components/atoms/badge/badge.e2e.ts   |  50 +++
 .../components/atoms/badge/badge.stories.ts   |   2 +-
 lib/ui/src/components/atoms/badge/badge.tsx   |   9 +-
 lib/ui/src/components/atoms/card/card.e2e.ts  |  57 +++
 .../src/components/atoms/card/card.stories.ts |   2 +-
 .../atoms/focus-ring/focus-ring.e2e.ts        |  85 +++++
 .../atoms/focus-ring/focus-ring.scss          |   5 +-
 .../atoms/focus-ring/focus-ring.tsx           |  16 +-
 .../atoms/icon-btn/icon-btn.stories.ts        |   2 +-
 .../components/atoms/icons/icons.stories.ts   |   2 +-
 .../link-text-btn/link-text-btn.stories.ts    |   2 +-
 .../atoms/radio-input/radio-input.stories.ts  |   2 +-
 .../atoms/text-area/text-area.stories.ts      |   2 +-
 .../atoms/text-btn/text-btn.stories.ts        |   2 +-
 .../atoms/text-input/text-input.stories.ts    |   2 +-
 .../collapsible/collapsible.stories.ts        |   2 +-
 .../copy-to-clipboard.stories.ts              |   2 +-
 .../molecules/dropdown/dropdown.stories.ts    |   2 +-
 .../image-uploader-btn.stories.ts             |   2 +-
 .../loading-btn/loading-btn.stories.ts        |   2 +-
 .../organisms/footer/footer.stories.ts        |   2 +-
 .../organisms/navbar/navbar.stories.ts        |   2 +-
 .../organisms/sidenav/sidenav.stories.ts      |   2 +-
 lib/ui/stencil.config.ts                      |   6 +
 lib/ui/tsconfig.json                          |   2 +-
 package.json                                  |   7 +-
 pnpm-lock.yaml                                | 327 ++++++++++++------
 turbo.json                                    |  11 +-
 48 files changed, 750 insertions(+), 271 deletions(-)
 create mode 100644 .bun-version
 create mode 100644 .github/workflows/build.yml
 create mode 100644 .github/workflows/codestyle.yml
 delete mode 100644 .github/workflows/integration-test.yml
 delete mode 100644 .github/workflows/rust-tests.yml
 create mode 100644 .github/workflows/tests.yml
 delete mode 100644 .github/workflows/typescript-tests.yml
 create mode 100644 lib/ui/playwright.config.ts
 create mode 100644 lib/ui/src/coercion/coerce-boolean.ts
 create mode 100644 lib/ui/src/coercion/coerce-theme.ts
 create mode 100644 lib/ui/src/coercion/index.ts
 create mode 100644 lib/ui/src/components/atoms/badge/badge.e2e.ts
 create mode 100644 lib/ui/src/components/atoms/card/card.e2e.ts
 create mode 100644 lib/ui/src/components/atoms/focus-ring/focus-ring.e2e.ts

diff --git a/.bun-version b/.bun-version
new file mode 100644
index 00000000..2c69d9f9
--- /dev/null
+++ b/.bun-version
@@ -0,0 +1 @@
+1.1.43
diff --git a/.github/actions/setup-bun/action.yml b/.github/actions/setup-bun/action.yml
index c6f9d935..9b057f5c 100644
--- a/.github/actions/setup-bun/action.yml
+++ b/.github/actions/setup-bun/action.yml
@@ -5,4 +5,6 @@ runs:
   using: 'composite'
   steps:
     - name: Setup Bun
-      uses: oven-sh/setup-bun@v1
+      uses: oven-sh/setup-bun@v2
+      with:
+        bun-version-file: '.bun-version'
diff --git a/.github/actions/setup-node/action.yml b/.github/actions/setup-node/action.yml
index 474e1e4b..0746ddb6 100644
--- a/.github/actions/setup-node/action.yml
+++ b/.github/actions/setup-node/action.yml
@@ -12,29 +12,18 @@ runs:
         restore-keys: |
           ${{ runner.os }}-turbo-
 
-    - name: Install NodeJS
-      uses: actions/setup-node@v4
-      with:
-        node-version-file: '.node-version'
-        registry-url: 'https://registry.npmjs.org'
-
-    - uses: pnpm/action-setup@v3
+    - uses: pnpm/action-setup@v4
       name: Install pnpm
       id: pnpm-install
       with:
         run_install: false
 
-    - name: Get pnpm store directory
-      shell: bash
-      run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-    - uses: actions/cache@v4
-      name: Setup pnpm cache
+    - name: Install NodeJS
+      uses: actions/setup-node@v4
       with:
-        path: ${{ env.STORE_PATH }}
-        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-        restore-keys: |
-          ${{ runner.os }}-pnpm-store-
+        node-version-file: '.node-version'
+        registry-url: 'https://registry.npmjs.org'
+        cache: 'pnpm'
 
     - name: Install dependencies
       shell: bash
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
new file mode 100644
index 00000000..b73920e1
--- /dev/null
+++ b/.github/workflows/build.yml
@@ -0,0 +1,31 @@
+name: Build
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - name: Setup NodeJS
+        uses: ./.github/actions/setup-node
+
+      - name: Setup environment files
+        uses: ./.github/actions/setup-env-files
+        with:
+          storyblok-token: ${{ secrets.STAGING_STORYBLOK_TOKEN }}
+
+      - name: Setup DFX
+        uses: ./.github/actions/setup-dfx
+
+      - name: DFX build
+        run: dfx build --check
diff --git a/.github/workflows/codestyle.yml b/.github/workflows/codestyle.yml
new file mode 100644
index 00000000..59a44663
--- /dev/null
+++ b/.github/workflows/codestyle.yml
@@ -0,0 +1,41 @@
+name: Codestyle
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  rust_codestyle:
+    name: Rust codestyle
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - name: Cargo fmt
+        run: cargo fmt -- --check
+
+      - name: Cargo clippy
+        run: cargo clippy --all-targets --all-features
+
+  typescript_codestyle:
+    name: TypeScript codestyle
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - name: Setup NodeJS
+        uses: ./.github/actions/setup-node
+
+      - name: Check TypeScript formatting
+        run: pnpm format:check
+
+      - name: Run ESLint
+        run: pnpm lint
diff --git a/.github/workflows/integration-test.yml b/.github/workflows/integration-test.yml
deleted file mode 100644
index 76909da7..00000000
--- a/.github/workflows/integration-test.yml
+++ /dev/null
@@ -1,39 +0,0 @@
-name: Integration tests
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-
-jobs:
-  integration_tests:
-    name: Integration tests
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 2
-
-      - uses: ./.github/actions/setup-node
-
-      - uses: ./.github/actions/setup-env-files
-        with:
-          storyblok-token: ${{ secrets.STAGING_STORYBLOK_TOKEN }}
-
-      - uses: ./.github/actions/setup-bun
-
-      - uses: ./.github/actions/setup-dfx
-
-      - name: DFX build
-        run: dfx build --check
-
-      - name: Backend integration tests
-        run: pnpm -F backend-integration test
-
-      - name: Frontend unit tests
-        run: pnpm -F frontend test
-
-      - name: UI library unit tests
-        run: pnpm -F @cg/angular-ui test
diff --git a/.github/workflows/mainnet-deploy.yml b/.github/workflows/mainnet-deploy.yml
index 0f1c0997..9d39c22f 100644
--- a/.github/workflows/mainnet-deploy.yml
+++ b/.github/workflows/mainnet-deploy.yml
@@ -10,18 +10,21 @@ jobs:
       name: mainnet
       url: https://npiey-xiaaa-aaaal-qcx2q-cai.icp0.io
     steps:
-      - name: Checkout Code
+      - name: Checkout code
         uses: actions/checkout@v4
         with:
           fetch-depth: 2
 
-      - uses: ./.github/actions/setup-node
+      - name: Setup NodeJS
+        uses: ./.github/actions/setup-node
 
-      - uses: ./.github/actions/setup-env-files
+      - name: Setup environment files
+        uses: ./.github/actions/setup-env-files
         with:
           storyblok-token: ${{ secrets.PRODUCTION_STORYBLOK_TOKEN }}
 
-      - uses: ./.github/actions/setup-dfx
+      - name: Setup DFX
+        uses: ./.github/actions/setup-dfx
 
       - name: Import DFX identity
         run: |
diff --git a/.github/workflows/rust-tests.yml b/.github/workflows/rust-tests.yml
deleted file mode 100644
index f243a15f..00000000
--- a/.github/workflows/rust-tests.yml
+++ /dev/null
@@ -1,24 +0,0 @@
-name: Rust tests
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-
-jobs:
-  rust_tests:
-    name: Rust tests
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Code
-        uses: actions/checkout@v4
-
-      - name: Cargo fmt
-        run: cargo fmt -- --check
-
-      - name: Cargo clippy
-        run: cargo clippy --all-targets --all-features
-
-      - name: Cargo test
-        run: cargo test
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
new file mode 100644
index 00000000..5c17237f
--- /dev/null
+++ b/.github/workflows/tests.yml
@@ -0,0 +1,76 @@
+name: Tests
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  rust_tests:
+    name: Rust tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - name: Cargo test
+        run: cargo test
+
+  typescript_tests:
+    name: Typescript tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - name: Setup NodeJS
+        uses: ./.github/actions/setup-node
+
+      - name: Install Playwright dependencies
+        run: pnpm run playwright-install
+
+      - name: Setup dfx
+        uses: ./.github/actions/setup-dfx
+
+      - name: Setup environment files
+        uses: ./.github/actions/setup-env-files
+        with:
+          storyblok-token: ${{ secrets.STAGING_STORYBLOK_TOKEN }}
+
+      - name: UI library tests
+        run: pnpm turbo test -F @cg/ui
+
+      - name: Angular UI library tests
+        run: pnpm turbo test -F @cg/angular-ui
+
+      - name: Frontend unit tests
+        run: pnpm turbo test -F frontend
+
+  backend_integration_tests:
+    name: Backend integration tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - name: Setup NodeJS
+        uses: ./.github/actions/setup-node
+
+      - name: Setup bun
+        uses: ./.github/actions/setup-bun
+
+      - name: Setup dfx
+        uses: ./.github/actions/setup-dfx
+
+      - name: DFX build
+        run: dfx build backend --check
+
+      - name: Backend integration tests
+        run: pnpm turbo test -F backend-integration
diff --git a/.github/workflows/typescript-tests.yml b/.github/workflows/typescript-tests.yml
deleted file mode 100644
index 73c1fd2c..00000000
--- a/.github/workflows/typescript-tests.yml
+++ /dev/null
@@ -1,23 +0,0 @@
-name: TypeScript tests
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-
-jobs:
-  typescript_tests:
-    name: TypeScript tests
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Code
-        uses: actions/checkout@v4
-
-      - uses: ./.github/actions/setup-node
-
-      - name: Check TypeScript Formatting
-        run: pnpm format:check
-
-      - name: Run ESLint
-        run: pnpm lint
diff --git a/.gitignore b/.gitignore
index e17c27a1..5af17dac 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,6 +19,8 @@ dist/
 .turbo/
 coverage/
 .angular/
+www/
+test-results/
 
 # environment variables
 .env
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 1f1fccf2..4bf0ef22 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -7,6 +7,7 @@
     "astro-build.astro-vscode",
     "angular.ng-template",
     "tamasfe.even-better-toml",
-    "rust-lang.rust-analyzer"
+    "rust-lang.rust-analyzer",
+    "vercel.turbo-vsc"
   ]
 }
diff --git a/README.md b/README.md
index 48faa9ae..16a8fea2 100644
--- a/README.md
+++ b/README.md
@@ -54,6 +54,20 @@ Else, refer to the following sections.
 | `dfx deploy docs`          | Deploy to a local DFX replica  |
 | `pnpm turbo start -F docs` | Run a local development server |
 
+### `@cg/ui`
+
+| Command                      | Description       |
+| ---------------------------- | ----------------- |
+| `pnpm turbo build -F @cg/ui` | Build the library |
+| `pnpm turbo test -F @cg/ui`  | Run unit tests    |
+
+### `@cg/ui-angular`
+
+| Command                              | Description       |
+| ------------------------------------ | ----------------- |
+| `pnpm turbo build -F @cg/ui-angular` | Build the library |
+| `pnpm turbo test -F @cg/ui-angular`  | Run unit tests    |
+
 ### Backend
 
 The primary backend canister for CodeGov proposal review management.
@@ -297,7 +311,6 @@ dfx canister call backend update_user_profile '(record { user_id = "${userId}";
 Or to only upgrade a user to a reviewer:
 
 ```bash
-
 dfx canister call backend update_user_profile '(record { user_id = "${userId}"; config = opt variant { reviewer = record {} } })'
 ```
 
@@ -353,6 +366,33 @@ To list open replica version management proposals:
   - `payload` is the Candid encoded argument for the corresponding NNS function. The types for this argument can be found in the appropriate canister's declaration. A mapping between NNS functions and their corresponding canisters can be found in the [`NnsFunction::canister_and_function`](https://github.com/dfinity/ic/blob/master/rs/nns/governance/src/governance.rs#L527-L631) function definition.
   - For example, the `UpdateElectedReplicaVersions` uses number `38` and its payload is the [`UpdateElectedReplicaVersionsPayload`](https://github.com/dfinity/ic/blob/master/rs/registry/canister/canister/registry.did#L217-L223) record.
 
+### Getting proposals for testing
+
+Open the [NNS canister interface on the dashboard](https://dashboard.internetcomputer.org/canister/rrkah-fqaaa-aaaaa-aaaaq-cai#list_proposals). It should open on the `list_proposals` method.
+
+- Set `limit` to whatever you want, although lower numbers are recommended for a more manageable data set.
+- Set the `exclude_topic` length to `17`
+- Add the following topics to the `exclude_topic` list:
+  - `0` for `Unspecified`
+  - `1` for `NeuronManagement`
+  - `2` for `ExchangeRate`
+  - `3` for `NetworkEconomics`
+  - `4` for `Governance`
+  - `5` for `NodeAdmin`
+  - `6` for `ParticipantManagement`
+  - `7` for `SubnetManagement`
+  - `8` for `NetworkCanisterManagement`
+  - `9` for `Kyc`
+  - `10` for `NodeProviderRewards`
+  - `12` for `IcOsVersionDeployment`
+  - `14` for `SnsAndCommunityFund`
+  - `15` for `ApiBoundaryNodeManagement`
+  - `16` for `SubnetRental`
+  - `17` for `ProtocolCanisterManagement`
+  - `18` for `ServiceNervousSystemManagement`
+- Note that `11` currently doesn't exist, and `13` is `IcOsVersionElection`, the topic we want.
+- Finally, click the `Call` button to get a list of proposals.
+
 ### Manually syncing proposals
 
 To manually trigger the proposals synchronization from the Nervous Systems, run the following command:
diff --git a/lib/ui/.storybook/main.ts b/lib/ui/.storybook/main.ts
index 612e9857..e3065721 100644
--- a/lib/ui/.storybook/main.ts
+++ b/lib/ui/.storybook/main.ts
@@ -1,7 +1,7 @@
-import { type StorybookConfig } from '@storybook/html-vite';
+import { type StorybookConfig } from '@storybook/web-components-vite';
 
 const config: StorybookConfig = {
-  framework: '@storybook/html-vite',
+  framework: '@storybook/web-components-vite',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     {
@@ -13,6 +13,22 @@ const config: StorybookConfig = {
       },
     },
   ],
+  async viteFinal(config, { configType }) {
+    const { mergeConfig } = await import('vite');
+
+    if (configType !== 'DEVELOPMENT') {
+      return config;
+    }
+
+    return mergeConfig(config, {
+      build: {
+        // this is set to 'dist' by default which causes hot-reloading for stencil components to break
+        // see: https://vitejs.dev/config/server-options.html#server-watch
+        // setting it to anything other than dist fixes the issue
+        outDir: 'dist-vite',
+      },
+    });
+  },
 };
 
 export default config;
diff --git a/lib/ui/.storybook/preview.ts b/lib/ui/.storybook/preview.ts
index 445de600..32c4f804 100644
--- a/lib/ui/.storybook/preview.ts
+++ b/lib/ui/.storybook/preview.ts
@@ -1,4 +1,4 @@
-import { type Preview } from '@storybook/html';
+import { type Preview } from '@storybook/web-components';
 import { defineCustomElements } from '../loader';
 import '@cg/styles/global.scss';
 
diff --git a/lib/ui/package.json b/lib/ui/package.json
index 1260e16e..657cd2c6 100644
--- a/lib/ui/package.json
+++ b/lib/ui/package.json
@@ -16,21 +16,22 @@
     "build": "stencil build",
     "watch": "stencil build --watch",
     "storybook": "storybook dev -p 6006 --no-open",
-    "build:storybook": "storybook build"
+    "build:storybook": "storybook build",
+    "test": "playwright test",
+    "test:watch": "playwright test --ui"
   },
   "dependencies": {
     "@cg/styles": "workspace:*",
-    "@stencil/core": "^4.14.1"
+    "@stencil/core": "^4.23.1"
   },
   "devDependencies": {
-    "@stencil/sass": "^3.0.11",
-    "@storybook/addon-essentials": "^8.0.6",
-    "@storybook/blocks": "^8.0.6",
-    "@storybook/html": "^8.0.6",
-    "@storybook/html-vite": "^8.0.6",
-    "@storybook/test": "^8.0.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "storybook": "^8.0.6"
+    "@stencil/playwright": "^0.2.1",
+    "@stencil/sass": "^3.0.12",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@storybook/web-components": "^8.4.7",
+    "@storybook/web-components-vite": "^8.4.7",
+    "storybook": "^8.4.7"
   }
 }
diff --git a/lib/ui/playwright.config.ts b/lib/ui/playwright.config.ts
new file mode 100644
index 00000000..eef20236
--- /dev/null
+++ b/lib/ui/playwright.config.ts
@@ -0,0 +1,6 @@
+import { expect } from '@playwright/test';
+import { matchers, createConfig } from '@stencil/playwright';
+
+expect.extend(matchers);
+
+export default createConfig({});
diff --git a/lib/ui/src/coercion/coerce-boolean.ts b/lib/ui/src/coercion/coerce-boolean.ts
new file mode 100644
index 00000000..543fc0b2
--- /dev/null
+++ b/lib/ui/src/coercion/coerce-boolean.ts
@@ -0,0 +1,26 @@
+export type LooseBoolean =
+  | boolean
+  | 'true'
+  | 'false'
+  | 1
+  | 0
+  | '1'
+  | '0'
+  | ''
+  | null
+  | undefined;
+
+const falseValues: LooseBoolean[] = ['false', false, '0', 0];
+const trueValues: LooseBoolean[] = ['', 'true', true, '1', 1, null, undefined];
+
+export function coerceBoolean(value: LooseBoolean): boolean {
+  if (falseValues.includes(value)) {
+    return false;
+  }
+
+  if (trueValues.includes(value)) {
+    return true;
+  }
+
+  throw new Error(`Invalid boolean value: "${value}"`);
+}
diff --git a/lib/ui/src/coercion/coerce-theme.ts b/lib/ui/src/coercion/coerce-theme.ts
new file mode 100644
index 00000000..b282a945
--- /dev/null
+++ b/lib/ui/src/coercion/coerce-theme.ts
@@ -0,0 +1,13 @@
+import { Theme } from '../types';
+
+export function coerceTheme(theme: unknown): Theme {
+  if (!isTheme(theme)) {
+    throw new Error(`Invalid theme: "${theme}"`);
+  }
+
+  return theme;
+}
+
+export function isTheme(theme: unknown): theme is Theme {
+  return theme === 'primary' || theme === 'success' || theme === 'error';
+}
diff --git a/lib/ui/src/coercion/index.ts b/lib/ui/src/coercion/index.ts
new file mode 100644
index 00000000..f549d45a
--- /dev/null
+++ b/lib/ui/src/coercion/index.ts
@@ -0,0 +1,2 @@
+export * from './coerce-boolean';
+export * from './coerce-theme';
diff --git a/lib/ui/src/components/atoms/badge/badge.e2e.ts b/lib/ui/src/components/atoms/badge/badge.e2e.ts
new file mode 100644
index 00000000..fc32b3d3
--- /dev/null
+++ b/lib/ui/src/components/atoms/badge/badge.e2e.ts
@@ -0,0 +1,50 @@
+import { expect } from '@playwright/test';
+import { test } from '@stencil/playwright';
+
+test.describe('cg-badge', () => {
+  const content = 'Badge content';
+  const compLoc = 'cg-badge';
+
+  test('should render content with default theme', async ({ page }) => {
+    await page.setContent(`
+      <cg-badge>
+        ${content}
+      </cg-badge>
+    `);
+
+    const component = page.locator(compLoc);
+    await expect(component).toHaveText(content);
+    await expect(component).toHaveClass(/badge--primary/);
+  });
+
+  ['primary', 'success', 'error'].forEach(theme => {
+    test(`should render content with ${theme} theme`, async ({ page }) => {
+      await page.setContent(`
+        <cg-badge theme="${theme}">
+          ${content}
+        </cg-badge>
+      `);
+
+      const component = page.locator(compLoc);
+      await expect(component).toHaveText(content);
+      await expect(component).toHaveClass(new RegExp(`badge--${theme}`));
+    });
+  });
+
+  test('should throw error for an invalid theme', async ({ page }) => {
+    let errorThrown = false;
+    page.on('pageerror', error => {
+      if (error.message === 'Invalid theme: "garbage"') {
+        errorThrown = true;
+      }
+    });
+
+    await page.setContent(`
+      <cg-badge theme="garbage">
+        ${content}
+      </cg-badge>
+    `);
+
+    expect(errorThrown).toBe(true);
+  });
+});
diff --git a/lib/ui/src/components/atoms/badge/badge.stories.ts b/lib/ui/src/components/atoms/badge/badge.stories.ts
index 3ccf65bc..da887003 100644
--- a/lib/ui/src/components/atoms/badge/badge.stories.ts
+++ b/lib/ui/src/components/atoms/badge/badge.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/html';
+import { Meta, StoryObj } from '@storybook/web-components';
 import { Theme } from '../../../types';
 
 interface Args {
diff --git a/lib/ui/src/components/atoms/badge/badge.tsx b/lib/ui/src/components/atoms/badge/badge.tsx
index 5b04e1cd..f9ca741c 100644
--- a/lib/ui/src/components/atoms/badge/badge.tsx
+++ b/lib/ui/src/components/atoms/badge/badge.tsx
@@ -1,5 +1,6 @@
 import { Component, ComponentInterface, Host, Prop, h } from '@stencil/core';
 import { Theme } from '../../../types';
+import { coerceTheme } from '../../../coercion';
 
 @Component({
   tag: 'cg-badge',
@@ -8,7 +9,13 @@ import { Theme } from '../../../types';
 })
 export class BadgeComponent implements ComponentInterface {
   @Prop({ reflect: true })
-  public theme: Theme = 'primary';
+  public get theme(): Theme {
+    return this.#theme;
+  }
+  public set theme(value: Theme) {
+    this.#theme = coerceTheme(value);
+  }
+  #theme: Theme = 'primary';
 
   public render() {
     return (
diff --git a/lib/ui/src/components/atoms/card/card.e2e.ts b/lib/ui/src/components/atoms/card/card.e2e.ts
new file mode 100644
index 00000000..54e52089
--- /dev/null
+++ b/lib/ui/src/components/atoms/card/card.e2e.ts
@@ -0,0 +1,57 @@
+import { expect } from '@playwright/test';
+import { test } from '@stencil/playwright';
+
+test.describe('cg-card', () => {
+  const title = 'Card title';
+  const content = 'Card content';
+
+  const compLoc = 'cg-card';
+  const cardTitleLoc = '[slot="cardTitle"]';
+  const cardContentLoc = '[slot="cardContent"]';
+
+  test(`should render title & content`, async ({ page }) => {
+    await page.setContent(`
+      <cg-card>
+        <div slot="cardTitle">${title}</div>
+        <div slot="cardContent">${content}</div>
+      </cg-card>
+    `);
+
+    const component = page.locator(compLoc);
+    const cardTitle = component.locator(cardTitleLoc);
+    const cardContent = component.locator(cardContentLoc);
+
+    await expect(cardTitle).toHaveText(title);
+    await expect(cardContent).toHaveText(content);
+  });
+
+  test(`should render title only`, async ({ page }) => {
+    await page.setContent(`
+      <cg-card>
+        <div slot="cardTitle">${title}</div>
+      </cg-card>
+    `);
+
+    const component = page.locator(compLoc);
+    const cardTitle = component.locator(cardTitleLoc);
+    const cardContent = component.locator(cardContentLoc);
+
+    await expect(cardTitle).toHaveText(title);
+    await expect(cardContent).not.toBeVisible();
+  });
+
+  test(`should render content only`, async ({ page }) => {
+    await page.setContent(`
+      <cg-card>
+        <div slot="cardContent">${content}</div>
+      </cg-card>
+    `);
+
+    const component = page.locator(compLoc);
+    const cardTitle = component.locator(cardTitleLoc);
+    const cardContent = component.locator(cardContentLoc);
+
+    await expect(cardTitle).not.toBeVisible();
+    await expect(cardContent).toHaveText(content);
+  });
+});
diff --git a/lib/ui/src/components/atoms/card/card.stories.ts b/lib/ui/src/components/atoms/card/card.stories.ts
index 9cd3c700..0c55b1ba 100644
--- a/lib/ui/src/components/atoms/card/card.stories.ts
+++ b/lib/ui/src/components/atoms/card/card.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/html';
+import { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Atoms/Cards',
diff --git a/lib/ui/src/components/atoms/focus-ring/focus-ring.e2e.ts b/lib/ui/src/components/atoms/focus-ring/focus-ring.e2e.ts
new file mode 100644
index 00000000..f56bdd09
--- /dev/null
+++ b/lib/ui/src/components/atoms/focus-ring/focus-ring.e2e.ts
@@ -0,0 +1,85 @@
+import { test } from '@stencil/playwright';
+import { expect } from '@playwright/test';
+
+test.describe('cg-focus-ring', () => {
+  const compLoc = 'cg-focus-ring';
+
+  test('should render unfocused focus ring with default theme', async ({
+    page,
+  }) => {
+    await page.setContent(`<cg-focus-ring />`);
+
+    const component = page.locator(compLoc);
+
+    await expect(component).not.toHaveClass(/focus-ring--visible/);
+    await expect(component).toHaveClass(/focus-ring--primary/);
+  });
+
+  test('should render focused focus ring with default theme', async ({
+    page,
+  }) => {
+    await page.setContent(`<cg-focus-ring is-focused />`);
+
+    const component = page.locator(compLoc);
+
+    await expect(component).toHaveClass(/focus-ring--visible/);
+    await expect(component).toHaveClass(/focus-ring--primary/);
+  });
+
+  test('should render unfocused focus ring when isFocused is false', async ({
+    page,
+  }) => {
+    await page.setContent(`<cg-focus-ring is-focused="false" />`);
+
+    const component = page.locator(compLoc);
+
+    await expect(component).not.toHaveClass(/focus-ring--visible/);
+  });
+
+  ['', 'true', 'string'].forEach(value => {
+    test(`should render focused focus ring when isFocused is ${value}`, async ({
+      page,
+    }) => {
+      await page.setContent(`<cg-focus-ring is-focused="${value}" />`);
+
+      const component = page.locator(compLoc);
+
+      await expect(component).toHaveClass(/focus-ring--visible/);
+    });
+  });
+
+  ['primary', 'success', 'error'].forEach(theme => {
+    test(`should render focus ring with ${theme} theme`, async ({ page }) => {
+      await page.setContent(`<cg-focus-ring theme="${theme}" />`);
+
+      const component = page.locator(compLoc);
+
+      await expect(component).not.toHaveClass(/focus-ring--visible/);
+      await expect(component).toHaveClass(new RegExp(`focus-ring--${theme}`));
+    });
+
+    test(`should render focused focus ring with ${theme} theme`, async ({
+      page,
+    }) => {
+      await page.setContent(`<cg-focus-ring theme="${theme}" is-focused />`);
+
+      const component = page.locator(compLoc);
+
+      await expect(component).toHaveClass(/focus-ring--visible/);
+      await expect(component).toHaveClass(new RegExp(`focus-ring--${theme}`));
+    });
+  });
+
+  test('should throw error for an invalid theme', async ({ page }) => {
+    let errorThrown = false;
+    page.on('pageerror', error => {
+      if (error.message === 'Invalid theme: "garbage"') {
+        errorThrown = true;
+      }
+    });
+
+    await page.setContent(`<cg-focus-ring theme="garbage" />`);
+
+    expect(errorThrown).toBe(true);
+  });
+});
diff --git a/lib/ui/src/components/atoms/focus-ring/focus-ring.scss b/lib/ui/src/components/atoms/focus-ring/focus-ring.scss
index 8294570a..3302bdd5 100644
--- a/lib/ui/src/components/atoms/focus-ring/focus-ring.scss
+++ b/lib/ui/src/components/atoms/focus-ring/focus-ring.scss
@@ -11,7 +11,6 @@ $focus-ring-color: common.$primary-dark;
   right: $focus-ring-width;
   bottom: $focus-ring-width;
   pointer-events: none;
-  box-shadow: 0 0 0 $focus-ring-width $focus-ring-color;
 
   opacity: 0;
   @include common.quick-transition(opacity);
@@ -21,6 +20,10 @@ $focus-ring-color: common.$primary-dark;
   opacity: 1;
 }
 
+:host-context(.focus-ring--primary) {
+  box-shadow: 0 0 0 $focus-ring-width common.$primary-dark;
+}
+
 :host-context(.focus-ring--success) {
   box-shadow: 0 0 0 $focus-ring-width common.$success;
 }
diff --git a/lib/ui/src/components/atoms/focus-ring/focus-ring.tsx b/lib/ui/src/components/atoms/focus-ring/focus-ring.tsx
index 404ae8b7..470178cd 100644
--- a/lib/ui/src/components/atoms/focus-ring/focus-ring.tsx
+++ b/lib/ui/src/components/atoms/focus-ring/focus-ring.tsx
@@ -1,5 +1,6 @@
 import { Component, ComponentInterface, Host, Prop, h } from '@stencil/core';
 import { Theme } from '../../../types';
+import { coerceTheme } from '../../../coercion';
 
 @Component({
   tag: 'cg-focus-ring',
@@ -8,19 +9,24 @@ import { Theme } from '../../../types';
 })
 export class FocusRingComponent implements ComponentInterface {
   @Prop({ reflect: true })
-  public isFocused?: boolean;
+  public get theme(): Theme {
+    return this.#theme;
+  }
+  public set theme(value: Theme) {
+    this.#theme = coerceTheme(value);
+  }
+  #theme: Theme = 'primary';
 
   @Prop({ reflect: true })
-  public theme?: Theme;
+  public isFocused: boolean = false;
 
   public render() {
     return (
       <Host
         class={{
           'focus-ring': true,
-          'focus-ring--visible': this.isFocused ?? false,
-          'focus-ring--success': this.theme === 'success',
-          'focus-ring--error': this.theme === 'error',
+          'focus-ring--visible': this.isFocused,
+          [`focus-ring--${this.theme}`]: true,
         }}
       />
     );
diff --git a/lib/ui/src/components/atoms/icon-btn/icon-btn.stories.ts b/lib/ui/src/components/atoms/icon-btn/icon-btn.stories.ts
index ebaf2d42..ffb06e05 100644
--- a/lib/ui/src/components/atoms/icon-btn/icon-btn.stories.ts
+++ b/lib/ui/src/components/atoms/icon-btn/icon-btn.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/html';
+import { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Atoms/Icon Buttons',
diff --git a/lib/ui/src/components/atoms/icons/icons.stories.ts b/lib/ui/src/components/atoms/icons/icons.stories.ts
index c50a2d3d..fc5da15a 100644
--- a/lib/ui/src/components/atoms/icons/icons.stories.ts
+++ b/lib/ui/src/components/atoms/icons/icons.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/html';
+import { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Atoms/Icons',
diff --git a/lib/ui/src/components/atoms/link-text-btn/link-text-btn.stories.ts b/lib/ui/src/components/atoms/link-text-btn/link-text-btn.stories.ts
index a9fa88ef..b88606fd 100644
--- a/lib/ui/src/components/atoms/link-text-btn/link-text-btn.stories.ts
+++ b/lib/ui/src/components/atoms/link-text-btn/link-text-btn.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/html';
+import { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Atoms/Link Text Buttons',
diff --git a/lib/ui/src/components/atoms/radio-input/radio-input.stories.ts b/lib/ui/src/components/atoms/radio-input/radio-input.stories.ts
index 9c9029a8..c538dfb6 100644
--- a/lib/ui/src/components/atoms/radio-input/radio-input.stories.ts
+++ b/lib/ui/src/components/atoms/radio-input/radio-input.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/html';
+import { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Atoms/Radio Inputs',
diff --git a/lib/ui/src/components/atoms/text-area/text-area.stories.ts b/lib/ui/src/components/atoms/text-area/text-area.stories.ts
index e350a129..22a73558 100644
--- a/lib/ui/src/components/atoms/text-area/text-area.stories.ts
+++ b/lib/ui/src/components/atoms/text-area/text-area.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/html';
+import { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Atoms/Text Areas',
diff --git a/lib/ui/src/components/atoms/text-btn/text-btn.stories.ts b/lib/ui/src/components/atoms/text-btn/text-btn.stories.ts
index 0c4e12cc..4ae155ab 100644
--- a/lib/ui/src/components/atoms/text-btn/text-btn.stories.ts
+++ b/lib/ui/src/components/atoms/text-btn/text-btn.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/html';
+import { Meta, StoryObj } from '@storybook/web-components';
 import { Theme } from '../../../types';
 
 interface Args {
diff --git a/lib/ui/src/components/atoms/text-input/text-input.stories.ts b/lib/ui/src/components/atoms/text-input/text-input.stories.ts
index 1930e704..3fb4467b 100644
--- a/lib/ui/src/components/atoms/text-input/text-input.stories.ts
+++ b/lib/ui/src/components/atoms/text-input/text-input.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/html';
+import { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Atoms/Text Inputs',
diff --git a/lib/ui/src/components/molecules/collapsible/collapsible.stories.ts b/lib/ui/src/components/molecules/collapsible/collapsible.stories.ts
index bf90420d..41479b8c 100644
--- a/lib/ui/src/components/molecules/collapsible/collapsible.stories.ts
+++ b/lib/ui/src/components/molecules/collapsible/collapsible.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/html';
+import { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Molecules/Collapsible',
diff --git a/lib/ui/src/components/molecules/copy-to-clipboard/copy-to-clipboard.stories.ts b/lib/ui/src/components/molecules/copy-to-clipboard/copy-to-clipboard.stories.ts
index 6ed3972b..47683528 100644
--- a/lib/ui/src/components/molecules/copy-to-clipboard/copy-to-clipboard.stories.ts
+++ b/lib/ui/src/components/molecules/copy-to-clipboard/copy-to-clipboard.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/html';
+import { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Molecules/Copy To Clipboard',
diff --git a/lib/ui/src/components/molecules/dropdown/dropdown.stories.ts b/lib/ui/src/components/molecules/dropdown/dropdown.stories.ts
index af501bfa..33dfdc10 100644
--- a/lib/ui/src/components/molecules/dropdown/dropdown.stories.ts
+++ b/lib/ui/src/components/molecules/dropdown/dropdown.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/html';
+import { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Molecules/Dropdown',
diff --git a/lib/ui/src/components/molecules/image-uploader-btn/image-uploader-btn.stories.ts b/lib/ui/src/components/molecules/image-uploader-btn/image-uploader-btn.stories.ts
index f128e538..12d755d6 100644
--- a/lib/ui/src/components/molecules/image-uploader-btn/image-uploader-btn.stories.ts
+++ b/lib/ui/src/components/molecules/image-uploader-btn/image-uploader-btn.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/html';
+import { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Molecules/Image Uploader Button',
diff --git a/lib/ui/src/components/molecules/loading-btn/loading-btn.stories.ts b/lib/ui/src/components/molecules/loading-btn/loading-btn.stories.ts
index 52bfd12d..43b48c04 100644
--- a/lib/ui/src/components/molecules/loading-btn/loading-btn.stories.ts
+++ b/lib/ui/src/components/molecules/loading-btn/loading-btn.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/html';
+import { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Molecules/Loading Button',
diff --git a/lib/ui/src/components/organisms/footer/footer.stories.ts b/lib/ui/src/components/organisms/footer/footer.stories.ts
index dd21297b..b915335c 100644
--- a/lib/ui/src/components/organisms/footer/footer.stories.ts
+++ b/lib/ui/src/components/organisms/footer/footer.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/html';
+import { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Organisms/Footer',
diff --git a/lib/ui/src/components/organisms/navbar/navbar.stories.ts b/lib/ui/src/components/organisms/navbar/navbar.stories.ts
index 05a76d8e..2a0287f5 100644
--- a/lib/ui/src/components/organisms/navbar/navbar.stories.ts
+++ b/lib/ui/src/components/organisms/navbar/navbar.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/html';
+import { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Organisms/Navbar',
diff --git a/lib/ui/src/components/organisms/sidenav/sidenav.stories.ts b/lib/ui/src/components/organisms/sidenav/sidenav.stories.ts
index b78b3f72..5e156629 100644
--- a/lib/ui/src/components/organisms/sidenav/sidenav.stories.ts
+++ b/lib/ui/src/components/organisms/sidenav/sidenav.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/html';
+import { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Organisms/Sidenav',
diff --git a/lib/ui/stencil.config.ts b/lib/ui/stencil.config.ts
index ba0e5f6c..d0bf6cd0 100644
--- a/lib/ui/stencil.config.ts
+++ b/lib/ui/stencil.config.ts
@@ -4,6 +4,7 @@ import { sass } from '@stencil/sass';
 export const config: Config = {
   namespace: 'cg-ui',
   plugins: [sass()],
+  buildDist: true,
   outputTargets: [
     {
       type: 'dist',
@@ -13,6 +14,11 @@ export const config: Config = {
     {
       type: 'dist-custom-elements',
     },
+    {
+      type: 'www',
+      serviceWorker: null,
+      copy: [{ src: '**/*.html' }, { src: '**/*.css' }],
+    },
   ],
   validatePrimaryPackageOutputTarget: true,
 };
diff --git a/lib/ui/tsconfig.json b/lib/ui/tsconfig.json
index 3193c2c6..6a4ef268 100644
--- a/lib/ui/tsconfig.json
+++ b/lib/ui/tsconfig.json
@@ -4,7 +4,7 @@
     "allowSyntheticDefaultImports": true,
     "declaration": false,
     "experimentalDecorators": true,
-    "lib": ["dom", "es2017"],
+    "lib": ["dom", "es2017", "ESNext.Disposable"],
     "moduleResolution": "node",
     "module": "esnext",
     "target": "es2017",
diff --git a/package.json b/package.json
index fcb65de6..9cd28ac9 100644
--- a/package.json
+++ b/package.json
@@ -10,12 +10,14 @@
   "scripts": {
     "turbo": "dotenv -- turbo --cache-dir=.turbo",
     "build": "pnpm turbo build",
+    "test": "pnpm turbo test",
     "lint": "eslint -c .eslintrc.js .",
     "lint:fix": "eslint -c .eslintrc.js --fix .",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "cloc": "pnpx cloc --exclude-dir=node_modules,target,build,dist,.dfx,.docusaurus --exclude-ext=yaml,yml,md,toml,json .",
-    "postinstall": "./scripts/postinstall.sh"
+    "postinstall": "./scripts/postinstall.sh",
+    "playwright-install": "playwright install --with-deps"
   },
   "dependencies": {
     "@angular/animations": "^19.0.5",
@@ -59,6 +61,7 @@
     "@hadronous/ic-angular": "0.5.1",
     "@hadronous/ic-build-angular": "0.5.1",
     "@hadronous/pic": "0.11.0",
+    "@playwright/test": "^1.49.1",
     "@types/bun": "^1.1.14",
     "@types/jasmine": "~5.1.5",
     "@types/node": "^20.17.11",
@@ -83,7 +86,7 @@
     "ng-packagr": "^19.0.1",
     "prettier": "^3.4.2",
     "prettier-plugin-astro": "^0.13.0",
-    "turbo": "^1.13.4",
+    "turbo": "^2.3.3",
     "typescript": "~5.5.4"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 813a1956..20456365 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -126,6 +126,9 @@ importers:
       '@hadronous/pic':
         specifier: 0.11.0
         version: 0.11.0(@dfinity/agent@2.2.0(@dfinity/candid@2.2.0(@dfinity/principal@2.2.0))(@dfinity/principal@2.2.0))(@dfinity/candid@2.2.0(@dfinity/principal@2.2.0))(@dfinity/identity@2.2.0(@dfinity/agent@2.2.0(@dfinity/candid@2.2.0(@dfinity/principal@2.2.0))(@dfinity/principal@2.2.0))(@dfinity/principal@2.2.0))(@dfinity/principal@2.2.0)
+      '@playwright/test':
+        specifier: ^1.49.1
+        version: 1.49.1
       '@types/bun':
         specifier: ^1.1.14
         version: 1.1.14
@@ -199,8 +202,8 @@ importers:
         specifier: ^0.13.0
         version: 0.13.0
       turbo:
-        specifier: ^1.13.4
-        version: 1.13.4
+        specifier: ^2.3.3
+        version: 2.3.3
       typescript:
         specifier: ~5.5.4
         version: 5.5.4
@@ -224,35 +227,32 @@ importers:
         specifier: workspace:*
         version: link:../styles
       '@stencil/core':
-        specifier: ^4.14.1
-        version: 4.23.0
+        specifier: ^4.23.1
+        version: 4.23.1
     devDependencies:
+      '@stencil/playwright':
+        specifier: ^0.2.1
+        version: 0.2.1(@playwright/test@1.49.1)(@stencil/core@4.23.1)
       '@stencil/sass':
-        specifier: ^3.0.11
-        version: 3.0.12(@stencil/core@4.23.0)
+        specifier: ^3.0.12
+        version: 3.0.12(@stencil/core@4.23.1)
       '@storybook/addon-essentials':
-        specifier: ^8.0.6
+        specifier: ^8.4.7
         version: 8.4.7(@types/react@18.3.18)(storybook@8.4.7(prettier@3.4.2))
       '@storybook/blocks':
-        specifier: ^8.0.6
+        specifier: ^8.4.7
         version: 8.4.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.7(prettier@3.4.2))
-      '@storybook/html':
-        specifier: ^8.0.6
-        version: 8.4.7(storybook@8.4.7(prettier@3.4.2))
-      '@storybook/html-vite':
-        specifier: ^8.0.6
-        version: 8.4.7(storybook@8.4.7(prettier@3.4.2))(vite@5.4.11(@types/node@20.17.11)(less@4.2.1)(sass@1.83.0)(terser@5.37.0))
       '@storybook/test':
-        specifier: ^8.0.6
+        specifier: ^8.4.7
         version: 8.4.7(storybook@8.4.7(prettier@3.4.2))
-      react:
-        specifier: ^18.2.0
-        version: 18.3.1
-      react-dom:
-        specifier: ^18.2.0
-        version: 18.3.1(react@18.3.1)
+      '@storybook/web-components':
+        specifier: ^8.4.7
+        version: 8.4.7(lit@3.2.1)(storybook@8.4.7(prettier@3.4.2))
+      '@storybook/web-components-vite':
+        specifier: ^8.4.7
+        version: 8.4.7(lit@3.2.1)(storybook@8.4.7(prettier@3.4.2))(vite@5.4.11(@types/node@22.10.3)(less@4.2.1)(sass@1.83.0)(terser@5.37.0))
       storybook:
-        specifier: ^8.0.6
+        specifier: ^8.4.7
         version: 8.4.7(prettier@3.4.2)
 
   src/backend/integration:
@@ -317,7 +317,7 @@ importers:
     dependencies:
       '@astrojs/netlify':
         specifier: ^5.2.0
-        version: 5.5.4(@types/node@20.17.11)(astro@4.16.18(@types/node@20.17.11)(less@4.2.1)(rollup@4.29.1)(sass@1.83.0)(terser@5.37.0)(typescript@5.5.4))(encoding@0.1.13)(less@4.2.1)(rollup@4.29.1)(sass@1.83.0)(terser@5.37.0)
+        version: 5.5.4(@types/node@22.10.3)(astro@4.16.18(@types/node@22.10.3)(less@4.2.1)(rollup@4.29.1)(sass@1.83.0)(terser@5.37.0)(typescript@5.5.4))(encoding@0.1.13)(less@4.2.1)(rollup@4.29.1)(sass@1.83.0)(terser@5.37.0)
       '@cg/styles':
         specifier: workspace:*
         version: link:../../lib/styles
@@ -326,10 +326,10 @@ importers:
         version: link:../../lib/ui
       '@storyblok/astro':
         specifier: ^4.0.4
-        version: 4.1.1(astro@4.16.18(@types/node@20.17.11)(less@4.2.1)(rollup@4.29.1)(sass@1.83.0)(terser@5.37.0)(typescript@5.5.4))
+        version: 4.1.1(astro@4.16.18(@types/node@22.10.3)(less@4.2.1)(rollup@4.29.1)(sass@1.83.0)(terser@5.37.0)(typescript@5.5.4))
       astro:
         specifier: ^4.5.16
-        version: 4.16.18(@types/node@20.17.11)(less@4.2.1)(rollup@4.29.1)(sass@1.83.0)(terser@5.37.0)(typescript@5.5.4)
+        version: 4.16.18(@types/node@22.10.3)(less@4.2.1)(rollup@4.29.1)(sass@1.83.0)(terser@5.37.0)(typescript@5.5.4)
     devDependencies:
       '@astrojs/check':
         specifier: ^0.5.10
@@ -2385,6 +2385,12 @@ packages:
     peerDependencies:
       '@inquirer/prompts': '>= 3 < 8'
 
+  '@lit-labs/ssr-dom-shim@1.2.1':
+    resolution: {integrity: sha512-wx4aBmgeGvFmOKucFKY+8VFJSYZxs9poN3SDNQFF6lT6NrQUnHiPB2PWz2sc4ieEcAaYYzN+1uWahEeTq2aRIQ==}
+
+  '@lit/reactive-element@2.0.4':
+    resolution: {integrity: sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==}
+
   '@lmdb/lmdb-darwin-arm64@3.1.5':
     resolution: {integrity: sha512-ue5PSOzHMCIYrfvPP/MRS6hsKKLzqqhcdAvJCO8uFlDdj598EhgnacuOTuqA6uBK5rgiZXfDWyb7DVZSiBKxBA==}
     cpu: [arm64]
@@ -2761,6 +2767,11 @@ packages:
     resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
 
+  '@playwright/test@1.49.1':
+    resolution: {integrity: sha512-Ky+BVzPz8pL6PQxHqNRW1k3mIyv933LML7HktS8uik0bUXNCdPhoS/kLihiO1tMf/egaJb4IutXd7UywvXEW+g==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   '@pnpm/config.env-replace@1.1.0':
     resolution: {integrity: sha512-htyl8TWnKL7K/ESFa1oW2UB5lVDxuF5DpM7tBi6Hu2LNL3mWkIzNLG6N4zoCUP1lCKNxWy/3iu8mS8MvToGd6w==}
     engines: {node: '>=12.22.0'}
@@ -3070,11 +3081,18 @@ packages:
   '@socket.io/component-emitter@3.1.2':
     resolution: {integrity: sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==}
 
-  '@stencil/core@4.23.0':
-    resolution: {integrity: sha512-9vI8ywhoqlaDEmrcntejrZ9X76Tddv2JyWakjVpqJAdDNXgf520sYkyjzGT0p8VJfPtSaKm6pMtl5sAH1r9cFg==}
+  '@stencil/core@4.23.1':
+    resolution: {integrity: sha512-VtGgKTZdqaank5zs/gE5LBTcIYg4pE81pI4rfknMl5NFQbGcp83KISgBeJP/eRgcQCPu+ji/XhOq1joaTepAhQ==}
     engines: {node: '>=16.0.0', npm: '>=7.10.0'}
     hasBin: true
 
+  '@stencil/playwright@0.2.1':
+    resolution: {integrity: sha512-SMZpS7OGV3IfCie49Lcb31VexsgXxuPUS19r+T20Ru1t2ahhGBmsRYnYYZEFwlDFO9+6R8gqpomZ+obSB7A1KQ==}
+    engines: {node: '>=12.0.0', npm: '>=6.0.0'}
+    peerDependencies:
+      '@playwright/test': '>=1.41.2'
+      '@stencil/core': '>=4.13.0'
+
   '@stencil/sass@3.0.12':
     resolution: {integrity: sha512-aXMgpG13ftxLYo2dDauapvE9gKzSxTAqCMOfTqbPhKUCZ43JsknkLx+PArRaFtfYeVGSQ8eTS4ck7/Nlec+PNA==}
     engines: {node: '>=12.0.0', npm: '>=6.0.0'}
@@ -3184,18 +3202,6 @@ packages:
   '@storybook/global@5.0.0':
     resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==}
 
-  '@storybook/html-vite@8.4.7':
-    resolution: {integrity: sha512-kViex12pp1hWAUIcTwn7q6imH9EwSHT6QGyp1+M56MClXKzO9ggdaDtZpV6QdwWa0hJxwobyXBNBnOQjfd7UYg==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      storybook: ^8.4.7
-
-  '@storybook/html@8.4.7':
-    resolution: {integrity: sha512-2F9+n3/Xujf6/mHlULhtLL7Ha9u92l6GChM0AUTKL9cK8KzQKcAxqnH7JzE6HTFXMr10oj/706AMJSymvcc/SQ==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      storybook: ^8.4.7
-
   '@storybook/icons@1.3.0':
     resolution: {integrity: sha512-Nz/UzeYQdUZUhacrPyfkiiysSjydyjgg/p0P9HxB4p/WaJUUjMAcaoaLgy3EXx61zZJ3iD36WPuDkZs5QYrA0A==}
     engines: {node: '>=14.0.0'}
@@ -3235,6 +3241,19 @@ packages:
     peerDependencies:
       storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
 
+  '@storybook/web-components-vite@8.4.7':
+    resolution: {integrity: sha512-+EKnJeSc7TB5cw+EEvCfCaHNEN3pRqf9e4YdQYQrd/Qtb2vYknyDD9HSPZqT/92eE+PaRKsg9CYPlqY6T+7HLg==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      storybook: ^8.4.7
+
+  '@storybook/web-components@8.4.7':
+    resolution: {integrity: sha512-zR/bUWGkS5uxvqfXnW082ScrC4y5UrTdE1VKasezLGi5bTLub2hz8JP87PJgtWrq+mdrdmkLGzv5O4iJ/tlMAw==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      lit: ^2.0.0 || ^3.0.0
+      storybook: ^8.4.7
+
   '@svgr/babel-plugin-add-jsx-attribute@6.5.1':
     resolution: {integrity: sha512-9PYGcXrAxitycIjRmZB+Q0JaN07GZIWaTBIGQzfaZv+qr1n8X1XUEJ5rZ/vx6OVD9RRYlrNnXWExQXcmZeD/BQ==}
     engines: {node: '>=10'}
@@ -3546,6 +3565,9 @@ packages:
   '@types/supports-color@8.1.3':
     resolution: {integrity: sha512-Hy6UMpxhE3j1tLpl27exp1XqHD7n8chAiNPzWfz16LPZoMMoSc4dzLl6w9qijkEb/r5O1ozdu1CWGA2L83ZeZg==}
 
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
   '@types/unist@2.0.11':
     resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
 
@@ -5332,6 +5354,10 @@ packages:
     resolution: {integrity: sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  find-up@7.0.0:
+    resolution: {integrity: sha512-YyZM99iHrqLKjmt4LJDj58KI+fYyufRLBSYcqycxf//KpBk9FoewoGX0450m9nB44qrZnovzC2oeP5hUibxc/g==}
+    engines: {node: '>=18'}
+
   find-yarn-workspace-root2@1.2.16:
     resolution: {integrity: sha512-hr6hb1w8ePMpPVUK39S4RlwJzi+xPLuVuG8XlwXU3KD5Yn3qgBWVfy3AzNlDhWvE1EORCE65/Qm26rFQt3VLVA==}
 
@@ -5425,6 +5451,11 @@ packages:
   fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -6424,6 +6455,15 @@ packages:
     resolution: {integrity: sha512-iyAZCeyD+c1gPyE9qpFu8af0Y+MRtmKOncdGoA2S5EY8iFq99dmmvkNnHiWo+pj0s7yH7l3KPIgee77tKpXPWQ==}
     engines: {node: '>=18.0.0'}
 
+  lit-element@4.1.1:
+    resolution: {integrity: sha512-HO9Tkkh34QkTeUmEdNYhMT8hzLid7YlMlATSi1q4q17HE5d9mrrEHJ/o8O2D0cMi182zK1F3v7x0PWFjrhXFew==}
+
+  lit-html@3.2.1:
+    resolution: {integrity: sha512-qI/3lziaPMSKsrwlxH/xMgikhQ0EGOX2ICU73Bi/YHFvz2j/yMCIrw4+puF2IpQ4+upd3EWbvnHM9+PnJn48YA==}
+
+  lit@3.2.1:
+    resolution: {integrity: sha512-1BBa1E/z0O9ye5fZprPtdqnc0BFzxIxTTOO/tQFmyC/hj1O3jL4TfmLBw0WEwjAokdLwpclkvGgDJwTIh0/22w==}
+
   lmdb@3.1.5:
     resolution: {integrity: sha512-46Mch5Drq+A93Ss3gtbg+Xuvf5BOgIuvhKDWoGa3HcPHI6BL2NCOkRdSx1D4VfzwrxhnsjbyIVsLRlQHu6URvw==}
     hasBin: true
@@ -7442,6 +7482,16 @@ packages:
     resolution: {integrity: sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==}
     engines: {node: '>=8'}
 
+  playwright-core@1.49.1:
+    resolution: {integrity: sha512-BzmpVcs4kE2CH15rWfzpjzVGhWERJfmnXmniSyKeRZUs9Ws65m+RGIi7mjJK/euCegfn3i7jvqWeWyHe9y3Vgg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.49.1:
+    resolution: {integrity: sha512-VYL8zLoNTBxVOrJBbDuRgDWa3i+mfQgDTrL8Ah9QXZ7ax4Dsj0MSq5bYgytRnDVVe+njoKnfsYkH3HzqVj5UZA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   polished@4.3.1:
     resolution: {integrity: sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==}
     engines: {node: '>=10'}
@@ -8835,38 +8885,38 @@ packages:
     resolution: {integrity: sha512-+68OP1ZzSF84rTckf3FA95vJ1Zlx/uaXyiiKyPd1pA4rZNkpEvDAKmsu1xUSmbF/chCRYgZ6UZkDwC7PmzmAyA==}
     engines: {node: ^18.17.0 || >=20.5.0}
 
-  turbo-darwin-64@1.13.4:
-    resolution: {integrity: sha512-A0eKd73R7CGnRinTiS7txkMElg+R5rKFp9HV7baDiEL4xTG1FIg/56Vm7A5RVgg8UNgG2qNnrfatJtb+dRmNdw==}
+  turbo-darwin-64@2.3.3:
+    resolution: {integrity: sha512-bxX82xe6du/3rPmm4aCC5RdEilIN99VUld4HkFQuw+mvFg6darNBuQxyWSHZTtc25XgYjQrjsV05888w1grpaA==}
     cpu: [x64]
     os: [darwin]
 
-  turbo-darwin-arm64@1.13.4:
-    resolution: {integrity: sha512-eG769Q0NF6/Vyjsr3mKCnkG/eW6dKMBZk6dxWOdrHfrg6QgfkBUk0WUUujzdtVPiUIvsh4l46vQrNVd9EOtbyA==}
+  turbo-darwin-arm64@2.3.3:
+    resolution: {integrity: sha512-DYbQwa3NsAuWkCUYVzfOUBbSUBVQzH5HWUFy2Kgi3fGjIWVZOFk86ss+xsWu//rlEAfYwEmopigsPYSmW4X15A==}
     cpu: [arm64]
     os: [darwin]
 
-  turbo-linux-64@1.13.4:
-    resolution: {integrity: sha512-Bq0JphDeNw3XEi+Xb/e4xoKhs1DHN7OoLVUbTIQz+gazYjigVZvtwCvgrZI7eW9Xo1eOXM2zw2u1DGLLUfmGkQ==}
+  turbo-linux-64@2.3.3:
+    resolution: {integrity: sha512-eHj9OIB0dFaP6BxB88jSuaCLsOQSYWBgmhy2ErCu6D2GG6xW3b6e2UWHl/1Ho9FsTg4uVgo4DB9wGsKa5erjUA==}
     cpu: [x64]
     os: [linux]
 
-  turbo-linux-arm64@1.13.4:
-    resolution: {integrity: sha512-BJcXw1DDiHO/okYbaNdcWN6szjXyHWx9d460v6fCHY65G8CyqGU3y2uUTPK89o8lq/b2C8NK0yZD+Vp0f9VoIg==}
+  turbo-linux-arm64@2.3.3:
+    resolution: {integrity: sha512-NmDE/NjZoDj1UWBhMtOPmqFLEBKhzGS61KObfrDEbXvU3lekwHeoPvAMfcovzswzch+kN2DrtbNIlz+/rp8OCg==}
     cpu: [arm64]
     os: [linux]
 
-  turbo-windows-64@1.13.4:
-    resolution: {integrity: sha512-OFFhXHOFLN7A78vD/dlVuuSSVEB3s9ZBj18Tm1hk3aW1HTWTuAw0ReN6ZNlVObZUHvGy8d57OAGGxf2bT3etQw==}
+  turbo-windows-64@2.3.3:
+    resolution: {integrity: sha512-O2+BS4QqjK3dOERscXqv7N2GXNcqHr9hXumkMxDj/oGx9oCatIwnnwx34UmzodloSnJpgSqjl8iRWiY65SmYoQ==}
     cpu: [x64]
     os: [win32]
 
-  turbo-windows-arm64@1.13.4:
-    resolution: {integrity: sha512-u5A+VOKHswJJmJ8o8rcilBfU5U3Y1TTAfP9wX8bFh8teYF1ghP0EhtMRLjhtp6RPa+XCxHHVA2CiC3gbh5eg5g==}
+  turbo-windows-arm64@2.3.3:
+    resolution: {integrity: sha512-dW4ZK1r6XLPNYLIKjC4o87HxYidtRRcBeo/hZ9Wng2XM/MqqYkAyzJXJGgRMsc0MMEN9z4+ZIfnSNBrA0b08ag==}
     cpu: [arm64]
     os: [win32]
 
-  turbo@1.13.4:
-    resolution: {integrity: sha512-1q7+9UJABuBAHrcC4Sxp5lOqYS5mvxRrwa33wpIyM18hlOCpRD/fTJNxZ0vhbMcJmz15o9kkVm743mPn7p6jpQ==}
+  turbo@2.3.3:
+    resolution: {integrity: sha512-DUHWQAcC8BTiUZDRzAYGvpSpGLiaOQPfYXlCieQbwUvmml/LRGIe3raKdrOPOoiX0DYlzxs2nH6BoWJoZrj8hA==}
     hasBin: true
 
   type-check@0.4.0:
@@ -10009,7 +10059,7 @@ snapshots:
       '@babel/helper-split-export-declaration': 7.24.7
       '@babel/plugin-syntax-import-attributes': 7.26.0(@babel/core@7.26.0)
       '@inquirer/confirm': 5.0.2(@types/node@20.17.11)
-      '@vitejs/plugin-basic-ssl': 1.1.0(vite@5.4.11(@types/node@20.17.11)(less@4.2.0)(sass@1.80.7)(terser@5.36.0))
+      '@vitejs/plugin-basic-ssl': 1.1.0(vite@5.4.11(@types/node@20.17.11)(less@4.2.0)(sass@1.80.7)(terser@5.37.0))
       beasties: 0.1.0
       browserslist: 4.24.3
       esbuild: 0.24.0
@@ -10252,15 +10302,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@astrojs/netlify@5.5.4(@types/node@20.17.11)(astro@4.16.18(@types/node@20.17.11)(less@4.2.1)(rollup@4.29.1)(sass@1.83.0)(terser@5.37.0)(typescript@5.5.4))(encoding@0.1.13)(less@4.2.1)(rollup@4.29.1)(sass@1.83.0)(terser@5.37.0)':
+  '@astrojs/netlify@5.5.4(@types/node@22.10.3)(astro@4.16.18(@types/node@22.10.3)(less@4.2.1)(rollup@4.29.1)(sass@1.83.0)(terser@5.37.0)(typescript@5.5.4))(encoding@0.1.13)(less@4.2.1)(rollup@4.29.1)(sass@1.83.0)(terser@5.37.0)':
     dependencies:
       '@astrojs/internal-helpers': 0.4.1
       '@astrojs/underscore-redirects': 0.3.4
       '@netlify/functions': 2.8.2
       '@vercel/nft': 0.27.10(encoding@0.1.13)(rollup@4.29.1)
-      astro: 4.16.18(@types/node@20.17.11)(less@4.2.1)(rollup@4.29.1)(sass@1.83.0)(terser@5.37.0)(typescript@5.5.4)
+      astro: 4.16.18(@types/node@22.10.3)(less@4.2.1)(rollup@4.29.1)(sass@1.83.0)(terser@5.37.0)(typescript@5.5.4)
       esbuild: 0.21.5
-      vite: 5.4.11(@types/node@20.17.11)(less@4.2.1)(sass@1.83.0)(terser@5.37.0)
+      vite: 5.4.11(@types/node@22.10.3)(less@4.2.1)(sass@1.83.0)(terser@5.37.0)
     transitivePeerDependencies:
       - '@types/node'
       - encoding
@@ -12468,6 +12518,12 @@ snapshots:
       '@inquirer/prompts': 7.1.0(@types/node@20.17.11)
       '@inquirer/type': 1.5.5
 
+  '@lit-labs/ssr-dom-shim@1.2.1': {}
+
+  '@lit/reactive-element@2.0.4':
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.2.1
+
   '@lmdb/lmdb-darwin-arm64@3.1.5':
     optional: true
 
@@ -12845,6 +12901,10 @@ snapshots:
 
   '@pkgr/core@0.1.1': {}
 
+  '@playwright/test@1.49.1':
+    dependencies:
+      playwright: 1.49.1
+
   '@pnpm/config.env-replace@1.1.0': {}
 
   '@pnpm/network.ca-file@1.0.2':
@@ -13097,16 +13157,23 @@ snapshots:
 
   '@socket.io/component-emitter@3.1.2': {}
 
-  '@stencil/core@4.23.0': {}
+  '@stencil/core@4.23.1': {}
+
+  '@stencil/playwright@0.2.1(@playwright/test@1.49.1)(@stencil/core@4.23.1)':
+    dependencies:
+      '@playwright/test': 1.49.1
+      '@stencil/core': 4.23.1
+      deepmerge: 4.3.1
+      find-up: 7.0.0
 
-  '@stencil/sass@3.0.12(@stencil/core@4.23.0)':
+  '@stencil/sass@3.0.12(@stencil/core@4.23.1)':
     dependencies:
-      '@stencil/core': 4.23.0
+      '@stencil/core': 4.23.1
 
-  '@storyblok/astro@4.1.1(astro@4.16.18(@types/node@20.17.11)(less@4.2.1)(rollup@4.29.1)(sass@1.83.0)(terser@5.37.0)(typescript@5.5.4))':
+  '@storyblok/astro@4.1.1(astro@4.16.18(@types/node@22.10.3)(less@4.2.1)(rollup@4.29.1)(sass@1.83.0)(terser@5.37.0)(typescript@5.5.4))':
     dependencies:
       '@storyblok/js': 3.2.1
-      astro: 4.16.18(@types/node@20.17.11)(less@4.2.1)(rollup@4.29.1)(sass@1.83.0)(terser@5.37.0)(typescript@5.5.4)
+      astro: 4.16.18(@types/node@22.10.3)(less@4.2.1)(rollup@4.29.1)(sass@1.83.0)(terser@5.37.0)(typescript@5.5.4)
       camelcase: 8.0.0
       lodash.mergewith: 4.6.2
 
@@ -13205,13 +13272,13 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@storybook/builder-vite@8.4.7(storybook@8.4.7(prettier@3.4.2))(vite@5.4.11(@types/node@20.17.11)(less@4.2.1)(sass@1.83.0)(terser@5.37.0))':
+  '@storybook/builder-vite@8.4.7(storybook@8.4.7(prettier@3.4.2))(vite@5.4.11(@types/node@22.10.3)(less@4.2.1)(sass@1.83.0)(terser@5.37.0))':
     dependencies:
       '@storybook/csf-plugin': 8.4.7(storybook@8.4.7(prettier@3.4.2))
       browser-assert: 1.2.1
       storybook: 8.4.7(prettier@3.4.2)
       ts-dedent: 2.2.0
-      vite: 5.4.11(@types/node@20.17.11)(less@4.2.1)(sass@1.83.0)(terser@5.37.0)
+      vite: 5.4.11(@types/node@22.10.3)(less@4.2.1)(sass@1.83.0)(terser@5.37.0)
 
   '@storybook/components@8.4.7(storybook@8.4.7(prettier@3.4.2))':
     dependencies:
@@ -13248,25 +13315,6 @@ snapshots:
 
   '@storybook/global@5.0.0': {}
 
-  '@storybook/html-vite@8.4.7(storybook@8.4.7(prettier@3.4.2))(vite@5.4.11(@types/node@20.17.11)(less@4.2.1)(sass@1.83.0)(terser@5.37.0))':
-    dependencies:
-      '@storybook/builder-vite': 8.4.7(storybook@8.4.7(prettier@3.4.2))(vite@5.4.11(@types/node@20.17.11)(less@4.2.1)(sass@1.83.0)(terser@5.37.0))
-      '@storybook/html': 8.4.7(storybook@8.4.7(prettier@3.4.2))
-      magic-string: 0.30.17
-      storybook: 8.4.7(prettier@3.4.2)
-    transitivePeerDependencies:
-      - vite
-
-  '@storybook/html@8.4.7(storybook@8.4.7(prettier@3.4.2))':
-    dependencies:
-      '@storybook/components': 8.4.7(storybook@8.4.7(prettier@3.4.2))
-      '@storybook/global': 5.0.0
-      '@storybook/manager-api': 8.4.7(storybook@8.4.7(prettier@3.4.2))
-      '@storybook/preview-api': 8.4.7(storybook@8.4.7(prettier@3.4.2))
-      '@storybook/theming': 8.4.7(storybook@8.4.7(prettier@3.4.2))
-      storybook: 8.4.7(prettier@3.4.2)
-      ts-dedent: 2.2.0
-
   '@storybook/icons@1.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       react: 18.3.1
@@ -13308,6 +13356,28 @@ snapshots:
     dependencies:
       storybook: 8.4.7(prettier@3.4.2)
 
+  '@storybook/web-components-vite@8.4.7(lit@3.2.1)(storybook@8.4.7(prettier@3.4.2))(vite@5.4.11(@types/node@22.10.3)(less@4.2.1)(sass@1.83.0)(terser@5.37.0))':
+    dependencies:
+      '@storybook/builder-vite': 8.4.7(storybook@8.4.7(prettier@3.4.2))(vite@5.4.11(@types/node@22.10.3)(less@4.2.1)(sass@1.83.0)(terser@5.37.0))
+      '@storybook/web-components': 8.4.7(lit@3.2.1)(storybook@8.4.7(prettier@3.4.2))
+      magic-string: 0.30.17
+      storybook: 8.4.7(prettier@3.4.2)
+    transitivePeerDependencies:
+      - lit
+      - vite
+
+  '@storybook/web-components@8.4.7(lit@3.2.1)(storybook@8.4.7(prettier@3.4.2))':
+    dependencies:
+      '@storybook/components': 8.4.7(storybook@8.4.7(prettier@3.4.2))
+      '@storybook/global': 5.0.0
+      '@storybook/manager-api': 8.4.7(storybook@8.4.7(prettier@3.4.2))
+      '@storybook/preview-api': 8.4.7(storybook@8.4.7(prettier@3.4.2))
+      '@storybook/theming': 8.4.7(storybook@8.4.7(prettier@3.4.2))
+      lit: 3.2.1
+      storybook: 8.4.7(prettier@3.4.2)
+      tiny-invariant: 1.3.3
+      ts-dedent: 2.2.0
+
   '@svgr/babel-plugin-add-jsx-attribute@6.5.1(@babel/core@7.26.0)':
     dependencies:
       '@babel/core': 7.26.0
@@ -13678,6 +13748,8 @@ snapshots:
 
   '@types/supports-color@8.1.3': {}
 
+  '@types/trusted-types@2.0.7': {}
+
   '@types/unist@2.0.11': {}
 
   '@types/unist@3.0.3': {}
@@ -13798,10 +13870,6 @@ snapshots:
       - rollup
       - supports-color
 
-  '@vitejs/plugin-basic-ssl@1.1.0(vite@5.4.11(@types/node@20.17.11)(less@4.2.0)(sass@1.80.7)(terser@5.36.0))':
-    dependencies:
-      vite: 5.4.11(@types/node@20.17.11)(less@4.2.0)(sass@1.80.7)(terser@5.36.0)
-
   '@vitejs/plugin-basic-ssl@1.1.0(vite@5.4.11(@types/node@20.17.11)(less@4.2.0)(sass@1.80.7)(terser@5.37.0))':
     dependencies:
       vite: 5.4.11(@types/node@20.17.11)(less@4.2.0)(sass@1.80.7)(terser@5.37.0)
@@ -14200,7 +14268,7 @@ snapshots:
 
   astring@1.9.0: {}
 
-  astro@4.16.18(@types/node@20.17.11)(less@4.2.1)(rollup@4.29.1)(sass@1.83.0)(terser@5.37.0)(typescript@5.5.4):
+  astro@4.16.18(@types/node@22.10.3)(less@4.2.1)(rollup@4.29.1)(sass@1.83.0)(terser@5.37.0)(typescript@5.5.4):
     dependencies:
       '@astrojs/compiler': 2.10.3
       '@astrojs/internal-helpers': 0.4.1
@@ -14256,8 +14324,8 @@ snapshots:
       tsconfck: 3.1.4(typescript@5.5.4)
       unist-util-visit: 5.0.0
       vfile: 6.0.3
-      vite: 5.4.11(@types/node@20.17.11)(less@4.2.1)(sass@1.83.0)(terser@5.37.0)
-      vitefu: 1.0.5(vite@5.4.11(@types/node@20.17.11)(less@4.2.1)(sass@1.83.0)(terser@5.37.0))
+      vite: 5.4.11(@types/node@22.10.3)(less@4.2.1)(sass@1.83.0)(terser@5.37.0)
+      vitefu: 1.0.5(vite@5.4.11(@types/node@22.10.3)(less@4.2.1)(sass@1.83.0)(terser@5.37.0))
       which-pm: 3.0.0
       xxhash-wasm: 1.1.0
       yargs-parser: 21.1.1
@@ -15644,7 +15712,7 @@ snapshots:
       - bluebird
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
@@ -15666,7 +15734,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.7.0)(eslint@8.57.1)
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -16032,6 +16100,12 @@ snapshots:
       locate-path: 7.2.0
       path-exists: 5.0.0
 
+  find-up@7.0.0:
+    dependencies:
+      locate-path: 7.2.0
+      path-exists: 5.0.0
+      unicorn-magic: 0.1.0
+
   find-yarn-workspace-root2@1.2.16:
     dependencies:
       micromatch: 4.0.8
@@ -16123,6 +16197,9 @@ snapshots:
 
   fs.realpath@1.0.0: {}
 
+  fsevents@2.3.2:
+    optional: true
+
   fsevents@2.3.3:
     optional: true
 
@@ -17257,6 +17334,22 @@ snapshots:
       rfdc: 1.4.1
       wrap-ansi: 9.0.0
 
+  lit-element@4.1.1:
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.2.1
+      '@lit/reactive-element': 2.0.4
+      lit-html: 3.2.1
+
+  lit-html@3.2.1:
+    dependencies:
+      '@types/trusted-types': 2.0.7
+
+  lit@3.2.1:
+    dependencies:
+      '@lit/reactive-element': 2.0.4
+      lit-element: 4.1.1
+      lit-html: 3.2.1
+
   lmdb@3.1.5:
     dependencies:
       msgpackr: 1.11.2
@@ -18681,6 +18774,14 @@ snapshots:
     dependencies:
       find-up: 3.0.0
 
+  playwright-core@1.49.1: {}
+
+  playwright@1.49.1:
+    dependencies:
+      playwright-core: 1.49.1
+    optionalDependencies:
+      fsevents: 2.3.2
+
   polished@4.3.1:
     dependencies:
       '@babel/runtime': 7.26.0
@@ -20243,16 +20344,16 @@ snapshots:
       mkdirp: 3.0.1
       yallist: 5.0.0
 
-  terser-webpack-plugin@5.3.11(esbuild@0.24.2)(webpack@5.96.1(esbuild@0.24.0)):
+  terser-webpack-plugin@5.3.11(esbuild@0.24.0)(webpack@5.96.1(esbuild@0.24.0)):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       jest-worker: 27.5.1
       schema-utils: 4.3.0
       serialize-javascript: 6.0.2
-      terser: 5.36.0
+      terser: 5.37.0
       webpack: 5.96.1(esbuild@0.24.2)
     optionalDependencies:
-      esbuild: 0.24.2
+      esbuild: 0.24.0
 
   terser-webpack-plugin@5.3.11(esbuild@0.24.2)(webpack@5.97.1(esbuild@0.24.2)):
     dependencies:
@@ -20350,32 +20451,32 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  turbo-darwin-64@1.13.4:
+  turbo-darwin-64@2.3.3:
     optional: true
 
-  turbo-darwin-arm64@1.13.4:
+  turbo-darwin-arm64@2.3.3:
     optional: true
 
-  turbo-linux-64@1.13.4:
+  turbo-linux-64@2.3.3:
     optional: true
 
-  turbo-linux-arm64@1.13.4:
+  turbo-linux-arm64@2.3.3:
     optional: true
 
-  turbo-windows-64@1.13.4:
+  turbo-windows-64@2.3.3:
     optional: true
 
-  turbo-windows-arm64@1.13.4:
+  turbo-windows-arm64@2.3.3:
     optional: true
 
-  turbo@1.13.4:
+  turbo@2.3.3:
     optionalDependencies:
-      turbo-darwin-64: 1.13.4
-      turbo-darwin-arm64: 1.13.4
-      turbo-linux-64: 1.13.4
-      turbo-linux-arm64: 1.13.4
-      turbo-windows-64: 1.13.4
-      turbo-windows-arm64: 1.13.4
+      turbo-darwin-64: 2.3.3
+      turbo-darwin-arm64: 2.3.3
+      turbo-linux-64: 2.3.3
+      turbo-linux-arm64: 2.3.3
+      turbo-windows-64: 2.3.3
+      turbo-windows-arm64: 2.3.3
 
   type-check@0.4.0:
     dependencies:
@@ -20731,21 +20832,21 @@ snapshots:
       sass: 1.80.7
       terser: 5.37.0
 
-  vite@5.4.11(@types/node@20.17.11)(less@4.2.1)(sass@1.83.0)(terser@5.37.0):
+  vite@5.4.11(@types/node@22.10.3)(less@4.2.1)(sass@1.83.0)(terser@5.37.0):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.49
       rollup: 4.26.0
     optionalDependencies:
-      '@types/node': 20.17.11
+      '@types/node': 22.10.3
       fsevents: 2.3.3
       less: 4.2.1
       sass: 1.83.0
       terser: 5.37.0
 
-  vitefu@1.0.5(vite@5.4.11(@types/node@20.17.11)(less@4.2.1)(sass@1.83.0)(terser@5.37.0)):
+  vitefu@1.0.5(vite@5.4.11(@types/node@22.10.3)(less@4.2.1)(sass@1.83.0)(terser@5.37.0)):
     optionalDependencies:
-      vite: 5.4.11(@types/node@20.17.11)(less@4.2.1)(sass@1.83.0)(terser@5.37.0)
+      vite: 5.4.11(@types/node@22.10.3)(less@4.2.1)(sass@1.83.0)(terser@5.37.0)
 
   void-elements@2.0.1: {}
 
@@ -21042,7 +21143,7 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.11(esbuild@0.24.2)(webpack@5.96.1(esbuild@0.24.0))
+      terser-webpack-plugin: 5.3.11(esbuild@0.24.0)(webpack@5.96.1(esbuild@0.24.0))
       watchpack: 2.4.2
       webpack-sources: 3.2.3
     transitivePeerDependencies:
diff --git a/turbo.json b/turbo.json
index 041682f2..95b844d3 100644
--- a/turbo.json
+++ b/turbo.json
@@ -1,6 +1,5 @@
 {
   "$schema": "https://turbo.build/schema.json",
-  "globalDotEnv": [".env"],
   "globalDependencies": [
     ".editorconfig",
     ".eslintrc.js",
@@ -10,22 +9,20 @@
     "angular.json",
     "dfx.json",
     "prettier.config.cjs",
-    "tsconfig.json"
+    "tsconfig.json",
+    ".env"
   ],
-  "pipeline": {
+  "tasks": {
     "build": {
-      "outputs": ["dist/**", "build/**", ".docusaurus/**"],
-      "dotEnv": [".env"],
+      "outputs": ["dist/**", "build/**", ".docusaurus/**", "loader/**", "www"],
       "dependsOn": ["^build"]
     },
     "test": {
       "outputs": [],
-      "dotEnv": [".env"],
       "dependsOn": ["^build"]
     },
     "start": {
       "outputs": [],
-      "dotEnv": [".env"],
       "dependsOn": ["^build"]
     }
   }