@nextcloud/vue 9.0.0-alpha.8 → 9.0.0-rc.1

package/CHANGELOG.md

@@ -7,8 +7,8 @@
 
 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-alpha.8) (unreleased)
-[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.24.0...v9.0.0-alpha.8)
+## [v9.0.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v9.0.0-rc.0) (unreleased)
+[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.24.0...v9.0.0-rc.0)
 
 ### 💥 Breaking Changes
 * The package now uses Vue 3 instead of Vue 2.7
@@ -85,14 +85,16 @@ The leading icon slot was changed from `#default` to `#icon` in `Nc*Field` compo
 Some boolean props that have been deprecated in favor of alternatives with default value `false`,
 are now removed. Following components have been adjusted:
 
-|     Component | Removed deprecated prop | New alternative |
-|---------------|-------------------------|-----------------|
-|`NcAppContent` |  `allowSwipeNavigation` | `disabledSwipe` |
-|    `NcAvatar` |        `showUserStatus` |    `hideStatus` |
-|    `NcAvatar` | `showUserStatusCompact` | `verboseStatus` |
-|     `NcModal` |           `enableSwipe` |  `disableSwipe` |
-|     `NcModal` |              `canClose` |       `noClose` |
-|    `NcDialog` |              `canClose` |       `noClose` |
+|     Component | Removed deprecated prop |      New alternative |
+|---------------|-------------------------|----------------------|
+|`NcAppContent` |  `allowSwipeNavigation` |      `disabledSwipe` |
+|    `NcAvatar` |        `showUserStatus` |         `hideStatus` |
+|    `NcAvatar` | `showUserStatusCompact` |      `verboseStatus` |
+|     `NcModal` |  `closeButtonContained` | `closeButtonOutside` |
+|     `NcModal` |           `enableSwipe` |       `disableSwipe` |
+|     `NcModal` |              `canClose` |            `noClose` |
+|    `NcDialog` |              `canClose` |            `noClose` |
+|   `NcPopover` |             `focusTrap` |        `noFocusTrap` |
 
 Additionally the default value `closeOnClickOutside` for `NcModal` was aligned with `NcDialog` and now defaults to `false`.
 
@@ -120,6 +122,8 @@ Especially the following are now provided as composables:
 - `isFullscreen` is now provided as `useIsFullscreen`
 - `isMobile` is now provided as `useIsMobile` and `isMobileState` was removed.
 
+The `richEditing` mixin can be replaced by just using the `NcRichText` component.
+
 #### Other breaking changes
 - `NcAppSidebar`
   - The `closing` and `opening` events were removed.
@@ -136,14 +140,29 @@ Especially the following are now provided as composables:
   - `NcModal`
   - `NcPopover`
 - `NcDateTimePicker`
-  - The `range` property was removed in favor of `type="range"` (datetime ranges) and `type="range-date"` (date only ranges).
+  - The `range` property was removed in favor of `type="datetime-range"` (datetime ranges), `type="date-range"` (date only ranges), and `type="time-range"` (time only ranges).
   - The `lang` property was replaced with the `locale` property.
   - The `formatter` property was removed.
