@kiva/kv-components 4.6.0 → 4.7.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.7.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.6.0...@kiva/kv-components@4.7.0) (2025-01-09)
+
+
+### Features
+
+* add autoplay button if autoplay plugin is enabled ([8bebbe5](https://github.com/kiva/kv-ui-elements/commit/8bebbe5945dd4e34c922f9f511a4145564ae005a))
+
+
+
+
+
 # [4.6.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.5.1...@kiva/kv-components@4.6.0) (2025-01-08)
 
 

package/dist/components/KvVerticalCarousel.vue

@@ -29,40 +29,69 @@
 		<!-- Carousel Controls -->
 		<div
 			class="kv-carousel__controls tw-flex
-			tw-justify-between md:tw-justify-center tw-items-center tw-gap-2
-			tw-mt-2 tw-w-full"
+			tw-items-center tw-gap-2
+			tw-mt-2 tw-w-full
+			tw-justify-between md:tw-justify-center"
 		>
-			<button
-				class="tw-text-primary
+			<div
+				class="tw-flex tw-gap-2 tw-w-full md:tw-w-auto"
+				:class="{'tw-justify-between md:tw-justify-center': !hasAutoplay}"
+			>
+				<button
+					class="tw-text-primary
 					tw-rounded-full
 					tw-border-2 tw-border-primary
 					tw-h-4 tw-w-4
 					tw-flex tw-items-center tw-justify-center
 					disabled:tw-opacity-low disabled:tw-cursor-default"
-				:disabled="embla && !embla.canScrollPrev()"
-				@click="handleUserInteraction(previousIndex, 'click-left-arrow')"
-			>
-				<kv-material-icon
-					class="tw-w-4"
-					:icon="mdiChevronUp"
-				/>
-				<span class="tw-sr-only">Show previous slide</span>
-			</button>
+					:disabled="embla && !embla.canScrollPrev()"
+					@click="handleUserInteraction(previousIndex, 'click-left-arrow')"
+				>
+					<kv-material-icon
+						class="tw-w-4"
+						:icon="mdiChevronUp"
+					/>
+					<span class="tw-sr-only">Show previous slide</span>
+				</button>
+				<button
+					class="tw-text-primary
+					tw-rounded-full
+					tw-border-2 tw-border-primary
+					tw-h-4 tw-w-4
+					tw-flex tw-items-center tw-justify-center
+					disabled:tw-opacity-low disabled:tw-cursor-default"
+					:disabled="embla && !embla.canScrollNext()"
+					@click="handleUserInteraction(nextIndex, 'click-right-arrow')"
+				>
+					<kv-material-icon
+						class="tw-w-4"
+						:icon="mdiChevronDown"
+					/>
+					<span class="tw-sr-only">Show next slide</span>
+				</button>
+			</div>
+
 			<button
+				v-if="hasAutoplay"
 				class="tw-text-primary
 					tw-rounded-full
 					tw-border-2 tw-border-primary
 					tw-h-4 tw-w-4
 					tw-flex tw-items-center tw-justify-center
 					disabled:tw-opacity-low disabled:tw-cursor-default"
-				:disabled="embla && !embla.canScrollNext()"
-				@click="handleUserInteraction(nextIndex, 'click-right-arrow')"
+				@click.native.prevent="toggleAutoPlay()"
 			>
 				<kv-material-icon
+					v-if="isAutoplaying"
 					class="tw-w-4"
-					:icon="mdiChevronDown"
+					:icon="mdiPause"
 				/>
-				<span class="tw-sr-only">Show next slide</span>
+				<kv-material-icon
+					v-else
+					class="tw-w-4"
+					:icon="mdiPlay"
+				/>
+				<span class="tw-sr-only">Show previous slide</span>
 			</button>
 		</div>
 	</div>
@@ -70,9 +99,15 @@
 
 <script>
 import {
+	toRefs,
+} from 'vue-demi';
+import {
+	mdiPause,
+	mdiPlay,
 	mdiChevronUp,
 	mdiChevronDown,
 } from '@mdi/js';
+import { computed } from 'vue';
 import { carouselUtil } from '../utils/carousels';
 import KvMaterialIcon from './KvMaterialIcon.vue';
 
@@ -129,6 +164,10 @@ export default {
 		'interact-carousel',
 	],
 	setup(props, { emit, slots }) {
+		const {
+			autoplayOptions,
+		} = toRefs(props);
+
 		const {
 			componentSlotKeys,
 			currentIndex,
@@ -148,7 +187,12 @@ export default {
 			toggleAutoPlay,
 		} = carouselUtil(props, { emit, slots }, { axis: 'y' });
 
+		const hasAutoplay = computed(() => {
+			return Object.keys(autoplayOptions.value).length !== 0;
+		});
+
 		return {
+			hasAutoplay,
 			componentSlotKeys,
 			currentIndex,
 			embla,
@@ -156,6 +200,8 @@ export default {
 			handleUserInteraction,
 			isAriaHidden,
 			isAutoplaying,
+			mdiPause,
+			mdiPlay,
 			mdiChevronDown,
 			mdiChevronUp,
 			nextIndex,

package/dist/components/stories/KvCarousel.stories.js

@@ -1,3 +1,4 @@
+import { watch } from 'vue';
 import KvCarousel from '../KvCarousel.vue';
 import KvLoadingSpinner from '../KvLoadingSpinner.vue';
 import KvButton from '../KvButton.vue';
@@ -444,14 +445,12 @@ export const AutoPlayButton = () => ({
 	components: {
 		KvCarousel,
 	},
-	data() {
-		return {
-			isPlaying: false,
-		};
-	},
+	data: () => ({
+		isAutoplaying: false,
+	}),
 	mounted() {
-		this.$nextTick(() => {
-			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
+		watch(() => this.$refs?.sampleCarousel?.isAutoplaying, (newValue) => {
+			this.isAutoplaying = newValue;
 		});
 	},
 	template: `
@@ -461,34 +460,20 @@ export const AutoPlayButton = () => ({
 				style="max-width: 400px;"
 				:embla-options="{ loop: false }"
 				:autoplay-options="{ playOnInit: true, delay: 3000 }"
-				@interact-carousel="carouselInteraction"
 			>
 				${defaultCarouselSlides}
 			</kv-carousel>
-			<a href="#" @click.native.prevent="toggleAutoPlay()" role="toggleAutoPlayButton">Toggle AutoPlay</a>
+			<a href="#" @click.native.prevent="$refs.sampleCarousel.toggleAutoPlay()" role="toggleAutoPlayButton">Toggle AutoPlay</a>
 			<br/>
-			<p>AutoPlay is: {{ isPlaying ? 'ON' : 'OFF' }}</p>
+			<p>AutoPlay is: {{ isAutoplaying ? 'ON' : 'OFF' }}</p>
 		</div>
 	`,
-	methods: {
-		toggleAutoPlay() {
-			this.$refs.sampleCarousel.toggleAutoPlay();
-		},
-		carouselInteraction() {
-			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
-		},
-	},
 });
 
 export const Fade = () => ({
 	components: {
 		KvCarousel,
 	},
-	mounted() {
-		this.$nextTick(() => {
-			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
-		});
-	},
 	template: `
 		<div>
 			<kv-carousel

package/dist/components/stories/KvVerticalCarousel.stories.js

@@ -1,3 +1,4 @@
+import { watch } from 'vue';
 import KvVerticalCarousel from '../KvVerticalCarousel.vue';
 import KvButton from '../KvButton.vue';
 
@@ -186,14 +187,12 @@ export const AutoPlayButton = () => ({
 	components: {
 		KvVerticalCarousel,
 	},
-	data() {
-		return {
-			isPlaying: false,
-		};
-	},
+	data: () => ({
+		isAutoplaying: false,
+	}),
 	mounted() {
-		this.$nextTick(() => {
-			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
+		watch(() => this.$refs?.sampleCarousel?.isAutoplaying, (newValue) => {
+			this.isAutoplaying = newValue;
 		});
 	},
 	template: `
@@ -203,34 +202,21 @@ export const AutoPlayButton = () => ({
 				style="max-width: 400px;"
 				:embla-options="{ loop: false }"
 				:autoplay-options="{ playOnInit: true, delay: 3000 }"
-				@interact-carousel="carouselInteraction"
 			>
 				${defaultCarouselSlides}
 			</kv-vertical-carousel>
-			<a href="#" @click.native.prevent="toggleAutoPlay()" role="toggleAutoPlayButton">Toggle AutoPlay</a>
+			<a href="#" @click.native.prevent="$refs.sampleCarousel.toggleAutoPlay()" role="toggleAutoPlayButton">Toggle AutoPlay</a>
 			<br/>
-			<p>AutoPlay is: {{ isPlaying ? 'ON' : 'OFF' }}</p>
+			<p>AutoPlay is: {{ isAutoplaying ? 'ON' : 'OFF' }}</p>
 		</div>
 	`,
-	methods: {
-		toggleAutoPlay() {
-			this.$refs.sampleCarousel.toggleAutoPlay();
-		},
-		carouselInteraction() {
-			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
-		},
-	},
 });
 
+/** Fade really only works when the carousel displays 1 slide at a time, this story is wonky as expected */
 export const Fade = () => ({
 	components: {
 		KvVerticalCarousel,
 	},
-	mounted() {
-		this.$nextTick(() => {
-			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
-		});
-	},
 	template: `
 		<div>
 			<kv-vertical-carousel

package/dist/utils/carousels.cjs

@@ -61,6 +61,7 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
   const rootEl = (0, import_vue_demi.ref)(null);
   const embla = (0, import_vue_demi.ref)(null);
   const slides = (0, import_vue_demi.ref)([]);
+  const isAutoplaying = (0, import_vue_demi.ref)(false);
   const startIndex = ((_a = emblaOptions.value) == null ? void 0 : _a.startIndex) ?? 0;
   const currentIndex = (0, import_vue_demi.ref)(startIndex);
   const slideIndicatorCount = (0, import_vue_demi.ref)(0);
@@ -86,10 +87,15 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     embla.value.scrollTo(index);
   };
   const handleUserInteraction = async (index, interactionType) => {
+    var _a2, _b;
     if (index !== null && typeof index !== "undefined") {
       await (0, import_vue_demi.nextTick)();
       goToSlide(index);
     }
+    const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
+    if (autoplay) {
+      autoplay.stop();
+    }
     emit("interact-carousel", interactionType);
   };
   const toggleAutoPlay = () => {
@@ -99,14 +105,6 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
       return;
     const playOrStop = autoplay.isPlaying() ? autoplay.stop : autoplay.play;
     playOrStop();
-    handleUserInteraction(null, "autoplay");
-  };
-  const isAutoplaying = () => {
-    var _a2, _b;
-    const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
-    if (!autoplay)
-      return false;
-    return autoplay.isPlaying();
   };
   const slideIndicatorListLength = () => {
     const indicator = embla.value ? embla.value.scrollSnapList().length : 0;
@@ -143,7 +141,7 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     return false;
   };
   (0, import_vue_demi.onMounted)(async () => {
-    var _a2;
+    var _a2, _b, _c;
     const combinedPluginOptions = [];
     if (Object.keys(autoplayOptions.value).length !== 0) {
       combinedPluginOptions.push((0, import_embla_carousel_autoplay.default)(autoplayOptions.value));
@@ -181,11 +179,21 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
         emit("change", currentIndex);
       });
     });
+    (_b = embla == null ? void 0 : embla.value) == null ? void 0 : _b.on("autoplay:play", () => {
+      console.log("autoplay:play");
+      isAutoplaying.value = true;
+    });
+    (_c = embla == null ? void 0 : embla.value) == null ? void 0 : _c.on("autoplay:stop", () => {
+      console.log("autoplay:stop");
+      isAutoplaying.value = false;
+    });
   });
   (0, import_vue_demi.onUnmounted)(async () => {
-    var _a2, _b;
+    var _a2, _b, _c, _d;
     (_a2 = embla == null ? void 0 : embla.value) == null ? void 0 : _a2.off("select");
-    (_b = embla == null ? void 0 : embla.value) == null ? void 0 : _b.destroy();
+    (_b = embla == null ? void 0 : embla.value) == null ? void 0 : _b.off("autoplay:play");
+    (_c = embla == null ? void 0 : embla.value) == null ? void 0 : _c.off("autoplay:stop");
+    (_d = embla == null ? void 0 : embla.value) == null ? void 0 : _d.destroy();
   });
   return {
     rootEl,

package/dist/utils/carousels.js

@@ -1,6 +1,6 @@
 import {
   carouselUtil
-} from "./chunk-P6FXCNYP.js";
+} from "./chunk-WLQNGWMC.js";
 import "./chunk-HV3AUBFT.js";
 import "./chunk-YCNMJ4YV.js";
 export {

package/dist/utils/{chunk-P6FXCNYP.js → chunk-WLQNGWMC.js}

@@ -25,6 +25,7 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
   const rootEl = ref(null);
   const embla = ref(null);
   const slides = ref([]);
+  const isAutoplaying = ref(false);
   const startIndex = ((_a = emblaOptions.value) == null ? void 0 : _a.startIndex) ?? 0;
   const currentIndex = ref(startIndex);
   const slideIndicatorCount = ref(0);
@@ -50,10 +51,15 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     embla.value.scrollTo(index);
   };
   const handleUserInteraction = async (index, interactionType) => {
+    var _a2, _b;
     if (index !== null && typeof index !== "undefined") {
       await nextTick();
       goToSlide(index);
     }
+    const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
+    if (autoplay) {
+      autoplay.stop();
+    }
     emit("interact-carousel", interactionType);
   };
   const toggleAutoPlay = () => {
@@ -63,14 +69,6 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
       return;
     const playOrStop = autoplay.isPlaying() ? autoplay.stop : autoplay.play;
     playOrStop();
-    handleUserInteraction(null, "autoplay");
-  };
-  const isAutoplaying = () => {
-    var _a2, _b;
-    const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
-    if (!autoplay)
-      return false;
-    return autoplay.isPlaying();
   };
   const slideIndicatorListLength = () => {
     const indicator = embla.value ? embla.value.scrollSnapList().length : 0;
@@ -107,7 +105,7 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     return false;
   };
   onMounted(async () => {
-    var _a2;
+    var _a2, _b, _c;
     const combinedPluginOptions = [];
     if (Object.keys(autoplayOptions.value).length !== 0) {
       combinedPluginOptions.push(Autoplay(autoplayOptions.value));
@@ -145,11 +143,21 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
         emit("change", currentIndex);
       });
     });
+    (_b = embla == null ? void 0 : embla.value) == null ? void 0 : _b.on("autoplay:play", () => {
+      console.log("autoplay:play");
+      isAutoplaying.value = true;
+    });
+    (_c = embla == null ? void 0 : embla.value) == null ? void 0 : _c.on("autoplay:stop", () => {
+      console.log("autoplay:stop");
+      isAutoplaying.value = false;
+    });
   });
   onUnmounted(async () => {
-    var _a2, _b;
+    var _a2, _b, _c, _d;
     (_a2 = embla == null ? void 0 : embla.value) == null ? void 0 : _a2.off("select");
-    (_b = embla == null ? void 0 : embla.value) == null ? void 0 : _b.destroy();
+    (_b = embla == null ? void 0 : embla.value) == null ? void 0 : _b.off("autoplay:play");
+    (_c = embla == null ? void 0 : embla.value) == null ? void 0 : _c.off("autoplay:stop");
+    (_d = embla == null ? void 0 : embla.value) == null ? void 0 : _d.destroy();
   });
   return {
     rootEl,

package/dist/utils/index.cjs

@@ -169,6 +169,7 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
   const rootEl = (0, import_vue_demi.ref)(null);
   const embla = (0, import_vue_demi.ref)(null);
   const slides = (0, import_vue_demi.ref)([]);
+  const isAutoplaying = (0, import_vue_demi.ref)(false);
   const startIndex = ((_a = emblaOptions.value) == null ? void 0 : _a.startIndex) ?? 0;
   const currentIndex = (0, import_vue_demi.ref)(startIndex);
   const slideIndicatorCount = (0, import_vue_demi.ref)(0);
@@ -194,10 +195,15 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     embla.value.scrollTo(index);
   };
   const handleUserInteraction = async (index, interactionType) => {
+    var _a2, _b;
     if (index !== null && typeof index !== "undefined") {
       await (0, import_vue_demi.nextTick)();
       goToSlide(index);
     }
+    const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
+    if (autoplay) {
+      autoplay.stop();
+    }
     emit("interact-carousel", interactionType);
   };
   const toggleAutoPlay = () => {
@@ -207,14 +213,6 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
       return;
     const playOrStop = autoplay.isPlaying() ? autoplay.stop : autoplay.play;
     playOrStop();
-    handleUserInteraction(null, "autoplay");
-  };
-  const isAutoplaying = () => {
-    var _a2, _b;
-    const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
-    if (!autoplay)
-      return false;
-    return autoplay.isPlaying();
   };
   const slideIndicatorListLength = () => {
     const indicator = embla.value ? embla.value.scrollSnapList().length : 0;
@@ -251,7 +249,7 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     return false;
   };
   (0, import_vue_demi.onMounted)(async () => {
-    var _a2;
+    var _a2, _b, _c;
     const combinedPluginOptions = [];
     if (Object.keys(autoplayOptions.value).length !== 0) {
       combinedPluginOptions.push((0, import_embla_carousel_autoplay.default)(autoplayOptions.value));
@@ -289,11 +287,21 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
         emit("change", currentIndex);
       });
     });
+    (_b = embla == null ? void 0 : embla.value) == null ? void 0 : _b.on("autoplay:play", () => {
+      console.log("autoplay:play");
+      isAutoplaying.value = true;
+    });
+    (_c = embla == null ? void 0 : embla.value) == null ? void 0 : _c.on("autoplay:stop", () => {
+      console.log("autoplay:stop");
+      isAutoplaying.value = false;
+    });
   });
   (0, import_vue_demi.onUnmounted)(async () => {
-    var _a2, _b;
+    var _a2, _b, _c, _d;
     (_a2 = embla == null ? void 0 : embla.value) == null ? void 0 : _a2.off("select");
-    (_b = embla == null ? void 0 : embla.value) == null ? void 0 : _b.destroy();
+    (_b = embla == null ? void 0 : embla.value) == null ? void 0 : _b.off("autoplay:play");
+    (_c = embla == null ? void 0 : embla.value) == null ? void 0 : _c.off("autoplay:stop");
+    (_d = embla == null ? void 0 : embla.value) == null ? void 0 : _d.destroy();
   });
   return {
     rootEl,

package/dist/utils/index.js

@@ -31,7 +31,7 @@ import {
 } from "./chunk-3HK4G4NT.js";
 import {
   carouselUtil
-} from "./chunk-P6FXCNYP.js";
+} from "./chunk-WLQNGWMC.js";
 import {
   throttle
 } from "./chunk-HV3AUBFT.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "4.6.0",
+  "version": "4.7.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -98,5 +98,5 @@
   "peerDependencies": {
     "vue": ">=3.0.0"
   },
-  "gitHead": "4e5a4bbf728bcf6d7c29c291591cf52798230cb0"
+  "gitHead": "714dd64c1fdea169392d23f77b934c131230df99"
 }

package/utils/carousels.js

@@ -22,6 +22,8 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
 	const rootEl = ref(null);
 	const embla = ref(null);
 	const slides = ref([]);
+	const isAutoplaying = ref(false);
+
 	const startIndex = emblaOptions.value?.startIndex ?? 0;
 	const currentIndex = ref(startIndex);
 	// The indicator count may differ from the slide count when multiple slides are in view
@@ -63,6 +65,13 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
 			await nextTick(); // wait for embla.
 			goToSlide(index);
 		}
