diff --git a/package.json b/package.json
index 6ab08023e8..9cd0163945 100644
--- a/package.json
+++ b/package.json
@@ -88,7 +88,7 @@
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^8.0.0",
         "@vector-im/compound-design-tokens": "^2.0.1",
-        "@vector-im/compound-web": "^7.4.0",
+        "@vector-im/compound-web": "^7.5.0",
         "@vector-im/matrix-wysiwyg": "2.37.13",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
diff --git a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png
index b2b71375bd..41ffca6c93 100644
Binary files a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png differ
diff --git a/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-added-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-added-linux.png
index 0d18bff1c2..147fcfa057 100644
Binary files a/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-added-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-added-linux.png differ
diff --git a/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-linux.png
index 9cadcde415..5475f9a537 100644
Binary files a/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-linux.png differ
diff --git a/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-removed-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-removed-linux.png
index 1ec17661fe..23b88c022c 100644
Binary files a/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-removed-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-removed-linux.png differ
diff --git a/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-dark-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-dark-linux.png
index 75db794a1a..6378098d7a 100644
Binary files a/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-dark-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-dark-linux.png differ
diff --git a/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-light-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-light-linux.png
index 357790598d..f2269a0532 100644
Binary files a/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-light-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-light-linux.png differ
diff --git a/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-match-system-enabled-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-match-system-enabled-linux.png
index 42f27d10bf..6b41f30acd 100644
Binary files a/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-match-system-enabled-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-match-system-enabled-linux.png differ
diff --git a/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap b/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
index 5fb1e66115..a4496312f3 100644
--- a/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
+++ b/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
@@ -135,8 +135,9 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             style="--mx-box-flex: 1;"
           >
             <a
-              class="_link_1mzip_17"
+              class="_link_ue21z_17"
               data-kind="primary"
+              data-size="medium"
               rel="noreferrer noopener"
             >
               <p
@@ -752,8 +753,9 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             style="--mx-box-flex: 1;"
           >
             <a
-              class="_link_1mzip_17"
+              class="_link_ue21z_17"
               data-kind="primary"
+              data-size="medium"
               rel="noreferrer noopener"
             >
               <p
@@ -1406,8 +1408,9 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             style="--mx-box-flex: 1;"
           >
             <a
-              class="_link_1mzip_17"
+              class="_link_ue21z_17"
               data-kind="primary"
+              data-size="medium"
               rel="noreferrer noopener"
             >
               <p
diff --git a/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap b/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap
index fcf3406620..2aa08adb94 100644
--- a/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap
@@ -19,14 +19,14 @@ exports[`<LayoutSwitcher /> should render 1`] = `
       class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
     >
       <form
-        class="_root_dgy0u_24 mx_LayoutSwitcher_LayoutSelector"
+        class="_root_ssths_24 mx_LayoutSwitcher_LayoutSelector"
       >
         <div
-          class="_field_dgy0u_34 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
+          class="_field_ssths_34 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
         >
           <label
             aria-label="Modern"
-            class="_label_dgy0u_67"
+            class="_label_ssths_67"
             for="radix-:r0:"
           >
             <div
@@ -149,11 +149,11 @@ exports[`<LayoutSwitcher /> should render 1`] = `
           </label>
         </div>
         <div
-          class="_field_dgy0u_34 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
+          class="_field_ssths_34 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
         >
           <label
             aria-label="Message bubbles"
-            class="_label_dgy0u_67"
+            class="_label_ssths_67"
             for="radix-:r9:"
           >
             <div
@@ -275,11 +275,11 @@ exports[`<LayoutSwitcher /> should render 1`] = `
           </label>
         </div>
         <div
-          class="_field_dgy0u_34 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
+          class="_field_ssths_34 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
         >
           <label
             aria-label="IRC (experimental)"
-            class="_label_dgy0u_67"
+            class="_label_ssths_67"
             for="radix-:ri:"
           >
             <div
@@ -402,13 +402,13 @@ exports[`<LayoutSwitcher /> should render 1`] = `
         </div>
       </form>
       <form
