diff --git a/.changeset/ninety-hairs-reflect.md b/.changeset/chilled-apricots-grab.md
similarity index 62%
rename from .changeset/ninety-hairs-reflect.md
rename to .changeset/chilled-apricots-grab.md
index 63e294545..7dde86221 100644
--- a/.changeset/ninety-hairs-reflect.md
+++ b/.changeset/chilled-apricots-grab.md
@@ -2,4 +2,4 @@
 "@shopware-ag/meteor-component-library": patch
 ---
 
-move mt-loader over to plain css
+Add translation for mt-banner
diff --git a/.changeset/stupid-toes-punch.md b/.changeset/dry-dancers-boil.md
similarity index 60%
rename from .changeset/stupid-toes-punch.md
rename to .changeset/dry-dancers-boil.md
index 2b8263126..40c6e4222 100644
--- a/.changeset/stupid-toes-punch.md
+++ b/.changeset/dry-dancers-boil.md
@@ -2,4 +2,4 @@
 "@shopware-ag/meteor-component-library": patch
 ---
 
-Allow disabling individual tab items
+Add focus styles for checkbox
diff --git a/.changeset/green-poems-drop.md b/.changeset/green-poems-drop.md
new file mode 100644
index 000000000..d5b37514f
--- /dev/null
+++ b/.changeset/green-poems-drop.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Migrate mt-select over to the custom built i18n composable
diff --git a/.changeset/grumpy-kangaroos-attack.md b/.changeset/grumpy-kangaroos-attack.md
new file mode 100644
index 000000000..609d465b4
--- /dev/null
+++ b/.changeset/grumpy-kangaroos-attack.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Migrate mt-data-table over to the custom built i18n composable
diff --git a/.changeset/curvy-walls-dress.md b/.changeset/nervous-countries-cry.md
similarity index 54%
rename from .changeset/curvy-walls-dress.md
rename to .changeset/nervous-countries-cry.md
index e7599f244..0f5f09a4e 100644
--- a/.changeset/curvy-walls-dress.md
+++ b/.changeset/nervous-countries-cry.md
@@ -2,4 +2,4 @@
 "@shopware-ag/meteor-component-library": patch
 ---
 
-Deprecated the mt-url-field component
+Add missing translation for data table filters
diff --git a/.changeset/quiet-trains-impress.md b/.changeset/quiet-trains-impress.md
deleted file mode 100644
index 2e8d07cba..000000000
--- a/.changeset/quiet-trains-impress.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@shopware-ag/meteor-component-library": patch
----
-
-remove default margin of banner component, hidden by future flag
diff --git a/.changeset/rare-starfishes-compete.md b/.changeset/rare-starfishes-compete.md
deleted file mode 100644
index e38b0140a..000000000
--- a/.changeset/rare-starfishes-compete.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@shopware-ag/meteor-component-library": minor
----
-
-Add external and internal variants for link component
diff --git a/.changeset/serious-avocados-destroy.md b/.changeset/six-readers-melt.md
similarity index 65%
rename from .changeset/serious-avocados-destroy.md
rename to .changeset/six-readers-melt.md
index e3aef71bd..43448ac9c 100644
--- a/.changeset/serious-avocados-destroy.md
+++ b/.changeset/six-readers-melt.md
@@ -2,4 +2,4 @@
 "@shopware-ag/meteor-component-library": patch
 ---
 
-Improve a11y of help text
+Update focus style of switch
diff --git a/.changeset/soft-roses-reply.md b/.changeset/soft-roses-reply.md
new file mode 100644
index 000000000..439ba2483
--- /dev/null
+++ b/.changeset/soft-roses-reply.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Migrate mt-data-table-settings over to the composition api
diff --git a/.changeset/tender-llamas-sleep.md b/.changeset/tender-llamas-sleep.md
deleted file mode 100644
index 3eaa9d27b..000000000
--- a/.changeset/tender-llamas-sleep.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@shopware-ag/meteor-component-library": patch
----
-
-Remove default margin from base field, hidden by future flag
diff --git a/.changeset/gentle-plants-flash.md b/.changeset/twenty-coins-fix.md
similarity index 53%
rename from .changeset/gentle-plants-flash.md
rename to .changeset/twenty-coins-fix.md
index 07ac2ee21..f61516337 100644
--- a/.changeset/gentle-plants-flash.md
+++ b/.changeset/twenty-coins-fix.md
@@ -2,4 +2,4 @@
 "@shopware-ag/meteor-component-library": patch
 ---
 
-Deprecated mt-external link component
+Migrate mt-label to custom built i18n composable
diff --git a/.changeset/violet-books-kick.md b/.changeset/violet-books-kick.md
deleted file mode 100644
index 8ad813946..000000000
--- a/.changeset/violet-books-kick.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@shopware-ag/meteor-component-library": patch
----
-
-Migrate mt-loader over to the composition api
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 63a7ce609..67563e92c 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -152,3 +152,116 @@ jobs:
         with:
           name: meteor-admin-sdk--playwright-test-results
           path: packages/admin-sdk/playwright-report/
+
+  
+  tested-versions:
+    name: tested-versions
+    runs-on: ubuntu-latest
+    outputs:
+      first-version: ${{ steps.versions.outputs.first-version }}
+      latest-version: ${{ steps.versions.outputs.latest-version }}
+      lts-first-version: ${{ steps.versions.outputs.lts-first-version }}
+      lts-latest-version: ${{ steps.versions.outputs.lts-latest-version }}
+    steps:
+      - name: Generate versions
+        id: versions
+        uses: shopware/github-actions/versions@main
+
+  ats:
+    name: Acceptance tests
+    timeout-minutes: 20
+    runs-on: ubuntu-latest
+    needs:
+      - circular-dependencies
+      - unit-tests
+      - static-analysis
+      - tested-versions
+    env:
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+      TZ: Europe/Berlin
+    strategy:
+      fail-fast: false
+      matrix:
+        shopware-version:
+          # TODO: add again with next major, does not work right now because 6.5 does not support vue3
+          # - ${{ needs.tested-versions.outputs.lts-latest-version }}
+          - ${{ needs.tested-versions.outputs.first-version }}
+          - trunk
+    steps:
+      - name: Setup shopware
+        uses: shopware/setup-shopware@main
+        with:
+          path: shopware/
+          install: "true"
+          install-admin: "true"
+          install-storefront: "true"
+          shopware-version: "${{ matrix.shopware-version }}"
+          env: dev
+
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          path: meteor/
+
+      - name: Symlink plugin
+        working-directory: shopware/custom/plugins/
+        run: ln -s ../../../meteor/examples/admin-sdk-plugin TestPlugin
+          
+      - name: Activate TestPlugin
+        working-directory: shopware/
+        run: |
+          bin/console plugin:refresh
+          bin/console plugin:install --activate TestPlugin
+          bin/console cache:clear
+
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 9
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "pnpm"
+          cache-dependency-path: "**/pnpm-lock.yaml"
+
+      - name: Install dependencies
+        working-directory: meteor/
+        run: pnpm install --frozen-lockfile --prefer-offline
+
+      - name: Build packages
+        working-directory: meteor/
+        run: npx turbo run build
+
+      - name: Build assets
+        working-directory: shopware/
+        run: |
+          composer run build:js
+          bin/console assets:install
+
+      - name: Start webserver
+        working-directory: shopware/
+        run: symfony server:start --allow-http --no-tls --port=8000 -d
+
+      - name: Install playwright
+        working-directory: meteor/examples/admin-sdk-plugin/tests/acceptance/
+        run: |
+          pnpm install --frozen-lockfile --prefer-offline
+          npx playwright install --with-deps
+
+      - name: Run Playwrigth
+        working-directory: meteor/examples/admin-sdk-plugin/tests/acceptance/
+        run: npx playwright test --retries=2 --reporter=github --trace=on-first-retry --project chromium
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: ats-test-results-${{ matrix.project }}
+          path: meteor/examples/admin-sdk-plugin/tests/acceptance/test-results/
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: ats-report-${{ matrix.project }}
+          path: meteor/examples/admin-sdk-plugin/tests/acceptance/playwright-report/
diff --git a/.github/workflows/visual-tests.yml b/.github/workflows/visual-tests.yml
index 38ab306af..45bfedc37 100644
--- a/.github/workflows/visual-tests.yml
+++ b/.github/workflows/visual-tests.yml
@@ -41,7 +41,7 @@ jobs:
         run: pnpm dlx playwright install-deps
 
       - name: Install Playwright
-        run: pnpm dlx playwright@1.44.0 install
+        run: pnpm dlx playwright@1.47.2 install
 
       - name: Build storybook
         run: pnpx turbo run build:storybook --filter=@shopware-ag/meteor-component-library -- --test
diff --git a/examples/admin-sdk-app/CHANGELOG.md b/examples/admin-sdk-app/CHANGELOG.md
index 1e7cfe15b..5b73cd46c 100644
--- a/examples/admin-sdk-app/CHANGELOG.md
+++ b/examples/admin-sdk-app/CHANGELOG.md
@@ -1,5 +1,21 @@
 # meteor-admin-sdk-app
 
+## 1.0.22
+
+### Patch Changes
+
+- Updated dependencies [cc754b9]
+- Updated dependencies [47063ae]
+- Updated dependencies [62be382]
+- Updated dependencies [28f5cb1]
+- Updated dependencies [001adb3]
+- Updated dependencies [6d32afa]
+- Updated dependencies [936ccf3]
+- Updated dependencies [2f0a666]
+- Updated dependencies [07e243a]
+  - @shopware-ag/meteor-component-library@3.14.0
+  - @shopware-ag/meteor-admin-sdk@5.5.1
+
 ## 1.0.21
 
 ### Patch Changes
