Merge pull request #39540 from nextcloud/feat/migrate-nc-vue-8

35 files changed, 326 insertions, 290 deletions

diff --git a/apps/comments/src/components/Comment.vue b/apps/comments/src/components/Comment.vue
index 29469dcf9e9..9301df12a73 100644
--- a/apps/comments/src/components/Comment.vue
+++ b/apps/comments/src/components/Comment.vue
@@ -91,12 +91,13 @@
 
 			<!-- Message content -->
 			<!-- The html is escaped and sanitized before rendering -->
-			<!-- eslint-disable-next-line vue/no-v-html-->
+			<!-- eslint-disable vue/no-v-html-->
 			<div v-else
 				:class="{'comment__message--expanded': expanded}"
 				class="comment__message"
 				@click="onExpand"
 				v-html="renderedContent" />
+			<!-- eslint-enable vue/no-v-html-->
 		</div>
 	</component>
 </template>
diff --git a/apps/comments/src/views/Comments.vue b/apps/comments/src/views/Comments.vue
index 31a00869d63..00d39539341 100644
--- a/apps/comments/src/views/Comments.vue
+++ b/apps/comments/src/views/Comments.vue
@@ -22,9 +22,9 @@
   -->
 
 <template>
-	<div class="comments"
-		:class="{ 'icon-loading': isFirstLoading }"
-		v-observe-visibility="onVisibilityChange">
+	<div v-observe-visibility="onVisibilityChange"
+		class="comments"
+		:class="{ 'icon-loading': isFirstLoading }">
 		<!-- Editor -->
 		<Comment v-bind="editorData"
 			:auto-complete="autoComplete"
@@ -37,7 +37,7 @@
 		<template v-if="!isFirstLoading">
 			<NcEmptyContent v-if="!hasComments && done"
 				class="comments__empty"
-				:title="t('comments', 'No comments yet, start the conversation!')">
+				:name="t('comments', 'No comments yet, start the conversation!')">
 				<template #icon>
 					<MessageReplyTextIcon />
 				</template>
@@ -65,7 +65,7 @@
 
 			<!-- Error message -->
 			<template v-else-if="error">
-				<NcEmptyContent class="comments__error" :title="error">
+				<NcEmptyContent class="comments__error" :name="error">
 					<template #icon>
 						<AlertCircleOutlineIcon />
 					</template>