-  
+- `NcPopover` is no longer a transparent wrapper over the `floating-vue` package.
+  Instead only use the documented properties and events.
+  If you find some use cases not covered by the documented interface, please open a feature request.
+- `NcSelect`
+  - `userSelect` property was removed, instead just use the `NcSelectUsers` component
+  - `closeOnSelect` property was removed in favor of `keepOpen`.
+- `Tooltip` directive was deprecated in v8 and is now removed.
+  This was done in favor of native tooltips using the `title` attribute, which is better for accessibility.
+  If you really need custom formatted tooltips, you can use `NcPopover` instead.
+
 ### 🚀 Enhancements
 * Allow writing components using Typescript and provide type definitions for `NcButton` [\#4525](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4525) \([susnux](https://github.com/susnux)\)
+* feat(NcDateTimePicker): add time range picker and align naming [#6728](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6728) ([susnux](https://github.com/susnux))
+* feat(dialogs/spawnDialog): separate spawning options from dialog props and allow Element as a container [#6756](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6756) ([ShGKme](https://github.com/ShGKme))
+* feat(dialogs/spawnDialogs)!: do not toRaw the result  [#6760](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6760) ([ShGKme](https://github.com/ShGKme))
+* feat(dialogs/spawnDialog): return promise with the result [#6758](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6758) ([ShGKme](https://github.com/ShGKme))
+* feat(dialogs/spawnDialog)!: replace onClose callback with Promise [#6759](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6759) ([ShGKme](https://github.com/ShGKme))
 
 ### 🐛 Fixed bugs
+* feat(NcAppSidebar): add `info` slot [#6666](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6666) ([Antreesy](https://github.com/Antreesy))
 * fix(NcActions): trigger forgotten closed event and correctly handle open [#6706](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6706) ([ShGKme](https://github.com/ShGKme))
 * fix(NcActionInput): listen to correct events [\#5231](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5231) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
 * fix(NcRichText*): listen to correct events form NcSelect [\#5239](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5239) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
@@ -171,6 +190,14 @@ Especially the following are now provided as composables:
 * fix(NcAvatar): attributes order [\#6377](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6377) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
 * fix!: make 'box-sizing: border-box' a default behaviour for all containers [\#6390](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6390) \([Antreesy](https://github.com/Antreesy)\)
 * fix(NcSelect): `required` doesn't work [\#6458](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6458) \([ShGKme](https://github.com/ShGKme)\)
+* fix(dialogs/spawnDialog): enhance `spawnDialog` types [#6781](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6781) ([mattersj](https://github.com/mattersj))
+* fix(NcDateTimePicker): adjust padding to prevent horizontal scrolling [#6722](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6722) ([susnux](https://github.com/susnux))
+* fix(NcDateTimePicker): prevent emitting `[Date, null]` [#6726](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6726) ([susnux](https://github.com/susnux))
+* fix(dialogs/spawnDialog)!: support vue-devtool but lose appContext [#6752](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6752) ([ShGKme](https://github.com/ShGKme))
+* fix(NcIconSvgWrapper): center svg span wrapper [#6869](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6869) ([skjnldsv](https://github.com/skjnldsv))
+* fix(NcChip): do not rerender slots to check if they are available [#6903](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6903) ([susnux](https://github.com/susnux))
+* fix(dialog/spawnDialog): incorrect return type for optional result [#6905](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6905) ([ShGKme](https://github.com/ShGKme))
+* add fallBackFocus to NcPopover [#6679](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6679)
 
 ### 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))
@@ -242,6 +269,66 @@ Especially the following are now provided as composables:
 * refactor(useHotKey): migrate code to Typescript [\#6430](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6430) \([susnux](https://github.com/susnux)\)
 * chore: restructure `package.json` [\#6405](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6405) \([susnux](https://github.com/susnux)\)
 * chore: Refactor changelog to make breaking changes better readable [\#6428](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6428) \([susnux](https://github.com/susnux)\)
+* refactor: Migrate `NcButton` from render function to template [#6033](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6033) ([susnux](https://github.com/susnux))
+* refactor: adjust code to fix all SASS deprecations [#6734](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6734) ([susnux](https://github.com/susnux))
+* refactor: drop `string-length` dependency and replace with native solution [#6779](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6779) ([susnux](https://github.com/susnux))
+* chore: drop remaining cypress files [#6735](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6735) ([susnux](https://github.com/susnux))
+* chore: adjust package engines versions [#6725](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6725) ([susnux](https://github.com/susnux))
+* chore: update pull_request_template.md [#6736](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6736) ([ShGKme](https://github.com/ShGKme))
+* docs(NcDateTimePicker): add prop documentation for all props [#6727](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6727) ([susnux](https://github.com/susnux))
+* chore: update workflows from organization [#6841](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6841) ([susnux](https://github.com/susnux))
+* refactor(NcChip): properly document and type slots and emits [#6812](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6812) ([susnux](https://github.com/susnux))
+* chore: move from `dev:watch` to `watch` [#6888](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6888) ([skjnldsv](https://github.com/skjnldsv))
+* refactor(NcVNodes): migrate component to Typescript [#6822](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6822) ([susnux](https://github.com/susnux))
+* refactor(Focus): migrate directive to Typescript [#6786](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6786) ([susnux](https://github.com/susnux))
+* refactor(NcEmptyContent): migrate component to Typescript [#6904](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6904) ([susnux](https://github.com/susnux))
+
+## [v8.26.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.26.0) (UNRELEASED)
+
+### 📝 Notes
+#### NcPopover
+`NcPopover` now has its own properties and no longer directly exposes the internal library used (`floating-vue`).
+It is still possible to use its properties, but this ability might be removed in the next version.
+Thus we encourage you to only use the documented properties.
+
+Also this component now supports a logical placement (`start`, `end`) which works with RTL design.
+Moreover the `focusTrap` property is now deprecated and will be replaced with `noFocusTrap`,
+the reason behind this is to only have boolean properties with default value of `false` allowing shortcut props.
+
+## [v8.25.1](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.25.1) (2025-04-17)
+[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.25.0...v8.25.1)
+
+### 🐛 Fixed bugs
+* fix(NcPopover): regression with incorrect size on RTL [#6797](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6797)
+
+## [v8.25.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.25.0) (2025-04-16)
+[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.24.0...v8.25.0)
+
+### 📝 Notes
+#### `NcDateTimePicker`
+In version 8 the `NcDateTimePicker` was a transparent wrapper around the [vue2 datepicker library](https://github.com/mengxiong10/vue2-datepicker).
+With version 9 and beyond we will no longer transparently wrap external libraries,
+thus only documented props, events, and slots of Nextcloud components are guaranteed to work.
+This will allow use to change the underlying library while keeping a stable API for the component users.
+
+For this we deprecated the `range` property in favor of three new types for the `NcDateTimePicker`.
+- `date-range`
+- `time-range`
+- `datetime-range`
+
+Also the `formatter` property is deprecated, instead you can now provide a function to the `format` property,
+which will receive a `Date` object and should return the formatted date as a string.
+
+#### `Tooltip` directive
+The `Tooltip` directive has been deprecated and will be removed in the future.
+In most cases you want to use the native browser tooltips instead by using the native HTML `title` attribute.
+In some rare cases where you really need a formatted tooltip `NcPopover` could be used.
+
+```diff
+ <NcButton
+-    v-tooltip="title"
++    :title="title"
+```
 
 ## [v8.24.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.24.0) (2025-04-02)
 

package/dist/assets/{NcActionButton-d8aZCq9u.css → NcActionButton-DfdRrSEu.css}

@@ -9,7 +9,7 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-5482345d] {
+.material-design-icon[data-v-ed182520] {
   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-5482345d]:hover, li.action.active[data-v-5482345d] {
+li.action[data-v-ed182520]:hover, li.action.active[data-v-ed182520] {
   border-radius: 6px;
   padding: 0;
 }
-li.action[data-v-5482345d]:hover {
+li.action[data-v-ed182520]:hover {
   background-color: var(--color-background-hover);
 }
-.action--disabled[data-v-5482345d] {
+.action--disabled[data-v-ed182520] {
   pointer-events: none;
   opacity: 0.5;
 }
-.action--disabled[data-v-5482345d]:hover, .action--disabled[data-v-5482345d]:focus {
+.action--disabled[data-v-ed182520]:hover, .action--disabled[data-v-ed182520]:focus {
   cursor: default;
   opacity: 0.5;
 }
-.action--disabled[data-v-5482345d] * {
+.action--disabled[data-v-ed182520] * {
   opacity: 1 !important;
 }
-.action-button[data-v-5482345d] {
+.action-button[data-v-ed182520] {
   display: flex;
   align-items: flex-start;
   width: 100%;
@@ -59,11 +59,11 @@ li.action[data-v-5482345d]:hover {
   font-size: var(--default-font-size);
   line-height: var(--default-clickable-area);
 }
-.action-button > span[data-v-5482345d] {
+.action-button > span[data-v-ed182520] {
   cursor: pointer;
   white-space: nowrap;
 }
-.action-button__icon[data-v-5482345d] {
+.action-button__icon[data-v-ed182520] {
   width: var(--default-clickable-area);
   height: var(--default-clickable-area);
   opacity: 1;
@@ -71,15 +71,15 @@ li.action[data-v-5482345d]:hover {
   background-size: 16px;
   background-repeat: no-repeat;
 }
-.action-button[data-v-5482345d] .material-design-icon {
+.action-button[data-v-ed182520] .material-design-icon {
   width: var(--default-clickable-area);
   height: var(--default-clickable-area);
   opacity: 1;
 }
-.action-button[data-v-5482345d] .material-design-icon .material-design-icon__svg {
+.action-button[data-v-ed182520] .material-design-icon .material-design-icon__svg {
   vertical-align: middle;
 }
-.action-button__longtext-wrapper[data-v-5482345d], .action-button__longtext[data-v-5482345d] {
+.action-button__longtext-wrapper[data-v-ed182520], .action-button__longtext[data-v-ed182520] {
   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-5482345d]:hover {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.action-button__longtext[data-v-5482345d] {
+.action-button__longtext[data-v-ed182520] {
   cursor: pointer;
   white-space: pre-wrap !important;
 }
-.action-button__name[data-v-5482345d] {
+.action-button__name[data-v-ed182520] {
   font-weight: bold;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -100,9 +100,9 @@ li.action[data-v-5482345d]:hover {
   max-width: 100%;
   display: inline-block;
 }
-.action-button__menu-icon[data-v-5482345d] {
+.action-button__menu-icon[data-v-ed182520] {
   margin-inline: auto calc((var(--default-clickable-area) - 16px) / 2 * -1);
 }
-.action-button__pressed-icon[data-v-5482345d] {
+.action-button__pressed-icon[data-v-ed182520] {
   margin-inline: auto calc((var(--default-clickable-area) - 16px) / 2 * -1);
 }

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

@@ -9,7 +9,7 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-735edb01] {
+.material-design-icon[data-v-8e31d57f] {
   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-735edb01]:hover, li.action.active[data-v-735edb01] {
+li.action[data-v-8e31d57f]:hover, li.action.active[data-v-8e31d57f] {
   border-radius: 6px;
   padding: 0;
 }
-li.action[data-v-735edb01]:hover {
+li.action[data-v-8e31d57f]:hover {
   background-color: var(--color-background-hover);
 }
-.action--disabled[data-v-735edb01] {
+.action--disabled[data-v-8e31d57f] {
   pointer-events: none;
   opacity: 0.5;
 }
-.action--disabled[data-v-735edb01]:hover, .action--disabled[data-v-735edb01]:focus {
+.action--disabled[data-v-8e31d57f]:hover, .action--disabled[data-v-8e31d57f]:focus {
   cursor: default;
   opacity: 0.5;
 }
-.action--disabled[data-v-735edb01] * {
+.action--disabled[data-v-8e31d57f] * {
   opacity: 1 !important;
 }
-.action-checkbox[data-v-735edb01] {
+.action-checkbox[data-v-8e31d57f] {
   display: flex;
   align-items: flex-start;
   width: 100%;
@@ -57,24 +57,24 @@ li.action[data-v-735edb01]:hover {
   line-height: var(--default-clickable-area);
   /* checkbox/radio fixes */
 }
-.action-checkbox__checkbox[data-v-735edb01] {
+.action-checkbox__checkbox[data-v-8e31d57f] {
   position: absolute;
   inset-inline-start: 0 !important;
   z-index: -1;
   opacity: 0;
 }
-.action-checkbox__label[data-v-735edb01] {
+.action-checkbox__label[data-v-8e31d57f] {
   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-735edb01]::before {
+.action-checkbox__label[data-v-8e31d57f]::before {
   margin-block: 0 !important;
   margin-inline: calc((var(--default-clickable-area) - 14px) / 2) !important;
 }
-.action-checkbox--disabled[data-v-735edb01],
-.action-checkbox--disabled .action-checkbox__label[data-v-735edb01] {
+.action-checkbox--disabled[data-v-8e31d57f],
+.action-checkbox--disabled .action-checkbox__label[data-v-8e31d57f] {
   cursor: pointer;
 }

package/dist/assets/{NcActionInput-C-rQsTEA.css → NcActionInput-BNWL2Q-3.css}

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