@max-ts/svelte 1.8.3 → 1.8.4

package/dist/assets/src/components/Carousel/Content/styles.css.ts.vanilla-WeFKZGhD.css

@@ -0,0 +1,27 @@
+.styles_content__ho48de0 {
+  display: flex;
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+}
+.styles_content__ho48de0::-webkit-scrollbar {
+  display: none;
+}
+.styles_orientation_horizontal__ho48de1 {
+  overflow-x: auto;
+  overflow-y: hidden;
+  flex-direction: row;
+  scroll-snap-type: x mandatory;
+  column-gap: var(--spacing-4);
+}
+.styles_orientation_vertical__ho48de2 {
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex-direction: column;
+  scroll-snap-type: y mandatory;
+  row-gap: var(--spacing-4);
+}

package/dist/assets/src/components/Carousel/Item/{styles.css.ts.vanilla-DM_PUW76.css → styles.css.ts.vanilla-DH1QYb6c.css}

@@ -5,8 +5,10 @@
   flex-basis: 100%;
 }
 .styles_orientation_horizontal__ibhmv21 {
-  padding-left: var(--spacing-4);
+  scroll-snap-align: center;
+  scroll-snap-stop: always;
 }
 .styles_orientation_vertical__ibhmv22 {
-  padding-top: var(--spacing-4);
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
 }

package/dist/components/Carousel/Arrows/Arrows.js

@@ -1,4 +1,4 @@
-import { getEmblaContext } from "../context.js";
+import { getCarouselContext } from "../context.js";
 import __default__ from "./styles.css.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -15,17 +15,16 @@ function Arrows($$anchor, $$props) {
 		"$$legacy",
 		"class"
 	]);
-	const emblaNextCtx = getEmblaContext("<Carousel.Next/>");
-	const emblaPrevCtx = getEmblaContext("<Carousel.Previous/>");
+	const ctx = getCarouselContext("<Carousel.Arrows />");
 	var fragment = root();
 	var button = $.first_child(fragment);
 	$.attribute_effect(button, () => ({
 		type: "button",
 		"data-slot": "carousel-previous",
-		disabled: !emblaPrevCtx.canScrollPrev,
-		class: [__default__.buttonPrev[emblaPrevCtx.orientation], $$props.class],
-		onclick: emblaPrevCtx.scrollPrev,
-		onkeydown: emblaPrevCtx.handleKeyDown,
+		disabled: !ctx.canScrollPrev,
+		class: [__default__.buttonPrev[ctx.orientation], $$props.class],
+		onclick: ctx.scrollPrev,
+		onkeydown: ctx.handleKeyDown,
 		"aria-label": "Previous slide",
 		...restProps
 	}));
@@ -37,11 +36,11 @@ function Arrows($$anchor, $$props) {
 	$.attribute_effect(button_1, () => ({
 		type: "button",
 		"data-slot": "carousel-next",
-		disabled: !emblaNextCtx.canScrollNext,
-		"aria-disabled": !emblaNextCtx.canScrollNext,
-		class: [__default__.buttonNext[emblaNextCtx.orientation], $$props.class],
-		onclick: emblaNextCtx.scrollNext,
-		onkeydown: emblaNextCtx.handleKeyDown,
+		disabled: !ctx.canScrollNext,
+		"aria-disabled": !ctx.canScrollNext,
+		class: [__default__.buttonNext[ctx.orientation], $$props.class],
+		onclick: ctx.scrollNext,
+		onkeydown: ctx.handleKeyDown,
 		"aria-label": "Next slide",
 		...restProps
 	}));

package/dist/components/Carousel/Carousel.js

@@ -1,7 +1,9 @@
-import { setEmblaContext } from "./context.js";
+import { setCarouselContext } from "./context.js";
+import { CarouselStore } from "./store.svelte.js";
 import __default__ from "./styles.css.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
+import { onDestroy } from "svelte";
 
 //#region src/components/Carousel/Carousel.svelte
 var root = $.from_html(`<div><!></div>`);
@@ -12,67 +14,26 @@ function Carousel($$anchor, $$props) {
 		"$$events",
 		"$$legacy",
 		"ref",
-		"options",
-		"plugins",
 		"setApi",
 		"orientation",
+		"align",
 		"class",
 		"children"
 	]);
