@nextcloud/vue 9.0.0-rc.1 → 9.0.0-rc.3

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.3) (unreleased)
+[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.27.1...v9.0.0-rc.3)
 
 ### 💥 Breaking Changes
 * The package now uses Vue 3 instead of Vue 2.7
@@ -125,10 +125,14 @@ 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`
     and also just duplicated the state of the `open` prop [\#5606](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5606)
+- `NcColorPicker`
+  - The `update:open` event is removed in favor of the already available `close` event.
 - `NcCounterBubble`
   - The default slot was removed
   - The `count` prop is now required [\#5997](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5997)
@@ -136,7 +140,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,9 +150,14 @@ 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`.
+- `NcTextField`:
+  - The value `'arrowRight'` for the `trailingButtonIcon` property was deprecated is now removed in favor of `arrowEnd`.
 - `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.
@@ -160,6 +169,8 @@ 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))
@@ -198,6 +209,28 @@ The `richEditing` mixin can be replaced by just using the `NcRichText` component
 * 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))
+* fix(NcAppNavigationToggle): restore button design and remove wrong attribute [#6984](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6984) ([susnux](https://github.com/susnux))
+* fix(NcInputField): unresolved component and state color [#6994](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6994) ([susnux](https://github.com/susnux))
+* fix(NcAppNavigationItem): multi level padding [#6861](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6861) ([GretaD](https://github.com/GretaD))
+* fix(NcTextField)!: make trailing button icon for confirmation also work on RTL [#6993](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6993) ([susnux](https://github.com/susnux))
+* fix(NcAppContent): incorrect page title from a different `core.apps` format in Nextcloud 30 [#7010](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7010) ([julien-nc](https://github.com/julien-nc))
+* fix(NcButton): correctly apply reverse padding [#7029](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7029) ([raimund-schluessler](https://github.com/raimund-schluessler))
+* fix(NcAvatar): update 'hasStatus' flag if changed [#7033](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7033) ([Antreesy](https://github.com/Antreesy))
+* fix(NcCheckboxRadioSwitch): align icons with the first row of label [#7043](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7043) ([Antreesy](https://github.com/Antreesy))
+* fix(actions): use pointer cursor for action button text [#7042](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7042) ([ChristophWurst](https://github.com/ChristophWurst))
+* fix(NcAvatar): migrate from deprecated `showUserStatus` prop [#7053](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7053) ([Antreesy](https://github.com/Antreesy))
+* fix(NcAppNavigationSettings): adjust style and padding of button [#7018](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7018) ([raimund-schluessler](https://github.com/raimund-schluessler))
+* fix(NcRichText): always render code blocks in LTR direction [#7056](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7056) ([Antreesy](https://github.com/Antreesy))
+* fix(NcHeaderMenu): bring caret back [#7071](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7071) ([ShGKme](https://github.com/ShGKme))
+* fix(NcChip): adjust default prop declaration [#7074](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7074) ([Antreesy](https://github.com/Antreesy))
+* fix(NcPopover): component crash when unmounted shown [#7077](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7077) ([Antreesy](https://github.com/Antreesy))
+* fix(NcListItem): let `active` prop take higher priority [#7086](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7086) ([DorraJaouad](https://github.com/DorraJaouad))
 
 ### 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))
@@ -282,19 +315,102 @@ The `richEditing` mixin can be replaced by just using the `NcRichText` component
 * 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))
+* refactor(NcTextArea): migrate component to Typescript and script-setup [#6986](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6986) ([susnux](https://github.com/susnux))
+* refactor(NcNoteCard): migrate component to Typescript and script-setup [#6985](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6985) ([susnux](https://github.com/susnux))
+* refactor(NcDialog): migrate to script-setup and use Typescript for module [#6968](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6968) ([susnux](https://github.com/susnux))
+* refactor: migrate Nc*Field to Typescript [#6951](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6951) ([susnux](https://github.com/susnux))
+* refactor(NcUserBubble): migrate components to Typescript [#6946](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6946) ([susnux](https://github.com/susnux))
+* refactor(NcHeaderMenu): export as Typescript module and reorder script tags [#7000](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7000) ([susnux](https://github.com/susnux))
+* fix(NcAppNavigationSettings): button left full width [#6999](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6999) ([raimund-schluessler](https://github.com/raimund-schluessler))
+* refactor: migrate NcAppNavigationToggle / NcAppNavigationSpacer to Typescript [#7004](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7004) ([susnux](https://github.com/susnux))
+* refactor(NcContent): migrate to Typescript and script-setup [#7003](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7003) ([susnux](https://github.com/susnux))
+* chore: adjust vitest config to be consistent on CI and locally [#7065](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7065) ([susnux](https://github.com/susnux))
+* refactor(NcLoadingIcon): migrate component to Typescript and script-setup [#7076](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7076) ([susnux](https://github.com/susnux))
+* refactor(NcDateTimePickerNative): migrate component to Typescript and script-setup [#7075](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7075) ([susnux](https://github.com/susnux))
+* refactor: deprecate events not comply with Vue event naming rules [#7058](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7058) ([susnux](https://github.com/susnux))
+* fix(NcModal): correctly handle when trying to activate non-existing focus-trap [#7084](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7084) ([Antreesy](https://github.com/Antreesy))
+* refactor(NcHighlight): migrate component to Typescript [#7073](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7073) ([susnux](https://github.com/susnux))
+* refactor(NcColorPicker): migrate component to Typescript [#7080](https://github.com/nextcloud-libraries/nextcloud-vue/pull/7080) ([susnux](https://github.com/susnux))
+
+## [v8.27.1](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.27.1) (UNRELEASED)
 
-## [v8.26.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.26.0) (UNRELEASED)
+### 📝 Notes
+#### `NcTextField`
+The value `arrowRight` of the property `trailingButtonIcon` is deprecated and will be removed in a future version.
+It is replaced by `arrowEnd` which reflects that the directions depends on the text directions (LTR vs RTL).
+
+#### `NcColorPicker`
+The `update:open` event is deprecated, instead just use the `close` event which is emitted at the same time.
+
+#### Event names
+Custom events now have a consistent naming without custom scoping of the events.
+Thus following events are deprecated in favor of a new consistent event name:
+
+     Component |       Old event |       New event
+---------------|-----------------|----------------
+`NcAppContent` |   `resize:list` |   `resize-list`
+  `NcRichText` | `interact:todo` | `interact-todo`
+
+## [v8.27.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.27.0) (2025-05-28)
 
 ### 📝 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.
+#### NcEmptyContent
+A padding was added to the empty content wrapper. It is recommended to check in-app styles for possible overrides.
+
+### 🚀 Enhancements
+* feat(NcChip): allow to define the actions container [#6964](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6964)
+* feat(NcActionButton): introduce `description` prop [#6975](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6975)
+
+### 🐛 Fixed bugs
+* fix(NcEmptyContent): description styling for mobile [#6943](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6943)
+* style(NcAppSidebar): remove custom styles from close button [#6945](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6945)
+
+### Other Changes
+* refactor(useIsFullscreen): migrate to Typescript [#6912](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6912) ([ShGKme](https://github.com/ShGKme))
+* refactor(useHotKey): migrate code to Typescript [#6911](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6911)
+* refactor(Focus): migrate directive to Typescript [#6914](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6914)
+* refactor: use `NcIconSvgWrapper` with `directional` property where needed [#6976](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6976)
+* feat(NcRichText): filter links based on protocol [#6977](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6977) ([max-nextcloud](https://github.com/max-nextcloud))
+
+## [v8.26.1](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.26.1) (2025-05-07)
+
+### 🐛 Fixed bugs
+* fix(NcIconSvgWrapper): center svg span wrapper [#6880](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6880)
+
+## [v8.26.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.26.0) (2025-04-25)
 
-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`,
+### 📝 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
+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-Dz2EBAuD.css}

