merge: upstream v0.25.0 into lotus

Merge upstream element-hq/element-call tag v0.25.0 into the Lotus fork
(previous base: v0.20.1; actual merge-base v0.20.1-rc.1). Every Lotus
feature and all six io.lotus.* widget actions are preserved. Version
bumped to 0.25.0-lotus.1.

Conflict files and how each Lotus hunk was re-expressed:

* src/state/CallViewModel/remoteMembers/ConnectionFactory.ts
  Upstream moved echoCancellation/noiseSuppression/autoGainControl from
  constructor params (fed by URL params) to persisted Settings
  (settings.ts) with a developer-settings UI. The cinny host still drives
  these per call via URL params (noiseSuppression=false /
  autoGainControl=false when the in-source ML denoiser is active, so the
  model gets a raw mic) - taking upstream verbatim would silently break
  the ML denoise tier. Re-wired as AND semantics in generateRoomOption():
  a constraint is enabled only if BOTH the Setting and the URL param
  allow it. Params default to true, so with no params this is
  byte-for-byte upstream behaviour. Upstream's own echoCancellation /
  noiseSuppression URL params (still parsed but dead in v0.25.0) work
  again as a side effect. Lotus autoGainControl URL param kept in
  UrlParams.ts (auto-merged, unchanged).

* src/state/CallViewModel/remoteMembers/ECConnectionFactory.test.ts
  Took upstream (tests now drive via Settings). The lost Lotus coverage
  is restored in a NEW colocated file src/lotus/lotusAudioConstraints.test.ts
  (3 tests) so the upstream test file stays pristine. Verified the new
  test fails against pure-upstream ConnectionFactory and passes with the
  re-wiring.

* src/state/CallViewModel/CallViewModel.ts
  Three small hunks: kept both the Lotus `userMedia$` interface member
  and upstream's new `keyRotationSuppressed$`; dropped the three Lotus
  audio constructor args (mechanism removed upstream, see above); kept
  both in the returned object. The [lotus #4] overrideSpotlight$ routing,
  manualSpotlightUserId$ and setManualSpotlight auto-merged; verified
  against upstream's changed ringingMedia$ (now single-or-null instead
  of array) - the merge correctly took upstream's outer branch and the
  inner screenShares$/spotlightSpeaker$ logic that lotusSpotlight.ts
  mirrors is unchanged upstream.

* src/index.css
  Kept both: Lotus lotus-transparent / lotus-theme blocks and upstream's
  new body[data-background="gradient"]::before full-viewport gradient.
  The naive merge swallowed the closing brace of body.lotus-theme -
  restored. Added a rule hiding the new gradient pseudo-element under
  body.lotus-transparent, since it would otherwise paint over the
  transparent body and hide the host wallpaper.

* src/components/CallFooterViewModel.tsx, src/components/CallFooter.stories.tsx
  No Lotus content - pure upstream-vs-upstream conflicts caused by the
  merge base being v0.20.1-rc.1. Took upstream (layoutMode ->
  layoutSwitchVm; setLayoutMode removed). No Lotus code uses
  setGridMode/layoutMode.

Non-conflicting but reviewed:

* src/widget.ts auto-merged cleanly. Upstream's removal of .well-known
  transport advertisement and the new RTC-transport capability request
  did not touch the action registration loop the LOTUS_TO_WIDGET_ACTIONS
  spread and widget.lazyActions ride on - nothing to re-wire.
* src/room/InCallView.tsx, src/useAudioContext.tsx, src/useTheme.ts,
  src/tile/MediaView.tsx(+.module.css), src/UrlParams.ts(+test),
  all *.module.css and .gitea/workflows/ci.yml auto-merged; each diff
  against v0.25.0 was checked to equal the original Lotus hunk.
* src/button/Button.module.css: the merge appended an exact duplicate
  of upstream's `.rotate`/`@keyframes spin` block (rc.1 merge-base
  artefact) - reset to upstream verbatim.
* src/grid/OneOnOnePortraitLayout.module.css was renamed upstream to
  OneOnOneMobileLayout.module.css; git followed the rename and the Lotus
  safe-area PiP inset fix applies there (the --content-inset-* vars it
  uses still exist upstream).

Tooling changes inherited from upstream that affect the fork:

