v1.12.10

Fix room list not being cleared (#32436 ) (#32438 )
* Fix room list not being cleared RoomListV3 was lacking an onNotReady which meant that the room list would sometimes not be cleared between logins. * Fix return type --------- (cherry picked from commit 81b111371f) Co-authored-by: David Baker <dbkr@users.noreply.github.com> Co-authored-by: Florian Duros <florianduros@element.io>
2026-02-10 16:01:35 +00:00 · 2026-02-10 15:48:00 +00:00 · 2026-02-10 15:18:37 +00:00 · 2026-02-03 13:25:07 +00:00 · 2026-02-03 13:17:00 +00:00 · 2026-02-03 06:34:40 +00:00
486 changed files with 14622 additions and 9840 deletions
@@ -16,6 +16,7 @@
 /src/components/views/dialogs/devtools/Crypto.tsx                       @element-hq/element-crypto-web-reviewers
 /playwright/e2e/crypto/                                                 @element-hq/element-crypto-web-reviewers
 /playwright/e2e/settings/encryption-user-tab/                           @element-hq/element-crypto-web-reviewers
+/packages/shared-components/src/crypto/                                 @element-hq/element-crypto-web-reviewers


 /src/models/Call.ts                       @element-hq/element-call-reviewers
@@ -44,7 +44,7 @@ jobs:
        steps:
            - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6

-            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
+            - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6
              with:
                  # Disable cache on Windows as it is slower than not caching
                  # https://github.com/actions/setup-node/issues/975
@@ -28,7 +28,7 @@ jobs:
        steps:
            - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6

-            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
+            - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6
              with:
                  cache: "yarn"
                  node-version: "lts/*"
@@ -33,7 +33,7 @@ jobs:
                  repository: matrix-org/matrix-js-sdk
                  path: matrix-js-sdk

-            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
+            - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6
              with:
                  cache: "yarn"
                  cache-dependency-path: element-web/yarn.lock
@@ -54,7 +54,7 @@ jobs:
              with:
                  repository: element-hq/element-web

-            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
+            - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6
              with:
                  cache: "yarn"
                  node-version: "lts/*"
@@ -133,7 +133,7 @@ jobs:
                  name: webapp
                  path: webapp

-            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
+            - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6
              with:
                  cache: "yarn"
                  cache-dependency-path: yarn.lock
@@ -147,7 +147,7 @@ jobs:
              run: echo "version=$(yarn list --pattern @playwright/test --depth=0 --json --non-interactive --no-progress | jq -r '.data.trees[].name')" >> $GITHUB_OUTPUT

            - name: Cache playwright binaries
-              uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5
+              uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5
              id: playwright-cache
              with:
                  path: ~/.cache/ms-playwright
@@ -200,7 +200,7 @@ jobs:
                  persist-credentials: false
                  repository: element-hq/element-web

-            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
+            - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6
              if: inputs.skip != true
              with:
                  cache: "yarn"
@@ -4,6 +4,7 @@ on:
        branches: [develop]
        paths:
            - "src/i18n/strings/en_EN.json"
+            - "packages/shared-components/src/i18n/strings/en_EN.json"
 permissions: {} # No permissions needed
 jobs:
    upload:
@@ -16,7 +16,7 @@ jobs:
              uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6

            - name: 🔧 Set up node environment
-              uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
+              uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6
              with:
                  cache: "yarn"
                  node-version-file: ".node-version"
@@ -37,4 +37,4 @@ jobs:

            - name: 🚀 Publish to npm
              working-directory: packages/shared-components
-              run: npm publish --access public --tag test --provenance
+              run: npm publish --access public --provenance
@@ -26,14 +26,11 @@ jobs:
                  persist-credentials: false
                  repository: element-hq/element-web

-            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
+            - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6
              with:
                  cache: "yarn"
                  node-version: "lts/*"

-            - name: Install element web dependencies
-              run: yarn install --frozen-lockfile
-
            - name: Install dependencies
              working-directory: packages/shared-components
              run: yarn install --frozen-lockfile
@@ -44,7 +41,7 @@ jobs:
              run: echo "version=$(yarn list --pattern @playwright/test --depth=0 --json --non-interactive --no-progress | jq -r '.data.trees[].name')" >> $GITHUB_OUTPUT

            - name: Cache playwright binaries
-              uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5
+              uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5
              id: playwright-cache
              with:
                  path: ~/.cache/ms-playwright
@@ -56,11 +53,18 @@ jobs:
              run: "yarn playwright install --with-deps --only-shell"

            - name: Run Visual tests
-              run: "yarn --cwd packages/shared-components test:storybook:ci"
+              working-directory: packages/shared-components
+              run: "yarn test:storybook --run"
+
+            # Workaround for vis silently adding new baselines if they didn't exist
+            # Can be removed once https://github.com/repobuddy/visual-testing/issues/516 is released
+            - run: |
+                  git add -N .
+                  git diff --exit-code

            - name: Upload received images & diffs
              if: always()
              uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6
              with:
                  name: received-images
-                  path: packages/shared-components/playwright/shared-component-received
+                  path: packages/shared-components/__vis__/linux
@@ -24,7 +24,7 @@ jobs:
        steps:
            - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6

-            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
+            - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6
              with:
                  cache: "yarn"
                  node-version: "lts/*"
@@ -84,7 +84,7 @@ jobs:
        steps:
            - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6

-            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
+            - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6
              with:
                  cache: "yarn"
                  node-version: "lts/*"
@@ -108,7 +108,7 @@ jobs:
        steps:
            - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6

-            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
+            - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6
              with:
                  cache: "yarn"
                  node-version: "lts/*"
@@ -126,7 +126,7 @@ jobs:
        steps:
            - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6

-            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
+            - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6
              with:
                  cache: "yarn"
                  node-version: "lts/*"
@@ -144,7 +144,7 @@ jobs:
        steps:
            - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6

-            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
+            - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6
              with:
                  cache: "yarn"
                  node-version: "lts/*"
@@ -44,7 +44,7 @@ jobs:
                  repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-web' || github.repository }}

            - name: Yarn cache
-              uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
+              uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6
              with:
                  node-version: "lts/*"
                  cache: "yarn"
@@ -55,7 +55,7 @@ jobs:
                  JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}

            - name: Jest Cache
-              uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5
+              uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5
              with:
                  path: /tmp/jest_cache
                  key: ${{ hashFiles('**/yarn.lock') }}
@@ -93,13 +93,13 @@ jobs:

    complete:
        name: jest-tests
-        needs: jest_ew
+        needs: [jest_ew, vitest_sc]
        if: always()
        runs-on: ubuntu-24.04
        permissions:
            statuses: write
        steps:
-            - if: needs.jest_ew.result != 'skipped' && needs.jest_ew.result != 'success'
+            - if: contains(needs.*.result, 'failure') || contains(needs.*.result, 'cancelled')
              run: exit 1

            - name: Skip SonarCloud in merge queue
@@ -113,8 +113,8 @@ jobs:
                  sha: ${{ github.sha }}
                  target_url: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}

-    jest_sc:
-        name: Jest (Shared Components)
+    vitest_sc:
+        name: Vitest (Shared Components)
        runs-on: ubuntu-24.04
        steps:
            - name: Checkout code