+
+		/** Stop autoplay on user interaction */
+		const autoplay = embla.value?.plugins()?.autoplay;
+		if (autoplay) {
+			autoplay.stop();
+		}
+
 		/**
 		 * Fires when the user interacts with the carousel.
 		 * Contains the interaction type (swipe-left, click-left-arrow, etc.)
@@ -81,19 +90,8 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
 		if (!autoplay) return;
 		const playOrStop = autoplay.isPlaying() ? autoplay.stop : autoplay.play;
 		playOrStop();
-		handleUserInteraction(null, 'autoplay');
 	};
 
-	/**
-	 * Returns true if the carousel is autoplaying
-	 *
-	 * @public This is a public method
-	 */
-	const isAutoplaying = () => {
-		const autoplay = embla.value?.plugins()?.autoplay;
-		if (!autoplay) return false;
-		return autoplay.isPlaying();
-	};
 	/**
 	 * Returns number of slides in the carousel
 	 *
@@ -198,10 +196,32 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
 				emit('change', currentIndex);
 			});
 		});
+
+		embla?.value?.on('autoplay:play', () => {
+			console.log('autoplay:play');
+			/**
+			 * Fires when autoplay starts
+			 * @event autoplay-play
+			 * @type {Event}
+			 */
+			isAutoplaying.value = true;
+		});
+
+		embla?.value?.on('autoplay:stop', () => {
+			console.log('autoplay:stop');
+			/**
+			 * Fires when autoplay starts
+			 * @event autoplay-play
+			 * @type {Event}
+			 */
+			isAutoplaying.value = false;
+		});
 	});
 
 	onUnmounted(async () => {
 		embla?.value?.off('select');
+		embla?.value?.off('autoplay:play');
+		embla?.value?.off('autoplay:stop');
 		embla?.value?.destroy();
 	});
 

