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

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

* feat: use new EditInPlace

* e2e: update snapshots

package.json

@@ -79,7 +79,7 @@
         "@sentry/browser": "^8.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^1.2.0",
-        "@vector-im/compound-web": "^4.9.0",
+        "@vector-im/compound-web": "^5.1.2",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",

res/css/views/settings/_UserProfileSettings.pcss

@@ -35,6 +35,7 @@ limitations under the License.
 
     .mx_UserProfileSettings_profile_controls_userId {
         width: 100%;
+        margin-top: var(--cpd-space-4x);
         .mx_CopyableText {
             margin-top: var(--cpd-space-1x);
             width: 100%;

src/components/views/settings/ThemeChoicePanel.tsx

@@ -23,6 +23,8 @@ import {
     RadioControl,
     EditInPlace,
     IconButton,
+    ErrorMessage,
+    HelpMessage,
 } from "@vector-im/compound-web";
 import { Icon as DeleteIcon } from "@vector-im/compound-design-tokens/icons/delete.svg";
 import classNames from "classnames";
@@ -231,10 +233,9 @@ function CustomTheme({ theme }: CustomThemeProps): JSX.Element {
             <EditInPlace
                 className="mx_ThemeChoicePanel_CustomTheme_EditInPlace"
                 label={_t("settings|appearance|custom_theme_add")}
+                cancelButtonLabel={_t("action|cancel")}
                 saveButtonLabel={_t("settings|appearance|custom_theme_add")}
                 savingLabel={_t("settings|appearance|custom_theme_downloading")}
-                helpLabel={_t("settings|appearance|custom_theme_help")}
-                error={error}
                 value={customTheme}
                 onChange={(e: ChangeEvent<HTMLInputElement>) => {
                     setError(undefined);
@@ -281,7 +282,10 @@ function CustomTheme({ theme }: CustomThemeProps): JSX.Element {
                     await SettingsStore.setValue("custom_themes", null, SettingLevel.ACCOUNT, currentThemes);
                 }}
                 onCancel={clear}
-            />
+            >
+                <HelpMessage>{_t("settings|appearance|custom_theme_help")}</HelpMessage>
+                {error && <ErrorMessage>{error}</ErrorMessage>}
+            </EditInPlace>
             <CustomThemeList theme={theme} />
         </div>
     );

src/components/views/settings/UserProfileSettings.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React, { ChangeEvent, useCallback, useEffect, useMemo, useState } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
-import { EditInPlace, Alert } from "@vector-im/compound-web";
+import { EditInPlace, Alert, ErrorMessage } from "@vector-im/compound-web";
 
 import { _t } from "../../../languageHandler";
 import { OwnProfileStore } from "../../../stores/OwnProfileStore";
@@ -68,7 +68,6 @@ interface UserProfileSettingsProps {
 const UserProfileSettings: React.FC<UserProfileSettingsProps> = ({ canSetDisplayName, canSetAvatar }) => {
     const [avatarURL, setAvatarURL] = useState(OwnProfileStore.instance.avatarMxc);
     const [displayName, setDisplayName] = useState(OwnProfileStore.instance.displayName ?? "");
-    const [initialDisplayName, setInitialDisplayName] = useState(OwnProfileStore.instance.displayName ?? "");
     const [avatarError, setAvatarError] = useState<boolean>(false);
     const [maxUploadSize, setMaxUploadSize] = useState<number | undefined>();
     const [displayNameError, setDisplayNameError] = useState<boolean>(false);
@@ -135,7 +134,6 @@ const UserProfileSettings: React.FC<UserProfileSettingsProps> = ({ canSetDisplay
         try {
             setDisplayNameError(false);
             await client.setDisplayName(displayName);
-            setInitialDisplayName(displayName);
         } catch (e) {
             setDisplayNameError(true);
             throw e;
@@ -174,7 +172,6 @@ const UserProfileSettings: React.FC<UserProfileSettingsProps> = ({ canSetDisplay
                     className="mx_UserProfileSettings_profile_displayName"
                     label={_t("settings|general|display_name")}
                     value={displayName}
-                    disableSaveButton={displayName === initialDisplayName}
                     saveButtonLabel={_t("common|save")}
                     cancelButtonLabel={_t("common|cancel")}
                     savedLabel={_t("common|saved")}
@@ -182,9 +179,10 @@ const UserProfileSettings: React.FC<UserProfileSettingsProps> = ({ canSetDisplay
                     onChange={onDisplayNameChanged}
                     onCancel={onDisplayNameCancel}
                     onSave={onDisplayNameSave}
-                    error={displayNameError ? _t("settings|general|display_name_error") : undefined}
                     disabled={!canSetDisplayName}
-                />
+                >
+                    {displayNameError && <ErrorMessage>{_t("settings|general|display_name_error")}</ErrorMessage>}
+                </EditInPlace>
             </div>
             {avatarError && (
                 <Alert title={_t("settings|general|avatar_upload_error_title")} type="critical">

test/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap

@@ -19,20 +19,20 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
       class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
     >
       <form
-        class="_root_148br_24"
+        class="_root_dgy0u_24"
       >
         <div
-          class="_inline-field_148br_40"
+          class="_inline-field_dgy0u_40"
         >
           <div
-            class="_inline-field-control_148br_52"
+            class="_inline-field-control_dgy0u_52"
           >
             <div
               class="_container_qnvru_18"
             >
               <input
                 class="_input_qnvru_32"
-                id="radix-42"
+                id="radix-48"
                 name="systemTheme"
                 title=""
                 type="checkbox"
@@ -43,11 +43,11 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_148br_46"
+            class="_inline-field-body_dgy0u_46"
           >
             <label
-              class="_label_148br_67"
-              for="radix-42"
+              class="_label_dgy0u_67"
+              for="radix-48"
             >
               Match system theme
             </label>
@@ -55,13 +55,13 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
         </div>
       </form>
       <form
-        class="_root_148br_24 mx_ThemeChoicePanel_ThemeSelectors"
+        class="_root_dgy0u_24 mx_ThemeChoicePanel_ThemeSelectors"
       >
         <div
-          class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
+          class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
         >
           <div
-            class="_inline-field-control_148br_52"
+            class="_inline-field-control_dgy0u_52"
           >
             <div
               class="_container_1vw5h_18"
@@ -69,7 +69,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
               <input
                 checked=""
                 class="_input_1vw5h_26"
-                id="radix-43"
+                id="radix-49"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -81,28 +81,28 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_148br_46"
+            class="_inline-field-body_dgy0u_46"
           >
             <label
-              class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-43"
+              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
+              for="radix-49"
             >
               Light
             </label>
           </div>
         </div>
         <div
-          class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
+          class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
         >
           <div
-            class="_inline-field-control_148br_52"
+            class="_inline-field-control_dgy0u_52"
           >
             <div
               class="_container_1vw5h_18"
             >
               <input
                 class="_input_1vw5h_26"
-                id="radix-44"
+                id="radix-50"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -114,28 +114,28 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_148br_46"
+            class="_inline-field-body_dgy0u_46"
           >
             <label
-              class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-44"
+              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
+              for="radix-50"
             >
               Dark
             </label>
           </div>
         </div>
         <div
-          class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
+          class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
         >
           <div
-            class="_inline-field-control_148br_52"
+            class="_inline-field-control_dgy0u_52"
           >
             <div
               class="_container_1vw5h_18"
             >
               <input
                 class="_input_1vw5h_26"
-                id="radix-45"
+                id="radix-51"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -147,28 +147,28 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_148br_46"
+            class="_inline-field-body_dgy0u_46"
           >
             <label
-              class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-45"
+              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
+              for="radix-51"
             >
               High contrast
             </label>
           </div>
         </div>
         <div
-          class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
+          class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
         >
           <div
-            class="_inline-field-control_148br_52"
+            class="_inline-field-control_dgy0u_52"
           >
             <div
               class="_container_1vw5h_18"
             >
               <input
                 class="_input_1vw5h_26"
-                id="radix-46"
+                id="radix-52"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -180,11 +180,11 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_148br_46"
+            class="_inline-field-body_dgy0u_46"
           >
             <label
-              class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-46"
+              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
+              for="radix-52"
             >
               Alice theme
             </label>
@@ -195,72 +195,36 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
         class="mx_ThemeChoicePanel_CustomTheme"
       >
         <form
-          class="_container_zfn7i_17 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
-          id=":r7:"
+          class="_root_dgy0u_24 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
         >
           <div
-            class="_label_zfn7i_21"
-            id=":r8:"
+            class="_field_dgy0u_34"
           >
-            Add custom theme
-          </div>
-          <div
-            class="_controls_zfn7i_27"
-          >
-            <input
-              aria-invalid="false"
-              aria-labelledby=":r8:"
-              class="_control_9gon8_18 _control_zfn7i_27"
-              value=""
-            />
-            <div
-              class="_button-group_zfn7i_32"
+            <label
+              class="_label_dgy0u_67"
+              for="radix-54"
             >
-              <button
-                aria-controls=":r7:"
-                aria-label="Add custom theme"
-                class="_button_zfn7i_32 _primary-button_zfn7i_51"
-                type="submit"
-              >
-                <svg
-                  class="cpd-icon"
-                  fill="currentColor"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.878.878 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.712-.275s.53.092.713.275c.183.183.275.42.275.712s-.092.53-.275.713l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
-                  />
-                </svg>
-              </button>
-              <button
-                aria-controls=":r7:"
-                class="_button_zfn7i_32"
-                role="button"
-                type="button"
-              >
-                <svg
-                  class="cpd-icon"
-                  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.414Z"
-                  />
-                </svg>
-              </button>
+              Add custom theme
+            </label>
+            <div
+              class="_controls_1h4nb_17"
+            >
+              <input
+                aria-describedby="radix-53"
+                class="_control_9gon8_18"
+                id="radix-54"
+                name="input"
+                title=""
+                value=""
+              />
             </div>
+            <span
+              class="_message_dgy0u_98 _help-message_dgy0u_104"
+              id="radix-53"
+            >
+              Enter the URL of a custom theme you want to apply.
+            </span>
           </div>
-          <span
-            class="_caption-line_zfn7i_92 _caption-text_zfn7i_130 _caption-text-help_zfn7i_147"
-          >
-            Enter the URL of a custom theme you want to apply.
-          </span>
         </form>
         <ul
           class="mx_ThemeChoicePanel_CustomThemeList"
@@ -321,13 +285,13 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
       class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
     >
       <form
-        class="_root_148br_24"
+        class="_root_dgy0u_24"
       >
         <div
-          class="_inline-field_148br_40"
+          class="_inline-field_dgy0u_40"
         >
           <div
-            class="_inline-field-control_148br_52"
+            class="_inline-field-control_dgy0u_52"
           >
             <div
               class="_container_qnvru_18"
@@ -345,10 +309,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             </div>
           </div>
           <div
-            class="_inline-field-body_148br_46"
+            class="_inline-field-body_dgy0u_46"
           >
             <label
-              class="_label_148br_67"
+              class="_label_dgy0u_67"
               for="radix-32"
             >
               Match system theme
@@ -357,13 +321,13 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
         </div>
       </form>
       <form
-        class="_root_148br_24 mx_ThemeChoicePanel_ThemeSelectors"
+        class="_root_dgy0u_24 mx_ThemeChoicePanel_ThemeSelectors"
       >
         <div
-          class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
+          class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
         >
           <div
-            class="_inline-field-control_148br_52"
+            class="_inline-field-control_dgy0u_52"
           >
             <div
               class="_container_1vw5h_18"
@@ -383,10 +347,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             </div>
           </div>
           <div
-            class="_inline-field-body_148br_46"
+            class="_inline-field-body_dgy0u_46"
           >
             <label
-              class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-33"
             >
               Light
@@ -394,10 +358,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
           </div>
         </div>
         <div
-          class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
+          class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
         >
           <div
-            class="_inline-field-control_148br_52"
+            class="_inline-field-control_dgy0u_52"
           >
             <div
               class="_container_1vw5h_18"
@@ -416,10 +380,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             </div>
           </div>
           <div
-            class="_inline-field-body_148br_46"
+            class="_inline-field-body_dgy0u_46"
           >
             <label
-              class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-34"
             >
               Dark
@@ -427,10 +391,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
           </div>
         </div>
         <div
-          class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
+          class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
         >
           <div
-            class="_inline-field-control_148br_52"
+            class="_inline-field-control_dgy0u_52"
           >
             <div
               class="_container_1vw5h_18"
@@ -449,10 +413,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             </div>
           </div>
           <div
-            class="_inline-field-body_148br_46"
+            class="_inline-field-body_dgy0u_46"
           >
             <label
-              class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-35"
             >
               High contrast
@@ -460,10 +424,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
           </div>
         </div>
         <div
-          class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
+          class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
         >
           <div
-            class="_inline-field-control_148br_52"
+            class="_inline-field-control_dgy0u_52"
           >
             <div
               class="_container_1vw5h_18"
@@ -482,10 +446,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             </div>
           </div>
           <div
-            class="_inline-field-body_148br_46"
+            class="_inline-field-body_dgy0u_46"
           >
             <label
-              class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-36"
             >
               Alice theme
@@ -497,72 +461,36 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
         class="mx_ThemeChoicePanel_CustomTheme"
       >
         <form
-          class="_container_zfn7i_17 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
-          id=":r1:"
+          class="_root_dgy0u_24 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
         >
           <div
-            class="_label_zfn7i_21"
-            id=":r2:"
+            class="_field_dgy0u_34"
           >
-            Add custom theme
-          </div>
-          <div
-            class="_controls_zfn7i_27"
-          >
-            <input
-              aria-invalid="false"
-              aria-labelledby=":r2:"
-              class="_control_9gon8_18 _control_zfn7i_27"
-              value=""
-            />
-            <div
-              class="_button-group_zfn7i_32"
+            <label
+              class="_label_dgy0u_67"
+              for="radix-38"
             >
-              <button
-                aria-controls=":r1:"
-                aria-label="Add custom theme"
-                class="_button_zfn7i_32 _primary-button_zfn7i_51"
-                type="submit"
-              >
-                <svg
-                  class="cpd-icon"
-                  fill="currentColor"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.878.878 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.712-.275s.53.092.713.275c.183.183.275.42.275.712s-.092.53-.275.713l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
-                  />
-                </svg>
-              </button>
-              <button
-                aria-controls=":r1:"
-                class="_button_zfn7i_32"
-                role="button"
-                type="button"
-              >
-                <svg
-                  class="cpd-icon"
-                  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.414Z"
-                  />
-                </svg>
-              </button>
+              Add custom theme
+            </label>
+            <div
+              class="_controls_1h4nb_17"
+            >
+              <input
+                aria-describedby="radix-37"
+                class="_control_9gon8_18"
+                id="radix-38"
+                name="input"
+                title=""
+                value=""
+              />
             </div>
+            <span
+              class="_message_dgy0u_98 _help-message_dgy0u_104"
+              id="radix-37"
+            >
+              Enter the URL of a custom theme you want to apply.
+            </span>
           </div>
-          <span
-            class="_caption-line_zfn7i_92 _caption-text_zfn7i_130 _caption-text-help_zfn7i_147"
-          >
-            Enter the URL of a custom theme you want to apply.
-          </span>
         </form>
         <ul
           class="mx_ThemeChoicePanel_CustomThemeList"
@@ -623,13 +551,13 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
       class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
     >
       <form
-        class="_root_148br_24"
+        class="_root_dgy0u_24"
       >
         <div
-          class="_inline-field_148br_40"
+          class="_inline-field_dgy0u_40"
         >
           <div
-            class="_inline-field-control_148br_52"
+            class="_inline-field-control_dgy0u_52"
           >
             <div
               class="_container_qnvru_18"
@@ -647,10 +575,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_148br_46"
+            class="_inline-field-body_dgy0u_46"
           >
             <label
-              class="_label_148br_67"
+              class="_label_dgy0u_67"
               for="radix-0"
             >
               Match system theme
@@ -659,13 +587,13 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
         </div>
       </form>
       <form
-        class="_root_148br_24 mx_ThemeChoicePanel_ThemeSelectors"
+        class="_root_dgy0u_24 mx_ThemeChoicePanel_ThemeSelectors"
       >
         <div
-          class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
+          class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
         >
           <div
-            class="_inline-field-control_148br_52"
+            class="_inline-field-control_dgy0u_52"
           >
             <div
               class="_container_1vw5h_18"
@@ -685,10 +613,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_148br_46"
+            class="_inline-field-body_dgy0u_46"
           >
             <label
-              class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-1"
             >
               Light
@@ -696,10 +624,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
+          class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
         >
           <div
-            class="_inline-field-control_148br_52"
+            class="_inline-field-control_dgy0u_52"
           >
             <div
               class="_container_1vw5h_18"
@@ -718,10 +646,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_148br_46"
+            class="_inline-field-body_dgy0u_46"
           >
             <label
-              class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-2"
             >
               Dark
@@ -729,10 +657,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
+          class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
         >
           <div
-            class="_inline-field-control_148br_52"
+            class="_inline-field-control_dgy0u_52"
           >
             <div
               class="_container_1vw5h_18"
@@ -751,10 +679,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_148br_46"
+            class="_inline-field-body_dgy0u_46"
           >
             <label
-              class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-3"
             >
               High contrast

test/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_148br_24 mx_ThemeChoicePanel_ThemeSelectors"
+                class="_root_dgy0u_24 mx_ThemeChoicePanel_ThemeSelectors"
               >
                 <div
-                  class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light"
+                  class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light"
                 >
                   <div
-                    class="_inline-field-control_148br_52"
+                    class="_inline-field-control_dgy0u_52"
                   >
                     <div
                       class="_container_1vw5h_18"
@@ -58,10 +58,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_148br_46"
+                    class="_inline-field-body_dgy0u_46"
                   >
                     <label
-                      class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label"
+                      class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
                       for="radix-0"
                     >
                       Light
@@ -69,10 +69,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-dark"
+                  class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-dark"
                 >
                   <div
-                    class="_inline-field-control_148br_52"
+                    class="_inline-field-control_dgy0u_52"
                   >
                     <div
                       class="_container_1vw5h_18"
@@ -92,10 +92,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_148br_46"
+                    class="_inline-field-body_dgy0u_46"
                   >
                     <label
-                      class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label"
+                      class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
                       for="radix-1"
                     >
                       Dark
@@ -103,10 +103,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_148br_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light"
+                  class="_inline-field_dgy0u_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light"
                 >
                   <div
-                    class="_inline-field-control_148br_52"
+                    class="_inline-field-control_dgy0u_52"
                   >
                     <div
                       class="_container_1vw5h_18"
@@ -126,10 +126,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_148br_46"
+                    class="_inline-field-body_dgy0u_46"
                   >
                     <label
-                      class="_label_148br_67 mx_ThemeChoicePanel_themeSelector_Label"
+                      class="_label_dgy0u_67 mx_ThemeChoicePanel_themeSelector_Label"
                       for="radix-2"
                     >
                       High contrast

yarn.lock

@@ -3045,10 +3045,10 @@
   dependencies:
     svg2vectordrawable "^2.9.1"
 
-"@vector-im/compound-web@^4.9.0":
-  version "4.10.0"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-4.10.0.tgz#5403c9933af91d432b5fb5f92a305acadc810893"
-  integrity sha512-SPeol6FK/h/q8ChHyuCCncUIVoIGNdPODBf7UqvaohRjt8EzyAAHKP89l1YhWKqEaOtG67+28IXoFvdS46tbUA==
+"@vector-im/compound-web@^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-5.1.2.tgz#2ee3d859819e153c898770c058a4277c0b8ef3b8"
+  integrity sha512-p7ide2JRblCkcSMPNakkWjK9GxA8boMQCEgXCT7Dp+owhONf2QsYpyRzlW+tPZ3DULd+h4nqWRova4uSeZtBbA==
   dependencies:
     "@floating-ui/react" "^0.26.9"
     "@floating-ui/react-dom" "^2.0.8"