@@ -123,39 +123,43 @@ jobs:
                  repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-web' || github.repository }}

            - name: Yarn cache
-              uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
+              uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6
              with:
                  node-version: "lts/*"
                  cache: "yarn"

-            - name: Install EW Deps
-              run: "yarn install"
-
            - name: Install Shared Component Deps
              working-directory: "packages/shared-components"
              run: "yarn install"

-            - name: Jest Cache
-              uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5
+            - name: Cache storybook & vitest
+              uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5
              with:
-                  path: /tmp/jest_cache
-                  key: ${{ hashFiles('**/yarn.lock') }}
+                  path: |
+                      packages/shared-components/node_modules/.cache
+                      packages/shared-components/node_modules/.vite/vitest
+                  key: ${{ hashFiles('packages/shared-components/yarn.lock') }}

-            - name: Get number of CPU cores
-              id: cpu-cores
-              uses: SimenB/github-actions-cpu-cores@97ba232459a8e02ff6121db9362b09661c875ab8 # v2
+            - name: Get installed Playwright version
+              working-directory: packages/shared-components
+              id: playwright
+              run: echo "version=$(yarn list --pattern @playwright/test --depth=0 --json --non-interactive --no-progress | jq -r '.data.trees[].name')" >> $GITHUB_OUTPUT
+
+            - name: Cache playwright binaries
+              uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5
+              id: playwright-cache
+              with:
+                  path: ~/.cache/ms-playwright
+                  key: ${{ runner.os }}-${{ runner.arch }}-playwright-${{ steps.playwright.outputs.version }}-onlyshell
+
+            - name: Install Playwright browsers
+              working-directory: packages/shared-components
+              if: steps.playwright-cache.outputs.cache-hit != 'true'
+              run: "yarn playwright install --with-deps --only-shell"

            - name: Run tests
              working-directory: "packages/shared-components"
-              run: |
-                  yarn test \
-                      --coverage=${{ env.ENABLE_COVERAGE }} \
-                      --ci \
-                      --max-workers ${{ steps.cpu-cores.outputs.count }} \
-                      --cacheDirectory /tmp/jest_cache
-              env:
-                  # tell jest to use coloured output
-                  FORCE_COLOR: true
+              run: yarn test:unit --coverage=${{ env.ENABLE_COVERAGE }}

            - name: Upload Artifact
              if: env.ENABLE_COVERAGE == 'true'
@@ -11,7 +11,7 @@ jobs:
        steps:
            - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6

-            - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
+            - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6
              with:
                  cache: "yarn"
                  node-version: "lts/*"
@@ -30,6 +30,7 @@ electron/pub
 /index.html
 # version file and tarball created by `npm pack` / `yarn pack`
 /git-revision.txt
+jest-sonar.xml

 *storybook.log
 storybook-static
@@ -37,3 +38,6 @@ storybook-static
 /packages/shared-components/node_modules
 /packages/shared-components/dist
 /packages/shared-components/src/i18nKeys.d.ts