package/vue/KvVerticalCarousel.vue

@@ -29,40 +29,69 @@
 		<!-- Carousel Controls -->
 		<div
 			class="kv-carousel__controls tw-flex
-			tw-justify-between md:tw-justify-center tw-items-center tw-gap-2
-			tw-mt-2 tw-w-full"
+			tw-items-center tw-gap-2
+			tw-mt-2 tw-w-full
+			tw-justify-between md:tw-justify-center"
 		>
-			<button
-				class="tw-text-primary
+			<div
+				class="tw-flex tw-gap-2 tw-w-full md:tw-w-auto"
+				:class="{'tw-justify-between md:tw-justify-center': !hasAutoplay}"
+			>
+				<button
+					class="tw-text-primary
 					tw-rounded-full
 					tw-border-2 tw-border-primary
 					tw-h-4 tw-w-4
 					tw-flex tw-items-center tw-justify-center
 					disabled:tw-opacity-low disabled:tw-cursor-default"
-				:disabled="embla && !embla.canScrollPrev()"
-				@click="handleUserInteraction(previousIndex, 'click-left-arrow')"
-			>
-				<kv-material-icon
-					class="tw-w-4"
-					:icon="mdiChevronUp"
-				/>
-				<span class="tw-sr-only">Show previous slide</span>
-			</button>
+					:disabled="embla && !embla.canScrollPrev()"
+					@click="handleUserInteraction(previousIndex, 'click-left-arrow')"
+				>
+					<kv-material-icon
+						class="tw-w-4"
+						:icon="mdiChevronUp"
+					/>
+					<span class="tw-sr-only">Show previous slide</span>
+				</button>
+				<button
+					class="tw-text-primary
+					tw-rounded-full
+					tw-border-2 tw-border-primary
+					tw-h-4 tw-w-4
+					tw-flex tw-items-center tw-justify-center
+					disabled:tw-opacity-low disabled:tw-cursor-default"
+					:disabled="embla && !embla.canScrollNext()"
+					@click="handleUserInteraction(nextIndex, 'click-right-arrow')"
+				>
+					<kv-material-icon
+						class="tw-w-4"
+						:icon="mdiChevronDown"
+					/>
+					<span class="tw-sr-only">Show next slide</span>
+				</button>
+			</div>
+
 			<button
