Update typescript-eslint monorepo to v8.46.0

* Move shared components to a packages/ directory

so they can be publish more sensibly

* Iterate towards split out shared-components module

 * Move shared component source into src/ subdir
 * Fix up imports
 * Include shared components in babel-ing (again)

* Remove now unused dependencies

* Update import in storybook preview

* ...except of course they aren't unused

if we import the shared components by source

* Ignore shared components deps

* Add shared-components to i18n paths

and upgrade web-i18n to version that supports doing so

* Move storybook stuff to shared-components

* Seems we don't need this anymore...

* Remove unused deps

and remove storybook plugin from eslint

* Presumably working-directory is only valid on run steps

* Ignore dep & run prettier

* Prettier on knips.ts

* Hopefully run in right dir

* Remember how to software write

* Okay... how about THIS way?

* Oh right, they were git ignored. Sigh.

* Add concurrently

* Ignore in knip

* Better?

* Paaaaaaaackageeeeeeees

* More packages

* Move playwright snapshots

* Still need a custom snapshots dir

* Add eslint back

* Oh, now knip sees them

* Fix another import

* Don't lint shared-components with everything else

Okay, eslint & tsconfig are tied too closely for this to work and
running tsc on the shared components will need its deps installing

* Maybe lint shared components

please?

* Not quite

* Remove storybook again

Re-check if it does work without it

* Remove storybook eslint plugin

as we're not linting storybook here anymore

* Remove this too

* We do need it here though

.eslintrc.js

