Update @vector-im/compound-web (#29641)

* chore: update `@vector-im/compound-web`

* test: update snapshots

package.json

@@ -93,7 +93,7 @@
         "@types/png-chunks-extract": "^1.0.2",
         "@types/react-virtualized": "^9.21.30",
         "@vector-im/compound-design-tokens": "^4.0.0",
-        "@vector-im/compound-web": "^7.9.0",
+        "@vector-im/compound-web": "^7.10.0",
         "@vector-im/matrix-wysiwyg": "2.38.2",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",

test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap

@@ -128,13 +128,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
         class="mx_UserInfo_container"
       >
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -146,13 +146,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Send message
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -165,14 +165,14 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
           </svg>
         </button>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26 _disabled_1x5l4_109"
+          class="_item_dyt4i_8 _interactive_dyt4i_26 _disabled_dyt4i_118"
           data-kind="primary"
           disabled=""
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -184,13 +184,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Jump to read receipt
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -203,13 +203,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
           </svg>
         </button>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -221,13 +221,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Share profile
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -244,13 +244,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
         class="mx_UserInfo_container"
       >
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="critical"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -262,13 +262,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Ignore
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -422,13 +422,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
         class="mx_UserInfo_container"
       >
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -440,13 +440,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Send message
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -459,14 +459,14 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
           </svg>
         </button>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26 _disabled_1x5l4_109"
+          class="_item_dyt4i_8 _interactive_dyt4i_26 _disabled_dyt4i_118"
           data-kind="primary"
           disabled=""
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -478,13 +478,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Jump to read receipt
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -497,13 +497,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
           </svg>
         </button>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -515,13 +515,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Share profile
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -538,13 +538,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
         class="mx_UserInfo_container"
       >
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="critical"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -556,13 +556,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Deactivate user
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -579,13 +579,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
         class="mx_UserInfo_container"
       >
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="critical"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -597,13 +597,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Ignore
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"

test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap

@@ -196,7 +196,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   tabindex="-1"
 >
   <button
-    class="_item_1x5l4_8 _interactive_1x5l4_26"
+    class="_item_dyt4i_8 _interactive_dyt4i_26"
     data-kind="primary"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -205,7 +205,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="_icon_1x5l4_34"
+      class="_icon_dyt4i_50"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -217,13 +217,13 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
       />
     </svg>
     <span
-      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
     >
       View in timeline
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_1x5l4_50"
+      class="_nav-hint_dyt4i_59"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
@@ -236,7 +236,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
     </svg>
   </button>
   <button
-    class="_item_1x5l4_8 _interactive_1x5l4_26"
+    class="_item_dyt4i_8 _interactive_dyt4i_26"
     data-kind="primary"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -245,7 +245,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="_icon_1x5l4_34"
+      class="_icon_dyt4i_50"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -262,13 +262,13 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
       />
     </svg>
     <span
-      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
     >
       Unpin
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_1x5l4_50"
+      class="_nav-hint_dyt4i_59"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
@@ -281,7 +281,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
     </svg>
   </button>
   <button
-    class="_item_1x5l4_8 _interactive_1x5l4_26"
+    class="_item_dyt4i_8 _interactive_dyt4i_26"
     data-kind="primary"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -290,7 +290,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="_icon_1x5l4_34"
+      class="_icon_dyt4i_50"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -302,13 +302,13 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
       />
     </svg>
     <span
-      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
     >
       Forward
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_1x5l4_50"
+      class="_nav-hint_dyt4i_59"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
@@ -327,7 +327,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
     role="separator"
   />
   <button
-    class="_item_1x5l4_8 _interactive_1x5l4_26"
+    class="_item_dyt4i_8 _interactive_dyt4i_26"
     data-kind="critical"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -336,7 +336,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="_icon_1x5l4_34"
+      class="_icon_dyt4i_50"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -348,13 +348,13 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
       />
     </svg>
     <span
-      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
     >
       Delete
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_1x5l4_50"
+      class="_nav-hint_dyt4i_59"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
@@ -387,7 +387,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
   tabindex="-1"
 >
   <button
-    class="_item_1x5l4_8 _interactive_1x5l4_26"
+    class="_item_dyt4i_8 _interactive_dyt4i_26"
     data-kind="primary"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -396,7 +396,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
   >
     <svg
       aria-hidden="true"
-      class="_icon_1x5l4_34"
+      class="_icon_dyt4i_50"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -408,13 +408,13 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
       />
     </svg>
     <span
-      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
     >
       View in timeline
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_1x5l4_50"
+      class="_nav-hint_dyt4i_59"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
@@ -427,7 +427,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
     </svg>
   </button>
   <button
-    class="_item_1x5l4_8 _interactive_1x5l4_26"
+    class="_item_dyt4i_8 _interactive_dyt4i_26"
     data-kind="primary"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -436,7 +436,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
   >
     <svg
       aria-hidden="true"
-      class="_icon_1x5l4_34"
+      class="_icon_dyt4i_50"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -448,13 +448,13 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
       />
     </svg>
     <span
-      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
     >
       Forward
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_1x5l4_50"
+      class="_nav-hint_dyt4i_59"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"

test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap

@@ -26,7 +26,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
     class="mx_ThreadsActivityCentre_rows"
   >
     <button
-      class="mx_ThreadsActivityCentreRow _item_1x5l4_8 _interactive_1x5l4_26"
+      class="mx_ThreadsActivityCentreRow _item_dyt4i_8 _interactive_dyt4i_26"
       data-kind="primary"
       data-orientation="vertical"
       data-radix-collection-item=""
@@ -34,7 +34,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
       tabindex="-1"
     >
       <div
-        class="_icon_1x5l4_34"
+        class="_icon_dyt4i_50"
       >
         <span
           class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
@@ -48,13 +48,13 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
         </span>
       </div>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
       >
         This is a real highlight
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_1x5l4_50"
+        class="_nav-hint_dyt4i_59"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -74,7 +74,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
       </div>
     </button>
     <button
-      class="mx_ThreadsActivityCentreRow _item_1x5l4_8 _interactive_1x5l4_26"
+      class="mx_ThreadsActivityCentreRow _item_dyt4i_8 _interactive_dyt4i_26"
       data-kind="primary"
       data-orientation="vertical"
       data-radix-collection-item=""
@@ -82,7 +82,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
       tabindex="-1"
     >
       <div
-        class="_icon_1x5l4_34"
+        class="_icon_dyt4i_50"
       >
         <span
           class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
@@ -96,13 +96,13 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
         </span>
       </div>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
       >
         A notification
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_1x5l4_50"
+        class="_nav-hint_dyt4i_59"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -328,7 +328,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
     class="mx_ThreadsActivityCentre_rows"
   >
     <button
-      class="mx_ThreadsActivityCentreRow _item_1x5l4_8 _interactive_1x5l4_26"
+      class="mx_ThreadsActivityCentreRow _item_dyt4i_8 _interactive_dyt4i_26"
       data-kind="primary"
       data-orientation="vertical"
       data-radix-collection-item=""
@@ -336,7 +336,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       tabindex="-1"
     >
       <div
-        class="_icon_1x5l4_34"
+        class="_icon_dyt4i_50"
       >
         <span
           class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
@@ -350,13 +350,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
         </span>
       </div>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
       >
         This is a third real highlight
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_1x5l4_50"
+        class="_nav-hint_dyt4i_59"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -376,7 +376,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       </div>
     </button>
     <button
-      class="mx_ThreadsActivityCentreRow _item_1x5l4_8 _interactive_1x5l4_26"
+      class="mx_ThreadsActivityCentreRow _item_dyt4i_8 _interactive_dyt4i_26"
       data-kind="primary"
       data-orientation="vertical"
       data-radix-collection-item=""
@@ -384,7 +384,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       tabindex="-1"
     >
       <div
-        class="_icon_1x5l4_34"
+        class="_icon_dyt4i_50"
       >
         <span
           class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
@@ -398,13 +398,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
         </span>
       </div>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
       >
         This is a real highlight
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_1x5l4_50"
+        class="_nav-hint_dyt4i_59"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -424,7 +424,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       </div>
     </button>
     <button
-      class="mx_ThreadsActivityCentreRow _item_1x5l4_8 _interactive_1x5l4_26"
+      class="mx_ThreadsActivityCentreRow _item_dyt4i_8 _interactive_dyt4i_26"
       data-kind="primary"
       data-orientation="vertical"
       data-radix-collection-item=""
@@ -432,7 +432,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       tabindex="-1"
     >
       <div
-        class="_icon_1x5l4_34"
+        class="_icon_dyt4i_50"
       >
         <span
           class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
@@ -446,13 +446,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
         </span>
       </div>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
       >
         This is a second real highlight
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_1x5l4_50"
+        class="_nav-hint_dyt4i_59"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"

yarn.lock

@@ -3662,10 +3662,10 @@
   resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-4.0.1.tgz#5c4ea7ad664d8e6206dc42e41649c80ef060a760"
   integrity sha512-V4AsK1FVFxZ6DmmCoeAi8FyvE7ODMlXPWjqRGotcnVaoGNrDQrVz2ZGV85DCz5ISxB3iynYASe6OXsDVXT1zFA==
 
-"@vector-im/compound-web@^7.9.0":
+"@vector-im/compound-web@^7.10.0":
-  version "7.9.0"
+  version "7.10.0"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-7.9.0.tgz#72eccdd501e54f7b88317ba927bfeca61af72de0"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-7.10.0.tgz#d3913ea8737c56271152a1643f12d5c5be370718"
-  integrity sha512-2rBD+1Mit+kOd7+ZPUxdH7y6V1mi7Fga85cyC2cvUeL/sXBn0Q5HuyJ8whmdgLmgZiI4LkLriCFaeogYipKE+Q==
+  integrity sha512-lqIA/eHum5tekFkNeHmgK9Cm48pl7leWKVvJDy/hJFX2KDHqGvPcIy6E0waqTIsodV8z0GAztj1c/1cYRpdYIA==
   dependencies:
     "@floating-ui/react" "^0.27.0"
     "@radix-ui/react-context-menu" "^2.2.1"
@@ -3685,7 +3685,7 @@
   resolved "https://registry.yarnpkg.com/@vector-im/matrix-wysiwyg/-/matrix-wysiwyg-2.38.2.tgz#3fa19a2a17fd12d955ef1e14fd63aecbcf3b95e8"
   integrity sha512-TUnLPgZ8/zGUccQZxjIP3MVHjqybgV4u0r6kXibs35wlXgomXjwcN5gchl3FpgGkiHbi8g3D2ao0oHaqi2GaIw==
   dependencies:
-    "@vector-im/matrix-wysiwyg-wasm" "link:../../Library/Caches/Yarn/v6/npm-@vector-im-matrix-wysiwyg-2.38.2-3fa19a2a17fd12d955ef1e14fd63aecbcf3b95e8-integrity/node_modules/bindings/wysiwyg-wasm"
+    "@vector-im/matrix-wysiwyg-wasm" "link:../../../../Library/Caches/Yarn/v6/npm-@vector-im-matrix-wysiwyg-2.38.2-3fa19a2a17fd12d955ef1e14fd63aecbcf3b95e8-integrity/node_modules/bindings/wysiwyg-wasm"
 
 "@webassemblyjs/ast@1.14.1", "@webassemblyjs/ast@^1.14.1":
   version "1.14.1"