diff --git a/examples/admin-sdk-app/package.json b/examples/admin-sdk-app/package.json
index 0d0987432..85e04fe27 100644
--- a/examples/admin-sdk-app/package.json
+++ b/examples/admin-sdk-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "meteor-admin-sdk-app",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "private": true,
   "description": "",
   "repository": {
diff --git a/examples/admin-sdk-plugin/README.md b/examples/admin-sdk-plugin/README.md
new file mode 100644
index 000000000..8c01956ad
--- /dev/null
+++ b/examples/admin-sdk-plugin/README.md
@@ -0,0 +1,25 @@
+# Meteor Admin SDK Example Plugin
+
+This package contains an example plugin. It uses the [Meteor Admin SDK](https://github.com/shopware/meteor/tree/main/packages/admin-sdk) to extend the administration.
+
+## Prerequisites
+We assume that you have a functioning Shopware 6 setup on your local machine.
+
+## Plugin setup
+
+1. Install all meteor dependencies: `cd <meteorRoot> && pnpm install`
+2. Build all meteor packages: `cd <meteorRoot> && turbo run build`
+3. Symlink the plugin to your Shopware 6 installation: `cd <shopwareRoot>/custom/plugins && ln -s <meteorRoot>/examples/admin-sdk-plugin TestPlugin`
+4. It's important that the plugin Folder is named `TestPlugin` inside `custom/plugins`
+5. Activate the plugin : `cd <shopwareRoot> && php bin/console plugin:refresh && php bin/console plugin:install -a -c TestPlugin`
+6. Built the administration Javascript: `cd <shopwareRoot> && composer run build:js:admin`
+
+Now you should see the plugin installed when opening the Shopware Admin and looking in "Extensions" -> "My Extensions".
+
+## Acceptance tests
+
+1. Create a `.env` file in `<meteorRoot>/examples/admin-sdk-plugin/tests/acceptance`
+2. Specify your Shopware instance app url: `APP_URL=https://dev.local/`
+3. Run the tests: `cd <meteorRoot> && pnpm --filter @shopware-ag/meteor-admin-sdk-example-plugin run test:ats`
+
+
diff --git a/examples/admin-sdk-plugin/composer.json b/examples/admin-sdk-plugin/composer.json
new file mode 100644
index 000000000..1429e2173
--- /dev/null
+++ b/examples/admin-sdk-plugin/composer.json
@@ -0,0 +1,18 @@
+{
+  "name": "swag/sdk-test-plugin",
+  "description": "Meteor Admin SDK Testplugin",
+  "type": "shopware-platform-plugin",
+  "license": "MIT",
+  "autoload": {
+    "psr-4": {
+      "TestPlugin\\": "src/"
+    }
+  },
+  "extra": {
+    "shopware-plugin-class": "TestPlugin\\TestPlugin",
+    "label": {
+      "de-DE": "SDK Testplugin",
+      "en-GB": "SDK Testplugin"
+    }
+  }
+}
diff --git a/examples/admin-sdk-plugin/src/.gitignore b/examples/admin-sdk-plugin/src/.gitignore
new file mode 100644
index 000000000..e1ec14d22
--- /dev/null
+++ b/examples/admin-sdk-plugin/src/.gitignore
@@ -0,0 +1,2 @@
+Resources/app/administration/node_modules/
+Resources/public
diff --git a/examples/admin-sdk-plugin/src/Resources/app/administration/build/webpack.config.js b/examples/admin-sdk-plugin/src/Resources/app/administration/build/webpack.config.js
new file mode 100644
index 000000000..e2877652c
--- /dev/null
+++ b/examples/admin-sdk-plugin/src/Resources/app/administration/build/webpack.config.js
@@ -0,0 +1,9 @@
+module.exports = () => {
+    return {
+        resolve: {
+            alias: {
+                vue$: 'vue/dist/vue.esm-browser.js'
+            }
+        }
+    };
+};
diff --git a/examples/admin-sdk-plugin/src/Resources/app/administration/index.html b/examples/admin-sdk-plugin/src/Resources/app/administration/index.html
new file mode 100644
index 000000000..925c77bf5
--- /dev/null
+++ b/examples/admin-sdk-plugin/src/Resources/app/administration/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Test plugin example</title>
+</head>
+<body>
+    <div id="app"></div>
+</body>
+</html>
diff --git a/examples/admin-sdk-plugin/src/Resources/app/administration/package.json b/examples/admin-sdk-plugin/src/Resources/app/administration/package.json
new file mode 100644
index 000000000..93be7ec60
--- /dev/null
+++ b/examples/admin-sdk-plugin/src/Resources/app/administration/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "administration",
+  "version": "1.0.0",
+  "private": true,
+  "description": "",
+  "license": "MIT",
+  "author": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "@shopware-ag/meteor-admin-sdk": "workspace:*",
+    "@shopware-ag/meteor-component-library": "workspace:*",
+    "regenerator-runtime": "^0.14.1",
+    "vue": "3.4.21",
+    "vue-router": "4.4.5"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.2"
+  }
+}
diff --git a/examples/admin-sdk-plugin/src/Resources/app/administration/src/base/mainCommands.ts b/examples/admin-sdk-plugin/src/Resources/app/administration/src/base/mainCommands.ts
new file mode 100644
index 000000000..692e3ef09
--- /dev/null
+++ b/examples/admin-sdk-plugin/src/Resources/app/administration/src/base/mainCommands.ts
@@ -0,0 +1,169 @@
+import { notification, ui, context } from '@shopware-ag/meteor-admin-sdk';
+
+// location/index
+ui.componentSection.add({
+    component: 'card',
+    positionId: 'sw-product-properties__before',
+    props: {
+        title: 'Location tests',
+        subtitle: 'Testing if the location methods work correctly',
+        locationId: 'location-index',
+    },
+});
+
+ui.componentSection.add({
+    component: 'card',
+    positionId: 'sw-product-properties__after',
+    props: {
+        title: 'Card tabs tests',
+        subtitle: 'Testing if the the card tabs work correctly',
+        locationId: 'card-tabs',
+        tabs: [
+            {
+                name: 'card-tab-1',
+                label: 'Tab 1',
+                locationId: 'card-tab-1',
+            },
+            {
+                name: 'card-tab-2',
+                label: 'Tab 2',
+                locationId: 'card-tab-2',
+            },
+        ],
+    },
+});
+
+ui.componentSection.add({
+    component: 'card',
+    positionId: 'ui-tabs-product-example-tab',
+    props: {
+        title: 'Hello in the new tab',
+        locationId: 'ui-modals',
+    },
+});
+
+ui.componentSection.add({
+    component: 'card',
+    positionId: 'sw-sales-channel-detail-base-options-delete__after',
+    props: {
+        title: 'Dataset testing',
+        locationId: 'data-dataset',
+    },
+});
+
+ui.tabs('sw-product-detail').addTabItem({
+    label: 'Example',
+    componentSectionId: 'ui-tabs-product-example-tab',
+});
+
+ui.tabs('sw-custom-field-set-renderer').addTabItem({
+    label: 'Example',
+    componentSectionId: 'ui-tabs-product-example-tab',
+});
+
+ui.actionButton.add({
+    name: 'activateLanguageSubscription',
+    entity: 'product',
+    view: 'detail',
+    label: 'Activate language subscription',
+    callback: () => {
+        // context / subscribe on language changes
+        context.subscribeLanguage(({ languageId, systemLanguageId }) => {
+            notification.dispatch({
+                title: 'Language changes',
+                message: `languageId: ${languageId} <br><br> systemLanguageId: ${systemLanguageId}`,
+            });
+        });
+
+        notification.dispatch({
+            title: 'Subscriber activated',
+            message: 'The subscriber for language changes was activated',
+            variant: 'info',
+        });
+    },
+});
+
+ui.actionButton.add({
+    name: 'activateLocaleSubscription',
+    entity: 'product',
+    view: 'detail',
+    label: 'Activate locale subscription',
+    callback: () => {
+        // context / subscribe on locale changes
+        context.subscribeLocale(({ fallbackLocale, locale }) => {
+            notification.dispatch({
+                title: 'Locale changes',
+                message: `locale: ${locale} <br><br> fallbackLocale: ${fallbackLocale}`,
+            });
+        });
+
+        notification.dispatch({
+            title: 'Subscriber activated',
+            message: 'The subscriber for locale changes was activated',
+            variant: 'info',
+        });
+    },
+});
+
+ui.settings.addSettingsItem({
+    label: 'App Settings',
+    locationId: 'ui-menu-item-add-menu-item-with-searchbar',
+    icon: 'default-object-books',
+    displaySearchBar: true,
+    tab: 'plugins',
+});
+
+ui.settings.addSettingsItem({
+    label: 'Without searchbar',
+    locationId: 'ui-menu-item-add-menu-item',
+    icon: 'default-action-cloud-upload',
+    displaySearchBar: false,
+    tab: 'shop',
+});
+
+ui.actionButton.add({
+    action: 'ui-action-button',
+    entity: 'product',
+    view: 'detail',
+    label: 'Test action',
+    callback: () => {
+        // nothing
+        notification.dispatch({
+            title: 'Action button click',
+            message: 'The action button in the product detail page was clicked',
+        });
+    },
+});
+
+ui.mainModule.addMainModule({
+    heading: 'My App',
+    locationId: 'ui-main-module-add-main-module',
+    displaySearchBar: false,
+});
+
+ui.menu.addMenuItem({
+    label: 'Test item',
+    locationId: 'ui-main-module-add-main-module',
+    displaySearchBar: false,
+    parent: 'sw-order',
+});
+ui.menu.addMenuItem({
+    label: 'Test with searchbar',
+    locationId: 'ui-menu-item-add-menu-item-with-searchbar',
+    displaySearchBar: true,
+    parent: 'sw-extension',
+});
+ui.menu.addMenuItem({
+    label: 'First item',
+    locationId: 'ui-menu-item-add-menu-item-with-searchbar',
+    displaySearchBar: true,
+    parent: 'sw-extension',
+    position: 10,
+});
+// For testing the third level menu entry
+ui.menu.addMenuItem({
+    label: 'Third level',
+    locationId: 'ui-main-module-add-main-module',
+    displaySearchBar: false,
+    parent: 'sw-manufacturer',
+});
diff --git a/examples/admin-sdk-plugin/src/Resources/app/administration/src/main.ts b/examples/admin-sdk-plugin/src/Resources/app/administration/src/main.ts
new file mode 100644
index 000000000..1b70d1fee
--- /dev/null
+++ b/examples/admin-sdk-plugin/src/Resources/app/administration/src/main.ts
@@ -0,0 +1,16 @@
+import "regenerator-runtime/runtime";
+import { location } from '@shopware-ag/meteor-admin-sdk';
+
+// Only execute extensionSDK commands when
+// it is inside a iFrame (only needed for plugins)
+// @ts-ignore
+if (location.isIframe() && !window.parent.__Cypress__) {
+    if (location.is(location.MAIN_HIDDEN)) {
+        // Execute the base commands
+        import('./base/mainCommands');
+    } else {
+        console.log('rendering view');
+        // Render different views
+        import('./viewRenderer');
+    }
+}
diff --git a/examples/admin-sdk-plugin/src/Resources/app/administration/src/viewRenderer.ts b/examples/admin-sdk-plugin/src/Resources/app/administration/src/viewRenderer.ts
new file mode 100644
index 000000000..3c8263f60
--- /dev/null
+++ b/examples/admin-sdk-plugin/src/Resources/app/administration/src/viewRenderer.ts
@@ -0,0 +1,46 @@
+import { createApp, defineAsyncComponent } from 'vue';
+import { location } from '@shopware-ag/meteor-admin-sdk';
+import '@shopware-ag/meteor-component-library/dist/style.css';
+
+// watch for height changes
+location.startAutoResizer();
+
+// start app views
+const app = createApp({
+    data() {
+        return { location }
+    },
+    components: {
+        // ui/main-module/add-main-module
+        'UiMainModuleAddMainModule': defineAsyncComponent(() => import('./views/ui/main-module/add-main-module')),
+        // ui/menu-item/
+        'UiMenuItemAddMenuItem': defineAsyncComponent(() => import('./views/ui/menu-item/add-menu-item')),
+        'UiMenuItemAddMenuItemWithSearchBar': defineAsyncComponent(() => import('./views/ui/menu-item/add-menu-item-with-searchbar')),
+        // ui/modals
+        'UiModals': defineAsyncComponent(() => import('./views/ui/modals/modals')),
+        'UiModalsModalContent': defineAsyncComponent(() => import('./views/ui/modals/modal-content')),
+        // location/general
+        'LocationIndex': defineAsyncComponent(() => import('./views/location/index')),
+        'CardTab1': defineAsyncComponent(() => import('./views/card-tabs/tab-1')),
+        'CardTab2': defineAsyncComponent(() => import('./views/card-tabs/tab-2')),
+        // data/dataset
+        'DataDataset': defineAsyncComponent(() => import('./views/data/dataset')),
+    },
+    template: `
+        <LocationIndex v-if="location.is('location-index')"></LocationIndex>
+        <CardTab1 v-else-if="location.is('card-tab-1')"></CardTab1>
+        <CardTab2 v-else-if="location.is('card-tab-2')"></CardTab2>
+        <UiModals v-else-if="location.is('ui-modals')"></UiModals>
+        <DataDataset v-else-if="location.is('data-dataset')"></DataDataset>
+        <UiModalsModalContent v-else-if="location.is('ui-modals-modal-content')"></UiModalsModalContent>
+        <UiMainModuleAddMainModule v-else-if="location.is('ui-main-module-add-main-module')"></UiMainModuleAddMainModule>
+        <UiMenuItemAddMenuItem v-else-if="location.is('ui-menu-item-add-menu-item')"></UiMenuItemAddMenuItem>
+        <UiMenuItemAddMenuItemWithSearchBar v-else-if="location.is('ui-menu-item-add-menu-item-with-searchbar')"></UiMenuItemAddMenuItemWithSearchBar>
+    `,
+})
+
+// Hack to fake i18n
+app.config.globalProperties.$tc = (s) => s;
+app.config.globalProperties.$t = (s) => s;
+
+app.mount('#app');
diff --git a/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/card-tabs/tab-1.ts b/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/card-tabs/tab-1.ts
new file mode 100644
index 000000000..6c1a8fc9d
--- /dev/null
+++ b/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/card-tabs/tab-1.ts
@@ -0,0 +1,10 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    template: `
+        <div>
+        <p>Tab 1</p>
+        </div>
+    `,
+});
+
diff --git a/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/card-tabs/tab-2.ts b/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/card-tabs/tab-2.ts
new file mode 100644
index 000000000..875d21d27
--- /dev/null
+++ b/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/card-tabs/tab-2.ts
@@ -0,0 +1,10 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    template: `
+        <div>
+        <p>Tab 2</p>
+        </div>
+    `,
+});
+
diff --git a/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/data/dataset/index.ts b/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/data/dataset/index.ts
new file mode 100644
index 000000000..7b7e2f8a4
--- /dev/null
+++ b/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/data/dataset/index.ts
@@ -0,0 +1,109 @@
+import { defineComponent } from 'vue'
+import { data } from '@shopware-ag/meteor-admin-sdk';
+import { SwButton, SwTextField } from "@shopware-ag/meteor-component-library";
+
+
+// make background color white
+document.body.style.backgroundColor = 'white';
+
+export default defineComponent({
+    template: `
+<div>
+    <sw-button @click="getDataset">Get dataset</sw-button>
+    <sw-button @click="subscribeData">Subscribe dataset</sw-button>
+
+    <br />
+    <br />
+
+    <p>Clicked on: {{ clicked }}</p>
+    <p>
+        {{ returnValue }}
+        {{ JSON.stringify(returnValue) }}
+    </p>
+
+    <br />
+    <br />
+
+    <p>Returned name: {{ salesChannel.name }}</p>
+    <p>Returned active state: {{ salesChannel.active }}</p>
+
+    <br />
+    <br />
+
+    <sw-text-field label="name" v-model="salesChannel.name"></sw-text-field>
+    <sw-button @click="updateDataset">Update to main</sw-button>
+</div>
+`,
+    components: {
+        'sw-button': SwButton,
+        'sw-text-field': SwTextField,
+    },
+    data(): {
+        salesChannel: {
+            name?: string,
+            active?: boolean,
+        },
+        clicked: string,
+        returnValue: unknown,
+        retryCounter: number,
+    } {
+        return {
+            salesChannel: {},
+            clicked: '',
+            returnValue: undefined,
+            retryCounter: 0,
+        }
+    },
+    methods: {
+        getDataset() {
+            if (this.retryCounter >= 10) {
+                this.returnValue = 'Retry limit reached';
+
+                return;
+            }
+
+            this.clicked = 'getDataset';
+            this.retryCounter++;
+
+            data.get({
+                id: 'sw-sales-channel-detail__salesChannel',
+                selectors: ['name', 'active'],
+            }).then((data) => {
+                this.retryCounter = 0;
+                this.returnValue = data;
+                // @ts-expect-error
+                const { name, active } = data;
+
+                this.salesChannel = { name, active };
+            }).catch((error) => {
+                this.returnValue = error;
+
+                window.setTimeout(() => {
+                    this.getDataset();
+                }, 500);
+            });
+        },
+        async updateDataset() {
+            this.clicked = 'updateDataset';
+
+            await data.update({
+                id: 'sw-sales-channel-detail__salesChannel',
+                data: this.salesChannel,
+            })
+        },
+        subscribeData() {
+            this.clicked = 'subscribeData';
+
+            data.subscribe('sw-sales-channel-detail__salesChannel', (data) => {
+                this.returnValue = data;
+
+                this.salesChannel = {
+                    // @ts-expect-error
+                    name: data.data.name,
+                }
+            }, {
+                selectors: ['name'],
+            });
+        }
+    }
+})
diff --git a/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/location/index.ts b/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/location/index.ts
new file mode 100644
index 000000000..afdcd1d68
--- /dev/null
+++ b/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/location/index.ts
@@ -0,0 +1,68 @@
+import { defineComponent } from 'vue'
+import { location } from "@shopware-ag/meteor-admin-sdk";
+import { MtButton, MtNumberField } from '@shopware-ag/meteor-component-library';
+
+export default defineComponent({
+    components: {
+        'sw-button': MtButton,
+        'sw-number-field': MtNumberField,
+    },
+    template: `
+        <div :style="componentStyling">
+        <p>Auto-Resize: {{ isAutoResizing ? 'On' : 'Off' }}</p>
+        <sw-number-field :value="heightInput" @input-change="setHeightInput"></sw-number-field>
+
+        <br><br>
+
+        <sw-button @click="changeHeight">Update height using auto resizing</sw-button>
+        <br>
+        <sw-button @click="changeHeightManually">Update height manually</sw-button>
+
+        <br><br>
+
+        <sw-button @click="startAutoResizing">Start auto resizing</sw-button>
+        <sw-button @click="stopAutoResizing">Stop auto resizing</sw-button>
+
+        </div>
+    `,
+    data() {
+        return {
+            heightInput: 123,
+            height: 400,
+            isAutoResizing: true,
+        }
+    },
+    computed: {
+        componentStyling(): {} {
+            return {
+                height: `${this.height}px`,
+                backgroundColor: '#0e82ff',
+                padding: '10px',
+            }
+        }
+    },
+    methods: {
+        setHeightInput(height: number): void {
+            this.heightInput = height;
+        },
+
+        changeHeight():void {
+            this.height = Math.floor(this.heightInput);
+        },
+
+        changeHeightManually():void {
+            void location.updateHeight(this.heightInput);
+        },
+
+        async stopAutoResizing(): Promise<void> {
+            await location.stopAutoResizer();
+            this.isAutoResizing = false;
+        },
+
+        async startAutoResizing(): Promise<void> {
+            await location.startAutoResizer();
+            this.isAutoResizing = false;
+        }
+    }
+})
+
diff --git a/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/ui/main-module/add-main-module.ts b/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/ui/main-module/add-main-module.ts
new file mode 100644
index 000000000..d0d2361f0
--- /dev/null
+++ b/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/ui/main-module/add-main-module.ts
@@ -0,0 +1,282 @@
+import { defineComponent } from 'vue';
+import { notification, context, data, window } from '@shopware-ag/meteor-admin-sdk';
+import { SwButton, SwTextField, SwTextarea } from '@shopware-ag/meteor-component-library';
+
+const { repository, Classes: { Criteria } } = data;
+
+export default defineComponent({
+    mounted() {
+        console.log('mounted main module');
+    },
+    components: {
+        'sw-button': SwButton,
+        'sw-text-field': SwTextField,
+        'sw-text-area': SwTextarea,
+    },
+    template: `
+        <div style="padding: 20px;">
+            <h1>Hello from the new Menu Page</h1>
+
+            <div>
+                <h3>Context - Get current language</h3>
+                <sw-button @click="getLanguage">Get current language</sw-button>
+
+                <p>
+                    system-language-ID: {{ systemLanguageId }}
+                    <br />
+                    languageId: {{ languageId }}
+                </p>
+            </div>
+
+            <div>
+                <h3>Context - Get current environment</h3>
+                <sw-button @click="getEnvironment">Get current environment</sw-button>
+
+                <p>
+                    Environment: {{ environment }}
+                </p>
+            </div>
+
+            <div>
+                <h3>Context - Get current locale</h3>
+                <sw-button @click="getLocale">Get current locale</sw-button>
+
+                <p>
+                    Locale: {{ locale }}
+                    <br />
+                    Fallback Locale: {{ fallbackLocale }}
+                </p>
+            </div>
+
+            <div>
+                <h3>Context - Get current currency</h3>
+                <sw-button @click="getCurrency">Get current currency</sw-button>
+
+                <p>
+                    System Currency Id: {{ systemCurrencyId }}
+                    <br />
+                    System Currency ISOCode: {{ systemCurrencyISOCode }}
+                </p>
+            </div>
+
+            <div>
+                <h3>Context - Get current Shopware version</h3>
+                <sw-button @click="getShopwareVersion">Get current Shopware version</sw-button>
+
+                <p>
+                    Shopware version: {{ shopwareVersion }}
+                </p>
+            </div>
+
+            <div>
+                <h3>Context - Get app information</h3>
+                <sw-button @click="getAppInformation">Get app information</sw-button>
+
+                <p>
+                    App name: {{ appName }}
+                    <br>
+                    App version (empty in plugins): {{ appVersion }}
+                    <br>
+                    App type: {{ appType }}
+                </p>
+            </div>
+
+            <div>
+                <h3>Context - Get module information</h3>
+                <sw-button @click="getModuleInformation">Get module information</sw-button>
+
+                <p v-for="moduleInformation in moduleInformations">
+                    Id: {{ moduleInformation.id }}
+                    <br>
+                    Display search bar: {{ moduleInformation.displaySearchBar }}
+                    <br>
+                    Heading: {{ moduleInformation.heading }}
+                    <br>
+                    LocationId: {{ moduleInformation.locationId }}
+                </p>
+            </div>
+
+            <div>
+                <h3>Window - Router Push</h3>
+                <sw-button @click="pushRoute">Push route</sw-button>
+                <br>
+                <sw-text-area label="Push route information" cols="30" rows="10" v-model="routeInformation"></sw-text-area>
+            </div>
+
+            <div>
+                <h3>Notification - Dispatch a notification</h3>
+
+                <sw-button @click="dispatchNotification">Dispatch a notification</sw-button>
+            </div>
+
+            <div>
+                <h3>Notification - Reload page</h3>
+
+                <sw-button @click="reloadPage">Reload page</sw-button>
+            </div>
+
+            <div id="dbquery">
+                <div class="test">Test</div>
+                <sw-button @click="getApilanguage" id="getlanguage">DB Query</sw-button>
+                <sw-text-field v-if="apiLanguageEntity" name="apilanguage" id="apiLanguage" v-model="apiLanguageEntity.name" />
+                <sw-button @click="saveApilanguage" id="saveusername">Save name</sw-button>
+            </div>
+        </div>
+    `,
+    data() {
+        return {
+            languageId: '',
+            systemLanguageId: '',
+            environment: '',
+            locale: '',
+            fallbackLocale: '',
+            systemCurrencyId: '',
+            systemCurrencyISOCode: '',
+            shopwareVersion: '',
+            appName: '',
+            appType: '',
+            appVersion: '',
+            moduleInformations: [],
+            routeInformation:  `
+{
+    "name": "sw.dashboard.index",
+    "params": {}
+}`,
+            apiLanguageEntity: null,
+        }
+    },
+    methods: {
+        // context / get current language
+        getLanguage() {
+            context.getLanguage().then(language => {
+                this.languageId = language.languageId;
+                this.systemLanguageId = language.systemLanguageId;
+            })
+        },
+
+        // context / get current environment
+        async getEnvironment() {
+            this.environment = await context.getEnvironment();
+        },
+
+        // context / get current locale
+        getLocale() {
+            context.getLocale().then(({ locale, fallbackLocale }) => {
+                this.locale = locale;
+                this.fallbackLocale = fallbackLocale;
+            })
+        },
+
+        // context / get current locale
+        getCurrency() {
+            context.getCurrency().then(({ systemCurrencyId, systemCurrencyISOCode }) => {
+                this.systemCurrencyId = systemCurrencyId;
+                this.systemCurrencyISOCode = systemCurrencyISOCode;
+            })
+        },
+
+        // context / get current Shopware version
+        async getShopwareVersion() {
+            this.shopwareVersion = await context.getShopwareVersion();
+        },
+
+        // context / get App information
+        getAppInformation() {
+            context.getAppInformation().then(({ name, type, version }) => {
+                this.appName = name;
+                this.appVersion = version;
+                this.appType = type;
+            })
+        },
+
+        // context / get module information
+        getModuleInformation() {
+            context.getModuleInformation().then(({ modules }) => {
+                // @ts-ignore
+                this.moduleInformations = modules;
+            })
+        },
+
+        // window / router push
+        pushRoute() {
+            let routeObject = {};
+
+            try {
+                routeObject = JSON.parse(this.routeInformation);
+            } catch (e){
+                notification.dispatch({
+                    title: 'Push route',
+                    message: 'The content of the textarea could not be parsed'
+                })
+            }
+
+            void window.routerPush(routeObject);
+        },
+
+        dispatchNotification() {
+            notification.dispatch({
+                title: 'Your title',
+                message: 'Your message',
+                variant: 'success',
+                appearance: 'notification',
+                growl: true,
+                actions: [
+                    {
+                        label: 'Yes',
+                        method: () => {
+                            alert('Yes')
+                        }
+                    },
+                    {
+                        label: 'No',
+                        method: () => {
+                            alert('No')
+                        }
+                    },
+                    {
+                        label: 'Redirect to Shopware',
+                        method: () => {
+                            window.redirect({
+                                url: 'https://www.shopware.com',
+                                newTab: true,
+                            })
+                        },
+                    }
+                ]
+            })
+        },
+
+        reloadPage() {
+            void window.reload();
+        },
+
+        getApilanguage() {
+            const exampleCriteria = new Criteria();
+            repository('language').search(exampleCriteria).then(response => {
+                if (!response) {
+                    return;
+                }
+                // @ts-expect-error
+                this.apiLanguageEntity = response.first();
+            })
+        },
+        saveApilanguage() {
+            repository('language').save(this.apiLanguageEntity)
+                .then(() => {
+                    notification.dispatch({
+                        title: 'Speicherung erfolgreich',
+                        message: 'Sprache wurde gespeichert',
+                        variant: "success"
+                    })
+
+                    this.getApilanguage()
+                }).catch(() => {
+                    notification.dispatch({
+                        title: 'Error',
+                        message: 'The Language could not be saved',
+                        variant: 'error',
+                    })
+            })
+        }
+    }
+})
diff --git a/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/ui/menu-item/add-menu-item-with-searchbar.ts b/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/ui/menu-item/add-menu-item-with-searchbar.ts
new file mode 100644
index 000000000..23a271e09
--- /dev/null
+++ b/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/ui/menu-item/add-menu-item-with-searchbar.ts
@@ -0,0 +1,10 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    template: `
+        <div>
+          <h1>Hello from the new menu page with searchbar</h1>
+        </div>
+    `,
+    methods: {}
+})
diff --git a/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/ui/menu-item/add-menu-item.ts b/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/ui/menu-item/add-menu-item.ts
new file mode 100644
index 000000000..3f02ae2b9
--- /dev/null
+++ b/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/ui/menu-item/add-menu-item.ts
@@ -0,0 +1,10 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    template: `
+        <div>
+          <h1>Hello from the new Menu Page</h1>
+        </div>
+    `,
+    methods: {}
+})
diff --git a/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/ui/modals/modal-content.ts b/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/ui/modals/modal-content.ts
new file mode 100644
index 000000000..c662a5e70
--- /dev/null
+++ b/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/ui/modals/modal-content.ts
@@ -0,0 +1,19 @@
+import { defineComponent } from 'vue'
+import { ui } from '@shopware-ag/meteor-admin-sdk';
+
+export default defineComponent({
+    template: `
+<div>
+  <h1>Hello from the plugin 👋🏻</h1>
+  <button @click="closeModal">Close modal</button>
+</div>
+`,
+
+    methods: {
+        closeModal() {
+            ui.modal.close({
+                locationId: 'ui-modals-modal-content'
+            })
+        }
+    }
+})
diff --git a/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/ui/modals/modals.ts b/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/ui/modals/modals.ts
new file mode 100644
index 000000000..d4dbb82c6
--- /dev/null
+++ b/examples/admin-sdk-plugin/src/Resources/app/administration/src/views/ui/modals/modals.ts
@@ -0,0 +1,90 @@
+import { defineComponent } from 'vue'
+import { ui } from '@shopware-ag/meteor-admin-sdk';
+
+// make background color white
+document.body.style.backgroundColor = 'white';
+
+export default defineComponent({
+    template: `
+<div>
+    <h1>Hello in the example card</h1>
+    <button @click="openModal">Open Modal</button>
+    <button @click="openModalnoHeader">Open No Header</button>
+    <button @click="openModalsmallVariant">Open small variant</button>
+    <button @click="openModalnoneClosable">Open none closable</button>
+</div>
+`,
+    methods: {
+        openModal() {
+            ui.modal.open({
+                title: 'Hello from the plugin',
+                locationId: 'ui-modals-modal-content',
+                buttons: [
+                    {
+                        label: 'Close modal',
+                        variant: 'primary',
+                        method: () => {
+                            ui.modal.close({
+                                locationId: 'ui-modals-modal-content'
+                            })
+                        }
+                    }
+                ]
+            })
+        },
+        openModalnoHeader() {
+            ui.modal.open({
+                title: 'Hello from the plugin',
+                showHeader: false,
+                locationId: 'ui-modals-modal-content',
+                buttons: [
+                    {
+                        label: 'Close modal',
+                        variant: 'primary',
+                        method: () => {
+                            ui.modal.close({
+                                locationId: 'ui-modals-modal-content'
+                            })
+                        }
+                    }
+                ]
+            })
+        },
+        openModalsmallVariant() {
+            ui.modal.open({
+                title: 'Hello from the plugin',
+                variant: "small",
+                locationId: 'ui-modals-modal-content',
+                buttons: [
+                    {
+                        label: 'Close modal',
+                        variant: 'primary',
+                        method: () => {
+                            ui.modal.close({
+                                locationId: 'ui-modals-modal-content'
+                            })
+                        }
+                    }
+                ]
+            })
+        },
+        openModalnoneClosable() {
+            ui.modal.open({
+                title: 'Hello from the plugin',
+                closable: false,
+                locationId: 'ui-modals-modal-content',
+                buttons: [
+                    {
+                        label: 'Close modal',
+                        variant: 'primary',
+                        method: () => {
+                            ui.modal.close({
+                                locationId: 'ui-modals-modal-content'
+                            })
+                        }
+                    }
+                ]
+            });
+        },
+    }
+})
diff --git a/examples/admin-sdk-plugin/src/Resources/app/administration/tsconfig.json b/examples/admin-sdk-plugin/src/Resources/app/administration/tsconfig.json
new file mode 100644
index 000000000..3ffa57bad
--- /dev/null
+++ b/examples/admin-sdk-plugin/src/Resources/app/administration/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "es2016",
+    "module": "commonjs",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true
+  }
+}
diff --git a/examples/admin-sdk-plugin/src/TestPlugin.php b/examples/admin-sdk-plugin/src/TestPlugin.php
new file mode 100644
index 000000000..d0720bec6
--- /dev/null
+++ b/examples/admin-sdk-plugin/src/TestPlugin.php
@@ -0,0 +1,9 @@
+<?php declare(strict_types=1);
+
+namespace TestPlugin;
+
+use Shopware\Core\Framework\Plugin;
+
+class TestPlugin extends Plugin
+{
+}
diff --git a/examples/admin-sdk-plugin/tests/acceptance/.eslintrc.cjs b/examples/admin-sdk-plugin/tests/acceptance/.eslintrc.cjs
new file mode 100644
index 000000000..047d2aaa9
--- /dev/null
+++ b/examples/admin-sdk-plugin/tests/acceptance/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+    extends: [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:playwright/recommended"
+    ],
+    parser: "@typescript-eslint/parser",
+    plugins: ["@typescript-eslint"],
+    root: true,
+    rules: {
+        quotes: ["error", "single", { allowTemplateLiterals: true }],
+        "no-console": ["error", { allow: ["warn", "error"] }],
+        "comma-dangle": ["error", "always-multiline"],
+        "no-unused-vars": "warn",
+        "@typescript-eslint/no-unused-vars": "warn",
+        "playwright/expect-expect": "off",
+    },
+};
\ No newline at end of file
diff --git a/examples/admin-sdk-plugin/tests/acceptance/.gitignore b/examples/admin-sdk-plugin/tests/acceptance/.gitignore
new file mode 100644
index 000000000..b98150160
--- /dev/null
+++ b/examples/admin-sdk-plugin/tests/acceptance/.gitignore
@@ -0,0 +1,9 @@
+# Folders
+node_modules/
+artifacts/
+playwright-report/
+/blob-report/
+/playwright/.cache/
+
+# Files
+.env
\ No newline at end of file
diff --git a/examples/admin-sdk-plugin/tests/acceptance/fixtures/AcceptanceTest.ts b/examples/admin-sdk-plugin/tests/acceptance/fixtures/AcceptanceTest.ts
new file mode 100644
index 000000000..b3025a41a
--- /dev/null
+++ b/examples/admin-sdk-plugin/tests/acceptance/fixtures/AcceptanceTest.ts
@@ -0,0 +1,11 @@
+import {
+  test as ShopwareTestSuite,
+  mergeTests,
+} from '@shopware-ag/acceptance-test-suite';
+import type { FixtureTypes as BaseTypes } from '@shopware-ag/acceptance-test-suite';
+
+export * from '@shopware-ag/acceptance-test-suite';
+
+export type FixtureTypes = BaseTypes;
+
+export const test = mergeTests(ShopwareTestSuite);
diff --git a/examples/admin-sdk-plugin/tests/acceptance/fixtures/Helper.ts b/examples/admin-sdk-plugin/tests/acceptance/fixtures/Helper.ts
new file mode 100644
index 000000000..f0e04a721
--- /dev/null
+++ b/examples/admin-sdk-plugin/tests/acceptance/fixtures/Helper.ts
@@ -0,0 +1,37 @@
+import { Page, Frame, expect } from '@playwright/test';
+
+export async function getSDKiFrame(
+  page: Page,
+  locationId: string,
+): Promise<Frame> {
+  // Wait for the iframe to be present in the DOM
+  const iframeLocator = page.frameLocator(
+    `iframe[src*="location-id=${locationId}"]`,
+  );
+
+  // Wait for the iframe's content to be loaded
+  await expect(iframeLocator.locator('body')).not.toBeEmpty();
+
+  // Get the Frame object
+  const frame = page.frame({ url: new RegExp(`location-id=${locationId}`) });
+
+  if (!frame) {
+    throw new Error(`Unable to find iframe with location-id=${locationId}`);
+  }
+
+  return frame;
+}
+
+/**
+ * Mocks the check updates call to return null.
+ * 
+ * This method is called before each test case to prevent the "Updates available" 
+ * notification from interfering with tests on older Shopware versions.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export async function mockUpdateApi(page: Page): Promise<any> {
+  return page.route('*/**/_action/update/check', async (route) => {
+    const json = null;
+    await route.fulfill({ json });
+  });
+}
diff --git a/examples/admin-sdk-plugin/tests/acceptance/package.json b/examples/admin-sdk-plugin/tests/acceptance/package.json
new file mode 100644
index 000000000..42a4a548b
--- /dev/null
+++ b/examples/admin-sdk-plugin/tests/acceptance/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@shopware-ag/meteor-admin-sdk-example-plugin",
+  "version": "1.0.0",
+  "private": true,
+  "description": "",
+  "keywords": [],
+  "license": "ISC",
+  "author": "",
+  "type": "module",
+  "main": "index.js",
+  "scripts": {
+    "format": "prettier ./tests --write",
+    "lint:eslint": "eslint . --ext .ts",
+    "lint:fix": "eslint . --ext .ts --fix",
+    "test:ats": "playwright test",
+    "test:ats:dev": "playwright test --ui"
+  },
+  "dependencies": {
+    "@shopware-ag/acceptance-test-suite": "^3.8.4"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.45.0",
+    "@types/node": "^22.5.5",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
+    "@typescript-eslint/parser": "^5.47.0",
+    "eslint": "^8.49.0",
+    "eslint-plugin-playwright": "^1.6.2",
+    "prettier": "3.3.3"
+  }
+}
diff --git a/examples/admin-sdk-plugin/tests/acceptance/playwright.config.ts b/examples/admin-sdk-plugin/tests/acceptance/playwright.config.ts
new file mode 100644
index 000000000..0406bf77e
--- /dev/null
+++ b/examples/admin-sdk-plugin/tests/acceptance/playwright.config.ts
@@ -0,0 +1,82 @@
+import { PlaywrightTestConfig, devices } from '@playwright/test';
+import dotenv from 'dotenv';
+
+// Read from default ".env" file.
+dotenv.config();
+
+process.env['SHOPWARE_ADMIN_USERNAME'] =
+  process.env['SHOPWARE_ADMIN_USERNAME'] || 'admin';
+process.env['SHOPWARE_ADMIN_PASSWORD'] =
+  process.env['SHOPWARE_ADMIN_PASSWORD'] || 'shopware';
+
+process.env['APP_URL'] = process.env['APP_URL'] ?? 'http://localhost:8000';
+
+// make sure APP_URL ends with a slash
+process.env['APP_URL'] = process.env['APP_URL'].replace(/\/+$/, '') + '/';
+if (process.env['ADMIN_URL']) {
+  process.env['ADMIN_URL'] = process.env['ADMIN_URL'].replace(/\/+$/, '') + '/';
+} else {
+  process.env['ADMIN_URL'] = process.env['APP_URL'] + 'admin/';
+}
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: './tests',
+
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000,
+  },
+
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [
+    ['html', { open: true, outputDir: 'artifacts' }],
+    ['json', { outputFile: 'artifacts/test-results/results.json' }],
+    ['junit', { outputFile: 'artifacts/test-results/results.xml' }],
+  ],
+
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+
+      /* Project-specific settings. */
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  outputDir: './artifacts/playwright-test-results/',
+};
+export default config;
diff --git a/examples/admin-sdk-plugin/tests/acceptance/tests/action-button.spec.ts b/examples/admin-sdk-plugin/tests/acceptance/tests/action-button.spec.ts
new file mode 100644
index 000000000..e00d9d9f0
--- /dev/null
+++ b/examples/admin-sdk-plugin/tests/acceptance/tests/action-button.spec.ts
@@ -0,0 +1,32 @@
+import { test, expect } from '../fixtures/AcceptanceTest';
+import { getSDKiFrame, mockUpdateApi } from '../fixtures/Helper';
+
+test.beforeEach(async ({ ShopAdmin, TestDataService, AdminProductDetail }) => {
+  await mockUpdateApi(ShopAdmin.page);
+
+  const product = await TestDataService.createBasicProduct();
+  ShopAdmin.goesTo(AdminProductDetail.url(product.id));
+
+  const mainHidden = await getSDKiFrame(ShopAdmin.page, 'sw-main-hidden');
+  await expect(mainHidden.locator('body')).not.toBeEmpty();
+});
+
+test('@sdk: action button', async ({ ShopAdmin }) => {
+  await ShopAdmin.page.locator('.sw-app-actions').click();
+  await ShopAdmin.page
+    .locator('.sw-context-menu__content .sw-app-action-button', {
+      hasText: 'Test action',
+    })
+    .click();
+
+  await expect(
+    ShopAdmin.page.locator('.sw-alert__title', {
+      hasText: 'Action button click',
+    }),
+  ).toBeVisible();
+  await expect(
+    ShopAdmin.page.locator('.sw-alert__message', {
+      hasText: 'The action button in the product detail page was clicked',
+    }),
+  ).toBeVisible();
+});
diff --git a/examples/admin-sdk-plugin/tests/acceptance/tests/component-section.spec.ts b/examples/admin-sdk-plugin/tests/acceptance/tests/component-section.spec.ts
new file mode 100644
index 000000000..d94980024
--- /dev/null
+++ b/examples/admin-sdk-plugin/tests/acceptance/tests/component-section.spec.ts
@@ -0,0 +1,49 @@
+import { test, expect } from '../fixtures/AcceptanceTest';
+import { getSDKiFrame, mockUpdateApi } from '../fixtures/Helper';
+
+test.beforeEach(async ({ ShopAdmin, TestDataService, AdminProductDetail }) => {
+  await mockUpdateApi(ShopAdmin.page);
+
+  const product = await TestDataService.createBasicProduct();
+  ShopAdmin.goesTo(AdminProductDetail.url(product.id));
+
+  const mainHidden = await getSDKiFrame(ShopAdmin.page, 'sw-main-hidden');
+  await expect(mainHidden.locator('body')).not.toBeEmpty();
+});
+
+test('@sdk: add a component section', async ({ ShopAdmin }) => {
+  await ShopAdmin.page.getByRole('link', { name: 'Specifications' }).click();
+
+  await expect(
+    ShopAdmin.page.locator('.sw-card__title', { hasText: 'Location tests' }),
+  ).toBeVisible();
+  await expect(
+    ShopAdmin.page.locator('.sw-card__subtitle', {
+      hasText: 'Testing if the location methods work correctly',
+    }),
+  ).toBeVisible();
+
+  await getSDKiFrame(ShopAdmin.page, 'location-index');
+});
+
+test('@sdk: add a component section with tabs', async ({ ShopAdmin }) => {
+  await ShopAdmin.page.getByRole('link', { name: 'Specifications' }).click();
+
+  await expect(
+    ShopAdmin.page.locator('.sw-card__title', { hasText: 'Card tabs tests' }),
+  ).toBeVisible();
+  await expect(
+    ShopAdmin.page.locator('.sw-card__subtitle', {
+      hasText: 'Testing if the the card tabs work correctly',
+    }),
+  ).toBeVisible();
+  await expect(
+    ShopAdmin.page.locator('.sw-tabs-item', { hasText: 'Tab 1' }),
+  ).toBeVisible();
+
+  await getSDKiFrame(ShopAdmin.page, 'card-tab-1');
+
+  await ShopAdmin.page.locator('.sw-tabs-item', { hasText: 'Tab 2' }).click();
+
+  await getSDKiFrame(ShopAdmin.page, 'card-tab-2');
+});
diff --git a/examples/admin-sdk-plugin/tests/acceptance/tests/context.spec.ts b/examples/admin-sdk-plugin/tests/acceptance/tests/context.spec.ts
new file mode 100644
index 000000000..61d3aa829
--- /dev/null
+++ b/examples/admin-sdk-plugin/tests/acceptance/tests/context.spec.ts
@@ -0,0 +1,256 @@
+import { test, expect } from '../fixtures/AcceptanceTest';
+import { getSDKiFrame, mockUpdateApi } from '../fixtures/Helper';
+
+// Defaults
+const DEFAULT_LANGUAGE_ID = '2fbb5fe2e29a4d70aa5854ce7ce3e20b';
+const LOCALE = 'en-GB';
+const FALLBACK_LOCALE = 'en-GB';
+
+// Used to keep track of the current product id
+let productId = '';
+
+test.beforeEach(async ({ ShopAdmin, TestDataService, AdminDashboard }) => {
+  await mockUpdateApi(ShopAdmin.page);
+
+  // Create product and assign id
+  const product = await TestDataService.createBasicProduct();
+  productId = product.id;
+
+  // Go to dashboard
+  await ShopAdmin.goesTo(AdminDashboard.url());
+
+  // The main hidden iFrame should exist
+  const mainHidden = await getSDKiFrame(ShopAdmin.page, 'sw-main-hidden');
+  await expect(mainHidden.locator('body')).not.toBeEmpty();
+});
+
+test('@sdk: get current language', async ({ ShopAdmin }) => {
+  await ShopAdmin.page.locator('.sw-order').click();
+
+  await ShopAdmin.page.getByRole('link', { name: 'Test item' }).first().click();
+
+  const frame = await getSDKiFrame(
+    ShopAdmin.page,
+    'ui-main-module-add-main-module',
+  );
+  await frame.locator('button', { hasText: 'Get current language' }).click();
+
+  await expect(
+    frame.locator('p', {
+      hasText: `system-language-ID: ${DEFAULT_LANGUAGE_ID}`,
+    }),
+  ).toBeVisible();
+  await expect(
+    frame.locator('p', { hasText: `languageId: ${DEFAULT_LANGUAGE_ID}` }),
+  ).toBeVisible();
+});
+
+test('@sdk: subscribe on language changes', async ({
+  ShopAdmin,
+  AdminProductDetail,
+}) => {
+  // Go to product directly
+  await ShopAdmin.goesTo(AdminProductDetail.url(productId));
+
+  // Open app action buttons
+  await ShopAdmin.page.locator('.sw-app-actions').click();
+  await expect(
+    ShopAdmin.page.locator('.sw-context-menu__content'),
+  ).toBeVisible();
+
+  // activate language subscription
+  await ShopAdmin.page
+    .locator('.sw-context-menu__content .sw-app-action-button', {
+      hasText: 'Activate language subscription',
+    })
+    .click();
+
+  // expect notification
+  await expect(
+    ShopAdmin.page.locator('.sw-alert__title', {
+      hasText: 'Subscriber activated',
+    }),
+  ).toBeVisible();
+  await expect(
+    ShopAdmin.page.locator('.sw-alert__message', {
+      hasText: 'The subscriber for language changes was activated',
+    }),
+  ).toBeVisible();
+
+  // close notification
+  await ShopAdmin.page.locator('.sw-alert__close').click();
+
+  // change language
+  await ShopAdmin.page.locator('.sw-language-switch input').click();
+  await ShopAdmin.page
+    .locator('.sw-select-result', { hasText: 'Deutsch' })
+    .click();
+
+  // check for subscriber alert
+  await expect(
+    ShopAdmin.page.locator('.sw-alert__title', {
+      hasText: 'Language changes',
+    }),
+  ).toBeVisible();
+  await expect(
+    ShopAdmin.page.locator('.sw-alert__message', { hasText: 'languageId: ' }),
+  ).toBeVisible(); // this id is random therefore no explicit check
+  await expect(
+    ShopAdmin.page.locator('.sw-alert__message', {
+      hasText: `systemLanguageId: ${DEFAULT_LANGUAGE_ID}`,
+    }),
+  ).toBeVisible();
+});
+
+test('@sdk: get current environment', async ({ ShopAdmin }) => {
+  await ShopAdmin.page.locator('.sw-order').click();
+
+  await ShopAdmin.page.getByRole('link', { name: 'Test item' }).first().click();
+
+  const frame = await getSDKiFrame(
+    ShopAdmin.page,
+    'ui-main-module-add-main-module',
+  );
+  await frame.locator('button', { hasText: 'Get current environment' }).click();
+
+  await expect(
+    frame.locator('p', { hasText: 'Environment: production' }),
+  ).toBeVisible();
+});
+
+test('@sdk: get current locale', async ({ ShopAdmin }) => {
+  await ShopAdmin.page.locator('.sw-order').click();
+
+  await ShopAdmin.page.getByRole('link', { name: 'Test item' }).first().click();
+
+  const frame = await getSDKiFrame(
+    ShopAdmin.page,
+    'ui-main-module-add-main-module',
+  );
+  await frame.locator('button', { hasText: 'Get current locale' }).click();
+
+  await expect(frame.locator('p', { hasText: `Locale: ${LOCALE}` })).toBeVisible();
+  await expect(
+    frame.locator('p', { hasText: `Fallback Locale: ${FALLBACK_LOCALE}` }),
+  ).toBeVisible();
+});
+
+test('@sdk: subscribe on locale changes', async ({
+  ShopAdmin,
+  AdminProductDetail,
+}) => {
+  // Go to product directly
+  await ShopAdmin.goesTo(AdminProductDetail.url(productId));
+
+  // Open app action buttons
+  await ShopAdmin.page.locator('.sw-app-actions').click();
+  await expect(
+    ShopAdmin.page.locator('.sw-context-menu__content'),
+  ).toBeVisible();
+
+  // activate locale subscription
+  await ShopAdmin.page
+    .locator('.sw-context-menu__content .sw-app-action-button', {
+      hasText: 'Activate locale subscription',
+    })
+    .click();
+
+  // expect notification
+  await expect(
+    ShopAdmin.page.locator('.sw-alert__title', {
+      hasText: 'Subscriber activated',
+    }),
+  ).toBeVisible();
+  await expect(
+    ShopAdmin.page.locator('.sw-alert__message', {
+      hasText: 'The subscriber for locale changes was activated',
+    }),
+  ).toBeVisible();
+
+  // close notification
+  await ShopAdmin.page.locator('.sw-alert__close').click();
+
+  // change locale
+  await ShopAdmin.page.locator('.sw-admin-menu__user-name').click();
+  await ShopAdmin.page.getByRole('link', { name: 'Your profile' }).click();
+  await expect(
+    ShopAdmin.page.locator('.smart-bar__header', { hasText: 'Your Profile' }),
+  ).toBeVisible();
+  await ShopAdmin.page
+    .locator('select', { hasText: 'English (United Kingdom)' })
+    .selectOption('German (Germany)');
+  await ShopAdmin.page.locator('button', { hasText: 'Save' }).click();
+  await ShopAdmin.page.locator('#sw-field--confirm-password').fill('shopware');
+  await ShopAdmin.page.locator('button', { hasText: 'Confirm' }).click();
+
+  // check for subscriber alert
+  await expect(
+    ShopAdmin.page.locator('.sw-alert__title', { hasText: 'Locale changes' }),
+  ).toBeVisible();
+  await expect(
+    ShopAdmin.page.locator('.sw-alert__message', {
+      hasText: 'locale: de-DE',
+    }),
+  ).toBeVisible();
+  await expect(
+    ShopAdmin.page.locator('.sw-alert__message', {
+      hasText: 'fallbackLocale: en-GB',
+    }),
+  ).toBeVisible();
+});
+
+test('@sdk: get current shopware version', async ({ ShopAdmin }) => {
+  await ShopAdmin.page.locator('.sw-order').click();
+
+  await ShopAdmin.page.getByRole('link', { name: 'Test item' }).first().click();
+
+  const frame = await getSDKiFrame(
+    ShopAdmin.page,
+    'ui-main-module-add-main-module',
+  );
+  await frame
+    .locator('button', { hasText: 'Get current Shopware version' })
+    .click();
+
+  await expect(
+    frame.locator('p', { hasText: 'Shopware version: 6.' }),
+  ).toBeVisible();
+});
+
+test('@sdk: get app information', async ({ ShopAdmin }) => {
+  await ShopAdmin.page.locator('.sw-order').click();
+
+  await ShopAdmin.page.getByRole('link', { name: 'Test item' }).first().click();
+
+  const frame = await getSDKiFrame(
+    ShopAdmin.page,
+    'ui-main-module-add-main-module',
+  );
+  await frame.locator('button', { hasText: 'Get app information' }).click();
+
+  await expect(
+    frame.locator('p', { hasText: 'App name: TestPlugin' }),
+  ).toBeVisible();
+  await expect(
+    frame.locator('p', { hasText: 'App type: plugin' }),
+  ).toBeVisible();
+});
+
+test('@sdk: get module information', async ({ ShopAdmin }) => {
+  await ShopAdmin.page.locator('.sw-order').click();
+
+  await ShopAdmin.page.getByRole('link', { name: 'Test item' }).first().click();
+
+  const frame = await getSDKiFrame(
+    ShopAdmin.page,
+    'ui-main-module-add-main-module',
+  );
+  await frame.locator('button', { hasText: 'Get module information' }).click();
+
+  await expect(
+    frame.locator('p', {
+      hasText:
+        'Display search bar: true Heading: App Settings LocationId: ui-menu-item-add-menu-item-with-searchbar',
+    }),
+  ).toBeVisible();
+});
diff --git a/examples/admin-sdk-plugin/tests/acceptance/tests/dataset.spec.ts b/examples/admin-sdk-plugin/tests/acceptance/tests/dataset.spec.ts
new file mode 100644
index 000000000..edf70a6bd
--- /dev/null
+++ b/examples/admin-sdk-plugin/tests/acceptance/tests/dataset.spec.ts
@@ -0,0 +1,65 @@
+import { test, expect } from '../fixtures/AcceptanceTest';
+import { getSDKiFrame, mockUpdateApi } from '../fixtures/Helper';
+
+test.beforeEach(async ({ ShopAdmin }) => {
+  await mockUpdateApi(ShopAdmin.page);
+
+  // Go to settings
+  await ShopAdmin.goesTo('/admin/#sw/settings/index/shop');
+
+  // The main hidden iFrame should exist
+  const mainHidden = await getSDKiFrame(ShopAdmin.page, 'sw-main-hidden');
+  await expect(mainHidden.locator('body')).not.toBeEmpty();
+});
+
+test('@sdk: dataset get', async ({ ShopAdmin }) => {
+  await ShopAdmin.page
+    .locator('.sw-admin-menu__navigation-link', { hasText: 'Storefront' })
+    .click();
+
+  const frame = await getSDKiFrame(ShopAdmin.page, 'data-dataset');
+  await frame.locator('button', { hasText: 'Get dataset' }).click();
+
+  await expect(
+    frame.locator('p', { hasText: 'Returned name: Storefront' }),
+  ).toBeVisible();
+  await expect(
+    frame.locator('p', { hasText: 'Returned active state: true' }),
+  ).toBeVisible();
+});
+
+test('@sdk: dataset subscribe', async ({ ShopAdmin }) => {
+  await ShopAdmin.page
+    .locator('.sw-admin-menu__navigation-link', { hasText: 'Storefront' })
+    .click();
+
+  const frame = await getSDKiFrame(ShopAdmin.page, 'data-dataset');
+  await frame.locator('button', { hasText: 'Subscribe dataset' }).click();
+
+  await expect(
+    frame.locator('p', { hasText: 'Returned name: Storefront' }),
+  ).toBeVisible();
+});
+
+test('@sdk: dataset update', async ({ ShopAdmin }) => {
+  await ShopAdmin.page
+    .locator('.sw-admin-menu__navigation-link', { hasText: 'Storefront' })
+    .click();
+
+  const frame = await getSDKiFrame(ShopAdmin.page, 'data-dataset');
+  await frame.locator('button', { hasText: 'Get dataset' }).click();
+
+  await expect(
+    frame.locator('p', { hasText: 'Returned name: Storefront' }),
+  ).toBeVisible();
+
+  await frame.locator('input').clear();
+  await frame.locator('input').fill('Shoppingfront');
+  await frame.locator('button', { hasText: 'Update to main' }).click();
+
+  await expect(
+    ShopAdmin.page.locator('.smart-bar__header', {
+      hasText: 'Shoppingfront',
+    }),
+  ).toBeVisible();
+});
diff --git a/examples/admin-sdk-plugin/tests/acceptance/tests/location.spec.ts b/examples/admin-sdk-plugin/tests/acceptance/tests/location.spec.ts
new file mode 100644
index 000000000..41f4b88c2
--- /dev/null
+++ b/examples/admin-sdk-plugin/tests/acceptance/tests/location.spec.ts
@@ -0,0 +1,67 @@
+import { test, expect } from '../fixtures/AcceptanceTest';
+import { getSDKiFrame, mockUpdateApi } from '../fixtures/Helper';
+
+test.beforeEach(async ({ ShopAdmin, TestDataService, AdminProductDetail }) => {
+  await mockUpdateApi(ShopAdmin.page);
+
+  // Create product and open detail page
+  const product = await TestDataService.createBasicProduct();
+  await ShopAdmin.goesTo(AdminProductDetail.url(product.id));
+
+  // The main hidden iFrame should exist
+  const mainHidden = await getSDKiFrame(ShopAdmin.page, 'sw-main-hidden');
+  await expect(mainHidden.locator('body')).not.toBeEmpty();
+});
+
+test('@sdk: update the height of the location iFrame', async ({
+  ShopAdmin,
+}) => {
+  await ShopAdmin.page.getByRole('link', { name: 'Specifications' }).click();
+  await expect(
+    ShopAdmin.page.locator('.sw-card__title', { hasText: 'Location tests' }),
+  ).toBeVisible();
+
+  const frame = await getSDKiFrame(ShopAdmin.page, 'location-index');
+  await frame.locator('button', { hasText: 'Stop auto resizing' }).click();
+
+  await expect(
+    frame.locator('p', { hasText: 'Auto-Resize: Off' }),
+  ).toBeVisible();
+
+  await frame.locator('input').clear();
+  await frame.locator('input').fill('456');
+  await frame.locator('button', { hasText: 'Update height manually' }).click();
+
+  await expect(
+    ShopAdmin.page.locator(`iframe[src*='location-id=location-index']`),
+  ).toHaveAttribute('height', '456px');
+});
+
+test('@sdk: start auto resizing of the iFrame height', async ({
+  ShopAdmin,
+}) => {
+  await ShopAdmin.page.getByRole('link', { name: 'Specifications' }).click();
+  await expect(
+    ShopAdmin.page.locator('.sw-card__title', { hasText: 'Location tests' }),
+  ).toBeVisible();
+
+  const frame = await getSDKiFrame(ShopAdmin.page, 'location-index');
+  await expect(
+    frame.locator('p', { hasText: 'Auto-Resize: On' }),
+  ).toBeVisible();
+
+  await frame.locator('input').clear();
+  await frame.locator('input').fill('700');
+  await frame
+    .locator('button', { hasText: 'Update height using auto resizing' })
+    .click();
+
+  /**
+   * Value is higher because the margin and padding inside the iFrame
+   * are also considered in automatic height
+   */
+  await frame.locator('button', { hasText: 'Stop auto resizing' }).click();
+  await expect(
+    ShopAdmin.page.locator(`iframe[src*='location-id=location-index']`),
+  ).toHaveAttribute('height', '736px');
+});
diff --git a/examples/admin-sdk-plugin/tests/acceptance/tests/main-module.spec.ts b/examples/admin-sdk-plugin/tests/acceptance/tests/main-module.spec.ts
new file mode 100644
index 000000000..92bf41efa
--- /dev/null
+++ b/examples/admin-sdk-plugin/tests/acceptance/tests/main-module.spec.ts
@@ -0,0 +1,58 @@
+import { test, expect } from '../fixtures/AcceptanceTest';
+import { getSDKiFrame, mockUpdateApi } from '../fixtures/Helper';
+
+test.beforeEach(async ({ ShopAdmin }) => {
+  await mockUpdateApi(ShopAdmin.page);
+
+  await ShopAdmin.goesTo('/admin/#/sw/extension/my-extensions/listing/');
+
+  const mainHidden = await getSDKiFrame(ShopAdmin.page, 'sw-main-hidden');
+  await expect(mainHidden.locator('body')).not.toBeEmpty();
+});
+
+test('@sdk: add main module', async ({ ShopAdmin }) => {
+  await expect(
+    ShopAdmin.page.locator('.sw-meteor-page__smart-bar-title'),
+  ).toBeVisible();
+  await ShopAdmin.page
+    .locator('.sw-meteor-card__content-wrapper', { hasText: 'SDK Testplugin' })
+    .locator('.sw-context-button > button')
+    .click();
+  await ShopAdmin.page
+    .locator('.sw-context-menu-item__text', { hasText: 'Open extension' })
+    .click();
+
+  await expect(
+    ShopAdmin.page.locator('.smart-bar__content', { hasText: 'My App' }),
+  ).toBeVisible();
+});
+
+test('@sdk: check main module with searchbar', async ({ ShopAdmin }) => {
+  await expect(
+    ShopAdmin.page.locator('.sw-meteor-page__smart-bar-title'),
+  ).toBeVisible();
+
+  await ShopAdmin.page.locator('.navigation-list-item__sw-extension').click();
+  await expect(
+    ShopAdmin.page.getByRole('link', { name: 'Store' }).first(),
+  ).toBeVisible();
+
+  await ShopAdmin.page
+    .getByRole('link', { name: 'Test with searchbar' })
+    .first()
+    .click();
+  await expect(
+    ShopAdmin.page.locator('.smart-bar__content', {
+      hasText: 'Test with searchbar',
+    }),
+  ).toBeVisible();
+
+  const frame = await getSDKiFrame(
+    ShopAdmin.page,
+    'ui-menu-item-add-menu-item-with-searchbar',
+  );
+  await expect(
+    frame.getByRole('heading', { name: 'Hello from the new menu page' }),
+  ).toBeVisible();
+  await expect(ShopAdmin.page.locator('.sw-page__search-bar')).toBeVisible();
+});
diff --git a/examples/admin-sdk-plugin/tests/acceptance/tests/menu-item.spec.ts b/examples/admin-sdk-plugin/tests/acceptance/tests/menu-item.spec.ts
new file mode 100644
index 000000000..3bda10cac
--- /dev/null
+++ b/examples/admin-sdk-plugin/tests/acceptance/tests/menu-item.spec.ts
@@ -0,0 +1,80 @@
+import { test, expect } from '../fixtures/AcceptanceTest';
+import { getSDKiFrame, mockUpdateApi } from '../fixtures/Helper';
+
+test.beforeEach(async ({ ShopAdmin, AdminDashboard }) => {
+  await mockUpdateApi(ShopAdmin.page);
+
+  await ShopAdmin.goesTo(AdminDashboard.url());
+
+  const mainHidden = await getSDKiFrame(ShopAdmin.page, 'sw-main-hidden');
+  await expect(mainHidden.locator('body')).not.toBeEmpty();
+});
+
+test('@sdk: add menu item', async ({ ShopAdmin }) => {
+  await ShopAdmin.page.locator('.sw-order').click();
+  await ShopAdmin.page.getByRole('link', { name: 'Test item' }).first().click();
+
+  const frame = await getSDKiFrame(
+    ShopAdmin.page,
+    'ui-main-module-add-main-module',
+  );
+
+  await expect(
+    frame.getByRole('heading', { name: 'Hello from the new Menu Page' }),
+  ).toBeVisible();
+});
+
+test('@sdk: add menu item at third level', async ({ ShopAdmin }) => {
+  await ShopAdmin.page.locator('.sw-catalogue').click();
+
+  // Trigger hover manually - Both statements are needed!
+  await ShopAdmin.page
+    .getByRole('link', { name: 'Manufacturers' })
+    .first()
+    .hover();
+  await ShopAdmin.page.evaluate(() => {
+    const element = document.querySelector(
+      '.sw-admin-menu__navigation-link-label[title="Manufacturers"]',
+    );
+    if (element) {
+      element.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    }
+  });
+  await ShopAdmin.page
+    .getByRole('link', { name: 'Third level' })
+    .nth(1)
+    .click();
+
+  const frame = await getSDKiFrame(
+    ShopAdmin.page,
+    'ui-main-module-add-main-module',
+  );
+  await expect(
+    frame.getByRole('heading', { name: 'Hello from the new Menu Page' }),
+  ).toBeVisible();
+});
+
+test('@sdk: check menu position', async ({ ShopAdmin }) => {
+  await ShopAdmin.page.locator('.navigation-list-item__sw-extension').click();
+  await expect(
+    ShopAdmin.page.getByRole('link', { name: 'Store' }).first(),
+  ).toBeVisible();
+
+  await ShopAdmin.page
+    .getByRole('link', { name: 'Test with searchbar' })
+    .first()
+    .click();
+  await expect(
+    ShopAdmin.page.locator('.smart-bar__content', {
+      hasText: 'Test with searchbar',
+    }),
+  ).toBeVisible();
+
+  await expect(
+    ShopAdmin.page
+      .locator(
+        '.sw-admin-menu__item--sw-extension > .sw-admin-menu__sub-navigation-list > .navigation-list-item__type-plugin',
+      )
+      .first(),
+  ).toHaveText('First item');
+});
diff --git a/examples/admin-sdk-plugin/tests/acceptance/tests/modals.spec.ts b/examples/admin-sdk-plugin/tests/acceptance/tests/modals.spec.ts
new file mode 100644
index 000000000..7826492b4
--- /dev/null
+++ b/examples/admin-sdk-plugin/tests/acceptance/tests/modals.spec.ts
@@ -0,0 +1,63 @@
+import { test, expect } from '../fixtures/AcceptanceTest';
+import { getSDKiFrame, mockUpdateApi } from '../fixtures/Helper';
+
+test.beforeEach(async ({ ShopAdmin, TestDataService, AdminProductDetail }) => {
+  await mockUpdateApi(ShopAdmin.page);
+
+  const product = await TestDataService.createBasicProduct();
+  await ShopAdmin.goesTo(AdminProductDetail.url(product.id));
+
+  const mainHidden = await getSDKiFrame(ShopAdmin.page, 'sw-main-hidden');
+  await expect(mainHidden.locator('body')).not.toBeEmpty();
+});
+
+test('@sdk: modals', async ({ ShopAdmin }) => {
+  await ShopAdmin.page.getByRole('link', { name: 'Example' }).click();
+  await expect(
+    ShopAdmin.page.locator('.sw-card', { hasText: 'Hello in the new tab' }),
+  ).toBeVisible();
+
+  const frame = await getSDKiFrame(ShopAdmin.page, 'ui-modals');
+  await expect(
+    frame.getByRole('heading', { name: 'Hello in the example card' }),
+  ).toBeVisible();
+
+  await frame.getByRole('button', { name: 'Open Modal' }).click();
+  await expect(
+    ShopAdmin.page.locator('.sw-modal', { hasText: 'Hello from the plugin' }),
+  ).toBeVisible();
+
+  // Open and close modal via SDK
+  const contentFrame = await getSDKiFrame(
+    ShopAdmin.page,
+    'ui-modals-modal-content',
+  );
+  await expect(
+    contentFrame.getByRole('heading', { name: 'Hello from the plugin 👋🏻' }),
+  ).toBeVisible();
+  await contentFrame.getByRole('button', { name: 'Close modal' }).click();
+
+  // Close modal via Shopware
+  await frame.getByRole('button', { name: 'Open Modal' }).click();
+  await expect(
+    ShopAdmin.page.locator('.sw-modal', { hasText: 'Hello from the plugin' }),
+  ).toBeVisible();
+  await ShopAdmin.page.getByRole('button', { name: 'Close modal' }).click();
+
+  // Modal without header
+  await frame.getByRole('button', { name: 'Open No Header' }).click();
+  await expect(
+    ShopAdmin.page.locator('.sw-modal__header'),
+  ).not.toBeInViewport();
+  await ShopAdmin.page.getByRole('button', { name: 'Close modal' }).click();
+
+  // Small modal
+  await frame.getByRole('button', { name: 'Open small variant' }).click();
+  await expect(ShopAdmin.page.locator('.sw-modal--small')).toBeVisible();
+  await ShopAdmin.page.getByRole('button', { name: 'Close modal' }).click();
+
+  // Open modal which is not closable without action
+  await frame.getByRole('button', { name: 'Open none closable' }).click();
+  await expect(ShopAdmin.page.locator('.sw-modal__close')).not.toBeInViewport();
+  await ShopAdmin.page.getByRole('button', { name: 'Close modal' }).click();
+});
diff --git a/examples/admin-sdk-plugin/tests/acceptance/tests/notification.spec.ts b/examples/admin-sdk-plugin/tests/acceptance/tests/notification.spec.ts
new file mode 100644
index 000000000..2a3228a88
--- /dev/null
+++ b/examples/admin-sdk-plugin/tests/acceptance/tests/notification.spec.ts
@@ -0,0 +1,28 @@
+import { test, expect } from '../fixtures/AcceptanceTest';
+import { getSDKiFrame, mockUpdateApi } from '../fixtures/Helper';
+
+test.beforeEach(async ({ ShopAdmin, AdminDashboard }) => {
+  await mockUpdateApi(ShopAdmin.page);
+
+  await ShopAdmin.goesTo(AdminDashboard.url());
+
+  // The main hidden iFrame should exist
+  const mainHidden = await getSDKiFrame(ShopAdmin.page, 'sw-main-hidden');
+  await expect(mainHidden.locator('body')).not.toBeEmpty();
+});
+
+test('@sdk: dispatch a notification', async ({ ShopAdmin }) => {
+  await ShopAdmin.page.locator('.sw-admin-menu__item--sw-order').click();
+  await ShopAdmin.page.getByRole('link', { name: 'Test item' }).first().click();
+
+  const frame = await getSDKiFrame(
+    ShopAdmin.page,
+    'ui-main-module-add-main-module',
+  );
+  await frame.locator('button', { hasText: 'Dispatch a notification' }).click();
+
+  ShopAdmin.page.locator('.sw-alert__title', { hasText: 'Your title' });
+  ShopAdmin.page.locator('.sw-alert__message', {
+    hasText: 'Your message',
+  });
+});
diff --git a/examples/admin-sdk-plugin/tests/acceptance/tests/settings-item.spec.ts b/examples/admin-sdk-plugin/tests/acceptance/tests/settings-item.spec.ts
new file mode 100644
index 000000000..d6eae45a1
--- /dev/null
+++ b/examples/admin-sdk-plugin/tests/acceptance/tests/settings-item.spec.ts
@@ -0,0 +1,50 @@
+import { test, expect } from '../fixtures/AcceptanceTest';
+import { getSDKiFrame, mockUpdateApi } from '../fixtures/Helper';
+
+test.beforeEach(async ({ ShopAdmin }) => {
+  await mockUpdateApi(ShopAdmin.page);
+
+  await ShopAdmin.goesTo('/admin/#sw/settings/index/shop');
+
+  const mainHidden = await getSDKiFrame(ShopAdmin.page, 'sw-main-hidden');
+  await expect(mainHidden.locator('body')).not.toBeEmpty();
+});
+
+test('@sdk: add settings without searchbar', async ({ ShopAdmin }) => {
+  await ShopAdmin.page
+    .locator('#ui-menu-item-add-menu-item', { hasText: 'Without searchbar' })
+    .click();
+  await expect(ShopAdmin.page.locator('.smart-bar__content')).toHaveText(
+    'Without searchbar',
+  );
+
+  const frame = await getSDKiFrame(
+    ShopAdmin.page,
+    'ui-menu-item-add-menu-item',
+  );
+  await expect(
+    frame.getByRole('heading', { name: 'Hello from the new Menu Page' }),
+  ).toBeVisible();
+  await expect(
+    ShopAdmin.page.locator('.sw-page__search-bar'),
+  ).not.toBeInViewport();
+});
+
+test('@sdk: add settings with searchbar', async ({ ShopAdmin }) => {
+  await ShopAdmin.goesTo('/admin/#sw/settings/index/plugins');
+  await ShopAdmin.page.getByRole('link', { name: 'App Settings' }).click();
+  await expect(ShopAdmin.page.locator('.smart-bar__content')).toHaveText(
+    'App Settings',
+  );
+
+  const frame = await getSDKiFrame(
+    ShopAdmin.page,
+    'ui-menu-item-add-menu-item',
+  );
+  await expect(
+    frame.getByRole('heading', {
+      name: 'Hello from the new menu page with searchbar',
+    }),
+  ).toBeVisible();
+  await expect(ShopAdmin.page.locator('.sw-page__search-bar')).toBeVisible();
+});
diff --git a/examples/admin-sdk-plugin/tests/acceptance/tests/tabs.spec.ts b/examples/admin-sdk-plugin/tests/acceptance/tests/tabs.spec.ts
new file mode 100644
index 000000000..f82242a20
--- /dev/null
+++ b/examples/admin-sdk-plugin/tests/acceptance/tests/tabs.spec.ts
@@ -0,0 +1,27 @@
+import { test, expect } from '../fixtures/AcceptanceTest';
+import { getSDKiFrame, mockUpdateApi } from '../fixtures/Helper';
+
+test.beforeEach(async ({ ShopAdmin, TestDataService, AdminProductDetail }) => {
+  await mockUpdateApi(ShopAdmin.page);
+
+  const product = await TestDataService.createBasicProduct();
+  await ShopAdmin.goesTo(AdminProductDetail.url(product.id));
+
+  const mainHidden = await getSDKiFrame(ShopAdmin.page, 'sw-main-hidden');
+  await expect(mainHidden.locator('body')).not.toBeEmpty();
+});
+
+test('@sdk: Check tab existence', async ({ ShopAdmin }) => {
+  await ShopAdmin.page.getByRole('link', { name: 'Example' }).click();
+  await expect(
+    ShopAdmin.page.locator('.sw-card', { hasText: 'Hello in the new tab' }),
+  ).toBeVisible();
+
+  await getSDKiFrame(ShopAdmin.page, 'ui-modals');
+
+  // Reload and make sure the tab still exists
+  await ShopAdmin.page.reload();
+  await expect(
+    ShopAdmin.page.locator('.sw-card', { hasText: 'Hello in the new tab' }),
+  ).toBeVisible();
+});
diff --git a/examples/admin-sdk-plugin/tests/acceptance/tests/window.spec.ts b/examples/admin-sdk-plugin/tests/acceptance/tests/window.spec.ts
new file mode 100644
index 000000000..806808495
--- /dev/null
+++ b/examples/admin-sdk-plugin/tests/acceptance/tests/window.spec.ts
@@ -0,0 +1,51 @@
+import { test, expect } from '../fixtures/AcceptanceTest';
+import { getSDKiFrame, mockUpdateApi } from '../fixtures/Helper';
+
+test.beforeEach(async ({ ShopAdmin, AdminDashboard }) => {
+  await mockUpdateApi(ShopAdmin.page);
+
+  await ShopAdmin.goesTo(AdminDashboard.url());
+
+  // The main hidden iFrame should exist
+  const mainHidden = await getSDKiFrame(ShopAdmin.page, 'sw-main-hidden');
+  await expect(mainHidden.locator('body')).not.toBeEmpty();
+});
+
+test('@sdk: redirect to another URL', async ({ ShopAdmin }) => {
+  await ShopAdmin.page.locator('.sw-admin-menu__item--sw-order').click();
+  await ShopAdmin.page.getByRole('link', { name: 'Test item' }).first().click();
+
+  const frame = await getSDKiFrame(
+    ShopAdmin.page,
+    'ui-main-module-add-main-module',
+  );
+  await frame.locator('button', { hasText: 'Dispatch a notification' }).click();
+
+  // Click the button that opens the new tab
+  await ShopAdmin.page
+    .locator('.sw-button__content', { hasText: 'Redirect to Shopware' })
+    .click();
+  // Wait for the new page to be created
+  const pagePromise = ShopAdmin.page.context().waitForEvent('page');
+
+  // Wait for the new page to be created and load
+  const newPage = await pagePromise;
+
+  // Check the URL of the new page
+  expect(newPage.url()).toBe('https://www.shopware.com/en/');
+});
+
+test('@sdk: push router', async ({ ShopAdmin }) => {
+  await ShopAdmin.page.locator('.sw-admin-menu__item--sw-order').click();
+  await ShopAdmin.page.getByRole('link', { name: 'Test item' }).first().click();
+
+  const frame = await getSDKiFrame(
+    ShopAdmin.page,
+    'ui-main-module-add-main-module',
+  );
+  await frame.locator('button', { hasText: 'Push route' }).click();
+
+  await expect(
+    ShopAdmin.page.locator('.sw-card__title', { hasText: 'Orders' }),
+  ).toBeVisible();
+});
diff --git a/examples/nuxt-app/CHANGELOG.md b/examples/nuxt-app/CHANGELOG.md
index 360526b76..7309c5be2 100644
--- a/examples/nuxt-app/CHANGELOG.md
+++ b/examples/nuxt-app/CHANGELOG.md
@@ -1,5 +1,20 @@
 # nuxt-app
 
