@plaidev/karte-action-sdk 1.1.268-29083162.f59ff16d → 1.1.268-29089806.0ded74d0

package/dist/hydrate/index.es.js

@@ -17457,12 +17457,12 @@ function add_css$f(target) {
 
 function get_each_context$1(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[31] = list[i];
-	child_ctx[33] = i;
+	child_ctx[33] = list[i];
+	child_ctx[35] = i;
 	return child_ctx;
 }
 
-// (174:4) {#each indicators ?? [] as indicator, i}
+// (188:4) {#each indicators ?? [] as indicator, i}
 function create_each_block$1(ctx) {
 	let button;
 	let i_1;
@@ -17472,7 +17472,7 @@ function create_each_block$1(ctx) {
 	let dispose;
 
 	function click_handler() {
-		return /*click_handler*/ ctx[19](/*i*/ ctx[33]);
+		return /*click_handler*/ ctx[21](/*i*/ ctx[35]);
 	}
 
 	return {
@@ -17495,7 +17495,7 @@ function create_each_block$1(ctx) {
 			attr(i_1, "style", i_1_style_value = objToStyle({
 				.../*indicatorItemStyle*/ ctx[3],
 				...{
-					background: /*indicator*/ ctx[31].isActive ? '#555555' : '#AAAAAA'
+					background: /*indicator*/ ctx[33].isActive ? '#555555' : '#AAAAAA'
 				}
 			}));
 
@@ -17521,7 +17521,7 @@ function create_each_block$1(ctx) {
 			if (dirty[0] & /*indicatorItemStyle, indicators*/ 136 && i_1_style_value !== (i_1_style_value = objToStyle({
 				.../*indicatorItemStyle*/ ctx[3],
 				...{
-					background: /*indicator*/ ctx[31].isActive ? '#555555' : '#AAAAAA'
+					background: /*indicator*/ ctx[33].isActive ? '#555555' : '#AAAAAA'
 				}
 			}))) {
 				attr(i_1, "style", i_1_style_value);
@@ -17544,8 +17544,8 @@ function create_fragment$j(ctx) {
 	let current;
 	let mounted;
 	let dispose;
-	const default_slot_template = /*#slots*/ ctx[17].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[16], null);
+	const default_slot_template = /*#slots*/ ctx[19].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[18], null);
 	let each_value = /*indicators*/ ctx[7] ?? [];
 	let each_blocks = [];
 
@@ -17607,7 +17607,7 @@ function create_fragment$j(ctx) {
 				default_slot.m(ul, null);
 			}
 
-			/*ul_binding*/ ctx[18](ul);
+			/*ul_binding*/ ctx[20](ul);
 			append_hydration(div1, t);
 			append_hydration(div1, div0);
 
@@ -17628,15 +17628,15 @@ function create_fragment$j(ctx) {
 		},
 		p(ctx, dirty) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty[0] & /*$$scope*/ 65536)) {
+				if (default_slot.p && (!current || dirty[0] & /*$$scope*/ 262144)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[16],
+						/*$$scope*/ ctx[18],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[16])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[16], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[18])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[18], dirty, null),
 						null
 					);
 				}
@@ -17693,7 +17693,7 @@ function create_fragment$j(ctx) {
 		d(detaching) {
 			if (detaching) detach(div1);
 			if (default_slot) default_slot.d(detaching);
-			/*ul_binding*/ ctx[18](null);
+			/*ul_binding*/ ctx[20](null);
 			destroy_each(each_blocks, detaching);
 			mounted = false;
 			run_all(dispose);
@@ -17705,6 +17705,7 @@ function instance$j($$self, $$props, $$invalidate) {
 	let indicators;
 	let itemWidthPercentage;
 	let style;
+	let baseContainerStyle;
 	let containerStyle;
 	let indicatorListStyle;
 	let indicatorItemStyle;
@@ -17718,27 +17719,25 @@ function instance$j($$self, $$props, $$invalidate) {
 	let isDragging = false;
 	let startX = 0;
 	let movedX = null;
-	let childCount = slotElement?.children?.length ?? 0;
-
-	const calcTransformX = (index, itemCount, _movedX) => {
-		if (index === 0) return undefined;
-
-		const movingX = (() => {
-			let result = 0;
-			const itemWidth = itemWidthPercentage;
-			const itemMargin = (100 - itemWidthPercentage) / 2;
-
-			const movingMap = [...Array(currentIndex + 1)].map((_, index) => {
-				if (index === 0) return 0;
-				if (index === 1 || index === itemCount - 1) return itemWidth - itemMargin;
-				return itemWidth;
-			});
-
-			movingMap.forEach(value => result += value);
-			return result;
-		})();
+	let childCount = 0;
+	let transformX;
+	console.log('transformX', transformX);
+
+	const computeTransformX = (index, itemCount, movedX, itemWidthPercentage, gap) => {
+		if (index === 0) return;
+		let result = 0;
+		const itemMargin = (100 - itemWidthPercentage) / 2;
+
+		for (let i = 1; i <= index; i++) {
+			if (i === 1 || i === itemCount - 1) {
+				result += itemWidthPercentage - itemMargin;
+			} else {
+				result += itemWidthPercentage;
+			}
+		}
 
-		return `translateX(calc(-${movingX}% - ${(props.gap ?? 0) * index}px + ${(movedX ?? 0) * -1}px))`;
+		const moved = movedX ? ` + ${-movedX}px` : '';
+		return `translateX(calc(-${result}% - ${gap * index}px${moved}))`;
 	};
 
 	const handleClickIndicator = index => {
@@ -17754,6 +17753,8 @@ function instance$j($$self, $$props, $$invalidate) {
 	};
 
 	const toNext = () => {
+		console.log('toNext');
+
 		if (currentIndex < childCount - 1) {
 			$$invalidate(12, currentIndex = currentIndex + 1);
 		} else if (props.loop) {
@@ -17829,28 +17830,36 @@ function instance$j($$self, $$props, $$invalidate) {
 
 		document.removeEventListener('mousemove', handleMousemove);
 		document.removeEventListener('mouseup', handleMouseup);
+		document.removeEventListener('click', handleClick);
 	};
 
 	const handleMousedown = e => {
 		startX = e.clientX;
 		isDragging = false;
 		document.addEventListener('mousemove', handleMousemove, { passive: true });
-		document.addEventListener('mouseup', handleMouseup, { passive: true });
+		document.addEventListener('mouseup', handleMouseup, { passive: false });
 		document.addEventListener('click', handleClick, { capture: true });
 	};
 
 	onMount$1(() => {
 		setChildCount();
-		setInterval(setChildCount, 300);
+
+		// const childCountTimer = setInterval(setChildCount, 300);
+		let autoSlideTimer;
 
 		if (props.auto) {
-			setInterval(
+			autoSlideTimer = setInterval(
 				() => {
 					toNext();
 				},
 				props.interval ?? 5000
 			);
 		}
+
+		return () => {
+			// clearInterval(childCountTimer)
+			if (autoSlideTimer) clearInterval(autoSlideTimer);
+		};
 	});
 
 	function ul_binding($$value) {
@@ -17866,20 +17875,30 @@ function instance$j($$self, $$props, $$invalidate) {
 		if ('layerId' in $$props) $$invalidate(0, layerId = $$props.layerId);
 		if ('props' in $$props) $$invalidate(11, props = $$props.props);
 		if ('overrideStyle' in $$props) $$invalidate(1, overrideStyle = $$props.overrideStyle);
-		if ('$$scope' in $$props) $$invalidate(16, $$scope = $$props.$$scope);
+		if ('$$scope' in $$props) $$invalidate(18, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
+		if ($$self.$$.dirty[0] & /*slotElement*/ 4) {
+			if (slotElement) {
+				$$invalidate(14, childCount = slotElement.children.length);
+			}
+		}
+
 		if ($$self.$$.dirty[0] & /*childCount, currentIndex*/ 20480) {
 			$$invalidate(7, indicators = [...Array(childCount)].map((_, i) => ({ index: i, isActive: i === currentIndex })));
 		}
 
 		if ($$self.$$.dirty[0] & /*props*/ 2048) {
-			$$invalidate(15, itemWidthPercentage = props.itemWidthPercentage ?? 100);
+			$$invalidate(17, itemWidthPercentage = props.itemWidthPercentage ?? 100);
 		}
 
-		if ($$self.$$.dirty[0] & /*props, itemWidthPercentage, movedX, currentIndex, childCount*/ 63488) {
-			$$invalidate(5, containerStyle = objToStyle({
+		if ($$self.$$.dirty[0] & /*currentIndex, childCount, movedX, itemWidthPercentage, props*/ 161792) {
+			$$invalidate(15, transformX = computeTransformX(currentIndex, childCount, movedX, itemWidthPercentage, props.gap ?? 0));
+		}
+
+		if ($$self.$$.dirty[0] & /*props, itemWidthPercentage, movedX*/ 141312) {
+			$$invalidate(16, baseContainerStyle = {
 				display: 'grid',
 				// marginInline: `-${props.gap}px`,
 				gap: `${props.gap}px`,
@@ -17888,8 +17907,14 @@ function instance$j($$self, $$props, $$invalidate) {
 				gridAutoColumns: `minmax(${itemWidthPercentage}%, 1fr)`,
 				flexShrink: 0,
 				transition: movedX === null ? 'transform 0.5s' : undefined,
-				transform: calcTransformX(currentIndex, childCount),
 				userSelect: 'none'
+			});
+		}
+
+		if ($$self.$$.dirty[0] & /*baseContainerStyle, transformX*/ 98304) {
+			$$invalidate(5, containerStyle = objToStyle({
+				...baseContainerStyle,
+				transform: transformX
 			}));
 		}
 	};
@@ -17928,6 +17953,8 @@ function instance$j($$self, $$props, $$invalidate) {
 		currentIndex,
 		movedX,
 		childCount,
+		transformX,
+		baseContainerStyle,
 		itemWidthPercentage,
 		$$scope,
 		slots,

package/dist/index.es.js

@@ -16150,12 +16150,12 @@ function add_css$f(target) {
 
 function get_each_context$1(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[31] = list[i];
-	child_ctx[33] = i;
+	child_ctx[33] = list[i];
+	child_ctx[35] = i;
 	return child_ctx;
 }
 
-// (174:4) {#each indicators ?? [] as indicator, i}
+// (188:4) {#each indicators ?? [] as indicator, i}
 function create_each_block$1(ctx) {
 	let button;
 	let i_1;
@@ -16165,7 +16165,7 @@ function create_each_block$1(ctx) {
 	let dispose;
 
 	function click_handler() {
-		return /*click_handler*/ ctx[19](/*i*/ ctx[33]);
+		return /*click_handler*/ ctx[21](/*i*/ ctx[35]);
 	}
 
 	return {
@@ -16177,7 +16177,7 @@ function create_each_block$1(ctx) {
 			attr(i_1, "style", i_1_style_value = objToStyle({
 				.../*indicatorItemStyle*/ ctx[3],
 				...{
-					background: /*indicator*/ ctx[31].isActive ? '#555555' : '#AAAAAA'
+					background: /*indicator*/ ctx[33].isActive ? '#555555' : '#AAAAAA'
 				}
 			}));
 
@@ -16203,7 +16203,7 @@ function create_each_block$1(ctx) {
 			if (dirty[0] & /*indicatorItemStyle, indicators*/ 136 && i_1_style_value !== (i_1_style_value = objToStyle({
 				.../*indicatorItemStyle*/ ctx[3],
 				...{
-					background: /*indicator*/ ctx[31].isActive ? '#555555' : '#AAAAAA'
+					background: /*indicator*/ ctx[33].isActive ? '#555555' : '#AAAAAA'
 				}
 			}))) {
 				attr(i_1, "style", i_1_style_value);
@@ -16226,8 +16226,8 @@ function create_fragment$j(ctx) {
 	let current;
 	let mounted;
 	let dispose;
-	const default_slot_template = /*#slots*/ ctx[17].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[16], null);
+	const default_slot_template = /*#slots*/ ctx[19].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[18], null);
 	let each_value = /*indicators*/ ctx[7] ?? [];
 	let each_blocks = [];
 
@@ -16262,7 +16262,7 @@ function create_fragment$j(ctx) {
 				default_slot.m(ul, null);
 			}
 
-			/*ul_binding*/ ctx[18](ul);
+			/*ul_binding*/ ctx[20](ul);
 			append(div1, t);
 			append(div1, div0);
 
@@ -16283,15 +16283,15 @@ function create_fragment$j(ctx) {
 		},
 		p(ctx, dirty) {
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty[0] & /*$$scope*/ 65536)) {
+				if (default_slot.p && (!current || dirty[0] & /*$$scope*/ 262144)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[16],
+						/*$$scope*/ ctx[18],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[16])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[16], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[18])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[18], dirty, null),
 						null
 					);
 				}
@@ -16348,7 +16348,7 @@ function create_fragment$j(ctx) {
 		d(detaching) {
 			if (detaching) detach(div1);
 			if (default_slot) default_slot.d(detaching);
-			/*ul_binding*/ ctx[18](null);
+			/*ul_binding*/ ctx[20](null);
 			destroy_each(each_blocks, detaching);
 			mounted = false;
 			run_all(dispose);
@@ -16360,6 +16360,7 @@ function instance$j($$self, $$props, $$invalidate) {
 	let indicators;
 	let itemWidthPercentage;
 	let style;
+	let baseContainerStyle;
 	let containerStyle;
 	let indicatorListStyle;
 	let indicatorItemStyle;
@@ -16373,27 +16374,25 @@ function instance$j($$self, $$props, $$invalidate) {
 	let isDragging = false;
 	let startX = 0;
 	let movedX = null;
-	let childCount = slotElement?.children?.length ?? 0;
-
-	const calcTransformX = (index, itemCount, _movedX) => {
-		if (index === 0) return undefined;
-
-		const movingX = (() => {
-			let result = 0;
-			const itemWidth = itemWidthPercentage;
-			const itemMargin = (100 - itemWidthPercentage) / 2;
-
-			const movingMap = [...Array(currentIndex + 1)].map((_, index) => {
-				if (index === 0) return 0;
-				if (index === 1 || index === itemCount - 1) return itemWidth - itemMargin;
-				return itemWidth;
-			});
-
-			movingMap.forEach(value => result += value);
-			return result;
-		})();
+	let childCount = 0;
+	let transformX;
+	console.log('transformX', transformX);
+
+	const computeTransformX = (index, itemCount, movedX, itemWidthPercentage, gap) => {
+		if (index === 0) return;
+		let result = 0;
+		const itemMargin = (100 - itemWidthPercentage) / 2;
+
+		for (let i = 1; i <= index; i++) {
+			if (i === 1 || i === itemCount - 1) {
+				result += itemWidthPercentage - itemMargin;
+			} else {
+				result += itemWidthPercentage;
+			}
+		}
 
-		return `translateX(calc(-${movingX}% - ${(props.gap ?? 0) * index}px + ${(movedX ?? 0) * -1}px))`;
+		const moved = movedX ? ` + ${-movedX}px` : '';
+		return `translateX(calc(-${result}% - ${gap * index}px${moved}))`;
 	};
 
 	const handleClickIndicator = index => {
@@ -16409,6 +16408,8 @@ function instance$j($$self, $$props, $$invalidate) {
 	};
 
 	const toNext = () => {
+		console.log('toNext');
+
 		if (currentIndex < childCount - 1) {
 			$$invalidate(12, currentIndex = currentIndex + 1);
 		} else if (props.loop) {
@@ -16484,28 +16485,36 @@ function instance$j($$self, $$props, $$invalidate) {
 
 		document.removeEventListener('mousemove', handleMousemove);
 		document.removeEventListener('mouseup', handleMouseup);
+		document.removeEventListener('click', handleClick);
 	};
 
 	const handleMousedown = e => {
 		startX = e.clientX;
 		isDragging = false;
 		document.addEventListener('mousemove', handleMousemove, { passive: true });
-		document.addEventListener('mouseup', handleMouseup, { passive: true });
+		document.addEventListener('mouseup', handleMouseup, { passive: false });
 		document.addEventListener('click', handleClick, { capture: true });
 	};
 
 	onMount$1(() => {
 		setChildCount();
-		setInterval(setChildCount, 300);
+
+		// const childCountTimer = setInterval(setChildCount, 300);
+		let autoSlideTimer;
 
 		if (props.auto) {
-			setInterval(
+			autoSlideTimer = setInterval(
 				() => {
 					toNext();
 				},
 				props.interval ?? 5000
 			);
 		}
+
+		return () => {
+			// clearInterval(childCountTimer)
+			if (autoSlideTimer) clearInterval(autoSlideTimer);
+		};
 	});
 
 	function ul_binding($$value) {
@@ -16521,20 +16530,30 @@ function instance$j($$self, $$props, $$invalidate) {
 		if ('layerId' in $$props) $$invalidate(0, layerId = $$props.layerId);
 		if ('props' in $$props) $$invalidate(11, props = $$props.props);
 		if ('overrideStyle' in $$props) $$invalidate(1, overrideStyle = $$props.overrideStyle);
-		if ('$$scope' in $$props) $$invalidate(16, $$scope = $$props.$$scope);
+		if ('$$scope' in $$props) $$invalidate(18, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
+		if ($$self.$$.dirty[0] & /*slotElement*/ 4) {
+			if (slotElement) {
+				$$invalidate(14, childCount = slotElement.children.length);
+			}
+		}
+
 		if ($$self.$$.dirty[0] & /*childCount, currentIndex*/ 20480) {
 			$$invalidate(7, indicators = [...Array(childCount)].map((_, i) => ({ index: i, isActive: i === currentIndex })));
 		}
 
 		if ($$self.$$.dirty[0] & /*props*/ 2048) {
-			$$invalidate(15, itemWidthPercentage = props.itemWidthPercentage ?? 100);
+			$$invalidate(17, itemWidthPercentage = props.itemWidthPercentage ?? 100);
 		}
 
-		if ($$self.$$.dirty[0] & /*props, itemWidthPercentage, movedX, currentIndex, childCount*/ 63488) {
-			$$invalidate(5, containerStyle = objToStyle({
+		if ($$self.$$.dirty[0] & /*currentIndex, childCount, movedX, itemWidthPercentage, props*/ 161792) {
+			$$invalidate(15, transformX = computeTransformX(currentIndex, childCount, movedX, itemWidthPercentage, props.gap ?? 0));
+		}
+
+		if ($$self.$$.dirty[0] & /*props, itemWidthPercentage, movedX*/ 141312) {
+			$$invalidate(16, baseContainerStyle = {
 				display: 'grid',
 				// marginInline: `-${props.gap}px`,
 				gap: `${props.gap}px`,
@@ -16543,8 +16562,14 @@ function instance$j($$self, $$props, $$invalidate) {
 				gridAutoColumns: `minmax(${itemWidthPercentage}%, 1fr)`,
 				flexShrink: 0,
 				transition: movedX === null ? 'transform 0.5s' : undefined,
-				transform: calcTransformX(currentIndex, childCount),
 				userSelect: 'none'
+			});
+		}
+
+		if ($$self.$$.dirty[0] & /*baseContainerStyle, transformX*/ 98304) {
+			$$invalidate(5, containerStyle = objToStyle({
+				...baseContainerStyle,
+				transform: transformX
 			}));
 		}
 	};
@@ -16583,6 +16608,8 @@ function instance$j($$self, $$props, $$invalidate) {
 		currentIndex,
 		movedX,
 		childCount,
+		transformX,
+		baseContainerStyle,
 		itemWidthPercentage,
 		$$scope,
 		slots,

package/dist/svelte5/hydrate/index.es.js

@@ -5478,6 +5478,7 @@ function Slider($$anchor, $$props) {
 	const indicators = $.mutable_state();
 	const itemWidthPercentage = $.mutable_state();
 	const style = $.mutable_state();
+	const baseContainerStyle = $.mutable_state();
 	const containerStyle = $.mutable_state();
 	const indicatorListStyle = $.mutable_state();
 	const indicatorItemStyle = $.mutable_state();
@@ -5492,27 +5493,34 @@ function Slider($$anchor, $$props) {
 	let isDragging = false;
 	let startX = 0;
 	let movedX = $.mutable_state(null);
-	let childCount = $.mutable_state($.get(slotElement)?.children?.length ?? 0);
-
-	const calcTransformX = (index, itemCount, _movedX) => {
-		if (index === 0) return undefined;
-
-		const movingX = (() => {
-			let result = 0;
-			const itemWidth = $.get(itemWidthPercentage);
-			const itemMargin = (100 - $.get(itemWidthPercentage)) / 2;
-
-			const movingMap = [...Array($.get(currentIndex) + 1)].map((_, index) => {
-				if (index === 0) return 0;
-				if (index === 1 || index === itemCount - 1) return itemWidth - itemMargin;
-				return itemWidth;
-			});
+	let childCount = $.mutable_state(0);
+	let transformX = $.mutable_state();
+
+	console.log('transformX', $.get(transformX));
+
+	const computeTransformX = (
+		index,
+		itemCount,
+		movedX,
+		itemWidthPercentage,
+		gap
+	) => {
+		if (index === 0) return;
+
+		let result = 0;
+		const itemMargin = (100 - itemWidthPercentage) / 2;
+
+		for (let i = 1; i <= index; i++) {
+			if (i === 1 || i === itemCount - 1) {
+				result += itemWidthPercentage - itemMargin;
+			} else {
+				result += itemWidthPercentage;
+			}
+		}
 
-			movingMap.forEach((value) => result += value);
-			return result;
-		})();
+		const moved = movedX ? ` + ${-movedX}px` : '';
 
-		return `translateX(calc(-${movingX}% - ${(props().gap ?? 0) * index}px + ${($.get(movedX) ?? 0) * -1}px))`;
+		return `translateX(calc(-${result}% - ${gap * index}px${moved}))`;
 	};
 
 	const handleClickIndicator = (index) => {
@@ -5528,6 +5536,8 @@ function Slider($$anchor, $$props) {
 	};
 
 	const toNext = () => {
+		console.log('toNext');
+
 		if ($.get(currentIndex) < $.get(childCount) - 1) {
 			$.set(currentIndex, $.get(currentIndex) + 1);
 		} else if (props().loop) {
@@ -5603,28 +5613,42 @@ function Slider($$anchor, $$props) {
 
 		document.removeEventListener('mousemove', handleMousemove);
 		document.removeEventListener('mouseup', handleMouseup);
+		document.removeEventListener('click', handleClick);
 	};
 
 	const handleMousedown = (e) => {
 		startX = e.clientX;
 		isDragging = false;
 		document.addEventListener('mousemove', handleMousemove, { passive: true });
-		document.addEventListener('mouseup', handleMouseup, { passive: true });
+		document.addEventListener('mouseup', handleMouseup, { passive: false });
 		document.addEventListener('click', handleClick, { capture: true });
 	};
 
 	onMount$1(() => {
 		setChildCount();
-		setInterval(setChildCount, 300);
+
+		// const childCountTimer = setInterval(setChildCount, 300);
+		let autoSlideTimer;
 
 		if (props().auto) {
-			setInterval(
+			autoSlideTimer = setInterval(
 				() => {
 					toNext();
 				},
 				props().interval ?? 5000
 			);
 		}
+
+		return () => {
+			// clearInterval(childCountTimer)
+			if (autoSlideTimer) clearInterval(autoSlideTimer);
+		};
+	});
+
+	$.legacy_pre_effect(() => ($.get(slotElement)), () => {
+		if ($.get(slotElement)) {
+			$.set(childCount, $.get(slotElement).children.length);
+		}
 	});
 
 	$.legacy_pre_effect(
@@ -5648,16 +5672,27 @@ function Slider($$anchor, $$props) {
 		$.set(style, objToStyle({ overflow: 'hidden', width: '100%' }));
 	});
 
+	$.legacy_pre_effect(
+		() => (
+			$.get(currentIndex),
+			$.get(childCount),
+			$.get(movedX),
+			$.get(itemWidthPercentage),
+			$.deep_read_state(props())
+		),
+		() => {
+			$.set(transformX, computeTransformX($.get(currentIndex), $.get(childCount), $.get(movedX), $.get(itemWidthPercentage), props().gap ?? 0));
+		}
+	);
+
 	$.legacy_pre_effect(
 		() => (
 			$.deep_read_state(props()),
 			$.get(itemWidthPercentage),
-			$.get(movedX),
-			$.get(currentIndex),
-			$.get(childCount)
+			$.get(movedX)
 		),
 		() => {
-			$.set(containerStyle, objToStyle({
+			$.set(baseContainerStyle, {
 				display: 'grid',
 				// marginInline: `-${props.gap}px`,
 				gap: `${props().gap}px`,
@@ -5666,8 +5701,20 @@ function Slider($$anchor, $$props) {
 				gridAutoColumns: `minmax(${$.get(itemWidthPercentage)}%, 1fr)`,
 				flexShrink: 0,
 				transition: $.get(movedX) === null ? 'transform 0.5s' : undefined,
-				transform: calcTransformX($.get(currentIndex), $.get(childCount), $.get(movedX)),
 				userSelect: 'none'
+			});
+		}
+	);
+
+	$.legacy_pre_effect(
+		() => (
+			$.get(baseContainerStyle),
+			$.get(transformX)
+		),
+		() => {
+			$.set(containerStyle, objToStyle({
+				...$.get(baseContainerStyle),
+				transform: $.get(transformX)
 			}));
 		}
 	);

package/dist/svelte5/index.es.js

@@ -5444,6 +5444,7 @@ function Slider($$anchor, $$props) {
 	const indicators = $.mutable_state();
 	const itemWidthPercentage = $.mutable_state();
 	const style = $.mutable_state();
+	const baseContainerStyle = $.mutable_state();
 	const containerStyle = $.mutable_state();
 	const indicatorListStyle = $.mutable_state();
 	const indicatorItemStyle = $.mutable_state();
@@ -5458,27 +5459,34 @@ function Slider($$anchor, $$props) {
 	let isDragging = false;
 	let startX = 0;
 	let movedX = $.mutable_state(null);
-	let childCount = $.mutable_state($.get(slotElement)?.children?.length ?? 0);
-
-	const calcTransformX = (index, itemCount, _movedX) => {
-		if (index === 0) return undefined;
-
-		const movingX = (() => {
-			let result = 0;
-			const itemWidth = $.get(itemWidthPercentage);
-			const itemMargin = (100 - $.get(itemWidthPercentage)) / 2;
-
-			const movingMap = [...Array($.get(currentIndex) + 1)].map((_, index) => {
-				if (index === 0) return 0;
-				if (index === 1 || index === itemCount - 1) return itemWidth - itemMargin;
-				return itemWidth;
-			});
+	let childCount = $.mutable_state(0);
+	let transformX = $.mutable_state();
+
+	console.log('transformX', $.get(transformX));
+
+	const computeTransformX = (
+		index,
+		itemCount,
+		movedX,
+		itemWidthPercentage,
+		gap
+	) => {
+		if (index === 0) return;
+
+		let result = 0;
+		const itemMargin = (100 - itemWidthPercentage) / 2;
+
+		for (let i = 1; i <= index; i++) {
+			if (i === 1 || i === itemCount - 1) {
+				result += itemWidthPercentage - itemMargin;
+			} else {
+				result += itemWidthPercentage;
+			}
+		}
 
-			movingMap.forEach((value) => result += value);
-			return result;
-		})();
+		const moved = movedX ? ` + ${-movedX}px` : '';
 
-		return `translateX(calc(-${movingX}% - ${(props().gap ?? 0) * index}px + ${($.get(movedX) ?? 0) * -1}px))`;
+		return `translateX(calc(-${result}% - ${gap * index}px${moved}))`;
 	};
 
 	const handleClickIndicator = (index) => {
@@ -5494,6 +5502,8 @@ function Slider($$anchor, $$props) {
 	};
 
 	const toNext = () => {
+		console.log('toNext');
+
 		if ($.get(currentIndex) < $.get(childCount) - 1) {
 			$.set(currentIndex, $.get(currentIndex) + 1);
 		} else if (props().loop) {
@@ -5569,28 +5579,42 @@ function Slider($$anchor, $$props) {
 
 		document.removeEventListener('mousemove', handleMousemove);
 		document.removeEventListener('mouseup', handleMouseup);
+		document.removeEventListener('click', handleClick);
 	};
 
 	const handleMousedown = (e) => {
 		startX = e.clientX;
 		isDragging = false;
 		document.addEventListener('mousemove', handleMousemove, { passive: true });
-		document.addEventListener('mouseup', handleMouseup, { passive: true });
+		document.addEventListener('mouseup', handleMouseup, { passive: false });
 		document.addEventListener('click', handleClick, { capture: true });
 	};
 
 	onMount$1(() => {
 		setChildCount();
-		setInterval(setChildCount, 300);
+
+		// const childCountTimer = setInterval(setChildCount, 300);
+		let autoSlideTimer;
 
 		if (props().auto) {
-			setInterval(
+			autoSlideTimer = setInterval(
 				() => {
 					toNext();
 				},
 				props().interval ?? 5000
 			);
 		}
+
+		return () => {
+			// clearInterval(childCountTimer)
+			if (autoSlideTimer) clearInterval(autoSlideTimer);
+		};
+	});
+
+	$.legacy_pre_effect(() => ($.get(slotElement)), () => {
+		if ($.get(slotElement)) {
+			$.set(childCount, $.get(slotElement).children.length);
+		}
 	});
 
 	$.legacy_pre_effect(
@@ -5614,16 +5638,27 @@ function Slider($$anchor, $$props) {
 		$.set(style, objToStyle({ overflow: 'hidden', width: '100%' }));
 	});
 
+	$.legacy_pre_effect(
+		() => (
+			$.get(currentIndex),
+			$.get(childCount),
+			$.get(movedX),
+			$.get(itemWidthPercentage),
+			$.deep_read_state(props())
+		),
+		() => {
+			$.set(transformX, computeTransformX($.get(currentIndex), $.get(childCount), $.get(movedX), $.get(itemWidthPercentage), props().gap ?? 0));
+		}
+	);
+
 	$.legacy_pre_effect(
 		() => (
 			$.deep_read_state(props()),
 			$.get(itemWidthPercentage),
-			$.get(movedX),
-			$.get(currentIndex),
-			$.get(childCount)
+			$.get(movedX)
 		),
 		() => {
-			$.set(containerStyle, objToStyle({
+			$.set(baseContainerStyle, {
 				display: 'grid',
 				// marginInline: `-${props.gap}px`,
 				gap: `${props().gap}px`,
@@ -5632,8 +5667,20 @@ function Slider($$anchor, $$props) {
 				gridAutoColumns: `minmax(${$.get(itemWidthPercentage)}%, 1fr)`,
 				flexShrink: 0,
 				transition: $.get(movedX) === null ? 'transform 0.5s' : undefined,
-				transform: calcTransformX($.get(currentIndex), $.get(childCount), $.get(movedX)),
 				userSelect: 'none'
+			});
+		}
+	);
+
+	$.legacy_pre_effect(
+		() => (
+			$.get(baseContainerStyle),
+			$.get(transformX)
+		),
+		() => {
+			$.set(containerStyle, objToStyle({
+				...$.get(baseContainerStyle),
+				transform: $.get(transformX)
 			}));
 		}
 	);

package/dist/svelte5/index.front2.es.js

@@ -5444,6 +5444,7 @@ function Slider($$anchor, $$props) {
 	const indicators = $.mutable_state();
 	const itemWidthPercentage = $.mutable_state();
 	const style = $.mutable_state();
+	const baseContainerStyle = $.mutable_state();
 	const containerStyle = $.mutable_state();
 	const indicatorListStyle = $.mutable_state();
 	const indicatorItemStyle = $.mutable_state();
@@ -5458,27 +5459,34 @@ function Slider($$anchor, $$props) {
 	let isDragging = false;
 	let startX = 0;
 	let movedX = $.mutable_state(null);
-	let childCount = $.mutable_state($.get(slotElement)?.children?.length ?? 0);
-
-	const calcTransformX = (index, itemCount, _movedX) => {
-		if (index === 0) return undefined;
-
-		const movingX = (() => {
-			let result = 0;
-			const itemWidth = $.get(itemWidthPercentage);
-			const itemMargin = (100 - $.get(itemWidthPercentage)) / 2;
-
-			const movingMap = [...Array($.get(currentIndex) + 1)].map((_, index) => {
-				if (index === 0) return 0;
-				if (index === 1 || index === itemCount - 1) return itemWidth - itemMargin;
-				return itemWidth;
-			});
+	let childCount = $.mutable_state(0);
+	let transformX = $.mutable_state();
+
+	console.log('transformX', $.get(transformX));
+
+	const computeTransformX = (
+		index,
+		itemCount,
+		movedX,
+		itemWidthPercentage,
+		gap
+	) => {
+		if (index === 0) return;
+
+		let result = 0;
+		const itemMargin = (100 - itemWidthPercentage) / 2;
+
+		for (let i = 1; i <= index; i++) {
+			if (i === 1 || i === itemCount - 1) {
+				result += itemWidthPercentage - itemMargin;
+			} else {
+				result += itemWidthPercentage;
+			}
+		}
 
-			movingMap.forEach((value) => result += value);
-			return result;
-		})();
+		const moved = movedX ? ` + ${-movedX}px` : '';
 
-		return `translateX(calc(-${movingX}% - ${(props().gap ?? 0) * index}px + ${($.get(movedX) ?? 0) * -1}px))`;
+		return `translateX(calc(-${result}% - ${gap * index}px${moved}))`;
 	};
 
 	const handleClickIndicator = (index) => {
@@ -5494,6 +5502,8 @@ function Slider($$anchor, $$props) {
 	};
 
 	const toNext = () => {
+		console.log('toNext');
+
 		if ($.get(currentIndex) < $.get(childCount) - 1) {
 			$.set(currentIndex, $.get(currentIndex) + 1);
 		} else if (props().loop) {
@@ -5569,28 +5579,42 @@ function Slider($$anchor, $$props) {
 
 		document.removeEventListener('mousemove', handleMousemove);
 		document.removeEventListener('mouseup', handleMouseup);
+		document.removeEventListener('click', handleClick);
 	};
 
 	const handleMousedown = (e) => {
 		startX = e.clientX;
 		isDragging = false;
 		document.addEventListener('mousemove', handleMousemove, { passive: true });
-		document.addEventListener('mouseup', handleMouseup, { passive: true });
+		document.addEventListener('mouseup', handleMouseup, { passive: false });
 		document.addEventListener('click', handleClick, { capture: true });
 	};
 
 	onMount$1(() => {
 		setChildCount();
-		setInterval(setChildCount, 300);
+
+		// const childCountTimer = setInterval(setChildCount, 300);
+		let autoSlideTimer;
 
 		if (props().auto) {
-			setInterval(
+			autoSlideTimer = setInterval(
 				() => {
 					toNext();
 				},
 				props().interval ?? 5000
 			);
 		}
+
+		return () => {
+			// clearInterval(childCountTimer)
+			if (autoSlideTimer) clearInterval(autoSlideTimer);
+		};
+	});
+
+	$.legacy_pre_effect(() => ($.get(slotElement)), () => {
+		if ($.get(slotElement)) {
+			$.set(childCount, $.get(slotElement).children.length);
+		}
 	});
 
 	$.legacy_pre_effect(
@@ -5614,16 +5638,27 @@ function Slider($$anchor, $$props) {
 		$.set(style, objToStyle({ overflow: 'hidden', width: '100%' }));
 	});
 
+	$.legacy_pre_effect(
+		() => (
+			$.get(currentIndex),
+			$.get(childCount),
+			$.get(movedX),
+			$.get(itemWidthPercentage),
+			$.deep_read_state(props())
+		),
+		() => {
+			$.set(transformX, computeTransformX($.get(currentIndex), $.get(childCount), $.get(movedX), $.get(itemWidthPercentage), props().gap ?? 0));
+		}
+	);
+
 	$.legacy_pre_effect(
 		() => (
 			$.deep_read_state(props()),
 			$.get(itemWidthPercentage),
-			$.get(movedX),
-			$.get(currentIndex),
-			$.get(childCount)
+			$.get(movedX)
 		),
 		() => {
-			$.set(containerStyle, objToStyle({
+			$.set(baseContainerStyle, {
 				display: 'grid',
 				// marginInline: `-${props.gap}px`,
 				gap: `${props().gap}px`,
@@ -5632,8 +5667,20 @@ function Slider($$anchor, $$props) {
 				gridAutoColumns: `minmax(${$.get(itemWidthPercentage)}%, 1fr)`,
 				flexShrink: 0,
 				transition: $.get(movedX) === null ? 'transform 0.5s' : undefined,
-				transform: calcTransformX($.get(currentIndex), $.get(childCount), $.get(movedX)),
 				userSelect: 'none'
+			});
+		}
+	);
+
+	$.legacy_pre_effect(
+		() => (
+			$.get(baseContainerStyle),
+			$.get(transformX)
+		),
+		() => {
+			$.set(containerStyle, objToStyle({
+				...$.get(baseContainerStyle),
+				transform: $.get(transformX)
 			}));
 		}
 	);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaidev/karte-action-sdk",
-  "version": "1.1.268-29083162.f59ff16d",
+  "version": "1.1.268-29089806.0ded74d0",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",