@nextcloud/vue 9.0.0-rc.6 → 9.0.0-rc.8

package/CHANGELOG.md

@@ -7,13 +7,13 @@
 
 All notable changes to this project will be documented in this file.
 
-## [v9.0.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v9.0.0-rc.6) (unreleased)
-[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.29.1...v9.0.0-rc.6)
+## [v9.0.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v9.0.0-rc.8) (unreleased)
+[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.30.0...v9.0.0-rc.8)
 
 ### 💥 Breaking Changes
 * The package now uses Vue 3 instead of Vue 2.7
 * The package is now a native ESM package and the CommonJS entry points were dropped!
-* The package has dropped compatibility with Nextcloud before version 32.
+* The package has dropped compatibility with Nextcloud before version 31.
   This mostly affects the visual appearance of components.
 
 #### Plugin registering removed
@@ -195,6 +195,10 @@ The `richEditing` mixin can be replaced by just using the `NcRichText` component
 * feat(NcColorPicker): add proper open-state handling [#7212](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7212) ([susnux](https://github.com/susnux))
 * feat(NcAppNavigationItem): add `active` as slot property to the "icon"-slot [#7273](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7273) ([susnux](https://github.com/susnux))
 * feat(NcButton): add border with a bottom shadow [#7282](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7282) ([susnux](https://github.com/susnux))
+* feat: add new border design for NcInputField and NcTextArea [\#7351](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7351) \([susnux](https://github.com/susnux)\)
+* feat(NcCheckboxRadioSwitch): Add support for a description field [\#7378](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7378) \([CarlSchwan](https://github.com/CarlSchwan)\)
+* feat: add NcKbd component [\#7401](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7401) \([ShGKme](https://github.com/ShGKme)\)
+* feat(NcAssistant*): provide components for consistent integrations design [\#7398](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7398) \([susnux](https://github.com/susnux)\)
 
 ### 🐛 Fixed bugs
 * feat(NcAppSidebar): add `info` slot [#6666](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6666) ([Antreesy](https://github.com/Antreesy))
@@ -289,6 +293,17 @@ The `richEditing` mixin can be replaced by just using the `NcRichText` component
 * fix: auto-resolve focus trap stack, if was changed outside of controller [#7277](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7277) ([Antreesy](https://github.com/Antreesy))
 * fix: adjust color variable to work with Nextcloud 32+ [#7311](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7311) ([susnux](https://github.com/susnux))
 * fix(utils): legacy version detection [#7313](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7313) ([skjnldsv](https://github.com/skjnldsv))
+* fix(NcEmojiPicker): scope styles [\#7334](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7334) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcPopover): scope styles to avoid leak [\#7330](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7330) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcReferencePickerModal): scope styles [\#7333](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7333) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcActionButtonGroup): scope styles [\#7332](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7332) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcAppNavigationItem): icon-collapse has wrong color [\#7329](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7329) \([GretaD](https://github.com/GretaD)\)
+* fix(NcAppNavigation): warn if neither `ariaLabel` nor `ariaLabelledby` is set [\#7350](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7350) \([susnux](https://github.com/susnux)\)
+* fix: revert breaking changes and keep Nextcloud 31 support [\#7353](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7353) \([susnux](https://github.com/susnux)\)
+* fix(NcAppNavigationSearch): add space before ellipsis [\#7372](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7372) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcHeaderMenu): pause trap stack on opening [\#7370](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7370) \([Antreesy](https://github.com/Antreesy)\)
+* fix(NcAppNavigationSettings): bring filled icon back for Nextcloud 31 [\#7397](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7397) \([susnux](https://github.com/susnux)\)
+* fix(NcHeaderMenu): apply `ariaLabel` prop and add proper default values [\#7367](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7367) \([susnux](https://github.com/susnux)\)
 
 ### Changed
 * refactor: replace boolean properties with `default: true` with `default: false` [#6653](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6653) ([susnux](https://github.com/susnux))
@@ -428,6 +443,46 @@ The `richEditing` mixin can be replaced by just using the `NcRichText` component
 * feat: change cog icon into the outline version [#7299](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7299) ([GretaD](https://github.com/GretaD))
 * refactor(NcButton, NcNoteCard): use status text color for icons and text [#7300](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7300) ([susnux](https://github.com/susnux))
 * fix(utils): legacy check syntax adjust [#7314](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7314) ([skjnldsv](https://github.com/skjnldsv))
+* docs: fix CSS Modules support in Styleguidist [\#7331](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7331) \([ShGKme](https://github.com/ShGKme)\)
+* refactor: use properly types injection keys instead of plain names [\#7349](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7349) \([susnux](https://github.com/susnux)\)
+* chore: add missing docblock comments [\#7365](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7365) \([susnux](https://github.com/susnux)\)
+* refactor(NcButton): use proper prop type for `pressed` to allow `undefined` [\#7368](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7368) \([susnux](https://github.com/susnux)\)
+* refactor(NcAppNavigationList): migrate to Typescript [\#7364](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7364) \([susnux](https://github.com/susnux)\)
+* chore(NcAppNavigationItem): fix linting warnings [\#7366](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7366) \([susnux](https://github.com/susnux)\)
+* chore(docs): fix css modules export names in styleguidist [\#7385](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7385) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcUserStatusIcon): adjust icon colors [\#7392](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7392) \([Antreesy](https://github.com/Antreesy)\)
+* fix(NcUserStatusIcon): adjust scoped names for style variables [\#7396](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7396) \([Antreesy](https://github.com/Antreesy)\)
+
+## [v8.30.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.30.0) (2025-09-01)
+### 🚀 Enhancements
+* feat(NcPopover): auto return focus to trigger button on close [#5155](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5155) ([ShGKme](https://github.com/ShGKme))
+* feat(NcAssistant*): provide components for consistent integrations design [#7413](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7413)
+* feat(NcCheckboxRadioSwitch): Add support for a description field [#7395](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7395)
+### Other Changes
+* refactor: migrate reference widget related function to Typescript [#7417](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7417)
+
+
+## [v8.29.2](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.29.2) (2025-08-28)
+### 🐛 Fixed bugs
+* fix(NcUserStatusIcon): legacy 32 check [#7320](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7320) ([skjnldsv](https://github.com/skjnldsv))
+* fix(NcDateTimePicker): lost styles in docs [#7344](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7344) ([ShGKme](https://github.com/ShGKme))
+* fix(NcPopover): scope styles to avoid leak [#7341](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7341)
+* fix(NcReferencePickerModal): scope styles [#7347](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7347)
+* fix(NcEmojiPicker): scope styles [#7343](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7343)
+* fix(NcActionButtonGroup): scope styles [#7348](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7348)
+* fix(NcAppNavigationItem): icon-collapse has wrong colour [#7346](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7346) ([GretaD](https://github.com/GretaD))
+* fix(NcNoteCard): adjust colors to work with Nextcloud 32+ [#7361](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7361) ([susnux](https://github.com/susnux))
+* fix(l10n): add non-breaking space before ellipsis [#7373](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7373)
+* fix(NcHeaderMenu): pause trap stack on opening [#7384](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7384) ([Antreesy](https://github.com/Antreesy))
+* add new border design for NcInputField and NcTextArea [#7383](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7383)
+* fix: change icon cog into outline version on 32+ [#7394](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7394) \([GretaD](https://github.com/GretaD)\)
+
+### Other Changes
+* docs: fix CSS Modules support in Styleguidist [#7342](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7342)
+* chore(docs): fix css modules export names in styleguidist [#7387](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7387)
+* fix(NcUserStatusIcon): adjust icon colors [#7393](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7393)
+* fix(NcUserStatusIcon): adjust scoped names for style variables [#7400](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7400)
+
 
 ## [v8.29.1](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.29.1) (2025-08-19)
 ### 🐛 Fixed bugs

package/README.md

@@ -18,7 +18,7 @@
 
 | Version        | Target                | Documentation                                         |
 |----------------|-----------------------|-------------------------------------------------------|
-| v9.x [main]    | Nextcloud 32+ (Vue 3) | https://nextcloud-vue-components.netlify.app          |
+| v9.x [main]    | Nextcloud 31+ (Vue 3) | https://nextcloud-vue-components.netlify.app          |
 | v8.x [stable8] | Nextcloud 28+ (Vue 2) | https://stable8--nextcloud-vue-components.netlify.app |
 | v7.x [stable7] | Nextcloud 25 - 27     | https://stable7--nextcloud-vue-components.netlify.app |
 | v6.x [stable6] | Nextcloud 24 - 25     | https://stable6--nextcloud-vue-components.netlify.app |
@@ -106,9 +106,10 @@ npm run l10n:extract
 
 ### 🐸 Styleguidist
 
-When developing new components or extending components, make sure to also have some bits of related documentation like examples, where applicable.
-To test components and the documentation in that context, you can run `npm run styleguide` to run a local server that serves the style guide
-with all the components.
+When developing new components or extending components, make sure to also have some bits of related documentation like examples, where applicable. To test components and the documentation in that context, you can run `npm run styleguide` to run a local server that serves the style guide with all the components.
+
+You can also test if the design still works with a legacy Nextcloud version.
+To do so just run `NEXTCLOUD_LEGACY=y npm run styleguide`.
 
 #### Using vue-devtools in Firefox
 

package/dist/assets/{NcActionButton-Dz2EBAuD.css → NcActionButton-D7bnKlOt.css}

@@ -9,7 +9,7 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-76892c52] {
+.material-design-icon[data-v-330b5e3e] {
   display: flex;
   align-self: center;
   justify-self: center;
@@ -21,25 +21,25 @@
  * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-li.action[data-v-76892c52]:hover, li.action.active[data-v-76892c52] {
+li.action[data-v-330b5e3e]:hover, li.action.active[data-v-330b5e3e] {
   border-radius: 6px;
   padding: 0;
 }
-li.action[data-v-76892c52]:hover {
+li.action[data-v-330b5e3e]:hover {
   background-color: var(--color-background-hover);
 }
-.action--disabled[data-v-76892c52] {
+.action--disabled[data-v-330b5e3e] {
   pointer-events: none;
   opacity: 0.5;
 }
-.action--disabled[data-v-76892c52]:hover, .action--disabled[data-v-76892c52]:focus {
+.action--disabled[data-v-330b5e3e]:hover, .action--disabled[data-v-330b5e3e]:focus {
   cursor: default;
   opacity: 0.5;
 }
-.action--disabled[data-v-76892c52] * {
+.action--disabled[data-v-330b5e3e] * {
   opacity: 1 !important;
 }
-.action-button[data-v-76892c52] {
+.action-button[data-v-330b5e3e] {
   display: flex;
   align-items: flex-start;
   width: 100%;
@@ -59,11 +59,11 @@ li.action[data-v-76892c52]:hover {
   font-size: var(--default-font-size);
   line-height: var(--default-clickable-area);
 }
-.action-button > span[data-v-76892c52] {
+.action-button > span[data-v-330b5e3e] {
   cursor: pointer;
   white-space: nowrap;
 }
-.action-button__icon[data-v-76892c52] {
+.action-button__icon[data-v-330b5e3e] {
   width: var(--default-clickable-area);
   height: var(--default-clickable-area);
   opacity: 1;
@@ -71,15 +71,15 @@ li.action[data-v-76892c52]:hover {
   background-size: 16px;
   background-repeat: no-repeat;
 }
-.action-button[data-v-76892c52] .material-design-icon {
+.action-button[data-v-330b5e3e] .material-design-icon {
   width: var(--default-clickable-area);
   height: var(--default-clickable-area);
   opacity: 1;
 }
-.action-button[data-v-76892c52] .material-design-icon .material-design-icon__svg {
+.action-button[data-v-330b5e3e] .material-design-icon .material-design-icon__svg {
   vertical-align: middle;
 }
-.action-button__longtext-wrapper[data-v-76892c52], .action-button__longtext[data-v-76892c52] {
+.action-button__longtext-wrapper[data-v-330b5e3e], .action-button__longtext[data-v-330b5e3e] {
   max-width: 220px;
   line-height: 1.6em;
   padding: calc((var(--default-clickable-area) - 1.6em) / 2) 0;
@@ -88,11 +88,11 @@ li.action[data-v-76892c52]:hover {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.action-button__longtext[data-v-76892c52] {
+.action-button__longtext[data-v-330b5e3e] {
   cursor: pointer;
   white-space: pre-wrap !important;
 }
-.action-button__name[data-v-76892c52] {
+.action-button__name[data-v-330b5e3e] {
   font-weight: bold;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -100,7 +100,7 @@ li.action[data-v-76892c52]:hover {
   max-width: 100%;
   display: block;
 }
-.action-button__description[data-v-76892c52] {
+.action-button__description[data-v-330b5e3e] {
   display: block;
   white-space: pre-wrap;
   font-size: var(--font-size-small);
@@ -108,12 +108,12 @@ li.action[data-v-76892c52]:hover {
   color: var(--color-text-maxcontrast);
   cursor: pointer;
 }
-.action-button__menu-icon[data-v-76892c52] {
+.action-button__menu-icon[data-v-330b5e3e] {
   margin-inline: auto calc((var(--default-clickable-area) - 16px) / 2 * -1);
 }
-.action-button__pressed-icon[data-v-76892c52] {
+.action-button__pressed-icon[data-v-330b5e3e] {
   margin-inline: auto calc((var(--default-clickable-area) - 16px) / 2 * -1);
 }
-.action-button[data-v-76892c52] * {
+.action-button[data-v-330b5e3e] * {
   cursor: pointer;
 }

package/dist/assets/{NcActionButtonGroup-BLIEEeG3.css → NcActionButtonGroup-CRTH2v24.css}

@@ -9,39 +9,39 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon {
+.material-design-icon[data-v-f57c2142] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.nc-button-group-base > div {
+.nc-button-group-base > div[data-v-f57c2142] {
   text-align: center;
   color: var(--color-text-maxcontrast);
 }
-.nc-button-group-base ul.nc-button-group-content {
+.nc-button-group-base ul.nc-button-group-content[data-v-f57c2142] {
   display: flex;
   gap: 4px;
   justify-content: space-between;
 }
-.nc-button-group-base ul.nc-button-group-content li {
+.nc-button-group-base ul.nc-button-group-content li[data-v-f57c2142-s] {
   flex: 1 1;
 }
-.nc-button-group-base ul.nc-button-group-content .action-button {
+.nc-button-group-base ul.nc-button-group-content[data-v-f57c2142] .action-button {
   padding: 0 !important;
   width: 100%;
   display: flex;
   justify-content: center;
 }
-.nc-button-group-base ul.nc-button-group-content .action-button.action-button--active {
+.nc-button-group-base ul.nc-button-group-content[data-v-f57c2142] .action-button.action-button--active {
   background-color: var(--color-primary-element);
   border-radius: var(--border-radius-element);
   color: var(--color-primary-element-text);
 }
-.nc-button-group-base ul.nc-button-group-content .action-button.action-button--active:hover, .nc-button-group-base ul.nc-button-group-content .action-button.action-button--active:focus, .nc-button-group-base ul.nc-button-group-content .action-button.action-button--active:focus-within {
+.nc-button-group-base ul.nc-button-group-content[data-v-f57c2142] .action-button.action-button--active:hover, .nc-button-group-base ul.nc-button-group-content[data-v-f57c2142] .action-button.action-button--active:focus, .nc-button-group-base ul.nc-button-group-content[data-v-f57c2142] .action-button.action-button--active:focus-within {
   background-color: var(--color-primary-element-hover);
 }
-.nc-button-group-base ul.nc-button-group-content .action-button .action-button__pressed-icon {
+.nc-button-group-base ul.nc-button-group-content[data-v-f57c2142] .action-button .action-button__pressed-icon {
   display: none;
 }

package/dist/assets/{NcActionCheckbox--lTDnNsx.css → NcActionCheckbox-BeT6fCCy.css}

@@ -9,7 +9,7 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-8e31d57f] {
+.material-design-icon[data-v-6099342c] {
   display: flex;
   align-self: center;
   justify-self: center;
@@ -21,25 +21,25 @@
  * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-li.action[data-v-8e31d57f]:hover, li.action.active[data-v-8e31d57f] {
+li.action[data-v-6099342c]:hover, li.action.active[data-v-6099342c] {
   border-radius: 6px;
   padding: 0;
 }
-li.action[data-v-8e31d57f]:hover {
+li.action[data-v-6099342c]:hover {
   background-color: var(--color-background-hover);
 }
-.action--disabled[data-v-8e31d57f] {
+.action--disabled[data-v-6099342c] {
   pointer-events: none;
   opacity: 0.5;
 }
-.action--disabled[data-v-8e31d57f]:hover, .action--disabled[data-v-8e31d57f]:focus {
+.action--disabled[data-v-6099342c]:hover, .action--disabled[data-v-6099342c]:focus {
   cursor: default;
   opacity: 0.5;
 }
-.action--disabled[data-v-8e31d57f] * {
+.action--disabled[data-v-6099342c] * {
   opacity: 1 !important;
 }
-.action-checkbox[data-v-8e31d57f] {
+.action-checkbox[data-v-6099342c] {
   display: flex;
   align-items: flex-start;
   width: 100%;
@@ -57,24 +57,24 @@ li.action[data-v-8e31d57f]:hover {
   line-height: var(--default-clickable-area);
   /* checkbox/radio fixes */
 }
-.action-checkbox__checkbox[data-v-8e31d57f] {
+.action-checkbox__checkbox[data-v-6099342c] {
   position: absolute;
   inset-inline-start: 0 !important;
   z-index: -1;
   opacity: 0;
 }
-.action-checkbox__label[data-v-8e31d57f] {
+.action-checkbox__label[data-v-6099342c] {
   display: flex;
   align-items: center;
   width: 100%;
   padding: 0 !important;
   padding-inline-end: calc((var(--default-clickable-area) - 16px) / 2) !important;
 }
-.action-checkbox__label[data-v-8e31d57f]::before {
+.action-checkbox__label[data-v-6099342c]::before {
   margin-block: 0 !important;
   margin-inline: calc((var(--default-clickable-area) - 14px) / 2) !important;
 }
-.action-checkbox--disabled[data-v-8e31d57f],
-.action-checkbox--disabled .action-checkbox__label[data-v-8e31d57f] {
+.action-checkbox--disabled[data-v-6099342c],
+.action-checkbox--disabled .action-checkbox__label[data-v-6099342c] {
   cursor: pointer;
 }

package/dist/assets/{NcActionInput-BrCsR1ZO.css → NcActionInput-Cma_lx5u.css}

@@ -9,7 +9,7 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-7607f0e9] {
+.material-design-icon[data-v-0fc02b30] {
   display: flex;
   align-self: center;
   justify-self: center;
@@ -22,9 +22,9 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 /* Default global values */
-button[data-v-7607f0e9]:not(.button-vue),
-input[data-v-7607f0e9]:not([type=range]),
-textarea[data-v-7607f0e9] {
+button[data-v-0fc02b30]:not(.button-vue),
+input[data-v-0fc02b30]:not([type=range]),
+textarea[data-v-0fc02b30] {
   margin: 0;
   padding: 7px 6px;
   cursor: text;
@@ -36,69 +36,69 @@ textarea[data-v-7607f0e9] {
   font-size: 13px;
   /* Primary action button, use sparingly */
 }
-button[data-v-7607f0e9]:not(.button-vue):not(:disabled):not(.primary):hover, button[data-v-7607f0e9]:not(.button-vue):not(:disabled):not(.primary):focus, button:not(.button-vue):not(:disabled):not(.primary).active[data-v-7607f0e9],
-input[data-v-7607f0e9]:not([type=range]):not(:disabled):not(.primary):hover,
-input[data-v-7607f0e9]:not([type=range]):not(:disabled):not(.primary):focus,
-input:not([type=range]):not(:disabled):not(.primary).active[data-v-7607f0e9],
-textarea[data-v-7607f0e9]:not(:disabled):not(.primary):hover,
-textarea[data-v-7607f0e9]:not(:disabled):not(.primary):focus,
-textarea:not(:disabled):not(.primary).active[data-v-7607f0e9] {
+button[data-v-0fc02b30]:not(.button-vue):not(:disabled):not(.primary):hover, button[data-v-0fc02b30]:not(.button-vue):not(:disabled):not(.primary):focus, button:not(.button-vue):not(:disabled):not(.primary).active[data-v-0fc02b30],
+input[data-v-0fc02b30]:not([type=range]):not(:disabled):not(.primary):hover,
+input[data-v-0fc02b30]:not([type=range]):not(:disabled):not(.primary):focus,
+input:not([type=range]):not(:disabled):not(.primary).active[data-v-0fc02b30],
+textarea[data-v-0fc02b30]:not(:disabled):not(.primary):hover,
+textarea[data-v-0fc02b30]:not(:disabled):not(.primary):focus,
+textarea:not(:disabled):not(.primary).active[data-v-0fc02b30] {
   /* active class used for multiselect */
   border-color: var(--color-primary-element);
   outline: none;
 }
-button[data-v-7607f0e9]:not(.button-vue):not(:disabled):not(.primary):active,
-input[data-v-7607f0e9]:not([type=range]):not(:disabled):not(.primary):active,
-textarea[data-v-7607f0e9]:not(:disabled):not(.primary):active {
+button[data-v-0fc02b30]:not(.button-vue):not(:disabled):not(.primary):active,
+input[data-v-0fc02b30]:not([type=range]):not(:disabled):not(.primary):active,
+textarea[data-v-0fc02b30]:not(:disabled):not(.primary):active {
   color: var(--color-main-text);
   outline: none;
   background-color: var(--color-main-background);
 }
-button[data-v-7607f0e9]:not(.button-vue):disabled,
-input[data-v-7607f0e9]:not([type=range]):disabled,
-textarea[data-v-7607f0e9]:disabled {
+button[data-v-0fc02b30]:not(.button-vue):disabled,
+input[data-v-0fc02b30]:not([type=range]):disabled,
+textarea[data-v-0fc02b30]:disabled {
   cursor: default;
   opacity: 0.5;
   color: var(--color-text-maxcontrast);
   background-color: var(--color-background-dark);
 }
-button[data-v-7607f0e9]:not(.button-vue):required,
-input[data-v-7607f0e9]:not([type=range]):required,
-textarea[data-v-7607f0e9]:required {
+button[data-v-0fc02b30]:not(.button-vue):required,
+input[data-v-0fc02b30]:not([type=range]):required,
+textarea[data-v-0fc02b30]:required {
   box-shadow: none;
 }
-button[data-v-7607f0e9]:not(.button-vue):invalid,
-input[data-v-7607f0e9]:not([type=range]):invalid,
-textarea[data-v-7607f0e9]:invalid {
+button[data-v-0fc02b30]:not(.button-vue):invalid,
+input[data-v-0fc02b30]:not([type=range]):invalid,
+textarea[data-v-0fc02b30]:invalid {
   border-color: var(--color-border-error, var(--color-error));
   box-shadow: none !important;
 }
-button:not(.button-vue).primary[data-v-7607f0e9],
-input:not([type=range]).primary[data-v-7607f0e9],
-textarea.primary[data-v-7607f0e9] {
+button:not(.button-vue).primary[data-v-0fc02b30],
+input:not([type=range]).primary[data-v-0fc02b30],
+textarea.primary[data-v-0fc02b30] {
   cursor: pointer;
   color: var(--color-primary-element-text);
   border-color: var(--color-primary-element);
   background-color: var(--color-primary-element);
 }
-button:not(.button-vue).primary[data-v-7607f0e9]:not(:disabled):hover, button:not(.button-vue).primary[data-v-7607f0e9]:not(:disabled):focus, button:not(.button-vue).primary[data-v-7607f0e9]:not(:disabled):active,
-input:not([type=range]).primary[data-v-7607f0e9]:not(:disabled):hover,
-input:not([type=range]).primary[data-v-7607f0e9]:not(:disabled):focus,
-input:not([type=range]).primary[data-v-7607f0e9]:not(:disabled):active,
-textarea.primary[data-v-7607f0e9]:not(:disabled):hover,
-textarea.primary[data-v-7607f0e9]:not(:disabled):focus,
-textarea.primary[data-v-7607f0e9]:not(:disabled):active {
+button:not(.button-vue).primary[data-v-0fc02b30]:not(:disabled):hover, button:not(.button-vue).primary[data-v-0fc02b30]:not(:disabled):focus, button:not(.button-vue).primary[data-v-0fc02b30]:not(:disabled):active,
+input:not([type=range]).primary[data-v-0fc02b30]:not(:disabled):hover,
+input:not([type=range]).primary[data-v-0fc02b30]:not(:disabled):focus,
+input:not([type=range]).primary[data-v-0fc02b30]:not(:disabled):active,
+textarea.primary[data-v-0fc02b30]:not(:disabled):hover,
+textarea.primary[data-v-0fc02b30]:not(:disabled):focus,
+textarea.primary[data-v-0fc02b30]:not(:disabled):active {
   border-color: var(--color-primary-element-light);
   background-color: var(--color-primary-element-light);
 }
-button:not(.button-vue).primary[data-v-7607f0e9]:not(:disabled):active,
-input:not([type=range]).primary[data-v-7607f0e9]:not(:disabled):active,
-textarea.primary[data-v-7607f0e9]:not(:disabled):active {
+button:not(.button-vue).primary[data-v-0fc02b30]:not(:disabled):active,
+input:not([type=range]).primary[data-v-0fc02b30]:not(:disabled):active,
+textarea.primary[data-v-0fc02b30]:not(:disabled):active {
   color: var(--color-primary-element-text-dark);
 }
-button:not(.button-vue).primary[data-v-7607f0e9]:disabled,
-input:not([type=range]).primary[data-v-7607f0e9]:disabled,
-textarea.primary[data-v-7607f0e9]:disabled {
+button:not(.button-vue).primary[data-v-0fc02b30]:disabled,
+input:not([type=range]).primary[data-v-0fc02b30]:disabled,
+textarea.primary[data-v-0fc02b30]:disabled {
   cursor: default;
   color: var(--color-primary-element-text-dark);
   background-color: var(--color-primary-element);
@@ -108,25 +108,25 @@ textarea.primary[data-v-7607f0e9]:disabled {
  * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-li.action[data-v-7607f0e9]:hover, li.action.active[data-v-7607f0e9] {
+li.action[data-v-0fc02b30]:hover, li.action.active[data-v-0fc02b30] {
   border-radius: 6px;
   padding: 0;
 }
-li.action[data-v-7607f0e9]:hover {
+li.action[data-v-0fc02b30]:hover {
   background-color: var(--color-background-hover);
 }
-.action--disabled[data-v-7607f0e9] {
+.action--disabled[data-v-0fc02b30] {
   pointer-events: none;
   opacity: 0.5;
 }
-.action--disabled[data-v-7607f0e9]:hover, .action--disabled[data-v-7607f0e9]:focus {
+.action--disabled[data-v-0fc02b30]:hover, .action--disabled[data-v-0fc02b30]:focus {
   cursor: default;
   opacity: 0.5;
 }
-.action--disabled[data-v-7607f0e9] * {
+.action--disabled[data-v-0fc02b30] * {
   opacity: 1 !important;
 }
-.action-input[data-v-7607f0e9] {
+.action-input[data-v-0fc02b30] {
   display: flex;
   align-items: flex-start;
   width: 100%;
@@ -142,60 +142,60 @@ li.action[data-v-7607f0e9]:hover {
   box-shadow: none;
   font-weight: normal;
 }
-.action-input__icon-wrapper[data-v-7607f0e9] {
+.action-input__icon-wrapper[data-v-0fc02b30] {
   display: flex;
   align-self: center;
   align-items: center;
   justify-content: center;
 }
-.action-input__icon-wrapper[data-v-7607f0e9] .material-design-icon {
+.action-input__icon-wrapper[data-v-0fc02b30] .material-design-icon {
   width: var(--default-clickable-area);
   height: var(--default-clickable-area);
   opacity: 1;
 }
-.action-input__icon-wrapper[data-v-7607f0e9] .material-design-icon .material-design-icon__svg {
+.action-input__icon-wrapper[data-v-0fc02b30] .material-design-icon .material-design-icon__svg {
   vertical-align: middle;
 }
-.action-input > span[data-v-7607f0e9] {
+.action-input > span[data-v-0fc02b30] {
   cursor: pointer;
   white-space: nowrap;
 }
-.action-input__icon[data-v-7607f0e9] {
+.action-input__icon[data-v-0fc02b30] {
   min-width: 0; /* Overwrite icons*/
   min-height: 0;
   padding: calc(var(--default-clickable-area) / 2) 0 calc(var(--default-clickable-area) / 2) var(--default-clickable-area);
   background-position: calc((var(--default-clickable-area) - 16px) / 2) center;
   background-size: 16px;
 }
-.action-input__form[data-v-7607f0e9] {
+.action-input__form[data-v-0fc02b30] {
   display: flex;
   align-items: center;
   flex: 1 1 auto;
   margin: 4px 0;
   padding-inline-end: calc((var(--default-clickable-area) - 16px) / 2);
 }
-.action-input__container[data-v-7607f0e9] {
+.action-input__container[data-v-0fc02b30] {
   position: relative;
   width: 100%;
 }
-.action-input__input-container[data-v-7607f0e9] {
+.action-input__input-container[data-v-0fc02b30] {
   display: flex;
 }
-.action-input__input-container .colorpicker__trigger[data-v-7607f0e9], .action-input__input-container .colorpicker__preview[data-v-7607f0e9] {
+.action-input__input-container .colorpicker__trigger[data-v-0fc02b30], .action-input__input-container .colorpicker__preview[data-v-0fc02b30] {
   width: 100%;
 }
-.action-input__input-container .colorpicker__preview[data-v-7607f0e9] {
+.action-input__input-container .colorpicker__preview[data-v-0fc02b30] {
   width: 100%;
   height: 36px;
   border-radius: var(--border-radius-element);
   border: 2px solid var(--color-border-maxcontrast);
   box-shadow: none !important;
 }
-.action-input__text-label[data-v-7607f0e9] {
+.action-input__text-label[data-v-0fc02b30] {
   padding: 4px 0;
   display: block;
 }
-.action-input__text-label--hidden[data-v-7607f0e9] {
+.action-input__text-label--hidden[data-v-0fc02b30] {
   position: absolute;
   inset-inline-start: 0;
   width: 1px;
@@ -204,18 +204,18 @@ li.action[data-v-7607f0e9]:hover {
   z-index: -1;
   opacity: 0;
 }
-.action-input__datetimepicker[data-v-7607f0e9] {
+.action-input__datetimepicker[data-v-0fc02b30] {
   width: 100%;
 }
-.action-input__datetimepicker[data-v-7607f0e9] .mx-input {
+.action-input__datetimepicker[data-v-0fc02b30] .mx-input {
   margin: 0;
 }
-.action-input__multi[data-v-7607f0e9] {
+.action-input__multi[data-v-0fc02b30] {
   width: 100%;
 }
-li:last-child > .action-input[data-v-7607f0e9] {
+li:last-child > .action-input[data-v-0fc02b30] {
   padding-bottom: calc((var(--default-clickable-area) - 16px) / 2 - 4px);
 }
-li:first-child > .action-input[data-v-7607f0e9]:not(.action-input--visible-label) {
+li:first-child > .action-input[data-v-0fc02b30]:not(.action-input--visible-label) {
   padding-top: calc((var(--default-clickable-area) - 16px) / 2 - 4px);
 }