-	let carouselState = $.proxy({
-		api: void 0,
-		scrollPrev,
-		scrollNext,
-		orientation: "horizontal",
-		canScrollNext: false,
-		canScrollPrev: false,
-		handleKeyDown,
-		options: {},
-		plugins: [],
-		onInit,
-		scrollSnaps: [],
-		selectedIndex: 0,
-		scrollTo
-	});
-	setEmblaContext(carouselState);
-	function scrollPrev() {
-		carouselState.api?.scrollPrev();
-	}
-	function scrollNext() {
-		carouselState.api?.scrollNext();
-	}
-	function scrollTo(index, jump) {
-		carouselState.api?.scrollTo(index, jump);
-	}
-	function onSelect() {
-		if (!carouselState.api) return;
-		carouselState.selectedIndex = carouselState.api.selectedScrollSnap();
-		carouselState.canScrollNext = carouselState.api.canScrollNext();
-		carouselState.canScrollPrev = carouselState.api.canScrollPrev();
-	}
-	function handleKeyDown(e) {
-		if (e.key === "ArrowLeft") {
-			e.preventDefault();
-			scrollPrev();
-		} else if (e.key === "ArrowRight") {
-			e.preventDefault();
-			scrollNext();
+	const carouselStore = new CarouselStore({
+		get orientation() {
+			return orientation();
+		},
+		get align() {
+			return $$props.align;
 		}
-	}
-	function onInit(event) {
-		carouselState.api = event.detail;
-		setApi()(carouselState.api);
-		carouselState.scrollSnaps = carouselState.api.scrollSnapList();
-		carouselState.api.on("select", onSelect);
-		onSelect();
-	}
+	});
+	setCarouselContext(carouselStore);
+	onDestroy(() => {
+		carouselStore.destroy();
+	});
 	$.user_effect(() => {
-		if (orientation()) carouselState.orientation = orientation();
-		if ($$props.options) carouselState.options = $$props.options;
-		if ($$props.plugins?.length) carouselState.plugins = $$props.plugins;
-		return () => {
-			carouselState.api?.off("select", onSelect);
-		};
+		setApi()(carouselStore.api);
 	});
 	var div = root();
 	$.attribute_effect(div, () => ({

package/dist/components/Carousel/Carousel.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type CarouselProps } from './types';
+import type { CarouselProps } from './types';
 declare const Carousel: import("svelte").Component<CarouselProps, {}, "ref">;
 type Carousel = ReturnType<typeof Carousel>;
 export default Carousel;

package/dist/components/Carousel/Content/Content.js

@@ -1,11 +1,11 @@
-import { getEmblaContext } from "../context.js";
+import { getCarouselContext } from "../context.js";
 import __default__ from "./styles.css.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
-import emblaCarouselSvelte from "embla-carousel-svelte";
+import { onMount } from "svelte";
 
 //#region src/components/Carousel/Content/Content.svelte
-var root = $.from_html(`<div data-slot="carousel-content-wrapper"><div><!></div></div>`);
+var root = $.from_html(`<div><!></div>`);
 function Content($$anchor, $$props) {
 	$.push($$props, true);
 	let ref = $.prop($$props, "ref", 15, null), restProps = $.rest_props($$props, [
@@ -16,32 +16,26 @@ function Content($$anchor, $$props) {
 		"class",
 		"children"
 	]);
-	const emblaCtx = getEmblaContext("<Carousel.Content/>");
+	const carouselCtx = getCarouselContext("<Carousel.Content />");
+	onMount(() => {
+		carouselCtx.setViewport(ref());
+		return () => carouselCtx.setViewport(null);
+	});
 	var div = root();
-	var div_1 = $.child(div);
-	$.attribute_effect(div_1, () => ({
-		class: [__default__.container, __default__.orientation[emblaCtx.orientation]],
-		"data-embla-container": "",
+	$.attribute_effect(div, () => ({
+		"data-slot": "carousel-content",
+		class: [
+			__default__.content,
+			__default__.orientation[carouselCtx.orientation],
+			$$props.class
+		],
+		"data-orientation": carouselCtx.orientation,
 		...restProps
 	}));
-	var node = $.child(div_1);
+	var node = $.child(div);
 	$.snippet(node, () => $$props.children ?? $.noop);
-	$.reset(div_1);
-	$.bind_this(div_1, ($$value) => ref($$value), () => ref());
 	$.reset(div);
-	$.action(div, ($$node, $$action_arg) => emblaCarouselSvelte?.($$node, $$action_arg), () => ({
-		options: {
-			container: "[data-embla-container]",
-			slides: "[data-embla-slide]",
-			...emblaCtx.options,
-			axis: emblaCtx.orientation === "horizontal" ? "x" : "y"
-		},
-		plugins: emblaCtx.plugins
-	}));
-	$.template_effect(() => $.set_class(div, 1, $.clsx([__default__.contentWrapper, $$props.class])));
-	$.event("emblaInit", div, function(...$$args) {
-		emblaCtx.onInit?.apply(this, $$args);
-	});
+	$.bind_this(div, ($$value) => ref($$value), () => ref());
 	$.append($$anchor, div);
 	$.pop();
 }

package/dist/components/Carousel/Content/styles.css.d.ts

@@ -1,6 +1,5 @@
 declare const _default: {
-    contentWrapper: string;
-    container: string;
+    content: string;
     orientation: Record<"horizontal" | "vertical", string>;
 };
 export default _default;

package/dist/components/Carousel/Content/styles.css.js

@@ -1,13 +1,12 @@
 import "./../../../assets/src/theme.css.ts.vanilla-DlH7Hr_5.css";
-import "./../../../assets/src/components/Carousel/Content/styles.css.ts.vanilla-C4MEo1_C.css";
+import "./../../../assets/src/components/Carousel/Content/styles.css.ts.vanilla-WeFKZGhD.css";
 
 //#region src/components/Carousel/Content/styles.css.ts
 var __default__ = {
-	contentWrapper: "styles_contentWrapper__ho48de0",
-	container: "styles_container__ho48de1",
+	content: "styles_content__ho48de0",
 	orientation: {
-		horizontal: "styles_orientation_horizontal__ho48de2",
-		vertical: "styles_orientation_vertical__ho48de3"
+		horizontal: "styles_orientation_horizontal__ho48de1",
+		vertical: "styles_orientation_vertical__ho48de2"
 	}
 };
 

package/dist/components/Carousel/Dots/Dots.js

@@ -1,4 +1,4 @@
-import { getEmblaContext } from "../context.js";
+import { getCarouselContext } from "../context.js";
 import __default__ from "./styles.css.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -14,18 +14,18 @@ function Dots($$anchor, $$props) {
 		"$$legacy",
 		"class"
 	]);
-	const emblaCtx = getEmblaContext("<Carousel.Dots/>");
+	const carouselCtx = getCarouselContext("<Carousel.Dots/>");
 	const onClick = (index) => {
-		emblaCtx.scrollTo(index);
+		carouselCtx.scrollTo(index);
 	};
 	var div = root();
 	$.attribute_effect(div, () => ({
-		class: [__default__.wrapper[emblaCtx.orientation], $$props.class],
+		class: [__default__.wrapper[carouselCtx.orientation], $$props.class],
 		...restProps
 	}));
-	$.each(div, 21, () => emblaCtx.scrollSnaps, $.index, ($$anchor, _, index) => {
+	$.each(div, 21, () => carouselCtx.scrollSnaps, $.index, ($$anchor, _, index) => {
 		var button = root_1();
-		$.template_effect(() => $.set_class(button, 1, $.clsx([__default__.dotButton[emblaCtx.orientation], { [__default__.selected]: index === emblaCtx.selectedIndex }])));
+		$.template_effect(() => $.set_class(button, 1, $.clsx([__default__.dotButton[carouselCtx.orientation], { [__default__.selected]: index === carouselCtx.selectedIndex }])));
 		$.delegated("click", button, () => onClick(index));
 		$.append($$anchor, button);
 	});

package/dist/components/Carousel/Item/Item.js

@@ -1,4 +1,4 @@
-import { getEmblaContext } from "../context.js";
+import { getCarouselContext } from "../context.js";
 import __default__ from "./styles.css.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -15,18 +15,18 @@ function Item($$anchor, $$props) {
 		"class",
 		"children"
 	]);
-	const emblaCtx = getEmblaContext("<Carousel.Item/>");
+	const carouselCtx = getCarouselContext("<Carousel.Item/>");
 	var div = root();
 	$.attribute_effect(div, () => ({
 		"data-slot": "carousel-item",
+		"data-orientation": carouselCtx.orientation,
 		role: "group",
 		"aria-roledescription": "slide",
 		class: [
 			__default__.item,
-			__default__.orientation[emblaCtx.orientation],
+			__default__.orientation[carouselCtx.orientation],
 			$$props.class
 		],
-		"data-embla-slide": "",
 		...restProps
 	}));
 	var node = $.child(div);

package/dist/components/Carousel/Item/styles.css.js

@@ -1,5 +1,4 @@
-import "./../../../assets/src/theme.css.ts.vanilla-DlH7Hr_5.css";
-import "./../../../assets/src/components/Carousel/Item/styles.css.ts.vanilla-DM_PUW76.css";
+import "./../../../assets/src/components/Carousel/Item/styles.css.ts.vanilla-DH1QYb6c.css";
 
 //#region src/components/Carousel/Item/styles.css.ts
 var __default__ = {

package/dist/components/Carousel/context.d.ts

@@ -1,3 +1,3 @@
-import type { EmblaContext } from './types';
-export declare function setEmblaContext(config: EmblaContext): EmblaContext;
-export declare function getEmblaContext(name?: string): EmblaContext;
+import type { CarouselContext } from './types';
+export declare function setCarouselContext(config: CarouselContext): CarouselContext;
+export declare function getCarouselContext(name?: string): CarouselContext;

package/dist/components/Carousel/context.js

@@ -1,15 +1,15 @@
 import { getContext, hasContext, setContext } from "svelte";
 
 //#region src/components/Carousel/context.ts
-const EMBLA_CAROUSEL_CONTEXT = Symbol("EMBLA_CAROUSEL_CONTEXT");
-function setEmblaContext(config) {
-	setContext(EMBLA_CAROUSEL_CONTEXT, config);
+const CAROUSEL_CONTEXT = Symbol("CAROUSEL_CONTEXT");
+function setCarouselContext(config) {
+	setContext(CAROUSEL_CONTEXT, config);
 	return config;
 }
-function getEmblaContext(name = "This component") {
-	if (!hasContext(EMBLA_CAROUSEL_CONTEXT)) throw new Error(`${name} must be used within a <Carousel.Root> component`);
-	return getContext(EMBLA_CAROUSEL_CONTEXT);
+function getCarouselContext(name = "This component") {
+	if (!hasContext(CAROUSEL_CONTEXT)) throw new Error(`${name} must be used within a <Carousel.Root> component`);
+	return getContext(CAROUSEL_CONTEXT);
 }
 
 //#endregion
-export { getEmblaContext, setEmblaContext };
+export { getCarouselContext, setCarouselContext };

package/dist/components/Carousel/store.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { CarouselAlign, CarouselAPI, CarouselContext, CarouselOrientation, CarouselProps } from './types';
+export declare class CarouselStore implements CarouselContext {
+    #private;
+    api: CarouselAPI | undefined;
+    viewport: HTMLDivElement | null;
+    align: CarouselAlign;
+    orientation: CarouselOrientation;
+    canScrollNext: boolean;
+    canScrollPrev: boolean;
+    scrollSnaps: number[];
+    selectedIndex: number;
+    constructor({ orientation, align, }: Pick<CarouselProps, 'orientation' | 'align'>);
+    handleKeyDown: (e: KeyboardEvent) => void;
+    setViewport: (node: HTMLDivElement | null) => void;
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    scrollTo: (index: number, jump?: boolean) => void;
+    refresh: () => void;
+    destroy: () => void;
+}

package/dist/components/Carousel/store.svelte.js

@@ -0,0 +1,158 @@
+//#region src/components/Carousel/store.svelte.ts
+var CarouselStore = class {
+	api = $state(void 0);
+	viewport = $state(null);
+	align = $state("center");
+	orientation = $state("horizontal");
+	canScrollNext = $state(false);
+	canScrollPrev = $state(false);
+	scrollSnaps = $state([]);
+	selectedIndex = $state(0);
+	#listeners = /* @__PURE__ */ new Set();
+	#resizeObserver = null;
+	#mutationObserver = null;
+	#observedSlides = [];
+	#onScroll = () => this.refresh();
+	constructor({ orientation = "horizontal", align = "center" }) {
+		this.align = align;
+		this.orientation = orientation;
+		this.api = {
+			scrollPrev: this.scrollPrev,
+			scrollNext: this.scrollNext,
+			scrollTo: this.scrollTo,
+			canScrollNext: () => this.canScrollNext,
+			canScrollPrev: () => this.canScrollPrev,
+			selectedScrollSnap: () => this.selectedIndex,
+			scrollSnapList: () => this.scrollSnaps,
+			on: (event, callback) => {
+				if (event !== "select") return;
+				this.#listeners.add(callback);
+			},
+			off: (event, callback) => {
+				if (event !== "select") return;
+				this.#listeners.delete(callback);
+			}
+		};
+	}
+	handleKeyDown = (e) => {
+		if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+			e.preventDefault();
+			this.scrollPrev();
+		} else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+			e.preventDefault();
+			this.scrollNext();
+		}
+	};
+	setViewport = (node) => {
+		if (this.viewport === node) return;
+		this.#detachViewport();
+		this.viewport = node;
+		if (!node) {
+			this.refresh();
+			return;
+		}
+		node.addEventListener("scroll", this.#onScroll, { passive: true });
+		this.#resizeObserver = new ResizeObserver(() => this.refresh());
+		this.#resizeObserver.observe(node);
+		this.#mutationObserver = new MutationObserver(() => {
+			this.#rebindSlideObservers();
+			this.refresh();
+		});
+		this.#mutationObserver.observe(node, {
+			childList: true,
+			subtree: false
+		});
+		this.#rebindSlideObservers();
+		this.refresh();
+	};
+	scrollPrev = () => {
+		if (!this.viewport) return;
+		const index = Math.max(0, this.selectedIndex - 1);
+		this.scrollTo(index);
+	};
+	scrollNext = () => {
+		const slides = this.#getSlides();
+		if (!slides.length) return;
+		const index = Math.min(slides.length - 1, this.selectedIndex + 1);
+		this.scrollTo(index);
+	};
+	scrollTo = (index, jump) => {
+		this.#setScroll(this.#getTargetFor(index), jump);
+	};
+	refresh = () => {
+		const slides = this.#getSlides();
+		this.scrollSnaps = slides.map((_, index) => this.#getTargetFor(index));
+		if (!this.viewport || !slides.length) {
+			this.selectedIndex = 0;
+			this.canScrollPrev = false;
+			this.canScrollNext = false;
+			this.#emitSelect();
+			return;
+		}
+		const scrollPosition = this.orientation === "horizontal" ? this.viewport.scrollLeft : this.viewport.scrollTop;
+		let nearestIndex = 0;
+		let nearestDistance = Number.POSITIVE_INFINITY;
+		for (let index = 0; index < this.scrollSnaps.length; index += 1) {
+			const distance = Math.abs(this.scrollSnaps[index] - scrollPosition);
+			if (distance < nearestDistance) {
+				nearestDistance = distance;
+				nearestIndex = index;
+			}
+		}
+		this.selectedIndex = nearestIndex;
+		this.canScrollPrev = nearestIndex > 0;
+		this.canScrollNext = nearestIndex < slides.length - 1;
+		this.#emitSelect();
+	};
+	destroy = () => {
+		this.#detachViewport();
+		this.#listeners.clear();
+	};
+	#getSlides = () => {
+		if (!this.viewport) return [];
+		return Array.from(this.viewport.querySelectorAll("[data-slot=\"carousel-item\"]"));
+	};
+	#getTargetFor = (index) => {
+		if (!this.viewport) return 0;
+		const slide = this.#getSlides()[index];
+		if (!slide) return 0;
+		const viewportSize = this.orientation === "horizontal" ? this.viewport.clientWidth : this.viewport.clientHeight;
+		const slideSize = this.orientation === "horizontal" ? slide.offsetWidth : slide.offsetHeight;
+		const slideStart = this.orientation === "horizontal" ? slide.offsetLeft : slide.offsetTop;
+		let target = slideStart;
+		if (this.align === "center") target = slideStart - (viewportSize - slideSize) / 2;
+		else if (this.align === "end") target = slideStart - (viewportSize - slideSize);
+		const max = this.orientation === "horizontal" ? this.viewport.scrollWidth - this.viewport.clientWidth : this.viewport.scrollHeight - this.viewport.clientHeight;
+		return Math.max(0, Math.min(target, Math.max(0, max)));
+	};
+	#setScroll = (target, jump = false) => {
+		if (!this.viewport) return;
+		this.viewport.scrollTo(this.orientation === "horizontal" ? {
+			left: target,
+			behavior: jump ? "auto" : "smooth"
+		} : {
+			top: target,
+			behavior: jump ? "auto" : "smooth"
+		});
+	};
+	#emitSelect = () => {
+		for (const callback of this.#listeners) callback();
+	};
+	#detachViewport = () => {
+		if (this.viewport) this.viewport.removeEventListener("scroll", this.#onScroll);
+		this.#resizeObserver?.disconnect();
+		this.#mutationObserver?.disconnect();
+		this.#resizeObserver = null;
+		this.#mutationObserver = null;
+		this.#observedSlides = [];
+	};
+	#rebindSlideObservers = () => {
+		if (!this.#resizeObserver) return;
+		for (const slide of this.#observedSlides) this.#resizeObserver.unobserve(slide);
+		this.#observedSlides = this.#getSlides();
+		for (const slide of this.#observedSlides) this.#resizeObserver.observe(slide);
+	};
+};
+
+//#endregion
+export { CarouselStore };

package/dist/components/Carousel/types.d.ts

@@ -1,27 +1,37 @@
-import type { EmblaCarouselSvelteType, default as emblaCarouselSvelte } from 'embla-carousel-svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { WithElementRef } from '../../types.ts';
-export type CarouselAPI = NonNullable<NonNullable<EmblaCarouselSvelteType['$$_attributes']>['onemblaInit']> extends (evt: CustomEvent<infer API>) => void ? API : any;
-type EmblaCarouselConfig = NonNullable<Parameters<typeof emblaCarouselSvelte>[1]>;
-export type CarouselOptions = EmblaCarouselConfig['options'];
-export type CarouselPlugins = EmblaCarouselConfig['plugins'];
+export type CarouselAlign = 'start' | 'center' | 'end';
+export type CarouselOrientation = 'horizontal' | 'vertical';
+type CarouselEventName = 'select';
+type CarouselEventCallback = () => void;
+export type CarouselAPI = {
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    scrollTo: (index: number, jump?: boolean) => void;
+    canScrollNext: () => boolean;
+    canScrollPrev: () => boolean;
+    selectedScrollSnap: () => number;
+    scrollSnapList: () => number[];
+    on: (event: CarouselEventName, callback: CarouselEventCallback) => void;
+    off: (event: CarouselEventName, callback: CarouselEventCallback) => void;
+};
 export interface CarouselProps extends WithElementRef<HTMLAttributes<HTMLDivElement>> {
-    options?: CarouselOptions;
-    plugins?: CarouselPlugins;
     setApi?: (api: CarouselAPI | undefined) => void;
-    orientation?: 'horizontal' | 'vertical';
+    orientation?: CarouselOrientation;
+    align?: CarouselAlign;
 }
-export type EmblaContext = {
+export type CarouselContext = {
     api: CarouselAPI | undefined;
-    orientation: 'horizontal' | 'vertical';
+    viewport: HTMLDivElement | null;
+    align: CarouselAlign;
+    orientation: CarouselOrientation;
     scrollNext: () => void;
     scrollPrev: () => void;
     canScrollNext: boolean;
     canScrollPrev: boolean;
     handleKeyDown: (e: KeyboardEvent) => void;
-    options: CarouselOptions;
-    plugins: CarouselPlugins;
-    onInit: (e: CustomEvent<CarouselAPI>) => void;
+    setViewport: (node: HTMLDivElement | null) => void;
+    refresh: () => void;
     scrollTo: (index: number, jump?: boolean) => void;
     scrollSnaps: number[];
     selectedIndex: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@max-ts/svelte",
-  "version": "1.8.3",
+  "version": "1.8.4",
   "type": "module",
   "description": "Svelte component library.",
   "author": "Tsepelev Maksim",
@@ -32,8 +32,6 @@
   },
   "peerDependencies": {
     "@internationalized/date": "^3.10.1",
-    "embla-carousel-autoplay": "^8.6.0",
-    "embla-carousel-svelte": "^8.6.0",
     "svelte": "^5.53.5"
   },
   "devDependencies": {
@@ -54,8 +52,6 @@
     "@vanilla-extract/vite-plugin": "^5.1.4",
     "@vitest/browser-playwright": "^4.0.18",
     "bumpp": "^10.4.1",
-    "embla-carousel-autoplay": "^8.6.0",
-    "embla-carousel-svelte": "^8.6.0",
     "rollup-plugin-svelte": "^7.2.3",
     "storybook": "^10.2.13",
     "svelte": "^5.53.5",

package/dist/assets/src/components/Carousel/Content/styles.css.ts.vanilla-C4MEo1_C.css

@@ -1,17 +0,0 @@
-.styles_contentWrapper__ho48de0 {
-  overflow: hidden;
-  height: 100%;
-}
-.styles_container__ho48de1 {
-  display: flex;
-  height: 100%;
-  width: 100%;
-}
-.styles_orientation_horizontal__ho48de2 {
-  margin-left: calc(-1 * var(--spacing-4));
-  flex-direction: row;
-}
-.styles_orientation_vertical__ho48de3 {
-  margin-top: calc(-1 * var(--spacing-4));
-  flex-direction: column;
-}