* eslint + prettier were replaced by oxlint + oxfmt (`pnpm lint:oxlint`,
  `pnpm format:check`). oxlint flagged 10 issues, all in src/lotus/*:
  8x no-meaningless-void-operator (dropped the `void` before void-typed
  widget transport.reply / callbacks - no behaviour change), 1x
  consistent-type-imports (lotusWidget.ts: `import type`), and 2x
  unicorn/no-useless-spread in lotusAudioInject.ts which are FALSE
  POSITIVES - `[...activeClips]` is a required defensive copy because
  abort() deletes from the Set during iteration; suppressed with an
  explanatory eslint-disable-next-line. oxfmt reformatted 7 Lotus
  touched files (whitespace only).
* packageManager bumped by upstream to pnpm@11.21.0, which requires
  Node >= 22.13 (uses node:sqlite). Node 20 cannot run it; pnpm 10.33
  cannot read the new lockfile either (matrix-js-sdk is now a git
  dependency on develop, using a version-union pnpm 10 rejects). Fork CI
  already uses Node 24 (.node-version), so CI is unaffected.
* matrix-js-sdk is now github:matrix-org/matrix-js-sdk#develop (pinned
  by commit in pnpm-lock.yaml).

Lotus behaviour NOT preserved: none found.

Verification (Node 24.11.1, pnpm 11.21.0): pnpm install --frozen-lockfile
OK (lockfile taken from upstream unchanged, no regeneration needed);
tsc clean; oxlint clean; oxfmt --check clean; knip exit 0 (2 config
hints in upstream knip.ts only); vitest unit 84 files / 627 passed /
9 skipped; build:embedded OK, staged to embedded/web/dist (44M), all
six io.lotus.* action strings present in the bundle.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA

src/tabs/Tabs.test.tsx

@@ -0,0 +1,124 @@
+/*
+Copyright 2026 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { expect, it, vi } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { type Tab, TabContainer } from "./Tabs";
+
+function renderTabs<K extends string>(tabs: Tab<K>[], tab: K): void {
+  render(
+    <TabContainer
+      label="Settings"
+      tab={tab}
+      onTabChange={vi.fn()}
+      tabs={tabs}
+    />,
+  );
+}
+
+function expectTabPositions(expectedNames: string[]): void {
+  const tabs = within(
+    screen.getByRole("tablist", { name: "Settings" }),
+  ).getAllByRole("tab");
+
+  expect(tabs).toHaveLength(expectedNames.length);
+  tabs.forEach((tab, index) => {
+    expect(tab).toHaveTextContent(expectedNames[index]);
+    expect(tab).toHaveAttribute(
+      "aria-setsize",
+      expectedNames.length.toString(),
+    );
+    expect(tab).toHaveAttribute("aria-posinset", (index + 1).toString());
+  });
+}
+
+it("sets tab collection size and positions for two tabs", () => {
+  renderTabs(
+    [
+      { key: "audio", name: "Audio", content: "Audio panel" },
+      { key: "video", name: "Video", content: "Video panel" },
+    ],
+    "audio",
+  );
+
+  expectTabPositions(["Audio", "Video"]);
+});
+
+it("sets tab collection size and positions for four tabs", () => {
+  renderTabs(
+    [
+      { key: "audio", name: "Audio", content: "Audio panel" },
+      { key: "video", name: "Video", content: "Video panel" },
+      { key: "profile", name: "Profile", content: "Profile panel" },
+      {
+        key: "preferences",
+        name: "Preferences",
+        content: "Preferences panel",
+      },
+    ],
+    "profile",
+  );
+
+  expectTabPositions(["Audio", "Video", "Profile", "Preferences"]);
+});
+
+it("fires tab changes and keeps the active tab selected", async () => {
+  const user = userEvent.setup();
+  const onTabChange = vi.fn();
+  const tabs = [
+    { key: "audio", name: "Audio", content: "Audio panel" },
+    { key: "video", name: "Video", content: "Video panel" },
+  ] satisfies Tab<string>[];
+
+  const { rerender } = render(
+    <TabContainer
+      label="Settings"
+      tab="audio"
+      onTabChange={onTabChange}
+      tabs={tabs}
+    />,
+  );
+
+  expect(screen.getByRole("tab", { name: "Audio" })).toHaveAttribute(
+    "aria-selected",
+    "true",
+  );
+
+  await user.click(screen.getByRole("tab", { name: "Video" }));
+  expect(onTabChange).toHaveBeenCalledWith("video");
+
+  rerender(
+    <TabContainer
+      label="Settings"
+      tab="video"
+      onTabChange={onTabChange}
+      tabs={tabs}
+    />,
+  );
+
+  expect(screen.getByRole("tab", { name: "Video" })).toHaveAttribute(
+    "aria-selected",
+    "true",
+  );
+});
+
+it("only shows the selected tab panel", () => {
+  renderTabs(
+    [
+      { key: "audio", name: "Audio", content: "Audio panel" },
+      { key: "video", name: "Video", content: "Video panel" },
+      { key: "profile", name: "Profile", content: "Profile panel" },
+    ],
+    "video",
+  );
+
+  expect(screen.getByText("Audio panel")).not.toBeVisible();
+  expect(screen.getByText("Video panel")).toBeVisible();
+  expect(screen.getByText("Profile panel")).not.toBeVisible();
+});

src/tabs/Tabs.tsx

@@ -34,10 +34,12 @@ export function TabContainer<K extends Key>({
   return (
     <div className={styles.tabContainer}>
       <NavBar role="tablist" aria-label={label} className={styles.tabList}>
-        {tabs.map(({ key, name }) => (
+        {tabs.map(({ key, name }, index) => (
           <NavItem
             key={key}
             aria-controls={`${idPrefix}[${key}]`}
+            aria-posinset={index + 1}
+            aria-setsize={tabs.length}
             onClick={() => onTabChange(key)}
             active={key === tab}
           >