+## 0.0.15
+
+### Patch Changes
+
+- Updated dependencies [cc754b9]
+- Updated dependencies [47063ae]
+- Updated dependencies [62be382]
+- Updated dependencies [28f5cb1]
+- Updated dependencies [001adb3]
+- Updated dependencies [6d32afa]
+- Updated dependencies [936ccf3]
+- Updated dependencies [2f0a666]
+- Updated dependencies [07e243a]
+  - @shopware-ag/meteor-component-library@3.14.0
+
 ## 0.0.14
 
 ### Patch Changes
diff --git a/examples/nuxt-app/package.json b/examples/nuxt-app/package.json
index bbecae723..e6fafa85c 100644
--- a/examples/nuxt-app/package.json
+++ b/examples/nuxt-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nuxt-app",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "private": true,
   "type": "module",
   "scripts": {
@@ -19,7 +19,7 @@
     "vue-router": "^4.3.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.44.0",
+    "@playwright/test": "^1.45.0",
     "@types/node": "^20.11.28"
   }
 }
diff --git a/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-chromium-linux.png b/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-chromium-linux.png
index 395f4c625..91a0c41d9 100644
Binary files a/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-chromium-linux.png and b/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-chromium-linux.png differ
diff --git a/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-firefox-linux.png b/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-firefox-linux.png
index eca03a672..9fa8c716a 100644
Binary files a/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-firefox-linux.png and b/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-firefox-linux.png differ
diff --git a/packages/admin-sdk/CHANGELOG.md b/packages/admin-sdk/CHANGELOG.md
index 3fb6d1245..65aea55b6 100644
--- a/packages/admin-sdk/CHANGELOG.md
+++ b/packages/admin-sdk/CHANGELOG.md
@@ -1,5 +1,20 @@
 # Changelog
 
+## 5.5.1
+
+### Patch Changes
+
+- Updated dependencies [cc754b9]
+- Updated dependencies [47063ae]
+- Updated dependencies [62be382]
+- Updated dependencies [28f5cb1]
+- Updated dependencies [001adb3]
+- Updated dependencies [6d32afa]
+- Updated dependencies [936ccf3]
+- Updated dependencies [2f0a666]
+- Updated dependencies [07e243a]
+  - @shopware-ag/meteor-component-library@3.14.0
+
 ## 5.5.0
 
 ### Minor Changes