+				v-if="hasAutoplay"
 				class="tw-text-primary
 					tw-rounded-full
 					tw-border-2 tw-border-primary
 					tw-h-4 tw-w-4
 					tw-flex tw-items-center tw-justify-center
 					disabled:tw-opacity-low disabled:tw-cursor-default"
-				:disabled="embla && !embla.canScrollNext()"
-				@click="handleUserInteraction(nextIndex, 'click-right-arrow')"
+				@click.native.prevent="toggleAutoPlay()"
 			>
 				<kv-material-icon
+					v-if="isAutoplaying"
 					class="tw-w-4"
-					:icon="mdiChevronDown"
+					:icon="mdiPause"
 				/>
-				<span class="tw-sr-only">Show next slide</span>
+				<kv-material-icon
+					v-else
+					class="tw-w-4"
+					:icon="mdiPlay"
+				/>
+				<span class="tw-sr-only">Show previous slide</span>
 			</button>
 		</div>
 	</div>
@@ -70,9 +99,15 @@
 
 <script>
 import {
+	toRefs,
+} from 'vue-demi';
+import {
+	mdiPause,
+	mdiPlay,
 	mdiChevronUp,
 	mdiChevronDown,
 } from '@mdi/js';
+import { computed } from 'vue';
 import { carouselUtil } from '../utils/carousels';
 import KvMaterialIcon from './KvMaterialIcon.vue';
 