@@ -1,11 +1,6 @@
 module.exports = {
     plugins: ["matrix-org", "eslint-plugin-react-compiler"],
-    extends: [
-        "plugin:matrix-org/babel",
-        "plugin:matrix-org/react",
-        "plugin:matrix-org/a11y",
-        "plugin:storybook/recommended",
-    ],
+    extends: ["plugin:matrix-org/babel", "plugin:matrix-org/react", "plugin:matrix-org/a11y"],
     parserOptions: {
         project: ["./tsconfig.json"],
     },

.github/workflows/docker.yaml

@@ -37,14 +37,14 @@ jobs:
                   install: true
 
             - name: Login to Docker Hub
-              uses: docker/login-action@184bdaa0721073962dff0199f1fb9940f07167d1 # v3
+              uses: docker/login-action@5e57cd118135c172c3672efd75eb46360885c0ef # v3
               if: github.event_name != 'pull_request'
               with:
                   username: ${{ secrets.DOCKERHUB_USERNAME }}
                   password: ${{ secrets.DOCKERHUB_TOKEN }}
 
             - name: Login to GitHub Container Registry
-              uses: docker/login-action@184bdaa0721073962dff0199f1fb9940f07167d1 # v3
+              uses: docker/login-action@5e57cd118135c172c3672efd75eb46360885c0ef # v3
               if: github.event_name != 'pull_request'
               with:
                   registry: ghcr.io

.github/workflows/end-to-end-tests.yaml

@@ -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@0400d5f644dc74513175e3cd8d07132dd4860809 # v4
+              uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4
               id: playwright-cache
               with:
                   path: ~/.cache/ms-playwright

.github/workflows/shared-component-visual-tests.yaml

@@ -31,21 +31,27 @@ jobs:
                   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
 
             - 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@0400d5f644dc74513175e3cd8d07132dd4860809 # v4
+              uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4
               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"
 
@@ -56,15 +62,15 @@ jobs:
             - name: Build storybook dependencies
               # When the first test is ran, it will fail because the dependencies are not yet built.
               # This step is to ensure that the dependencies are built before running the tests.
-              run: "yarn test:storybook:ci"
+              run: "yarn --cwd packages/shared-components test:storybook:ci"
               continue-on-error: true
 
             - name: Run Visual tests
-              run: "yarn test:storybook:ci"
+              run: "yarn --cwd packages/shared-components test:storybook:ci"
 
             - name: Upload received images & diffs
               if: always()
               uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
               with:
                   name: received-images
-                  path: playwright/shared-component-received
+                  path: packages/shared-components/playwright/shared-component-received

.github/workflows/static_analysis.yaml

@@ -35,6 +35,12 @@ jobs:
             - name: Typecheck
               run: "yarn run lint:types"
 
+            - name: Install Shared Component Dependencies
+              run: "yarn --cwd packages/shared-components install"
+
+            - name: Typecheck Shared Components
+              run: "yarn --cwd packages/shared-components run lint:types"
+
     i18n_lint:
         name: "i18n Check"
         uses: matrix-org/matrix-web-i18n/.github/workflows/i18n_check.yml@main
@@ -81,6 +87,12 @@ jobs:
             - name: Run Linter
               run: "yarn run lint:js"
 
+            - name: Install Shared Component Deps
+              run: "yarn --cwd packages/shared-components install --frozen-lockfile"
+
+            - name: Run Linter
+              run: "yarn --cwd packages/shared-components run lint:js"
+
     style_lint:
         name: "Style Lint"
         runs-on: ubuntu-24.04

.github/workflows/tests.yml

@@ -55,7 +55,7 @@ jobs:
                   JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
 
             - name: Jest Cache
-              uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4
+              uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4
               with:
                   path: /tmp/jest_cache
                   key: ${{ hashFiles('**/yarn.lock') }}
@@ -104,7 +104,7 @@ jobs:
 
             - name: Skip SonarCloud in merge queue
               if: github.event_name == 'merge_group' || inputs.disable_coverage == 'true'
-              uses: guibranco/github-status-action-v2@741ea90ba6c3ca76fe0d43ba11a90cda97d5e685
+              uses: guibranco/github-status-action-v2@5530c593759f489bba08272e96986ffc571c1ea1
               with:
                   authToken: ${{ secrets.GITHUB_TOKEN }}
                   state: success

.gitignore

@@ -4,7 +4,6 @@
 /key.pem
 /lib
 /node_modules
-/packages/
 /webapp
 /.npmrc
 /*.log
@@ -34,3 +33,6 @@ electron/pub
 
 *storybook.log
 storybook-static
+
+/packages/shared-components/node_modules
+/packages/shared-components/dist

CHANGELOG.md

@@ -1,3 +1,30 @@
+Changes in [1.12.1](https://github.com/element-hq/element-web/releases/tag/v1.12.1) (2025-10-07)
+================================================================================================
+## ✨ Features
+
+* New Room List: Change the order of filters to match those on mobile ([#30905](https://github.com/element-hq/element-web/pull/30905)). Contributed by @langleyd.
+* New Room List: Don't clear filters on space change ([#30903](https://github.com/element-hq/element-web/pull/30903)). Contributed by @langleyd.
+* Add release announcement for the sounds ([#30900](https://github.com/element-hq/element-web/pull/30900)). Contributed by @langleyd.
+* Rich Text Editor: Add emoji suggestion support ([#30873](https://github.com/element-hq/element-web/pull/30873)). Contributed by @langleyd.
+* feat: Disable session lock when running in element-desktop ([#30643](https://github.com/element-hq/element-web/pull/30643)). Contributed by @kaylendog.
+* Improve invite dialog ui - Part 1 ([#30764](https://github.com/element-hq/element-web/pull/30764)). Contributed by @florianduros.
+* Update Message Sound for Element ([#30804](https://github.com/element-hq/element-web/pull/30804)). Contributed by @beatdemon.
+* Add new and improved ringtone ([#30761](https://github.com/element-hq/element-web/pull/30761)). Contributed by @Half-Shot.
+* Disable RTE formatting buttons when the content contains a slash command ([#30802](https://github.com/element-hq/element-web/pull/30802)). Contributed by @langleyd.
+
+## 🐛 Bug Fixes
+
+* New Room List: Improve robustness of keyboard navigation ([#30888](https://github.com/element-hq/element-web/pull/30888)). Contributed by @langleyd.
+* Fix a11y issue on list in invite dialog ([#30878](https://github.com/element-hq/element-web/pull/30878)). Contributed by @florianduros.
+* Switch Export and Import Icons to match intuition ([#30805](https://github.com/element-hq/element-web/pull/30805)). Contributed by @micartey.
+* Hide breadcrumb option when new room list is enabled ([#30869](https://github.com/element-hq/element-web/pull/30869)). Contributed by @florianduros.
+* Avoid creating multiple call objects for the same widget ([#30839](https://github.com/element-hq/element-web/pull/30839)). Contributed by @robintown.
+* Add a test for #29882, which is fixed by matrix-org/matrix-js-sdk#5016 ([#30835](https://github.com/element-hq/element-web/pull/30835)). Contributed by @andybalaam.
+* fix: use `help_encryption_url` of config instead of hardcoded `https://element.io/help#encryption5` ([#30746](https://github.com/element-hq/element-web/pull/30746)). Contributed by @florianduros.
+* Fix html export when feature\_jump\_to\_date is enabled ([#30828](https://github.com/element-hq/element-web/pull/30828)). Contributed by @langleyd.
+* Fix #30439: "Forgot recovery key" should go to "reset" ([#30771](https://github.com/element-hq/element-web/pull/30771)). Contributed by @andybalaam.
+
+
 Changes in [1.12.0](https://github.com/element-hq/element-web/releases/tag/v1.12.0) (2025-09-23)
 ================================================================================================
 ## 🦖 Deprecations

Dockerfile

@@ -1,7 +1,7 @@
 # syntax=docker.io/docker/dockerfile:1.18-labs@sha256:79cdc14e1c220efb546ad14a8ebc816e3277cd72d27195ced5bebdd226dd1025
 
 # Builder
-FROM --platform=$BUILDPLATFORM node:22-bullseye@sha256:f8c398a3ad2612293e8827915c056ed0f5cc708b0f676274bb6c732e3c10f93d AS builder
+FROM --platform=$BUILDPLATFORM node:22-bullseye@sha256:5e638ea282ab9f0224949e8cfc7bb4621710e5d21b19fc3cf6e8884fcb5839f0 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:14b127ed799301a21a1798516443c675237120c76b9a738d43c5e4747de4b1c9
+FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:13d1e0acc26b7ce8a40d155473759387e04d1433e73726d4bb49c67bdb197fe5
 
 # Need root user to install packages & manipulate the usr directory
 USER root

jest.config.ts

@@ -41,7 +41,9 @@ const config: Config = {
         "recorderWorkletFactory": "<rootDir>/__mocks__/empty.js",
         "^fetch-mock$": "<rootDir>/node_modules/fetch-mock",
     },
-    transformIgnorePatterns: ["/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error)).+$"],
+    transformIgnorePatterns: [
+        "/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error|react-merge-refs)).+$",
+    ],
     collectCoverageFrom: [
         "<rootDir>/src/**/*.{js,ts,tsx}",
         // getSessionLock is piped into a different JS context via stringification, and the coverage functionality is

knip.ts

@@ -19,6 +19,8 @@ export default {
         "src/hooks/useTimeout.ts",
         "src/components/views/elements/InfoTooltip.tsx",
         "src/components/views/elements/StyledCheckbox.tsx",
+
+        "packages/**/*",
     ],
     ignoreDependencies: [
         // Required for `action-validator`

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.12.0",
+    "version": "1.12.1",
     "description": "Element: the future of secure communication",
     "author": "New Vector Ltd.",
     "repository": {
@@ -29,7 +29,7 @@
         "UserFriendlyError"
     ],
     "scripts": {
-        "i18n": "matrix-gen-i18n && yarn i18n:sort && yarn i18n:lint",
+        "i18n": "matrix-gen-i18n src res packages/shared-components && 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:lint": "matrix-i18n-lint && prettier --log-level=silent --write src/i18n/strings/ --ignore-path /dev/null",
         "i18n:diff": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && yarn i18n && matrix-compare-i18n-files src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
@@ -65,21 +65,16 @@
         "coverage": "yarn test --coverage",
         "analyse:webpack-bundles": "webpack-bundle-analyzer webpack-stats.json webapp",
         "update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js",
-        "postinstall": "patch-package",
-        "storybook": "storybook dev -p 6007",
-        "build-storybook": "storybook build",
-        "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 yarn --with-node-modules && playwright-screenshots --entrypoint /work/node_modules/.bin/test-storybook --with-node-modules --url http://host.docker.internal:6007/ --updateSnapshot"
+        "postinstall": "patch-package"
     },
     "resolutions": {
         "**/pretty-format/react-is": "19.1.1",
         "@playwright/test": "1.54.2",
-        "@types/react": "19.1.13",
+        "@types/react": "19.1.14",
         "@types/react-dom": "19.1.9",
         "oidc-client-ts": "3.3.0",
         "jwt-decode": "4.0.0",
-        "caniuse-lite": "1.0.30001741",
+        "caniuse-lite": "1.0.30001745",
         "testcontainers": "^11.0.0",
         "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
         "wrap-ansi": "npm:wrap-ansi@^7.0.0"
@@ -116,7 +111,7 @@
         "emojibase-regex": "15.3.2",
         "escape-html": "^1.0.3",
         "file-saver": "^2.0.5",
-        "filesize": "11.0.2",
+        "filesize": "11.0.13",
         "github-markdown-css": "^5.5.1",
         "glob-to-regexp": "^0.4.1",
         "highlight.js": "^11.3.1",
@@ -142,7 +137,7 @@
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",
         "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.265.1",
+        "posthog-js": "1.268.6",
         "qrcode": "1.5.4",
         "re-resizable": "6.11.2",
         "react": "^19.0.0",
@@ -150,6 +145,7 @@
         "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-transition-group": "^4.4.1",
         "react-virtuoso": "^4.14.0",
@@ -184,19 +180,13 @@
         "@babel/preset-typescript": "^7.12.7",
         "@babel/runtime": "^7.12.5",
         "@casualbot/jest-sonar-reporter": "2.2.7",
-        "@element-hq/element-call-embedded": "0.15.0",
-        "@element-hq/element-web-playwright-common": "^1.4.6",
+        "@element-hq/element-call-embedded": "0.16.0",
+        "@element-hq/element-web-playwright-common": "^2.0.0",
         "@peculiar/webcrypto": "^1.4.3",
         "@playwright/test": "^1.50.1",
         "@principalstudio/html-webpack-inject-preload": "^1.2.7",
         "@rrweb/types": "^2.0.0-alpha.18",
         "@sentry/webpack-plugin": "^4.0.0",
-        "@storybook/addon-a11y": "^9.0.18",
-        "@storybook/addon-designs": "^10.0.1",
-        "@storybook/addon-docs": "^9.0.12",
-        "@storybook/icons": "^1.4.0",
-        "@storybook/react-vite": "^9.0.15",
-        "@storybook/test-runner": "^0.23.0",
         "@stylistic/eslint-plugin": "^5.0.0",
         "@svgr/webpack": "^8.0.0",
         "@testing-library/dom": "^10.4.0",
@@ -223,7 +213,7 @@
         "@types/node-fetch": "^2.6.2",
         "@types/pako": "^2.0.0",
         "@types/qrcode": "^1.3.5",
-        "@types/react": "19.1.13",
+        "@types/react": "19.1.14",
         "@types/react-beautiful-dnd": "^13.0.0",
         "@types/react-dom": "19.1.9",
         "@types/react-transition-group": "^4.4.0",
@@ -257,7 +247,6 @@
         "eslint-plugin-react": "^7.28.0",
         "eslint-plugin-react-compiler": "^19.0.0-beta-df7b47d-20241124",
         "eslint-plugin-react-hooks": "^5.0.0",
-        "eslint-plugin-storybook": "^9.0.12",
         "eslint-plugin-unicorn": "^56.0.0",
         "express": "^5.0.0",
         "fake-indexeddb": "^6.0.0",
@@ -270,7 +259,6 @@
         "jest": "^29.6.2",
         "jest-canvas-mock": "^2.5.2",
         "jest-environment-jsdom": "^29.7.0",
-        "jest-image-snapshot": "^6.5.1",
         "jest-mock": "^29.6.2",
         "jest-raw-loader": "^1.0.1",
         "jsqr": "^1.4.0",
@@ -299,7 +287,6 @@
         "rimraf": "^6.0.0",
         "semver": "^7.5.2",
         "source-map-loader": "^5.0.0",
-        "storybook": "^9.0.12",
         "stylelint": "^16.23.0",
         "stylelint-config-standard": "^39.0.0",
         "stylelint-scss": "^6.0.0",
@@ -309,8 +296,6 @@
         "ts-node": "^10.9.1",
         "typescript": "5.8.3",
         "util": "^0.12.5",
-        "vite": "^7.0.1",
-        "vite-plugin-node-polyfills": "^0.24.0",
         "web-streams-polyfill": "^4.0.0",
         "webpack": "^5.89.0",
         "webpack-bundle-analyzer": "^4.8.0",

packages/shared-components/.eslintrc.js

@@ -0,0 +1,63 @@
+module.exports = {
+    plugins: ["matrix-org", "eslint-plugin-react-compiler"],
+    extends: [
+        "plugin:matrix-org/babel",
+        "plugin:matrix-org/react",
+        "plugin:matrix-org/a11y",
+        "plugin:storybook/recommended",
+    ],
+    parserOptions: {
+        project: ["./tsconfig.json"],
+    },
+    env: {
+        browser: true,
+        node: true,
+    },
+    rules: {
+        // Bind or arrow functions in props causes performance issues (but we
+        // currently use them in some places).
+        // It's disabled here, but we should using it sparingly.
+        "react/jsx-no-bind": "off",
+        "react/jsx-key": ["error"],
+        "matrix-org/require-copyright-header": "error",
+        "react-compiler/react-compiler": "error",
+    },
+    overrides: [
+        {
+            files: ["src/**/*.{ts,tsx}", "test/**/*.{ts,tsx}"],
+            extends: ["plugin:matrix-org/typescript", "plugin:matrix-org/react"],
+            rules: {
+                "@typescript-eslint/explicit-function-return-type": [
+                    "error",
+                    {
+                        allowExpressions: true,
+                    },
+                ],
+
+                // Remove Babel things manually due to override limitations
+                "@babel/no-invalid-this": ["off"],
+
+                // We're okay being explicit at the moment
+                "@typescript-eslint/no-empty-interface": "off",
+                // We disable this while we're transitioning
+                "@typescript-eslint/no-explicit-any": "off",
+                // We'd rather not do this but we do
+                "@typescript-eslint/ban-ts-comment": "off",
+                // We're okay with assertion errors when we ask for them
+                "@typescript-eslint/no-non-null-assertion": "off",
+                "@typescript-eslint/no-empty-object-type": [
+                    "error",
+                    {
+                        // We do this sometimes to brand interfaces
+                        allowInterfaces: "with-single-extends",
+                    },
+                ],
+            },
+        },
+    ],
+    settings: {
+        react: {
+            version: "detect",
+        },
+    },
+};

packages/shared-components/.prettierignore

@@ -0,0 +1 @@
+dist/

packages/shared-components/.storybook/languageAddon.tsx

@@ -12,7 +12,7 @@ import { GlobeIcon } from "@storybook/icons";
 
 // We can't import `shared/i18n.tsx` directly here.
 // The storybook addon doesn't seem to benefit the vite config of storybook and we can't resolve the alias in i18n.tsx.
-import json from "../webapp/i18n/languages.json";
+import json from "../../../webapp/i18n/languages.json";
 const languages = Object.keys(json).filter((lang) => lang !== "default");
 
 /**

packages/shared-components/.storybook/main.ts

@@ -11,8 +11,8 @@ import { nodePolyfills } from "vite-plugin-node-polyfills";
 import { mergeConfig } from "vite";
 
 const config: StorybookConfig = {
-    stories: ["../src/shared-components/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-    staticDirs: ["../webapp"],
+    stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    staticDirs: ["../../../webapp"],
     addons: ["@storybook/addon-docs", "@storybook/addon-designs", "@storybook/addon-a11y"],
     framework: "@storybook/react-vite",
     core: {
@@ -26,7 +26,7 @@ const config: StorybookConfig = {
             resolve: {
                 alias: {
                     // Alias used by i18n.tsx
-                    $webapp: path.resolve("webapp"),
+                    $webapp: path.resolve("../../webapp"),
                 },
             },
             // Needed for counterpart to work
@@ -36,5 +36,11 @@ const config: StorybookConfig = {
             },
         });
     },
+    refs: {
+        "compound-web": {
+            title: "Compound Web",
+            url: "https://element-hq.github.io/compound-web/",
+        },
+    },
 };
 export default config;

packages/shared-components/.storybook/preview.tsx

@@ -1,9 +1,9 @@
 import type { ArgTypes, Preview, Decorator, ReactRenderer, StrictArgs } from "@storybook/react-vite";
 
-import "../res/css/shared.pcss";
+import "../../../res/css/shared.pcss";
 import "./preview.css";
 import React, { useLayoutEffect } from "react";
-import { setLanguage } from "../src/shared-components/utils/i18n";
+import { setLanguage } from "../src/utils/i18n";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { StoryContext } from "storybook/internal/csf";
 

packages/shared-components/.storybook/test-runner.js

@@ -8,8 +8,8 @@ Please see LICENSE files in the repository root for full details.
 import { waitForPageReady } from "@storybook/test-runner";
 import { toMatchImageSnapshot } from "jest-image-snapshot";
 
-const customSnapshotsDir = `${process.cwd()}/playwright/shared-component-snapshots/`;
-const customReceivedDir = `${process.cwd()}/playwright/shared-component-received/`;
+const customSnapshotsDir = `${process.cwd()}/playwright/snapshots/`;
+const customReceivedDir = `${process.cwd()}/playwright/received/`;
 
 /**
  * @type {import('@storybook/test-runner').TestRunnerConfig}

packages/shared-components/package.json

@@ -0,0 +1,52 @@
+{
+    "name": "element-web-shared-components",
+    "version": "1.12.1",
+    "description": "Shared components for Element",
+    "author": "New Vector Ltd.",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/element-hq/element-web"
+    },
+    "license": "SEE LICENSE IN README.md",
+    "files": [
+        "lib",
+        "src",
+        "LICENSE",
+        "README.md",
+        "package.json"
+    ],
+    "scripts": {
+        "postinstall": "patch-package",
+        "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 yarn --with-node-modules && playwright-screenshots --entrypoint /work/node_modules/.bin/test-storybook --with-node-modules --url http://host.docker.internal:6007/ --updateSnapshot"
+    },
+    "dependencies": {},
+    "devDependencies": {
+        "@storybook/addon-a11y": "^9.1.10",
+        "@storybook/addon-designs": "^10.0.2",
+        "@storybook/addon-docs": "^9.1.10",
+        "@storybook/icons": "^1.6.0",
+        "@storybook/react-vite": "^9.1.10",
+        "@storybook/test-runner": "^0.23.0",
+        "concurrently": "^9.2.1",
+        "eslint": "8",
+        "eslint-plugin-storybook": "^9.1.10",
+        "jest-image-snapshot": "^6.5.1",
+        "patch-package": "^8.0.1",
+        "prettier": "^3.6.2",
+        "storybook": "^9.1.10",
+        "typescript": "^5.9.3",
+        "vite": "^7.1.9",
+        "vite-plugin-node-polyfills": "^0.24.0"
+    },
+    "engines": {
+        "node": ">=20.0.0"
+    },
+    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+}

packages/shared-components/src/@types/global.d.ts

@@ -0,0 +1,8 @@
+/*
+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.
+*/
+
+declare module "*.css";

packages/shared-components/src/hooks/useListKeyboardNavigation.test.ts

@@ -0,0 +1,155 @@
+/*
+ * 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 { type KeyboardEvent } from "react";
+import { renderHook } from "jest-matrix-react";
+
+import { useListKeyboardNavigation } from "./useListKeyboardNavigation";
+
+describe("useListKeyDown", () => {
+    let mockList: HTMLUListElement;
+    let mockItems: HTMLElement[];
+    let mockEvent: Partial<KeyboardEvent<HTMLUListElement>>;
+
+    beforeEach(() => {
+        // Create mock DOM elements
+        mockList = document.createElement("ul");
+        mockItems = [document.createElement("li"), document.createElement("li"), document.createElement("li")];
+
+        // Set up the DOM structure
+        mockItems.forEach((item, index) => {
+            item.setAttribute("tabindex", "0");
+            item.setAttribute("data-testid", `item-${index}`);
+            mockList.appendChild(item);
+        });
+
+        document.body.appendChild(mockList);
+
+        // Mock event object
+        mockEvent = {
+            preventDefault: jest.fn(),
+            key: "",
+        };
+
+        // Mock focus methods
+        mockItems.forEach((item) => {
+            item.focus = jest.fn();
+            item.click = jest.fn();
+        });
+    });
+
+    afterEach(() => {
+        document.body.removeChild(mockList);
+        jest.clearAllMocks();
+    });
+
+    function render(): {
+        current: {
+            listRef: React.RefObject<HTMLUListElement | null>;
+            onKeyDown: React.KeyboardEventHandler<HTMLUListElement>;
+            onFocus: React.FocusEventHandler<HTMLUListElement>;
+        };
+    } {
+        const { result } = renderHook(() => useListKeyboardNavigation());
+        result.current.listRef.current = mockList;
+        return result;
+    }
+
+    it.each([
+        ["Enter", "Enter"],
+        ["Space", " "],
+    ])("should handle %s key to click active element", (name, key) => {
+        const result = render();
+
+        // Mock document.activeElement
+        Object.defineProperty(document, "activeElement", {
+            value: mockItems[1],
+            configurable: true,
+        });
+
+        // Simulate key press
+        result.current.onKeyDown({
+            ...mockEvent,
+            key,
+        } as KeyboardEvent<HTMLUListElement>);
+
+        expect(mockItems[1].click).toHaveBeenCalledTimes(1);
+        expect(mockEvent.preventDefault).toHaveBeenCalledTimes(1);
+    });
+
+    it.each(
+        // key, finalPosition, startPosition
+        [
+            ["ArrowDown", 1, 0],
+            ["ArrowUp", 1, 2],
+            ["Home", 0, 1],
+            ["End", 2, 1],
+        ],
+    )("should handle %s to focus the %inth element", (key, finalPosition, startPosition) => {
+        const result = render();
+        mockList.contains = jest.fn().mockReturnValue(true);
+
+        Object.defineProperty(document, "activeElement", {
+            value: mockItems[startPosition],
+            configurable: true,
+        });
+
+        result.current.onKeyDown({
+            ...mockEvent,
+            key,
+        } as KeyboardEvent<HTMLUListElement>);
+
+        expect(mockItems[finalPosition].focus).toHaveBeenCalledTimes(1);
+        expect(mockEvent.preventDefault).toHaveBeenCalledTimes(1);
+    });
+
+    it.each([["ArrowDown"], ["ArrowUp"]])("should not handle %s when active element is not in list", (key) => {
+        const result = render();
+        mockList.contains = jest.fn().mockReturnValue(false);
+
+        const outsideElement = document.createElement("button");
+
+        Object.defineProperty(document, "activeElement", {
+            value: outsideElement,
+            configurable: true,
+        });
+
+        result.current.onKeyDown({
+            ...mockEvent,
+            key,
+        } as KeyboardEvent<HTMLUListElement>);
+
+        // No item should be focused
+        mockItems.forEach((item) => expect(item.focus).not.toHaveBeenCalled());
+        expect(mockEvent.preventDefault).toHaveBeenCalledTimes(1);
+    });
+
+    it("should not prevent default for unhandled keys", () => {
+        const result = render();
+
+        result.current.onKeyDown({
+            ...mockEvent,
+            key: "Tab",
+        } as KeyboardEvent<HTMLUListElement>);
+
+        expect(mockEvent.preventDefault).not.toHaveBeenCalled();
+    });
+
+    it("should focus the first item if list itself is focused", () => {
+        const result = render();
+        result.current.onFocus({ target: mockList } as React.FocusEvent<HTMLUListElement>);
+        expect(mockItems[0].focus).toHaveBeenCalledTimes(1);
+    });
+
+    it("should focus the selected item if list itself is focused", () => {
+        mockItems[1].setAttribute("aria-selected", "true");
+        const result = render();
+
+        result.current.onFocus({ target: mockList } as React.FocusEvent<HTMLUListElement>);
+        expect(mockItems[1].focus).toHaveBeenCalledTimes(1);
+    });
+});

packages/shared-components/src/hooks/useListKeyboardNavigation.ts

@@ -0,0 +1,92 @@
+/*
+ * 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 {
+    useCallback,
+    useRef,
+    type RefObject,
+    type KeyboardEvent,
+    type KeyboardEventHandler,
+    type FocusEventHandler,
+    type FocusEvent,
+} from "react";
+
+/**
+ * A hook that provides keyboard navigation for a list of options.
+ */
+export function useListKeyboardNavigation(): {
+    listRef: RefObject<HTMLUListElement | null>;
+    onKeyDown: KeyboardEventHandler<HTMLUListElement>;
+    onFocus: FocusEventHandler<HTMLUListElement>;
+} {
+    const listRef = useRef<HTMLUListElement>(null);
+
+    const onFocus = useCallback((evt: FocusEvent<HTMLUListElement>) => {
+        if (!listRef.current) return;
+
+        if (evt.target === listRef.current) {
+            // By default, focus the selected item
+            let selectedChild = listRef.current?.firstElementChild;
+
+            // If there is a selected item, focus that instead
+            for (const child of listRef.current.children) {
+                if (child.getAttribute("aria-selected") === "true") {
+                    selectedChild = child;
+                    break;
+                }
+            }
+
+            (selectedChild as HTMLElement)?.focus();
+        }
+    }, []);
+
+    const onKeyDown = useCallback((evt: KeyboardEvent<HTMLUListElement>) => {
+        const { key } = evt;
+
+        let handled = false;
+
+        switch (key) {
+            case "Enter":
+            case " ": {
+                handled = true;
+                (document.activeElement as HTMLElement).click();
+                break;
+            }
+            case "ArrowDown": {
+                handled = true;
+                const currentFocus = document.activeElement;
+                if (listRef.current?.contains(currentFocus) && currentFocus) {
+                    (currentFocus.nextElementSibling as HTMLElement)?.focus();
+                }
+                break;
+            }
+            case "ArrowUp": {
+                handled = true;
+                const currentFocus = document.activeElement;
+                if (listRef.current?.contains(currentFocus) && currentFocus) {
+                    (currentFocus.previousElementSibling as HTMLElement)?.focus();
+                }
+                break;
+            }
+            case "Home": {
+                handled = true;
+                (listRef.current?.firstElementChild as HTMLElement)?.focus();
+                break;
+            }
+            case "End": {
+                handled = true;
+                (listRef.current?.lastElementChild as HTMLElement)?.focus();
+                break;
+            }
+        }
+
+        if (handled) {
+            evt.preventDefault();
+        }
+    }, []);
+    return { listRef, onKeyDown, onFocus };
+}

packages/shared-components/src/pill-input/Pill/Pill.module.css

@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+
+.pill {
+    background-color: var(--cpd-color-bg-action-primary-rest);
+    padding: var(--cpd-space-1x) var(--cpd-space-1-5x) var(--cpd-space-1x) var(--cpd-space-1x);
+    border-radius: 99px;
+}
+
+.label {
+    color: var(--cpd-color-text-on-solid-primary);
+    font: var(--cpd-font-body-sm-medium);
+}

packages/shared-components/src/pill-input/Pill/Pill.stories.tsx

@@ -0,0 +1,33 @@
+/*
+ * 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 React from "react";
+import { fn } from "storybook/test";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Pill } from "./Pill";
+
+const meta = {
+    title: "PillInput/Pill",
+    component: Pill,
+    tags: ["autodocs"],
+    args: {
+        label: "Pill",
+        children: <div style={{ width: 20, height: 20, borderRadius: "100%", backgroundColor: "#ccc" }} />,
+        onClick: fn(),
+    },
+} satisfies Meta<typeof Pill>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const WithoutCloseButton: Story = {
+    args: {
+        onClick: undefined,
+    },
+};

packages/shared-components/src/pill-input/Pill/Pill.test.tsx

@@ -0,0 +1,26 @@
+/*
+ * 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 { composeStories } from "@storybook/react-vite";
+import { render } from "jest-matrix-react";
+import React from "react";
+
+import * as stories from "./Pill.stories";
+
+const { Default, WithoutCloseButton } = composeStories(stories);
+
+describe("Pill", () => {
+    it("renders the pill", () => {
+        const { container } = render(<Default />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders the pill without close button", () => {
+        const { container } = render(<WithoutCloseButton />);
+        expect(container).toMatchSnapshot();
+    });
+});

packages/shared-components/src/pill-input/Pill/Pill.tsx

@@ -0,0 +1,62 @@
+/*
+ * 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 React, { type MouseEventHandler, type JSX, type PropsWithChildren, type HTMLAttributes, useId } from "react";
+import classNames from "classnames";
+import { IconButton } from "@vector-im/compound-web";
+import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
+
+import { Flex } from "../../utils/Flex";
+import styles from "./Pill.module.css";
+import { _t } from "../../utils/i18n";
+
+export interface PillProps extends Omit<HTMLAttributes<HTMLDivElement>, "onClick"> {
+    /**
+     * The text label to display inside the pill.
+     */
+    label: string;
+    /**
+     * Optional click handler for a close button.
+     * If provided, a close button will be rendered.
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+
+/**
+ * A pill component that can display a label and an optional close button.
+ * The badge can also contain child elements, such as icons or avatars.
+ *
+ * @example
+ * ```tsx
+ * <Pill label="New" onClick={() => console.log("Closed")}>
+ *     <SomeIcon />
+ * </Pill>
+ * ```
+ */
+export function Pill({ className, children, label, onClick, ...props }: PropsWithChildren<PillProps>): JSX.Element {
+    const id = useId();
+
+    return (
+        <Flex
+            display="inline-flex"
+            gap="var(--cpd-space-1-5x)"
+            align="center"
+            className={classNames(styles.pill, className)}
+            {...props}
+        >
+            {children}
+            <span id={id} className={styles.label}>
+                {label}
+            </span>
+            {onClick && (
+                <IconButton aria-describedby={id} size="16px" onClick={onClick} aria-label={_t("action|delete")}>
+                    <CloseIcon color="var(--cpd-color-icon-tertiary)" />
+                </IconButton>
+            )}
+        </Flex>
+    );
+}

packages/shared-components/src/pill-input/Pill/__snapshots__/Pill.test.tsx.snap

@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pill renders the pill 1`] = `
+<div>
+  <div
+    class="flex pill"
+    style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
+  >
+    <div
+      style="width: 20px; height: 20px; border-radius: 100%; background-color: rgb(204, 204, 204);"
+    />
+    <span
+      class="label"
+      id="«r0»"
+    >
+      Pill
+    </span>
+    <button
+      aria-describedby="«r0»"
+      aria-label="Delete"
+      class="_icon-button_1pz9o_8"
+      data-kind="primary"
+      role="button"
+      style="--cpd-icon-button-size: 16px;"
+      tabindex="0"
+    >
+      <div
+        class="_indicator-icon_zr2a0_17"
+        style="--cpd-icon-button-size: 100%;"
+      >
+        <svg
+          color="var(--cpd-color-icon-tertiary)"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+          />
+        </svg>
+      </div>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Pill renders the pill without close button 1`] = `
+<div>
+  <div
+    class="flex pill"
+    style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
+  >
+    <div
+      style="width: 20px; height: 20px; border-radius: 100%; background-color: rgb(204, 204, 204);"
+    />
+    <span
+      class="label"
+      id="«r1»"
+    >
+      Pill
+    </span>
+  </div>
+</div>
+`;

packages/shared-components/src/pill-input/Pill/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export { Pill } from "./Pill";