@nextcloud/vue 9.0.0-rc.0 → 9.0.0-rc.2

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-rc.0) (unreleased)
-[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.24.0...v9.0.0-rc.0)
+## [v9.0.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v9.0.0-rc.2) (unreleased)
+[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.24.0...v9.0.0-rc.2)
 
 ### 💥 Breaking Changes
 * The package now uses Vue 3 instead of Vue 2.7
@@ -125,6 +125,8 @@ Especially the following are now provided as composables:
 The `richEditing` mixin can be replaced by just using the `NcRichText` component.
 
 #### Other breaking changes
+- `NcActions` and `NcAction*`
+  - The `ariaHidden` property is removed, please do no longer provide it, otherwise the root element will inherit incorrect aria-hidden.
 - `NcAppSidebar`
   - The `closing` and `opening` events were removed.
     They are directly emitted when the sidebar was opened when using `v-if`
@@ -136,7 +138,7 @@ The `richEditing` mixin can be replaced by just using the `NcRichText` component
   - The `limitWidth` was removed (the content is now always limited width) [\#5605](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5605)
 - The `isFullscreen`, and `isMobile` mixins were removed. Use the according composables instead.
 - The `clickOutsideOptions` mixin is removed
-- The `box-sizing: border-box` is now default for following components and its content. This is done to match behaviour of `NcContent` (as they can be mounted directly to `body`):
+- The `box-sizing: border-box` is now default for following components and its content. This is done to match behavior of `NcContent` (as they can be mounted directly to `body`):
   - `NcModal`
   - `NcPopover`
 - `NcDateTimePicker`
@@ -146,6 +148,9 @@ The `richEditing` mixin can be replaced by just using the `NcRichText` component
 - `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.
+- `NcRichContenteditable`
+  - `NcAutoCompleteResult`: The `title` prop was deprecated and is now removed in favor of the `label` prop
+  - `NcMentionBubble`: The `title` prop was deprecated and is now removed in favor of the `label` prop
 - `NcSelect`
   - `userSelect` property was removed, instead just use the `NcSelectUsers` component
   - `closeOnSelect` property was removed in favor of `keepOpen`.
@@ -160,8 +165,11 @@ The `richEditing` mixin can be replaced by just using the `NcRichText` component
 * 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))
+* feat(NcChip): allow to define the actions container [#6813](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6813) ([susnux](https://github.com/susnux)) 
+* feat(NcActionButton): introduce description prop [#6932](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6932) ([Antreesy](https://github.com/Antreesy))
 
 ### 🐛 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)\)
@@ -193,6 +201,16 @@ The `richEditing` mixin can be replaced by just using the `NcRichText` component
 * 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)
+* fix(NcEmptyContent): description styling for mobile [#6936](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6936) ([Plesin](https://github.com/Plesin))
+* style(NcAppSidebar): remove custom styles from close button [#6944](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6944) ([Antreesy](https://github.com/Antreesy))
+* fix: add missing `NcSelectUsers` export [#6947](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6947) ([susnux](https://github.com/susnux))
+* fix(NcAppContent): adapt to new emitted event object with splitpanes ^4.0.0 [#6950](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6950) ([wofferl](https://github.com/wofferl))
+* fix(NcActionInput): register used NcColorPicker component [#6956](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6956) ([susnux](https://github.com/susnux))
+* fix(NcSelectUsers): use correct type for model and add tests for model-value handling [#6957](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6957) ([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))
@@ -271,19 +289,47 @@ The `richEditing` mixin can be replaced by just using the `NcRichText` component
 * 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))
-
-## [v8.26.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.26.0) (UNRELEASED)
+* 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))
+* refactor(NcUserStatusIcon): migrate component to Typescript [#6820](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6820) ([susnux](https://github.com/susnux))
+* refactor(NcAppDetailsToggle): migrate to Typescript [#6909](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6909) ([susnux](https://github.com/susnux))
+* fix(NcAppSidebar): make buttons pixel perfect [#6938](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6938) ([Antreesy](https://github.com/Antreesy))
+* fix(docs): NcContent with skip-actions crashes styleguidist [#6923](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6923) ([ShGKme](https://github.com/ShGKme))
+* refactor(NcAppContentDetails): migrate component to Typescript [#6910](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6910) ([susnux](https://github.com/susnux))
+* refactor(NcGuestContent): migrate component to Typescript [#6948](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6948) ([susnux](https://github.com/susnux))
+* chore(dev-deps): bump @nextcloud/stylelint-config from 3.0.1 to 3.1.0 and fix errors [#6955](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6955) ([ShGKme](https://github.com/ShGKme))
+* chore!(NcRichContenteditable): remove title prop in favor of label [#6962](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6962) ([susnux](https://github.com/susnux))
+* refactor: remove ScopeComponent the scope is not used and already added by Vue [#6965](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6965) ([susnux](https://github.com/susnux))
+* refactor(NcIconSvgWrapper): migrate component to Typescript and script-setup [#6967](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6967) ([susnux](https://github.com/susnux))
+* refactor(NcCounterBubble): migrate component to Typescript and script-setup [#6970](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6970) ([susnux](https://github.com/susnux))
+* refactor: use NcIconSvgWrapper with directional property where needed [#6767](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6767) ([susnux](https://github.com/susnux))
+
+## [v8.26.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.26.0) (2025-04-25)
 
 ### 📝 Notes
+#### NcAppSidebar
+The `info` slot was introduced to allow customization of sidebar header content.
+This will replace original main name of the sidebar and `header`, `subname`, `secondary-actions`, `tertiary-actions` slots.
+It is recommended to use slot together with `NcAppSidebarHeader` component to support accessibility features.
 #### 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 `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.
 
+### 🚀 Enhancements
+* [stable8] feat(NcAppSidebar): add `info` slot [#6843](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6843)
+* [stable8] feat(NcPopover): add new `noFocusTrap` prop [#6808](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6808)
+
+### 🐛 Fixed bugs
+* [stable8] fix(NcRichText): `references` prop type [#6800](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6800)
+* [stable8]  fix(NcAppContent): don't remove list when showing details in mobile or no-split mode [#6261](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6261) ([wofferl](https://github.com/wofferl))
+* [stable8] fix(NcMentionBubble): position selectable text aligned with the component [#6837](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6837)
+* [stable8] fix(NcAvatar): do not load avatar from server, if iconClass was provided [#6836](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6836)
+* [stable8] fix(NcSelectUsers): add missing `search` event [#6838](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6838)
+
 ## [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)
 

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

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

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

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

package/dist/assets/{NcActionLink-C9_ycPLF.css → NcActionLink-VngQl-C2.css}

@@ -9,7 +9,7 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-927a7c59] {
+.material-design-icon[data-v-786624ec] {
   display: flex;
   align-self: center;
   justify-self: center;
@@ -21,14 +21,14 @@
  * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-li.action[data-v-927a7c59]:hover, li.action.active[data-v-927a7c59] {
+li.action[data-v-786624ec]:hover, li.action.active[data-v-786624ec] {
   border-radius: 6px;
   padding: 0;
 }
-li.action[data-v-927a7c59]:hover {
+li.action[data-v-786624ec]:hover {
   background-color: var(--color-background-hover);
 }
-.action-link[data-v-927a7c59] {
+.action-link[data-v-786624ec] {
   display: flex;
   align-items: flex-start;
   width: 100%;
@@ -48,11 +48,11 @@ li.action[data-v-927a7c59]:hover {
   font-size: var(--default-font-size);
   line-height: var(--default-clickable-area);
 }
-.action-link > span[data-v-927a7c59] {
+.action-link > span[data-v-786624ec] {
   cursor: pointer;
   white-space: nowrap;
 }
-.action-link__icon[data-v-927a7c59] {
+.action-link__icon[data-v-786624ec] {
   width: var(--default-clickable-area);
   height: var(--default-clickable-area);
   opacity: 1;
@@ -60,15 +60,15 @@ li.action[data-v-927a7c59]:hover {
   background-size: 16px;
   background-repeat: no-repeat;
 }
-.action-link[data-v-927a7c59] .material-design-icon {
+.action-link[data-v-786624ec] .material-design-icon {
   width: var(--default-clickable-area);
   height: var(--default-clickable-area);
   opacity: 1;
 }
-.action-link[data-v-927a7c59] .material-design-icon .material-design-icon__svg {
+.action-link[data-v-786624ec] .material-design-icon .material-design-icon__svg {
   vertical-align: middle;
 }
-.action-link__longtext-wrapper[data-v-927a7c59], .action-link__longtext[data-v-927a7c59] {
+.action-link__longtext-wrapper[data-v-786624ec], .action-link__longtext[data-v-786624ec] {
   max-width: 220px;
   line-height: 1.6em;
   padding: calc((var(--default-clickable-area) - 1.6em) / 2) 0;
@@ -77,18 +77,26 @@ li.action[data-v-927a7c59]:hover {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.action-link__longtext[data-v-927a7c59] {
+.action-link__longtext[data-v-786624ec] {
   cursor: pointer;
   white-space: pre-wrap !important;
 }
-.action-link__name[data-v-927a7c59] {
+.action-link__name[data-v-786624ec] {
   font-weight: bold;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   max-width: 100%;
-  display: inline-block;
+  display: block;
 }
-.action-link__menu-icon[data-v-927a7c59] {
+.action-link__description[data-v-786624ec] {
+  display: block;
+  white-space: pre-wrap;
+  font-size: var(--font-size-small);
+  line-height: var(--default-line-height);
+  color: var(--color-text-maxcontrast);
+  cursor: pointer;
+}
+.action-link__menu-icon[data-v-786624ec] {
   margin-inline: auto calc((var(--default-clickable-area) - 16px) / 2 * -1);
 }

package/dist/assets/{NcActionRouter-CVsc7Ezc.css → NcActionRouter-CBVOuCQ3.css}

@@ -87,7 +87,15 @@ li.action[data-v-d4dc7cdf]:hover {
   overflow: hidden;
   white-space: nowrap;
   max-width: 100%;
-  display: inline-block;
+  display: block;
+}
+.action-router__description[data-v-d4dc7cdf] {
+  display: block;
+  white-space: pre-wrap;
+  font-size: var(--font-size-small);
+  line-height: var(--default-line-height);
+  color: var(--color-text-maxcontrast);
+  cursor: pointer;
 }
 .action-router__menu-icon[data-v-d4dc7cdf] {
   margin-inline: auto calc((var(--default-clickable-area) - 16px) / 2 * -1);

package/dist/assets/{NcActionText-C7y7Pe6P.css → NcActionText-CWAPsJmz.css}

@@ -87,7 +87,15 @@ li.action[data-v-a8e61e98]:hover {
   overflow: hidden;
   white-space: nowrap;
   max-width: 100%;
-  display: inline-block;
+  display: block;
+}
+.action-text__description[data-v-a8e61e98] {
+  display: block;
+  white-space: pre-wrap;
+  font-size: var(--font-size-small);
+  line-height: var(--default-line-height);
+  color: var(--color-text-maxcontrast);
+  cursor: pointer;
 }
 .action-text__menu-icon[data-v-a8e61e98] {
   margin-inline: auto calc((var(--default-clickable-area) - 16px) / 2 * -1);