@@ -191,8 +191,8 @@ export default {
 		/**
 		 * Make sure we have all mentions as Array of objects
 		 *
-		 * @param {Array} mentions the mentions list
-		 * @return {Object<string, object>}
+		 * @param {any[]} mentions the mentions list
+		 * @return {Record<string, object>}
 		 */
 		genMentionsData(mentions) {
 			Object.values(mentions)
diff --git a/apps/dav/src/views/Availability.vue b/apps/dav/src/views/Availability.vue
index bdc0c733c98..a02945b0073 100644
--- a/apps/dav/src/views/Availability.vue
+++ b/apps/dav/src/views/Availability.vue
@@ -1,5 +1,5 @@
 <template>
-	<NcSettingsSection :title="$t('dav', 'Availability')"
+	<NcSettingsSection :name="$t('dav', 'Availability')"
 		:description="$t('dav', 'If you configure your working hours, other users will see when you are out of office when they book a meeting.')">
 		<div class="time-zone">
 			<strong>
diff --git a/apps/dav/src/views/CalDavSettings.vue b/apps/dav/src/views/CalDavSettings.vue
index ff870f4b2d4..2bf4fbad561 100644
--- a/apps/dav/src/views/CalDavSettings.vue
+++ b/apps/dav/src/views/CalDavSettings.vue
@@ -1,5 +1,5 @@
 <template>
-	<NcSettingsSection :title="$t('dav', 'Calendar server')"
+	<NcSettingsSection :name="$t('dav', 'Calendar server')"
 		:doc-url="userSyncCalendarsDocUrl">
 		<!-- Can use v-html as:
 			- $t passes the translated string through DOMPurify.sanitize,
diff --git a/apps/dav/src/views/__snapshots__/CalDavSettings.spec.js.snap b/apps/dav/src/views/__snapshots__/CalDavSettings.spec.js.snap
index 1288552bea1..68bd01c5a4a 100644
--- a/apps/dav/src/views/__snapshots__/CalDavSettings.spec.js.snap
+++ b/apps/dav/src/views/__snapshots__/CalDavSettings.spec.js.snap
@@ -4,11 +4,11 @@ exports[`CalDavSettings interactions 1`] = `
 <div>
   <div
     class="settings-section settings-section--limit-width"
-    data-v-3896af2a=""
+    data-v-7c88e201=""
   >
     <h2
-      class="settings-section__title"
-      data-v-3896af2a=""
+      class="settings-section__name"
+      data-v-7c88e201=""
     >
       
 		Calendar server
@@ -16,7 +16,7 @@ exports[`CalDavSettings interactions 1`] = `
       <a
         aria-label="External documentation for Calendar server"
         class="settings-section__info"
-        data-v-3896af2a=""
+        data-v-7c88e201=""
         href="https://docs.nextcloud.com/server/23/go.php?to=user-sync-calendars"
         rel="noreferrer nofollow"
         role="note"
@@ -26,7 +26,7 @@ exports[`CalDavSettings interactions 1`] = `
         <span
           aria-hidden="true"
           class="material-design-icon help-circle-icon"
-          data-v-3896af2a=""
+          data-v-7c88e201=""
           role="img"
         >
           <svg
@@ -50,7 +50,7 @@ exports[`CalDavSettings interactions 1`] = `
      
     <p
       class="settings-hint"
-      data-v-3896af2a=""
+      data-v-7c88e201=""
     >
       Also install the 
       <a
@@ -71,55 +71,66 @@ exports[`CalDavSettings interactions 1`] = `
     </p>
      
     <p
-      data-v-3896af2a=""
+      data-v-7c88e201=""
     >
       <span
         class="checkbox-radio-switch checkbox-radio-switch-switch checkbox-radio-switch--checked"
-        data-v-3896af2a=""
-        data-v-781f2f28=""
+        data-v-7c88e201=""
+        data-v-dec41432=""
         style="--icon-size: 36px;"
       >
+        <input
+          class="checkbox-radio-switch__input"
+          data-v-dec41432=""
+          id="caldavSendInvitations"
+          type="checkbox"
+          value=""
+        />
+         
         <label
           class="checkbox-radio-switch__label"
-          data-v-781f2f28=""
+          data-v-dec41432=""
           for="caldavSendInvitations"
         >
-          <input
-            class="checkbox-radio-switch__input"
-            data-v-781f2f28=""
-            id="caldavSendInvitations"
-            type="checkbox"
-            value=""
-          />
-           
-          <span
-            aria-hidden="true"
-            class="material-design-icon toggle-switch-icon checkbox-radio-switch__icon"
-            data-v-781f2f28=""
-            role="img"
+          <div
+            class="checkbox-radio-switch__icon"
+            data-v-dec41432=""
           >
-            <svg
-              class="material-design-icon__svg"
-              fill="currentColor"
-              height="36"
-              viewBox="0 0 24 24"
-              width="36"
+            <span
+              aria-hidden="true"
+              class="material-design-icon toggle-switch-icon"
+              data-v-dec41432=""
+              role="img"
             >
-              <path
-                d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z"
+              <svg
+                class="material-design-icon__svg"
+                fill="currentColor"
+                height="36"
+                viewBox="0 0 24 24"
+                width="36"
               >
-                <!---->
-              </path>
-            </svg>
-          </span>
+                <path
+                  d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z"
+                >
+                  <!---->
+                </path>
+              </svg>
+            </span>
+          </div>
            
+          <span
+            class="checkbox-radio-switch__label-text"
+            data-v-dec41432=""
+          >
+            
 			Send invitations to attendees
 		
+          </span>
         </label>
       </span>
        
       <em
-        data-v-3896af2a=""
+        data-v-7c88e201=""
       >
         Please make sure to properly set up 
         <a
@@ -132,55 +143,66 @@ exports[`CalDavSettings interactions 1`] = `
     </p>
      
     <p
-      data-v-3896af2a=""
+      data-v-7c88e201=""
     >
       <span
         class="checkbox-radio-switch checkbox checkbox-radio-switch-switch checkbox-radio-switch--checked"
-        data-v-3896af2a=""
-        data-v-781f2f28=""
+        data-v-7c88e201=""
+        data-v-dec41432=""
         style="--icon-size: 36px;"
       >
+        <input
+          class="checkbox-radio-switch__input"
+          data-v-dec41432=""
+          id="caldavGenerateBirthdayCalendar"
+          type="checkbox"
+          value=""
+        />
+         
         <label
           class="checkbox-radio-switch__label"
-          data-v-781f2f28=""
+          data-v-dec41432=""
           for="caldavGenerateBirthdayCalendar"
         >
-          <input
-            class="checkbox-radio-switch__input"
-            data-v-781f2f28=""
-            id="caldavGenerateBirthdayCalendar"
-            type="checkbox"
-            value=""
-          />
-           
-          <span
-            aria-hidden="true"
-            class="material-design-icon toggle-switch-icon checkbox-radio-switch__icon"
-            data-v-781f2f28=""
-            role="img"
+          <div
+            class="checkbox-radio-switch__icon"
+            data-v-dec41432=""
           >
-            <svg
-              class="material-design-icon__svg"
-              fill="currentColor"
-              height="36"
-              viewBox="0 0 24 24"
-              width="36"
+            <span
+              aria-hidden="true"
+              class="material-design-icon toggle-switch-icon"
+              data-v-dec41432=""
+              role="img"
             >
-              <path
-                d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z"
+              <svg
+                class="material-design-icon__svg"
+                fill="currentColor"
+                height="36"
+                viewBox="0 0 24 24"
+                width="36"
               >
-                <!---->
-              </path>
-            </svg>
-          </span>
+                <path
+                  d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z"
+                >
+                  <!---->
+                </path>
+              </svg>
+            </span>
+          </div>
            
+          <span
+            class="checkbox-radio-switch__label-text"
+            data-v-dec41432=""
+          >
+            
 			Automatically generate a birthday calendar
 		
+          </span>
         </label>
       </span>
        
       <em
-        data-v-3896af2a=""
+        data-v-7c88e201=""
       >
         
 			Birthday calendars will be generated by a background job.
@@ -188,11 +210,11 @@ exports[`CalDavSettings interactions 1`] = `
       </em>
        
       <br
-        data-v-3896af2a=""
+        data-v-7c88e201=""
       />
        
       <em
-        data-v-3896af2a=""
+        data-v-7c88e201=""
       >
         
 			Hence they will not be available immediately after enabling but will show up after some time.
@@ -201,55 +223,66 @@ exports[`CalDavSettings interactions 1`] = `
     </p>
      
     <p
-      data-v-3896af2a=""
+      data-v-7c88e201=""
     >
       <span
         class="checkbox-radio-switch checkbox-radio-switch-switch checkbox-radio-switch--checked"
-        data-v-3896af2a=""
-        data-v-781f2f28=""
+        data-v-7c88e201=""
+        data-v-dec41432=""
         style="--icon-size: 36px;"
       >
+        <input
+          class="checkbox-radio-switch__input"
+          data-v-dec41432=""
+          id="caldavSendEventReminders"
+          type="checkbox"
+          value=""
+        />
+         
         <label
           class="checkbox-radio-switch__label"
-          data-v-781f2f28=""
+          data-v-dec41432=""
           for="caldavSendEventReminders"
         >
-          <input
-            class="checkbox-radio-switch__input"
-            data-v-781f2f28=""
-            id="caldavSendEventReminders"
-            type="checkbox"
-            value=""
-          />
-           
-          <span
-            aria-hidden="true"
-            class="material-design-icon toggle-switch-icon checkbox-radio-switch__icon"
-            data-v-781f2f28=""
-            role="img"
+          <div
+            class="checkbox-radio-switch__icon"
+            data-v-dec41432=""
           >
-            <svg
-              class="material-design-icon__svg"
-              fill="currentColor"
-              height="36"
-              viewBox="0 0 24 24"
-              width="36"
+            <span
+              aria-hidden="true"
+              class="material-design-icon toggle-switch-icon"
+              data-v-dec41432=""
+              role="img"
             >
-              <path
-                d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z"
+              <svg
+                class="material-design-icon__svg"
+                fill="currentColor"
+                height="36"
+                viewBox="0 0 24 24"
+                width="36"
               >
-                <!---->
-              </path>
-            </svg>
-          </span>
+                <path
+                  d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z"
+                >
+                  <!---->
+                </path>
+              </svg>
+            </span>
+          </div>
            
+          <span
+            class="checkbox-radio-switch__label-text"
+            data-v-dec41432=""
+          >
+            
 			Send notifications for events
 		
+          </span>
         </label>
       </span>
        
       <em
-        data-v-3896af2a=""
+        data-v-7c88e201=""
       >
         Please make sure to properly set up 
         <a
@@ -261,11 +294,11 @@ exports[`CalDavSettings interactions 1`] = `
       </em>
        
       <br
-        data-v-3896af2a=""
+        data-v-7c88e201=""
       />
        
       <em
-        data-v-3896af2a=""
+        data-v-7c88e201=""
       >
         
 			Notifications are sent via background jobs, so these must occur often enough.
@@ -275,55 +308,66 @@ exports[`CalDavSettings interactions 1`] = `
      
     <p
       class="indented"
-      data-v-3896af2a=""
+      data-v-7c88e201=""
     >
       <span
         class="checkbox-radio-switch checkbox-radio-switch-switch checkbox-radio-switch--checked"
-        data-v-3896af2a=""
-        data-v-781f2f28=""
+        data-v-7c88e201=""
+        data-v-dec41432=""
         style="--icon-size: 36px;"
       >
+        <input
+          class="checkbox-radio-switch__input"
+          data-v-dec41432=""
+          id="caldavSendEventRemindersToSharedGroupMembers"
+          type="checkbox"
+          value=""
+        />
+         
         <label
           class="checkbox-radio-switch__label"
-          data-v-781f2f28=""
+          data-v-dec41432=""
           for="caldavSendEventRemindersToSharedGroupMembers"
         >
-          <input
-            class="checkbox-radio-switch__input"
-            data-v-781f2f28=""
-            id="caldavSendEventRemindersToSharedGroupMembers"
-            type="checkbox"
-            value=""
-          />
-           
-          <span
-            aria-hidden="true"
-            class="material-design-icon toggle-switch-icon checkbox-radio-switch__icon"
-            data-v-781f2f28=""
-            role="img"
+          <div
+            class="checkbox-radio-switch__icon"
+            data-v-dec41432=""
           >
-            <svg
-              class="material-design-icon__svg"
-              fill="currentColor"
-              height="36"
-              viewBox="0 0 24 24"
-              width="36"
+            <span
+              aria-hidden="true"
+              class="material-design-icon toggle-switch-icon"
+              data-v-dec41432=""
+              role="img"
             >
-              <path
-                d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z"
+              <svg
+                class="material-design-icon__svg"
+                fill="currentColor"
+                height="36"
+                viewBox="0 0 24 24"
+                width="36"
               >
-                <!---->
-              </path>
-            </svg>
-          </span>
+                <path
+                  d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z"
+                >
+                  <!---->
+                </path>
+              </svg>
+            </span>
+          </div>
            
+          <span
+            class="checkbox-radio-switch__label-text"
+            data-v-dec41432=""
+          >
+            
 			Send reminder notifications to calendar sharees as well
 		
+          </span>
         </label>
       </span>
        
       <em
-        data-v-3896af2a=""
+        data-v-7c88e201=""
       >
         
 			Reminders are always sent to organizers and attendees.
@@ -333,50 +377,61 @@ exports[`CalDavSettings interactions 1`] = `
      
     <p
       class="indented"
-      data-v-3896af2a=""
+      data-v-7c88e201=""
     >
       <span
         class="checkbox-radio-switch checkbox-radio-switch-switch checkbox-radio-switch--checked"
-        data-v-3896af2a=""
-        data-v-781f2f28=""
+        data-v-7c88e201=""
+        data-v-dec41432=""
         style="--icon-size: 36px;"
       >
+        <input
+          class="checkbox-radio-switch__input"
+          data-v-dec41432=""
+          id="caldavSendEventRemindersPush"
+          type="checkbox"
+          value=""
+        />
+         
         <label
           class="checkbox-radio-switch__label"
-          data-v-781f2f28=""
+          data-v-dec41432=""
           for="caldavSendEventRemindersPush"
         >
-          <input
-            class="checkbox-radio-switch__input"
-            data-v-781f2f28=""
-            id="caldavSendEventRemindersPush"
-            type="checkbox"
-            value=""
-          />
-           
-          <span
-            aria-hidden="true"
-            class="material-design-icon toggle-switch-icon checkbox-radio-switch__icon"
-            data-v-781f2f28=""
-            role="img"
+          <div
+            class="checkbox-radio-switch__icon"
+            data-v-dec41432=""
           >
-            <svg
-              class="material-design-icon__svg"
-              fill="currentColor"
-              height="36"
-              viewBox="0 0 24 24"
-              width="36"
+            <span
+              aria-hidden="true"
+              class="material-design-icon toggle-switch-icon"
+              data-v-dec41432=""
+              role="img"
             >
-              <path
-                d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z"
+              <svg
+                class="material-design-icon__svg"
+                fill="currentColor"
+                height="36"
+                viewBox="0 0 24 24"
+                width="36"
               >
-                <!---->
-              </path>
-            </svg>
-          </span>
+                <path
+                  d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z"
+                >
+                  <!---->
+                </path>
+              </svg>
+            </span>
+          </div>
            
+          <span
+            class="checkbox-radio-switch__label-text"
+            data-v-dec41432=""
+          >
+            
 			Enable notifications for events via push
 		
+          </span>
         </label>
       </span>
     </p>
diff --git a/apps/federatedfilesharing/src/components/AdminSettings.vue b/apps/federatedfilesharing/src/components/AdminSettings.vue
index 6fb05d29e8f..484dd9a519e 100644
--- a/apps/federatedfilesharing/src/components/AdminSettings.vue
+++ b/apps/federatedfilesharing/src/components/AdminSettings.vue
@@ -21,7 +21,7 @@
 -->
 
 <template>
-	<NcSettingsSection :title="t('federatedfilesharing', 'Federated Cloud Sharing')"
+	<NcSettingsSection :name="t('federatedfilesharing', 'Federated Cloud Sharing')"
 		:description="t('federatedfilesharing', 'Adjust how people can share between servers. This includes shares between users on this server as well if they are using federated sharing.')"
 		:doc-url="sharingFederatedDocUrl">
 		<NcCheckboxRadioSwitch type="switch"
diff --git a/apps/federatedfilesharing/src/components/PersonalSettings.vue b/apps/federatedfilesharing/src/components/PersonalSettings.vue
index 1d5ea2561c6..96f1f194f72 100644
--- a/apps/federatedfilesharing/src/components/PersonalSettings.vue
+++ b/apps/federatedfilesharing/src/components/PersonalSettings.vue
@@ -17,7 +17,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-	<NcSettingsSection :title="t('federatedfilesharing', 'Federated Cloud')"
+	<NcSettingsSection :name="t('federatedfilesharing', 'Federated Cloud')"
 		:description="t('federatedfilesharing', 'You can share with anyone who uses a Nextcloud server or other Open Cloud Mesh (OCM) compatible servers and services! Just put their Federated Cloud ID in the share dialog. It looks like person@cloud.example.com')"
 		:doc-url="docUrlFederated">
 		<p class="cloud-id-text">
diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
index 8fcf6846375..c71cf488077 100644
--- a/apps/files/src/components/FileEntry.vue
+++ b/apps/files/src/components/FileEntry.vue
@@ -105,7 +105,7 @@
 				:boundaries-element="boundariesElement"
 				:container="boundariesElement"
 				:disabled="source._loading"
-				:force-title="true"
+				:force-name="true"
 				:force-menu="enabledInlineActions.length === 0 /* forceMenu only if no inline actions */"
 				:inline="enabledInlineActions.length"
 				:open.sync="openedMenu">
diff --git a/apps/files/src/components/FilesListHeaderActions.vue b/apps/files/src/components/FilesListHeaderActions.vue
index f8c60a5cd1b..e419c8e5abd 100644
--- a/apps/files/src/components/FilesListHeaderActions.vue
+++ b/apps/files/src/components/FilesListHeaderActions.vue
@@ -23,9 +23,9 @@
 	<th class="files-list__column files-list__row-actions-batch" colspan="2">
 		<NcActions ref="actionsMenu"
 			:disabled="!!loading || areSomeNodesLoading"
-			:force-title="true"
+			:force-name="true"
 			:inline="inlineActions"
-			:menu-title="inlineActions <= 1 ? t('files', 'Actions') : null"
+			:menu-name="inlineActions <= 1 ? t('files', 'Actions') : null"
 			:open.sync="openedMenu">
 			<NcActionButton v-for="action in enabledActions"
 				:key="action.id"
diff --git a/apps/files/src/views/FilesList.vue b/apps/files/src/views/FilesList.vue
index 99d7767ebc7..1a7ca5769aa 100644
--- a/apps/files/src/views/FilesList.vue
+++ b/apps/files/src/views/FilesList.vue
@@ -35,11 +35,11 @@
 		<NcLoadingIcon v-if="loading && !isRefreshing"
 			class="files-list__loading-icon"
 			:size="38"
-			:title="t('files', 'Loading current folder')" />
+			:name="t('files', 'Loading current folder')" />
 
 		<!-- Empty content placeholder -->
 		<NcEmptyContent v-else-if="!loading && isEmptyDir"
-			:title="currentView?.emptyTitle || t('files', 'No files in here')"
+			:name="currentView?.emptyTitle || t('files', 'No files in here')"
 			:description="currentView?.emptyCaption || t('files', 'Upload some content or sync with your devices!')"
 			data-cy-files-content-empty>
 			<template #action>
@@ -287,14 +287,15 @@ export default Vue.extend({
 				// If we're in the root dir, define the root
 				if (dir === '/') {
 					this.filesStore.setRoot({ service: currentView.id, root: folder })
-				} else
-				// Otherwise, add the folder to the store
-				if (folder.fileid) {
-					this.filesStore.updateNodes([folder])
-					this.pathsStore.addPath({ service: currentView.id, fileid: folder.fileid, path: dir })
 				} else {
-					// If we're here, the view API messed up
-					logger.error('Invalid root folder returned', { dir, folder, currentView })
+					// Otherwise, add the folder to the store
+					if (folder.fileid) {
+						this.filesStore.updateNodes([folder])
+						this.pathsStore.addPath({ service: currentView.id, fileid: folder.fileid, path: dir })
+					} else {
+						// If we're here, the view API messed up
+						logger.error('Invalid root folder returned', { dir, folder, currentView })
+					}
 				}
 
 				// Update paths store
diff --git a/apps/files/src/views/Navigation.cy.ts b/apps/files/src/views/Navigation.cy.ts
index 65964832e8a..8678465841a 100644
--- a/apps/files/src/views/Navigation.cy.ts
+++ b/apps/files/src/views/Navigation.cy.ts
@@ -1,5 +1,3 @@
-import * as InitialState from '@nextcloud/initial-state'
-import * as L10n from '@nextcloud/l10n'
 import FolderSvg from '@mdi/svg/svg/folder.svg'
 import ShareSvg from '@mdi/svg/svg/share-variant.svg'
 import { createTestingPinia } from '@pinia/testing'
@@ -13,13 +11,14 @@ describe('Navigation renders', () => {
 	const Navigation = new NavigationService() as NavigationService
 
 	before(() => {
-		cy.stub(InitialState, 'loadState')
-			.returns({
-				used: 1000 * 1000 * 1000,
-				quota: -1,
-			})
+		cy.mockInitialState('files', 'storageStats', {
+			used: 1000 * 1000 * 1000,
+			quota: -1,
+		})
 	})
 
+	after(() => cy.unmockInitialState())
+
 	it('renders', () => {
 		cy.mount(NavigationView, {
 			propsData: {
@@ -157,22 +156,9 @@ describe('Navigation API', () => {
 describe('Quota rendering', () => {
 	const Navigation = new NavigationService()
 
-	beforeEach(() => {
-		// TODO: remove when @nextcloud/l10n 2.0 is released
-		// https://github.com/nextcloud/nextcloud-l10n/pull/542
-		cy.stub(L10n, 'translate', (app, text, vars = {}, number) => {
-			cy.log({ app, text, vars, number })
-			return text.replace(/%n/g, '' + number).replace(/{([^{}]*)}/g, (match, key) => {
-				return vars[key]
-			})
-		})
-	})
+	afterEach(() => cy.unmockInitialState())
 
 	it('Unknown quota', () => {
-		cy.stub(InitialState, 'loadState')
-			.as('loadStateStats')
-			.returns(undefined)
-
 		cy.mount(NavigationView, {
 			propsData: {
 				Navigation,
@@ -188,12 +174,10 @@ describe('Quota rendering', () => {
 	})
 
 	it('Unlimited quota', () => {
-		cy.stub(InitialState, 'loadState')
-			.as('loadStateStats')
-			.returns({
-				used: 1000 * 1000 * 1000,
-				quota: -1,
-			})
+		cy.mockInitialState('files', 'storageStats', {
+			used: 1000 * 1000 * 1000,
+			quota: -1,
+		})
 
 		cy.mount(NavigationView, {
 			propsData: {
@@ -212,13 +196,11 @@ describe('Quota rendering', () => {
 	})
 
 	it('Non-reached quota', () => {
-		cy.stub(InitialState, 'loadState')
-			.as('loadStateStats')
-			.returns({
-				used: 1000 * 1000 * 1000,
-				quota: 5 * 1000 * 1000 * 1000,
-				relative: 20, // percent
-			})
+		cy.mockInitialState('files', 'storageStats', {
+			used: 1000 * 1000 * 1000,
+			quota: 5 * 1000 * 1000 * 1000,
+			relative: 20, // percent
+		})
 
 		cy.mount(NavigationView, {
 			propsData: {
@@ -238,13 +220,11 @@ describe('Quota rendering', () => {
 	})
 
 	it('Reached quota', () => {
-		cy.stub(InitialState, 'loadState')
-			.as('loadStateStats')
-			.returns({
-				used: 5 * 1000 * 1000 * 1000,
-				quota: 1000 * 1000 * 1000,
-				relative: 500, // percent
-			})
+		cy.mockInitialState('files', 'storageStats', {
+			used: 5 * 1000 * 1000 * 1000,
+			quota: 1000 * 1000 * 1000,
+			relative: 500, // percent
+		})
 
 		cy.mount(NavigationView, {
 			propsData: {
diff --git a/apps/files/src/views/Navigation.vue b/apps/files/src/views/Navigation.vue
index e164880003a..81ceac80a7f 100644
--- a/apps/files/src/views/Navigation.vue
+++ b/apps/files/src/views/Navigation.vue
@@ -29,7 +29,7 @@
 				:icon="view.iconClass"
 				:open="isExpanded(view)"
 				:pinned="view.sticky"
-				:title="view.name"
+				:name="view.name"
 				:to="generateToNavigation(view)"
 				@update:open="onToggleExpand(view)">
 				<!-- Sanitized icon as svg if provided -->
@@ -41,7 +41,7 @@
 					:data-cy-files-navigation-item="child.id"
 					:exact="true"
 					:icon="child.iconClass"
-					:title="child.name"
+					:name="child.name"
 					:to="generateToNavigation(child)">
 					<!-- Sanitized icon as svg if provided -->
 					<NcIconSvgWrapper v-if="child.icon" slot="icon" :svg="child.icon" />
@@ -57,7 +57,7 @@
 
 				<!-- Files settings modal toggle-->
 				<NcAppNavigationItem :aria-label="t('files', 'Open the files app settings')"
-					:title="t('files', 'Files settings')"
+					:name="t('files', 'Files settings')"
 					data-cy-files-navigation-settings-button
 					@click.prevent.stop="openSettings">
 					<Cog slot="icon" :size="20" />
diff --git a/apps/files/src/views/Settings.vue b/apps/files/src/views/Settings.vue
index 82580d7c504..957b26b30dc 100644
--- a/apps/files/src/views/Settings.vue
+++ b/apps/files/src/views/Settings.vue
@@ -22,10 +22,10 @@
 <template>
 	<NcAppSettingsDialog :open="open"
 		:show-navigation="true"
-		:title="t('files', 'Files settings')"
+		:name="t('files', 'Files settings')"
 		@update:open="onClose">
 		<!-- Settings API-->
-		<NcAppSettingsSection id="settings" :title="t('files', 'Files settings')">
+		<NcAppSettingsSection id="settings" :name="t('files', 'Files settings')">
 			<NcCheckboxRadioSwitch :checked="userConfig.sort_favorites_first"
 				@update:checked="setConfig('sort_favorites_first', $event)">
 				{{ t('files', 'Sort favorites first') }}
@@ -43,14 +43,14 @@
 		<!-- Settings API-->
 		<NcAppSettingsSection v-if="settings.length !== 0"
 			id="more-settings"
-			:title="t('files', 'Additional settings')">
+			:name="t('files', 'Additional settings')">
 			<template v-for="setting in settings">
 				<Setting :key="setting.name" :el="setting.el" />
 			</template>
 		</NcAppSettingsSection>
 
 		<!-- Webdav URL-->
-		<NcAppSettingsSection id="webdav" :title="t('files', 'WebDAV')">
+		<NcAppSettingsSection id="webdav" :name="t('files', 'WebDAV')">
 			<NcInputField id="webdav-url-input"
 				:show-trailing-button="true"
 				:success="webdavUrlCopied"
diff --git a/apps/files/src/views/Sidebar.vue b/apps/files/src/views/Sidebar.vue
index f173ff3333a..12581222f8e 100644
--- a/apps/files/src/views/Sidebar.vue
+++ b/apps/files/src/views/Sidebar.vue
@@ -244,15 +244,15 @@ export default {
 					compact: this.hasLowHeight || !this.fileInfo.hasPreview || this.isFullScreen,
 					loading: this.loading,
 					starred: this.fileInfo.isFavourited,
-					subtitle: this.subtitle,
-					subtitleTooltip: this.fullTime,
+					subname: this.subtitle,
+					subtitle: this.fullTime,
+					name: this.fileInfo.name,
 					title: this.fileInfo.name,
-					titleTooltip: this.fileInfo.name,
 				}
 			} else if (this.error) {
 				return {
 					key: 'error', // force key to re-render
-					subtitle: '',
+					subname: '',
 					title: '',
 					class: {
 						'app-sidebar--full': this.isFullScreen,
@@ -262,7 +262,7 @@ export default {
 			// no fileInfo yet, showing empty data
 			return {
 				loading: this.loading,
-				subtitle: '',
+				subname: '',
 				title: '',
 				class: {
 					'app-sidebar--full': this.isFullScreen,
diff --git a/apps/files_versions/src/components/Version.vue b/apps/files_versions/src/components/Version.vue
index 8c7296fbb25..3d7edc77841 100644
--- a/apps/files_versions/src/components/Version.vue
+++ b/apps/files_versions/src/components/Version.vue
@@ -18,7 +18,7 @@
 <template>
 	<div>
 		<NcListItem class="version"
-			:title="versionLabel"
+			:name="versionLabel"
 			:href="downloadURL"
 			:force-display-actions="true"
 			data-files-versions-version>
@@ -37,7 +37,7 @@
 					<ImageOffOutline :size="20" />
 				</div>
 			</template>
-			<template #subtitle>
+			<template #subname>
 				<div class="version__info">
 					<span :title="formattedDate">{{ version.mtime | humanDateFromNow }}</span>
 					<!-- Separate dot to improve alignement -->
diff --git a/apps/oauth2/src/App.vue b/apps/oauth2/src/App.vue
index fc154204c8d..c37548e3968 100644
--- a/apps/oauth2/src/App.vue
+++ b/apps/oauth2/src/App.vue
@@ -20,7 +20,7 @@
   -
   -->
 <template>
-	<NcSettingsSection :title="t('oauth2', 'OAuth 2.0 clients')"
+	<NcSettingsSection :name="t('oauth2', 'OAuth 2.0 clients')"
 		:description="t('oauth2', 'OAuth 2.0 allows external services to request access to {instanceName}.', { instanceName })"
 		:doc-url="oauthDocLink">
 		<table v-if="clients.length > 0" class="grid">
diff --git a/apps/settings/src/components/AdminAI.vue b/apps/settings/src/components/AdminAI.vue
index 174c9000a9e..51f5a301d89 100644
--- a/apps/settings/src/components/AdminAI.vue
+++ b/apps/settings/src/components/AdminAI.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<NcSettingsSection :title="t('settings', 'Machine translation')"
+		<NcSettingsSection :name="t('settings', 'Machine translation')"
 			:description="t('settings', 'Machine translation can be implemented by different apps. Here you can define the precedence of the machine translation apps you have installed at the moment.')">
 			<draggable v-model="settings['ai.translation_provider_preferences']" @change="saveChanges">
 				<div v-for="(providerClass, i) in settings['ai.translation_provider_preferences']" :key="providerClass" class="draggable__item">
@@ -18,7 +18,7 @@
 				</div>
 			</draggable>
 		</NcSettingsSection>
-		<NcSettingsSection :title="t('settings', 'Speech-To-Text')"
+		<NcSettingsSection :name="t('settings', 'Speech-To-Text')"
 			:description="t('settings', 'Speech-To-Text can be implemented by different apps. Here you can set which app should be used.')">
 			<template v-for="provider in sttProviders">
 				<NcCheckboxRadioSwitch :key="provider.class"
@@ -36,7 +36,7 @@
 				</NcCheckboxRadioSwitch>
 			</template>
 		</NcSettingsSection>
-		<NcSettingsSection :title="t('settings', 'Text processing')"
+		<NcSettingsSection :name="t('settings', 'Text processing')"
 			:description="t('settings', 'Text processing tasks can be implemented by different apps. Here you can set which app should be used for which task.')">
 			<template v-for="type in Object.keys(settings['ai.textprocessing_provider_preferences'])">
 				<div :key="type">
diff --git a/apps/settings/src/components/AdminDelegating.vue b/apps/settings/src/components/AdminDelegating.vue
index f3defc88207..c614b2bd2f4 100644
--- a/apps/settings/src/components/AdminDelegating.vue
+++ b/apps/settings/src/components/AdminDelegating.vue
@@ -1,5 +1,5 @@
 <template>
-	<NcSettingsSection :title="t('settings', 'Administration privileges')"
+	<NcSettingsSection :name="t('settings', 'Administration privileges')"
 		:description="t('settings', 'Here you can decide which group can access certain sections of the administration settings.')"
 		:doc-url="authorizedSettingsDocLink">
 		<div class="setting-list">
diff --git a/apps/settings/src/components/AdminTwoFactor.vue b/apps/settings/src/components/AdminTwoFactor.vue
index d45e7f7f6ff..aba6dc7537f 100644
--- a/apps/settings/src/components/AdminTwoFactor.vue
+++ b/apps/settings/src/components/AdminTwoFactor.vue
@@ -1,5 +1,5 @@
 <template>
-	<NcSettingsSection :title="t('settings', 'Two-Factor Authentication')"
+	<NcSettingsSection :name="t('settings', 'Two-Factor Authentication')"
 		:description="t('settings', 'Two-factor authentication can be enforced for all users and specific groups. If they do not have a two-factor provider configured, they will be unable to log into the system.')"
 		:doc-url="twoFactorAdminDoc">
 		<p v-if="loading">
diff --git a/apps/settings/src/components/BasicSettings/BackgroundJob.vue b/apps/settings/src/components/BasicSettings/BackgroundJob.vue
index 26ec73bd7ca..04ef607e03b 100644
--- a/apps/settings/src/components/BasicSettings/BackgroundJob.vue
+++ b/apps/settings/src/components/BasicSettings/BackgroundJob.vue
@@ -21,7 +21,7 @@
 -->
 
 <template>
-	<NcSettingsSection :title="t('settings', 'Background jobs')"
+	<NcSettingsSection :name="t('settings', 'Background jobs')"
 		:description="t('settings', 'For the server to work properly, it\'s important to configure background jobs correctly. Cron is the recommended setting. Please see the documentation for more information.')"
 		:doc-url="backgroundJobsDocUrl">
 		<template v-if="lastCron !== 0">
diff --git a/apps/settings/src/components/Encryption.vue b/apps/settings/src/components/Encryption.vue
index db7a7907761..b6a37b41c8b 100644
--- a/apps/settings/src/components/Encryption.vue
+++ b/apps/settings/src/components/Encryption.vue
@@ -21,7 +21,7 @@
 -->
 
 <template>
-	<NcSettingsSection :title="t('settings', 'Server-side encryption')"
+	<NcSettingsSection :name="t('settings', 'Server-side encryption')"
 		:description="t('settings', 'Server-side encryption makes it possible to encrypt files which are uploaded to this server. This comes with limitations like a performance penalty, so enable this only if needed.')"
 		:doc-url="encryptionAdminDoc">
 		<NcCheckboxRadioSwitch :checked="encryptionEnabled || shouldDisplayWarning"
diff --git a/apps/settings/src/components/GroupListItem.vue b/apps/settings/src/components/GroupListItem.vue
index ee892730b1a..23333583000 100644
--- a/apps/settings/src/components/GroupListItem.vue
+++ b/apps/settings/src/components/GroupListItem.vue
@@ -23,7 +23,7 @@
 <template>
 	<NcAppNavigationItem :key="id"
 		:exact="true"
-		:title="title"
+		:name="name"
 		:to="{ name: 'group', params: { selectedGroup: encodeURIComponent(id) } }"
 		icon="icon-group"
 		:loading="loadingRenameGroup"
@@ -40,7 +40,7 @@
 				ref="displayNameInput"
 				icon="icon-edit"
 				type="text"
-				:value="title"
+				:value="name"
 				@submit="renameGroup(id)">
 				{{ t('settings', 'Rename group') }}
 			</NcActionInput>
@@ -90,9 +90,9 @@ export default {
 			required: true,
 		},
 		/**
-		 * Title of this group
+		 * Name of this group
 		 */
-		title: {
+		name: {
 			type: String,
 			required: true,
 		},
diff --git a/apps/settings/src/components/PasswordSection.vue b/apps/settings/src/components/PasswordSection.vue
index b68de0365e0..201fdc2e3cb 100644
--- a/apps/settings/src/components/PasswordSection.vue
+++ b/apps/settings/src/components/PasswordSection.vue
@@ -17,7 +17,7 @@
   - along with this program.  If not, see <http://www.gnu.org/licenses/>.
   -->
 <template>
-	<NcSettingsSection :title="t('settings', 'Password')">
+	<NcSettingsSection :name="t('settings', 'Password')">
 		<form id="passwordform" method="POST" @submit.prevent="changePassword">
 			<NcPasswordField id="old-pass"
 				:label="t('settings', 'Current password')"
diff --git a/apps/settings/src/components/UserList.vue b/apps/settings/src/components/UserList.vue
index 9fcf4d4e526..b208a95d0c5 100644
--- a/apps/settings/src/components/UserList.vue
+++ b/apps/settings/src/components/UserList.vue
@@ -31,10 +31,10 @@
 
 		<NcEmptyContent v-if="filteredUsers.length === 0"
 			class="empty"
-			:title="isInitialLoad && loading.users ? null : t('settings', 'No users')">
+			:name="isInitialLoad && loading.users ? null : t('settings', 'No users')">
 			<template #icon>
 				<NcLoadingIcon v-if="isInitialLoad && loading.users"
-					:title="t('settings', 'Loading users …')"
+					:name="t('settings', 'Loading users …')"
 					:size="64" />
 				<NcIconSvgWrapper v-else
 					:svg="usersSvg" />
diff --git a/apps/settings/src/components/Users/UserRow.vue b/apps/settings/src/components/Users/UserRow.vue
index b230e9a9bf8..aee7c506052 100644
--- a/apps/settings/src/components/Users/UserRow.vue
+++ b/apps/settings/src/components/Users/UserRow.vue
@@ -27,7 +27,7 @@
 	<Fragment>
 		<td class="row__cell row__cell--avatar">
 			<NcLoadingIcon v-if="isLoadingUser"
-				:title="t('settings', 'Loading user …')"
+				:name="t('settings', 'Loading user …')"
 				:size="32" />
 			<NcAvatar v-else
 				:key="user.id"
diff --git a/apps/settings/src/components/Users/UserSettingsDialog.vue b/apps/settings/src/components/Users/UserSettingsDialog.vue
index 818f5bd9c7f..79f7d72c5d5 100644
--- a/apps/settings/src/components/Users/UserSettingsDialog.vue
+++ b/apps/settings/src/components/Users/UserSettingsDialog.vue
@@ -23,9 +23,9 @@
 <template>
 	<NcAppSettingsDialog :open.sync="isModalOpen"
 		:show-navigation="true"
-		:title="t('settings', 'User management settings')">
+		:name="t('settings', 'User management settings')">
 		<NcAppSettingsSection id="visibility-settings"
-			:title="t('settings', 'Visibility')">
+			:name="t('settings', 'Visibility')">
 			<NcCheckboxRadioSwitch type="switch"
 				data-test="showLanguages"
 				:checked.sync="showLanguages">
@@ -49,7 +49,7 @@
 		</NcAppSettingsSection>
 
 		<NcAppSettingsSection id="email-settings"
-			:title="t('settings', 'Send email')">
+			:name="t('settings', 'Send email')">
 			<NcCheckboxRadioSwitch type="switch"
 				data-test="sendWelcomeMail"
 				:checked.sync="sendWelcomeMail"
@@ -59,7 +59,7 @@
 		</NcAppSettingsSection>
 
 		<NcAppSettingsSection id="default-settings"
-			:title="t('settings', 'Defaults')">
+			:name="t('settings', 'Defaults')">
 			<label for="default-quota-select">{{ t('settings', 'Default quota') }}</label>
 			<NcSelect v-model="defaultQuota"
 				input-id="default-quota-select"
diff --git a/apps/settings/src/views/Apps.vue b/apps/settings/src/views/Apps.vue
index 6cc5f2fb0e8..2eb8a479545 100644
--- a/apps/settings/src/views/Apps.vue
+++ b/apps/settings/src/views/Apps.vue
@@ -32,20 +32,20 @@
 					:to="{ name: 'apps' }"
 					:exact="true"
 					icon="icon-category-installed"
-					:title="t('settings', 'Your apps')" />
+					:name="t('settings', 'Your apps')" />
 				<NcAppNavigationItem id="app-category-enabled"
 					:to="{ name: 'apps-category', params: { category: 'enabled' } }"
 					icon="icon-category-enabled"
-					:title="$options.APPS_SECTION_ENUM.enabled" />
+					:name="$options.APPS_SECTION_ENUM.enabled" />
 				<NcAppNavigationItem id="app-category-disabled"
 					:to="{ name: 'apps-category', params: { category: 'disabled' } }"
 					icon="icon-category-disabled"
-					:title="$options.APPS_SECTION_ENUM.disabled" />
+					:name="$options.APPS_SECTION_ENUM.disabled" />
 				<NcAppNavigationItem v-if="updateCount > 0"
 					id="app-category-updates"
 					:to="{ name: 'apps-category', params: { category: 'updates' } }"
 					icon="icon-download"
-					:title="$options.APPS_SECTION_ENUM.updates">
+					:name="$options.APPS_SECTION_ENUM.updates">
 					<template #counter>
 						<NcCounterBubble>{{ updateCount }}</NcCounterBubble>
 					</template>
@@ -61,7 +61,7 @@
 				<NcAppNavigationItem id="app-category-your-bundles"
 					:to="{ name: 'apps-category', params: { category: 'app-bundles' } }"
 					icon="icon-category-app-bundles"
-					:title="$options.APPS_SECTION_ENUM['app-bundles']" />
+					:name="$options.APPS_SECTION_ENUM['app-bundles']" />
 
 				<NcAppNavigationSpacer />
 
@@ -70,7 +70,7 @@
 					<NcAppNavigationItem id="app-category-featured"
 						:to="{ name: 'apps-category', params: { category: 'featured' } }"
 						icon="icon-favorite"
-						:title="$options.APPS_SECTION_ENUM.featured" />
+						:name="$options.APPS_SECTION_ENUM.featured" />
 
 					<NcAppNavigationItem v-for="cat in categories"
 						:key="'icon-category-' + cat.ident"
@@ -79,11 +79,11 @@
 							name: 'apps-category',
 							params: { category: cat.ident },
 						}"
-						:title="cat.displayName" />
+						:name="cat.displayName" />
 				</template>
 
 				<NcAppNavigationItem id="app-developer-docs"
-					:title="t('settings', 'Developer documentation') + ' ↗'"
+					:name="t('settings', 'Developer documentation') + ' ↗'"
 					@click="openDeveloperDocumentation" />
 			</template>
 		</NcAppNavigation>
@@ -250,16 +250,15 @@ export default {
 				: authorName(this.app.author)
 			const license = t('settings', '{license}-licensed', { license: ('' + this.app.licence).toUpperCase() })
 
-			const subtitle = t('settings', 'by {author}\n{license}', { author, license })
+			const subname = t('settings', 'by {author}\n{license}', { author, license })
 
 			return {
-				subtitle,
 				background: this.app.screenshot && this.screenshotLoaded
 					? this.app.screenshot
 					: this.app.preview,
 				compact: !(this.app.screenshot && this.screenshotLoaded),
-				title: this.app.name,
-
+				name: this.app.name,
+				subname,
 			}
 		},
 		changelog() {
diff --git a/apps/settings/src/views/Users.vue b/apps/settings/src/views/Users.vue
index 449308104ea..ba59d38bcae 100644
--- a/apps/settings/src/views/Users.vue
+++ b/apps/settings/src/views/Users.vue
@@ -37,7 +37,7 @@
 						:edit-placeholder="t('settings', 'Enter group name')"
 						:editable="true"
 						:loading="loadingAddGroup"
-						:title="t('settings', 'Add group')"
+						:name="t('settings', 'Add group')"
 						@click="showAddGroupForm"
 						@new-item="createGroup">
 						<template #icon>
@@ -46,7 +46,7 @@
 					</NcAppNavigationNewItem>
 					<NcAppNavigationItem id="everyone"
 						:exact="true"
-						:title="t('settings', 'Active users')"
+						:name="t('settings', 'Active users')"
 						:to="{ name: 'users' }"
 						icon="icon-contacts-dark">
 						<template #counter>
@@ -58,7 +58,7 @@
 					<NcAppNavigationItem v-if="settings.isAdmin"
 						id="admin"
 						:exact="true"
-						:title="t('settings', 'Admins')"
+						:name="t('settings', 'Admins')"
 						:to="{ name: 'group', params: { selectedGroup: 'admin' } }"
 						icon="icon-user-admin">
 						<template v-if="adminGroupMenu.count > 0" #counter>
@@ -72,7 +72,7 @@
 					<NcAppNavigationItem v-if="disabledGroupMenu.usercount > 0 || disabledGroupMenu.usercount === -1"
 						id="disabled"
 						:exact="true"
-						:title="t('settings', 'Disabled users')"
+						:name="t('settings', 'Disabled users')"
 						:to="{ name: 'group', params: { selectedGroup: 'disabled' } }"
 						icon="icon-disabled-users">
 						<template v-if="disabledGroupMenu.usercount > 0" #counter>
@@ -82,18 +82,18 @@
 						</template>
 					</NcAppNavigationItem>
 
-					<NcAppNavigationCaption v-if="groupList.length > 0" :title="t('settings', 'Groups')" />
+					<NcAppNavigationCaption v-if="groupList.length > 0" :name="t('settings', 'Groups')" />
 					<GroupListItem v-for="group in groupList"
 						:id="group.id"
 						:key="group.id"
 						:active="selectedGroupDecoded === group.id"
-						:title="group.title"
+						:name="group.title"
 						:count="group.count" />
 				</template>
 
 				<template #footer>
 					<ul class="app-navigation-entry__settings">
-						<NcAppNavigationItem :title="t('settings', 'User management settings')"
+						<NcAppNavigationItem :name="t('settings', 'User management settings')"
 							@click="isDialogOpen = true">
 							<template #icon>
 								<Cog :size="20" />
diff --git a/apps/sharebymail/src/components/AdminSettings.vue b/apps/sharebymail/src/components/AdminSettings.vue
index e42147e0d99..d674d024b2c 100644
--- a/apps/sharebymail/src/components/AdminSettings.vue
+++ b/apps/sharebymail/src/components/AdminSettings.vue
@@ -21,7 +21,7 @@
 -->
 
 <template>
-	<NcSettingsSection :title="t('sharebymail', 'Share by mail')"
+	<NcSettingsSection :name="t('sharebymail', 'Share by mail')"
 		:description="t('sharebymail', 'Allows users to share a personalized link to a file or folder by putting in an email address.')">
 		<NcCheckboxRadioSwitch type="switch"
 			:checked.sync="sendPasswordMail"
diff --git a/apps/theming/src/AdminTheming.vue b/apps/theming/src/AdminTheming.vue
index 37eabc12774..70ef6a7d54a 100644
--- a/apps/theming/src/AdminTheming.vue
+++ b/apps/theming/src/AdminTheming.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<section>
-		<NcSettingsSection :title="t('theming', 'Theming')"
+		<NcSettingsSection :name="t('theming', 'Theming')"
 			:description="t('theming', 'Theming makes it possible to easily customize the look and feel of your instance and supported clients. This will be visible for all users.')"
 			:doc-url="docUrl"
 			data-admin-theming-settings>
@@ -70,7 +70,7 @@
 				</div>
 			</div>
 		</NcSettingsSection>
-		<NcSettingsSection :title="t('theming', 'Advanced options')">
+		<NcSettingsSection :name="t('theming', 'Advanced options')">
 			<div class="admin-theming-advanced">
 				<TextField v-for="field in advancedTextFields"
 					:key="field.name"
diff --git a/apps/theming/src/UserThemes.vue b/apps/theming/src/UserThemes.vue
index bb040358bb2..2bc8b5bf0b2 100644
--- a/apps/theming/src/UserThemes.vue
+++ b/apps/theming/src/UserThemes.vue
@@ -23,7 +23,7 @@
 
 <template>
 	<section>
-		<NcSettingsSection :title="t('theming', 'Appearance and accessibility')"
+		<NcSettingsSection :name="t('theming', 'Appearance and accessibility')"
 			:limit-width="false"
 			class="theming">
 			<p v-html="description" />
@@ -51,7 +51,7 @@
 			</div>
 		</NcSettingsSection>
 
-		<NcSettingsSection :title="t('theming', 'Keyboard shortcuts')">
+		<NcSettingsSection :name="t('theming', 'Keyboard shortcuts')">
 			<p>{{ t('theming', 'In some cases keyboard shortcuts can interfere with accessibility tools. In order to allow focusing on your tool correctly you can disable all keyboard shortcuts here. This will also disable all available shortcuts in apps.') }}</p>
 			<NcCheckboxRadioSwitch class="theming__preview-toggle"
 				:checked.sync="shortcutsDisabled"
@@ -62,7 +62,7 @@
 			</NcCheckboxRadioSwitch>
 		</NcSettingsSection>
 
-		<NcSettingsSection :title="t('theming', 'Background')"
+		<NcSettingsSection :name="t('theming', 'Background')"
 			class="background"
 			data-user-theming-background-disabled>
 			<template v-if="isUserThemingDisabled">
diff --git a/apps/updatenotification/src/components/UpdateNotification.vue b/apps/updatenotification/src/components/UpdateNotification.vue
index c8374a12195..e93b03850cc 100644
--- a/apps/updatenotification/src/components/UpdateNotification.vue
+++ b/apps/updatenotification/src/components/UpdateNotification.vue
@@ -1,5 +1,5 @@
 <template>
-	<NcSettingsSection id="updatenotification" :title="t('updatenotification', 'Update')">
+	<NcSettingsSection id="updatenotification" :name="t('updatenotification', 'Update')">
 		<div class="update">
 			<template v-if="isNewVersionAvailable">
 				<NcNoteCard v-if="versionIsEol" type="warning">
@@ -60,13 +60,13 @@
 					</span>
 					<NcActions v-if="whatsNewData || changelogURL"
 						:force-menu="true"
-						:menu-title="t('updatenotification', 'What\'s new?')"
+						:menu-name="t('updatenotification', 'What\'s new?')"
 						type="tertiary">
 						<template #icon>
 							<IconNewBox :size="20" />
 						</template>
 						<template #default>
-							<NcActionCaption v-for="changes,index in whatsNewData" :key="index" :title="changes" />
+							<NcActionCaption v-for="changes,index in whatsNewData" :key="index" :name="changes" />
 							<NcActionLink v-if="changelogURL"
 								:href="changelogURL"
 								close-after-click
@@ -102,7 +102,7 @@
 		<div class="update-channel-selector">
 			<span>{{ t('updatenotification', 'Current update channel:') }}</span>
 			<NcActions :force-menu="true"
-				:menu-title="localizedChannelName"
+				:menu-name="localizedChannelName"
 				type="tertiary">
 				<template #icon>
 					<IconChevronDown :size="20" />
diff --git a/apps/user_status/src/components/SetStatusModal.vue b/apps/user_status/src/components/SetStatusModal.vue
index d40c3b68170..c45213f9069 100644
--- a/apps/user_status/src/components/SetStatusModal.vue
+++ b/apps/user_status/src/components/SetStatusModal.vue
@@ -21,7 +21,7 @@
 
 <template>
 	<NcModal size="normal"
-		:title="$t('user_status', 'Set status')"
+		:name="$t('user_status', 'Set status')"
 		@close="closeModal">
 		<div class="set-status-modal">
 			<!-- Status selector -->
diff --git a/apps/weather_status/src/App.vue b/apps/weather_status/src/App.vue
index ed4aed27ab5..417c0dd959f 100644
--- a/apps/weather_status/src/App.vue
+++ b/apps/weather_status/src/App.vue
@@ -65,7 +65,7 @@
 					{{ t('weather_status', 'Set custom address') }}
 				</NcActionInput>
 				<template v-if="favorites.length > 0">
-					<NcActionCaption :title="t('weather_status', 'Favorites')" />
+					<NcActionCaption :name="t('weather_status', 'Favorites')" />
 					<NcActionButton v-for="favorite in favorites"
 						:key="favorite"
 						:aria-hidden="true"
diff --git a/apps/workflowengine/src/components/Workflow.vue b/apps/workflowengine/src/components/Workflow.vue
index 937d89763dc..96d633ee60d 100644
--- a/apps/workflowengine/src/components/Workflow.vue
+++ b/apps/workflowengine/src/components/Workflow.vue
@@ -1,6 +1,6 @@
 <template>
 	<div id="workflowengine">
-		<NcSettingsSection :title="t('workflowengine', 'Available flows')"
+		<NcSettingsSection :name="t('workflowengine', 'Available flows')"
 			:doc-url="workflowDocUrl">
 			<p v-if="scope === 0" class="settings-hint">
 				<a href="https://nextcloud.com/developer/">{{ t('workflowengine', 'For details on how to write your own flow, check out the development documentation.') }}</a>