Add disabled state to actions

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

src/components/Actions/Actions.vue

@@ -98,6 +98,7 @@ https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-action
 		:class="[firstAction.icon, firstActionClass]"
 		class="action-item action-item--single"
 		rel="noreferrer noopener"
+		:disabled="disabled"
 		@[firstActionEventBinding]="execFirstAction">
 		<!-- fake slot to gather main action -->
 		<span :aria-hidden="true" hidden>
@@ -125,6 +126,7 @@ https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-action
 			<!-- Menu open/close trigger button -->
 			<button slot="trigger"
 				ref="menuButton"
+				:disabled="disabled"
 				class="icon action-item__menutoggle"
 				:class="{
 					[defaultIcon]: true,
@@ -278,6 +280,14 @@ export default {
 			type: String,
 			default: 'body',
 		},
+
+		/**
+		 * Disabled state of the main button (single action or menu toggle)
+		 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data() {
@@ -586,6 +596,12 @@ export default {
 		background-color: $icon-focus-bg;
 	}
 
+	// TODO: handle this in the future button component
+	&__menutoggle:disabled,
+	&--single:disabled {
+		opacity: .3 !important;
+	}
+
 	&.action-item--open .action-item__menutoggle {
 		opacity: $opacity_full;
 		background-color: $action-background-hover;