From 58bdccd76a73abb475bd5fcd5ed0f5848ca29671 Mon Sep 17 00:00:00 2001
From: Grigory Vodyanov <scratchx@gmx.com>
Date: Tue, 8 Sep 2026 13:39:35 +0200
Subject: [PATCH 1/2] refactor(ui): import @nextcloud/vue components by subpath
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

v9 removes the dist/Components paths and the global-registration plugin,
and the root barrel defeats tree-shaking: webpack bundles the whole
library while any file still imports it.

Two barrel imports stay behind, in MailboxThread.vue (the isMobile mixin)
and TextEditor.vue (the emoji helpers). Both belong to other items in the
preceding PR, and until those land the bundle does not move — measured
+0.08%, against -5.2% raw / -4.0% gzip once the last two go.

Assisted-by: ClaudeCode:claude-opus-5
Signed-off-by: Grigory Vodyanov <scratchx@gmx.com>
---
 src/components/AccountForm.vue                |  6 +++-
 src/components/AccountSettings.vue            |  5 ++-
 src/components/AliasForm.vue                  |  3 +-
 src/components/AliasSettings.vue              |  3 +-
 src/components/AppSettingsMenu.vue            | 32 +++++++++----------
 src/components/CalendarSettings.vue           |  2 +-
 src/components/CertificateSettings.vue        |  4 ++-
 src/components/Composer.vue                   | 10 +++++-
 src/components/ComposerSessionIndicator.vue   |  3 +-
 src/components/ConfirmationModal.vue          |  3 +-
 src/components/DelegationModal.vue            |  8 ++++-
 src/components/Envelope.vue                   | 16 ++++------
 src/components/EnvelopeList.vue               |  5 ++-
 src/components/EnvelopeSingleClickActions.vue |  2 +-
 src/components/EnvelopeSkeleton.vue           |  4 ++-
 src/components/EventModal.vue                 |  4 ++-
 src/components/Imip.vue                       |  4 ++-
 src/components/InternalAddress.vue            |  6 +++-
 src/components/Loading.vue                    |  3 +-
 src/components/MailboxPicker.vue              |  7 +++-
 src/components/MailboxThread.vue              |  6 +++-
 src/components/MdnRequest.vue                 |  2 +-
 src/components/MenuEnvelope.vue               |  8 ++---
 src/components/Message.vue                    |  4 ++-
 src/components/MessageAttachment.vue          |  4 ++-
 src/components/MessageAttachments.vue         |  3 +-
 src/components/MessageHTMLBody.vue            |  3 +-
 src/components/Navigation.vue                 |  4 ++-
 src/components/NavigationAccount.vue          |  8 ++++-
 .../NavigationAccountExpandCollapse.vue       |  2 +-
 src/components/NavigationMailbox.vue          |  8 ++++-
 src/components/NavigationOutbox.vue           |  3 +-
 src/components/NeedsTranslationInfo.vue       |  2 +-
 src/components/NewMessageButtonHeader.vue     |  2 +-
 src/components/NewMessageModal.vue            |  6 ++--
 src/components/NoMessageSelected.vue          |  2 +-
 src/components/OutOfOfficeForm.vue            |  3 +-
 src/components/Outbox.vue                     |  3 +-
 src/components/OutboxMessageListItem.vue      |  3 +-
 src/components/PhishingWarning.vue            |  2 +-
 src/components/RecipientBubble.vue            |  5 ++-
 src/components/RecipientInfo.vue              |  2 +-
 src/components/RecipientListItem.vue          |  2 +-
 src/components/SieveAccountForm.vue           |  5 ++-
 src/components/SieveFilterForm.vue            |  3 +-
 src/components/SignatureSettings.vue          |  6 +++-
 src/components/SourceModal.vue                |  2 +-
 src/components/TagItem.vue                    |  7 +++-
 src/components/TagModal.vue                   |  6 +++-
 src/components/TaskModal.vue                  |  4 ++-
 src/components/Thread.vue                     |  2 +-
 src/components/ThreadEnvelope.vue             |  3 +-
 src/components/TranslationModal.vue           |  6 +++-
 src/components/TrustedSenders.vue             |  3 +-
 src/components/itinerary/CalendarImport.vue   |  4 ++-
 src/components/mailFilter/Action.vue          |  4 ++-
 .../mailFilter/ActionAddSystemFlag.vue        |  2 +-
 src/components/mailFilter/ActionAddflag.vue   |  2 +-
 src/components/mailFilter/CreateModal.vue     | 10 +++---
 src/components/mailFilter/DeleteModal.vue     |  2 +-
 src/components/mailFilter/MailFilters.vue     |  4 ++-
 src/components/mailFilter/Operator.vue        |  4 ++-
 src/components/mailFilter/Test.vue            |  3 +-
 src/components/mailFilter/UpdateModal.vue     |  6 +++-
 src/components/quickActions/Action.vue        |  3 +-
 src/components/quickActions/Settings.vue      |  8 ++++-
 .../smime/SmimeCertificateModal.vue           |  5 ++-
 src/components/textBlocks/ListItem.vue        |  9 +++++-
 src/components/textBlocks/TextBlockModal.vue  |  2 +-
 src/views/Home.vue                            |  2 +-
 src/views/Setup.vue                           |  4 ++-
 71 files changed, 231 insertions(+), 107 deletions(-)

diff --git a/src/components/AccountForm.vue b/src/components/AccountForm.vue
index b48e25995e..868dc91e4f 100644
--- a/src/components/AccountForm.vue
+++ b/src/components/AccountForm.vue
@@ -277,9 +277,13 @@
 <script>
 import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
-import { NcButton, NcCheckboxRadioSwitch, NcInputField, NcLoadingIcon, NcPasswordField } from '@nextcloud/vue'
 import { mapState, mapStores } from 'pinia'
 import { Tab, Tabs } from 'vue-tabs-component'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
+import NcInputField from '@nextcloud/vue/components/NcInputField'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcPasswordField from '@nextcloud/vue/components/NcPasswordField'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import { CONSENT_ABORTED, getUserConsent } from '../integration/oauth.js'
 import logger from '../logger.js'
diff --git a/src/components/AccountSettings.vue b/src/components/AccountSettings.vue
index 99ba51f556..99c7cd6697 100644
--- a/src/components/AccountSettings.vue
+++ b/src/components/AccountSettings.vue
@@ -138,8 +138,11 @@
 </template>
 
 <script>