@@ -9,7 +9,7 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-ed182520] {
+.material-design-icon[data-v-76892c52] {
   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-76892c52]:hover, li.action.active[data-v-76892c52] {
   border-radius: 6px;
   padding: 0;
 }
-li.action[data-v-ed182520]:hover {
+li.action[data-v-76892c52]:hover {
   background-color: var(--color-background-hover);
 }
-.action--disabled[data-v-ed182520] {
+.action--disabled[data-v-76892c52] {
   pointer-events: none;
   opacity: 0.5;
 }
-.action--disabled[data-v-ed182520]:hover, .action--disabled[data-v-ed182520]:focus {
+.action--disabled[data-v-76892c52]:hover, .action--disabled[data-v-76892c52]:focus {
   cursor: default;
   opacity: 0.5;
 }
-.action--disabled[data-v-ed182520] * {
+.action--disabled[data-v-76892c52] * {
   opacity: 1 !important;
 }
-.action-button[data-v-ed182520] {
+.action-button[data-v-76892c52] {
   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-76892c52] {
   cursor: pointer;
   white-space: nowrap;
 }
-.action-button__icon[data-v-ed182520] {
+.action-button__icon[data-v-76892c52] {
   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-76892c52] .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-76892c52] .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-76892c52], .action-button__longtext[data-v-76892c52] {
   max-width: 220px;
   line-height: 1.6em;
   padding: calc((var(--default-clickable-area) - 1.6em) / 2) 0;
@@ -88,21 +88,32 @@ li.action[data-v-ed182520]:hover {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.action-button__longtext[data-v-ed182520] {
+.action-button__longtext[data-v-76892c52] {
   cursor: pointer;
   white-space: pre-wrap !important;
 }
-.action-button__name[data-v-ed182520] {
+.action-button__name[data-v-76892c52] {
   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-76892c52] {
+  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-76892c52] {
   margin-inline: auto calc((var(--default-clickable-area) - 16px) / 2 * -1);
 }
-.action-button__pressed-icon[data-v-ed182520] {
+.action-button__pressed-icon[data-v-76892c52] {
   margin-inline: auto calc((var(--default-clickable-area) - 16px) / 2 * -1);
+}
+.action-button[data-v-76892c52] * {
+  cursor: pointer;
 }

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

@@ -9,7 +9,7 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-2bde82e9] {
+.material-design-icon[data-v-5352b9fa] {
   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-5352b9fa]:not(.button-vue),
+input[data-v-5352b9fa]:not([type=range]),
+textarea[data-v-5352b9fa] {
   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-5352b9fa]:not(.button-vue):not(:disabled):not(.primary):hover, button[data-v-5352b9fa]:not(.button-vue):not(:disabled):not(.primary):focus, button:not(.button-vue):not(:disabled):not(.primary).active[data-v-5352b9fa],
+input[data-v-5352b9fa]:not([type=range]):not(:disabled):not(.primary):hover,
+input[data-v-5352b9fa]:not([type=range]):not(:disabled):not(.primary):focus,
+input:not([type=range]):not(:disabled):not(.primary).active[data-v-5352b9fa],
+textarea[data-v-5352b9fa]:not(:disabled):not(.primary):hover,
+textarea[data-v-5352b9fa]:not(:disabled):not(.primary):focus,
+textarea:not(:disabled):not(.primary).active[data-v-5352b9fa] {
   /* 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-5352b9fa]:not(.button-vue):not(:disabled):not(.primary):active,
+input[data-v-5352b9fa]:not([type=range]):not(:disabled):not(.primary):active,
+textarea[data-v-5352b9fa]: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-5352b9fa]:not(.button-vue):disabled,
+input[data-v-5352b9fa]:not([type=range]):disabled,
+textarea[data-v-5352b9fa]: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-5352b9fa]:not(.button-vue):required,
+input[data-v-5352b9fa]:not([type=range]):required,
+textarea[data-v-5352b9fa]: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-5352b9fa]:not(.button-vue):invalid,
+input[data-v-5352b9fa]:not([type=range]):invalid,
+textarea[data-v-5352b9fa]: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-5352b9fa],
+input:not([type=range]).primary[data-v-5352b9fa],
+textarea.primary[data-v-5352b9fa] {
   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-5352b9fa]:not(:disabled):hover, button:not(.button-vue).primary[data-v-5352b9fa]:not(:disabled):focus, button:not(.button-vue).primary[data-v-5352b9fa]:not(:disabled):active,
+input:not([type=range]).primary[data-v-5352b9fa]:not(:disabled):hover,
+input:not([type=range]).primary[data-v-5352b9fa]:not(:disabled):focus,
+input:not([type=range]).primary[data-v-5352b9fa]:not(:disabled):active,
+textarea.primary[data-v-5352b9fa]:not(:disabled):hover,
+textarea.primary[data-v-5352b9fa]:not(:disabled):focus,
+textarea.primary[data-v-5352b9fa]: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-5352b9fa]:not(:disabled):active,
+input:not([type=range]).primary[data-v-5352b9fa]:not(:disabled):active,
+textarea.primary[data-v-5352b9fa]: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-5352b9fa]:disabled,
+input:not([type=range]).primary[data-v-5352b9fa]:disabled,
+textarea.primary[data-v-5352b9fa]: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-5352b9fa]:hover, li.action.active[data-v-5352b9fa] {
   border-radius: 6px;
   padding: 0;
 }
-li.action[data-v-2bde82e9]:hover {
+li.action[data-v-5352b9fa]:hover {
   background-color: var(--color-background-hover);
 }
-.action--disabled[data-v-2bde82e9] {
+.action--disabled[data-v-5352b9fa] {
   pointer-events: none;
   opacity: 0.5;
 }
-.action--disabled[data-v-2bde82e9]:hover, .action--disabled[data-v-2bde82e9]:focus {
+.action--disabled[data-v-5352b9fa]:hover, .action--disabled[data-v-5352b9fa]:focus {
   cursor: default;
   opacity: 0.5;
 }
-.action--disabled[data-v-2bde82e9] * {
+.action--disabled[data-v-5352b9fa] * {
   opacity: 1 !important;
 }
-.action-input[data-v-2bde82e9] {
+.action-input[data-v-5352b9fa] {
   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-5352b9fa] {
   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-5352b9fa] .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-5352b9fa] .material-design-icon .material-design-icon__svg {
   vertical-align: middle;
 }
-.action-input > span[data-v-2bde82e9] {
+.action-input > span[data-v-5352b9fa] {
   cursor: pointer;
   white-space: nowrap;
 }
-.action-input__icon[data-v-2bde82e9] {
+.action-input__icon[data-v-5352b9fa] {
   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-5352b9fa] {
   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-5352b9fa] {
   position: relative;
   width: 100%;
 }
-.action-input__input-container[data-v-2bde82e9] {
+.action-input__input-container[data-v-5352b9fa] {
   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-5352b9fa], .action-input__input-container .colorpicker__preview[data-v-5352b9fa] {
   width: 100%;
 }
-.action-input__input-container .colorpicker__preview[data-v-2bde82e9] {
+.action-input__input-container .colorpicker__preview[data-v-5352b9fa] {
   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-5352b9fa] {
   padding: 4px 0;
   display: block;
 }
-.action-input__text-label--hidden[data-v-2bde82e9] {
+.action-input__text-label--hidden[data-v-5352b9fa] {
   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-5352b9fa] {
   width: 100%;
 }
-.action-input__datetimepicker[data-v-2bde82e9] .mx-input {
+.action-input__datetimepicker[data-v-5352b9fa] .mx-input {
   margin: 0;
 }
-.action-input__multi[data-v-2bde82e9] {
+.action-input__multi[data-v-5352b9fa] {
   width: 100%;
 }
-li:last-child > .action-input[data-v-2bde82e9] {
+li:last-child > .action-input[data-v-5352b9fa] {
   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-5352b9fa]:not(.action-input--visible-label) {
   padding-top: calc((var(--default-clickable-area) - 16px) / 2 - 4px);
 }