+
+# TSC incremental compilation information
+*.tsbuildinfo
@@ -1,3 +1,36 @@
+Changes in [1.12.10](https://github.com/element-hq/element-web/releases/tag/v1.12.10) (2026-02-10)
+==================================================================================================
+## ✨ Features
+
+* Support additional\_creators in /upgraderoom (MSC4289) ([#31934](https://github.com/element-hq/element-web/pull/31934)). Contributed by @andybalaam.
+* Update room header icon for world\_readable rooms ([#31915](https://github.com/element-hq/element-web/pull/31915)). Contributed by @richvdh.
+* Show an icon in the room header for shared history ([#31879](https://github.com/element-hq/element-web/pull/31879)). Contributed by @richvdh.
+* Remove "history may be shared" banner. ([#31881](https://github.com/element-hq/element-web/pull/31881)). Contributed by @kaylendog.
+* Allow dismissing 'Key storage out of sync' temporarily ([#31455](https://github.com/element-hq/element-web/pull/31455)). Contributed by @andybalaam.
+* Add `resolutions` entry for `matrix-widget-api` to package.json ([#31851](https://github.com/element-hq/element-web/pull/31851)). Contributed by @toger5.
+* Improve visibility under contrast control mode ([#31847](https://github.com/element-hq/element-web/pull/31847)). Contributed by @t3chguy.
+* Unread Sorting - Add option for sorting in `OptionsMenuView` ([#31754](https://github.com/element-hq/element-web/pull/31754)). Contributed by @MidhunSureshR.
+* Unread sorting - Implement sorter and use it in the room list store ([#31723](https://github.com/element-hq/element-web/pull/31723)). Contributed by @MidhunSureshR.
+* Allow Element Call widgets to receive sticky events ([#31843](https://github.com/element-hq/element-web/pull/31843)). Contributed by @robintown.
+* Improve icon rendering accessibility ([#31791](https://github.com/element-hq/element-web/pull/31791)). Contributed by @t3chguy.
+* Add message preview toggle to room list header option ([#31821](https://github.com/element-hq/element-web/pull/31821)). Contributed by @florianduros.
+
+## 🐛 Bug Fixes
+
+* [Backport staging] Fix room list not being cleared ([#32438](https://github.com/element-hq/element-web/pull/32438)). Contributed by @RiotRobot.
+* Fix failure to update room info panel on joinrule change ([#31938](https://github.com/element-hq/element-web/pull/31938)). Contributed by @richvdh.
+* Throttle space notification state calculation ([#31922](https://github.com/element-hq/element-web/pull/31922)). Contributed by @dbkr.
+* Fix emoji verification responsive layout ([#31899](https://github.com/element-hq/element-web/pull/31899)). Contributed by @t3chguy.
+* Add patch for linkify to fix doctype handling ([#31900](https://github.com/element-hq/element-web/pull/31900)). Contributed by @dbkr.
+* Fix rooms with no messages appearing at the top of the room list ([#31798](https://github.com/element-hq/element-web/pull/31798)). Contributed by @MidhunSureshR.
+* Fix room list menu flashes when menu is closed ([#31868](https://github.com/element-hq/element-web/pull/31868)). Contributed by @florianduros.
+* Message preview toggle is inverted in room list header ([#31865](https://github.com/element-hq/element-web/pull/31865)). Contributed by @florianduros.
+* Fix duplicate toasts appearing for the same call if two events appear. ([#31693](https://github.com/element-hq/element-web/pull/31693)). Contributed by @Half-Shot.
+* Fix ability to send rageshake during session restore failure ([#31848](https://github.com/element-hq/element-web/pull/31848)). Contributed by @t3chguy.
+* Fix mis-alignment of `Threads` right panel title ([#31849](https://github.com/element-hq/element-web/pull/31849)). Contributed by @t3chguy.
+* Unset buttons does not include color inherit ([#31801](https://github.com/element-hq/element-web/pull/31801)). Contributed by @Philldomd.
+
+
 Changes in [1.12.9](https://github.com/element-hq/element-web/releases/tag/v1.12.9) (2026-01-27)
 ================================================================================================
 ## ✨ Features
@@ -1,7 +1,7 @@
 # syntax=docker.io/docker/dockerfile:1.20-labs@sha256:dbcde2ebc4abc8bb5c3c499b9c9a6876842bf5da243951cd2697f921a7aeb6a9

 # Builder
-FROM --platform=$BUILDPLATFORM node:24-bullseye@sha256:32bde4fc7635942cafb9681e5479a0ba4b2d53b279e44a67ba9303a71fecd706 AS builder
+FROM --platform=$BUILDPLATFORM node:24-bullseye@sha256:0cb1bd306f3bdb19174ea9dde765315532cb72074a549a1683fd7aacdde03a52 AS builder

 # Support custom branch of the js-sdk. This also helps us build images of element-web develop.
 ARG USE_CUSTOM_SDKS=false
@@ -19,7 +19,7 @@ RUN /src/scripts/docker-package.sh
 RUN cp /src/config.sample.json /src/webapp/config.json

 # App
-FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:2c49851f9b34ef35567dc3cbbb56d06d1f56dbb764e75eeb4a599223ee64819c
+FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:a75b70e1479178becce46b2028076899e648665b88fd685472469b34316356ec

 # Need root user to install packages & manipulate the usr directory
 USER root
@@ -275,19 +275,40 @@ Inheriting all the rules of TypeScript, the following additionally apply:
 21. Prefer to use [compound typography components](https://compound.element.io/?path=/docs/compound-web_typography--docs) instead of raw HTML elements for text. This ensures consistent font usage and letter spacing across the app.
 22. If you can't use 21, don't forget to apply the correct CSS classes for font and letter spacing.

-## Stylesheets (\*.pcss = PostCSS + Plugins)
+## Stylesheets

-Note: We use PostCSS + some plugins to process our styles. It looks like SCSS, but actually it is not.
+1. Keep indentation/nesting to a minimum. Maximum suggested nesting is 5 layers.
+2. Components should render only within the bounding box of their outermost DOM element. Page-absolute positioning and negative CSS margins and similar are generally not cool and stop the component from being reused easily in different places.

-1. The view's CSS file MUST have the same name as the component (e.g. `view/rooms/_MessageTile.css` for `MessageTile.tsx` component).
+### PostCSS (\*.pcss = PostCSS + Plugins)
+
+> [!NOTE]
+> We use PostCSS + some plugins to process our styles. It looks like SCSS, but actually it is not.
+
+**PostCSS should be use when working in the main Element Web codebase (not shared-components).**
+
+#### Naming and file structure
+
+1. The view's CSS file MUST have the same name as the component (e.g. `res/css/components/views/rooms/_RoomTile.pcss` for `RoomTile.tsx` component).
 2. Per-view CSS is optional - it could choose to inherit all its styling from the context of the rest of the app, although this is unusual.
-3. Class names must be prefixed with "mx\_".
+3. Class names must be prefixed with `mx_`.
 4. Class names must strictly denote the component which defines them.
   For example: `mx_MyFoo` for `MyFoo` component.
-5. Class names for DOM elements within a view which aren't components are named by appending a lower camel case identifier to the view's class name - e.g. .mx_MyFoo_randomDiv is how you'd name the class of an arbitrary div within the MyFoo view.
-6. Use the `$font` variables instead of manual values.
-7. Keep indentation/nesting to a minimum. Maximum suggested nesting is 5 layers.
-8. Use the whole class name instead of shortcuts:
+5. Class names for DOM elements within a view which aren't components are named by appending a lower camel case identifier to the view's class name.
+   For example: `.mx_MyFoo_randomDiv` is how you'd name the class of an arbitrary div within the MyFoo view.
+
+#### Variables
+
+6. Use the `$font-*` variables instead of manual font-size values (e.g., `$font-12px`, `$font-15px`).
+    - Note: These are deprecated. Prefer Compound typography tokens like `var(--cpd-font-body-md-regular)` for new code.
+7. Use theme color variables like `$primary-content`, `$secondary-content`, `$accent`, `$alert` for colors.
+    - Prefer Compound color tokens like `var(--cpd-color-text-primary)` for new code.
+8. Use spacing variables like `$spacing-8`, `$spacing-12`, `$spacing-16` where available.
+    - Prefer Compound spacing tokens like `var(--cpd-space-2x)` for new code.
+
+#### Syntax and formatting
+
+10. Use the whole class name instead of shortcuts:

    ```scss
    .mx_MyFoo {
@@ -298,7 +319,7 @@ Note: We use PostCSS + some plugins to process our styles. It looks like SCSS, b
    }
    ```

-9. Break multiple selectors over multiple lines this way:
+11. Break multiple selectors over multiple lines this way:

    ```scss
    .mx_MyFoo,
@@ -308,8 +329,7 @@ Note: We use PostCSS + some plugins to process our styles. It looks like SCSS, b
    }
    ```

-10. Non-shared variables should use $lowerCamelCase. Shared variables use $dashed-naming.
-11. Overrides to Z indexes, adjustments of dimensions/padding with pixels, and so on should all be
+12. Overrides to Z indexes, adjustments of dimensions/padding with pixels, and so on should all be
    [documented](#comments) for what the values mean:

    ```scss
@@ -320,9 +340,81 @@ Note: We use PostCSS + some plugins to process our styles. It looks like SCSS, b
    }
    ```

-12. Avoid the use of `!important`. If `!important` is necessary, add a [comment](#comments) explaining why.
-13. The CSS for a component can override the rules for child components. For instance, .mxRoomList .mx_RoomTile {} would be the selector to override styles of RoomTiles when viewed in the context of a RoomList view. Overrides must be scoped to the View's CSS class - i.e. don't just define .mx_RoomTile {} in RoomList.css - only RoomTile.css is allowed to define its own CSS. Instead, say .mx_RoomList .mx_RoomTile {} to scope the override only to the context of RoomList views. N.B. overrides should be relatively rare as in general CSS inheritance should be enough.
-14. Components should render only within the bounding box of their outermost DOM element. Page-absolute positioning and negative CSS margins and similar are generally not cool and stop the component from being reused easily in different places.
+13. Avoid the use of `!important`. If `!important` is necessary, add a [comment](#comments) explaining why.
+
+#### Component overrides
+
+14. The CSS for a component can override the rules for child components. For instance, `.mx_RoomList .mx_RoomTile {}` would be the selector to override styles of RoomTiles when viewed in the context of a RoomList view. Overrides must be scoped to the View's CSS class - i.e. don't just define `.mx_RoomTile {}` in RoomList.pcss - only RoomTile.pcss is allowed to define its own CSS. Instead, say `.mx_RoomList .mx_RoomTile {}` to scope the override only to the context of RoomList views. N.B. overrides should be relatively rare as in general CSS inheritance should be enough.
+
+### CSS module (\*.module.css)
+
+**CSS modules provide locally-scoped class names and are the preferred approach for new shared components.**
+
+#### Naming and file structure
+
+1. The CSS module file MUST have the same name as the component with `.module.css` extension.
+   For example: `PlayPauseButton.module.css` for `PlayPauseButton.tsx`.
+2. Place the CSS module file in the same directory as the component.
+3. Class names should be semantic and describe their purpose, NOT prefixed with `mx_`.
+   For example: `.button`, `.label`, `.content`, `.title`.
+4. Use camelCase for multi-word class names: `.playButton`, `.primaryAction`, `.errorMessage`.
+
+#### Importing and usage
+
+5. Import the CSS module as `styles`:
+
+    ```tsx
+    import styles from "./MyComponent.module.css";
+    ```
+
+6. Apply classes using the styles object:
+
+    ```tsx
+    <div className={styles.container}>
+        <span className={styles.label}>{label}</span>
+        <button className={styles.button}>Click me</button>
+    </div>
+    ```
+
+7. Combine multiple classes using `classNames` utility:
+
+    ```tsx
+    import classNames from "classnames";
+
+    <div className={classNames(styles.pill, className)}>
+        <span className={styles.label}>{label}</span>
+    </div>;
+    ```
+
+#### Styling guidelines
+
+8. Use Compound Design Tokens for all styling values:
+    - Colors: `var(--cpd-color-bg-subtle-primary)`, `var(--cpd-color-text-primary)`
+    - Typography: `var(--cpd-font-body-md-regular)`, `var(--cpd-font-heading-sm-semibold)`
+    - Spacing: `var(--cpd-space-2x)`, `var(--cpd-space-4x)`
+    - Border radius: `var(--cpd-radius-pill-effect)` or standard px values for design-specific needs
+
+9. Use CSS custom properties for component-specific themeable values:
+
+    ```css
+    .flex {
+        display: var(--mx-flex-display, unset);
+        flex-direction: var(--mx-flex-direction, unset);
+        align-items: var(--mx-flex-align, unset);
+        gap: var(--mx-flex-gap, unset);
+    }
+    ```
+
+10. Avoid nesting selectors when possible. CSS modules provide scoping, so nesting is rarely needed.
+11. If `!important` is necessary (e.g., to override Compound component styles), add a [comment](#comments) explaining why:
+
+    ```css
+    .button {
+        background-color: var(--cpd-color-bg-subtle-primary) !important; /* override Compound default */
+    }
+    ```
+
+12. CSS modules do not support PostCSS variables (`$variable`). Always use CSS custom properties (`var(--variable)`) or direct values.

 ## Tests

@@ -98,30 +98,7 @@ For more information about visual testing, see [Visual Testing](playwright#visua

 ### Shared Components Tests

-The shared-components package uses Playwright (via Storybook test runner) to validate component rendering across different states and configurations.
-
-**Run Storybook tests:**
-
-```sh
-cd packages/shared-components
-yarn test:storybook
-```
-
-**Run Storybook tests in CI mode:**
-
-```sh
-cd packages/shared-components
-yarn test:storybook:ci
-```
-
-**Update Storybook screenshots:**
-
-```sh
-cd packages/shared-components
-yarn test:storybook:update
-```
-
-This uses the same Docker-based screenshot rendering as Element Web to ensure consistency across platforms.
+See the [Shared Components README](../packages/shared-components/README.md#visual-regression-tests) for instructions on running the shared components Playwright tests.

 ### Projects

@@ -148,13 +125,6 @@ Misc:
 - `playwright/pages/` - Page object models
 - `playwright/plugins/` - Custom Playwright plugins

-**Shared components tests** are located in `packages/shared-components/`:
-
- `packages/shared-components/playwright/snapshots/` - Storybook screenshot baselines
- `packages/shared-components/.storybook/` - Storybook configuration
-
-The shared components use Storybook's test runner (powered by Playwright) to validate component rendering across different states and configurations.
-
 ### Homeserver Setup

 Homeservers (Synapse or Dendrite) are launched by Playwright workers and reused for all tests matching the worker configuration.
@@ -40,9 +40,10 @@ const config: Config = {
        "^!!raw-loader!.*": "jest-raw-loader",
        "recorderWorkletFactory": "<rootDir>/__mocks__/empty.js",
        "counterpart": "<rootDir>/node_modules/counterpart",
+        "@vector-im/compound-web": "<rootDir>/node_modules/@vector-im/compound-web",
    },
    transformIgnorePatterns: [
-        "/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error|react-merge-refs|is-ip|ip-regex|super-regex|function-timeout|time-span|convert-hrtime|clone-regexp|is-regexp|matrix-web-i18n)).+$",
+        "/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error|react-merge-refs|is-ip|ip-regex|super-regex|function-timeout|time-span|convert-hrtime|clone-regexp|is-regexp|matrix-web-i18n|await-lock|@element-hq/web-shared-components|react-virtuoso)).+$",
    ],
    collectCoverageFrom: [
        "<rootDir>/src/**/*.{js,ts,tsx}",
@@ -1,28 +1,34 @@
 import { KnipConfig } from "knip";

 export default {
-    entry: [
-        "src/serviceworker/index.ts",
-        "src/workers/*.worker.ts",
-        "src/utils/exportUtils/exportJS.js",
-        "src/vector/localstorage-fix.ts",
-        "scripts/**",
-        "playwright/**",
-        "test/**",
-        "res/decoder-ring/**",
-        "res/jitsi_external_api.min.js",
-        "docs/**",
-    ],
-    project: ["**/*.{js,ts,jsx,tsx}"],
-    ignore: [
-        // Keep for now
-        "src/hooks/useLocalStorageState.ts",
-        "src/hooks/useTimeout.ts",
-        "src/components/views/elements/InfoTooltip.tsx",
-        "src/components/views/elements/StyledCheckbox.tsx",
+    workspaces: {
+        "packages/shared-components": {
+            entry: ["src/index.ts"],
+        },
+        ".": {
+            entry: [
+                "src/serviceworker/index.ts",
+                "src/workers/*.worker.ts",
+                "src/utils/exportUtils/exportJS.js",
+                "src/vector/localstorage-fix.ts",
+                "scripts/**",
+                "playwright/**",
+                "test/**",
+                "res/decoder-ring/**",
+                "res/jitsi_external_api.min.js",
+                "docs/**",
+            ],
+            ignore: [
+                // Keep for now
+                "src/hooks/useLocalStorageState.ts",
+                "src/hooks/useTimeout.ts",
+                "src/components/views/elements/InfoTooltip.tsx",
+                "src/components/views/elements/StyledCheckbox.tsx",

-        "packages/**/*",
-    ],
+                "packages/**/*",
+            ],
+        },
+    },
    ignoreDependencies: [
        // Required for `action-validator`
        "@action-validator/*",
@@ -46,19 +52,15 @@ export default {
        "@jest/globals",
        "vitest-environment-jest-fixed-jsdom",

+        // We import this in some tests, transitive dep of @playwright/test
+        "playwright-core",
+
        // Used by matrix-js-sdk, which means we have to include them as a
        // dependency so that // we can run `tsc` (since we import the typescript
        // source of js-sdk, rather than the transpiled and annotated JS like you
        // would with a normal library).
        "@types/content-type",
        "@types/sdp-transform",
-
-        // Used in EW but failed because of "link:"
-        "@element-hq/web-shared-components",
-    ],
-    ignoreBinaries: [
-        // Used in scripts & workflows
-        "jq",
    ],
    ignoreExportsUsedInFile: true,
 } satisfies KnipConfig;
@@ -1,6 +1,6 @@
 {
    "name": "element-web",
-    "version": "1.12.9",
+    "version": "1.12.10",
    "description": "Element: the future of secure communication",
    "author": "New Vector Ltd.",
    "repository": {
@@ -70,14 +70,15 @@
    },
    "resolutions": {
        "**/pretty-format/react-is": "19.2.3",
-        "@types/react": "19.2.7",
+        "@types/react": "19.2.8",
        "@types/react-dom": "19.2.3",
        "oidc-client-ts": "3.4.1",
        "jwt-decode": "4.0.0",
-        "caniuse-lite": "1.0.30001762",
+        "caniuse-lite": "1.0.30001764",
        "testcontainers": "^11.0.0",
        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
-        "wrap-ansi": "npm:wrap-ansi@^7.0.0"
+        "wrap-ansi": "npm:wrap-ansi@^7.0.0",
+        "matrix-widget-api": "^1.16.1"
    },
    "dependencies": {
        "@babel/runtime": "^7.12.5",
@@ -86,19 +87,18 @@
        "@fontsource/fira-code": "^5",
        "@fontsource/inter": "^5",
        "@formatjs/intl-segmenter": "^12.0.0",
-        "@matrix-org/analytics-events": "^0.30.0",
+        "@matrix-org/analytics-events": "^0.31.0",
        "@matrix-org/emojibase-bindings": "^1.5.0",
        "@matrix-org/react-sdk-module-api": "^2.4.0",
-        "@matrix-org/spec": "^1.7.0",
        "@sentry/browser": "^10.0.0",
        "@types/png-chunks-extract": "^1.0.2",
-        "@vector-im/compound-design-tokens": "6.8.0",
-        "@vector-im/compound-web": "^8.3.5",
+        "@vector-im/compound-design-tokens": "6.9.0",
+        "@vector-im/compound-web": "^8.3.6",
        "@vector-im/matrix-wysiwyg": "2.40.0",
        "@zxcvbn-ts/core": "^3.0.4",
        "@zxcvbn-ts/language-common": "^3.0.4",
        "@zxcvbn-ts/language-en": "^3.0.2",
-        "await-lock": "^2.1.0",
+        "await-lock": "^3.0.0",
        "bloom-filters": "^3.0.3",
        "blurhash": "^2.0.3",
        "browserslist": "^4.23.2",
@@ -129,15 +129,15 @@
        "lodash": "^4.17.21",
        "maplibre-gl": "^5.0.0",
        "matrix-encrypt-attachment": "^1.0.3",
-        "matrix-js-sdk": "40.1.0",
-        "matrix-widget-api": "^1.15.0",
+        "matrix-js-sdk": "40.2.0",
+        "matrix-widget-api": "^1.16.1",
        "memoize-one": "^6.0.0",
        "mime": "^4.0.4",
        "oidc-client-ts": "^3.0.1",
        "opus-recorder": "^8.0.3",
        "pako": "^2.0.3",
        "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.313.0",
+        "posthog-js": "1.328.0",
        "qrcode": "1.5.4",
        "re-resizable": "6.11.2",
        "react": "^19.0.0",
@@ -145,15 +145,12 @@
        "react-blurhash": "^0.3.0",
        "react-dom": "^19.0.0",
        "react-focus-lock": "^2.5.1",
-        "react-merge-refs": "^3.0.2",
-        "react-string-replace": "^1.1.1",
+        "react-string-replace": "^2.0.0",
        "react-transition-group": "^4.4.1",
-        "react-virtuoso": "^4.14.0",
        "rfc4648": "^1.4.0",
        "sanitize-filename": "^1.6.3",
        "sanitize-html": "2.17.0",
        "tar-js": "^0.3.0",
-        "temporal-polyfill": "^0.3.0",
        "ua-parser-js": "1.0.40",
        "uuid": "^13.0.0",
        "what-input": "^5.2.10"
@@ -181,13 +178,12 @@
        "@babel/runtime": "^7.12.5",
        "@casualbot/jest-sonar-reporter": "2.5.0",
        "@element-hq/element-call-embedded": "0.16.3",
-        "@element-hq/element-web-playwright-common": "2.2.3",
+        "@element-hq/element-web-playwright-common": "2.2.5",
        "@fetch-mock/jest": "^0.2.20",
        "@peculiar/webcrypto": "^1.4.3",
        "@playwright/test": "1.57.0",
        "@principalstudio/html-webpack-inject-preload": "^1.2.7",
        "@sentry/webpack-plugin": "^4.0.0",
-        "@storybook/react-vite": "^10.0.7",
        "@stylistic/eslint-plugin": "^5.0.0",
        "@svgr/webpack": "^8.0.0",
        "@testing-library/dom": "^10.4.0",
@@ -213,7 +209,7 @@
        "@types/node": "18",
        "@types/pako": "^2.0.0",
        "@types/qrcode": "^1.3.5",
-        "@types/react": "19.2.7",
+        "@types/react": "19.2.8",
        "@types/react-beautiful-dnd": "^13.0.0",
        "@types/react-dom": "19.2.3",
        "@types/react-transition-group": "^4.4.0",
@@ -262,12 +258,11 @@
        "jsqr": "^1.4.0",
        "knip": "^5.36.2",
        "lint-staged": "^16.0.0",
-        "matrix-web-i18n": "3.5.2",
+        "matrix-web-i18n": "3.6.0",
        "mini-css-extract-plugin": "2.9.2",
        "minimist": "^1.2.6",
        "modernizr": "^3.12.0",
        "patch-package": "^8.0.0",
-        "playwright-core": "^1.51.0",
        "postcss": "8.4.46",
        "postcss-easings": "^4.0.0",
        "postcss-hexrgba": "2.1.0",
@@ -275,19 +270,18 @@
        "postcss-loader": "8.1.1",
        "postcss-mixins": "^12.0.0",
        "postcss-nested": "^7.0.0",
-        "postcss-preset-env": "^10.0.0",
+        "postcss-preset-env": "^11.0.0",
        "postcss-scss": "^4.0.4",
        "postcss-simple-vars": "^7.0.1",
-        "prettier": "3.7.4",
+        "prettier": "3.8.0",
        "process": "^0.11.10",
        "raw-loader": "^4.0.2",
        "rimraf": "^6.0.0",
        "semver": "^7.5.2",
        "source-map-loader": "^5.0.0",
-        "storybook": "^10.0.7",
-        "stylelint": "^16.23.0",
-        "stylelint-config-standard": "^39.0.0",
-        "stylelint-scss": "^6.0.0",
+        "stylelint": "^17.0.0",
+        "stylelint-config-standard": "^40.0.0",
+        "stylelint-scss": "^7.0.0",
        "stylelint-value-no-unknown-custom-properties": "^6.0.1",
        "terser-webpack-plugin": "^5.3.9",
        "testcontainers": "^11.0.0",
@@ -0,0 +1,10 @@
+# Ignore test failure screenshots
+/src/**/__screenshots__/
+
+# Ignore vis diffs & local baseline
+/__vis__/**/__diffs__
+/__vis__/**/__results__
+/__vis__/local
+
+# Ignore coverage report
+/coverage/
@@ -0,0 +1,9 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
+@import url("@vector-im/compound-web/dist/style.css");
@@ -10,7 +10,7 @@ import { WithTooltip, IconButton, TooltipLinkList } from "storybook/internal/com
 import React from "react";
 import { GlobeIcon } from "@storybook/icons";

-const languages = JSON.parse(process.env.STORYBOOK_LANGUAGES);
+const languages: string[] = JSON.parse(process.env.STORYBOOK_LANGUAGES!);

 /**
 * Returns the title of a language in the user's locale.
@@ -6,17 +6,43 @@ Please see LICENSE files in the repository root for full details.
 */

 import type { StorybookConfig } from "@storybook/react-vite";
-import path from "node:path";
 import fs from "node:fs";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
 import { mergeConfig } from "vite";
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";

 // Get a list of available languages so the language selector can display them at runtime
-const languages = fs.readdirSync("src/i18n/strings").map((f) => f.slice(0, -5));
+const languageFiles = fs.readdirSync("src/i18n/strings").map((f) => f.slice(0, -5));
+
+const languages: Record<string, string> = {};
+for (const lang of languageFiles) {
+    const normalizedLanguage = lang.toLowerCase().replace("_", "-");
+    const languageParts = normalizedLanguage.split("-");
+    if (languageParts.length === 2 && languageParts[0] === languageParts[1]) {
+        languages[languageParts[0]] = `${lang}.json`;
+    } else {
+        languages[normalizedLanguage] = `${lang}.json`;
+    }
+}
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+    return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
+}

 const config: StorybookConfig = {
    stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-    addons: ["@storybook/addon-docs", "@storybook/addon-designs", "@storybook/addon-a11y"],
+    addons: [
+        "@storybook/addon-docs",
+        "@storybook/addon-designs",
+        "@storybook/addon-a11y",
+        "@storybook/addon-vitest",
+        getAbsolutePath("storybook-addon-vis"),
+    ],
    framework: "@storybook/react-vite",
    core: {
        disableTelemetry: true,
@@ -26,34 +52,17 @@ const config: StorybookConfig = {
    },
    async viteFinal(config) {
        return mergeConfig(config, {
-            resolve: {
-                alias: {
-                    // Alias used by i18n.tsx
-                    $webapp: path.resolve("../../webapp"),
-                },
-            },
            plugins: [
                // Needed for counterpart to work
-                nodePolyfills({ include: ["process", "util"] }),
+                nodePolyfills({ include: ["util"], globals: { global: false } }),
                {
                    name: "language-middleware",
                    configureServer(server) {
                        server.middlewares.use((req, res, next) => {
                            if (req.url === "/i18n/languages.json") {
                                // Dynamically generate a languages.json file based on what files are available
-                                const langJson: Record<string, string> = {};
-                                for (const lang of languages) {
-                                    const normalizedLanguage = lang.toLowerCase().replace("_", "-");
-                                    const languageParts = normalizedLanguage.split("-");
-                                    if (languageParts.length === 2 && languageParts[0] === languageParts[1]) {
-                                        langJson[languageParts[0]] = `${lang}.json`;
-                                    } else {
-                                        langJson[normalizedLanguage] = `${lang}.json`;
-                                    }
-                                }
-
                                res.setHeader("Content-Type", "application/json");
-                                res.end(JSON.stringify(langJson));
+                                res.end(JSON.stringify(languages));
                            } else if (req.url?.startsWith("/i18n/")) {
                                // Serve the individual language files, which annoyingly can't be a simple
                                // static dir because the directory structure in src doesn't match what
@@ -81,7 +90,7 @@ const config: StorybookConfig = {
    },
    env: (config) => ({
        ...config,
-        STORYBOOK_LANGUAGES: JSON.stringify(languages),
+        STORYBOOK_LANGUAGES: JSON.stringify(Object.keys(languages)),
    }),
 };
 export default config;
@@ -1,6 +1,6 @@
 import type { ArgTypes, Preview, Decorator, ReactRenderer, StrictArgs } from "@storybook/react-vite";

-import "../../../res/css/shared.pcss";
+import "./compound.css";
 import "./preview.css";
 import React, { useLayoutEffect } from "react";
 import { setLanguage } from "../src/utils/i18n";
@@ -80,7 +80,7 @@ const withI18nProvider: Decorator = (Story) => {
 };

 const preview: Preview = {
-    tags: ["autodocs"],
+    tags: ["autodocs", "snapshot"],
    decorators: [withThemeProvider, withTooltipProvider, withI18nProvider],
    parameters: {
        options: {
@@ -1,34 +0,0 @@
-/*
-Copyright 2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { waitForPageReady, TestRunnerConfig } from "@storybook/test-runner";
-import { toMatchImageSnapshot } from "jest-image-snapshot";
-
-const customSnapshotsDir = `${process.cwd()}/playwright/snapshots/`;
-const customReceivedDir = `${process.cwd()}/playwright/received/`;
-
-const config: TestRunnerConfig = {
-    setup() {
-        expect.extend({ toMatchImageSnapshot });
-    },
-    async postVisit(page, context) {
-        await waitForPageReady(page);
-
-        // If you want to take screenshot of multiple browsers, use
-        // page.context().browser().browserType().name() to get the browser name to prefix the file name
-        const image = await page.screenshot({ animations: "disabled" });
-        expect(image).toMatchImageSnapshot({
-            customSnapshotsDir,
-            customSnapshotIdentifier: `${context.id}-${process.platform}`,
-            storeReceivedOnFailure: true,
-            customReceivedDir,
-            customDiffDir: customReceivedDir,
-        });
-    },
-};
-
-export default config;
@@ -0,0 +1,36 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from "@storybook/react-vite";
+import { vis, visAnnotations } from "storybook-addon-vis/vitest-setup";
+
+import * as projectAnnotations from "./preview.tsx";
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations, visAnnotations]);
+
+vis.setup({
+    async auto() {
+        const style = document.createElement("style");
+        style.setAttribute("type", "text/css");
+        style.appendChild(
+            document.createTextNode(`
+                /* Inhibit all animations for the screenshot to be more stable */
+                *, *::before, *::after {
+                    animation: none !important;
+                }
+                /* Hide all storybook elements */
+                .sb-wrapper {
+                    visibility: hidden !important;
+                }
+            `),
+        );
+        document.head.appendChild(style);
+    },
+});
@@ -121,31 +121,157 @@ Most components should be written as [MVVM pattern](../../docs/MVVM.md) view
 components. See existing components for examples. The exceptions are low level
 components that don't need a view model.

+### Write Storybook Stories
+
+All components should have accompanying Storybook stories for documentation and visual testing. Stories are written in TypeScript using the [Component Story Format (CSF)](https://storybook.js.org/docs/api/csf).
+
+#### Story File Structure
+
+Place the story file next to the component with the `.stories.tsx` extension:
+
+```
+MyComponent/
+├── MyComponent.tsx
+├── MyComponent.module.css
+└── MyComponent.stories.tsx
+```
+
+#### Regular Component Stories
+
+For regular React components (non-MVVM), create stories by defining a meta object and story variations:
+
+```tsx
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { MyComponent } from "./MyComponent";
+
+const meta = {
+    title: "Category/MyComponent",
+    component: MyComponent,
+    tags: ["autodocs"],
+    args: {
+        // Default args for all stories
+        label: "Default Label",
+        onClick: fn(), // Mock function for tracking interactions
+    },
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story uses the default args
+export const Default: Story = {};
+
+// Override specific args for variations
+export const WithCustomLabel: Story = {
+    args: {
+        label: "Custom Label",
+    },
+};
+
+export const Disabled: Story = {
+    args: {
+        disabled: true,
+    },
+};
+```
+
+#### MVVM Component Stories
+
+For MVVM components, create a wrapper component that uses `useMockedViewModel`:
+
+```tsx
+import React, { type JSX } from "react";
+import { fn } from "storybook/test";
+import type { Meta, StoryFn } from "@storybook/react-vite";
+import { MyComponentView, type MyComponentViewSnapshot, type MyComponentViewActions } from "./MyComponentView";
+import { useMockedViewModel } from "../../useMockedViewModel";
+
+// Combine snapshot and actions for easier typing
+type MyComponentProps = MyComponentViewSnapshot & MyComponentViewActions;
+
+// Wrapper component that creates a mocked ViewModel
+const MyComponentViewWrapper = ({ onAction, ...rest }: MyComponentProps): JSX.Element => {
+    const vm = useMockedViewModel(rest, {
+        onAction,
+    });
+    return <MyComponentView vm={vm} />;
+};
+
+export default {
+    title: "Category/MyComponentView",
+    component: MyComponentViewWrapper,
+    tags: ["autodocs"],
+    args: {
+        // Snapshot properties (state)
+        title: "Default Title",
+        isLoading: false,
+        // Action properties (callbacks)
+        onAction: fn(),
+    },
+} as Meta<typeof MyComponentViewWrapper>;
+
+const Template: StoryFn<typeof MyComponentViewWrapper> = (args) => <MyComponentViewWrapper {...args} />;
+
+export const Default = Template.bind({});
+
+export const Loading = Template.bind({});
+Loading.args = {
+    isLoading: true,
+};
+```
+
+Thanks to this approach, we can directly use primitives in the story arguments instead of a view model object.
+
+#### Linking Figma Designs
+
+This package uses [@storybook/addon-designs](https://github.com/storybookjs/addon-designs) to embed Figma designs directly in Storybook. This helps developers compare their implementation with the design specs.
+
+1. **Get the Figma URL**: Open your design in Figma, click "Share" → "Copy link"
+2. **Add to story parameters**: Include the `design` object in the meta's `parameters`
+3. **Supported URL formats**:
+    - File links: `https://www.figma.com/file/...`
+    - Design links: `https://www.figma.com/design/...`
+    - Specific node: `https://www.figma.com/design/...?node-id=123-456`
+
+Example with Figma integration:
+
+```tsx
+export default {
+    title: "Room List/RoomListSearchView",
+    component: RoomListSearchViewWrapper,
+    tags: ["autodocs"],
+    args: {
+        // ... your args
+    },
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/vlmt46QDdE4dgXDiyBJXqp/ER-33-Left-Panel?node-id=98-1979",
+        },
+    },
+} as Meta<typeof RoomListSearchViewWrapper>;
+```
+
+The Figma design will appear in the "Design" tab in Storybook.
+
 ### Tests

 Two types of tests are available: unit tests and visual regression tests.

 ### Unit Tests

-These tests cover the logic of the components and utilities. Built with Jest
+These tests cover the logic of the components and utilities. Built with Vitest
 and React Testing Library.

 ```bash
-yarn test
+yarn test:unit
 ```

 ### Visual Regression Tests

-These tests ensure the UI components render correctly. They need Storybook to
-be running and they will run in docker using [Playwright](../../playwright.md).
-
-First run storybook:
-
-```bash
-yarn storybook
-```
-
-Then, in another terminal, run:
+These tests ensure the UI components render correctly.
+Built with Storybook and run under vitest using playwright.

 ```bash
 yarn test:storybook:update
@@ -155,6 +281,11 @@ Each story will be rendered and a screenshot will be taken and compared to the
 existing baseline. If there are visual changes or AXE violation, the test will
 fail.

+Screenshots are located in `packages/shared-components/__vis__/`.
+
+> [!IMPORTANT]
+> In case of docker issues with Playwright, see [playwright EW documentation](https://github.com/element-hq/element-web/blob/develop/docs/playwright.md#supported-container-runtimes).
+
 ### Translations

 First see our [translation guide](../../docs/translation.md) and [translation dev guide](../../docs/translation-dev.md).
@@ -163,3 +294,10 @@ To generate translation strings for this package, run:
 ```bash
 yarn i18n
 ```
+
+## Publish a new version
+
+Two steps are required to publish a new version of this package:
+
+1. Bump the version in `package.json` following semver rules and open a PR.
+2. Once merged run the [github workflow](https://github.com/element-hq/element-web/actions/workflows/shared-component-publish.yaml)
@@ -1,21 +0,0 @@
-module.exports = {
-    sourceMaps: true,
-    presets: [
-        [
-            "@babel/preset-env",
-            {
-                include: ["@babel/plugin-transform-class-properties"],
-            },
-        ],
-        ["@babel/preset-typescript", { allowDeclareFields: true }],
-        "@babel/preset-react",
-    ],
-    plugins: [
-        "@babel/plugin-proposal-export-default-from",
-        "@babel/plugin-transform-numeric-separator",
-        "@babel/plugin-transform-object-rest-spread",
-        "@babel/plugin-transform-optional-chaining",
-        "@babel/plugin-transform-nullish-coalescing-operator",
-        "@babel/plugin-transform-runtime",
-    ],
-};
@@ -1,58 +0,0 @@
-/*
-Copyright 2025 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { env } from "process";
-
-import type { Config } from "jest";
-
-const config: Config = {
-    testEnvironment: "jest-fixed-jsdom",
-    testEnvironmentOptions: {
-        url: "http://localhost/",
-    },
-    testMatch: ["<rootDir>/src/**/*.test.[tj]s?(x)"],
-    setupFilesAfterEnv: ["<rootDir>/src/test/setupTests.ts"],
-    moduleNameMapper: {
-        // Support CSS module
-        "\\.(module.css)$": "identity-obj-proxy",
-        "\\.(css|scss|pcss)$": "<rootDir>/__mocks__/cssMock.js",
-        "\\.(gif|png|ttf|woff2)$": "<rootDir>/__mocks__/imageMock.js",
-        "\\.svg$": "<rootDir>/__mocks__/svg.js",
-        "\\$webapp/i18n/languages.json": "<rootDir>/../../__mocks__/languages.json",
-        "^react$": "<rootDir>/node_modules/react",
-        "^react-dom$": "<rootDir>/node_modules/react-dom",
-        "waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
-        "context-filter-polyfill": "<rootDir>/__mocks__/empty.js",
-        "workers/(.+)Factory": "<rootDir>/__mocks__/workerFactoryMock.js",
-    },
-    transformIgnorePatterns: [
-        "/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error|react-merge-refs|@storybook|storybook|matrix-web-i18n)).+$",
-    ],
-    collectCoverageFrom: [
-        "<rootDir>/src/**/*.{js,ts,tsx}",
-        "<rootDir>/packages/**/*.{js,ts,tsx}",
-        // Coverage chokes on type definition files
-        "!<rootDir>/src/**/*.d.ts",
-    ],
-    coverageReporters: ["text-summary", "lcov"],
-    testResultsProcessor: "@casualbot/jest-sonar-reporter",
-    prettierPath: null,
-    moduleDirectories: ["node_modules", "./src/test/utils"],
-};
-
-// if we're running under GHA, enable the GHA reporter
-if (env["GITHUB_ACTIONS"] !== undefined) {
-    const reporters: Config["reporters"] = [["github-actions", { silent: false }], "summary"];
-
-    // if we're running against the develop branch, also enable the slow test reporter
-    if (env["GITHUB_REF"] == "refs/heads/develop") {
-        reporters.push("<rootDir>/../../test/slowReporter.cjs");
-    }
-    config.reporters = reporters;
-}
-
-export default config;
@@ -1,23 +1,24 @@
 {
    "name": "@element-hq/web-shared-components",
-    "version": "0.0.0-test.12",
+    "version": "0.0.1",
    "description": "Shared components for Element",
    "author": "New Vector Ltd.",
    "repository": {
        "type": "git",
        "url": "https://github.com/element-hq/element-web"
    },
+    "type": "module",
    "exports": {
        ".": {
            "require": {
                "style": "./dist/element-web-shared-components.css",
                "types": "./dist/element-web-shared-components.d.ts",
-                "default": "./dist/element-web-shared-components.umd.js"
+                "default": "./dist/element-web-shared-components.umd.cjs"
            },
            "import": {
                "style": "./dist/element-web-shared-components.css",
                "types": "./dist/element-web-shared-components.d.ts",
-                "default": "./dist/element-web-shared-components.mjs"
+                "default": "./dist/element-web-shared-components.js"
            }
        },
        "./dist/element-web-shared-components.css": {
@@ -35,61 +36,80 @@
    ],
    "scripts": {
        "i18n": "matrix-gen-i18n src && yarn i18n:sort && yarn i18n:lint",
-        "i18n:sort": "jq --sort-keys '.' src/i18n/strings/en_EN.json > src/i18n/strings/en_EN.json.tmp && mv src/i18n/strings/en_EN.json.tmp src/i18n/strings/en_EN.json",
+        "i18n:sort": "matrix-sort-i18n src/i18n/strings/en_EN.json",
        "i18n:lint": "matrix-i18n-lint && prettier --log-level=silent --write src/i18n/strings/ --ignore-path /dev/null",
-        "test": "jest",
+        "test:unit": "vitest --project=unit",
+        "test:storybook": "vitest --project=storybook",
+        "test:storybook:update": "playwright-screenshots --entrypoint /work/scripts/storybook-screenshot-update.sh --with-node-modules",
        "prepare": "patch-package && vite build",
        "storybook": "storybook dev -p 6007",
        "build-storybook": "storybook build",
        "lint": "yarn lint:types && yarn lint:js",
        "lint:js": "eslint --max-warnings 0 src && prettier --check .",
-        "lint:types": "tsc --noEmit --jsx react",
-        "test:storybook": "test-storybook --url http://localhost:6007/",
-        "test:storybook:ci": "concurrently -k -s first -n \"SB,TEST\" \"yarn storybook --no-open\" \"wait-on tcp:6007 && yarn test-storybook --url http://localhost:6007/ --ci --maxWorkers=2\"",
-        "test:storybook:update": "playwright-screenshots --entrypoint /work/scripts/storybook-screenshot-update.sh --with-node-modules"
-    },
-    "resolutions": {
-        "playwright": "1.57.0"
+        "lint:types": "tsc --noEmit && tsc --noEmit -p tsconfig.node.json"
    },
    "dependencies": {
        "@element-hq/element-web-module-api": "^1.8.0",
+        "@matrix-org/spec": "^1.7.0",
        "@vector-im/compound-design-tokens": "^6.4.3",
        "classnames": "^2.5.1",
        "counterpart": "^0.18.6",
        "lodash": "^4.17.21",
-        "matrix-web-i18n": "3.5.2",
-        "patch-package": "^8.0.1",
+        "matrix-web-i18n": "3.6.0",
        "react-merge-refs": "^3.0.2",
+        "react-virtuoso": "^4.14.0",
        "temporal-polyfill": "^0.3.0"
    },
    "devDependencies": {
-        "@element-hq/element-web-playwright-common": "2.2.3",
+        "@element-hq/element-web-playwright-common": "2.2.5",
+        "@fetch-mock/vitest": "^0.2.18",
+        "@matrix-org/react-sdk-module-api": "^2.5.0",
        "@playwright/test": "1.57.0",
        "@storybook/addon-a11y": "^10.0.7",
        "@storybook/addon-designs": "^11.0.1",
        "@storybook/addon-docs": "^10.0.7",
+        "@storybook/addon-vitest": "^10.1.11",
        "@storybook/icons": "^2.0.0",
        "@storybook/react-vite": "^10.0.7",
-        "@storybook/test-runner": "^0.24.1",
+        "@stylistic/eslint-plugin": "^5.7.0",
        "@testing-library/dom": "^10.4.1",
-        "@testing-library/react": "^16.3.0",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.2",
+        "@testing-library/user-event": "^14.6.1",
        "@types/counterpart": "^0.18.4",
-        "@types/jest-image-snapshot": "^6.4.0",
        "@types/lodash": "^4.17.20",
        "@types/react": "^19.2.2",
-        "concurrently": "^9.2.1",
+        "@types/react-dom": "^19.2.3",
+        "@typescript-eslint/eslint-plugin": "^8.53.1",
+        "@typescript-eslint/parser": "^8.53.1",
+        "@vector-im/compound-web": "^8.3.6",
+        "@vitejs/plugin-react": "^5.1.2",
+        "@vitest/browser-playwright": "^4.0.17",
+        "@vitest/coverage-v8": "^4.0.17",
+        "@vitest/ui": "^4.0.17",
        "eslint": "8",
+        "eslint-config-google": "^0.14.0",
+        "eslint-config-prettier": "^10.1.8",
+        "eslint-plugin-deprecate": "^0.8.7",
+        "eslint-plugin-import": "^2.32.0",
+        "eslint-plugin-jsx-a11y": "^6.10.2",
        "eslint-plugin-matrix-org": "^3.0.0",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-compiler": "^19.1.0-rc.2",
+        "eslint-plugin-react-hooks": "^7.0.1",
        "eslint-plugin-storybook": "^10.0.7",
-        "jest": "^30.2.0",
-        "jest-image-snapshot": "^6.5.1",
+        "eslint-plugin-unicorn": "^56.0.0",
        "patch-package": "^8.0.1",
        "prettier": "^3.6.2",
        "storybook": "^10.0.7",
+        "storybook-addon-vis": "^3.1.2",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.3.1",
        "vite-plugin-dts": "^4.5.4",
-        "vite-plugin-node-polyfills": "^0.24.0"
+        "vite-plugin-node-polyfills": "^0.25.0",
+        "vitest": "^4.0.18",
+        "vitest-browser-react": "^2.0.2",
+        "vitest-sonar-reporter": "^3.0.0"
    },
    "engines": {
        "node": ">=20.0.0"
--- a/Show More
+++ b/Show More