-import { NcAppSettingsDialog, NcAppSettingsSection, NcButton, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcAppSettingsDialog from '@nextcloud/vue/components/NcAppSettingsDialog'
+import NcAppSettingsSection from '@nextcloud/vue/components/NcAppSettingsSection'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import AccountDefaultsSettings from '../components/AccountDefaultsSettings.vue'
 import AccountForm from '../components/AccountForm.vue'
 import AliasSettings from '../components/AliasSettings.vue'
diff --git a/src/components/AliasForm.vue b/src/components/AliasForm.vue
index 079f05f15b..c1b714b457 100644
--- a/src/components/AliasForm.vue
+++ b/src/components/AliasForm.vue
@@ -73,7 +73,8 @@
 </template>
 
 <script>
-import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconRename from 'vue-material-design-icons/PencilOutline.vue'
 import IconDelete from 'vue-material-design-icons/TrashCanOutline.vue'
diff --git a/src/components/AliasSettings.vue b/src/components/AliasSettings.vue
index 7c105f925b..1d66b6b6f3 100644
--- a/src/components/AliasSettings.vue
+++ b/src/components/AliasSettings.vue
@@ -85,8 +85,9 @@
 </template>
 
 <script>
-import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconRename from 'vue-material-design-icons/PencilOutline.vue'
 import AliasForm from './AliasForm.vue'
diff --git a/src/components/AppSettingsMenu.vue b/src/components/AppSettingsMenu.vue
index 699979f558..075521783d 100755
--- a/src/components/AppSettingsMenu.vue
+++ b/src/components/AppSettingsMenu.vue
@@ -296,25 +296,23 @@
 <script>
 import { showError } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
-import {
-	NcAppSettingsDialog,
-	NcAppSettingsSection,
-	NcAppSettingsShortcutsSection,
-	NcButton,
-	NcDialog,
-	NcFormBox,
-	NcFormBoxButton,
-	NcFormBoxSwitch,
-	NcFormGroup,
-	NcHotkey,
-	NcHotkeyList,
-	NcInputField,
-	NcNoteCard,
-	NcRadioGroup,
-	NcRadioGroupButton,
-} from '@nextcloud/vue'
 import mitt from 'mitt'
 import { mapState, mapStores } from 'pinia'
+import NcAppSettingsDialog from '@nextcloud/vue/components/NcAppSettingsDialog'
+import NcAppSettingsSection from '@nextcloud/vue/components/NcAppSettingsSection'
+import NcAppSettingsShortcutsSection from '@nextcloud/vue/components/NcAppSettingsShortcutsSection'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcFormBox from '@nextcloud/vue/components/NcFormBox'
+import NcFormBoxButton from '@nextcloud/vue/components/NcFormBoxButton'
+import NcFormBoxSwitch from '@nextcloud/vue/components/NcFormBoxSwitch'
+import NcFormGroup from '@nextcloud/vue/components/NcFormGroup'
+import NcHotkey from '@nextcloud/vue/components/NcHotkey'
+import NcHotkeyList from '@nextcloud/vue/components/NcHotkeyList'
+import NcInputField from '@nextcloud/vue/components/NcInputField'
+import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
+import NcRadioGroup from '@nextcloud/vue/components/NcRadioGroup'
+import NcRadioGroupButton from '@nextcloud/vue/components/NcRadioGroupButton'
 import IconArrow from 'vue-material-design-icons/ArrowRight.vue'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconClose from 'vue-material-design-icons/Close.vue'
diff --git a/src/components/CalendarSettings.vue b/src/components/CalendarSettings.vue
index 3bf127f6e2..05607a946f 100644
--- a/src/components/CalendarSettings.vue
+++ b/src/components/CalendarSettings.vue
@@ -16,8 +16,8 @@
 </template>
 
 <script>
-import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import Logger from '../logger.js'
 import useMainStore from '../store/mainStore.js'
 
diff --git a/src/components/CertificateSettings.vue b/src/components/CertificateSettings.vue
index 6a87b20621..a2f7f8fe94 100644
--- a/src/components/CertificateSettings.vue
+++ b/src/components/CertificateSettings.vue
@@ -40,8 +40,10 @@
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import moment from '@nextcloud/moment'
-import { NcButton, NcNoteCard, NcSelect } from '@nextcloud/vue'
 import { mapState, mapStores } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import Logger from '../logger.js'
 import useMainStore from '../store/mainStore.js'
 import { compareSmimeCertificates } from '../util/smime.js'
diff --git a/src/components/Composer.vue b/src/components/Composer.vue
index c5fcd8e07b..690e42334f 100644
--- a/src/components/Composer.vue
+++ b/src/components/Composer.vue
@@ -551,7 +551,6 @@
 import { showError, showWarning } from '@nextcloud/dialogs'
 import { getCanonicalLocale, getFirstDay, getLocale, t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
-import { NcActionButton, NcActionCheckbox, NcActionInput, NcActionRadio, NcActions, NcButton, NcIconSvgWrapper, NcListItemIcon, NcSelect } from '@nextcloud/vue'
 import debouncePromise from 'debounce-promise'
 import debounce from 'lodash/fp/debounce.js'
 import trimStart from 'lodash/fp/trimCharsStart.js'
@@ -560,7 +559,16 @@ import mitt from 'mitt'
 import { mapState, mapStores } from 'pinia'
 import Vue from 'vue'
 import Autosize from 'vue-autosize'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
+import NcActionInput from '@nextcloud/vue/components/NcActionInput'
+import NcActionRadio from '@nextcloud/vue/components/NcActionRadio'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
+import NcListItemIcon from '@nextcloud/vue/components/NcListItemIcon'
 import { NcReferencePickerModal } from '@nextcloud/vue/components/NcRichText'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
 import IconFolder from 'vue-material-design-icons/FolderOutline.vue'
 import IconFormat from 'vue-material-design-icons/FormatSize.vue'
diff --git a/src/components/ComposerSessionIndicator.vue b/src/components/ComposerSessionIndicator.vue
index 5a74344019..36083ced1b 100644
--- a/src/components/ComposerSessionIndicator.vue
+++ b/src/components/ComposerSessionIndicator.vue
@@ -41,8 +41,9 @@
 </template>
 
 <script>
-import { NcActionButton, NcActions } from '@nextcloud/vue'
 import { mapState, mapStores } from 'pinia'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActions from '@nextcloud/vue/components/NcActions'
 import ArrowExpandIcon from 'vue-material-design-icons/ArrowExpand.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
 import PencilIcon from 'vue-material-design-icons/PencilOutline.vue'
diff --git a/src/components/ConfirmationModal.vue b/src/components/ConfirmationModal.vue
index a17947558c..41ff0ec96b 100644
--- a/src/components/ConfirmationModal.vue
+++ b/src/components/ConfirmationModal.vue
@@ -29,7 +29,8 @@
 <script>
 
 import { t } from '@nextcloud/l10n'
-import { NcButton, NcModal } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcModal from '@nextcloud/vue/components/NcModal'
 
 export default {
 	name: 'ConfirmationModal',
diff --git a/src/components/DelegationModal.vue b/src/components/DelegationModal.vue
index 638875c3e0..4c39ccd600 100644
--- a/src/components/DelegationModal.vue
+++ b/src/components/DelegationModal.vue
@@ -98,8 +98,14 @@ import axios from '@nextcloud/axios'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { generateOcsUrl } from '@nextcloud/router'
 import { ShareType } from '@nextcloud/sharing'
-import { NcAvatar, NcButton, NcDialog, NcListItem, NcLoadingIcon, NcModal, NcSelectUsers } from '@nextcloud/vue'
 import debounce from 'lodash/fp/debounce.js'
+import NcAvatar from '@nextcloud/vue/components/NcAvatar'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcListItem from '@nextcloud/vue/components/NcListItem'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcModal from '@nextcloud/vue/components/NcModal'
+import NcSelectUsers from '@nextcloud/vue/components/NcSelectUsers'
 import IconClose from 'vue-material-design-icons/Close.vue'
 import IconPlus from 'vue-material-design-icons/Plus.vue'
 import logger from '../logger.js'
diff --git a/src/components/Envelope.vue b/src/components/Envelope.vue
index c41631c243..ef82f30e71 100644
--- a/src/components/Envelope.vue
+++ b/src/components/Envelope.vue
@@ -541,17 +541,15 @@ import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js'
 import { isRTL } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
-import {
-	NcActionButton,
-	NcActionInput,
-	NcActionLink,
-	NcActionSeparator,
-	NcActionText,
-	NcAssistantIcon,
-	NcCheckboxRadioSwitch,
-} from '@nextcloud/vue'
 import escapeHtml from 'escape-html'
 import { mapState, mapStores } from 'pinia'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActionInput from '@nextcloud/vue/components/NcActionInput'
+import NcActionLink from '@nextcloud/vue/components/NcActionLink'
+import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
+import NcActionText from '@nextcloud/vue/components/NcActionText'
+import NcAssistantIcon from '@nextcloud/vue/components/NcAssistantIcon'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import AlarmIcon from 'vue-material-design-icons/Alarm.vue'
 import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagonOutline.vue'
 import ArchiveIcon from 'vue-material-design-icons/ArchiveArrowDownOutline.vue'
diff --git a/src/components/EnvelopeList.vue b/src/components/EnvelopeList.vue
index 660f3f4f79..3d73389b65 100644
--- a/src/components/EnvelopeList.vue
+++ b/src/components/EnvelopeList.vue
@@ -167,9 +167,12 @@
 
 <script>
 import { showError } from '@nextcloud/dialogs'
-import { NcActionButton, NcActions, NcButton, NcDialog } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import { differenceWith } from 'ramda'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
 import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagonOutline.vue'
 import IconSelect from 'vue-material-design-icons/CloseThick.vue'
 import EmailRead from 'vue-material-design-icons/EmailOpenOutline.vue'
diff --git a/src/components/EnvelopeSingleClickActions.vue b/src/components/EnvelopeSingleClickActions.vue
index 895dda4eda..1a0806d973 100644
--- a/src/components/EnvelopeSingleClickActions.vue
+++ b/src/components/EnvelopeSingleClickActions.vue
@@ -44,7 +44,7 @@
 
 <script>
 
-import { NcButton } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import EmailRead from 'vue-material-design-icons/EmailOpenOutline.vue'
 import EmailUnread from 'vue-material-design-icons/EmailOutline.vue'
 import ImportantIcon from 'vue-material-design-icons/LabelVariant.vue'
diff --git a/src/components/EnvelopeSkeleton.vue b/src/components/EnvelopeSkeleton.vue
index 58f8b32c78..d0ea7536db 100644
--- a/src/components/EnvelopeSkeleton.vue
+++ b/src/components/EnvelopeSkeleton.vue
@@ -126,7 +126,9 @@
 </template>
 
 <script>
-import { NcActions, NcCounterBubble, NcVNodes } from '@nextcloud/vue'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble'
+import NcVNodes from '@nextcloud/vue/components/NcVNodes'
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import EnvelopeSingleClickActions from './EnvelopeSingleClickActions.vue'
 
diff --git a/src/components/EventModal.vue b/src/components/EventModal.vue
index 0b83a8221f..740583e134 100644
--- a/src/components/EventModal.vue
+++ b/src/components/EventModal.vue
@@ -120,9 +120,11 @@ import { AttendeeProperty, createEvent, DateTimeValue, TextProperty } from '@nex
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import { getTimezoneManager } from '@nextcloud/timezones'
-import { NcDateTimePicker, NcModal, NcSelect } from '@nextcloud/vue'
 import jstz from 'jstz'
 import { mapState, mapStores } from 'pinia'
+import NcDateTimePicker from '@nextcloud/vue/components/NcDateTimePicker'
+import NcModal from '@nextcloud/vue/components/NcModal'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import CalendarPickerOption from './CalendarPickerOption.vue'
 import RecipientListItem from './RecipientListItem.vue'
 import logger from '../logger.js'
diff --git a/src/components/Imip.vue b/src/components/Imip.vue
index 4f82989f47..fd543d13e9 100644
--- a/src/components/Imip.vue
+++ b/src/components/Imip.vue
@@ -120,10 +120,12 @@
 import { AttendeeProperty, CalendarComponent, DateTimeValue, EventComponent, getParserManager, Parameter, Property } from '@nextcloud/calendar-js'
 import { namespaces as NS } from '@nextcloud/cdav-library'
 import { showError } from '@nextcloud/dialogs'
-import { NcButton, NcLoadingIcon, NcSelect } from '@nextcloud/vue'
 import pLimit from 'p-limit'
 import { mapState } from 'pinia'
 import { flatten } from 'ramda'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import CalendarIcon from 'vue-material-design-icons/CalendarOutline.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
 import CalendarPickerOption from './CalendarPickerOption.vue'
diff --git a/src/components/InternalAddress.vue b/src/components/InternalAddress.vue
index 8097b044ef..39441dc891 100644
--- a/src/components/InternalAddress.vue
+++ b/src/components/InternalAddress.vue
@@ -73,10 +73,14 @@
 import IconCancel from '@mdi/svg/svg/cancel.svg'
 import IconCheck from '@mdi/svg/svg/check.svg'
 import { showError } from '@nextcloud/dialogs'
-import { NcActionButton, NcButton, NcDialog, NcListItem, NcTextField } from '@nextcloud/vue'
 import prop from 'lodash/fp/prop.js'
 import sortBy from 'lodash/fp/sortBy.js'
 import { mapStores } from 'pinia'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcListItem from '@nextcloud/vue/components/NcListItem'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
 import IconDomain from 'vue-material-design-icons/Domain.vue'
 import IconEmail from 'vue-material-design-icons/EmailOutline.vue'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
diff --git a/src/components/Loading.vue b/src/components/Loading.vue
index c3c890ad21..3ebc670777 100644
--- a/src/components/Loading.vue
+++ b/src/components/Loading.vue
@@ -22,7 +22,8 @@
 </template>
 
 <script>
-import { NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
+import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 export default {
 	name: 'Loading',
 	components: {
diff --git a/src/components/MailboxPicker.vue b/src/components/MailboxPicker.vue
index 6ff5b88a30..413ce7ffb9 100644
--- a/src/components/MailboxPicker.vue
+++ b/src/components/MailboxPicker.vue
@@ -47,8 +47,13 @@
 
 <script>
 import { t } from '@nextcloud/l10n'
-import { NcBreadcrumb, NcBreadcrumbs, NcDialog, NcEmptyContent, NcInputField, NcListItem } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcBreadcrumb from '@nextcloud/vue/components/NcBreadcrumb'
+import NcBreadcrumbs from '@nextcloud/vue/components/NcBreadcrumbs'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
+import NcInputField from '@nextcloud/vue/components/NcInputField'
+import NcListItem from '@nextcloud/vue/components/NcListItem'
 import IconFolder from 'vue-material-design-icons/FolderOutline.vue'
 import MailboxIcon from './icons/MailboxIcon.vue'
 import { translate as translateMailboxName } from '../i18n/MailboxTranslator.js'
diff --git a/src/components/MailboxThread.vue b/src/components/MailboxThread.vue
index 02e492eca3..c0d07a6214 100644
--- a/src/components/MailboxThread.vue
+++ b/src/components/MailboxThread.vue
@@ -200,10 +200,14 @@
 </template>
 
 <script>
-import { isMobile, NcAppContent, NcAppContentList, NcButton, NcPopover } from '@nextcloud/vue'
+import { isMobile } from '@nextcloud/vue'
 import addressParser from 'address-rfc2822'
 import mitt from 'mitt'
 import { mapStores } from 'pinia'
+import NcAppContent from '@nextcloud/vue/components/NcAppContent'
+import NcAppContentList from '@nextcloud/vue/components/NcAppContentList'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcPopover from '@nextcloud/vue/components/NcPopover'
 import IconInfo from 'vue-material-design-icons/InformationOutline.vue'
 import Mailbox from './Mailbox.vue'
 import NoMessageSelected from './NoMessageSelected.vue'
diff --git a/src/components/MdnRequest.vue b/src/components/MdnRequest.vue
index 300697558f..d54e665711 100644
--- a/src/components/MdnRequest.vue
+++ b/src/components/MdnRequest.vue
@@ -22,8 +22,8 @@
 
 <script>
 import { showError } from '@nextcloud/dialogs'
-import { NcButton } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import logger from '../logger.js'
 import { sendMdn } from '../service/MessageService.js'
 import useMainStore from '../store/mainStore.js'
diff --git a/src/components/MenuEnvelope.vue b/src/components/MenuEnvelope.vue
index 885215cd88..954f5a545d 100644
--- a/src/components/MenuEnvelope.vue
+++ b/src/components/MenuEnvelope.vue
@@ -297,15 +297,13 @@ import { showError, showSuccess } from '@nextcloud/dialogs'
 import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js'
 import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
-import {
-	NcActionButton,
-	NcActionLink,
-	NcLoadingIcon,
-} from '@nextcloud/vue'
 import { Base64 } from 'js-base64'
 import { mapState, mapStores } from 'pinia'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'
+import NcActionLink from '@nextcloud/vue/components/NcActionLink'
 import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import AlarmIcon from 'vue-material-design-icons/Alarm.vue'
 import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagonOutline.vue'
 import CalendarBlankIcon from 'vue-material-design-icons/CalendarBlankOutline.vue'
diff --git a/src/components/Message.vue b/src/components/Message.vue
index e35ef9c5d3..0e603ca483 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -91,8 +91,10 @@
 
 <script>
 import { generateUrl } from '@nextcloud/router'
-import { NcAssistantButton, NcButton, NcPopover } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcAssistantButton from '@nextcloud/vue/components/NcAssistantButton'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcPopover from '@nextcloud/vue/components/NcPopover'
 import IconInfo from 'vue-material-design-icons/InformationOutline.vue'
 import LockOffIcon from 'vue-material-design-icons/LockOffOutline.vue'
 import ReplyIcon from 'vue-material-design-icons/ReplyOutline.vue'
diff --git a/src/components/MessageAttachment.vue b/src/components/MessageAttachment.vue
index ffeba2b636..ac377cca09 100644
--- a/src/components/MessageAttachment.vue
+++ b/src/components/MessageAttachment.vue
@@ -85,7 +85,9 @@ import { showError, showSuccess } from '@nextcloud/dialogs'
 import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js'
 import { formatFileSize } from '@nextcloud/files'
 import { t } from '@nextcloud/l10n'
-import { NcActionButton, NcActions, NcLoadingIcon } from '@nextcloud/vue'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import IconArrow from 'vue-material-design-icons/ArrowLeft.vue'
 import IconSave from 'vue-material-design-icons/FolderOutline.vue'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
diff --git a/src/components/MessageAttachments.vue b/src/components/MessageAttachments.vue
index 64cc2afa63..51d496f367 100644
--- a/src/components/MessageAttachments.vue
+++ b/src/components/MessageAttachments.vue
@@ -84,7 +84,8 @@
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js'
 import { generateUrl } from '@nextcloud/router'
-import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import CloudDownload from 'vue-material-design-icons/CloudDownloadOutline.vue'
diff --git a/src/components/MessageHTMLBody.vue b/src/components/MessageHTMLBody.vue
index 42ae14684a..d921035d25 100644
--- a/src/components/MessageHTMLBody.vue
+++ b/src/components/MessageHTMLBody.vue
@@ -54,7 +54,8 @@
 
 <script>
 import iframeResize from '@iframe-resizer/parent'
-import { NcActionButton, NcActions } from '@nextcloud/vue'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActions from '@nextcloud/vue/components/NcActions'
 import IconDomain from 'vue-material-design-icons/Domain.vue'
 import IconMail from 'vue-material-design-icons/EmailOutline.vue'
 import IconImage from 'vue-material-design-icons/ImageSizeSelectActual.vue'
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index bc5efbd74a..12f27a0848 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -96,8 +96,10 @@
 </template>
 
 <script>
-import { NcAppNavigation, NcAppNavigationItem, NcButton } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcAppNavigation from '@nextcloud/vue/components/NcAppNavigation'
+import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import IconAlertTriangle from 'vue-material-design-icons/AlertOutline.vue'
 import IconSetting from 'vue-material-design-icons/CogOutline.vue'
 import AppSettingsMenu from '../components/AppSettingsMenu.vue'
diff --git a/src/components/NavigationAccount.vue b/src/components/NavigationAccount.vue
index b48749df74..3eb3573d87 100644
--- a/src/components/NavigationAccount.vue
+++ b/src/components/NavigationAccount.vue
@@ -104,9 +104,15 @@
 import { DialogBuilder, showError } from '@nextcloud/dialogs'
 import { formatFileSize } from '@nextcloud/files'
 import { generateUrl } from '@nextcloud/router'
-import { NcActionButton, NcActionCheckbox, NcActionInput, NcActionText, NcAppNavigationCaption, NcIconSvgWrapper, NcLoadingIcon } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import { Fragment } from 'vue-frag'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
+import NcActionInput from '@nextcloud/vue/components/NcActionInput'
+import NcActionText from '@nextcloud/vue/components/NcActionText'
+import NcAppNavigationCaption from '@nextcloud/vue/components/NcAppNavigationCaption'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import MenuDown from 'vue-material-design-icons/ChevronDown.vue'
 import MenuUp from 'vue-material-design-icons/ChevronUp.vue'
 import IconSettings from 'vue-material-design-icons/CogOutline.vue'
diff --git a/src/components/NavigationAccountExpandCollapse.vue b/src/components/NavigationAccountExpandCollapse.vue
index de72da99b0..6591794634 100644
--- a/src/components/NavigationAccountExpandCollapse.vue
+++ b/src/components/NavigationAccountExpandCollapse.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script>
-import { NcAppNavigationItem } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem'
 import logger from '../logger.js'
 import useMainStore from '../store/mainStore.js'
 
diff --git a/src/components/NavigationMailbox.vue b/src/components/NavigationMailbox.vue
index 299c205af8..b591532b6b 100644
--- a/src/components/NavigationMailbox.vue
+++ b/src/components/NavigationMailbox.vue
@@ -191,8 +191,14 @@
 
 import { showError, showInfo } from '@nextcloud/dialogs'
 import { n } from '@nextcloud/l10n'
-import { NcActionButton, NcActionCheckbox, NcActionInput, NcActionText, NcAppNavigationItem, NcCounterBubble, NcLoadingIcon } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
+import NcActionInput from '@nextcloud/vue/components/NcActionInput'
+import NcActionText from '@nextcloud/vue/components/NcActionText'
+import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem'
+import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import IconEmailCheck from 'vue-material-design-icons/EmailCheckOutline.vue'
 import IconFolderSync from 'vue-material-design-icons/FolderSyncOutline.vue'
 import IconInfo from 'vue-material-design-icons/InformationOutline.vue'
diff --git a/src/components/NavigationOutbox.vue b/src/components/NavigationOutbox.vue
index bccb9e79ec..3bd97c8b25 100644
--- a/src/components/NavigationOutbox.vue
+++ b/src/components/NavigationOutbox.vue
@@ -24,8 +24,9 @@
 </template>
 
 <script>
-import { NcAppNavigationItem, NcCounterBubble } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem'
+import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble'
 import IconOutbox from 'vue-material-design-icons/InboxArrowUp.vue'
 import useOutboxStore from '../store/outboxStore.js'
 
diff --git a/src/components/NeedsTranslationInfo.vue b/src/components/NeedsTranslationInfo.vue
index d12239d37e..b14a99f2a8 100644
--- a/src/components/NeedsTranslationInfo.vue
+++ b/src/components/NeedsTranslationInfo.vue
@@ -19,8 +19,8 @@
 
 <script>
 import { getLanguage } from '@nextcloud/l10n'
-import { NcButton } from '@nextcloud/vue'
 import { mapState } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import useMainStore from '../store/mainStore.js'
 
 export default {
diff --git a/src/components/NewMessageButtonHeader.vue b/src/components/NewMessageButtonHeader.vue
index ce93b914fc..f899cb1265 100644
--- a/src/components/NewMessageButtonHeader.vue
+++ b/src/components/NewMessageButtonHeader.vue
@@ -35,8 +35,8 @@
 </template>
 
 <script>
-import { NcButton } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
 import IconRefresh from 'vue-material-design-icons/Refresh.vue'
diff --git a/src/components/NewMessageModal.vue b/src/components/NewMessageModal.vue
index 66b7fed33e..86385fff60 100644
--- a/src/components/NewMessageModal.vue
+++ b/src/components/NewMessageModal.vue
@@ -151,11 +151,9 @@
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
-import {
-	NcButton,
-	NcEmptyContent,
-} from '@nextcloud/vue'
 import { mapActions, mapState, mapStores } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import DefaultComposerIcon from 'vue-material-design-icons/ArrowCollapse.vue'
 import MaximizeIcon from 'vue-material-design-icons/ArrowExpand.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
diff --git a/src/components/NoMessageSelected.vue b/src/components/NoMessageSelected.vue
index 8d044594d6..63e2066006 100644
--- a/src/components/NoMessageSelected.vue
+++ b/src/components/NoMessageSelected.vue
@@ -22,8 +22,8 @@
 
 <script>
 import { generateFilePath } from '@nextcloud/router'
-import { NcAppContentDetails } from '@nextcloud/vue'
 import { useIsDarkTheme } from '@nextcloud/vue/composables/useIsDarkTheme'
+import NcAppContentDetails from '@nextcloud/vue/components/NcAppContentDetails'
 import NewMessageButtonHeader from './NewMessageButtonHeader.vue'
 
 export default {
diff --git a/src/components/OutOfOfficeForm.vue b/src/components/OutOfOfficeForm.vue
index 2ac8f4bd60..eeaa1ae130 100644
--- a/src/components/OutOfOfficeForm.vue
+++ b/src/components/OutOfOfficeForm.vue
@@ -121,9 +121,10 @@
 <script>
 import { loadState } from '@nextcloud/initial-state'
 import { generateUrl } from '@nextcloud/router'
-import { NcButton, NcDateTimePicker } from '@nextcloud/vue'
 import mitt from 'mitt'
 import { mapStores } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDateTimePicker from '@nextcloud/vue/components/NcDateTimePicker'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
 import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
 import TextEditor from './TextEditor.vue'
diff --git a/src/components/Outbox.vue b/src/components/Outbox.vue
index 6d54d5ba88..37cf037eb1 100644
--- a/src/components/Outbox.vue
+++ b/src/components/Outbox.vue
@@ -30,8 +30,9 @@
 </template>
 
 <script>
-import { NcAppContent, NcAppContentList } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcAppContent from '@nextcloud/vue/components/NcAppContent'
+import NcAppContentList from '@nextcloud/vue/components/NcAppContentList'
 import EmptyMailbox from './EmptyMailbox.vue'
 import Error from './Error.vue'
 import LoadingSkeleton from './LoadingSkeleton.vue'
diff --git a/src/components/OutboxMessageListItem.vue b/src/components/OutboxMessageListItem.vue
index 2f7d2c2706..4d12e1b0c1 100644
--- a/src/components/OutboxMessageListItem.vue
+++ b/src/components/OutboxMessageListItem.vue
@@ -59,8 +59,9 @@
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { getLanguage, t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
-import { NcActionButton, NcListItem } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcListItem from '@nextcloud/vue/components/NcListItem'
 import Copy from 'vue-material-design-icons/ContentCopy.vue'
 import Send from 'vue-material-design-icons/SendOutline.vue'
 import IconDelete from 'vue-material-design-icons/TrashCanOutline.vue'
diff --git a/src/components/PhishingWarning.vue b/src/components/PhishingWarning.vue
index 85c14dcab5..d903924701 100644
--- a/src/components/PhishingWarning.vue
+++ b/src/components/PhishingWarning.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import { NcButton } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import IconAlertOutline from 'vue-material-design-icons/AlertOutline.vue'
 
 export default {
diff --git a/src/components/RecipientBubble.vue b/src/components/RecipientBubble.vue
index 534494053b..ded9e6bb76 100644
--- a/src/components/RecipientBubble.vue
+++ b/src/components/RecipientBubble.vue
@@ -115,9 +115,12 @@
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
-import { NcButton, NcPopover, NcSelect, NcUserBubble } from '@nextcloud/vue'
 import debouncePromise from 'debounce-promise'
 import uniqBy from 'lodash/fp/uniqBy.js'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcPopover from '@nextcloud/vue/components/NcPopover'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
+import NcUserBubble from '@nextcloud/vue/components/NcUserBubble'
 import IconUser from 'vue-material-design-icons/AccountOutline.vue'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconClipboard from 'vue-material-design-icons/ClipboardTextOutline.vue'
diff --git a/src/components/RecipientInfo.vue b/src/components/RecipientInfo.vue
index 2a3bd33b67..4dc1833463 100644
--- a/src/components/RecipientInfo.vue
+++ b/src/components/RecipientInfo.vue
@@ -70,8 +70,8 @@
 
 <script>
 import { t } from '@nextcloud/l10n'
-import { NcButton } from '@nextcloud/vue'
 import { mapGetters } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import IconArrowDown from 'vue-material-design-icons/ArrowDown.vue'
 import IconArrowUp from 'vue-material-design-icons/ArrowUp.vue'
 import Avatar from './Avatar.vue'
diff --git a/src/components/RecipientListItem.vue b/src/components/RecipientListItem.vue
index c8d1720eb2..082184c940 100644
--- a/src/components/RecipientListItem.vue
+++ b/src/components/RecipientListItem.vue
@@ -17,8 +17,8 @@
 </template>
 
 <script>
-import { NcListItemIcon } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcListItemIcon from '@nextcloud/vue/components/NcListItemIcon'
 import Close from 'vue-material-design-icons/Close.vue'
 import useMainStore from '../store/mainStore.js'
 
diff --git a/src/components/SieveAccountForm.vue b/src/components/SieveAccountForm.vue
index cba8968bfc..3e600a1362 100644
--- a/src/components/SieveAccountForm.vue
+++ b/src/components/SieveAccountForm.vue
@@ -67,8 +67,11 @@
 </template>
 
 <script>
-import { NcButton, NcCheckboxRadioSwitch, NcPasswordField, NcTextField } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
+import NcPasswordField from '@nextcloud/vue/components/NcPasswordField'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
 import useMainStore from '../store/mainStore.js'
 
 export default {
diff --git a/src/components/SieveFilterForm.vue b/src/components/SieveFilterForm.vue
index 7bfccab176..d538b58754 100644
--- a/src/components/SieveFilterForm.vue
+++ b/src/components/SieveFilterForm.vue
@@ -29,8 +29,9 @@
 </template>
 
 <script>
-import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import useMainStore from '../store/mainStore.js'
 
diff --git a/src/components/SignatureSettings.vue b/src/components/SignatureSettings.vue
index cf2c03f62f..6f15dfb241 100644
--- a/src/components/SignatureSettings.vue
+++ b/src/components/SignatureSettings.vue
@@ -62,9 +62,13 @@
 </template>
 
 <script>
-import { NcButton, NcCheckboxRadioSwitch, NcLoadingIcon, NcNoteCard, NcSelect } from '@nextcloud/vue'
 import mitt from 'mitt'
 import { mapStores } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import TextEditor from './TextEditor.vue'
 import logger from '../logger.js'
diff --git a/src/components/SourceModal.vue b/src/components/SourceModal.vue
index cdb51d59cf..dfec6d8170 100644
--- a/src/components/SourceModal.vue
+++ b/src/components/SourceModal.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import { NcModal } from '@nextcloud/vue'
+import NcModal from '@nextcloud/vue/components/NcModal'
 
 export default {
 	name: 'SourceModal',
diff --git a/src/components/TagItem.vue b/src/components/TagItem.vue
index c720e2f53b..4c45ff815f 100644
--- a/src/components/TagItem.vue
+++ b/src/components/TagItem.vue
@@ -66,8 +66,13 @@
 
 <script>
 import { showInfo } from '@nextcloud/dialogs'
-import { NcActionButton, NcActionInput, NcActions, NcActionText, NcColorPicker, NcLoadingIcon } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActionInput from '@nextcloud/vue/components/NcActionInput'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcActionText from '@nextcloud/vue/components/NcActionText'
+import NcColorPicker from '@nextcloud/vue/components/NcColorPicker'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import IconEdit from 'vue-material-design-icons/PencilOutline.vue'
 import DeleteIcon from 'vue-material-design-icons/TrashCanOutline.vue'
 import logger from '../logger.js'
diff --git a/src/components/TagModal.vue b/src/components/TagModal.vue
index 79078c156e..6602fbf788 100644
--- a/src/components/TagModal.vue
+++ b/src/components/TagModal.vue
@@ -57,8 +57,12 @@
 
 <script>
 import { showError, showInfo } from '@nextcloud/dialogs'
-import { NcActionInput, NcActionText, NcButton, NcLoadingIcon, NcModal } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcActionInput from '@nextcloud/vue/components/NcActionInput'
+import NcActionText from '@nextcloud/vue/components/NcActionText'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcModal from '@nextcloud/vue/components/NcModal'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
 import IconTag from 'vue-material-design-icons/TagOutline.vue'
 import DeleteTagModal from './DeleteTagModal.vue'
diff --git a/src/components/TaskModal.vue b/src/components/TaskModal.vue
index 7ccd2b213d..2795c45e88 100644
--- a/src/components/TaskModal.vue
+++ b/src/components/TaskModal.vue
@@ -77,10 +77,12 @@
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import moment from '@nextcloud/moment'
-import { NcDateTimePicker, NcModal, NcSelect } from '@nextcloud/vue'
 import ICAL from 'ical.js'
 import jstz from 'jstz'
 import { mapStores } from 'pinia'
+import NcDateTimePicker from '@nextcloud/vue/components/NcDateTimePicker'
+import NcModal from '@nextcloud/vue/components/NcModal'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import CalendarPickerOption from './CalendarPickerOption.vue'
 import logger from '../logger.js'
 import useMainStore from '../store/mainStore.js'
diff --git a/src/components/Thread.vue b/src/components/Thread.vue
index 100c9eac09..61a85c1cbe 100644
--- a/src/components/Thread.vue
+++ b/src/components/Thread.vue
@@ -41,8 +41,8 @@
 <script>
 import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
-import { NcAppContentDetails } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcAppContentDetails from '@nextcloud/vue/components/NcAppContentDetails'
 import Error from './Error.vue'
 import Loading from './Loading.vue'
 import ThreadEnvelope from './ThreadEnvelope.vue'
diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue
index 3fbebad4cd..65aa14b9cf 100644
--- a/src/components/ThreadEnvelope.vue
+++ b/src/components/ThreadEnvelope.vue
@@ -394,11 +394,12 @@ import { showError, showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
-import { NcActionButton, NcButton } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcActionText from '@nextcloud/vue/components/NcActionText'
 import AiIcon from '@nextcloud/vue/components/NcAssistantIcon'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import ArchiveIcon from 'vue-material-design-icons/ArchiveArrowDownOutline.vue'
 import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronUpIcon from 'vue-material-design-icons/ChevronUp.vue'
diff --git a/src/components/TranslationModal.vue b/src/components/TranslationModal.vue
index 33d348bc4e..0bd7103fb2 100644
--- a/src/components/TranslationModal.vue
+++ b/src/components/TranslationModal.vue
@@ -83,8 +83,12 @@
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { getLanguage } from '@nextcloud/l10n'
-import { NcButton, NcDialog, NcLoadingIcon, NcRichText, NcSelect } from '@nextcloud/vue'
 import { mapState } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcRichText from '@nextcloud/vue/components/NcRichText'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import WarningIcon from 'vue-material-design-icons/AlertOctagonOutline.vue'
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
diff --git a/src/components/TrustedSenders.vue b/src/components/TrustedSenders.vue
index db5fea9ed0..47dd3d39ee 100644
--- a/src/components/TrustedSenders.vue
+++ b/src/components/TrustedSenders.vue
@@ -33,9 +33,10 @@
 <script>
 
 import { showError } from '@nextcloud/dialogs'
-import { NcActionButton, NcListItem } from '@nextcloud/vue'
 import prop from 'lodash/fp/prop.js'
 import sortBy from 'lodash/fp/sortBy.js'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcListItem from '@nextcloud/vue/components/NcListItem'
 import IconDomain from 'vue-material-design-icons/Domain.vue'
 import IconEmail from 'vue-material-design-icons/EmailOutline.vue'
 import IconDelete from 'vue-material-design-icons/TrashCanOutline.vue'
diff --git a/src/components/itinerary/CalendarImport.vue b/src/components/itinerary/CalendarImport.vue
index 4a0c9567c4..9ddee1f2b2 100644
--- a/src/components/itinerary/CalendarImport.vue
+++ b/src/components/itinerary/CalendarImport.vue
@@ -24,8 +24,10 @@
 <script>
 
 import moment from '@nextcloud/moment'
-import { NcActionButton, NcActions, NcLoadingIcon } from '@nextcloud/vue'
 import ical from 'ical.js'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
 import logger from '../../logger.js'
 
diff --git a/src/components/mailFilter/Action.vue b/src/components/mailFilter/Action.vue
index a67ff3d90a..385434d86a 100644
--- a/src/components/mailFilter/Action.vue
+++ b/src/components/mailFilter/Action.vue
@@ -34,7 +34,9 @@
 </template>
 
 <script>
-import { NcButton, NcSelect, NcTextField } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
 import DeleteIcon from 'vue-material-design-icons/TrashCanOutline.vue'
 import ActionAddflag from './ActionAddflag.vue'
 import ActionAddSystemFlag from './ActionAddSystemFlag.vue'
diff --git a/src/components/mailFilter/ActionAddSystemFlag.vue b/src/components/mailFilter/ActionAddSystemFlag.vue
index e65b54c77a..1c57ae9a09 100644
--- a/src/components/mailFilter/ActionAddSystemFlag.vue
+++ b/src/components/mailFilter/ActionAddSystemFlag.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import { NcSelect } from '@nextcloud/vue'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import { MailFilterSystemFlag } from '../../models/mailFilter.ts'
 
 export default {
diff --git a/src/components/mailFilter/ActionAddflag.vue b/src/components/mailFilter/ActionAddflag.vue
index 23ea2145b3..557eba60eb 100644
--- a/src/components/mailFilter/ActionAddflag.vue
+++ b/src/components/mailFilter/ActionAddflag.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import { NcTextField } from '@nextcloud/vue'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
 
 export default {
 	name: 'ActionAddflag',
diff --git a/src/components/mailFilter/CreateModal.vue b/src/components/mailFilter/CreateModal.vue
index 6db81eff86..3bfbd18a0d 100644
--- a/src/components/mailFilter/CreateModal.vue
+++ b/src/components/mailFilter/CreateModal.vue
@@ -38,13 +38,11 @@
 </template>
 
 <script>
-import {
-	NcButton,
-	NcCheckboxRadioSwitch,
-	NcLoadingIcon,
-	NcModal,
-} from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcModal from '@nextcloud/vue/components/NcModal'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import { MailFilterConditionField } from '../../models/mailFilter.ts'
 import useMailFilterStore from '../../store/mailFilterStore.ts'
diff --git a/src/components/mailFilter/DeleteModal.vue b/src/components/mailFilter/DeleteModal.vue
index 7dea6b51b7..1a3b843174 100644
--- a/src/components/mailFilter/DeleteModal.vue
+++ b/src/components/mailFilter/DeleteModal.vue
@@ -15,7 +15,7 @@
 
 import IconCancel from '@mdi/svg/svg/cancel.svg?raw'
 import IconCheck from '@mdi/svg/svg/check.svg?raw'
-import { NcDialog } from '@nextcloud/vue'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
 
 export default {
 	name: 'DeleteModal',
diff --git a/src/components/mailFilter/MailFilters.vue b/src/components/mailFilter/MailFilters.vue
index 9a5b20eee1..351a2c3e61 100644
--- a/src/components/mailFilter/MailFilters.vue
+++ b/src/components/mailFilter/MailFilters.vue
@@ -59,8 +59,10 @@
 
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
-import { NcActionButton, NcButton, NcListItem } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcListItem from '@nextcloud/vue/components/NcListItem'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import DeleteIcon from 'vue-material-design-icons/TrashCanOutline.vue'
 import DeleteModal from './DeleteModal.vue'
diff --git a/src/components/mailFilter/Operator.vue b/src/components/mailFilter/Operator.vue
index 2d5899d4c3..50b224cfb5 100644
--- a/src/components/mailFilter/Operator.vue
+++ b/src/components/mailFilter/Operator.vue
@@ -36,7 +36,9 @@
 </template>
 
 <script>
-import { NcButton, NcPopover, NcSelect } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcPopover from '@nextcloud/vue/components/NcPopover'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import IconInformationOutline from 'vue-material-design-icons/InformationOutline.vue'
 import { MailFilterOperator } from '../../models/mailFilter.ts'
 
diff --git a/src/components/mailFilter/Test.vue b/src/components/mailFilter/Test.vue
index afe4aa70b5..82b9fdb88a 100644
--- a/src/components/mailFilter/Test.vue
+++ b/src/components/mailFilter/Test.vue
@@ -67,7 +67,8 @@
 </template>
 
 <script>
-import { NcButton, NcSelect } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import DeleteIcon from 'vue-material-design-icons/TrashCanOutline.vue'
 import { MailFilterConditionField, MailFilterConditionOperator } from '../../models/mailFilter.ts'
 
diff --git a/src/components/mailFilter/UpdateModal.vue b/src/components/mailFilter/UpdateModal.vue
index 5d5c033288..38bfc77020 100644
--- a/src/components/mailFilter/UpdateModal.vue
+++ b/src/components/mailFilter/UpdateModal.vue
@@ -85,7 +85,11 @@
 </template>
 
 <script>
-import { NcButton, NcCheckboxRadioSwitch, NcLoadingIcon, NcModal, NcTextField } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcModal from '@nextcloud/vue/components/NcModal'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import Action from './Action.vue'
 import Operator from './Operator.vue'
diff --git a/src/components/quickActions/Action.vue b/src/components/quickActions/Action.vue
index 3e202ba86e..412542c835 100644
--- a/src/components/quickActions/Action.vue
+++ b/src/components/quickActions/Action.vue
@@ -31,7 +31,8 @@
 </template>
 
 <script>
-import { NcButton, NcSelect } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
 import DragIcon from 'vue-material-design-icons/Drag.vue'
 import Icon from './Icon.vue'
diff --git a/src/components/quickActions/Settings.vue b/src/components/quickActions/Settings.vue
index 29a6283365..c15e310dff 100644
--- a/src/components/quickActions/Settings.vue
+++ b/src/components/quickActions/Settings.vue
@@ -118,8 +118,14 @@
 
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
-import { NcActionButton, NcActions, NcButton, NcListItem, NcLoadingIcon, NcModal, NcTextField } from '@nextcloud/vue'
 import { Container, Draggable } from 'vue-dndrop'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcListItem from '@nextcloud/vue/components/NcListItem'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcModal from '@nextcloud/vue/components/NcModal'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
 import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagonOutline.vue'
 import IconEmailFast from 'vue-material-design-icons/EmailFastOutline.vue'
 import EmailRead from 'vue-material-design-icons/EmailOpenOutline.vue'
diff --git a/src/components/smime/SmimeCertificateModal.vue b/src/components/smime/SmimeCertificateModal.vue
index 9e3386df87..797e4cb4f4 100644
--- a/src/components/smime/SmimeCertificateModal.vue
+++ b/src/components/smime/SmimeCertificateModal.vue
@@ -144,8 +144,11 @@
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import moment from '@nextcloud/moment'
-import { NcButton, NcEmptyContent, NcModal, NcPasswordField } from '@nextcloud/vue'
 import { mapState, mapStores } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
+import NcModal from '@nextcloud/vue/components/NcModal'
+import NcPasswordField from '@nextcloud/vue/components/NcPasswordField'
 import DeleteIcon from 'vue-material-design-icons/TrashCanOutline.vue'
 import logger from '../../logger.js'
 import useMainStore from '../../store/mainStore.js'
diff --git a/src/components/textBlocks/ListItem.vue b/src/components/textBlocks/ListItem.vue
index f0e994d281..6ddb1b93a8 100644
--- a/src/components/textBlocks/ListItem.vue
+++ b/src/components/textBlocks/ListItem.vue
@@ -114,10 +114,17 @@ import axios from '@nextcloud/axios'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { generateOcsUrl } from '@nextcloud/router'
 import { ShareType } from '@nextcloud/sharing'
-import { NcActionButton, NcAvatar, NcButton, NcDialog, NcInputField, NcListItem, NcLoadingIcon, NcSelectUsers } from '@nextcloud/vue'
 import debounce from 'lodash/fp/debounce.js'
 import mitt from 'mitt'
 import { mapStores } from 'pinia'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcAvatar from '@nextcloud/vue/components/NcAvatar'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcInputField from '@nextcloud/vue/components/NcInputField'
+import NcListItem from '@nextcloud/vue/components/NcListItem'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcSelectUsers from '@nextcloud/vue/components/NcSelectUsers'
 import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconClose from 'vue-material-design-icons/Close.vue'
diff --git a/src/components/textBlocks/TextBlockModal.vue b/src/components/textBlocks/TextBlockModal.vue
index 6148af7f7b..c91551b621 100644
--- a/src/components/textBlocks/TextBlockModal.vue
+++ b/src/components/textBlocks/TextBlockModal.vue
@@ -37,8 +37,8 @@
 
 <script>
 import IconCheck from '@mdi/svg/svg/check.svg'
-import { NcDialog } from '@nextcloud/vue'
 import { mapState } from 'pinia'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
 import ListItem from './ListItem.vue'
 import useMainStore from '../../store/mainStore.js'
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index a8403ebbdb..465b1ebbde 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -19,8 +19,8 @@
 </template>
 
 <script>
-import { NcContent } from '@nextcloud/vue'
 import { mapState, mapStores } from 'pinia'
+import NcContent from '@nextcloud/vue/components/NcContent'
 import ComposerSessionIndicator from '../components/ComposerSessionIndicator.vue'
 import MailboxThread from '../components/MailboxThread.vue'
 import Navigation from '../components/Navigation.vue'
diff --git a/src/views/Setup.vue b/src/views/Setup.vue
index 67cc3f61ae..5d6b82b486 100644
--- a/src/views/Setup.vue
+++ b/src/views/Setup.vue
@@ -39,8 +39,10 @@
 <script>
 import { loadState } from '@nextcloud/initial-state'
 import { generateFilePath } from '@nextcloud/router'
-import { NcAppContent, NcContent, NcEmptyContent } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcAppContent from '@nextcloud/vue/components/NcAppContent'
+import NcContent from '@nextcloud/vue/components/NcContent'
+import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import AccountForm from '../components/AccountForm.vue'
 import Navigation from '../components/Navigation.vue'
 import FluidMail from '../../img/mail-fluid.svg'

From 90ffbffb6e136f4b04a388aad223e792b7f2dd64 Mon Sep 17 00:00:00 2001
From: Grigory Vodyanov <scratchx@gmx.com>
Date: Tue, 8 Sep 2026 13:39:45 +0200
Subject: [PATCH 2/2] fix(ui): drop CSS reaching into class names
 @nextcloud/vue dropped

Audit of the 152 places Mail styles library internals, checked against
the published 9.11.0 tarball rather than predicted, and written down in
doc/vue3-css-audit.md so the Vue 3 CSS pass is a checklist.

Removes the rules that already match nothing on 8.41 -- a .multiselect__*
leftover from the retired NcMultiselect, .checkbox-radio-switch__label,
.user-bubble__title, an .mx-datepicker rule in a component that switched
to NcDateTimePickerNative -- and moves one selector to a class name
present in both 8.41 and 9. Three of those carried visible intent the
wrong class name silenced; they are dropped rather than repointed at the
current name, because reviving a rule that has not applied for several
releases is a visual change that belongs in its own PR.

The datepicker and remaining button-variant sites are left alone: they
cannot be repaired until v9 is installed.

Assisted-by: ClaudeCode:claude-opus-5
Signed-off-by: Grigory Vodyanov <scratchx@gmx.com>
---
 doc/vue3-css-audit.md              | 153 +++++++++++++++++++++++++++++
 src/components/MailboxThread.vue   |   9 --
 src/components/MessageHTMLBody.vue |   2 +-
 src/components/RecipientBubble.vue |   4 -
 src/components/SearchMessages.vue  |  18 +---
 src/components/Thread.vue          |   4 -
 6 files changed, 156 insertions(+), 34 deletions(-)
 create mode 100644 doc/vue3-css-audit.md

diff --git a/doc/vue3-css-audit.md b/doc/vue3-css-audit.md
new file mode 100644
index 0000000000..922901944a
--- /dev/null
+++ b/doc/vue3-css-audit.md
@@ -0,0 +1,153 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+# Deep-selector and internal-class audit for `@nextcloud/vue` 9
+
+Mail styles `@nextcloud/vue` internals in 152 places. Some of those class names disappear in v9.
+This document lists every one of them, so the Wave B CSS repair pass is a checklist rather than
+archaeology.
+
+Audited: `@nextcloud/vue` **8.41.0** (installed) against **9.11.0** (published), plus the
+transitive libraries whose class names the components re-expose.
+
+## 1. Method
+
+A selector was counted when it appears inside a `<style>` block or an `.scss` file, or in a
+`querySelector` / `classList` / `closest()` call, **and** the class name is one the library or one
+of its dependencies actually emits. Class names Mail puts on its own markup are tracked separately
+(§5) — they cannot break, but they can drift.
+
+To re-run the comparison when v9 is installed, diff the class-name vocabulary of the two `dist`
+trees:
+
+```
+grep -rohE '[A-Za-z][A-Za-z0-9]*([-_]{1,2}[A-Za-z0-9]+)+' node_modules/@nextcloud/vue/dist \
+  --include='*.mjs' --include='*.css' | sort -u
+```
+
+## 2. Breaks
+
+Of the 152 sites, **11** lose their class in v9. Six of them are fixed here (§3); five need v9
+installed before they can be repaired.
+
+| Class | v9 replacement | Sites | State |
+| --- | --- | --- | --- |
+| `.button-vue--icon-only` | none — v9 uses `.button-vue:has(.button-vue__text:empty):not(.button-vue--wide)` | `SearchMessages.vue` (2 rules) | fixed |
+| `.button-vue--vue-tertiary` | `.button-vue--tertiary` | `MessageHTMLBody.vue:257` | fixed |
+| `.information-icon` | unchanged in `NcNoteCard`, but the rule never applied | `MailboxThread.vue` (2 rules) | fixed |
+| `.mx-datepicker` | not applicable — component uses `NcDateTimePickerNative` | `SearchMessages.vue` | fixed |
+| `.button-vue--text-only` | none — nearest is `.button-vue:not(:has(.button-vue__icon))` | `EnvelopeList.vue:692` | open |
+| `.button-vue--vue-secondary` | `.button-vue--secondary` | `Outbox.vue:127` | open |
+| `.mx-datepicker`, `.mx-datepicker-popup` | `.dp__*` (`@vuepic/vue-datepicker` 11) | `TaskModal.vue:290`, `EventModal.vue:387`, `OutOfOfficeForm.vue:393` | open |
+
+`NcButton` builds its variant class as `button-vue--vue-${variant}` in v8.41 and as
+`button-vue--${variant}` in v9; `--icon-only` / `--text-only` / `--icon-and-text` are dropped
+entirely. `--tertiary` is the one variant class present in both versions, because v8.41 adds it
+alongside `--vue-tertiary` for every tertiary flavour — which is why `MessageHTMLBody.vue` could be
+moved now and `Outbox.vue` could not.
+
+The datepicker sites need real work, not a rename: `@vuepic/vue-datepicker` has a different DOM
+shape, not just a different prefix. All three set width or popup positioning on the wrapper, so a
+`NcDateTimePicker` visual check belongs in the Wave B QA pass.
+
+## 3. Fixed in this PR
+
+Ten rules across five files were removed or rewritten. Every one is verified inert against 8.41 —
+either the class is not in the shipped library at all, or the change does not alter which elements
+match. Four of them target a class name the library does not emit today, so they are dead already
+and never appeared in the 152: the audit turned them up as a side effect.
+
+| Site | Rule | Why it was safe to touch |
+| --- | --- | --- |
+| `SearchMessages.vue` | `.multiselect-search-tags .multiselect__tags .multiselect__tags-wrap` | `.multiselect__*` is `vue-multiselect`; `NcSelect` has never emitted it. Dead since `NcMultiselect` was retired. |
+| `SearchMessages.vue` | `.checkbox-radio-switch__label` | 8.41 emits `__content` / `__text` / `__input` / `__icon`, no `__label`. |
+| `SearchMessages.vue` | `.mx-datepicker` | The component uses `NcDateTimePickerNative` (a native `<input type="date">`), so no `.mx-*` element exists here. |
+| `SearchMessages.vue` ×2 | `.button-vue.search-messages--filter.button-vue--icon-only` → `…--filter` | The modifier only padded specificity. The library's competing rule sets `width` with `!important`, which wins either way; nothing else in the block overlaps. Verified: computed geometry and every declared property are byte-identical before and after. |
+| `Thread.vue` | `.user-bubble__title { cursor: pointer }` | 8.41 emits `.user-bubble__name`. |
+| `RecipientBubble.vue` | `.user-bubble__title { max-width: 30vw }` | Same — and doubly inert, since the block is `scoped` without `:deep()`. |
+| `MailboxThread.vue` | `.information-icon` (2 rules) | The component's `IconInfo` renders `.information-outline-icon`; `.information-icon` belongs to `NcNoteCard`, which this component does not use. |
+| `MessageHTMLBody.vue` | `.button-vue--vue-tertiary` → `.button-vue--tertiary` | Both classes sit on the same element in 8.41, at equal specificity. |
+
+Three of these carried a visible intent that the wrong class name silenced — the pointer cursor on a
+user bubble, the recipient-bubble width cap, the dimmed info icon. They are removed rather than
+repointed at the current class name, because reviving a rule that has not applied for several
+releases is a visual change and belongs in its own PR.
+
+## 4. Stable
+
+55 class families over 98 sites are unchanged between 8.41 and 9.11 and need no action:
+
+- **Buttons and actions** — `.button-vue`, `.button-vue__icon`, `.button-vue__text`,
+  `.action-item`, `.action-item--single`, `.action-item__menutoggle`, `.action-button`,
+  `.action-button__icon`, `.action-button__name`, `.action-button__text`
+- **App shell** — `.app-content-list`, `.app-content-details`, `.app-content-wrapper` and its
+  `--mobile` / `--no-split` / `--show-details` modifiers, `.app-details-toggle`,
+  `.app-navigation-entry-link`, `.app-settings-section`
+- **Inputs and list items** — `.input-field`, `.checkbox-radio-switch`,
+  `.checkbox-radio-switch__content`, `.list-item-content__details`,
+  `.list-item-content__subname`, `.list-item-details__details`, `.select__label`
+- **Overlays** — `.modal-container`, `.modal-wrapper`, `.modal-wrapper--normal`, `.dialog__content`,
+  `.empty-content__icon`, `.counter-bubble__counter`, `.avatardiv--unknown`
+
+Three of these deserve a note, because they were expected to break and do not:
+
+- **`.v-select` and `.vs__*`** (17 sites, mostly `Composer.vue`) are safe. `@nextcloud/vue-select`
+  4.1 keeps every class name 3.26 uses; the only addition is the `vs__fade-enter-from` /
+  `-leave-to` pair that Vue 3 renames, and Mail targets none of those.
+- **`.splitpanes__pane-details`** is safe, including the `querySelector` in
+  `ThreadSummary.vue:86`. The class is added by `NcAppContent`, not by `splitpanes`, so the
+  2.x → 4.x bump does not reach it.
+- **`.v-popper__inner`** and **`.v-popper__popper--shown`** are safe. `floating-vue` 5.2.2 keeps
+  both names.
+
+## 5. Library class names on Mail's own markup
+
+16 families over 43 sites where Mail puts a `@nextcloud/vue` class on an element it renders itself.
+These cannot break — Mail owns both the markup and the rule — but they stop matching the library's
+own styling, so they drift.
+
+- `EnvelopeSkeleton.vue` reimplements `NcListItem`'s markup for list performance and sets
+  `.list-item`, `.list-item__wrapper`, `.list-item-content*`, `.list-item--compact`,
+  `.list-item--multiline`, `.list-item__actions`. Two of those (`--multiline`, `__actions`) already
+  do not exist in 8.41, so the skeleton has been drifting from the real component for a while. v9
+  renames more of them (`.list-item-content__actions`, `.list-item--one-line`), so the skeleton and
+  the live envelope will need a side-by-side check in Wave B.
+- `TagItem.vue` borrows `.app-navigation-entry-bullet` and `.app-navigation-entry-bullet-wrapper`.
+  Neither is in 8.41 either — v9's equivalent is `.app-navigation-entry__icon-bullet`. The tag
+  colour bullet is styled entirely by Mail, so it renders correctly; only the intent of matching the
+  navigation styling is lost.
+- `Envelope.vue:1055` and `Composer.vue:1156` reach for `.list-item-content` and `.vs__search`
+  through `querySelector`. Both class names survive v9, and both call sites already handle a `null`
+  result, so they need nothing.
+
+`EnvelopePrimaryActions.vue`, `EnvelopeSingleClickActions.vue` and `EnvelopeSkeleton.vue` also use
+names shaped like the library's — `.list-item-content__actions--primary`, `.action--primary`,
+`.list-item-content__quick-actions`, `.list-item-content__inner__details*` — that the library has
+never emitted. They are Mail's own class names on Mail's own markup and are unaffected by v9;
+they are listed here only so a future grep does not mistake them for library reaches.
+
+## 6. Reaches owned by other Wave A items
+
+Not counted above; they disappear with the component they target.
+
+| Class family | Sites | Item |
+| --- | --- | --- |
+| `.vue-treeselect__*`, `.vue-treeselect--*` | `MailboxInlinePicker.vue` (11 rules), `mailFilter/ActionFileinto.vue:57,61` | A14 |
+| `.tabs-component-*` | `AccountForm.vue:761,765,772,781,785,791,792` | A15 |
+
+`vue-dndrop` in `quickActions/Settings.vue` (A16) styles no library internals — its CSS is all
+Mail's own class names.
+
+## 7. Not class renames
+
+Two v9 changes will move pixels without any selector going stale, so they will not show up in a
+grep:
+
+- **`box-sizing: border-box` becomes the default** for `NcDialog` and popovers. Mail's six
+  `:deep(.modal-container)` rules and the `.dialog__content` rule set explicit padding and width on
+  those elements; the same numbers will produce different boxes.
+- **`@linusborg/vue-simple-portal` is replaced by Vue 3's `<Teleport>`.** The class names on the
+  modal wrapper survive, but the element's position in the DOM tree changes, which matters for the
+  descendant selectors in `TaskModal.vue:252` and `EventModal.vue:346`
+  (`:deep(.modal-wrapper .modal-container)`).
diff --git a/src/components/MailboxThread.vue b/src/components/MailboxThread.vue
index c0d07a6214..1fa491d6bf 100644
--- a/src/components/MailboxThread.vue
+++ b/src/components/MailboxThread.vue
@@ -676,15 +676,6 @@ export default {
 	contain: none !important;
 }
 
-.information-icon {
-	opacity: .7;
-}
-@media only screen and (max-width: 1024px) {
-	.information-icon {
-		margin-bottom: 20px;
-	}
-}
-
 .list__wrapper {
 	display: flex;
 	flex: 1 1 auto;
diff --git a/src/components/MessageHTMLBody.vue b/src/components/MessageHTMLBody.vue
index d921035d25..679de3639f 100644
--- a/src/components/MessageHTMLBody.vue
+++ b/src/components/MessageHTMLBody.vue
@@ -254,7 +254,7 @@ export default {
 	display: none !important;
 }
 
-:deep(.button-vue--vue-tertiary) {
+:deep(.button-vue--tertiary) {
 	color: var(--color-text-maxcontrast);
 }
 
diff --git a/src/components/RecipientBubble.vue b/src/components/RecipientBubble.vue
index ded9e6bb76..3d79d7f046 100644
--- a/src/components/RecipientBubble.vue
+++ b/src/components/RecipientBubble.vue
@@ -285,10 +285,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.user-bubble__title {
-	max-width: 30vw;
-}
-
 .contact-menu {
 	display: flex;
 	flex-wrap: wrap;
diff --git a/src/components/SearchMessages.vue b/src/components/SearchMessages.vue
index fa8216d1ef..99a6444ac3 100644
--- a/src/components/SearchMessages.vue
+++ b/src/components/SearchMessages.vue
@@ -676,12 +676,6 @@ export default {
 	width: 100%;
 }
 
-.checkbox-radio-switch__label {
-	background: none !important;
-	padding: 0 !important;
-	margin: 0 !important;
-}
-
 .tag-group__search {
 	box-sizing: border-box;
 	position: relative;
@@ -750,10 +744,6 @@ export default {
 	width: 100%;
 }
 
-.multiselect-search-tags .multiselect__tags .multiselect__tags-wrap {
-	flex-wrap: wrap !important;
-}
-
 .modal-inner-field--right {
 	display: flex;
 	align-items: center;
@@ -794,7 +784,7 @@ export default {
 	position: relative
 }
 
-.button-vue.search-messages--filter.button-vue--icon-only {
+.button-vue.search-messages--filter {
 	position: absolute;
 	width: auto;
 	height: auto;
@@ -807,7 +797,7 @@ export default {
 	padding: 0 !important;
 }
 
-.button-vue.search-messages--close.button-vue--icon-only {
+.button-vue.search-messages--close {
 	position: absolute;
 	width: auto;
 	height: auto;
@@ -835,10 +825,6 @@ export default {
 	top: 12px;
 }
 
-.mx-datepicker {
-	width:100%;
-}
-
 .filter-buttons {
 	display: flex;
 	justify-content: center;
diff --git a/src/components/Thread.vue b/src/components/Thread.vue
index 61a85c1cbe..22863f8f41 100644
--- a/src/components/Thread.vue
+++ b/src/components/Thread.vue
@@ -699,8 +699,4 @@ export default {
 		padding: 0;
 	}
 }
-
-.user-bubble__title {
-	cursor: pointer;
-}
 </style>