diff --git a/packages/admin-sdk/e2e/channel.spec.ts b/packages/admin-sdk/e2e/channel.spec.ts
index 2b0d0ee7a..dcf181dcd 100644
--- a/packages/admin-sdk/e2e/channel.spec.ts
+++ b/packages/admin-sdk/e2e/channel.spec.ts
@@ -825,7 +825,7 @@ test.describe('Privilege tests', () => {
     if (browserName !== 'firefox') {
       // Expect console error to be thrown
       const consoleError = await waitForConsoleError;
-      expect(consoleError.text()).toContain('Error: Your app is missing the privileges read:product for action "datasetSubscribe".');
+      expect(consoleError.text()).toContain('Your app is missing the privileges read:product for action "datasetSubscribe".');
     }
 
     // check if receiving value matches
diff --git a/packages/admin-sdk/package.json b/packages/admin-sdk/package.json
index 165695eff..ef6a5ed5d 100644
--- a/packages/admin-sdk/package.json
+++ b/packages/admin-sdk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@shopware-ag/meteor-admin-sdk",
-  "version": "5.5.0",
+  "version": "5.5.1",
   "description": "The Meteor SDK for the Shopware Administration.",
   "keywords": [
     "iframe",
@@ -91,7 +91,7 @@
     "@shopware-ag/meteor-component-library": "workspace:*"
   },
   "devDependencies": {
-    "@playwright/test": "^1.44.0",
+    "@playwright/test": "^1.45.0",
     "@types/jest": "^27.4.1",
     "@types/lodash": "^4.14.191",
     "@types/node": "^18.11.17",
diff --git a/packages/component-library/CHANGELOG.md b/packages/component-library/CHANGELOG.md
index af4f1659a..86736e374 100644
--- a/packages/component-library/CHANGELOG.md
+++ b/packages/component-library/CHANGELOG.md
@@ -1,5 +1,22 @@
 # Changelog
 
+## 3.14.0
+
+### Minor Changes
+
+- 001adb3: Add external and internal variants for link component
+
+### Patch Changes
+
+- cc754b9: Deprecated the mt-url-field component
+- 47063ae: Deprecated mt-external link component
+- 62be382: move mt-loader over to plain css
+- 28f5cb1: remove default margin of banner component, hidden by future flag
+- 6d32afa: Improve a11y of help text
+- 936ccf3: Allow disabling individual tab items
+- 2f0a666: Remove default margin from base field, hidden by future flag
+- 07e243a: Migrate mt-loader over to the composition api
+
 ## 3.13.0
 
 ### Minor Changes
diff --git a/packages/component-library/__snapshots__/interaction-tests-form-mt-colorpicker--visual-test-colorpicker-with-help-text-snap.png b/packages/component-library/__snapshots__/interaction-tests-form-mt-colorpicker--visual-test-colorpicker-with-help-text-snap.png
index 60ca35f11..9bdd0b218 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-form-mt-colorpicker--visual-test-colorpicker-with-help-text-snap.png and b/packages/component-library/__snapshots__/interaction-tests-form-mt-colorpicker--visual-test-colorpicker-with-help-text-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-form-mt-select--visual-test-ensure-correct-multi-selection-wrapping-snap.png b/packages/component-library/__snapshots__/interaction-tests-form-mt-select--visual-test-ensure-correct-multi-selection-wrapping-snap.png
index 54f96fec2..4dbc6481c 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-form-mt-select--visual-test-ensure-correct-multi-selection-wrapping-snap.png and b/packages/component-library/__snapshots__/interaction-tests-form-mt-select--visual-test-ensure-correct-multi-selection-wrapping-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-form-mt-select--visual-test-ensure-selection-opens-via-indicators-snap.png b/packages/component-library/__snapshots__/interaction-tests-form-mt-select--visual-test-ensure-selection-opens-via-indicators-snap.png
new file mode 100644
index 000000000..d961e2946
Binary files /dev/null and b/packages/component-library/__snapshots__/interaction-tests-form-mt-select--visual-test-ensure-selection-opens-via-indicators-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-form-mt-select--visual-test-multi-select-snap.png b/packages/component-library/__snapshots__/interaction-tests-form-mt-select--visual-test-multi-select-snap.png
index c51cfea89..9d4d8b83b 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-form-mt-select--visual-test-multi-select-snap.png and b/packages/component-library/__snapshots__/interaction-tests-form-mt-select--visual-test-multi-select-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-snap.png b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-snap.png
index 660a42ae5..c74ccbdec 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-snap.png and b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-with-hero-snap.png b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-with-hero-snap.png
index 4929b8e2d..156aa5594 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-with-hero-snap.png and b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-with-hero-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-with-opened-context-actions-snap.png b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-with-opened-context-actions-snap.png
index 62e637bb0..3191900c5 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-with-opened-context-actions-snap.png and b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-with-opened-context-actions-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-avatar-snap.png b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-avatar-snap.png
index ebc26255d..b28baf010 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-avatar-snap.png and b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-avatar-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-context-actions-snap.png b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-context-actions-snap.png
index 34160d360..082dc4681 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-context-actions-snap.png and b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-context-actions-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-footer-snap.png b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-footer-snap.png
index 2f4665a63..2eabb6352 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-footer-snap.png and b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-footer-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-header-right-snap.png b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-header-right-snap.png
index d455ff534..225cfe6ef 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-header-right-snap.png and b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-header-right-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-tabs-snap.png b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-tabs-snap.png
index 03470b524..e225ca888 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-tabs-snap.png and b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-tabs-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-toolbar-snap.png b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-toolbar-snap.png
index 39a97482c..15b575d81 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-toolbar-snap.png and b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-extended-page-without-toolbar-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-snap.png b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-snap.png
index 60f98b791..962d4ca49 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-snap.png and b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-with-custom-footer-snap.png b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-with-custom-footer-snap.png
index 3c4de4f68..c43f844e7 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-with-custom-footer-snap.png and b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-with-custom-footer-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-with-unlinked-inheritance-snap.png b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-with-unlinked-inheritance-snap.png
index 69c751773..13dbf8c94 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-with-unlinked-inheritance-snap.png and b/packages/component-library/__snapshots__/interaction-tests-layout-mt-card--visual-test-minimal-page-with-unlinked-inheritance-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-navigation-mt-segmented-control--visual-test-render-segmented-control-with-popover-base-snap.png b/packages/component-library/__snapshots__/interaction-tests-navigation-mt-segmented-control--visual-test-render-segmented-control-with-popover-base-snap.png
index 4f7b252ca..4519f36d9 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-navigation-mt-segmented-control--visual-test-render-segmented-control-with-popover-base-snap.png and b/packages/component-library/__snapshots__/interaction-tests-navigation-mt-segmented-control--visual-test-render-segmented-control-with-popover-base-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-navigation-mt-segmented-control--visual-test-render-segmented-control-with-popover-second-level-snap.png b/packages/component-library/__snapshots__/interaction-tests-navigation-mt-segmented-control--visual-test-render-segmented-control-with-popover-second-level-snap.png
index bbf26f978..aff1699e9 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-navigation-mt-segmented-control--visual-test-render-segmented-control-with-popover-second-level-snap.png and b/packages/component-library/__snapshots__/interaction-tests-navigation-mt-segmented-control--visual-test-render-segmented-control-with-popover-second-level-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-navigation-mt-tabs--visual-test-render-tabs-with-context-menu-badge-snap.png b/packages/component-library/__snapshots__/interaction-tests-navigation-mt-tabs--visual-test-render-tabs-with-context-menu-badge-snap.png
index a94e60e4d..66fe8a042 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-navigation-mt-tabs--visual-test-render-tabs-with-context-menu-badge-snap.png and b/packages/component-library/__snapshots__/interaction-tests-navigation-mt-tabs--visual-test-render-tabs-with-context-menu-badge-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-overlay-mt-popover--visual-test-render-popover-snap.png b/packages/component-library/__snapshots__/interaction-tests-overlay-mt-popover--visual-test-render-popover-snap.png
index a17b74c70..45f38644a 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-overlay-mt-popover--visual-test-render-popover-snap.png and b/packages/component-library/__snapshots__/interaction-tests-overlay-mt-popover--visual-test-render-popover-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-overlay-mt-popover--visual-test-render-without-float-snap.png b/packages/component-library/__snapshots__/interaction-tests-overlay-mt-popover--visual-test-render-without-float-snap.png
index fa5e482a4..847f229f0 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-overlay-mt-popover--visual-test-render-without-float-snap.png and b/packages/component-library/__snapshots__/interaction-tests-overlay-mt-popover--visual-test-render-without-float-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-column-indicator-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-column-indicator-snap.png
index 73eedc076..e0a247809 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-column-indicator-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-column-indicator-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-filter-via-filter-menu-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-filter-via-filter-menu-snap.png
index d9d26d8ce..1a06f695a 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-filter-via-filter-menu-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-filter-via-filter-menu-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-filter-via-icon-button-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-filter-via-icon-button-snap.png
index 67db94e79..1095b6370 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-filter-via-icon-button-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-filter-via-icon-button-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-new-column-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-new-column-snap.png
index ec95ba7ea..81a2923ec 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-new-column-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-new-column-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-option-via-the-filter-edit-menu-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-option-via-the-filter-edit-menu-snap.png
index 678215250..62d9710c5 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-option-via-the-filter-edit-menu-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-add-option-via-the-filter-edit-menu-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-blank-table-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-blank-table-snap.png
index 8105331ca..3b8065778 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-blank-table-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-blank-table-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-column-drag-bar-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-column-drag-bar-snap.png
index 503fd8a27..c72b0d54a 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-column-drag-bar-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-column-drag-bar-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-column-drag-drop-ordering-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-column-drag-drop-ordering-snap.png
index d386381bd..5c13f782f 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-column-drag-drop-ordering-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-column-drag-drop-ordering-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-column-settings-popover-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-column-settings-popover-snap.png
index e5bf0524b..aa9aaa427 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-column-settings-popover-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-column-settings-popover-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-column-settings-popover-without-sort-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-column-settings-popover-without-sort-snap.png
index a4be15279..e378f897e 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-column-settings-popover-without-sort-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-column-settings-popover-without-sort-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-data-sorting-in-column-settings-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-data-sorting-in-column-settings-snap.png
index bab1e9ab4..440ee734b 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-data-sorting-in-column-settings-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-data-sorting-in-column-settings-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-emit-reload-event-on-clicking-reload-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-emit-reload-event-on-clicking-reload-snap.png
index 477476150..3ef530a14 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-emit-reload-event-on-clicking-reload-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-emit-reload-event-on-clicking-reload-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-enable-row-numbering-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-enable-row-numbering-snap.png
index a342d74fc..9e44a1841 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-enable-row-numbering-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-enable-row-numbering-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-hide-outlines-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-hide-outlines-snap.png
index 4378560a9..97a5b1f82 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-hide-outlines-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-hide-outlines-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-hide-stripes-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-hide-stripes-snap.png
index 336ea5a3c..cb13dce66 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-hide-stripes-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-hide-stripes-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-open-column-settings-menu-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-open-column-settings-menu-snap.png
index dca200925..07d2b6168 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-open-column-settings-menu-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-open-column-settings-menu-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-open-settings-menu-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-open-settings-menu-snap.png
index f1a2c9ef1..252b9e44e 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-open-settings-menu-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-open-settings-menu-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-remove-filter-via-filter-menu-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-remove-filter-via-filter-menu-snap.png
index 0fb1d19c6..dd0b29834 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-remove-filter-via-filter-menu-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-remove-filter-via-filter-menu-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-remove-filter-via-icon-button-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-remove-filter-via-icon-button-snap.png
index b5ac5249d..f62c169db 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-remove-filter-via-icon-button-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-remove-filter-via-icon-button-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-remove-option-via-the-filter-edit-menu-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-remove-option-via-the-filter-edit-menu-snap.png
index 248e6aa7b..958cb318a 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-remove-option-via-the-filter-edit-menu-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-remove-option-via-the-filter-edit-menu-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-remove-option-via-the-remove-all-button-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-remove-option-via-the-remove-all-button-snap.png
index b5ac5249d..39f2a74fd 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-remove-option-via-the-remove-all-button-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-remove-option-via-the-remove-all-button-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-remove-option-via-the-remove-button-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-remove-option-via-the-remove-button-snap.png
index b5ac5249d..39f2a74fd 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-remove-option-via-the-remove-button-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-remove-option-via-the-remove-button-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-empty-state-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-empty-state-snap.png
index bb2d40fb2..d808a3865 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-empty-state-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-empty-state-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-full-table-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-full-table-snap.png
index 59f694800..623aba87e 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-full-table-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-full-table-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-skeleton-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-skeleton-snap.png
index 663bef310..4df8539b2 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-skeleton-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-skeleton-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-table-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-table-snap.png
index 7675e0a83..89ee9441d 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-table-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-table-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-table-sticky-header-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-table-sticky-header-snap.png
index 378e4fdfb..12031754b 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-table-sticky-header-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-table-sticky-header-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-table-with-an-image-in-cell-table-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-table-with-an-image-in-cell-table-snap.png
index dd3470050..85807b62a 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-table-with-an-image-in-cell-table-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-table-with-an-image-in-cell-table-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-table-with-scroll-shadows-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-table-with-scroll-shadows-snap.png
index 7e2001ce7..c5ec7e07f 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-table-with-scroll-shadows-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-render-table-with-scroll-shadows-snap.png differ
diff --git a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-should-hide-the-last-column-with-via-disable-context-menu-and-settings-table-snap.png b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-should-hide-the-last-column-with-via-disable-context-menu-and-settings-table-snap.png
index a26a335e4..5ab04d884 100644
Binary files a/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-should-hide-the-last-column-with-via-disable-context-menu-and-settings-table-snap.png and b/packages/component-library/__snapshots__/interaction-tests-table-and-list-mt-data-table--visual-test-should-hide-the-last-column-with-via-disable-context-menu-and-settings-table-snap.png differ
diff --git a/packages/component-library/package.json b/packages/component-library/package.json
index aceca2a88..eca945faa 100644
--- a/packages/component-library/package.json
+++ b/packages/component-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@shopware-ag/meteor-component-library",
-  "version": "3.13.0",
+  "version": "3.14.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com:shopware/meteor.git"
diff --git a/packages/component-library/src/components/_internal/mt-label.vue b/packages/component-library/src/components/_internal/mt-label.vue
index f76cc8719..1ac2a66a6 100644
--- a/packages/component-library/src/components/_internal/mt-label.vue
+++ b/packages/component-library/src/components/_internal/mt-label.vue
@@ -10,7 +10,7 @@
     <button
       v-if="showDismissable"
       class="mt-label__dismiss"
-      :title="$tc('mt-label.remove')"
+      :title="t('remove')"
       @click.prevent.stop="$emit('dismiss')"
     >
       <slot name="dismiss-icon">
@@ -20,98 +20,56 @@
   </span>
 </template>
 
-<script lang="ts">
-import type { PropType } from "vue";
-
-import { defineComponent } from "vue";
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
 import MtIcon from "../icons-media/mt-icon/mt-icon.vue";
 import MtColorBadge from "../feedback-indicator/mt-color-badge/mt-color-badge.vue";
-
-export default defineComponent({
-  name: "MtLabel",
-
-  i18n: {
-    messages: {
-      en: {
-        "mt-label": {
-          remove: "Remove",
-        },
-      },
-      de: {
-        "mt-label": {
-          remove: "Entfernen",
-        },
-      },
-    },
+import { useI18n } from "@/composables/useI18n";
+
+const props = withDefaults(
+  defineProps<{
+    variant?: "info" | "danger" | "success" | "warning" | "neutral" | "primary";
+    size?: "small" | "medium" | "default";
+    appearance?: "default" | "pill" | "circle" | "badged";
+    ghost?: boolean;
+    caps?: boolean;
+    dismissable?: boolean;
+  }>(),
+  {
+    // @ts-expect-error
+    variant: "",
+    size: "default",
+    appearance: "default",
+    ghost: false,
+    caps: false,
   },
+);
 
-  components: {
-    "mt-icon": MtIcon,
-    "mt-color-badge": MtColorBadge,
-  },
-
-  props: {
-    variant: {
-      type: String as PropType<"info" | "danger" | "success" | "warning" | "neutral" | "primary">,
-      required: false,
-      default: "",
-      validator(value: string) {
-        if (!value.length) {
-          return true;
-        }
-        return ["info", "danger", "success", "warning", "neutral", "primary"].includes(value);
-      },
-    },
-    size: {
-      type: String as PropType<"small" | "medium" | "default">,
-      required: false,
-      default: "default",
-      validator(value: string) {
-        return ["small", "medium", "default"].includes(value);
-      },
+const { t } = useI18n({
+  messages: {
+    en: {
+      remove: "Remove",
     },
-    appearance: {
-      type: String as PropType<"default" | "pill" | "circle" | "badged">,
-      required: false,
-      default: "default",
-      validator(value: string) {
-        return ["default", "pill", "circle", "badged"].includes(value);
-      },
-    },
-    ghost: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    caps: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    dismissable: {
-      type: Boolean,
-      required: false,
-      default: true,
+    de: {
+      remove: "Entfernen",
     },
   },
+});
 
-  computed: {
-    labelClasses() {
-      return [
-        `mt-label--appearance-${this.appearance}`,
-        `mt-label--size-${this.size}`,
-        {
-          [`mt-label--${this.variant}`]: !!this.variant,
-          "mt-label--dismissable": this.showDismissable,
-          "mt-label--ghost": this.ghost,
-          "mt-label--caps": this.caps,
-        },
-      ];
-    },
-    showDismissable(): boolean {
-      return !!this.$attrs.onDismiss && this.dismissable;
+const attrs = useAttrs();
+const showDismissable = computed(() => !!attrs.onDismiss && props.dismissable);
+
+const labelClasses = computed(() => {
+  return [
+    `mt-label--appearance-${props.appearance}`,
+    `mt-label--size-${props.size}`,
+    {
+      [`mt-label--${props.variant}`]: !!props.variant,
+      "mt-label--dismissable": showDismissable,
+      "mt-label--ghost": props.ghost,
+      "mt-label--caps": props.caps,
     },
-  },
+  ];
 });
 </script>
 
diff --git a/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue b/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue
index 7a4403088..666285f8d 100644
--- a/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue
+++ b/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue
@@ -23,8 +23,7 @@
     <button
       v-if="closable"
       class="mt-banner__close"
-      aria-label="Schließen"
-      title="Schließen"
+      :aria-label="t('close')"
       @click.prevent="$emit('close', bannerIndex)"
     >
       <mt-icon name="solid-times-s" />
@@ -37,6 +36,18 @@ import { computed } from "vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
 import MtText from "@/components/content/mt-text/mt-text.vue";
 import { useFutureFlags } from "@/composables/useFutureFlags";
+import { useI18n } from "@/composables/useI18n";
+
+const { t } = useI18n({
+  messages: {
+    de: {
+      close: "Schließen",
+    },
+    en: {
+      close: "Close",
+    },
+  },
+});
 
 const props = withDefaults(
   defineProps<{
diff --git a/packages/component-library/src/components/form/_internal/mt-field-label/mt-field-label.vue b/packages/component-library/src/components/form/_internal/mt-field-label/mt-field-label.vue
index e66e77c8d..cfdf95880 100644
--- a/packages/component-library/src/components/form/_internal/mt-field-label/mt-field-label.vue
+++ b/packages/component-library/src/components/form/_internal/mt-field-label/mt-field-label.vue
@@ -3,11 +3,7 @@
     <button
       v-if="inheritance !== 'none'"
       class="mt-field-label__inheritance-switch"
-      :aria-label="
-        inheritance === 'linked'
-          ? $t('mt-field-label.unlinkInheritance')
-          : $t('mt-field-label.linkInheritance')
-      "
+      :aria-label="inheritance === 'linked' ? t('unlinkInheritance') : t('linkInheritance')"
       @click="$emit('update:inheritance', inheritance === 'linked' ? 'unlinked' : 'linked')"
     >
       <mt-icon
@@ -23,75 +19,48 @@
   </label>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from "vue";
+<script setup lang="ts">
+import { computed } from "vue";
 import MtIcon from "@/components/icons-media/mt-icon/mt-icon.vue";
+import { useI18n } from "@/composables/useI18n";
 
-export default defineComponent({
-  name: "MtFieldLabel",
-
-  components: {
-    MtIcon,
-  },
-
-  i18n: {
-    messages: {
-      en: {
-        "mt-field-label": {
-          linkInheritance: "Link inheritance",
-          unlinkInheritance: "Unlink inheritance",
-        },
-      },
-      de: {
-        "mt-field-label": {
-          linkInheritance: "Vererbung verknüpfen",
-          unlinkInheritance: "Vererbung trennen",
-        },
-      },
-    },
-  },
-
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-
-    hasError: {
-      type: Boolean,
-      required: false,
-      default: false,
+const { t } = useI18n({
+  messages: {
+    en: {
+      linkInheritance: "Link inheritance",
+      unlinkInheritance: "Unlink inheritance",
     },
-
-    required: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
-    inheritance: {
-      type: String,
-      required: false,
-      default: "none",
-      validator: (value: string) => ["linked", "unlinked", "none"].includes(value),
+    de: {
+      linkInheritance: "Vererbung verknüpfen",
+      unlinkInheritance: "Vererbung trennen",
     },
   },
+});
 
-  emits: ["update:inheritance"],
-
-  setup(props) {
-    const classes = computed(() => ({
-      "mt-field-label": true,
-      "mt-field-label--with-error": props.hasError,
-      "mt-field-label--is-required": props.required,
-      "mt-field-label--has-linked-inheritance": props.inheritance === "linked",
-    }));
-
-    return {
-      classes,
-    };
+const props = withDefaults(
+  defineProps<{
+    id: string;
+    hasError?: boolean;
+    required?: boolean;
+    inheritance?: "linked" | "unlinked" | "none";
+  }>(),
+  {
+    inheritance: "none",
   },
-});
+);
+
+defineEmits<{
+  (e: "update:inheritance", value: "linked" | "unlinked"): void;
+}>();
+
+const classes = computed(() => [
+  "mt-field-label",
+  {
+    "mt-field-label--with-error": props.hasError,
+    "mt-field-label--is-required": props.required,
+    "mt-field-label--has-linked-inheritance": props.inheritance === "linked",
+  },
+]);
 </script>
 
 <style scoped>
diff --git a/packages/component-library/src/components/form/_internal/mt-select-base/mt-select-base.vue b/packages/component-library/src/components/form/_internal/mt-select-base/mt-select-base.vue
index babb2f0a4..0ffc0472d 100644
--- a/packages/component-library/src/components/form/_internal/mt-select-base/mt-select-base.vue
+++ b/packages/component-library/src/components/form/_internal/mt-select-base/mt-select-base.vue
@@ -22,7 +22,7 @@
         ref="selectWrapper"
         class="mt-select__selection"
         tabindex="0"
-        @click="expand"
+        @click.stop="expand"
         @focus="expand"
         @keydown.tab="collapse"
         @keydown.esc="collapse"
@@ -31,25 +31,32 @@
           name="mt-select-selection"
           v-bind="{ identification, error, disabled, size, expand, collapse }"
         />
-        <div class="mt-select__selection-indicators">
-          <mt-loader v-if="isLoading" class="mt-select__select-indicator" size="16px" />
-
-          <button
-            v-if="!disabled && showClearableButton"
-            class="mt-select__select-indicator-hitbox"
-            data-clearable-button
-            data-testid="select-clear-button"
-            @click.prevent.stop="emitClear"
-            @keydown.tab.stop="focusParentSelect"
-          >
-            <mt-icon
-              class="mt-select__select-indicator mt-select__select-indicator-clear"
-              name="regular-times-xxs"
-            />
-          </button>
-
-          <mt-icon class="mt-select__select-indicator" name="solid-chevron-down-xs" />
-        </div>
+      </div>
+
+      <div class="mt-select__selection-indicators">
+        <mt-loader v-if="isLoading" class="mt-select__select-indicator" size="16px" />
+
+        <button
+          v-if="!disabled && showClearableButton"
+          class="mt-select__select-indicator-hitbox"
+          data-clearable-button
+          data-testid="select-clear-button"
+          @click.prevent.stop="emitClear"
+          @keydown.tab.stop="focusParentSelect"
+        >
+          <mt-icon
+            class="mt-select__select-indicator mt-select__select-indicator-clear"
+            name="regular-times-xxs"
+          />
+        </button>
+
+        <mt-icon
+          class="mt-select__select-indicator"
+          data-testid="mt-select__select-indicator"
+          :class="{ 'mt-select__select-indicator-rotated': expanded }"
+          name="solid-chevron-down-xxs"
+          @click.stop="toggleExpand"
+        />
       </div>
 
       <template v-if="expanded">
@@ -354,6 +361,11 @@ $mt-select-focus-transition: all ease-in-out 0.2s;
   .mt-select__select-indicator {
     flex-shrink: 0;
     cursor: pointer;
+    transition: all 0.3s ease-in-out;
+  }
+
+  .mt-select__select-indicator-rotated {
+    transform: rotate(180deg);
   }
 
   .mt-select__select-indicator-clear {
diff --git a/packages/component-library/src/components/form/mt-checkbox/mt-checkbox.vue b/packages/component-library/src/components/form/mt-checkbox/mt-checkbox.vue
index 9f54f7973..3cc8095c8 100644
--- a/packages/component-library/src/components/form/mt-checkbox/mt-checkbox.vue
+++ b/packages/component-library/src/components/form/mt-checkbox/mt-checkbox.vue
@@ -292,6 +292,12 @@ export default defineComponent({
       height: 16px;
       position: relative;
 
+      &:has(:focus-visible) {
+        outline: 2px solid var(--color-border-brand-selected);
+        outline-offset: 2px;
+        border-radius: var(--border-radius-checkbox);
+      }
+
       & input[type="checkbox"] {
         opacity: 0;
         display: block;
diff --git a/packages/component-library/src/components/form/mt-select/mt-select.interactive.stories.ts b/packages/component-library/src/components/form/mt-select/mt-select.interactive.stories.ts
index c45d83d87..7a1e84c91 100644
--- a/packages/component-library/src/components/form/mt-select/mt-select.interactive.stories.ts
+++ b/packages/component-library/src/components/form/mt-select/mt-select.interactive.stories.ts
@@ -407,3 +407,26 @@ export const VisualTestEnsureCorrectMultiSelectionWrapping: MtSelectStory = {
     await userEvent.click(loadMoreButton);
   },
 };
+
+export const VisualTestEnsureSelectionOpensViaIndicators: MtSelectStory = {
+  name: "Should open selection via indicators",
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitUntil(() =>
+      document.querySelector('.mt-select-selection-list__item[title="Option B"]'),
+    );
+
+    // open selection via indicator
+    await userEvent.click(canvas.getByTestId("mt-select__select-indicator"));
+
+    // selection should open
+    const popover = within(
+      document.querySelector(".mt-popover-deprecated__wrapper") as HTMLElement,
+    );
+    await waitUntil(() => popover.getByTestId("mt-select-option--a"));
+
+    // close selection via indicator
+    await userEvent.click(canvas.getByTestId("mt-select__select-indicator"));
+    expect(document.querySelector(".mt-popover-deprecated__wrapper")).toBeNull();
+  },
+};
diff --git a/packages/component-library/src/components/form/mt-select/mt-select.vue b/packages/component-library/src/components/form/mt-select/mt-select.vue
index 97ee08b42..29af53285 100644
--- a/packages/component-library/src/components/form/mt-select/mt-select.vue
+++ b/packages/component-library/src/components/form/mt-select/mt-select.vue
@@ -49,7 +49,7 @@
         ref="MtSelectResultList"
         :options="visibleResults"
         :is-loading="isLoading"
-        :empty-message="$t('mt-select.messageNoResults', { term: searchTerm })"
+        :empty-message="t('messageNoResults', { term: searchTerm })"
         :focus-el="$refs.selectionList.getFocusEl()"
         @paginate="$emit('paginate')"
         @item-select="addItem"
@@ -124,25 +124,11 @@ import MtSelectResultList from "../_internal/mt-select-base/_internal/mt-select-
 import MtSelectResult from "../_internal/mt-select-base/_internal/mt-select-result.vue";
 import MtSelectSelectionList from "../_internal/mt-select-base/_internal/mt-select-selection-list.vue";
 import MtHighlightText from "../../_internal/mt-highlight-text.vue";
+import { useI18n } from "@/composables/useI18n";
 
 export default defineComponent({
   name: "MtSelect",
 
-  i18n: {
-    messages: {
-      en: {
-        "mt-select": {
-          messageNoResults: 'No results found for "{term}".',
-        },
-      },
-      de: {
-        "mt-select": {
-          messageNoResults: 'Es wurden keine Ergebnisse für "{term}" gefunden.',
-        },
-      },
-    },
-  },
-
   components: {
     "mt-select-base": MtSelectBase,
     "mt-select-result-list": MtSelectResultList,
@@ -436,6 +422,23 @@ export default defineComponent({
     },
   },
 
+  setup() {
+    const { t } = useI18n({
+      messages: {
+        en: {
+          messageNoResults: 'No results found for "{term}".',
+        },
+        de: {
+          messageNoResults: 'Es wurden keine Ergebnisse für "{term}" gefunden.',
+        },
+      },
+    });
+
+    return {
+      t,
+    };
+  },
+
   watch: {
     valueLimit(value) {
       this.limit = value;
diff --git a/packages/component-library/src/components/form/mt-switch/mt-switch.vue b/packages/component-library/src/components/form/mt-switch/mt-switch.vue
index 0766d02a2..e312bcd9e 100644
--- a/packages/component-library/src/components/form/mt-switch/mt-switch.vue
+++ b/packages/component-library/src/components/form/mt-switch/mt-switch.vue
@@ -368,10 +368,10 @@ export default defineComponent({
       }
     }
 
-    &:focus-within {
+    &:has(:focus-visible) {
       .mt-field__switch-state {
-        border-color: $color-shopware-brand-500;
-        box-shadow: 0 0 4px $color-shopware-brand-500;
+        outline: 2px solid var(--color-border-brand-selected);
+        outline-offset: 2px;
       }
     }
   }
diff --git a/packages/component-library/src/components/layout/mt-card/mt-card.vue b/packages/component-library/src/components/layout/mt-card/mt-card.vue
index 8aae7192c..adcc02222 100644
--- a/packages/component-library/src/components/layout/mt-card/mt-card.vue
+++ b/packages/component-library/src/components/layout/mt-card/mt-card.vue
@@ -9,18 +9,24 @@
         <slot name="avatar" />
       </div>
 
-      <div :class="titleWrapperClasses">
+      <div
+        :class="[
+          'mt-card__titles',
+          {
+            'mt-card__titles--has-inheritance-toggle': props.inheritance !== undefined,
+          },
+        ]"
+      >
         <button
           v-if="inheritance !== undefined"
           class="mt-card__inheritance-toggle"
-          :aria-label="
-            !!inheritance
-              ? $t('mt-card.inheritanceToggle.disableInheritance')
-              : $t('mt-card.inheritanceToggle.enableInheritance')
-          "
+          :aria-label="!!inheritance ? t('disableInheritance') : t('enableInheritance')"
           @click="$emit('update:inheritance', !inheritance)"
         >
-          <mt-icon :name="inheritanceToggleIcon" size="20" />
+          <mt-icon
+            :name="inheritance ? 'regular-link-horizontal' : 'regular-link-horizontal-slash'"
+            size="1.25rem"
+          />
         </button>
 
         <!-- @slot Alternative slot to the title property -->
@@ -86,143 +92,75 @@
   <slot name="after-card" />
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, useSlots, type PropType } from "vue";
+<script setup lang="ts">
+import { computed } from "vue";
 import MtContextButton from "../../context-menu/mt-context-button/mt-context-button.vue";
 import MtLoader from "../../feedback-indicator/mt-loader/mt-loader.vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
 import MtText from "../../content/mt-text/mt-text.vue";
 import { useFutureFlags } from "@/composables/useFutureFlags";
-
-export default defineComponent({
-  name: "MtCard",
-
-  components: {
-    MtContextButton,
-    MtLoader,
-    MtIcon,
-    MtText,
-  },
-
-  props: {
-    /**
-     * The title of the card
-     */
-    title: {
-      type: String,
-      required: false,
-      default: "",
-    },
-
-    /**
-     * The subtitle of the card
-     */
-    subtitle: {
-      type: String,
-      required: false,
-      default: "",
-    },
-
-    /**
-     * Renders the card as a hero card without styling
-     * @deprecated v4.0.0 - will be removed without replacement
-     */
-    hero: {
-      type: Boolean,
-      required: false,
-      default: false,
+import { useI18n } from "@/composables/useI18n";
+
+const props = defineProps<{
+  title?: string;
+  subtitle?: string;
+
+  // @deprecated v4.0.0 - will be removed without replacement
+  hero?: boolean;
+  isLoading?: boolean;
+
+  // @deprecated v4.0.0 - will be removed without replacement
+  large?: boolean;
+  inheritance?: boolean;
+}>();
+
+defineEmits<{
+  (e: "update:inheritance", value: boolean): void;
+}>();
+
+const { t } = useI18n({
+  messages: {
+    en: {
+      disableInheritance: "Disable inheritance",
+      enableInheritance: "Enable inheritance",
     },
-
-    /**
-     * Show a loading spinner overlay over the whole card.
-     */
-    isLoading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
-    /**
-     * Render the card in a large size
-     * @depracated v4.0.0 - will be removed without replacement
-     */
-    large: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
-    /**
-     * Render a inheritance toggle
-     */
-    inheritance: {
-      type: Boolean as PropType<boolean | undefined>,
-      required: false,
-      default: undefined,
+    de: {
+      disableInheritance: "Vererbung deaktivieren",
+      enableInheritance: "Vererbung aktivieren",
     },
   },
-
-  emits: ["update:inheritance"],
-
-  i18n: {
-    messages: {
-      en: {
-        "mt-card": {
-          inheritanceToggle: {
-            disableInheritance: "Disable inheritance",
-            enableInheritance: "Enable inheritance",
-          },
-        },
-      },
-      de: {
-        "mt-card": {
-          inheritanceToggle: {
-            disableInheritance: "Vererbung deaktivieren",
-            enableInheritance: "Vererbung aktivieren",
-          },
-        },
-      },
-    },
-  },
-
-  setup(props) {
-    const slots = useSlots();
-
-    const futureFlags = useFutureFlags();
-
-    const showHeader = computed(
-      () =>
-        !!props.title || !!slots.title || !!props.subtitle || !!slots.subtitle || !!slots.avatar,
-    );
-
-    const cardClasses = computed(() => ({
-      "mt-card--grid": !!slots.grid,
-      // @deprecated v4.0.0 - will be removed without replacement
-      "mt-card--hero": !!props.hero,
-      "mt-card--large": props.large,
-      "mt-card--has-footer": !!slots.footer,
-      "mt-card--is-inherited": !!props.inheritance,
-      "mt-card--future-ignore-max-width": futureFlags.removeCardWidth,
-      "mt-card--future-remove-default-margin": futureFlags.removeDefaultMargin,
-    }));
-
-    const titleWrapperClasses = computed(() => ({
-      "mt-card__titles": true,
-      "mt-card__titles--has-inheritance-toggle": props.inheritance !== undefined,
-    }));
-
-    const inheritanceToggleIcon = computed(() =>
-      props.inheritance ? "regular-link-horizontal" : "regular-link-horizontal-slash",
-    );
-
-    return {
-      showHeader,
-      cardClasses,
-      titleWrapperClasses,
-      inheritanceToggleIcon,
-    };
-  },
 });
+
+const slots = defineSlots<{
+  title(): void;
+  subtitle(): void;
+  avatar(): void;
+  grid(): void;
+  footer(): void;
+  default(): void;
+  toolbar(): void;
+  tabs(): void;
+  "before-card"(): void;
+  "after-card"(): void;
+  headerRight(): void;
+  "context-actions"(): void;
+}>();
+
+const showHeader = computed(
+  () => !!props.title || !!slots.title || !!props.subtitle || !!slots.subtitle || !!slots.avatar,
+);
+
+const futureFlags = useFutureFlags();
+const cardClasses = computed(() => ({
+  "mt-card--grid": !!slots.grid,
+  // @deprecated v4.0.0 - will be removed without replacement
+  "mt-card--hero": !!props.hero,
+  "mt-card--large": props.large,
+  "mt-card--has-footer": !!slots.footer,
+  "mt-card--is-inherited": !!props.inheritance,
+  "mt-card--future-ignore-max-width": futureFlags.removeCardWidth,
+  "mt-card--future-remove-default-margin": futureFlags.removeDefaultMargin,
+}));
 </script>
 
 <style scoped>
diff --git a/packages/component-library/src/components/navigation/mt-search/mt-search.vue b/packages/component-library/src/components/navigation/mt-search/mt-search.vue
index ddf2c0579..b88a425a6 100644
--- a/packages/component-library/src/components/navigation/mt-search/mt-search.vue
+++ b/packages/component-library/src/components/navigation/mt-search/mt-search.vue
@@ -2,103 +2,49 @@
   <div :class="['mt-search', `mt-search--size-${size}`, { 'mt-search--disabled': disabled }]">
     <input
       :value="modelValue"
-      @input="onInput"
-      @change="onChange"
+      @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+      @change="$emit('change', ($event.target as HTMLInputElement).value || '')"
       class="mt-search__input"
       :disabled="disabled"
       type="text"
-      :placeholder="placeholder || $t('mt-search.searchPlaceholder')"
+      :placeholder="placeholder || t('placeholder')"
     />
 
     <mt-icon name="regular-search-s" size="1rem" color="var(--color-icon-primary-default)" />
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { useI18n } from "@/composables/useI18n";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
-import { defineComponent } from "vue";
 
-export default defineComponent({
-  components: {
-    "mt-icon": MtIcon,
+withDefaults(
+  defineProps<{
+    modelValue?: string;
+    placeholder?: string;
+    size?: "small" | "default";
+    disabled?: boolean;
+  }>(),
+  {
+    size: "default",
   },
+);
 
-  props: {
-    /**
-     * The value of the search field.
-     */
-    modelValue: {
-      type: String,
-      required: false,
-      default: "",
+const { t } = useI18n({
+  messages: {
+    en: {
+      placeholder: "Search",
     },
-
-    /**
-     * A placeholder text being displayed if no value is set.
-     */
-    placeholder: {
-      type: String,
-      required: false,
-      default: "",
-    },
-
-    /**
-     * The size of the search field.
-     *
-     * @values small, default
-     */
-    size: {
-      type: String,
-      required: false,
-      default: "default",
-      validator: (value: string) => {
-        return ["small", "default"].includes(value);
-      },
-    },
-
-    /**
-     * Determines if the field is disabled.
-     */
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  i18n: {
-    messages: {
-      en: {
-        "mt-search": {
-          searchPlaceholder: "Search",
-        },
-      },
-      de: {
-        "mt-search": {
-          searchPlaceholder: "Suchen",
-        },
-      },
+    de: {
+      placeholder: "Suchen",
     },
   },
-
-  emits: ["change", "update:modelValue"],
-
-  setup(_, { emit }) {
-    const onChange = (event: Event) => {
-      // @ts-expect-error - target is defined
-      emit("change", event.target.value || "");
-    };
-
-    const onInput = (event: Event) => {
-      // @ts-expect-error - target is defined
-      emit("update:modelValue", event.target.value);
-    };
-
-    return {
-      onChange,
-      onInput,
-    };
-  },
 });
+
+defineEmits<{
+  (e: "change", value: string): void;
+  (e: "update:modelValue", value: string): void;
+}>();
 </script>
 
 <style scoped>
diff --git a/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue b/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue
index b64352841..64a1d96f2 100644
--- a/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue
+++ b/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue
@@ -16,7 +16,7 @@
             <mt-button variant="secondary" @click="toggleFloatingUi">
               <mt-icon name="solid-filter-s" aria-hidden="true" />
 
-              <span>{{ $t("mt-data-table.filter.addFilter") }}</span>
+              <span>{{ t("filter.addFilter") }}</span>
             </mt-button>
           </template>
 
@@ -51,8 +51,8 @@
       <div v-if="appliedFilters.length > 0" class="mt-data-table__filter">
         <span>{{
           isLoading
-            ? $t("mt-data-table.filter.fetchingFilteredResults")
-            : $tc("mt-data-table.filter.numberOfResults", numberOfResults ?? 0)
+            ? t("filter.fetchingFilteredResults")
+            : t("filter.numberOfResults", { n: numberOfResults ?? 0 })
         }}</span>
 
         <div class="mt-data-table__filter-list">
@@ -72,7 +72,7 @@
             <button
               @click="toggleFloatingUi"
               class="mt-data-table__add-filter-button"
-              :aria-label="$t('mt-data-table.filter.addFilter')"
+              :aria-label="t('filter.addFilter')"
             >
               <mt-icon name="solid-plus-square-s" />
             </button>
@@ -239,7 +239,7 @@
                     <template #popover-items__base="{ toggleFloatingUi }">
                       <mt-popover-item
                         v-if="column.sortable"
-                        :label="$t('mt-data-table.columnSettings.sortAscending')"
+                        :label="t('columnSettings.sortAscending')"
                         icon="regular-long-arrow-up"
                         contextual-detail="A -> Z"
                         :on-label-click="
@@ -249,7 +249,7 @@
 
                       <mt-popover-item
                         v-if="column.sortable"
-                        :label="$t('mt-data-table.columnSettings.sortDescending')"
+                        :label="t('columnSettings.sortDescending')"
                         icon="regular-long-arrow-down"
                         contextual-detail="Z -> A"
                         :on-label-click="
@@ -260,7 +260,7 @@
 
                       <mt-popover-item
                         v-if="!isPrimaryColumn(column)"
-                        :label="$t('mt-data-table.columnSettings.hideColumn')"
+                        :label="t('columnSettings.hideColumn')"
                         icon="regular-eye-slash"
                         :on-label-click="() => changeColumnVisibility(column.property, false)"
                         border-top
@@ -276,7 +276,7 @@
                     :auto-update-options="{ animationFrame: true }"
                   >
                     <mt-popover
-                      :title="$t('mt-data-table.addColumnIndicator.popoverTitle')"
+                      :title="t('addColumnIndicator.popoverTitle')"
                       @update:isOpened="
                         (value) => {
                           if (value === false) {
@@ -289,7 +289,7 @@
                       <template #trigger="{ toggleFloatingUi }">
                         <mt-icon
                           v-tooltip="{
-                            message: $t('mt-data-table.addColumnIndicator.tooltipMessage'),
+                            message: t('addColumnIndicator.tooltipMessage'),
                             width: 'auto',
                           }"
                           name="solid-plus-square-s"
@@ -455,19 +455,19 @@
                   class="mt-data-table__table-context-button"
                 >
                   <a v-if="!disableEdit" href="#" @click.prevent="$emit('open-details', data)">
-                    {{ $t("mt-data-table.contextButtons.edit") }}
+                    {{ t("contextButtons.edit") }}
                   </a>
                   <mt-context-button v-if="!(disableDelete && disableEdit)">
                     <mt-context-menu-item
                       v-if="!disableEdit"
-                      :label="$t('mt-data-table.contextButtons.edit')"
+                      :label="t('contextButtons.edit')"
                       @click="$emit('open-details', data)"
                     />
 
                     <mt-context-menu-item
                       v-if="!disableDelete"
                       type="critical"
-                      :label="$t('mt-data-table.contextButtons.delete')"
+                      :label="t('contextButtons.delete')"
                       @click="$emit('item-delete', data)"
                     />
                   </mt-context-button>
@@ -480,8 +480,8 @@
                 <slot name="empty-state">
                   <mt-empty-state
                     icon="solid-products"
-                    :headline="$t('mt-data-table.emptyState.headline')"
-                    :description="$t('mt-data-table.emptyState.description')"
+                    :headline="t('emptyState.headline')"
+                    :description="t('emptyState.description')"
                   />
                 </slot>
               </div>
@@ -519,7 +519,7 @@
             @change="emitPaginationLimitChange"
           />
           <span class="mt-data-table__pagination-info-text">
-            {{ $t("mt-data-table.itemsPerPage") }}
+            {{ t("itemsPerPage") }}
           </span>
         </div>
 
@@ -534,7 +534,7 @@
           <mt-button
             v-if="enableReload"
             v-tooltip="{
-              message: $t('mt-data-table.reload.tooltip'),
+              message: t('reload.tooltip'),
               width: 'auto',
             }"
             square
@@ -601,6 +601,7 @@ import MtInset from "@/components/layout/mt-inset/mt-inset.vue";
 import { throttle } from "lodash-es";
 import { reactive } from "vue";
 import type { Filter } from "./mt-data-table.interfaces";
+import { useI18n } from "@/composables/useI18n";
 
 export interface BaseColumnDefinition {
   label: string; // the label for the column
@@ -983,10 +984,10 @@ export default defineComponent({
     "item-delete",
     "update:appliedFilters",
   ],
-  i18n: {
-    messages: {
-      en: {
-        "mt-data-table": {
+  setup(props, { emit }) {
+    const { t } = useI18n({
+      messages: {
+        en: {
           itemsPerPage: "Items per page",
           filter: {
             numberOfResults: "No results found for | One result found for | {n} results found for",
@@ -1020,9 +1021,7 @@ export default defineComponent({
             tooltip: "Reload",
           },
         },
-      },
-      de: {
-        "mt-data-table": {
+        de: {
           itemsPerPage: "Einträge pro Seite",
           filter: {
             numberOfResults:
@@ -1058,17 +1057,6 @@ export default defineComponent({
           },
         },
       },
-    },
-  },
-  setup(props, { emit }) {
-    /**
-     * hack for accessing i18n in legacy mode (https://github.com/intlify/vue-i18n-next/discussions/605#discussioncomment-2057136)
-     **/
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let i18n: any;
-
-    onBeforeMount(() => {
-      i18n = getCurrentInstance()?.proxy?.$i18n;
     });
 
     const filterChildViews = computed(() => {
@@ -1828,7 +1816,7 @@ export default defineComponent({
       const actions: SegmentedControlActionsProp = [
         {
           id: "item-selection-count",
-          label: i18n.tc("mt-data-table.bulkEdit.itemsSelected", props.selectedRows.length),
+          label: t("bulkEdit.itemsSelected", { n: props.selectedRows.length }),
           onClick: () => {
             emit("multiple-selection-change", {
               selections: props.selectedRows,
@@ -1844,7 +1832,7 @@ export default defineComponent({
       if (props.allowBulkEdit && !props.disableEdit) {
         actions.push({
           id: "edit",
-          label: i18n.t("mt-data-table.bulkEdit.edit"),
+          label: t("bulkEdit.edit"),
           onClick: () => emit("bulk-edit"),
         });
       }
@@ -1852,7 +1840,7 @@ export default defineComponent({
       if (props.allowBulkDelete && !props.disableDelete) {
         actions.push({
           id: "delete",
-          label: i18n.t("mt-data-table.bulkEdit.delete"),
+          label: t("bulkEdit.delete"),
           onClick: () => emit("bulk-delete"),
           isCritical: true,
         });
@@ -1861,7 +1849,7 @@ export default defineComponent({
       if (props.bulkEditMoreActions.length > 0) {
         actions.push({
           id: "more",
-          label: i18n.t("mt-data-table.bulkEdit.more"),
+          label: t("bulkEdit.more"),
           popover: {},
         });
       }
@@ -1903,6 +1891,7 @@ export default defineComponent({
     };
 
     return {
+      t,
       sortedColumns,
       isFirstVisibleColumn,
       addColumnOptions,
diff --git a/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-filter/mt-data-table-filter.vue b/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-filter/mt-data-table-filter.vue
index 9a719dd33..bbb50c705 100644
--- a/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-filter/mt-data-table-filter.vue
+++ b/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-filter/mt-data-table-filter.vue
@@ -4,9 +4,9 @@
       {{ filter.label }}
     </mt-text>
 
-    <mt-text size="2xs" color="color-text-secondary-default" class="mt-data-table-filter__rule"
-      >is</mt-text
-    >
+    <mt-text size="2xs" color="color-text-secondary-default" class="mt-data-table-filter__rule">
+      {{ t("is") }}
+    </mt-text>
 
     <mt-popover class="mt-data-table-filter__option" title="Manufactuer">
       <template #trigger="{ toggleFloatingUi }">
@@ -34,7 +34,7 @@
 
     <button
       class="mt-data-table-filter__remove-button"
-      :aria-label="$t('mt-data-table-filter.remove-button')"
+      :aria-label="t('removeButton')"
       @keydown.delete="$emit('removeFilter')"
       @click="$emit('removeFilter')"
     >
@@ -43,57 +43,44 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import MtIcon from "@/components/icons-media/mt-icon/mt-icon.vue";
 import MtPopover from "@/components/overlay/mt-popover/mt-popover.vue";
 import MtPopoverItem from "@/components/overlay/mt-popover-item/mt-popover-item.vue";
-import { defineComponent, type PropType } from "vue";
 import type { Filter, Option } from "../../mt-data-table.interfaces";
 import MtText from "@/components/content/mt-text/mt-text.vue";
+import { useI18n } from "@/composables/useI18n";
 
-export default defineComponent({
-  name: "MtDataTableFilter",
+defineEmits<{
+  (e: "removeOption", filterId: string, optionId: string): void;
+  (e: "addOption", filterId: string, optionId: string): void;
+  (e: "removeFilter"): void;
+}>();
 
-  components: {
-    "mt-icon": MtIcon,
-    "mt-popover": MtPopover,
-    "mt-popover-item": MtPopoverItem,
-    "mt-text": MtText,
-  },
-  i18n: {
-    messages: {
-      en: {
-        "mt-data-table-filter.remove-button": "Remove filter",
-      },
-      de: {
-        "mt-data-table-filter.remove-button": "Filter entfernen",
-      },
-    },
-  },
-  emits: ["removeOption", "addOption", "removeFilter"],
-  props: {
-    filter: {
-      type: Object as PropType<Filter>,
-      required: true,
+const props = defineProps<{
+  filter: Filter;
+  appliedOptions: Option[];
+}>();
+
+function isOptionSelected(optionId: string) {
+  return !!props.appliedOptions.find((option) => option.id === optionId);
+}
+
+const { t } = useI18n({
+  messages: {
+    en: {
+      is: "is",
+      removeButton: "Remove filter",
     },
-    appliedOptions: {
-      type: Array as PropType<Option[]>,
-      required: true,
+    de: {
+      is: "ist",
+      removeButton: "Filter entfernen",
     },
   },
-  setup(props) {
-    function isOptionSelected(optionId: string) {
-      return !!props.appliedOptions.find((option) => option.id === optionId);
-    }
-
-    return {
-      isOptionSelected,
-    };
-  },
 });
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .mt-data-table-filter {
   display: inline-flex;
 
@@ -102,71 +89,71 @@ export default defineComponent({
     display: grid;
     place-items: center;
   }
+}
+
+.mt-data-table-filter__property {
+  border: 1px solid var(--color-border-primary-default);
+  border-right: 0 none;
+  border-top-left-radius: var(--border-radius-xs);
+  border-bottom-left-radius: var(--border-radius-xs);
+  color: var(--color-text-primary-default);
+  padding-inline: 8px;
+}
 
-  .mt-data-table-filter__property {
-    border: 1px solid var(--color-border-primary-default);
-    border-right: 0 none;
-    border-top-left-radius: var(--border-radius-xs);
-    border-bottom-left-radius: var(--border-radius-xs);
-    color: var(--color-text-primary-default);
-    padding-inline: 8px;
+.mt-data-table-filter__rule {
+  border-top: 1px solid var(--color-border-primary-default);
+  border-bottom: 1px solid var(--color-border-primary-default);
+  padding-right: 4px;
+}
+
+.mt-data-table-filter__option {
+  color: var(--color-text-primary-default);
+  font-size: var(--font-size-2xs);
+  font-family: var(--font-family-body);
+  line-height: var(--font-line-height-2xs);
+  border-top: 1px solid var(--color-border-primary-default);
+  border-bottom: 1px solid var(--color-border-primary-default);
+  padding-inline: 4px 8px;
+
+  & button {
+    outline: 0 none;
   }
 
-  .mt-data-table-filter__rule {
-    border-top: 1px solid var(--color-border-primary-default);
-    border-bottom: 1px solid var(--color-border-primary-default);
-    padding-right: 4px;
+  &:has(button:hover) {
+    background-color: var(--color-interaction-secondary-hover);
   }
 
-  .mt-data-table-filter__option {
-    color: var(--color-text-primary-default);
-    font-size: var(--font-size-2xs);
-    font-family: var(--font-family-body);
-    line-height: var(--font-line-height-2xs);
-    border-top: 1px solid var(--color-border-primary-default);
-    border-bottom: 1px solid var(--color-border-primary-default);
-    padding-inline: 4px 8px;
-
-    button {
-      outline: 0 none;
-    }
-
-    &:has(button:hover) {
-      background-color: var(--color-interaction-secondary-hover);
-    }
-
-    &:has(button:focus-visible) {
-      background-color: var(--color-background-brand-default);
-      outline: var(--color-border-brand-selected) solid 1px;
-      outline-offset: -1px;
-    }
+  &:has(button:focus-visible) {
+    background-color: var(--color-background-brand-default);
+    outline: var(--color-border-brand-selected) solid 1px;
+    outline-offset: -1px;
   }
+}
 
-  .mt-data-table-filter__remove-button {
-    color: var(--color-icon-primary-default);
-    border-top-right-radius: var(--border-radius-xs);
-    border-bottom-right-radius: var(--border-radius-xs);
-    border: 1px solid var(--color-border-primary-default);
-    outline: 0 none;
-    position: relative;
-    height: 24px;
-    width: 24px;
-
-    .mt-icon {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-
-    &:focus-visible {
-      background-color: var(--color-background-brand-default);
-      border-color: var(--color-border-brand-selected);
-    }
-
-    &:hover {
-      background-color: var(--color-interaction-secondary-hover);
-    }
+.mt-data-table-filter__remove-button {
+  color: var(--color-icon-primary-default);
+  border-top-right-radius: var(--border-radius-xs);
+  border-bottom-right-radius: var(--border-radius-xs);
+  border: 1px solid var(--color-border-primary-default);
+  outline: 0 none;
+  position: relative;
+  height: 24px;
+  width: 24px;
+
+  & .mt-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &:focus-visible {
+    background-color: var(--color-background-brand-default);
+    border-color: var(--color-border-brand-selected);
+  }
+
+  &:hover {
+    background-color: var(--color-interaction-secondary-hover);
   }
 }
 </style>
diff --git a/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-reset-filter-button/mt-data-table-reset-filter-button.vue b/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-reset-filter-button/mt-data-table-reset-filter-button.vue
index a4d428f3e..ae89be015 100644
--- a/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-reset-filter-button/mt-data-table-reset-filter-button.vue
+++ b/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-reset-filter-button/mt-data-table-reset-filter-button.vue
@@ -1,36 +1,29 @@
 <template>
   <button class="mt-data-table-reset-filter-button">
-    {{ $tc("mt-data-table-reset-filter-button.label", numberOfAppliedFilters) }}
+    {{ t("label", { n: numberOfAppliedFilters }) }}
   </button>
 </template>
 
-<script lang="ts">
-export default {
-  props: {
-    numberOfAppliedFilters: {
-      type: Number,
-      required: true,
-      validator: (value: number) => value >= 1,
+<script setup lang="ts">
+import { useI18n } from "@/composables/useI18n";
+
+defineProps<{
+  numberOfAppliedFilters: number;
+}>();
+
+const { t } = useI18n({
+  messages: {
+    en: {
+      label: "Remove filter | Remove filters",
     },
-  },
-  i18n: {
-    messages: {
-      en: {
-        "mt-data-table-reset-filter-button": {
-          label: "Remove filter | Remove filters",
-        },
-      },
-      de: {
-        "mt-data-table-reset-filter-button": {
-          label: "Filter entfernen | Filter entfernen",
-        },
-      },
+    de: {
+      label: "Filter entfernen | Filter entfernen",
     },
   },
-};
+});
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .mt-data-table-reset-filter-button {
   color: var(--color-text-brand-default);
   text-decoration: underline;
diff --git a/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-settings/mt-data-table-settings.spec.ts b/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-settings/mt-data-table-settings.spec.ts
index ec0f0ecda..1bd4b1530 100644
--- a/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-settings/mt-data-table-settings.spec.ts
+++ b/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-settings/mt-data-table-settings.spec.ts
@@ -1,17 +1,8 @@
 import { mount } from "@vue/test-utils";
 import MtDataTableSettings from "./mt-data-table-settings.vue";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { useI18n } from "vue-i18n";
 import flushPromises from "flush-promises";
 
-vi.mock("vue-i18n", () => ({
-  useI18n: vi.fn(() => {
-    return {
-      t: (tKey: string) => tKey,
-    };
-  }),
-}));
-
 // mock resizeOvserver
 global.ResizeObserver = class ResizeObserver {
   observe() {
@@ -104,27 +95,26 @@ describe("mt-data-table-settings", () => {
 
     const popoverContent = document.querySelector(".mt-popover__content");
     expect(popoverContent).toBeTruthy();
-    expect(popoverContent?.querySelector(".mt-popover__header")?.textContent).toBe(
-      "mt-data-table-settings.title",
-    );
+    expect(popoverContent?.querySelector(".mt-popover__header")?.textContent).toBe("Settings");
 
     const popoverItems = popoverContent?.querySelectorAll(".mt-popover-item");
 
     expect(popoverItems).toHaveLength(6);
 
     // The "Columns" popover item should have the correct label and should render the number of columns
-    expect(popoverItems?.[0]?.textContent).toContain("mt-data-table-settings.columnOrder.title");
-    expect(popoverItems?.[0]?.textContent).toContain("6");
+    expect(popoverItems?.[0]?.textContent).toContain("Columns 6");
 
     // The popover items should have the correct label
-    expect(popoverItems?.[1]?.textContent).toContain("mt-data-table-settings.showNumberedColumn");
-    expect(popoverItems?.[2]?.textContent).toContain("mt-data-table-settings.showStripedRows");
-    expect(popoverItems?.[3]?.textContent).toContain("mt-data-table-settings.showOutlines");
-    expect(popoverItems?.[4]?.textContent).toContain("mt-data-table-settings.frameOutlines");
+    expect(popoverItems?.[1]?.textContent).toContain("Show numbered column");
+    expect(popoverItems?.[2]?.textContent).toContain("Show striped rows");
+    expect(popoverItems?.[3]?.textContent).toContain("Show outlines");
+    expect(popoverItems?.[4]?.textContent).toContain(
+      "Frame outlines Highlight column and row outlines on mouse hover",
+    );
     expect(popoverItems?.[4]?.textContent).toContain(
-      "mt-data-table-settings.frameOutlinesMetaCopy",
+      "Frame outlines Highlight column and row outlines on mouse hover",
     );
-    expect(popoverItems?.[5]?.textContent).toContain("mt-data-table-settings.resetAllChanges");
+    expect(popoverItems?.[5]?.textContent).toContain("Reset all changes");
   });
 
   it("should switch to columns view", async () => {
@@ -135,17 +125,13 @@ describe("mt-data-table-settings", () => {
     // Click on "Columns" label to switch to the columns view
     const columnsPopoverItemLabel =
       popoverContent?.querySelectorAll(".mt-popover-item__label")?.[0];
-    expect(columnsPopoverItemLabel?.textContent).toContain(
-      "mt-data-table-settings.columnOrder.title",
-    );
+    expect(columnsPopoverItemLabel?.textContent).toContain("Columns");
     await columnsPopoverItemLabel?.dispatchEvent(new Event("click"));
     await flushPromises();
 
     // Check if the columns view header title is rendered
     popoverContent = document.querySelector(".mt-popover__content");
-    expect(popoverContent?.querySelector(".mt-popover__header")?.textContent).toBe(
-      "mt-data-table-settings.columnOrder.title",
-    );
+    expect(popoverContent?.querySelector(".mt-popover__header")?.textContent).toBe("Columns");
 
     // Check if every column is rendered correctly
     const columns = document.querySelectorAll(".mt-popover-item-result__option_item");
@@ -240,9 +226,7 @@ describe("mt-data-table-settings", () => {
     const visibleGroupHeader = document.querySelectorAll(
       ".mt-popover-item-result__group-action",
     )?.[0];
-    expect(visibleGroupHeader?.textContent).toContain(
-      "mt-data-table-settings.columnOrder.columnGroups.actionLabelShown",
-    );
+    expect(visibleGroupHeader?.textContent).toContain("Hide all");
     await visibleGroupHeader?.dispatchEvent(new Event("click"));
 
     await wrapper.vm.$nextTick();
@@ -268,9 +252,7 @@ describe("mt-data-table-settings", () => {
     const visibleGroupHeader = document.querySelectorAll(
       ".mt-popover-item-result__group-action",
     )?.[1];
-    expect(visibleGroupHeader?.textContent).toContain(
-      "mt-data-table-settings.columnOrder.columnGroups.actionLabelHidden",
-    );
+    expect(visibleGroupHeader?.textContent).toContain("Show all");
     await visibleGroupHeader?.dispatchEvent(new Event("click"));
 
     await wrapper.vm.$nextTick();
@@ -288,7 +270,7 @@ describe("mt-data-table-settings", () => {
 
     // Click on "Reset" button to reset all changes
     const resetButton = document.querySelectorAll(".mt-popover-item__label")?.[5];
-    expect(resetButton?.textContent).toContain("mt-data-table-settings.resetAllChanges");
+    expect(resetButton?.textContent).toContain("Reset all changes");
     await resetButton?.dispatchEvent(new Event("click"));
 
     // Check if the reset-all-changes event was emitted
diff --git a/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-settings/mt-data-table-settings.vue b/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-settings/mt-data-table-settings.vue
index a300ac5bf..2bc7c6b12 100644
--- a/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-settings/mt-data-table-settings.vue
+++ b/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-settings/mt-data-table-settings.vue
@@ -1,19 +1,19 @@
 <template>
   <mt-popover
     class="mt-data-table-settings"
-    :title="t('mt-data-table-settings.title')"
+    :title="t('title')"
     :child-views="tableSettingsChildViews"
     width="large"
   >
     <template #trigger="{ toggleFloatingUi }">
       <mt-button
         v-tooltip="{
-          message: t('mt-data-table-settings.tooltip'),
+          message: t('tooltip'),
           width: 'auto',
         }"
         variant="secondary"
         square
-        :aria-label="t('mt-data-table-settings.aria-toggle-table-settings')"
+        :aria-label="t('aria-toggle-table-settings')"
         @click="toggleFloatingUi"
       >
         <mt-icon name="solid-cog-s" />
@@ -22,7 +22,7 @@
 
     <template #popover-items__base="{ changeView }">
       <mt-popover-item
-        :label="t('mt-data-table-settings.columnOrder.title')"
+        :label="t('columnOrder.title')"
         border-bottom
         show-options
         :on-label-click="() => changeView('columnOrder')"
@@ -31,7 +31,7 @@
       />
 
       <mt-popover-item
-        :label="t('mt-data-table-settings.showNumberedColumn')"
+        :label="t('showNumberedColumn')"
         show-switch
         :switch-value="enableRowNumbering"
         icon="solid-hashtag"
@@ -39,7 +39,7 @@
       />
 
       <mt-popover-item
-        :label="t('mt-data-table-settings.showStripedRows')"
+        :label="t('showStripedRows')"
         show-switch
         :switch-value="showStripes"
         icon="solid-bars"
@@ -48,7 +48,7 @@
 
       <!-- TODO: the icon in figma solid-grip-lines was rotated and is not available -->
       <mt-popover-item
-        :label="t('mt-data-table-settings.showOutlines')"
+        :label="t('showOutlines')"
         show-switch
         :switch-value="showOutlines"
         icon="solid-table"
@@ -56,8 +56,8 @@
       />
 
       <mt-popover-item
-        :label="t('mt-data-table-settings.frameOutlines')"
-        :meta-copy="t('mt-data-table-settings.frameOutlinesMetaCopy')"
+        :label="t('frameOutlines')"
+        :meta-copy="t('frameOutlinesMetaCopy')"
         show-switch
         :switch-value="enableOutlineFraming"
         icon="solid-highlight"
@@ -70,7 +70,7 @@
       -->
 
       <mt-popover-item
-        :label="t('mt-data-table-settings.resetAllChanges')"
+        :label="t('resetAllChanges')"
         border-top
         icon="solid-undo"
         :on-label-click="resetAllChanges"
@@ -103,7 +103,7 @@ import MtPopoverItemResult from "../../../../overlay/mt-popover-item-result/mt-p
 import MtTooltipDirective from "../../../../../directives/tooltip.directive";
 import type { ColumnDefinition } from "../../mt-data-table.vue";
 import type { Option as ItemResultOption } from "../../../../overlay/mt-popover-item-result/mt-popover-item-result.vue";
-import { useI18n } from "vue-i18n";
+import { useI18n } from "@/composables/useI18n";
 
 export default defineComponent({
   name: "MtDataTableSettings",
@@ -152,10 +152,10 @@ export default defineComponent({
     "change-outline-framing",
     "change-enable-row-numbering",
   ],
-  i18n: {
-    messages: {
-      en: {
-        "mt-data-table-settings": {
+  setup(props, { emit }) {
+    const { t } = useI18n({
+      messages: {
+        en: {
           title: "Settings",
           resetAllChanges: "Reset all changes",
           columnOrder: {
@@ -175,9 +175,7 @@ export default defineComponent({
           tooltip: "View settings",
           "aria-toggle-table-settings": "Toggle view settings",
         },
-      },
-      de: {
-        "mt-data-table-settings": {
+        de: {
           title: "Einstellungen",
           resetAllChanges: "Alle Änderungen zurücksetzen",
           columnOrder: {
@@ -199,10 +197,7 @@ export default defineComponent({
           "aria-toggle-table-settings": "Tabelleneinstellungen umschalten",
         },
       },
-    },
-  },
-  setup(props, { emit }) {
-    const { t } = useI18n();
+    });
 
     /***
      * Table settings
@@ -211,7 +206,7 @@ export default defineComponent({
       return [
         {
           name: "columnOrder",
-          title: t("mt-data-table-settings.columnOrder.title"),
+          title: t("columnOrder.title"),
         },
       ];
     });
@@ -223,17 +218,13 @@ export default defineComponent({
       return [
         {
           id: "visible",
-          label: t("mt-data-table-settings.columnOrder.columnGroups.labelShown") as string,
-          actionLabel: t(
-            "mt-data-table-settings.columnOrder.columnGroups.actionLabelShown",
-          ) as string,
+          label: t("columnOrder.columnGroups.labelShown"),
+          actionLabel: t("columnOrder.columnGroups.actionLabelShown"),
         },
         {
           id: "hidden",
-          label: t("mt-data-table-settings.columnOrder.columnGroups.labelHidden") as string,
-          actionLabel: t(
-            "mt-data-table-settings.columnOrder.columnGroups.actionLabelHidden",
-          ) as string,
+          label: t("columnOrder.columnGroups.labelHidden"),
+          actionLabel: t("columnOrder.columnGroups.actionLabelHidden"),
         },
       ];
     });
diff --git a/packages/component-library/src/components/table-and-list/mt-pagination/mt-pagination.spec.ts b/packages/component-library/src/components/table-and-list/mt-pagination/mt-pagination.spec.ts
index c041eca6a..a33a8c33e 100644
--- a/packages/component-library/src/components/table-and-list/mt-pagination/mt-pagination.spec.ts
+++ b/packages/component-library/src/components/table-and-list/mt-pagination/mt-pagination.spec.ts
@@ -1,26 +1,6 @@
-import { mount } from "@vue/test-utils";
 import MtPagination from "./mt-pagination.vue";
 import { render, screen } from "@testing-library/vue";
-
-// Mock the $t function
-const mockT = (key: any) => {
-  return key;
-};
-
-function createWrapper() {
-  return mount(MtPagination, {
-    props: {
-      currentPage: 3,
-      limit: 25,
-      totalItems: 213,
-    },
-    global: {
-      mocks: {
-        $t: (v: string, options: object) => v + JSON.stringify(options),
-      },
-    },
-  });
-}
+import { userEvent } from "@storybook/test";
 
 describe("mt-pagination", () => {
   describe("should render the correct info text", () => {
@@ -29,97 +9,130 @@ describe("mt-pagination", () => {
         currentPage: 1,
         limit: 25,
         totalItems: 213,
-        expectedText: 'mt-pagination.infoText{"start":1,"end":25,"totalItems":213}',
+        expectedText: "1-25 of 213",
       },
       {
         currentPage: 2,
         limit: 25,
         totalItems: 213,
-        expectedText: 'mt-pagination.infoText{"start":26,"end":50,"totalItems":213}',
+        expectedText: "26-50 of 213",
       },
       {
         currentPage: 3,
         limit: 5,
         totalItems: 152,
-        expectedText: 'mt-pagination.infoText{"start":11,"end":15,"totalItems":152}',
+        expectedText: "11-15 of 152",
       },
       {
         currentPage: 4,
         limit: 50,
         totalItems: 167,
-        expectedText: 'mt-pagination.infoText{"start":151,"end":167,"totalItems":167}',
+        expectedText: "151-167 of 167",
       },
     ])('should render the info text "$expectedText"', async (testCase) => {
-      const wrapper = createWrapper();
-      await wrapper.setProps({
-        currentPage: testCase.currentPage,
-        limit: testCase.limit,
-        totalItems: testCase.totalItems,
+      render(MtPagination, {
+        props: {
+          currentPage: testCase.currentPage,
+          limit: testCase.limit,
+          totalItems: testCase.totalItems,
+        },
       });
 
-      const infoText = wrapper.find("[data-testid='mt-pagination-info-text']").text();
+      const infoText = screen.getByText(testCase.expectedText);
 
-      expect(infoText).toStrictEqual(testCase.expectedText);
+      expect(infoText).toBeVisible();
     });
   });
 
   describe("should emit the correct events", () => {
     it("should emit the first page", async () => {
-      const wrapper = createWrapper();
+      const handler = vi.fn();
 
-      await wrapper.find("[data-testid='mt-pagination-first-page-button']").trigger("click");
+      render(MtPagination, {
+        props: {
+          currentPage: 3,
+          limit: 25,
+          totalItems: 213,
+          "onChange-current-page": handler,
+        },
+      });
+
+      await userEvent.click(screen.getByRole("button", { name: "First page" }));
 
-      expect(wrapper.emitted()["change-current-page"][0]).toStrictEqual([1]);
+      expect(handler).toHaveBeenCalledOnce();
+      expect(handler).toHaveBeenLastCalledWith(1);
     });
 
     it("should emit the previous page", async () => {
-      const wrapper = createWrapper();
-      await wrapper.setProps({
-        ...wrapper.props(),
-        currentPage: 4,
+      const handler = vi.fn();
+
+      render(MtPagination, {
+        props: {
+          currentPage: 4,
+          limit: 25,
+          totalItems: 213,
+          "onChange-current-page": handler,
+        },
       });
 
-      await wrapper.find("[data-testid='mt-pagination-previous-page-button']").trigger("click");
+      await userEvent.click(screen.getByRole("button", { name: "Previous page" }));
 
-      expect(wrapper.emitted()["change-current-page"][0]).toStrictEqual([3]);
+      expect(handler).toHaveBeenCalledOnce();
+      expect(handler).toHaveBeenLastCalledWith(3);
     });
 
     it("should emit the next page", async () => {
-      const wrapper = createWrapper();
-      await wrapper.setProps({
-        ...wrapper.props(),
-        currentPage: 6,
+      const handler = vi.fn();
+
+      render(MtPagination, {
+        props: {
+          currentPage: 6,
+          limit: 25,
+          totalItems: 213,
+          "onChange-current-page": handler,
+        },
       });
 
-      await wrapper.find("[data-testid='mt-pagination-next-page-button']").trigger("click");
+      await userEvent.click(screen.getByRole("button", { name: "Next page" }));
 
-      expect(wrapper.emitted()["change-current-page"][0]).toStrictEqual([7]);
+      expect(handler).toHaveBeenLastCalledWith(7);
+      expect(handler).toHaveBeenCalledOnce();
     });
 
     it("should emit the last page", async () => {
-      const wrapper = createWrapper();
-      await wrapper.setProps({
-        ...wrapper.props(),
-        currentPage: 2,
+      const handler = vi.fn();
+
+      render(MtPagination, {
+        props: {
+          currentPage: 2,
+          limit: 25,
+          totalItems: 213,
+          "onChange-current-page": handler,
+        },
       });
 
-      await wrapper.find("[data-testid='mt-pagination-last-page-button']").trigger("click");
+      await userEvent.click(screen.getByRole("button", { name: "Last page" }));
 
-      expect(wrapper.emitted()["change-current-page"][0]).toStrictEqual([9]);
+      expect(handler).toHaveBeenCalledOnce();
+      expect(handler).toHaveBeenLastCalledWith(9);
     });
 
     it("should emit the given page", async () => {
-      const wrapper = createWrapper();
-      await wrapper.setProps({
-        ...wrapper.props(),
-        currentPage: 2,
+      const handler = vi.fn();
+
+      render(MtPagination, {
+        props: {
+          currentPage: 2,
+          limit: 25,
+          totalItems: 213,
+          "onChange-current-page": handler,
+        },
       });
 
-      const pageInput = wrapper.find("[data-testid='mt-pagination-current-page-input']");
-      await pageInput.setValue(7);
-      await pageInput.trigger("change");
+      await userEvent.type(screen.getByRole("spinbutton"), "{Backspace}7");
 
-      expect(wrapper.emitted()["change-current-page"][0]).toStrictEqual([7]);
+      expect(handler).toHaveBeenCalledOnce();
+      expect(handler).toHaveBeenLastCalledWith(7);
     });
 
     it("should disable the next page and last page button when total page value is zero", async () => {
@@ -129,18 +142,10 @@ describe("mt-pagination", () => {
           totalItems: 0,
           limit: 25,
         },
-        global: {
-          mocks: {
-            $t: mockT,
-          },
-        },
       });
 
-      const nextPageButton = screen.getByRole("button", { name: /mt-pagination.nextPage/i });
-      const lastPageButton = screen.getByRole("button", { name: /mt-pagination.lastPage/i });
-
-      expect(nextPageButton).toBeDisabled();
-      expect(lastPageButton).toBeDisabled();
+      expect(screen.getByRole("button", { name: "Next page" })).toBeDisabled();
+      expect(screen.getByRole("button", { name: "Last page" })).toBeDisabled();
     });
   });
 });
diff --git a/packages/component-library/src/components/table-and-list/mt-pagination/mt-pagination.vue b/packages/component-library/src/components/table-and-list/mt-pagination/mt-pagination.vue
index f84d906b7..281d2d8bb 100644
--- a/packages/component-library/src/components/table-and-list/mt-pagination/mt-pagination.vue
+++ b/packages/component-library/src/components/table-and-list/mt-pagination/mt-pagination.vue
@@ -2,7 +2,7 @@
   <div class="mt-pagination">
     <p class="mt-pagination__info-text" data-testid="mt-pagination-info-text">
       {{
-        $t("mt-pagination.infoText", {
+        t("infoText", {
           start: firstVisibleItemNumber,
           end: lastVisibleItemNumber,
           totalItems,
@@ -17,7 +17,7 @@
         @click="$emit('change-current-page', 1)"
         data-testid="mt-pagination-first-page-button"
       >
-        <span class="visually-hidden">{{ $t("mt-pagination.firstPage") }}</span>
+        <span class="visually-hidden">{{ t("firstPage") }}</span>
 
         <mt-icon name="regular-double-chevron-left-s" size="0.5rem" aria-hidden="true" />
       </button>
@@ -28,7 +28,7 @@
         @click="$emit('change-current-page', currentPage - 1)"
         data-testid="mt-pagination-previous-page-button"
       >
-        <span class="visually-hidden">{{ $t("mt-pagination.previousPage") }}</span>
+        <span class="visually-hidden">{{ t("previousPage") }}</span>
 
         <mt-icon name="regular-chevron-left-s" size="0.5rem" aria-hidden="true" />
       </button>
@@ -51,7 +51,7 @@
         @click="$emit('change-current-page', currentPage + 1)"
         data-testid="mt-pagination-next-page-button"
       >
-        <span class="visually-hidden">{{ $t("mt-pagination.nextPage") }}</span>
+        <span class="visually-hidden">{{ t("nextPage") }}</span>
 
         <mt-icon name="regular-chevron-right-s" size="0.5rem" aria-hidden="true" />
       </button>
@@ -62,7 +62,7 @@
         @click="$emit('change-current-page', totalPages)"
         data-testid="mt-pagination-last-page-button"
       >
-        <span class="visually-hidden">{{ $t("mt-pagination.lastPage") }}</span>
+        <span class="visually-hidden">{{ t("lastPage") }}</span>
 
         <mt-icon name="regular-double-chevron-right-s" size="0.5rem" aria-hidden="true" />
       </button>
@@ -70,98 +70,75 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed, watch } from "vue";
+<script setup lang="ts">
+import { computed, watch } from "vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
-
-export default defineComponent({
-  components: {
-    "mt-icon": MtIcon,
-  },
-  props: {
-    currentPage: {
-      type: Number,
-      required: true,
-    },
-    limit: {
-      type: Number,
-      required: true,
+import { useI18n } from "@/composables/useI18n";
+
+const props = defineProps<{
+  currentPage: number;
+  limit: number;
+  totalItems: number;
+}>();
+
+const { t } = useI18n({
+  messages: {
+    en: {
+      infoText: "{start}-{end} of {totalItems}",
+      firstPage: "First page",
+      previousPage: "Previous page",
+      nextPage: "Next page",
+      lastPage: "Last page",
     },
-    totalItems: {
-      type: Number,
-      required: true,
-    },
-  },
-  i18n: {
-    messages: {
-      en: {
-        "mt-pagination": {
-          infoText: "{start}-{end} of {totalItems}",
-          firstPage: "First page",
-          previousPage: "Previous page",
-          nextPage: "Next page",
-          lastPage: "Last page",
-        },
-      },
-      de: {
-        "mt-pagination": {
-          infoText: "{start}-{end} von {totalItems}",
-          firstPage: "Erste Seite",
-          previousPage: "Voherige Seite",
-          nextPage: "Nächste Seite",
-          lastPage: "Letzte Seite",
-        },
-      },
+    de: {
+      infoText: "{start}-{end} von {totalItems}",
+      firstPage: "Erste Seite",
+      previousPage: "Voherige Seite",
+      nextPage: "Nächste Seite",
+      lastPage: "Letzte Seite",
     },
   },
-  emits: ["change-current-page"],
-  setup(props, { emit }) {
-    watch(
-      () => props.limit,
-      () => {
-        emit("change-current-page", 1);
-      },
-    );
-
-    const totalPages = computed(() => {
-      return Math.max(1, Math.ceil(props.totalItems / props.limit));
-    });
-
-    const isOnFirstPage = computed(() => props.currentPage === 1);
-    const isOnLastPage = computed(() => props.currentPage === totalPages.value);
-
-    const inputLength = computed(() => {
-      const length = props.currentPage.toString().length;
-      if (length === 0) return "calc(1ch + 1px)";
-
-      return `calc(${length}ch + 1px)`;
-    });
-
-    function onChangeInput(event: Event) {
-      const target = event.target as HTMLInputElement;
-      if (target.value === "") return;
-
-      emit("change-current-page", parseInt(target.value));
-    }
-
-    const firstVisibleItemNumber = computed(() => (props.currentPage - 1) * props.limit + 1);
-    const lastVisibleItemNumber = computed(() => {
-      const lastItemNumberWithLimitOnly = props.limit * props.currentPage;
-      return lastItemNumberWithLimitOnly > props.totalItems
-        ? props.totalItems
-        : lastItemNumberWithLimitOnly;
-    });
-
-    return {
-      totalPages,
-      inputLength,
-      isOnLastPage,
-      isOnFirstPage,
-      onChangeInput,
-      firstVisibleItemNumber,
-      lastVisibleItemNumber,
-    };
+});
+
+const emit = defineEmits<{
+  (e: "change-current-page", value: number): void;
+}>();
+
+watch(
+  () => props.limit,
+  () => {
+    emit("change-current-page", 1);
   },
+);
+
+const totalPages = computed(() => {
+  return Math.max(1, Math.ceil(props.totalItems / props.limit));
+});
+
+const isOnFirstPage = computed(() => props.currentPage === 1);
+const isOnLastPage = computed(() => props.currentPage === totalPages.value);
+
+const inputLength = computed(() => {
+  const length = props.currentPage.toString().length;
+  if (length === 0) return "calc(1ch + 1px)";
+
+  return `calc(${length}ch + 1px)`;
+});
+
+function onChangeInput(event: Event) {
+  const target = event.target as HTMLInputElement;
+  if (target.value === "") return;
+
+  emit("change-current-page", parseInt(target.value));
+}
+
+const firstVisibleItemNumber = computed(() => (props.currentPage - 1) * props.limit + 1);
+const lastVisibleItemNumber = computed(() => {
+  const lastItemNumberWithLimitOnly = props.limit * props.currentPage;
+
+  return lastItemNumberWithLimitOnly > props.totalItems
+    ? props.totalItems
+    : lastItemNumberWithLimitOnly;
 });
 </script>
 
diff --git a/packages/component-library/src/composables/useI18n.spec.ts b/packages/component-library/src/composables/useI18n.spec.ts
index f739cfa66..cf97ea431 100644
--- a/packages/component-library/src/composables/useI18n.spec.ts
+++ b/packages/component-library/src/composables/useI18n.spec.ts
@@ -31,4 +31,94 @@ describe("useI18n", () => {
 
     expect(screen.getByText("path.to.translation")).toBeInTheDocument();
   });
+
+  it("translates the snippet with custom values", () => {
+    render({
+      setup() {
+        const { t } = useI18n({
+          messages: { en: { greeting: "Hello, {name}!" } },
+        });
+
+        return { t };
+      },
+      template: "{{ t('greeting', { name: 'World' }) }}",
+    });
+
+    expect(screen.getByText("Hello, World!")).toBeInTheDocument();
+  });
+
+  it("keeps the custom value syntax when no custom value is provided", () => {
+    render({
+      setup() {
+        const { t } = useI18n({
+          messages: { en: { greeting: "Hello, {name}!" } },
+        });
+
+        return { t };
+      },
+      template: "{{ t('greeting') }}",
+    });
+
+    expect(screen.getByText("Hello, {name}!")).toBeInTheDocument();
+  });
+
+  it("translates the singular version", () => {
+    render({
+      setup() {
+        const { t } = useI18n({
+          messages: { en: { apple: "apple | apples" } },
+        });
+
+        return { t };
+      },
+      template: "{{ t('apple', { n: 1 }) }}",
+    });
+
+    expect(screen.getByText("apple")).toBeInTheDocument();
+  });
+
+  it("translates the pluralized version", () => {
+    render({
+      setup() {
+        const { t } = useI18n({
+          messages: { en: { apple: "apple | apples" } },
+        });
+
+        return { t };
+      },
+      template: "{{ t('apple', { n: 2 }) }}",
+    });
+
+    expect(screen.getByText("apples")).toBeInTheDocument;
+  });
+
+  it("translates the 'none' version", () => {
+    render({
+      setup() {
+        const { t } = useI18n({
+          messages: { en: { apple: "no apple | apple | apples" } },
+        });
+
+        return { t };
+      },
+      template: "{{ t('apple', { n: 0 }) }}",
+    });
+
+    expect(screen.getByText("no apple")).toBeInTheDocument();
+  });
+
+  it("translates the pluralized version with custom values", () => {
+    render({
+      setup() {
+        const { t } = useI18n({
+          messages: { en: { apple: "no apple | apple | {n} apples" } },
+        });
+
+        return { t };
+      },
+      template: "{{ t('apple', { n: 3 }) }}",
+    });
+
+    expect(screen.getByText("3 apples")).toBeInTheDocument();
+  });
 });
diff --git a/packages/component-library/src/composables/useI18n.ts b/packages/component-library/src/composables/useI18n.ts
index f8ac95ef2..d94b57cfd 100644
--- a/packages/component-library/src/composables/useI18n.ts
+++ b/packages/component-library/src/composables/useI18n.ts
@@ -1,6 +1,6 @@
 import { provide, inject } from "vue";
 
-function get(obj: Record<string, unknown>, path: string) {
+function get(obj: Record<string, unknown>, path: string): string | undefined {
   if (typeof obj !== "object" || obj === null) return undefined;
 
   const keys = path.split(".");
@@ -13,6 +13,7 @@ function get(obj: Record<string, unknown>, path: string) {
     result = result[key];
   }
 
+  // @ts-ignore
   return result;
 }
 
@@ -29,6 +30,10 @@ const defaultI18nState = {
 
 const i18nInjectionKey = Symbol("mt-i18n");
 
+function limit(value: number, max: number) {
+  return Math.min(value, max);
+}
+
 export function provideI18n(locale: string = "en") {
   const state = {
     ...defaultI18nState,
@@ -38,15 +43,43 @@ export function provideI18n(locale: string = "en") {
   provide(i18nInjectionKey, state);
 }
 
+const CUSTOM_VALUE_REGEX = /{([^}]*)}/g;
+
 export function useI18n({ messages }: Options) {
   const i18n = inject(i18nInjectionKey, defaultI18nState);
 
-  function translate(path: string): string {
-    const translation = get(messages, `${i18n.locale}.${path}`);
-    if (translation) return translation.toString();
+  function translate(path: string, customValues: Record<string, string | number> = {}): string {
+    function resolveCustomKeys(translation: string) {
+      return translation.replace(CUSTOM_VALUE_REGEX, (match: string, key: string) => {
+        return Object.prototype.hasOwnProperty.call(customValues, key)
+          ? customValues[key].toString()
+          : match;
+      });
+    }
+
+    const translation =
+      get(messages, `${i18n.locale}.${path}`) || get(messages, `${i18n.defaultLocale}.${path}`);
+
+    if (!translation) return path;
+
+    const canBePluralized = /\|/.test(translation);
+    if (canBePluralized) {
+      if (typeof customValues.n !== "number")
+        throw new Error('The "n" key is required for pluralization');
+
+      const versions = translation.split("|");
+
+      // "no apple | apple | apples"; The first version is the zero form
+      const includesZeroForm = versions.length === 3;
+
+      const index = limit(includesZeroForm ? customValues.n : customValues.n - 1, 2);
+      const resolvedTranslation = versions.at(index);
+      if (!resolvedTranslation) return path;
+
+      return resolveCustomKeys(resolvedTranslation);
+    }
 
-    const fallback = get(messages, `${i18n.defaultLocale}.${path}`);
-    return fallback ? fallback.toString() : path;
+    return resolveCustomKeys(translation);
   }
 
   return { t: translate };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6bc18b5a8..509d72371 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -123,6 +123,56 @@ importers:
         specifier: ^5.3.3
         version: 5.4.5
 
+  examples/admin-sdk-plugin/src/Resources/app/administration:
+    dependencies:
+      '@shopware-ag/meteor-admin-sdk':
+        specifier: workspace:*
+        version: link:../../../../../../packages/admin-sdk
+      '@shopware-ag/meteor-component-library':
+        specifier: workspace:*
+        version: link:../../../../../../packages/component-library
+      regenerator-runtime:
+        specifier: ^0.14.1
+        version: 0.14.1
+      vue:
+        specifier: 3.4.21
+        version: 3.4.21(typescript@5.6.2)
+      vue-router:
+        specifier: 4.4.5
+        version: 4.4.5(vue@3.4.21(typescript@5.6.2))
+    devDependencies:
+      typescript:
+        specifier: ^5.6.2
+        version: 5.6.2
+
+  examples/admin-sdk-plugin/tests/acceptance:
+    dependencies:
+      '@shopware-ag/acceptance-test-suite':
+        specifier: ^3.8.4
+        version: 3.8.4(axe-core@4.9.1)(playwright-core@1.47.2)
+    devDependencies:
+      '@playwright/test':
+        specifier: ^1.45.0
+        version: 1.47.2
+      '@types/node':
+        specifier: ^22.5.5
+        version: 22.5.5
+      '@typescript-eslint/eslint-plugin':
+        specifier: ^5.47.0
+        version: 5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.6.2))(eslint@8.57.0)(typescript@5.6.2)
+      '@typescript-eslint/parser':
+        specifier: ^5.47.0
+        version: 5.62.0(eslint@8.57.0)(typescript@5.6.2)
+      eslint:
+        specifier: ^8.49.0
+        version: 8.57.0
+      eslint-plugin-playwright:
+        specifier: ^1.6.2
+        version: 1.6.2(eslint@8.57.0)
+      prettier:
+        specifier: 3.3.3
+        version: 3.3.3
+
   examples/nuxt-app:
     dependencies:
       '@shopware-ag/meteor-component-library':
@@ -130,17 +180,17 @@ importers:
         version: link:../../packages/component-library
       nuxt:
         specifier: ^3.10.3
-        version: 3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.4.5)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(terser@5.31.1)(typescript@5.4.5)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.4.5))
+        version: 3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.6.2)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(terser@5.31.1)(typescript@5.6.2)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.6.2))
       vue:
         specifier: ^3.4.21
-        version: 3.4.21(typescript@5.4.5)
+        version: 3.4.21(typescript@5.6.2)
       vue-router:
         specifier: ^4.3.0
-        version: 4.3.3(vue@3.4.21(typescript@5.4.5))
+        version: 4.3.3(vue@3.4.21(typescript@5.6.2))
     devDependencies:
       '@playwright/test':
-        specifier: ^1.44.0
-        version: 1.44.1
+        specifier: ^1.45.0
+        version: 1.47.2
       '@types/node':
         specifier: ^20.11.28
         version: 20.14.5
@@ -158,8 +208,8 @@ importers:
         version: 4.17.21
     devDependencies:
       '@playwright/test':
-        specifier: ^1.44.0
-        version: 1.44.1
+        specifier: ^1.45.0
+        version: 1.47.2
       '@types/jest':
         specifier: ^27.4.1
         version: 27.5.2
@@ -501,19 +551,19 @@ importers:
         version: 20.14.5
       '@typescript-eslint/eslint-plugin':
         specifier: ^6.19.1
-        version: 6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)
+        version: 6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.6.2))(eslint@8.57.0)(typescript@5.6.2)
       '@typescript-eslint/parser':
         specifier: ^6.19.1
-        version: 6.21.0(eslint@8.57.0)(typescript@5.4.5)
+        version: 6.21.0(eslint@8.57.0)(typescript@5.6.2)
       eslint:
         specifier: ^8.56.0
         version: 8.57.0
       eslint-plugin-vitest:
         specifier: ^0.3.20
-        version: 0.3.26(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)(vitest@1.6.0(@types/node@20.14.5)(@vitest/ui@1.6.0)(jsdom@22.1.0)(sass@1.77.6)(terser@5.31.1))
+        version: 0.3.26(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.6.2))(eslint@8.57.0)(typescript@5.6.2))(eslint@8.57.0)(typescript@5.6.2)(vitest@1.6.0(@types/node@20.14.5)(@vitest/ui@1.6.0)(jsdom@22.1.0)(sass@1.77.6)(terser@5.31.1))
       msw:
         specifier: ^2.1.5
-        version: 2.3.1(typescript@5.4.5)
+        version: 2.3.1(typescript@5.6.2)
       prettier:
         specifier: ^3.2.4
         version: 3.2.5
@@ -611,6 +661,11 @@ packages:
     resolution: {integrity: sha512-Xk1sIhyNC/esHGGVjL/niHLowM0csl/kFO5uawBy4IrWwy0o1G8LGt3jP6nmWGz+USxeeqbihAmp/oVZju6wug==}
     hasBin: true
 
+  '@axe-core/playwright@4.9.1':
+    resolution: {integrity: sha512-8m4WZbZq7/aq7ZY5IG8GqV+ZdvtGn/iJdom+wBg+iv/3BAOBIfNQtIu697a41438DzEEyptXWmC3Xl5Kx/o9/g==}
+    peerDependencies:
+      playwright-core: '>= 1.0.0'
+
   '@babel/code-frame@7.24.7':
     resolution: {integrity: sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==}
     engines: {node: '>=6.9.0'}
@@ -2742,9 +2797,9 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
-  '@playwright/test@1.44.1':
-    resolution: {integrity: sha512-1hZ4TNvD5z9VuhNJ/walIjvMVvYkZKf71axoF/uiAqpntQJXpG64dlXhoDXE3OczPuTuvjf/M5KWFg5VAVUS3Q==}
-    engines: {node: '>=16'}
+  '@playwright/test@1.47.2':
+    resolution: {integrity: sha512-jTXRsoSPONAs8Za9QEQdyjFn+0ZQFjCiIztAIF6bi1HqhBzG9Ma7g1WotyiGqFSBRZjIEqMdT8RUlbk1QVhzCQ==}
+    engines: {node: '>=18'}
     hasBin: true
 
   '@polka/url@1.0.0-next.25':
@@ -3096,9 +3151,15 @@ packages:
   '@shikijs/core@1.3.0':
     resolution: {integrity: sha512-7fedsBfuILDTBmrYZNFI8B6ATTxhQAasUHllHmjvSZPnoq4bULWoTpHwmuQvZ8Aq03/tAa2IGo6RXqWtHdWaCA==}
 
+  '@shopware-ag/acceptance-test-suite@3.8.4':
+    resolution: {integrity: sha512-OJ4y+VNJk+m5Zc8lwbcBpq1+7Sf8LQTCeuREEizPEgx02dKuQ4IaZLmoj7qrvL4XkNgg0r+NFRckn41Y7zo33Q==}
+
   '@shopware-ag/entity-schema-types@5.8.11':
     resolution: {integrity: sha512-AKBAzO8mubunU2ksqe1xo5STWBg13ixYxljBkEcIb9Sh5h2pDQFI0j9zgYdwbVjVdCCTRqt6ttMjueQ+aBJe5g==}
 
+  '@shopware/api-client@0.5.0':
+    resolution: {integrity: sha512-JrHbCurhJgFyjT4kDdcgSkTa3pxM2JwvUrgFYMYczdUP0NbHaP9Aq1hL4wWAgBn0Mvs3SDGu0nu34Ffu0dtB3A==}
+
   '@sideway/address@4.1.5':
     resolution: {integrity: sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q==}
 
@@ -3576,6 +3637,9 @@ packages:
   '@swc/types@0.1.8':
     resolution: {integrity: sha512-RNFA3+7OJFNYY78x0FYwi1Ow+iF1eF5WvmfY1nXPOEH4R2p/D4Cr1vzje7dNAI2aLFqpv8Wyz4oKSWqIZArpQA==}
 
+  '@swiftcarrot/color-fns@3.2.0':
+    resolution: {integrity: sha512-6SCpc4LwmGGqWHpBY9WaBzJwPF4nfgvFfejOX7Ub0kTehJysFkLUAvGID8zEx39n0pGlfr9pTiQE/7/buC7X5w==}
+
   '@szmarczak/http-timer@1.1.2':
     resolution: {integrity: sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==}
     engines: {node: '>=6'}
@@ -3834,9 +3898,15 @@ packages:
   '@types/node@20.14.5':
     resolution: {integrity: sha512-aoRR+fJkZT2l0aGOJhuA8frnCSoNX6W7U2mpNq63+BxBIj5BQFt8rHy627kijCmm63ijdSdwvGgpUsU6MBsZZA==}
 
+  '@types/node@22.5.5':
+    resolution: {integrity: sha512-Xjs4y5UPO/CLdzpgR6GirZJx36yScjh73+2NlLlkFRSoQN8B0DpfXPdZGnvVmLRLOsqDpOfTNv7D9trgGhmOIA==}
+
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
 
+  '@types/pako@2.0.3':
+    resolution: {integrity: sha512-bq0hMV9opAcrmE0Byyo0fY3Ew4tgOevJmQ9grUhpXQhYfyLJ1Kqg3P33JT5fdbT2AjeAjR51zqqVjAL/HMkx7Q==}
+
   '@types/parse-json@4.0.2':
     resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
 
@@ -4342,6 +4412,9 @@ packages:
   '@vue/devtools-api@6.6.3':
     resolution: {integrity: sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==}
 
+  '@vue/devtools-api@6.6.4':
+    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
+
   '@vue/devtools-applet@7.1.3':
     resolution: {integrity: sha512-525h17FzUF7ssko/U+yeP5jv0HaGm3eI4dVqncWPRCLTDtOy1V+srjoxYqr5qnzx6AdIU2icPQF2KNomd9FGZw==}
     peerDependencies:
@@ -4863,6 +4936,12 @@ packages:
     resolution: {integrity: sha512-QbUdXJVTpvUTHU7871ppZkdOLBeGUKBQWHkHrvN2V9IQWGMt61zf3B45BtzjxEJzYuj0JBjBZP/hmYS/R9pmAw==}
     engines: {node: '>=4'}
 
+  axe-html-reporter@2.2.3:
+    resolution: {integrity: sha512-io8aCEt4fJvv43W+33n3zEa8rdplH5Ti2v5fOnth3GBKLhLHarNs7jj46xGfpnGnpaNrz23/tXPHC3HbwTzwwA==}
+    engines: {node: '>=8.9.0'}
+    peerDependencies:
+      axe-core: '>=3'
+
   axios@0.25.0:
     resolution: {integrity: sha512-cD8FOb0tRH3uuEe6+evtAbgJtfxr7ly3fQjYcMcuPlgkwVS9xboaVIpcDV+cYQe+yGykgwZCs1pzjntcGa6l5g==}
 
@@ -5008,6 +5087,9 @@ packages:
   bl@4.1.0:
     resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
 
+  blob-util@2.0.2:
+    resolution: {integrity: sha512-T7JQa+zsXXEa6/8ZhHcQEW1UFfVM49Ts65uBkFL6fz2QmrElqmbajIDJvuA0tEhRe5eIjpV9ZF+0RfZR9voJFQ==}
+
   bmp-js@0.1.0:
     resolution: {integrity: sha512-vHdS19CnY3hwiNdkaqk93DvjVLfbEcI8mys4UjuWrlX1haDmroo8o4xCzh4wD6DGV6HxRCyauwhHRqMTfERtjw==}
 
@@ -5160,6 +5242,9 @@ packages:
   caniuse-lite@1.0.30001636:
     resolution: {integrity: sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==}
 
+  canny-edge-detector@1.0.0:
+    resolution: {integrity: sha512-SpewmkHDE1PbJ1/AVAcpvZKOufYpUXT0euMvhb5C4Q83Q9XEOmSXC+yR7jl3F4Ae1Ev6OtQKbFgdcPrOdHjzQg==}
+
   capital-case@1.0.4:
     resolution: {integrity: sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==}
 
@@ -5222,6 +5307,9 @@ packages:
     resolution: {integrity: sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==}
     engines: {node: '>= 6'}
 
+  cheminfo-types@1.8.0:
+    resolution: {integrity: sha512-OVzDu3sR6L5zYnD3YYQZe8Teaf1+Vooh8aJo5BMo3BfUQ8992Np6/x4q7Jr06M5XQwqq3oTGGd15kfHSlk8l5Q==}
+
   chokidar-cli@3.0.0:
     resolution: {integrity: sha512-xVW+Qeh7z15uZRxHOkP93Ux8A0xbPzwK4GaqD8dQOYc34TlkqUhVSS59fK36DOp5WdJlrRzlYSy02Ht99FjZqQ==}
     engines: {node: '>= 8.10.0'}
@@ -6566,6 +6654,16 @@ packages:
       '@typescript-eslint/parser':
         optional: true
 
+  eslint-plugin-playwright@1.6.2:
+    resolution: {integrity: sha512-mraN4Em3b5jLt01q7qWPyLg0Q5v3KAWfJSlEWwldyUXoa7DSPrBR4k6B6LROLqipsG8ndkwWMdjl1Ffdh15tag==}
+    engines: {node: '>=16.6.0'}
+    peerDependencies:
+      eslint: '>=8.40.0'
+      eslint-plugin-jest: '>=25'
+    peerDependenciesMeta:
+      eslint-plugin-jest:
+        optional: true
+
   eslint-plugin-storybook@0.8.0:
     resolution: {integrity: sha512-CZeVO5EzmPY7qghO2t64oaFM+8FTaD4uzOEjHKp516exyTKo+skKAL9GI3QALS2BXhyALJjNtwbmr1XinGE8bA==}
     engines: {node: '>= 18'}
@@ -6739,6 +6837,9 @@ packages:
     engines: {node: '>= 10.17.0'}
     hasBin: true
 
+  fast-bmp@2.0.1:
+    resolution: {integrity: sha512-MOSG2rHYJCjIfL3/Llseuj39yl5U3d3XLtWFLFm5ZSTublGEXyvNcwi4Npyv6nzDPRSbAP53rvVRUswgftWCcQ==}
+
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -6749,12 +6850,21 @@ packages:
     resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
     engines: {node: '>=8.6.0'}
 
+  fast-jpeg@1.0.1:
+    resolution: {integrity: sha512-nyoYDzmdxgLOBfEhJGwYRsRLqGKziG/wic0SMct17dTVHkseTPvNwHCfihE47tcpGA1cTJO2MNsYYHezmkuA6w==}
+
   fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
   fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
+  fast-list@1.0.3:
+    resolution: {integrity: sha512-Lm56Ci3EqefHNdIneRFuzhpPcpVVBz9fgqVmG3UQIxAefJv1mEYsZ1WQLTWqmdqeGEwbI2t6fbZgp9TqTYARuA==}
+
+  fast-png@6.2.0:
+    resolution: {integrity: sha512-fO4DewoEd9WwuP8DQcfj8Tlc88Jno6lJAjlDYzvJSqMIZwxUpRT4zuzPXgqygjJqngBdCbeQRaL/FVz3InExhA==}
+
   fast-url-parser@1.1.3:
     resolution: {integrity: sha512-5jOCVXADYNuRkKFzNJ0dCCewsZiYo0dz8QNYljkOpFC6r2U4OBmKtvm/Tsuh4w1YYdDqDb31a8TVhBJ2OJKdqQ==}
 
@@ -6790,6 +6900,9 @@ packages:
   fflate@0.8.2:
     resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
 
+  fft.js@4.0.4:
+    resolution: {integrity: sha512-f9c00hphOgeQTlDyavwTtu6RiK8AIFjD6+jvXkNkpeQ7rirK3uFWVpalkoS4LAwbdX7mfZ8aoBfFVQX1Re/8aw==}
+
   file-entry-cache@6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -6803,6 +6916,10 @@ packages:
   file-system-cache@2.3.0:
     resolution: {integrity: sha512-l4DMNdsIPsVnKrgEXbJwDJsA5mB8rGwHYERMgqQx/xAUtChPJMre1bXBzDEqqVbWv9AIbFezXMxeEkZDSrXUOQ==}
 
+  file-type@10.11.0:
+    resolution: {integrity: sha512-uzk64HRpUZyTGZtVuvrjP0FYxzQrBf4rojot6J65YMEbwBLB0CWm0CLojVpwpmFmxcE/lkvYICgfcGozbBq6rw==}
+    engines: {node: '>=6'}
+
   file-type@16.5.4:
     resolution: {integrity: sha512-/yFHK0aGjFEgDJjEKP0pWCplsPFPhwyfwevf/pVxiN0tmE4L9LmwWxWukdJSHdoCli4VgQLehjJtwQBnqmsKcw==}
     engines: {node: '>=10'}
@@ -7283,6 +7400,9 @@ packages:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
 
+  has-own@1.0.1:
+    resolution: {integrity: sha512-RDKhzgQTQfMaLvIFhjahU+2gGnRBK6dYOd5Gd9BzkmnBneOCRYjRC003RIMrdAbH52+l+CnMS4bBCXGer8tEhg==}
+
   has-property-descriptors@1.0.2:
     resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
 
@@ -7532,6 +7652,10 @@ packages:
     resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
     engines: {node: '>= 4'}
 
+  image-js@0.35.5:
+    resolution: {integrity: sha512-JCtn+ggFG6qkVaKZkJDnMMLO6Xg9/WVDK+BIWcXHwT+XEdu8dzp/nlYzB5opxBkIoitWB2GGYRpF69WQmucJhQ==}
+    engines: {node: '>= 12.0.0'}
+
   image-meta@0.2.0:
     resolution: {integrity: sha512-ZBGjl0ZMEMeOC3Ns0wUF/5UdUmr3qQhBSCniT0LxOgGGIRHiNFOkMtIHB7EOznRU47V2AxPgiVP+s+0/UCU0Hg==}
 
@@ -7543,6 +7667,10 @@ packages:
     engines: {node: '>=16.x'}
     hasBin: true
 
+  image-type@4.1.0:
+    resolution: {integrity: sha512-CFJMJ8QK8lJvRlTCEgarL4ro6hfDQKif2HjSvYCdQZESaIPV4v9imrf7BQHK+sQeTeNeMpWciR9hyC/g8ybXEg==}
+    engines: {node: '>=6'}
+
   immediate@3.0.6:
     resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
 
@@ -7622,6 +7750,12 @@ packages:
   invariant@2.2.4:
     resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
 
+  iobuffer@2.1.0:
+    resolution: {integrity: sha512-0XZfU0STJ6NVHBZdMRPjF7jtkDEC5f4AxM/n5DSZOu11SQ+7tAl1csuEnEPoSPYWdaGZ/HOfn5Q837IEHddL2w==}
+
+  iobuffer@5.3.2:
+    resolution: {integrity: sha512-kO3CjNfLZ9t+tHxAMd+Xk4v3D/31E91rMs1dHrm7ikEQrlZ8mLDbQ4z3tZfDM48zOkReas2jx8MWSAmN9+c8Fw==}
+
   ioredis@5.4.1:
     resolution: {integrity: sha512-2YZsvl7jopIa1gaePkeMtd9rAcSjOOjPtpcLlOeusyO+XH2SK5ZcT+UCrElPP+WVIInh2TzeI4XW9ENaSLVVHA==}
     engines: {node: '>=12.22.0'}
@@ -7651,6 +7785,9 @@ packages:
   is-alphanumerical@1.0.4:
     resolution: {integrity: sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==}
 
+  is-any-array@2.0.1:
+    resolution: {integrity: sha512-UtilS7hLRu++wb/WBAw9bNuP1Eg04Ivn1vERJck8zJthEvXCBEBpGR/33u/xLKWEQf95803oalHrVDptcAvFdQ==}
+
   is-arguments@1.1.1:
     resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==}
     engines: {node: '>= 0.4'}
@@ -7659,6 +7796,9 @@ packages:
     resolution: {integrity: sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==}
     engines: {node: '>= 0.4'}
 
+  is-array-type@1.0.0:
+    resolution: {integrity: sha512-LLwKQdMAO/XUkq4XTed1VYqwR2OahiwkBg+yUtZT88LXX4MLXP28qGsVfSNVP8X0wc7fzDhcZD3nns/IK8UfKw==}
+
   is-arrayish@0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
 
@@ -7727,6 +7867,10 @@ packages:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
 
+  is-finite@1.1.0:
+    resolution: {integrity: sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==}
+    engines: {node: '>=0.10.0'}
+
   is-fullwidth-code-point@2.0.0:
     resolution: {integrity: sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==}
     engines: {node: '>=4'}
@@ -7770,6 +7914,9 @@ packages:
     resolution: {integrity: sha512-K55T22lfpQ63N4KEN57jZUAaAYqYHEe8veb/TycJRk9DdSCLLcovXz/mL6mOnhQaZsQGwPhuFopdQIlqGSEjiQ==}
     engines: {node: '>=18'}
 
+  is-integer@1.0.7:
+    resolution: {integrity: sha512-RPQc/s9yBHSvpi+hs9dYiJ2cuFeU6x3TyyIp8O2H6SKEltIvJOzRj9ToyvcStDvPR/pS4rxgr1oBFajQjZ2Szg==}
+
   is-interactive@1.0.0:
     resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
     engines: {node: '>=8'}
@@ -8359,6 +8506,12 @@ packages:
   js-md5@0.7.3:
     resolution: {integrity: sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ==}
 
+  js-priority-queue@0.1.5:
+    resolution: {integrity: sha512-2dPmJT4GbXUpob7AZDR1wFMKz3Biy6oW69mwt5PTtdeoOgDin1i0p5gUV9k0LFeUxDpwkfr+JGMZDpcprjiY5w==}
+
+  js-quantities@1.8.0:
+    resolution: {integrity: sha512-swDw9RJpXACAWR16vAKoSojAsP6NI7cZjjnjKqhOyZSdybRUdmPr071foD3fejUKSU2JMHz99hflWkRWvfLTpQ==}
+
   js-stringify@1.0.2:
     resolution: {integrity: sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g==}
 
@@ -8754,6 +8907,9 @@ packages:
     resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
     engines: {node: '>= 0.6'}
 
+  median-quickselect@1.0.1:
+    resolution: {integrity: sha512-/QL9ptNuLsdA68qO+2o10TKCyu621zwwTFdLvtu8rzRNKsn8zvuGoq/vDxECPyELFG8wu+BpyoMR9BnsJqfVZQ==}
+
   memfs@3.5.3:
     resolution: {integrity: sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==}
     engines: {node: '>= 4.0.0'}
@@ -8942,6 +9098,87 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  ml-array-max@1.2.4:
+    resolution: {integrity: sha512-BlEeg80jI0tW6WaPyGxf5Sa4sqvcyY6lbSn5Vcv44lp1I2GR6AWojfUvLnGTNsIXrZ8uqWmo8VcG1WpkI2ONMQ==}
+
+  ml-array-median@1.1.6:
+    resolution: {integrity: sha512-V6bV6bTPFRX8v5CaAx/7fuRXC39LLTHfPSVZZafdNaqNz2PFL5zEA7gesjv8dMXh+gwPeUMtB5QPovlTBaa4sw==}
+
+  ml-array-min@1.2.3:
+    resolution: {integrity: sha512-VcZ5f3VZ1iihtrGvgfh/q0XlMobG6GQ8FsNyQXD3T+IlstDv85g8kfV0xUG1QPRO/t21aukaJowDzMTc7j5V6Q==}
+
+  ml-array-rescale@1.3.7:
+    resolution: {integrity: sha512-48NGChTouvEo9KBctDfHC3udWnQKNKEWN0ziELvY3KG25GR5cA8K8wNVzracsqSW1QEkAXjTNx+ycgAv06/1mQ==}
+
+  ml-convolution@0.2.0:
+    resolution: {integrity: sha512-km5f81jFVnEWG0eFEKAwt00X3xGUIAcUqZZlUk+w0q2sZOz1vkEYhIKOXAlmaEi9rnrTknxW//Ttm399zPzDPg==}
+
+  ml-disjoint-set@1.0.0:
+    resolution: {integrity: sha512-UcEzgvRzVhsKpT66syfdhaK8R+av6GxDFmU37t+6WClT/kHDIN6OMRfO7OPwQIV8+L8FSc2E6lNKpvdqf6OgLw==}
+
+  ml-distance-euclidean@2.0.0:
+    resolution: {integrity: sha512-yC9/2o8QF0A3m/0IXqCTXCzz2pNEzvmcE/9HFKOZGnTjatvBbsn4lWYJkxENkA4Ug2fnYl7PXQxnPi21sgMy/Q==}
+
+  ml-fft@1.3.5:
+    resolution: {integrity: sha512-laAATDyUuWPbIlX57thIds41wqFLsB+Zl7i1yrLRo/4CFg+hFaF9Xle8InblQseyiaVtt1KSlDG+6lgUMPOj3g==}
+
+  ml-kernel-gaussian@2.0.2:
+    resolution: {integrity: sha512-5MBrH2g9MBO53I6mcyXvMhyOLsmO2w21+26A1ZV/vYoxqpsov2PWkT8bhdFCEe0kgDupmAb6u81iOID/rhnarA==}
+
+  ml-kernel-polynomial@2.0.1:
+    resolution: {integrity: sha512-aGDNRPHDiKeJmBxB0L9wTxKNLfp5JytbdRIo5K+FTcmFjkWDe3YZPo6R6wBB5mxaJ5eqTRawzeV4RoIWHbakyQ==}
+
+  ml-kernel-sigmoid@1.0.1:
+    resolution: {integrity: sha512-mSbYOSbNQ7GsUAGrHuUHNsLgM3bZGpXkotw/FBdKZD9YMXfVOgQb1LvvvVeSlOR/ZdmX23qqaV0RnKSYWBF8og==}
+
+  ml-kernel@3.0.0:
+    resolution: {integrity: sha512-R+ZR0Kl5xJ7vnxtlDqjZ26xVk7mAw7ctK4NlzRHviBFXxp7keC9+hWirMOdzi2DOQA0t6CaRwjElZ6SdirOmow==}
+
+  ml-matrix-convolution@0.4.3:
+    resolution: {integrity: sha512-B4AATOjxDw4J0oVcoeYHsXrhMr31x9SWhVKZjWucDU+brwXLR0enMdqb1OuRy/REdpL5/iSshA46sS2B1dO2OQ==}
+
+  ml-matrix@6.11.1:
+    resolution: {integrity: sha512-Fvp1xF1O07tt6Ux9NcnEQTei5UlqbRpvvaFZGs7l3Ij+nOaEDcmbSVtxwNa8V4IfdyFI1NLNUteroMJ1S6vcEg==}
+
+  ml-regression-base@2.1.6:
+    resolution: {integrity: sha512-yTckvEc8szc6VrUTJSgAClShvCoPZdNt8pmyRe8aGsIWGjg6bYFotp9mDUwAB0snvKAbQWd6A4trL/PDCASLug==}
+
+  ml-regression-base@3.0.0:
+    resolution: {integrity: sha512-qkQWvNk8VU1LIytjid/+YHOSx8GnEU9dCUPsAQ8AzCh4saijrsni/XA6x7r+N1UrHMDHeSEUBtRZTsl2syyu/A==}
+
+  ml-regression-base@4.0.0:
+    resolution: {integrity: sha512-V2VjB+K/BcgXaX450xvYw36TLOB+piD9G1pHU3VE+ggQUApsVGkYco6UMQykFOwBydHnDTbOiybH/lwrkqFT4g==}
+
+  ml-regression-exponential@2.1.3:
+    resolution: {integrity: sha512-TE7xIlsHqKdLIgJ5d2rYVrGTd+NkjSBH8bLf1umLFiQI5hR7mUPmMoX+LalVJMd8NhlOwQzufOHqaPewMJ7S6g==}
+
+  ml-regression-multivariate-linear@2.0.4:
+    resolution: {integrity: sha512-/vShPAlP+mB7P2mC5TuXwObSJNl/UBI71/bszt9ilTg6yLKy6btDLpAYyJNa6t+JnL5a7q+Yy4dCltfpvqXRIw==}
+
+  ml-regression-polynomial@2.2.0:
+    resolution: {integrity: sha512-WxFsEmi6oLxgq9TeaVoAA+vVUJFp1kGarX6WWClR8OmlanoIW5iLMnaeXfQcYuH8xNq4R1Cax2N9hYYmeWWkLg==}
+
+  ml-regression-power@2.0.0:
+    resolution: {integrity: sha512-u8O9Fy45+OeYm/4ZBcNDn5w3w+MHc6kZz/AWSJIwmJcyjz6PRkTZnNfgGYdVKwKKDlAOS7G/AFvMKSTWRNO4RQ==}
+
+  ml-regression-robust-polynomial@2.0.1:
+    resolution: {integrity: sha512-WkxA224Cil1G3Ug/T1O8H/2IDADlca21oC5WDplcM+gQRTqtueT/Su4ubH70tG6s79XHM046HfO8xQSpDQxqqg==}
+
+  ml-regression-simple-linear@2.0.5:
+    resolution: {integrity: sha512-7DBYru8GvWLaYo4LUF9vU2DjzHuM6i6WGnVbEP9wq8nUFUZ2DlwN46m8Z/hNhTSR7+3T+RvhaSY+OqdBpaz8zw==}
+
+  ml-regression-simple-linear@3.0.1:
+    resolution: {integrity: sha512-SF2oxA+034Co9GVQSFuS3vtACaRAFrEwHi9oX6VTaSY/KtXxseL3d4GApj4jWXMoAgrP7VMoIO1PH0RoZaMR1g==}
+
+  ml-regression-theil-sen@2.0.0:
+    resolution: {integrity: sha512-RO//tYzo69XbWDO5LIPdGp8ef1MSTPPJY0bXNlmOLMSay7YR9FQqtNgqn29T9DSYTa863VAafRlCeXwDQNXkBw==}
+
+  ml-regression@5.0.0:
+    resolution: {integrity: sha512-mBn0LpfEWV3Dk0dj+8PRNUqIHvO87rUY0PmCUTYv3MKfECx7TtlKyeacJeOBLZ4YAVixX8U5hn4HwRL6TpTYaw==}
+
+  ml-stat@1.3.3:
+    resolution: {integrity: sha512-F6plydFIKFZA+7j/pRsRrfRu4nwsruQvYD9QxHWc4hFUdASVznsKUL2hgAwgMVizY/P0+b1L9bVQexKES5y/uw==}
+
   mlly@1.7.1:
     resolution: {integrity: sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==}
 
@@ -8955,6 +9192,9 @@ packages:
     engines: {node: '>=10.13.0'}
     hasBin: true
 
+  monotone-chain-convex-hull@1.1.0:
+    resolution: {integrity: sha512-iZGaoO2qtqIWaAfscTtsH2LolE06U4JzTw8AgtjT/yzYIA0aoAHDdwBtsesnQXfVRvS375Wu0Y1+FqdI5Y22GA==}
+
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -8992,6 +9232,10 @@ packages:
     resolution: {integrity: sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==}
     hasBin: true
 
+  mustache@4.2.0:
+    resolution: {integrity: sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==}
+    hasBin: true
+
   mute-stream@1.0.0:
     resolution: {integrity: sha512-avsJQhyd+680gKXyG/sQc0nXaC6rBkPOfyHYcFb9+hdkqQkR9bdnkJ0AMZhke0oesPqIO+mFFJ+IdBc7mst4IA==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -9022,6 +9266,12 @@ packages:
   neo-async@2.6.2:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
 
+  new-array@1.0.0:
+    resolution: {integrity: sha512-K5AyFYbuHZ4e/ti52y7k18q8UHsS78FlRd85w2Fmsd6AkuLipDihPflKC0p3PN5i8II7+uHxo+CtkLiJDfmS5A==}
+
+  next-power-of-two@1.0.0:
+    resolution: {integrity: sha512-+z6QY1SxkDk6CQJAeaIZKmcNubBCRP7J8DMQUBglz/sSkNsZoJ1kULjqk9skNPPplzs4i9PFhYrvNDdtQleF/A==}
+
   nitropack@2.9.6:
     resolution: {integrity: sha512-HP2PE0dREcDIBVkL8Zm6eVyrDd10/GI9hTL00PHvjUM8I9Y/2cv73wRDmxNyInfrx/CJKHATb2U/pQrqpzJyXA==}
     engines: {node: ^16.11.0 || >=17.0.0}
@@ -9391,6 +9641,9 @@ packages:
   pako@1.0.11:
     resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
 
+  pako@2.1.0:
+    resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==}
+
   param-case@3.0.4:
     resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==}
 
@@ -9585,11 +9838,21 @@ packages:
     engines: {node: '>=16'}
     hasBin: true
 
+  playwright-core@1.47.2:
+    resolution: {integrity: sha512-3JvMfF+9LJfe16l7AbSmU555PaTl2tPyQsVInqm3id16pdDfvZ8TTZ/pyzmkbDrZTQefyzU7AIHlZqQnxpqHVQ==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   playwright@1.44.1:
     resolution: {integrity: sha512-qr/0UJ5CFAtloI3avF95Y0L1xQo6r3LQArLIg/z/PoGJ6xa+EwzrwO5lpNr/09STxdHuUoP2mvuELJS+hLdtgg==}
     engines: {node: '>=16'}
     hasBin: true
 
+  playwright@1.47.2:
+    resolution: {integrity: sha512-nx1cLMmQWqmA3UsnjaaokyoUpdVaaDhJhMoxX2qj3McpjnsqFHs516QAKYhqHAgOP+oCFTEOCOAaD1RgD/RQfA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   pluralize@8.0.0:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
     engines: {node: '>=4'}
@@ -10046,6 +10309,11 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
+  prettier@3.3.3:
+    resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   pretty-bytes@6.1.1:
     resolution: {integrity: sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==}
     engines: {node: ^14.13.1 || >=16.0.0}
@@ -10211,7 +10479,7 @@ packages:
   puppeteer@12.0.1:
     resolution: {integrity: sha512-YQ3GRiyZW0ddxTW+iiQcv2/8TT5c3+FcRUCg7F8q2gHqxd5akZN400VRXr9cHQKLWGukmJLDiE72MrcLK9tFHQ==}
     engines: {node: '>=10.18.1'}
-    deprecated: < 22.8.2 is no longer supported
+    deprecated: < 21.8.0 is no longer supported
 
   pure-color@1.3.0:
     resolution: {integrity: sha512-QFADYnsVoBMw1srW7OVKEYjG+MbIa49s54w1MA1EDY6r2r/sTcKKYqRX1f4GYvnXP7eN/Pe9HFcX+hwzmrXRHA==}
@@ -10656,6 +10924,21 @@ packages:
     deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
+  robust-orientation@1.2.1:
+    resolution: {integrity: sha512-FuTptgKwY6iNuU15nrIJDLjXzCChWB+T4AvksRtwPS/WZ3HuP1CElCm1t+OBfgQKfWbtZIawip+61k7+buRKAg==}
+
+  robust-point-in-polygon@1.0.3:
+    resolution: {integrity: sha512-pPzz7AevOOcPYnFv4Vs5L0C7BKOq6C/TfAw5EUE58CylbjGiPyMjAnPLzzSuPZ2zftUGwWbmLWPOjPOz61tAcA==}
+
+  robust-scale@1.0.2:
+    resolution: {integrity: sha512-jBR91a/vomMAzazwpsPTPeuTPPmWBacwA+WYGNKcRGSh6xweuQ2ZbjRZ4v792/bZOhRKXRiQH0F48AvuajY0tQ==}
+
+  robust-subtract@1.0.0:
+    resolution: {integrity: sha512-xhKUno+Rl+trmxAIVwjQMiVdpF5llxytozXJOdoT4eTIqmqsndQqFb1A0oiW3sZGlhMRhOi6pAD4MF1YYW6o/A==}
+
+  robust-sum@1.0.0:
+    resolution: {integrity: sha512-AvLExwpaqUqD1uwLU6MwzzfRdaI6VEZsyvQ3IAQ0ZJ08v1H+DTyqskrf2ZJyh0BDduFVLN7H04Zmc+qTiahhAw==}
+
   rollup-plugin-visualizer@5.12.0:
     resolution: {integrity: sha512-8/NU9jXcHRs7Nnj07PF2o4gjxmm9lXIrZ8r175bT9dK8qoLlvKTwRMArRCMgpMGlq8CTLugRvEmyMeMXIU2pNQ==}
     engines: {node: '>=14'}
@@ -11399,6 +11682,12 @@ packages:
   thunky@1.1.0:
     resolution: {integrity: sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==}
 
+  tiff@2.1.0:
+    resolution: {integrity: sha512-Q4zLT4+Csn/ZhFVacYCAl+w/1J51NW/m2y2yx7Qxp/bsHYOEsK7+5JOID2kfk+EvsaF0LbA6ccAkqiuXOmAbYw==}
+
+  tiff@5.0.3:
+    resolution: {integrity: sha512-R0WckwRGhawWDNdha8iPQCjHyOiaEEmfFjhmalUVCIEELsON7Y/XO3eeGmBkoCXQp0Gg2nmTozN92Z4hlwbsow==}
+
   timm@1.7.1:
     resolution: {integrity: sha512-IjZc9KIotudix8bMaBW6QvMuq64BrJWFs1+4V0lXwWGQZwH+LnX87doAYhem4caOEusRP9/g6jVDQmZ8XOk1nw==}
 
@@ -11620,6 +11909,12 @@ packages:
     resolution: {integrity: sha512-Ilme/2Q5kYw0AeRr+aw3s02+WrEYaY7U8vPnqSZU/jaDG/qd6jHVN6nRWyd/9KXvJGYM69vE6JImoGoyNjLwaw==}
     hasBin: true
 
+  two-product@1.0.2:
+    resolution: {integrity: sha512-vOyrqmeYvzjToVM08iU52OFocWT6eB/I5LUWYnxeAPGXAhAxXYU/Yr/R2uY5/5n4bvJQL9AQulIuxpIsMoT8XQ==}
+
+  two-sum@1.0.0:
+    resolution: {integrity: sha512-phP48e8AawgsNUjEY2WvoIWqdie8PoiDZGxTDv70LDr01uX5wLEQbOgSP7Z/B6+SW5oLtbe8qaYX2fKJs3CGTw==}
+
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -11712,6 +12007,11 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  typescript@5.6.2:
+    resolution: {integrity: sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
   ua-parser-js@1.0.38:
     resolution: {integrity: sha512-Aq5ppTOfvrCMgAPneW1HfWj66Xi7XL+/mIy996R1/CLS/rcyJQm6QZdsKrUeivDFQ+Oc9Wyuwor8Ze8peEoUoQ==}
 
@@ -11747,6 +12047,9 @@ packages:
   undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
 
+  undici-types@6.19.8:
+    resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
+
   undici@5.28.4:
     resolution: {integrity: sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==}
     engines: {node: '>=14.0'}
@@ -12331,8 +12634,8 @@ packages:
   vue-component-type-helpers@2.0.21:
     resolution: {integrity: sha512-3NaicyZ7N4B6cft4bfb7dOnPbE9CjLcx+6wZWAg5zwszfO4qXRh+U52dN5r5ZZfc6iMaxKCEcoH9CmxxoFZHLg==}
 
-  vue-component-type-helpers@2.1.2:
-    resolution: {integrity: sha512-URuxnrOhO9lUG4LOAapGWBaa/WOLDzzyAbL+uKZqT7RS+PFy0cdXI2mUSh7GaMts6vtHaeVbGk7trd0FPJi65Q==}
+  vue-component-type-helpers@2.1.6:
+    resolution: {integrity: sha512-ng11B8B/ZADUMMOsRbqv0arc442q7lifSubD0v8oDXIFoMg/mXwAPUunrroIDkY+mcD0dHKccdaznSVp8EoX3w==}
 
   vue-demi@0.14.8:
     resolution: {integrity: sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==}
@@ -12385,6 +12688,11 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
+  vue-router@4.4.5:
+    resolution: {integrity: sha512-4fKZygS8cH1yCyuabAXGUAsyi1b2/o/OKgu/RUb+znIYOxPRxdkytJEx+0wGcpBE1pX6vUgh5jwWOKRGvuA/7Q==}
+    peerDependencies:
+      vue: ^3.2.0
+
   vue-smooth-reflow@0.1.12:
     resolution: {integrity: sha512-cic+dmqsBzu/lRMXf/mhUPMM0g0vancJGUyNMMGHjis0ilSFd1RjIrZYcU5B7ef+n5oshH33/zbMA8OYyRTu7Q==}
     peerDependencies:
@@ -12477,6 +12785,9 @@ packages:
   web-namespaces@1.1.4:
     resolution: {integrity: sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw==}
 
+  web-worker-manager@0.2.0:
+    resolution: {integrity: sha512-WmGabA4GLth1ju9VLm/oMDcPMhMngHoBSdY1OMhrEJvNsPl7z2p+7RBOXjEi5zlP0dK+Shd3Wm+BdD5WZrNYBA==}
+
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
 
@@ -12961,6 +13272,11 @@ snapshots:
     dependencies:
       default-browser-id: 3.0.0
 
+  '@axe-core/playwright@4.9.1(playwright-core@1.47.2)':
+    dependencies:
+      axe-core: 4.9.1
+      playwright-core: 1.47.2
+
   '@babel/code-frame@7.24.7':
     dependencies:
       '@babel/highlight': 7.24.7
@@ -15923,12 +16239,12 @@ snapshots:
 
   '@nuxt/devalue@2.0.2': {}
 
-  '@nuxt/devtools-kit@1.3.3(magicast@0.3.4)(nuxt@3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.4.5)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(terser@5.31.1)(typescript@5.4.5)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.4.5)))(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))':
+  '@nuxt/devtools-kit@1.3.3(magicast@0.3.4)(nuxt@3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.6.2)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(terser@5.31.1)(typescript@5.6.2)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.6.2)))(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))':
     dependencies:
       '@nuxt/kit': 3.12.2(magicast@0.3.4)(rollup@4.18.0)
       '@nuxt/schema': 3.12.2(rollup@4.18.0)
       execa: 7.2.0
-      nuxt: 3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.4.5)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(terser@5.31.1)(typescript@5.4.5)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.4.5))
+      nuxt: 3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.6.2)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(terser@5.31.1)(typescript@5.6.2)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.6.2))
       vite: 5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)
     transitivePeerDependencies:
       - magicast
@@ -15948,15 +16264,15 @@ snapshots:
       rc9: 2.1.2
       semver: 7.6.2
 
-  '@nuxt/devtools@1.3.3(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.4.5)))(nprogress@0.2.0)(nuxt@3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.4.5)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(terser@5.31.1)(typescript@5.4.5)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.4.5)))(rollup@4.18.0)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.4.29(typescript@5.4.5))':
+  '@nuxt/devtools@1.3.3(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.6.2)))(nprogress@0.2.0)(nuxt@3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.6.2)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(terser@5.31.1)(typescript@5.6.2)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.6.2)))(rollup@4.18.0)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.4.29(typescript@5.6.2))':
     dependencies:
       '@antfu/utils': 0.7.8
-      '@nuxt/devtools-kit': 1.3.3(magicast@0.3.4)(nuxt@3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.4.5)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(terser@5.31.1)(typescript@5.4.5)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.4.5)))(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))
+      '@nuxt/devtools-kit': 1.3.3(magicast@0.3.4)(nuxt@3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.6.2)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(terser@5.31.1)(typescript@5.6.2)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.6.2)))(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))
       '@nuxt/devtools-wizard': 1.3.3
       '@nuxt/kit': 3.12.2(magicast@0.3.4)(rollup@4.18.0)
-      '@vue/devtools-applet': 7.1.3(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.4.5)))(nprogress@0.2.0)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.4.29(typescript@5.4.5))
-      '@vue/devtools-core': 7.1.3(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.4.29(typescript@5.4.5))
-      '@vue/devtools-kit': 7.1.3(vue@3.4.29(typescript@5.4.5))
+      '@vue/devtools-applet': 7.1.3(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.6.2)))(nprogress@0.2.0)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.4.29(typescript@5.6.2))
+      '@vue/devtools-core': 7.1.3(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.4.29(typescript@5.6.2))
+      '@vue/devtools-kit': 7.1.3(vue@3.4.29(typescript@5.6.2))
       birpc: 0.2.17
       consola: 3.2.3
       cronstrue: 2.50.0
@@ -15972,7 +16288,7 @@ snapshots:
       launch-editor: 2.7.0
       local-pkg: 0.5.0
       magicast: 0.3.4
-      nuxt: 3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.4.5)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(terser@5.31.1)(typescript@5.4.5)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.4.5))
+      nuxt: 3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.6.2)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(terser@5.31.1)(typescript@5.6.2)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.6.2))
       nypm: 0.3.8
       ohash: 1.1.3
       pacote: 18.0.6
@@ -16082,12 +16398,12 @@ snapshots:
       - rollup
       - supports-color
 
-  '@nuxt/vite-builder@3.12.2(@types/node@20.14.5)(eslint@8.57.0)(magicast@0.3.4)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(terser@5.31.1)(typescript@5.4.5)(vue-tsc@2.0.21(typescript@5.4.5))(vue@3.4.29(typescript@5.4.5))':
+  '@nuxt/vite-builder@3.12.2(@types/node@20.14.5)(eslint@8.57.0)(magicast@0.3.4)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(terser@5.31.1)(typescript@5.6.2)(vue-tsc@2.0.21(typescript@5.6.2))(vue@3.4.29(typescript@5.6.2))':
     dependencies:
       '@nuxt/kit': 3.12.2(magicast@0.3.4)(rollup@4.18.0)
       '@rollup/plugin-replace': 5.0.7(rollup@4.18.0)
-      '@vitejs/plugin-vue': 5.0.5(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.4.29(typescript@5.4.5))
-      '@vitejs/plugin-vue-jsx': 4.0.0(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.4.29(typescript@5.4.5))
+      '@vitejs/plugin-vue': 5.0.5(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.4.29(typescript@5.6.2))
+      '@vitejs/plugin-vue-jsx': 4.0.0(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.4.29(typescript@5.6.2))
       autoprefixer: 10.4.19(postcss@8.4.38)
       clear: 0.1.0
       consola: 3.2.3
@@ -16116,8 +16432,8 @@ snapshots:
       unplugin: 1.10.1
       vite: 5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)
       vite-node: 1.6.0(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)
-      vite-plugin-checker: 0.6.4(eslint@8.57.0)(optionator@0.9.4)(typescript@5.4.5)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.4.5))
-      vue: 3.4.29(typescript@5.4.5)
+      vite-plugin-checker: 0.6.4(eslint@8.57.0)(optionator@0.9.4)(typescript@5.6.2)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.6.2))
+      vue: 3.4.29(typescript@5.6.2)
       vue-bundle-renderer: 2.1.0
     transitivePeerDependencies:
       - '@types/node'
@@ -16285,9 +16601,9 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
-  '@playwright/test@1.44.1':
+  '@playwright/test@1.47.2':
     dependencies:
-      playwright: 1.44.1
+      playwright: 1.47.2
 
   '@polka/url@1.0.0-next.25': {}
 
@@ -16590,8 +16906,24 @@ snapshots:
 
   '@shikijs/core@1.3.0': {}
 
+  '@shopware-ag/acceptance-test-suite@3.8.4(axe-core@4.9.1)(playwright-core@1.47.2)':
+    dependencies:
+      '@axe-core/playwright': 4.9.1(playwright-core@1.47.2)
+      '@playwright/test': 1.47.2
+      '@shopware/api-client': 0.5.0
+      axe-html-reporter: 2.2.3(axe-core@4.9.1)
+      image-js: 0.35.5
+      uuid: 9.0.1
+    transitivePeerDependencies:
+      - axe-core
+      - playwright-core
+
   '@shopware-ag/entity-schema-types@5.8.11': {}
 
+  '@shopware/api-client@0.5.0':
+    dependencies:
+      ofetch: 1.3.4
+
   '@sideway/address@4.1.5':
     dependencies:
       '@hapi/hoek': 9.3.0
@@ -16848,7 +17180,28 @@ snapshots:
       - prettier
       - supports-color
 
-  '@storybook/builder-vite@8.1.10(encoding@0.1.13)(prettier@3.2.5)(typescript@5.2.2)(vite@4.5.3(@types/node@18.19.36)(sass@1.77.6)(terser@5.31.1))':
+  '@storybook/builder-manager@8.1.10(encoding@0.1.13)(prettier@3.3.3)':
+    dependencies:
+      '@fal-works/esbuild-plugin-global-externals': 2.1.2
+      '@storybook/core-common': 8.1.10(encoding@0.1.13)(prettier@3.3.3)
+      '@storybook/manager': 8.1.10
+      '@storybook/node-logger': 8.1.10
+      '@types/ejs': 3.1.5
+      '@yarnpkg/esbuild-plugin-pnp': 3.0.0-rc.15(esbuild@0.20.2)
+      browser-assert: 1.2.1
+      ejs: 3.1.10
+      esbuild: 0.20.2
+      esbuild-plugin-alias: 0.2.1
+      express: 4.19.2
+      fs-extra: 11.2.0
+      process: 0.11.10
+      util: 0.12.5
+    transitivePeerDependencies:
+      - encoding
+      - prettier
+      - supports-color
+
+  '@storybook/builder-vite@8.1.10(encoding@0.1.13)(prettier@3.2.5)(typescript@5.6.2)(vite@4.5.3(@types/node@18.19.36)(sass@1.77.6)(terser@5.31.1))':
     dependencies:
       '@storybook/channels': 8.1.10
       '@storybook/client-logger': 8.1.10
@@ -16869,7 +17222,7 @@ snapshots:
       ts-dedent: 2.2.0
       vite: 4.5.3(@types/node@18.19.36)(sass@1.77.6)(terser@5.31.1)
     optionalDependencies:
-      typescript: 5.2.2
+      typescript: 5.6.2
     transitivePeerDependencies:
       - encoding
       - prettier
@@ -16889,12 +17242,12 @@ snapshots:
       '@babel/types': 7.24.7
       '@ndelangen/get-tarball': 3.0.9
       '@storybook/codemod': 8.1.10
-      '@storybook/core-common': 8.1.10(encoding@0.1.13)(prettier@3.2.5)
+      '@storybook/core-common': 8.1.10(encoding@0.1.13)(prettier@3.3.3)
       '@storybook/core-events': 8.1.10
-      '@storybook/core-server': 8.1.10(encoding@0.1.13)(prettier@3.2.5)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@storybook/core-server': 8.1.10(encoding@0.1.13)(prettier@3.3.3)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
       '@storybook/csf-tools': 8.1.10
       '@storybook/node-logger': 8.1.10
-      '@storybook/telemetry': 8.1.10(encoding@0.1.13)(prettier@3.2.5)
+      '@storybook/telemetry': 8.1.10(encoding@0.1.13)(prettier@3.3.3)
       '@storybook/types': 8.1.10
       '@types/semver': 7.5.8
       '@yarnpkg/fslib': 2.10.3
@@ -16913,7 +17266,7 @@ snapshots:
       jscodeshift: 0.15.2(@babel/preset-env@7.24.7(@babel/core@7.24.7))
       leven: 3.1.0
       ora: 5.4.1
-      prettier: 3.2.5
+      prettier: 3.3.3
       prompts: 2.4.2
       read-pkg-up: 7.0.1
       semver: 7.6.2
@@ -16948,7 +17301,7 @@ snapshots:
       globby: 14.0.1
       jscodeshift: 0.15.2(@babel/preset-env@7.24.7(@babel/core@7.24.7))
       lodash: 4.17.21
-      prettier: 3.2.5
+      prettier: 3.3.3
       recast: 0.23.9
       tiny-invariant: 1.3.3
     transitivePeerDependencies:
@@ -16995,7 +17348,7 @@ snapshots:
       node-fetch: 2.7.0(encoding@0.1.13)
       picomatch: 2.3.1
       pkg-dir: 5.0.0
-      prettier-fallback: prettier@3.2.5
+      prettier-fallback: prettier@3.3.3
       pretty-hrtime: 1.0.3
       resolve-from: 5.0.0
       semver: 7.6.2
@@ -17009,6 +17362,43 @@ snapshots:
       - encoding
       - supports-color
 
+  '@storybook/core-common@8.1.10(encoding@0.1.13)(prettier@3.3.3)':
+    dependencies:
+      '@storybook/core-events': 8.1.10
+      '@storybook/csf-tools': 8.1.10
+      '@storybook/node-logger': 8.1.10
+      '@storybook/types': 8.1.10
+      '@yarnpkg/fslib': 2.10.3
+      '@yarnpkg/libzip': 2.3.0
+      chalk: 4.1.2
+      cross-spawn: 7.0.3
+      esbuild: 0.20.2
+      esbuild-register: 3.5.0(esbuild@0.20.2)
+      execa: 5.1.1
+      file-system-cache: 2.3.0
+      find-cache-dir: 3.3.2
+      find-up: 5.0.0
+      fs-extra: 11.2.0
+      glob: 10.4.1
+      handlebars: 4.7.8
+      lazy-universal-dotenv: 4.0.0
+      node-fetch: 2.7.0(encoding@0.1.13)
+      picomatch: 2.3.1
+      pkg-dir: 5.0.0
+      prettier-fallback: prettier@3.3.3
+      pretty-hrtime: 1.0.3
+      resolve-from: 5.0.0
+      semver: 7.6.2
+      tempy: 3.1.0
+      tiny-invariant: 1.3.3
+      ts-dedent: 2.2.0
+      util: 0.12.5
+    optionalDependencies:
+      prettier: 3.3.3
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
   '@storybook/core-events@8.1.10':
     dependencies:
       '@storybook/csf': 0.1.8
@@ -17070,6 +17460,62 @@ snapshots:
       - supports-color
       - utf-8-validate
 
+  '@storybook/core-server@8.1.10(encoding@0.1.13)(prettier@3.3.3)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)':
+    dependencies:
+      '@aw-web-design/x-default-browser': 1.4.126
+      '@babel/core': 7.24.7
+      '@babel/parser': 7.24.7
+      '@discoveryjs/json-ext': 0.5.7
+      '@storybook/builder-manager': 8.1.10(encoding@0.1.13)(prettier@3.3.3)
+      '@storybook/channels': 8.1.10
+      '@storybook/core-common': 8.1.10(encoding@0.1.13)(prettier@3.3.3)
+      '@storybook/core-events': 8.1.10
+      '@storybook/csf': 0.1.8
+      '@storybook/csf-tools': 8.1.10
+      '@storybook/docs-mdx': 3.1.0-next.0
+      '@storybook/global': 5.0.0
+      '@storybook/manager': 8.1.10
+      '@storybook/manager-api': 8.1.10(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
+      '@storybook/node-logger': 8.1.10
+      '@storybook/preview-api': 8.1.10
+      '@storybook/telemetry': 8.1.10(encoding@0.1.13)(prettier@3.3.3)
+      '@storybook/types': 8.1.10
+      '@types/detect-port': 1.3.5
+      '@types/diff': 5.2.1
+      '@types/node': 18.19.36
+      '@types/pretty-hrtime': 1.0.3
+      '@types/semver': 7.5.8
+      better-opn: 3.0.2
+      chalk: 4.1.2
+      cli-table3: 0.6.5
+      compression: 1.7.4
+      detect-port: 1.6.1
+      diff: 5.2.0
+      express: 4.19.2
+      fs-extra: 11.2.0
+      globby: 14.0.1
+      lodash: 4.17.21
+      open: 8.4.2
+      pretty-hrtime: 1.0.3
+      prompts: 2.4.2
+      read-pkg-up: 7.0.1
+      semver: 7.6.2
+      telejson: 7.2.0
+      tiny-invariant: 1.3.3
+      ts-dedent: 2.2.0
+      util: 0.12.5
+      util-deprecate: 1.0.2
+      watchpack: 2.4.1
+      ws: 8.17.1
+    transitivePeerDependencies:
+      - bufferutil
+      - encoding
+      - prettier
+      - react
+      - react-dom
+      - supports-color
+      - utf-8-validate
+
   '@storybook/csf-plugin@8.1.10':
     dependencies:
       '@storybook/csf-tools': 8.1.10
@@ -17203,6 +17649,21 @@ snapshots:
       - prettier
       - supports-color
 
+  '@storybook/telemetry@8.1.10(encoding@0.1.13)(prettier@3.3.3)':
+    dependencies:
+      '@storybook/client-logger': 8.1.10
+      '@storybook/core-common': 8.1.10(encoding@0.1.13)(prettier@3.3.3)
+      '@storybook/csf-tools': 8.1.10
+      chalk: 4.1.2
+      detect-package-manager: 2.0.1
+      fetch-retry: 5.0.6
+      fs-extra: 11.2.0
+      read-pkg-up: 7.0.1
+    transitivePeerDependencies:
+      - encoding
+      - prettier
+      - supports-color
+
   '@storybook/test-runner@0.17.0(@types/node@18.19.36)(encoding@0.1.13)(prettier@3.2.5)(ts-node@10.9.2(@swc/core@1.6.1)(@types/node@18.19.36)(typescript@5.2.2))':
     dependencies:
       '@babel/core': 7.24.7
@@ -17274,15 +17735,15 @@ snapshots:
 
   '@storybook/vue3-vite@8.1.10(encoding@0.1.13)(prettier@3.2.5)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)(vite@4.5.3(@types/node@18.19.36)(sass@1.77.6)(terser@5.31.1))(vue@3.4.21(typescript@5.2.2))':
     dependencies:
-      '@storybook/builder-vite': 8.1.10(encoding@0.1.13)(prettier@3.2.5)(typescript@5.2.2)(vite@4.5.3(@types/node@18.19.36)(sass@1.77.6)(terser@5.31.1))
+      '@storybook/builder-vite': 8.1.10(encoding@0.1.13)(prettier@3.2.5)(typescript@5.6.2)(vite@4.5.3(@types/node@18.19.36)(sass@1.77.6)(terser@5.31.1))
       '@storybook/core-server': 8.1.10(encoding@0.1.13)(prettier@3.2.5)(react-dom@17.0.2(react@17.0.2))(react@17.0.2)
       '@storybook/types': 8.1.10
       '@storybook/vue3': 8.1.10(encoding@0.1.13)(prettier@3.2.5)(vue@3.4.21(typescript@5.2.2))
       find-package-json: 1.2.0
       magic-string: 0.30.10
-      typescript: 5.2.2
+      typescript: 5.6.2
       vite: 4.5.3(@types/node@18.19.36)(sass@1.77.6)(terser@5.31.1)
-      vue-component-meta: 2.0.21(typescript@5.2.2)
+      vue-component-meta: 2.0.21(typescript@5.6.2)
       vue-docgen-api: 4.78.0(vue@3.4.21(typescript@5.2.2))
     transitivePeerDependencies:
       - '@preact/preset-vite'
@@ -17307,7 +17768,7 @@ snapshots:
       ts-dedent: 2.2.0
       type-fest: 2.19.0
       vue: 3.4.21(typescript@5.2.2)
-      vue-component-type-helpers: 2.1.2
+      vue-component-type-helpers: 2.1.6
     transitivePeerDependencies:
       - encoding
       - prettier
@@ -17530,6 +17991,10 @@ snapshots:
     dependencies:
       '@swc/counter': 0.1.3
 
+  '@swiftcarrot/color-fns@3.2.0':
+    dependencies:
+      '@babel/runtime': 7.24.7
+
   '@szmarczak/http-timer@1.1.2':
     dependencies:
       defer-to-connect: 1.1.3
@@ -17806,8 +18271,14 @@ snapshots:
     dependencies:
       undici-types: 5.26.5
 
+  '@types/node@22.5.5':
+    dependencies:
+      undici-types: 6.19.8
+
   '@types/normalize-package-data@2.4.4': {}
 
+  '@types/pako@2.0.3': {}
+
   '@types/parse-json@4.0.2': {}
 
   '@types/parse5@5.0.3': {}
@@ -17962,6 +18433,25 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.6.2))(eslint@8.57.0)(typescript@5.6.2)':
+    dependencies:
+      '@eslint-community/regexpp': 4.10.1
+      '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@5.6.2)
+      '@typescript-eslint/scope-manager': 5.62.0
+      '@typescript-eslint/type-utils': 5.62.0(eslint@8.57.0)(typescript@5.6.2)
+      '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.6.2)
+      debug: 4.3.5
+      eslint: 8.57.0
+      graphemer: 1.4.0
+      ignore: 5.3.1
+      natural-compare-lite: 1.4.0
+      semver: 7.6.2
+      tsutils: 3.21.0(typescript@5.6.2)
+    optionalDependencies:
+      typescript: 5.6.2
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.2.2))(eslint@8.57.0)(typescript@5.2.2)':
     dependencies:
       '@eslint-community/regexpp': 4.10.1
@@ -17982,13 +18472,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)':
+  '@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.6.2))(eslint@8.57.0)(typescript@5.6.2)':
     dependencies:
       '@eslint-community/regexpp': 4.10.1
-      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.6.2)
       '@typescript-eslint/scope-manager': 6.21.0
-      '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.0)(typescript@5.4.5)
-      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.0)(typescript@5.6.2)
+      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.6.2)
       '@typescript-eslint/visitor-keys': 6.21.0
       debug: 4.3.5
       eslint: 8.57.0
@@ -17996,9 +18486,9 @@ snapshots:
       ignore: 5.3.1
       natural-compare: 1.4.0
       semver: 7.6.2
-      ts-api-utils: 1.3.0(typescript@5.4.5)
+      ts-api-utils: 1.3.0(typescript@5.6.2)
     optionalDependencies:
-      typescript: 5.4.5
+      typescript: 5.6.2
     transitivePeerDependencies:
       - supports-color
 
@@ -18026,6 +18516,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.6.2)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 5.62.0
+      '@typescript-eslint/types': 5.62.0
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.6.2)
+      debug: 4.3.5
+      eslint: 8.57.0
+    optionalDependencies:
+      typescript: 5.6.2
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.2.2)':
     dependencies:
       '@typescript-eslint/scope-manager': 6.21.0
@@ -18039,16 +18541,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5)':
+  '@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.6.2)':
     dependencies:
       '@typescript-eslint/scope-manager': 6.21.0
       '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.4.5)
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.6.2)
       '@typescript-eslint/visitor-keys': 6.21.0
       debug: 4.3.5
       eslint: 8.57.0
     optionalDependencies:
-      typescript: 5.4.5
+      typescript: 5.6.2
     transitivePeerDependencies:
       - supports-color
 
@@ -18091,6 +18593,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/type-utils@5.62.0(eslint@8.57.0)(typescript@5.6.2)':
+    dependencies:
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.6.2)
+      '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.6.2)
+      debug: 4.3.5
+      eslint: 8.57.0
+      tsutils: 3.21.0(typescript@5.6.2)
+    optionalDependencies:
+      typescript: 5.6.2
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/type-utils@6.21.0(eslint@8.57.0)(typescript@5.2.2)':
     dependencies:
       '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.2.2)
@@ -18103,15 +18617,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/type-utils@6.21.0(eslint@8.57.0)(typescript@5.4.5)':
+  '@typescript-eslint/type-utils@6.21.0(eslint@8.57.0)(typescript@5.6.2)':
     dependencies:
-      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.4.5)
-      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.6.2)
+      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.6.2)
       debug: 4.3.5
       eslint: 8.57.0
-      ts-api-utils: 1.3.0(typescript@5.4.5)
+      ts-api-utils: 1.3.0(typescript@5.6.2)
     optionalDependencies:
-      typescript: 5.4.5
+      typescript: 5.6.2
     transitivePeerDependencies:
       - supports-color
 
@@ -18179,6 +18693,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/typescript-estree@5.62.0(typescript@5.6.2)':
+    dependencies:
+      '@typescript-eslint/types': 5.62.0
+      '@typescript-eslint/visitor-keys': 5.62.0
+      debug: 4.3.5
+      globby: 11.1.0
+      is-glob: 4.0.3
+      semver: 7.6.2
+      tsutils: 3.21.0(typescript@5.6.2)
+    optionalDependencies:
+      typescript: 5.6.2
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/typescript-estree@6.21.0(typescript@5.2.2)':
     dependencies:
       '@typescript-eslint/types': 6.21.0
@@ -18194,7 +18722,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/typescript-estree@6.21.0(typescript@5.4.5)':
+  '@typescript-eslint/typescript-estree@6.21.0(typescript@5.6.2)':
     dependencies:
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/visitor-keys': 6.21.0
@@ -18203,9 +18731,9 @@ snapshots:
       is-glob: 4.0.3
       minimatch: 9.0.3
       semver: 7.6.2
-      ts-api-utils: 1.3.0(typescript@5.4.5)
+      ts-api-utils: 1.3.0(typescript@5.6.2)
     optionalDependencies:
-      typescript: 5.4.5
+      typescript: 5.6.2
     transitivePeerDependencies:
       - supports-color
 
@@ -18224,7 +18752,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/typescript-estree@7.13.1(typescript@5.4.5)':
+  '@typescript-eslint/typescript-estree@7.13.1(typescript@5.6.2)':
     dependencies:
       '@typescript-eslint/types': 7.13.1
       '@typescript-eslint/visitor-keys': 7.13.1
@@ -18233,9 +18761,9 @@ snapshots:
       is-glob: 4.0.3
       minimatch: 9.0.4
       semver: 7.6.2
-      ts-api-utils: 1.3.0(typescript@5.4.5)
+      ts-api-utils: 1.3.0(typescript@5.6.2)
     optionalDependencies:
-      typescript: 5.4.5
+      typescript: 5.6.2
     transitivePeerDependencies:
       - supports-color
 
@@ -18284,6 +18812,21 @@ snapshots:
       - supports-color
       - typescript
 
+  '@typescript-eslint/utils@5.62.0(eslint@8.57.0)(typescript@5.6.2)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
+      '@types/json-schema': 7.0.15
+      '@types/semver': 7.5.8
+      '@typescript-eslint/scope-manager': 5.62.0
+      '@typescript-eslint/types': 5.62.0
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.6.2)
+      eslint: 8.57.0
+      eslint-scope: 5.1.1
+      semver: 7.6.2
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   '@typescript-eslint/utils@6.21.0(eslint@8.57.0)(typescript@5.2.2)':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
@@ -18298,14 +18841,14 @@ snapshots:
       - supports-color
       - typescript
 
-  '@typescript-eslint/utils@6.21.0(eslint@8.57.0)(typescript@5.4.5)':
+  '@typescript-eslint/utils@6.21.0(eslint@8.57.0)(typescript@5.6.2)':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
       '@types/json-schema': 7.0.15
       '@types/semver': 7.5.8
       '@typescript-eslint/scope-manager': 6.21.0
       '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.4.5)
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.6.2)
       eslint: 8.57.0
       semver: 7.6.2
     transitivePeerDependencies:
@@ -18323,12 +18866,12 @@ snapshots:
       - supports-color
       - typescript
 
-  '@typescript-eslint/utils@7.13.1(eslint@8.57.0)(typescript@5.4.5)':
+  '@typescript-eslint/utils@7.13.1(eslint@8.57.0)(typescript@5.6.2)':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
       '@typescript-eslint/scope-manager': 7.13.1
       '@typescript-eslint/types': 7.13.1
-      '@typescript-eslint/typescript-estree': 7.13.1(typescript@5.4.5)
+      '@typescript-eslint/typescript-estree': 7.13.1(typescript@5.6.2)
       eslint: 8.57.0
     transitivePeerDependencies:
       - supports-color
@@ -18375,13 +18918,13 @@ snapshots:
       '@unhead/schema': 1.9.13
       '@unhead/shared': 1.9.13
 
-  '@unhead/vue@1.9.13(vue@3.4.29(typescript@5.4.5))':
+  '@unhead/vue@1.9.13(vue@3.4.29(typescript@5.6.2))':
     dependencies:
       '@unhead/schema': 1.9.13
       '@unhead/shared': 1.9.13
       hookable: 5.5.3
       unhead: 1.9.13
-      vue: 3.4.29(typescript@5.4.5)
+      vue: 3.4.29(typescript@5.6.2)
 
   '@unocss/astro@0.61.0(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))':
     dependencies:
@@ -18554,13 +19097,13 @@ snapshots:
       - encoding
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@4.0.0(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.4.29(typescript@5.4.5))':
+  '@vitejs/plugin-vue-jsx@4.0.0(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.4.29(typescript@5.6.2))':
     dependencies:
       '@babel/core': 7.24.7
       '@babel/plugin-transform-typescript': 7.24.7(@babel/core@7.24.7)
       '@vue/babel-plugin-jsx': 1.2.2(@babel/core@7.24.7)
       vite: 5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)
-      vue: 3.4.29(typescript@5.4.5)
+      vue: 3.4.29(typescript@5.6.2)
     transitivePeerDependencies:
       - supports-color
 
@@ -18574,10 +19117,10 @@ snapshots:
       vite: 5.3.1(@types/node@18.19.36)(sass@1.77.6)(terser@5.31.1)
       vue: 3.4.21(typescript@5.4.5)
 
-  '@vitejs/plugin-vue@5.0.5(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.4.29(typescript@5.4.5))':
+  '@vitejs/plugin-vue@5.0.5(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.4.29(typescript@5.6.2))':
     dependencies:
       vite: 5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)
-      vue: 3.4.29(typescript@5.4.5)
+      vue: 3.4.29(typescript@5.6.2)
 
   '@vitest/expect@1.3.1':
     dependencies:
@@ -18663,7 +19206,7 @@ snapshots:
       path-browserify: 1.0.1
       vscode-uri: 3.0.8
 
-  '@vue-macros/common@1.10.4(rollup@4.18.0)(vue@3.4.29(typescript@5.4.5))':
+  '@vue-macros/common@1.10.4(rollup@4.18.0)(vue@3.4.29(typescript@5.6.2))':
     dependencies:
       '@babel/types': 7.24.7
       '@rollup/pluginutils': 5.1.0(rollup@4.18.0)
@@ -18672,7 +19215,7 @@ snapshots:
       local-pkg: 0.5.0
       magic-string-ast: 0.6.1
     optionalDependencies:
-      vue: 3.4.29(typescript@5.4.5)
+      vue: 3.4.29(typescript@5.6.2)
     transitivePeerDependencies:
       - rollup
 
@@ -18775,18 +19318,20 @@ snapshots:
 
   '@vue/devtools-api@6.6.3': {}
 
-  '@vue/devtools-applet@7.1.3(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.4.5)))(nprogress@0.2.0)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.4.29(typescript@5.4.5))':
+  '@vue/devtools-api@6.6.4': {}
+
+  '@vue/devtools-applet@7.1.3(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.6.2)))(nprogress@0.2.0)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.4.29(typescript@5.6.2))':
     dependencies:
-      '@vue/devtools-core': 7.1.3(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.4.29(typescript@5.4.5))
-      '@vue/devtools-kit': 7.1.3(vue@3.4.29(typescript@5.4.5))
+      '@vue/devtools-core': 7.1.3(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.4.29(typescript@5.6.2))
+      '@vue/devtools-kit': 7.1.3(vue@3.4.29(typescript@5.6.2))
       '@vue/devtools-shared': 7.3.1
-      '@vue/devtools-ui': 7.3.1(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.4.5)))(nprogress@0.2.0)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vue@3.4.29(typescript@5.4.5))
+      '@vue/devtools-ui': 7.3.1(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.6.2)))(nprogress@0.2.0)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vue@3.4.29(typescript@5.6.2))
       lodash-es: 4.17.21
       perfect-debounce: 1.0.0
       shiki: 1.3.0
       splitpanes: 3.1.5
-      vue: 3.4.29(typescript@5.4.5)
-      vue-virtual-scroller: 2.0.0-beta.8(vue@3.4.29(typescript@5.4.5))
+      vue: 3.4.29(typescript@5.6.2)
+      vue-virtual-scroller: 2.0.0-beta.8(vue@3.4.29(typescript@5.6.2))
     transitivePeerDependencies:
       - '@unocss/reset'
       - '@vue/composition-api'
@@ -18805,9 +19350,9 @@ snapshots:
       - unocss
       - vite
 
-  '@vue/devtools-core@7.1.3(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.4.29(typescript@5.4.5))':
+  '@vue/devtools-core@7.1.3(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.4.29(typescript@5.6.2))':
     dependencies:
-      '@vue/devtools-kit': 7.1.3(vue@3.4.29(typescript@5.4.5))
+      '@vue/devtools-kit': 7.1.3(vue@3.4.29(typescript@5.6.2))
       '@vue/devtools-shared': 7.3.1
       mitt: 3.0.1
       nanoid: 3.3.7
@@ -18817,31 +19362,31 @@ snapshots:
       - vite
       - vue
 
-  '@vue/devtools-kit@7.1.3(vue@3.4.29(typescript@5.4.5))':
+  '@vue/devtools-kit@7.1.3(vue@3.4.29(typescript@5.6.2))':
     dependencies:
       '@vue/devtools-shared': 7.3.1
       hookable: 5.5.3
       mitt: 3.0.1
       perfect-debounce: 1.0.0
       speakingurl: 14.0.1
-      vue: 3.4.29(typescript@5.4.5)
+      vue: 3.4.29(typescript@5.6.2)
 
   '@vue/devtools-shared@7.3.1':
     dependencies:
       rfdc: 1.4.1
 
-  '@vue/devtools-ui@7.3.1(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.4.5)))(nprogress@0.2.0)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vue@3.4.29(typescript@5.4.5))':
+  '@vue/devtools-ui@7.3.1(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.6.2)))(nprogress@0.2.0)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vue@3.4.29(typescript@5.6.2))':
     dependencies:
       '@unocss/reset': 0.61.0
       '@vue/devtools-shared': 7.3.1
-      '@vueuse/components': 10.11.0(vue@3.4.29(typescript@5.4.5))
-      '@vueuse/core': 10.11.0(vue@3.4.29(typescript@5.4.5))
-      '@vueuse/integrations': 10.11.0(axios@1.7.2)(change-case@4.1.2)(focus-trap@7.5.4)(nprogress@0.2.0)(vue@3.4.29(typescript@5.4.5))
+      '@vueuse/components': 10.11.0(vue@3.4.29(typescript@5.6.2))
+      '@vueuse/core': 10.11.0(vue@3.4.29(typescript@5.6.2))
+      '@vueuse/integrations': 10.11.0(axios@1.7.2)(change-case@4.1.2)(focus-trap@7.5.4)(nprogress@0.2.0)(vue@3.4.29(typescript@5.6.2))
       colord: 2.9.3
-      floating-vue: 5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.4.5))
+      floating-vue: 5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.6.2))
       focus-trap: 7.5.4
       unocss: 0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))
-      vue: 3.4.29(typescript@5.4.5)
+      vue: 3.4.29(typescript@5.6.2)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - async-validator
@@ -18894,7 +19439,7 @@ snapshots:
     optionalDependencies:
       typescript: 5.2.2
 
-  '@vue/language-core@2.0.21(typescript@5.4.5)':
+  '@vue/language-core@2.0.21(typescript@5.6.2)':
     dependencies:
       '@volar/language-core': 2.3.0
       '@vue/compiler-dom': 3.4.29
@@ -18904,8 +19449,7 @@ snapshots:
       path-browserify: 1.0.1
       vue-template-compiler: 2.7.16
     optionalDependencies:
-      typescript: 5.4.5
-    optional: true
+      typescript: 5.6.2
 
   '@vue/reactivity@3.4.21':
     dependencies:
@@ -18950,11 +19494,17 @@ snapshots:
       '@vue/shared': 3.4.21
       vue: 3.4.21(typescript@5.4.5)
 
-  '@vue/server-renderer@3.4.29(vue@3.4.29(typescript@5.4.5))':
+  '@vue/server-renderer@3.4.21(vue@3.4.21(typescript@5.6.2))':
+    dependencies:
+      '@vue/compiler-ssr': 3.4.21
+      '@vue/shared': 3.4.21
+      vue: 3.4.21(typescript@5.6.2)
+
+  '@vue/server-renderer@3.4.29(vue@3.4.29(typescript@5.6.2))':
     dependencies:
       '@vue/compiler-ssr': 3.4.29
       '@vue/shared': 3.4.29
-      vue: 3.4.29(typescript@5.4.5)
+      vue: 3.4.29(typescript@5.6.2)
 
   '@vue/shared@3.4.21': {}
 
@@ -18976,11 +19526,11 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/components@10.11.0(vue@3.4.29(typescript@5.4.5))':
+  '@vueuse/components@10.11.0(vue@3.4.29(typescript@5.6.2))':
     dependencies:
-      '@vueuse/core': 10.11.0(vue@3.4.29(typescript@5.4.5))
-      '@vueuse/shared': 10.11.0(vue@3.4.29(typescript@5.4.5))
-      vue-demi: 0.14.8(vue@3.4.29(typescript@5.4.5))
+      '@vueuse/core': 10.11.0(vue@3.4.29(typescript@5.6.2))
+      '@vueuse/shared': 10.11.0(vue@3.4.29(typescript@5.6.2))
+      vue-demi: 0.14.8(vue@3.4.29(typescript@5.6.2))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -18995,21 +19545,21 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/core@10.11.0(vue@3.4.29(typescript@5.4.5))':
+  '@vueuse/core@10.11.0(vue@3.4.29(typescript@5.6.2))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 10.11.0
-      '@vueuse/shared': 10.11.0(vue@3.4.29(typescript@5.4.5))
-      vue-demi: 0.14.8(vue@3.4.29(typescript@5.4.5))
+      '@vueuse/shared': 10.11.0(vue@3.4.29(typescript@5.6.2))
+      vue-demi: 0.14.8(vue@3.4.29(typescript@5.6.2))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/integrations@10.11.0(axios@1.7.2)(change-case@4.1.2)(focus-trap@7.5.4)(nprogress@0.2.0)(vue@3.4.29(typescript@5.4.5))':
+  '@vueuse/integrations@10.11.0(axios@1.7.2)(change-case@4.1.2)(focus-trap@7.5.4)(nprogress@0.2.0)(vue@3.4.29(typescript@5.6.2))':
     dependencies:
-      '@vueuse/core': 10.11.0(vue@3.4.29(typescript@5.4.5))
-      '@vueuse/shared': 10.11.0(vue@3.4.29(typescript@5.4.5))
-      vue-demi: 0.14.8(vue@3.4.29(typescript@5.4.5))
+      '@vueuse/core': 10.11.0(vue@3.4.29(typescript@5.6.2))
+      '@vueuse/shared': 10.11.0(vue@3.4.29(typescript@5.6.2))
+      vue-demi: 0.14.8(vue@3.4.29(typescript@5.6.2))
     optionalDependencies:
       axios: 1.7.2
       change-case: 4.1.2
@@ -19028,9 +19578,9 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/shared@10.11.0(vue@3.4.29(typescript@5.4.5))':
+  '@vueuse/shared@10.11.0(vue@3.4.29(typescript@5.6.2))':
     dependencies:
-      vue-demi: 0.14.8(vue@3.4.29(typescript@5.4.5))
+      vue-demi: 0.14.8(vue@3.4.29(typescript@5.6.2))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -19471,6 +20021,12 @@ snapshots:
 
   axe-core@4.9.1: {}
 
+  axe-html-reporter@2.2.3(axe-core@4.9.1):
+    dependencies:
+      axe-core: 4.9.1
+      mustache: 4.2.0
+      rimraf: 3.0.2
+
   axios@0.25.0:
     dependencies:
       follow-redirects: 1.15.6
@@ -19670,6 +20226,8 @@ snapshots:
       inherits: 2.0.4
       readable-stream: 3.6.2
 
+  blob-util@2.0.2: {}
+
   bmp-js@0.1.0: {}
 
   body-parser@1.20.2:
@@ -19877,6 +20435,8 @@ snapshots:
 
   caniuse-lite@1.0.30001636: {}
 
+  canny-edge-detector@1.0.0: {}
+
   capital-case@1.0.4:
     dependencies:
       no-case: 3.0.4
@@ -19967,6 +20527,8 @@ snapshots:
       parse5: 7.1.2
       parse5-htmlparser2-tree-adapter: 7.0.0
 
+  cheminfo-types@1.8.0: {}
+
   chokidar-cli@3.0.0:
     dependencies:
       chokidar: 3.6.0
@@ -21398,6 +21960,11 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
+  eslint-plugin-playwright@1.6.2(eslint@8.57.0):
+    dependencies:
+      eslint: 8.57.0
+      globals: 13.24.0
+
   eslint-plugin-storybook@0.8.0(eslint@8.57.0)(typescript@5.2.2):
     dependencies:
       '@storybook/csf': 0.0.1
@@ -21411,12 +21978,12 @@ snapshots:
 
   eslint-plugin-vitest-globals@1.5.0: {}
 
-  eslint-plugin-vitest@0.3.26(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)(vitest@1.6.0(@types/node@20.14.5)(@vitest/ui@1.6.0)(jsdom@22.1.0)(sass@1.77.6)(terser@5.31.1)):
+  eslint-plugin-vitest@0.3.26(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.6.2))(eslint@8.57.0)(typescript@5.6.2))(eslint@8.57.0)(typescript@5.6.2)(vitest@1.6.0(@types/node@20.14.5)(@vitest/ui@1.6.0)(jsdom@22.1.0)(sass@1.77.6)(terser@5.31.1)):
     dependencies:
-      '@typescript-eslint/utils': 7.13.1(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/utils': 7.13.1(eslint@8.57.0)(typescript@5.6.2)
       eslint: 8.57.0
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.6.2))(eslint@8.57.0)(typescript@5.6.2)
       vitest: 1.6.0(@types/node@20.14.5)(@vitest/ui@1.6.0)(jsdom@22.1.0)(sass@1.77.6)(terser@5.31.1)
     transitivePeerDependencies:
       - supports-color
@@ -21678,6 +22245,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  fast-bmp@2.0.1:
+    dependencies:
+      iobuffer: 5.3.2
+
   fast-deep-equal@3.1.3: {}
 
   fast-fifo@1.3.2: {}
@@ -21690,10 +22261,23 @@ snapshots:
       merge2: 1.4.1
       micromatch: 4.0.7
 
+  fast-jpeg@1.0.1:
+    dependencies:
+      iobuffer: 2.1.0
+      tiff: 2.1.0
+
   fast-json-stable-stringify@2.1.0: {}
 
   fast-levenshtein@2.0.6: {}
 
+  fast-list@1.0.3: {}
+
+  fast-png@6.2.0:
+    dependencies:
+      '@types/pako': 2.0.3
+      iobuffer: 5.3.2
+      pako: 2.1.0
+
   fast-url-parser@1.1.3:
     dependencies:
       punycode: 1.4.1
@@ -21742,6 +22326,8 @@ snapshots:
 
   fflate@0.8.2: {}
 
+  fft.js@4.0.4: {}
+
   file-entry-cache@6.0.1:
     dependencies:
       flat-cache: 3.2.0
@@ -21757,6 +22343,8 @@ snapshots:
       fs-extra: 11.1.1
       ramda: 0.29.0
 
+  file-type@10.11.0: {}
+
   file-type@16.5.4:
     dependencies:
       readable-web-to-node-stream: 3.0.2
@@ -21869,11 +22457,11 @@ snapshots:
 
   flatten@1.0.3: {}
 
-  floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.4.5)):
+  floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.6.2)):
     dependencies:
       '@floating-ui/dom': 1.1.1
-      vue: 3.4.21(typescript@5.4.5)
-      vue-resize: 2.0.0-alpha.1(vue@3.4.21(typescript@5.4.5))
+      vue: 3.4.21(typescript@5.6.2)
+      vue-resize: 2.0.0-alpha.1(vue@3.4.21(typescript@5.6.2))
     optionalDependencies:
       '@nuxt/kit': 3.12.2(magicast@0.3.4)(rollup@4.18.0)
 
@@ -22325,6 +22913,8 @@ snapshots:
 
   has-flag@4.0.0: {}
 
+  has-own@1.0.1: {}
+
   has-property-descriptors@1.0.2:
     dependencies:
       es-define-property: 1.0.0
@@ -22652,6 +23242,34 @@ snapshots:
 
   ignore@5.3.1: {}
 
+  image-js@0.35.5:
+    dependencies:
+      '@swiftcarrot/color-fns': 3.2.0
+      blob-util: 2.0.2
+      canny-edge-detector: 1.0.0
+      fast-bmp: 2.0.1
+      fast-jpeg: 1.0.1
+      fast-list: 1.0.3
+      fast-png: 6.2.0
+      has-own: 1.0.1
+      image-type: 4.1.0
+      is-array-type: 1.0.0
+      is-integer: 1.0.7
+      jpeg-js: 0.4.4
+      js-priority-queue: 0.1.5
+      js-quantities: 1.8.0
+      median-quickselect: 1.0.1
+      ml-convolution: 0.2.0
+      ml-disjoint-set: 1.0.0
+      ml-matrix: 6.11.1
+      ml-matrix-convolution: 0.4.3
+      ml-regression: 5.0.0
+      monotone-chain-convex-hull: 1.1.0
+      new-array: 1.0.0
+      robust-point-in-polygon: 1.0.3
+      tiff: 5.0.3
+      web-worker-manager: 0.2.0
+
   image-meta@0.2.0: {}
 
   image-q@4.0.0:
@@ -22662,6 +23280,10 @@ snapshots:
     dependencies:
       queue: 6.0.2
 
+  image-type@4.1.0:
+    dependencies:
+      file-type: 10.11.0
+
   immediate@3.0.6: {}
 
   immer@9.0.21: {}
@@ -22721,6 +23343,10 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
+  iobuffer@2.1.0: {}
+
+  iobuffer@5.3.2: {}
+
   ioredis@5.4.1:
     dependencies:
       '@ioredis/commands': 1.2.0
@@ -22755,6 +23381,8 @@ snapshots:
       is-alphabetical: 1.0.4
       is-decimal: 1.0.4
 
+  is-any-array@2.0.1: {}
+
   is-arguments@1.1.1:
     dependencies:
       call-bind: 1.0.7
@@ -22765,6 +23393,8 @@ snapshots:
       call-bind: 1.0.7
       get-intrinsic: 1.2.4
 
+  is-array-type@1.0.0: {}
+
   is-arrayish@0.2.1: {}
 
   is-bigint@1.0.4:
@@ -22821,6 +23451,8 @@ snapshots:
 
   is-extglob@2.1.1: {}
 
+  is-finite@1.1.0: {}
+
   is-fullwidth-code-point@2.0.0: {}
 
   is-fullwidth-code-point@3.0.0: {}
@@ -22855,6 +23487,10 @@ snapshots:
       global-directory: 4.0.1
       is-path-inside: 4.0.0
 
+  is-integer@1.0.7:
+    dependencies:
+      is-finite: 1.1.0
+
   is-interactive@1.0.0: {}
 
   is-interactive@2.0.0: {}
@@ -23859,6 +24495,10 @@ snapshots:
 
   js-md5@0.7.3: {}
 
+  js-priority-queue@0.1.5: {}
+
+  js-quantities@1.8.0: {}
+
   js-stringify@1.0.2: {}
 
   js-tokens@4.0.0: {}
@@ -24338,6 +24978,8 @@ snapshots:
 
   media-typer@0.3.0: {}
 
+  median-quickselect@1.0.1: {}
+
   memfs@3.5.3:
     dependencies:
       fs-monkey: 1.0.6
@@ -24502,6 +25144,129 @@ snapshots:
 
   mkdirp@2.1.6: {}
 
+  ml-array-max@1.2.4:
+    dependencies:
+      is-any-array: 2.0.1
+
+  ml-array-median@1.1.6:
+    dependencies:
+      is-any-array: 2.0.1
+      median-quickselect: 1.0.1
+
+  ml-array-min@1.2.3:
+    dependencies:
+      is-any-array: 2.0.1
+
+  ml-array-rescale@1.3.7:
+    dependencies:
+      is-any-array: 2.0.1
+      ml-array-max: 1.2.4
+      ml-array-min: 1.2.3
+
+  ml-convolution@0.2.0:
+    dependencies:
+      fft.js: 4.0.4
+      next-power-of-two: 1.0.0
+
+  ml-disjoint-set@1.0.0: {}
+
+  ml-distance-euclidean@2.0.0: {}
+
+  ml-fft@1.3.5: {}
+
+  ml-kernel-gaussian@2.0.2:
+    dependencies:
+      ml-distance-euclidean: 2.0.0
+
+  ml-kernel-polynomial@2.0.1: {}
+
+  ml-kernel-sigmoid@1.0.1: {}
+
+  ml-kernel@3.0.0:
+    dependencies:
+      ml-distance-euclidean: 2.0.0
+      ml-kernel-gaussian: 2.0.2
+      ml-kernel-polynomial: 2.0.1
+      ml-kernel-sigmoid: 1.0.1
+      ml-matrix: 6.11.1
+
+  ml-matrix-convolution@0.4.3:
+    dependencies:
+      ml-fft: 1.3.5
+      ml-stat: 1.3.3
+
+  ml-matrix@6.11.1:
+    dependencies:
+      is-any-array: 2.0.1
+      ml-array-rescale: 1.3.7
+
+  ml-regression-base@2.1.6:
+    dependencies:
+      is-any-array: 2.0.1
+
+  ml-regression-base@3.0.0:
+    dependencies:
+      cheminfo-types: 1.8.0
+      is-any-array: 2.0.1
+
+  ml-regression-base@4.0.0:
+    dependencies:
+      cheminfo-types: 1.8.0
+      is-any-array: 2.0.1
+
+  ml-regression-exponential@2.1.3:
+    dependencies:
+      ml-regression-base: 3.0.0
+      ml-regression-simple-linear: 3.0.1
+
+  ml-regression-multivariate-linear@2.0.4:
+    dependencies:
+      ml-matrix: 6.11.1
+
+  ml-regression-polynomial@2.2.0:
+    dependencies:
+      ml-matrix: 6.11.1
+      ml-regression-base: 2.1.6
+
+  ml-regression-power@2.0.0:
+    dependencies:
+      ml-regression-base: 2.1.6
+      ml-regression-simple-linear: 2.0.5
+
+  ml-regression-robust-polynomial@2.0.1:
+    dependencies:
+      ml-matrix: 6.11.1
+      ml-regression-base: 2.1.6
+
+  ml-regression-simple-linear@2.0.5:
+    dependencies:
+      ml-regression-base: 2.1.6
+
+  ml-regression-simple-linear@3.0.1:
+    dependencies:
+      cheminfo-types: 1.8.0
+      ml-regression-base: 4.0.0
+
+  ml-regression-theil-sen@2.0.0:
+    dependencies:
+      ml-array-median: 1.1.6
+      ml-regression-base: 2.1.6
+
+  ml-regression@5.0.0:
+    dependencies:
+      ml-kernel: 3.0.0
+      ml-matrix: 6.11.1
+      ml-regression-base: 2.1.6
+      ml-regression-exponential: 2.1.3
+      ml-regression-multivariate-linear: 2.0.4
+      ml-regression-polynomial: 2.2.0
+      ml-regression-power: 2.0.0
+      ml-regression-robust-polynomial: 2.0.1
+      ml-regression-simple-linear: 2.0.5
+      ml-regression-theil-sen: 2.0.0
+
+  ml-stat@1.3.3: {}
+
   mlly@1.7.1:
     dependencies:
       acorn: 8.12.0
@@ -24524,6 +25289,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  monotone-chain-convex-hull@1.1.0: {}
+
   mri@1.2.0: {}
 
   mrmime@2.0.0: {}
@@ -24534,7 +25301,7 @@ snapshots:
 
   ms@2.1.3: {}
 
-  msw@2.3.1(typescript@5.4.5):
+  msw@2.3.1(typescript@5.6.2):
     dependencies:
       '@bundled-es-modules/cookie': 2.0.0
       '@bundled-es-modules/statuses': 1.0.1
@@ -24554,7 +25321,7 @@ snapshots:
       type-fest: 4.20.1
       yargs: 17.7.2
     optionalDependencies:
-      typescript: 5.4.5
+      typescript: 5.6.2
 
   muggle-string@0.3.1: {}
 
@@ -24565,6 +25332,8 @@ snapshots:
       dns-packet: 5.6.1
       thunky: 1.1.0
 
+  mustache@4.2.0: {}
+
   mute-stream@1.0.0: {}
 
   mz@2.7.0:
@@ -24585,6 +25354,10 @@ snapshots:
 
   neo-async@2.6.2: {}
 
+  new-array@1.0.0: {}
+
+  next-power-of-two@1.0.0: {}
+
   nitropack@2.9.6(@opentelemetry/api@1.9.0)(encoding@0.1.13)(magicast@0.3.4):
     dependencies:
       '@cloudflare/kv-asset-handler': 0.3.2
@@ -24857,17 +25630,17 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
-  nuxt@3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.4.5)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(terser@5.31.1)(typescript@5.4.5)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.4.5)):
+  nuxt@3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.6.2)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(terser@5.31.1)(typescript@5.6.2)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.6.2)):
     dependencies:
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 1.3.3(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.4.5)))(nprogress@0.2.0)(nuxt@3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.4.5)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(terser@5.31.1)(typescript@5.4.5)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.4.5)))(rollup@4.18.0)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.4.29(typescript@5.4.5))
+      '@nuxt/devtools': 1.3.3(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.6.2)))(nprogress@0.2.0)(nuxt@3.12.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.5)(@unocss/reset@0.61.0)(axios@1.7.2)(change-case@4.1.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.12.2(magicast@0.3.4)(rollup@4.18.0))(vue@3.4.21(typescript@5.6.2)))(ioredis@5.4.1)(magicast@0.3.4)(nprogress@0.2.0)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(terser@5.31.1)(typescript@5.6.2)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.6.2)))(rollup@4.18.0)(unocss@0.61.0(postcss@8.4.38)(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue@3.4.29(typescript@5.6.2))
       '@nuxt/kit': 3.12.2(magicast@0.3.4)(rollup@4.18.0)
       '@nuxt/schema': 3.12.2(rollup@4.18.0)
       '@nuxt/telemetry': 2.5.4(magicast@0.3.4)(rollup@4.18.0)
-      '@nuxt/vite-builder': 3.12.2(@types/node@20.14.5)(eslint@8.57.0)(magicast@0.3.4)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(terser@5.31.1)(typescript@5.4.5)(vue-tsc@2.0.21(typescript@5.4.5))(vue@3.4.29(typescript@5.4.5))
+      '@nuxt/vite-builder': 3.12.2(@types/node@20.14.5)(eslint@8.57.0)(magicast@0.3.4)(optionator@0.9.4)(rollup@4.18.0)(sass@1.77.6)(terser@5.31.1)(typescript@5.6.2)(vue-tsc@2.0.21(typescript@5.6.2))(vue@3.4.29(typescript@5.6.2))
       '@unhead/dom': 1.9.13
       '@unhead/ssr': 1.9.13
-      '@unhead/vue': 1.9.13(vue@3.4.29(typescript@5.4.5))
+      '@unhead/vue': 1.9.13(vue@3.4.29(typescript@5.6.2))
       '@vue/shared': 3.4.29
       acorn: 8.12.0
       c12: 1.11.1(magicast@0.3.4)
@@ -24909,13 +25682,13 @@ snapshots:
       unenv: 1.9.0
       unimport: 3.7.2(rollup@4.18.0)
       unplugin: 1.10.1
-      unplugin-vue-router: 0.7.0(rollup@4.18.0)(vue-router@4.3.3(vue@3.4.29(typescript@5.4.5)))(vue@3.4.29(typescript@5.4.5))
+      unplugin-vue-router: 0.7.0(rollup@4.18.0)(vue-router@4.4.5(vue@3.4.29(typescript@5.6.2)))(vue@3.4.29(typescript@5.6.2))
       unstorage: 1.10.2(ioredis@5.4.1)
       untyped: 1.4.2
-      vue: 3.4.29(typescript@5.4.5)
+      vue: 3.4.29(typescript@5.6.2)
       vue-bundle-renderer: 2.1.0
       vue-devtools-stub: 0.1.0
-      vue-router: 4.3.3(vue@3.4.29(typescript@5.4.5))
+      vue-router: 4.4.5(vue@3.4.29(typescript@5.6.2))
     optionalDependencies:
       '@parcel/watcher': 2.4.1
       '@types/node': 20.14.5
@@ -25248,6 +26021,8 @@ snapshots:
 
   pako@1.0.11: {}
 
+  pako@2.1.0: {}
+
   param-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
@@ -25421,12 +26196,20 @@ snapshots:
 
   playwright-core@1.44.1: {}
 
+  playwright-core@1.47.2: {}
+
   playwright@1.44.1:
     dependencies:
       playwright-core: 1.44.1
     optionalDependencies:
       fsevents: 2.3.2
 
+  playwright@1.47.2:
+    dependencies:
+      playwright-core: 1.47.2
+    optionalDependencies:
+      fsevents: 2.3.2
+
   pluralize@8.0.0: {}
 
   pngjs@3.4.0: {}
@@ -25857,6 +26640,8 @@ snapshots:
 
   prettier@3.2.5: {}
 
+  prettier@3.3.3: {}
+
   pretty-bytes@6.1.1: {}
 
   pretty-error@4.0.0:
@@ -26592,6 +27377,26 @@ snapshots:
     dependencies:
       glob: 7.2.3
 
+  robust-orientation@1.2.1:
+    dependencies:
+      robust-scale: 1.0.2
+      robust-subtract: 1.0.0
+      robust-sum: 1.0.0
+      two-product: 1.0.2
+
+  robust-point-in-polygon@1.0.3:
+    dependencies:
+      robust-orientation: 1.2.1
+
+  robust-scale@1.0.2:
+    dependencies:
+      two-product: 1.0.2
+      two-sum: 1.0.0
+
+  robust-subtract@1.0.0: {}
+
+  robust-sum@1.0.0: {}
+
   rollup-plugin-visualizer@5.12.0(rollup@4.18.0):
     dependencies:
       open: 8.4.2
@@ -27479,6 +28284,15 @@ snapshots:
 
   thunky@1.1.0: {}
 
+  tiff@2.1.0:
+    dependencies:
+      iobuffer: 2.1.0
+
+  tiff@5.0.3:
+    dependencies:
+      iobuffer: 5.3.2
+      pako: 2.1.0
+
   timm@1.7.1: {}
 
   tiny-invariant@1.3.3: {}
@@ -27553,9 +28367,9 @@ snapshots:
     dependencies:
       typescript: 5.2.2
 
-  ts-api-utils@1.3.0(typescript@5.4.5):
+  ts-api-utils@1.3.0(typescript@5.6.2):
     dependencies:
-      typescript: 5.4.5
+      typescript: 5.6.2
 
   ts-dedent@2.2.0: {}
 
@@ -27688,6 +28502,11 @@ snapshots:
       tslib: 1.14.1
       typescript: 5.4.5
 
+  tsutils@3.21.0(typescript@5.6.2):
+    dependencies:
+      tslib: 1.14.1
+      typescript: 5.6.2
+
   tsx@4.15.6:
     dependencies:
       esbuild: 0.21.5
@@ -27740,6 +28559,10 @@ snapshots:
       turbo-windows-64: 2.0.4
       turbo-windows-arm64: 2.0.4
 
+  two-product@1.0.2: {}
+
+  two-sum@1.0.0: {}
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
@@ -27815,6 +28638,8 @@ snapshots:
 
   typescript@5.4.5: {}
 
+  typescript@5.6.2: {}
+
   ua-parser-js@1.0.38: {}
 
   ufo@1.5.3: {}
@@ -27855,6 +28680,8 @@ snapshots:
 
   undici-types@5.26.5: {}
 
+  undici-types@6.19.8: {}
+
   undici@5.28.4:
     dependencies:
       '@fastify/busboy': 2.1.1
@@ -28035,11 +28862,11 @@ snapshots:
 
   unpipe@1.0.0: {}
 
-  unplugin-vue-router@0.7.0(rollup@4.18.0)(vue-router@4.3.3(vue@3.4.29(typescript@5.4.5)))(vue@3.4.29(typescript@5.4.5)):
+  unplugin-vue-router@0.7.0(rollup@4.18.0)(vue-router@4.4.5(vue@3.4.29(typescript@5.6.2)))(vue@3.4.29(typescript@5.6.2)):
     dependencies:
       '@babel/types': 7.24.7
       '@rollup/pluginutils': 5.1.0(rollup@4.18.0)
-      '@vue-macros/common': 1.10.4(rollup@4.18.0)(vue@3.4.29(typescript@5.4.5))
+      '@vue-macros/common': 1.10.4(rollup@4.18.0)(vue@3.4.29(typescript@5.6.2))
       ast-walker-scope: 0.5.0(rollup@4.18.0)
       chokidar: 3.6.0
       fast-glob: 3.3.2
@@ -28051,7 +28878,7 @@ snapshots:
       unplugin: 1.10.1
       yaml: 2.4.5
     optionalDependencies:
-      vue-router: 4.3.3(vue@3.4.29(typescript@5.4.5))
+      vue-router: 4.4.5(vue@3.4.29(typescript@5.6.2))
     transitivePeerDependencies:
       - rollup
       - vue
@@ -28316,7 +29143,7 @@ snapshots:
       - supports-color
       - terser
 
-  vite-plugin-checker@0.6.4(eslint@8.57.0)(optionator@0.9.4)(typescript@5.4.5)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.4.5)):
+  vite-plugin-checker@0.6.4(eslint@8.57.0)(optionator@0.9.4)(typescript@5.6.2)(vite@5.3.1(@types/node@20.14.5)(sass@1.77.6)(terser@5.31.1))(vue-tsc@2.0.21(typescript@5.6.2)):
     dependencies:
       '@babel/code-frame': 7.24.7
       ansi-escapes: 4.3.2
@@ -28337,8 +29164,8 @@ snapshots:
     optionalDependencies:
       eslint: 8.57.0
       optionator: 0.9.4
-      typescript: 5.4.5
-      vue-tsc: 2.0.21(typescript@5.4.5)
+      typescript: 5.6.2
+      vue-tsc: 2.0.21(typescript@5.6.2)
 
   vite-plugin-dts@0.9.10(vite@2.9.18(sass@1.77.6)):
     dependencies:
@@ -28551,26 +29378,26 @@ snapshots:
     dependencies:
       ufo: 1.5.3
 
-  vue-component-meta@2.0.21(typescript@5.2.2):
+  vue-component-meta@2.0.21(typescript@5.6.2):
     dependencies:
       '@volar/typescript': 2.3.0
-      '@vue/language-core': 2.0.21(typescript@5.2.2)
+      '@vue/language-core': 2.0.21(typescript@5.6.2)
       path-browserify: 1.0.1
       vue-component-type-helpers: 2.0.21
     optionalDependencies:
-      typescript: 5.2.2
+      typescript: 5.6.2
 
   vue-component-type-helpers@2.0.21: {}
 
-  vue-component-type-helpers@2.1.2: {}
+  vue-component-type-helpers@2.1.6: {}
 
   vue-demi@0.14.8(vue@3.4.21(typescript@5.2.2)):
     dependencies:
       vue: 3.4.21(typescript@5.2.2)
 
-  vue-demi@0.14.8(vue@3.4.29(typescript@5.4.5)):
+  vue-demi@0.14.8(vue@3.4.29(typescript@5.6.2)):
     dependencies:
-      vue: 3.4.29(typescript@5.4.5)
+      vue: 3.4.29(typescript@5.6.2)
 
   vue-devtools-stub@0.1.0: {}
 
@@ -28621,27 +29448,32 @@ snapshots:
     dependencies:
       vue: 3.4.21(typescript@5.2.2)
 
-  vue-observe-visibility@2.0.0-alpha.1(vue@3.4.29(typescript@5.4.5)):
+  vue-observe-visibility@2.0.0-alpha.1(vue@3.4.29(typescript@5.6.2)):
     dependencies:
-      vue: 3.4.29(typescript@5.4.5)
+      vue: 3.4.29(typescript@5.6.2)
 
-  vue-resize@2.0.0-alpha.1(vue@3.4.21(typescript@5.4.5)):
+  vue-resize@2.0.0-alpha.1(vue@3.4.21(typescript@5.6.2)):
     dependencies:
-      vue: 3.4.21(typescript@5.4.5)
+      vue: 3.4.21(typescript@5.6.2)
 
-  vue-resize@2.0.0-alpha.1(vue@3.4.29(typescript@5.4.5)):
+  vue-resize@2.0.0-alpha.1(vue@3.4.29(typescript@5.6.2)):
     dependencies:
-      vue: 3.4.29(typescript@5.4.5)
+      vue: 3.4.29(typescript@5.6.2)
 
-  vue-router@4.3.3(vue@3.4.21(typescript@5.4.5)):
+  vue-router@4.3.3(vue@3.4.21(typescript@5.6.2)):
     dependencies:
       '@vue/devtools-api': 6.6.3
-      vue: 3.4.21(typescript@5.4.5)
+      vue: 3.4.21(typescript@5.6.2)
 
-  vue-router@4.3.3(vue@3.4.29(typescript@5.4.5)):
+  vue-router@4.4.5(vue@3.4.21(typescript@5.6.2)):
     dependencies:
-      '@vue/devtools-api': 6.6.3
-      vue: 3.4.29(typescript@5.4.5)
+      '@vue/devtools-api': 6.6.4
+      vue: 3.4.21(typescript@5.6.2)
+
+  vue-router@4.4.5(vue@3.4.29(typescript@5.6.2)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.4.29(typescript@5.6.2)
 
   vue-smooth-reflow@0.1.12(vue@3.4.21(typescript@5.2.2)):
     dependencies:
@@ -28666,20 +29498,20 @@ snapshots:
       semver: 7.6.2
       typescript: 5.2.2
 
-  vue-tsc@2.0.21(typescript@5.4.5):
+  vue-tsc@2.0.21(typescript@5.6.2):
     dependencies:
       '@volar/typescript': 2.3.0
-      '@vue/language-core': 2.0.21(typescript@5.4.5)
+      '@vue/language-core': 2.0.21(typescript@5.6.2)
       semver: 7.6.2
-      typescript: 5.4.5
+      typescript: 5.6.2
     optional: true
 
-  vue-virtual-scroller@2.0.0-beta.8(vue@3.4.29(typescript@5.4.5)):
+  vue-virtual-scroller@2.0.0-beta.8(vue@3.4.29(typescript@5.6.2)):
     dependencies:
       mitt: 2.1.0
-      vue: 3.4.29(typescript@5.4.5)
-      vue-observe-visibility: 2.0.0-alpha.1(vue@3.4.29(typescript@5.4.5))
-      vue-resize: 2.0.0-alpha.1(vue@3.4.29(typescript@5.4.5))
+      vue: 3.4.29(typescript@5.6.2)
+      vue-observe-visibility: 2.0.0-alpha.1(vue@3.4.29(typescript@5.6.2))
+      vue-resize: 2.0.0-alpha.1(vue@3.4.29(typescript@5.6.2))
 
   vue@2.7.16:
     dependencies:
@@ -28706,15 +29538,25 @@ snapshots:
     optionalDependencies:
       typescript: 5.4.5
 
-  vue@3.4.29(typescript@5.4.5):
+  vue@3.4.21(typescript@5.6.2):
+    dependencies:
+      '@vue/compiler-dom': 3.4.21
+      '@vue/compiler-sfc': 3.4.21
+      '@vue/runtime-dom': 3.4.21
+      '@vue/server-renderer': 3.4.21(vue@3.4.21(typescript@5.6.2))
+      '@vue/shared': 3.4.21
+    optionalDependencies:
+      typescript: 5.6.2
+
+  vue@3.4.29(typescript@5.6.2):
     dependencies:
       '@vue/compiler-dom': 3.4.29
       '@vue/compiler-sfc': 3.4.29
       '@vue/runtime-dom': 3.4.29
-      '@vue/server-renderer': 3.4.29(vue@3.4.29(typescript@5.4.5))
+      '@vue/server-renderer': 3.4.29(vue@3.4.29(typescript@5.6.2))
       '@vue/shared': 3.4.29
     optionalDependencies:
-      typescript: 5.4.5
+      typescript: 5.6.2
 
   w3c-hr-time@1.0.2:
     dependencies:
@@ -28777,6 +29619,8 @@ snapshots:
 
   web-namespaces@1.1.4: {}
 
+  web-worker-manager@0.2.0: {}
+
   webidl-conversions@3.0.1: {}
 
   webidl-conversions@5.0.0: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 991c2c473..f8eacd5d9 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,5 +1,7 @@
 packages:
   - 'packages/*'
   - 'examples/*'
+  - 'examples/admin-sdk-plugin/src/Resources/app/administration'
+  - 'examples/admin-sdk-plugin/tests/acceptance'
   - 'docs/*'
   - 'apps/*'