@@ -129,6 +164,10 @@ export default {
 		'interact-carousel',
 	],
 	setup(props, { emit, slots }) {
+		const {
+			autoplayOptions,
+		} = toRefs(props);
+
 		const {
 			componentSlotKeys,
 			currentIndex,
@@ -148,7 +187,12 @@ export default {
 			toggleAutoPlay,
 		} = carouselUtil(props, { emit, slots }, { axis: 'y' });
 
+		const hasAutoplay = computed(() => {
+			return Object.keys(autoplayOptions.value).length !== 0;
+		});
+
 		return {
+			hasAutoplay,
 			componentSlotKeys,
 			currentIndex,
 			embla,
@@ -156,6 +200,8 @@ export default {
 			handleUserInteraction,
 			isAriaHidden,
 			isAutoplaying,
+			mdiPause,
+			mdiPlay,
 			mdiChevronDown,
 			mdiChevronUp,
 			nextIndex,

package/vue/stories/KvCarousel.stories.js

@@ -1,3 +1,4 @@
+import { watch } from 'vue';
 import KvCarousel from '../KvCarousel.vue';
 import KvLoadingSpinner from '../KvLoadingSpinner.vue';
 import KvButton from '../KvButton.vue';
@@ -444,14 +445,12 @@ export const AutoPlayButton = () => ({
 	components: {
 		KvCarousel,
 	},
-	data() {
-		return {
-			isPlaying: false,
-		};
-	},
+	data: () => ({
+		isAutoplaying: false,
+	}),
 	mounted() {
-		this.$nextTick(() => {
-			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
+		watch(() => this.$refs?.sampleCarousel?.isAutoplaying, (newValue) => {
+			this.isAutoplaying = newValue;
 		});
 	},
 	template: `
@@ -461,34 +460,20 @@ export const AutoPlayButton = () => ({
 				style="max-width: 400px;"
 				:embla-options="{ loop: false }"
 				:autoplay-options="{ playOnInit: true, delay: 3000 }"
-				@interact-carousel="carouselInteraction"
 			>
 				${defaultCarouselSlides}
 			</kv-carousel>
-			<a href="#" @click.native.prevent="toggleAutoPlay()" role="toggleAutoPlayButton">Toggle AutoPlay</a>
+			<a href="#" @click.native.prevent="$refs.sampleCarousel.toggleAutoPlay()" role="toggleAutoPlayButton">Toggle AutoPlay</a>
 			<br/>
-			<p>AutoPlay is: {{ isPlaying ? 'ON' : 'OFF' }}</p>
+			<p>AutoPlay is: {{ isAutoplaying ? 'ON' : 'OFF' }}</p>
 		</div>
 	`,
-	methods: {
-		toggleAutoPlay() {
-			this.$refs.sampleCarousel.toggleAutoPlay();
-		},
-		carouselInteraction() {
-			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
-		},
-	},
 });
 
 export const Fade = () => ({
 	components: {
 		KvCarousel,
 	},
-	mounted() {
-		this.$nextTick(() => {
-			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
-		});
-	},
 	template: `
 		<div>
 			<kv-carousel

package/vue/stories/KvVerticalCarousel.stories.js

@@ -1,3 +1,4 @@
+import { watch } from 'vue';
 import KvVerticalCarousel from '../KvVerticalCarousel.vue';
 import KvButton from '../KvButton.vue';
 
@@ -186,14 +187,12 @@ export const AutoPlayButton = () => ({
 	components: {
 		KvVerticalCarousel,
 	},
-	data() {
-		return {
-			isPlaying: false,
-		};
-	},
+	data: () => ({
+		isAutoplaying: false,
+	}),
 	mounted() {
-		this.$nextTick(() => {
-			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
+		watch(() => this.$refs?.sampleCarousel?.isAutoplaying, (newValue) => {
+			this.isAutoplaying = newValue;
 		});
 	},
 	template: `
@@ -203,34 +202,21 @@ export const AutoPlayButton = () => ({
 				style="max-width: 400px;"
 				:embla-options="{ loop: false }"
 				:autoplay-options="{ playOnInit: true, delay: 3000 }"
-				@interact-carousel="carouselInteraction"
 			>
 				${defaultCarouselSlides}
 			</kv-vertical-carousel>
-			<a href="#" @click.native.prevent="toggleAutoPlay()" role="toggleAutoPlayButton">Toggle AutoPlay</a>
+			<a href="#" @click.native.prevent="$refs.sampleCarousel.toggleAutoPlay()" role="toggleAutoPlayButton">Toggle AutoPlay</a>
 			<br/>
-			<p>AutoPlay is: {{ isPlaying ? 'ON' : 'OFF' }}</p>
+			<p>AutoPlay is: {{ isAutoplaying ? 'ON' : 'OFF' }}</p>
 		</div>
 	`,
-	methods: {
-		toggleAutoPlay() {
-			this.$refs.sampleCarousel.toggleAutoPlay();
-		},
-		carouselInteraction() {
-			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
-		},
-	},
 });
 
+/** Fade really only works when the carousel displays 1 slide at a time, this story is wonky as expected */
 export const Fade = () => ({
 	components: {
 		KvVerticalCarousel,
 	},
-	mounted() {
-		this.$nextTick(() => {
-			this.isPlaying = this.$refs.sampleCarousel.isAutoplaying();
-		});
-	},
 	template: `
 		<div>
 			<kv-vertical-carousel