-        class="_root_dgy0u_24"
+        class="_root_ssths_24"
       >
         <div
-          class="_inline-field_dgy0u_40"
+          class="_inline-field_ssths_40"
         >
           <div
-            class="_inline-field-control_dgy0u_52"
+            class="_inline-field-control_ssths_52"
           >
             <div
               class="_container_qnvru_18"
@@ -427,16 +427,16 @@ exports[`<LayoutSwitcher /> should render 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_dgy0u_46"
+            class="_inline-field-body_ssths_46"
           >
             <label
-              class="_label_dgy0u_67"
+              class="_label_ssths_67"
               for="radix-:rr:"
             >
               Show compact text and messages
             </label>
             <span
-              class="_message_dgy0u_98 _help-message_dgy0u_104"
+              class="_message_ssths_93 _help-message_ssths_99"
               id="radix-:rs:"
             >
               Modern layout must be selected to use this feature.
diff --git a/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap b/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
index 9f0c1bf4b9..6cfb0c7f29 100644
--- a/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
@@ -19,13 +19,13 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
       class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
     >
       <form
-        class="_root_dgy0u_24"
+        class="_root_ssths_24"
       >
         <div
-          class="_inline-field_dgy0u_40"
+          class="_inline-field_ssths_40"
         >
           <div
-            class="_inline-field-control_dgy0u_52"
+            class="_inline-field-control_ssths_52"
           >
             <div
               class="_container_qnvru_18"
@@ -43,10 +43,10 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_dgy0u_46"
+            class="_inline-field-body_ssths_46"
           >
             <label
-              class="_label_dgy0u_67"
+              class="_label_ssths_67"
               for="radix-:r28:"
             >
               Match system theme
@@ -55,13 +55,13 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
         </div>
       </form>
       <form
-        class="_root_dgy0u_24 mx_ThemeChoicePanel_ThemeSelectors"
+        class="_root_ssths_24 mx_ThemeChoicePanel_ThemeSelectors"
       >
         <div
-          class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
+          class="_inline-field_ssths_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
         >
           <div
-            class="_inline-field-control_dgy0u_52"
+            class="_inline-field-control_ssths_52"
           >
             <div
               class="_container_1vw5h_18"
@@ -81,10 +81,10 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_dgy0u_46"
+            class="_inline-field-body_ssths_46"
           >
             <label
-              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_ssths_67 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-:r29:"
             >
               Light
@@ -92,10 +92,10 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
+          class="_inline-field_ssths_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
         >
           <div
-            class="_inline-field-control_dgy0u_52"
+            class="_inline-field-control_ssths_52"
           >
             <div
               class="_container_1vw5h_18"
@@ -114,10 +114,10 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_dgy0u_46"
+            class="_inline-field-body_ssths_46"
           >
             <label
-              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_ssths_67 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-:r2a:"
             >
               Dark
@@ -125,10 +125,10 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
+          class="_inline-field_ssths_40 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
         >
           <div
-            class="_inline-field-control_dgy0u_52"
+            class="_inline-field-control_ssths_52"
           >
             <div
               class="_container_1vw5h_18"
@@ -147,10 +147,10 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_dgy0u_46"
+            class="_inline-field-body_ssths_46"
           >
             <label
-              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_ssths_67 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-:r2b:"
             >
               High contrast
@@ -158,10 +158,10 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
+          class="_inline-field_ssths_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
         >
           <div
-            class="_inline-field-control_dgy0u_52"
+            class="_inline-field-control_ssths_52"
           >
             <div
               class="_container_1vw5h_18"
@@ -180,10 +180,10 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_dgy0u_46"
+            class="_inline-field-body_ssths_46"
           >
             <label
-              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_ssths_67 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-:r2c:"
             >
               Alice theme
@@ -195,13 +195,13 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
         class="mx_ThemeChoicePanel_CustomTheme"
       >
         <form
-          class="_root_dgy0u_24 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
+          class="_root_ssths_24 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
         >
           <div
-            class="_field_dgy0u_34"
+            class="_field_ssths_34"
           >
             <label
-              class="_label_dgy0u_67"
+              class="_label_ssths_67"
               for="radix-:r2d:"
             >
               Add custom theme
@@ -219,7 +219,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
               />
             </div>
             <span
-              class="_message_dgy0u_98 _help-message_dgy0u_104"
+              class="_message_ssths_93 _help-message_ssths_99"
               id="radix-:r2e:"
             >
               Enter the URL of a custom theme you want to apply.
@@ -296,13 +296,13 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
       class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
     >
       <form
-        class="_root_dgy0u_24"
+        class="_root_ssths_24"
       >
         <div
-          class="_inline-field_dgy0u_40"
+          class="_inline-field_ssths_40"
         >
           <div
-            class="_inline-field-control_dgy0u_52"
+            class="_inline-field-control_ssths_52"
           >
             <div
               class="_container_qnvru_18"
@@ -320,10 +320,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             </div>
           </div>
           <div
-            class="_inline-field-body_dgy0u_46"
+            class="_inline-field-body_ssths_46"
           >
             <label
-              class="_label_dgy0u_67"
+              class="_label_ssths_67"
               for="radix-:r10:"
             >
               Match system theme
@@ -332,13 +332,13 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
         </div>
       </form>
       <form
-        class="_root_dgy0u_24 mx_ThemeChoicePanel_ThemeSelectors"
+        class="_root_ssths_24 mx_ThemeChoicePanel_ThemeSelectors"
       >
         <div
-          class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
+          class="_inline-field_ssths_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
         >
           <div
-            class="_inline-field-control_dgy0u_52"
+            class="_inline-field-control_ssths_52"
           >
             <div
               class="_container_1vw5h_18"
@@ -358,10 +358,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             </div>
           </div>
           <div
-            class="_inline-field-body_dgy0u_46"
+            class="_inline-field-body_ssths_46"
           >
             <label
-              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_ssths_67 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-:r11:"
             >
               Light
@@ -369,10 +369,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
           </div>
         </div>
         <div
-          class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
+          class="_inline-field_ssths_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
         >
           <div
-            class="_inline-field-control_dgy0u_52"
+            class="_inline-field-control_ssths_52"
           >
             <div
               class="_container_1vw5h_18"
@@ -391,10 +391,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             </div>
           </div>
           <div
-            class="_inline-field-body_dgy0u_46"
+            class="_inline-field-body_ssths_46"
           >
             <label
-              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_ssths_67 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-:r12:"
             >
               Dark
@@ -402,10 +402,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
           </div>
         </div>
         <div
-          class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
+          class="_inline-field_ssths_40 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
         >
           <div
-            class="_inline-field-control_dgy0u_52"
+            class="_inline-field-control_ssths_52"
           >
             <div
               class="_container_1vw5h_18"
@@ -424,10 +424,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             </div>
           </div>
           <div
-            class="_inline-field-body_dgy0u_46"
+            class="_inline-field-body_ssths_46"
           >
             <label
-              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_ssths_67 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-:r13:"
             >
               High contrast
@@ -435,10 +435,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
           </div>
         </div>
         <div
-          class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
+          class="_inline-field_ssths_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
         >
           <div
-            class="_inline-field-control_dgy0u_52"
+            class="_inline-field-control_ssths_52"
           >
             <div
               class="_container_1vw5h_18"
@@ -457,10 +457,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             </div>
           </div>
           <div
-            class="_inline-field-body_dgy0u_46"
+            class="_inline-field-body_ssths_46"
           >
             <label
-              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_ssths_67 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-:r14:"
             >
               Alice theme
@@ -472,13 +472,13 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
         class="mx_ThemeChoicePanel_CustomTheme"
       >
         <form
-          class="_root_dgy0u_24 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
+          class="_root_ssths_24 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
         >
           <div
-            class="_field_dgy0u_34"
+            class="_field_ssths_34"
           >
             <label
-              class="_label_dgy0u_67"
+              class="_label_ssths_67"
               for="radix-:r15:"
             >
               Add custom theme
@@ -496,7 +496,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
               />
             </div>
             <span
-              class="_message_dgy0u_98 _help-message_dgy0u_104"
+              class="_message_ssths_93 _help-message_ssths_99"
               id="radix-:r16:"
             >
               Enter the URL of a custom theme you want to apply.
@@ -573,13 +573,13 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
       class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
     >
       <form
-        class="_root_dgy0u_24"
+        class="_root_ssths_24"
       >
         <div
-          class="_inline-field_dgy0u_40"
+          class="_inline-field_ssths_40"
         >
           <div
-            class="_inline-field-control_dgy0u_52"
+            class="_inline-field-control_ssths_52"
           >
             <div
               class="_container_qnvru_18"
@@ -597,10 +597,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_dgy0u_46"
+            class="_inline-field-body_ssths_46"
           >
             <label
-              class="_label_dgy0u_67"
+              class="_label_ssths_67"
               for="radix-:r0:"
             >
               Match system theme
@@ -609,13 +609,13 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
         </div>
       </form>
       <form
-        class="_root_dgy0u_24 mx_ThemeChoicePanel_ThemeSelectors"
+        class="_root_ssths_24 mx_ThemeChoicePanel_ThemeSelectors"
       >
         <div
-          class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
+          class="_inline-field_ssths_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
         >
           <div
-            class="_inline-field-control_dgy0u_52"
+            class="_inline-field-control_ssths_52"
           >
             <div
               class="_container_1vw5h_18"
@@ -635,10 +635,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_dgy0u_46"
+            class="_inline-field-body_ssths_46"
           >
             <label
-              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_ssths_67 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-:r1:"
             >
               Light
@@ -646,10 +646,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
+          class="_inline-field_ssths_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
         >
           <div
-            class="_inline-field-control_dgy0u_52"
+            class="_inline-field-control_ssths_52"
           >
             <div
               class="_container_1vw5h_18"
@@ -668,10 +668,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_dgy0u_46"
+            class="_inline-field-body_ssths_46"
           >
             <label
-              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_ssths_67 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-:r2:"
             >
               Dark
@@ -679,10 +679,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
+          class="_inline-field_ssths_40 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
         >
           <div
-            class="_inline-field-control_dgy0u_52"
+            class="_inline-field-control_ssths_52"
           >
             <div
               class="_container_1vw5h_18"
@@ -701,10 +701,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_dgy0u_46"
+            class="_inline-field-body_ssths_46"
           >
             <label
-              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_ssths_67 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-:r3:"
             >
               High contrast
diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
index 0a31efb7ef..0f0e193088 100644
--- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
@@ -32,13 +32,13 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
               class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
             >
               <form
-                class="_root_dgy0u_24 mx_ThemeChoicePanel_ThemeSelectors"
+                class="_root_ssths_24 mx_ThemeChoicePanel_ThemeSelectors"
               >
                 <div
-                  class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light"
+                  class="_inline-field_ssths_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light"
                 >
                   <div
-                    class="_inline-field-control_dgy0u_52"
+                    class="_inline-field-control_ssths_52"
                   >
                     <div
                       class="_container_1vw5h_18"
@@ -58,10 +58,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_dgy0u_46"
+                    class="_inline-field-body_ssths_46"
                   >
                     <label
-                      class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
+                      class="_label_ssths_67 mx_ThemeChoicePanel_themeSelector_Label"
                       for="radix-:r0:"
                     >
                       Light
@@ -69,10 +69,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-dark"
+                  class="_inline-field_ssths_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-dark"
                 >
                   <div
-                    class="_inline-field-control_dgy0u_52"
+                    class="_inline-field-control_ssths_52"
                   >
                     <div
                       class="_container_1vw5h_18"
@@ -92,10 +92,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_dgy0u_46"
+                    class="_inline-field-body_ssths_46"
                   >
                     <label
-                      class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
+                      class="_label_ssths_67 mx_ThemeChoicePanel_themeSelector_Label"
                       for="radix-:r1:"
                     >
                       Dark
@@ -103,10 +103,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light"
+                  class="_inline-field_ssths_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light"
                 >
                   <div
-                    class="_inline-field-control_dgy0u_52"
+                    class="_inline-field-control_ssths_52"
                   >
                     <div
                       class="_container_1vw5h_18"
@@ -126,10 +126,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_dgy0u_46"
+                    class="_inline-field-body_ssths_46"
                   >
                     <label
-                      class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
+                      class="_label_ssths_67 mx_ThemeChoicePanel_themeSelector_Label"
                       for="radix-:r2:"
                     >
                       High contrast
@@ -162,14 +162,14 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
               class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
             >
               <form
-                class="_root_dgy0u_24 mx_LayoutSwitcher_LayoutSelector"
+                class="_root_ssths_24 mx_LayoutSwitcher_LayoutSelector"
               >
                 <div
-                  class="_field_dgy0u_34 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
+                  class="_field_ssths_34 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
                 >
                   <label
                     aria-label="Modern"
-                    class="_label_dgy0u_67"
+                    class="_label_ssths_67"
                     for="radix-:r3:"
                   >
                     <div
@@ -292,11 +292,11 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                   </label>
                 </div>
                 <div
-                  class="_field_dgy0u_34 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
+                  class="_field_ssths_34 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
                 >
                   <label
                     aria-label="Message bubbles"
-                    class="_label_dgy0u_67"
+                    class="_label_ssths_67"
                     for="radix-:rc:"
                   >
                     <div
@@ -418,11 +418,11 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                   </label>
                 </div>
                 <div
-                  class="_field_dgy0u_34 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
+                  class="_field_ssths_34 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
                 >
                   <label
                     aria-label="IRC (experimental)"
-                    class="_label_dgy0u_67"
+                    class="_label_ssths_67"
                     for="radix-:rl:"
                   >
                     <div
@@ -545,13 +545,13 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                 </div>
               </form>
               <form
-                class="_root_dgy0u_24"
+                class="_root_ssths_24"
               >
                 <div
-                  class="_inline-field_dgy0u_40"
+                  class="_inline-field_ssths_40"
                 >
                   <div
-                    class="_inline-field-control_dgy0u_52"
+                    class="_inline-field-control_ssths_52"
                   >
                     <div
                       class="_container_qnvru_18"
@@ -570,16 +570,16 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_dgy0u_46"
+                    class="_inline-field-body_ssths_46"
                   >
                     <label
-                      class="_label_dgy0u_67"
+                      class="_label_ssths_67"
                       for="radix-:ru:"
                     >
                       Show compact text and messages
                     </label>
                     <span
-                      class="_message_dgy0u_98 _help-message_dgy0u_104"
+                      class="_message_ssths_93 _help-message_ssths_99"
                       id="radix-:rv:"
                     >
                       Modern layout must be selected to use this feature.
diff --git a/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap b/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
index bfb888af28..6aee8d43c4 100644
--- a/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
+++ b/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
@@ -8,6 +8,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
   >
     <div
       class="mx_UserMenu"
+      data-floating-ui-inert=""
     >
       <div
         aria-expanded="false"
@@ -42,6 +43,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
     <ul
       aria-label="Spaces"
       class="mx_AutoHideScrollbar mx_SpaceTreeLevel"
+      data-floating-ui-inert=""
       data-rbd-droppable-context-id="0"
       data-rbd-droppable-id="top-level-spaces"
       role="tree"
@@ -236,6 +238,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
         aria-label="Threads"
         aria-labelledby=":r14:"
         class="_icon-button_bh2qc_17 mx_ThreadsActivityCentreButton"
+        data-floating-ui-inert=""
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"
@@ -260,6 +263,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
       </button>
       <span
         aria-hidden="true"
+        data-floating-ui-inert=""
         style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
         tabindex="-1"
       />
@@ -272,6 +276,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
       />
       <span
         aria-owns=":r19:"
+        data-floating-ui-inert=""
         style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
       />
       <span
@@ -286,6 +291,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
       aria-expanded="false"
       aria-label="Quick settings"
       class="mx_AccessibleButton mx_QuickSettingsButton"
+      data-floating-ui-inert=""
       role="button"
       tabindex="0"
     />
diff --git a/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap b/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
index 05e7eabf99..b383932993 100644
--- a/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
+++ b/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
@@ -477,9 +477,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
 
 exports[`ThreadsActivityCentre should render the release announcement 1`] = `
 <body>
-  <div
-    data-floating-ui-inert=""
-  >
+  <div>
     <div
       class="mx_ThreadsActivityCentre_container"
     >
@@ -491,6 +489,7 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
         aria-label="Threads"
         aria-labelledby=":rc:"
         class="_icon-button_bh2qc_17 mx_ThreadsActivityCentreButton"
+        data-floating-ui-inert=""
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"
@@ -515,6 +514,7 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
       </button>
       <span
         aria-hidden="true"
+        data-floating-ui-inert=""
         style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
         tabindex="-1"
       />
@@ -527,6 +527,7 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
       />
       <span
         aria-owns=":rh:"
+        data-floating-ui-inert=""
         style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
       />
       <span
@@ -585,7 +586,6 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
   >
     <span
       data-floating-ui-focus-guard=""
-      data-floating-ui-inert=""
       data-type="inside"
       role="button"
       style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
@@ -648,7 +648,6 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
     </div>
     <span
       data-floating-ui-focus-guard=""
-      data-floating-ui-inert=""
       data-type="inside"
       role="button"
       style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
diff --git a/yarn.lock b/yarn.lock
index c5ea5cdf7b..027644fbb9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1584,10 +1584,10 @@
   dependencies:
     "@floating-ui/dom" "^1.0.0"
 
-"@floating-ui/react@^0.26.24":
-  version "0.26.25"
-  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.25.tgz#cf4c8a2b89fab1a71712d15e6551df3bfbd2ea1d"
-  integrity sha512-hZOmgN0NTOzOuZxI1oIrDu3Gcl8WViIkvPMpB4xdd4QD6xAMtwgwr3VPoiyH/bLtRcS1cDnhxLSD1NsMJmwh/A==
+"@floating-ui/react@^0.27.0":
+  version "0.27.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.27.0.tgz#e0931fd09374ab4b8ce1a1af5cb44d1ccd1bb95a"
+  integrity sha512-WLEksq7fJapXSJbmfiyq9pAW0a7ZFMEJToFE4oTDESxGjoa+nZu3YMjmZE2KvoUtQhqOK2yMMfWQFZyeWD0wGQ==
   dependencies:
     "@floating-ui/react-dom" "^2.1.2"
     "@floating-ui/utils" "^0.2.8"
@@ -3401,12 +3401,12 @@
   resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-2.1.1.tgz#d6175a99fe4b97688464126f255386990f3048d6"
   integrity sha512-QnUi2K14D9KTXxcLQKUU3V75cforZLMwhaaJDNftT8F5mG86950hAM+qhgDNEpEU+pkTffQj0/g/5859YmqWzQ==
 
-"@vector-im/compound-web@^7.4.0":
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-7.4.0.tgz#a5af8af6346f8ff6c14c70f5d4eb2eab7357a7cc"
-  integrity sha512-ZRBUeEGNmj/fTkIRa8zGnyVN7ytowpfOtHChqNm+m/+OTJN3o/lOMuQHDV8jeSEW2YwPJqGvPuG/dRr89IcQkA==
+"@vector-im/compound-web@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-7.5.0.tgz#1547af5f0ee27b94f79ab11eee006059f3d09707"
+  integrity sha512-Xhef8H5WrRmPuanzRBs8rnl+hwbcQnC7nKSCupUczAQ5hjlieBx4vcQYQ/nMkrs4rMGjgfFtR3E18wT5LlML/A==
   dependencies:
-    "@floating-ui/react" "^0.26.24"
+    "@floating-ui/react" "^0.27.0"
     "@radix-ui/react-context-menu" "^2.2.1"
     "@radix-ui/react-dropdown-menu" "^2.1.1"
     "@radix-ui/react-form" "^0.1.0"