fix(NcBreadcrumb): cursor and native title and inline actions rendering text

src/components/NcActionButton/NcActionButton.vue

@@ -88,7 +88,7 @@ If you're using a long text you can specify a title
 				</template>
 				Add new
 			</NcActionButton>
-			<NcActionButton title="Long button" @click="showMessage('Delete')">
+			<NcActionButton name="Long button" @click="showMessage('Delete')">
 				<template #icon>
 					<Delete :size="20" />
 				</template>
@@ -183,6 +183,7 @@ export default {
 		<button class="action-button"
 			:class="{ focusable: isFocusable }"
 			:aria-label="ariaLabel"
+			:title="title"
 			role="menuitem"
 			type="button"
 			@click="onClick">
@@ -194,10 +195,10 @@ export default {
 					class="action-button__icon" />
 			</slot>
 
-			<!-- long text with title -->
-			<p v-if="title">
+			<!-- long text with name -->
+			<p v-if="nameTitleFallback">
 				<strong class="action-button__title">
-					{{ title }}
+					{{ nameTitleFallback }}
 				</strong>
 				<br>
 				<!-- white space is shown on longtext, so we can't

src/components/NcActionLink/NcActionLink.vue

@@ -66,10 +66,10 @@ export default {
 					class="action-link__icon" />
 			</slot>
 
-			<!-- long text with title -->
-			<p v-if="title">
+			<!-- long text with name -->
+			<p v-if="nameTitleFallback">
 				<strong class="action-link__title">
-					{{ title }}
+					{{ nameTitleFallback }}
 				</strong>
 				<br>
 				<!-- white space is shown on longtext, so we can't

src/components/NcActionRouter/NcActionRouter.vue

@@ -24,9 +24,10 @@
 <template>
 	<li class="action">
 		<router-link :to="to"
+			:aria-label="ariaLabel"
 			:exact="exact"
+			:title="title"
 			class="action-router focusable"
-			:aria-label="ariaLabel"
 			rel="nofollow noreferrer noopener"
 			@click.native="onClick">
 			<!-- @slot Manually provide icon -->
@@ -36,10 +37,10 @@
 					class="action-router__icon" />
 			</slot>
 
-			<!-- long text with title -->
-			<p v-if="title">
+			<!-- long text with name -->
+			<p v-if="nameTitleFallback">
 				<strong class="action-router__title">
-					{{ title }}
+					{{ nameTitleFallback }}
 				</strong>
 				<br>
 				<!-- white space is shown on longtext, so we can't

src/components/NcActionText/NcActionText.vue

@@ -34,10 +34,10 @@
 					class="action-text__icon" />
 			</slot>
 
-			<!-- long text with title -->
-			<p v-if="title">
+			<!-- long text with name -->
+			<p v-if="nameTitleFallback">
 				<strong class="action-text__title">
-					{{ title }}
+					{{ nameTitleFallback }}
 				</strong>
 				<br>
 				<!-- white space is shown on longtext, so we can't

src/components/NcActionTextEditable/NcActionTextEditable.vue

@@ -38,7 +38,7 @@ All undocumented attributes will be bound to the textarea. e.g. `maxlength`
 				<Pencil :size="20" />
 			</template>
 		</NcActionTextEditable>
-		<NcActionTextEditable title="Please edit the text" value="This is a textarea with title">
+		<NcActionTextEditable name="Please edit the text" value="This is a textarea with title">
 			<template #icon>
 				<Pencil :size="20" />
 			</template>
@@ -75,9 +75,9 @@ export default {
 				@submit.prevent="onSubmit">
 				<input :id="id" type="submit" class="action-text-editable__submit">
 
-				<!-- title -->
-				<strong v-if="title" class="action-text__title">
-					{{ title }}
+				<!-- name -->
+				<strong v-if="nameTitleFallback" class="action-text__title">
+					{{ nameTitleFallback }}
 				</strong>
 
 				<textarea :disabled="disabled"

src/components/NcActions/NcActions.vue

@@ -153,6 +153,58 @@ export default {
 </script>
 ```
 
+### Multiple actions with 2 items inline AND forced titles
+
+```vue
+<template>
+	<NcActions :force-title="true" :inline="2">
+		<NcActionButton @click="showMessage('Add')">
+			<template #icon>
+				<Plus :size="20" />
+			</template>
+			Add
+		</NcActionButton>
+		<NcActionButton @click="showMessage('Edit')">
+			<template #icon>
+				<Pencil :size="20" />
+			</template>
+			Edit
+		</NcActionButton>
+		<NcActionButton @click="showMessage('Delete')">
+			<template #icon>
+				<Delete :size="20" />
+			</template>
+			Delete
+		</NcActionButton>
+		<NcActionLink href="https://nextcloud.com">
+			<template #icon>
+				<OpenInNew :size="20" />
+			</template>
+			Link
+		</NcActionLink>
+	</NcActions>
+</template>
+<script>
+import Plus from 'vue-material-design-icons/Plus'
+import Delete from 'vue-material-design-icons/Delete'
+import OpenInNew from 'vue-material-design-icons/OpenInNew'
+import Pencil from 'vue-material-design-icons/Pencil'
+export default {
+	components: {
+		Delete,
+		OpenInNew,
+		Pencil,
+		Plus,
+	},
+	methods: {
+		showMessage(msg) {
+			alert(msg)
+		},
+	},
+}
+</script>
+```
+
 ### Multiple actions with custom icon
 
 ```vue
@@ -934,10 +986,20 @@ export default {
 		 * @return {Function} the vue render function
 		 */
 		const renderInlineAction = (action) => {
-			const icon = action?.data?.scopedSlots?.icon()?.[0] || h('span', { class: ['icon', action?.componentOptions?.propsData?.icon] })
-			const title = this.forceTitle ? this.menuTitle : ''
+			const icon = action?.data?.scopedSlots?.icon()?.[0]
+				|| h('span', { class: ['icon', action?.componentOptions?.propsData?.icon] })
 			const clickListener = action?.componentOptions?.listeners?.click
 
+			const text = action?.componentOptions?.children?.[0]?.text?.trim?.()
+			const ariaLabel = action?.componentOptions?.propsData?.ariaLabel || text
+			const buttonText = this.forceTitle ? text : ''
+
+			let title = action?.componentOptions?.propsData?.title
+			// Show a default title for single actions if none is present
+			if (!(this.forceTitle || title)) {
+				title = text
+			}
+
 			return h('NcButton',
 				{
 					class: [
@@ -946,25 +1008,17 @@ export default {
 						action?.data?.class,
 					],
 					attrs: {
-						'aria-label': action?.componentOptions?.propsData?.ariaLabel || action?.componentOptions?.children?.[0]?.text,
-						title: action?.componentOptions?.propsData?.title,
+						'aria-label': ariaLabel,
+						title,
 					},
 					ref: action?.data?.ref,
 					props: {
-						// If it has a title, we use a secondary button
-						type: this.type || (title ? 'secondary' : 'tertiary'),
+						// If it has a menuTitle, we use a secondary button
+						type: this.type || (buttonText ? 'secondary' : 'tertiary'),
 						disabled: this.disabled || action?.componentOptions?.propsData?.disabled,
 						ariaHidden: this.ariaHidden,
 						...action?.componentOptions?.propsData,
 					},
-					directives: [{
-						name: 'tooltip',
-						value: action?.componentOptions?.children?.[0]?.text,
-						modifiers: {
-							auto: true,
-						},
-
-					}],
 					on: {
 						focus: this.onFocus,
 						blur: this.onBlur,
@@ -981,7 +1035,7 @@ export default {
 				},
 				[
 					h('template', { slot: 'icon' }, [icon]),
-					title,
+					buttonText,
 				],
 			)
 		}
@@ -1149,9 +1203,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+// Inline buttons
 .action-items {
 	display: flex;
 	align-items: center;
+
+	// Spacing between buttons
+	& > button {
+		margin-right: math.div($icon-margin, 2);
+	}
 }
 
 .action-item {

src/components/NcBreadcrumb/NcBreadcrumb.vue

@@ -40,24 +40,26 @@ This component is meant to be used inside a Breadcrumbs component.
 		@dragenter="dragEnter"
 		@dragleave="dragLeave">
 		<component :is="tag"
-			v-if="(title || icon) && !$slots.default"
+			v-if="(nameTitleFallback || icon) && !$slots.default"
 			:exact="exact"
 			:to="to"
 			:href="href"
+			:title="title"
 			v-bind="$attrs"
 			v-on="$listeners">
 			<!-- @slot Slot for passing a material design icon. Precedes the icon and title prop. -->
 			<slot name="icon">
 				<span v-if="icon" :class="icon" class="icon" />
-				<span v-else>{{ title }}</span>
+				<span v-else>{{ nameTitleFallback }}</span>
 			</slot>
 		</component>
 		<NcActions v-if="$slots.default"
 			ref="actions"
 			type="tertiary"
 			:force-menu="forceMenu"
 			:open="open"
-			:menu-title="title"
+			:menu-title="nameTitleFallback"
+			:title="title"
 			:force-title="true"
 			:container="`.vue-crumb[${crumbId}]`"
 			@update:open="onOpenChange">
@@ -86,11 +88,24 @@ export default {
 	},
 	props: {
 		/**
-		 * The displayed title of the breadcrumb.
+		 * The main text content of the entry.
+		 * Previously called `title`, now deprecated
+		 */
+		name: {
+			type: String,
+			// TODO: Make it required in the next major release (see title prop)
+			default: null,
+		},
+		/**
+		 * The title attribute of the element.
+		 *
+		 * ⚠ Using this prop as the main content text is DEPRECATED
+		 * Please use `name` instead. If you were planning to define the
+		 * html element title attribute, this is the proper way.
 		 */
 		title: {
 			type: String,
-			required: true,
+			default: null,
 		},
 
 		/**
@@ -171,6 +186,16 @@ export default {
 		}
 	},
 	computed: {
+		/**
+		 * TODO: drop on the 8.0.0 major, see title/name prop
+		 */
+		nameTitleFallback() {
+			if (this.name === null) {
+				console.warn('The `name` prop is required. Please migrate away from the deprecated `title` prop.')
+				return this.title
+			}
+			return this.name
+		},
 		/**
 		 * Determines which element tag to use
 		 *
@@ -271,24 +296,17 @@ export default {
 		max-width: 210px;
 		font-weight: bold;
 
-		> a,
-		> a:deep(*) {
-			cursor: default;
-		}
-
 		// Don't show breadcrumb separator for last crumb
 		.vue-crumb__separator {
 			display: none;
 		}
 	}
 
-	// Hover and focus effect for crumbs, but not the last one
-	&:not(:last-child) > a {
-		&:hover,
-		&:focus {
-			background-color: var(--color-background-dark);
-			color: var(--color-main-text);
-		}
+	// Hover and focus effect for crumbs
+	& > a:hover,
+	& > a:focus {
+		background-color: var(--color-background-dark);
+		color: var(--color-main-text);
 	}
 
 	&--hidden {