svelora 3.0.1 → 3.0.2

package/dist/Calendar/Calendar.svelte

@@ -1,162 +1,99 @@
-<script lang="ts" module>import type { CalendarMultipleProps, CalendarProps, CalendarRangeProps, CalendarSingleProps } from './calendar.types.js';
-export type Props = CalendarProps;
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
-    import type { Month } from 'bits-ui'
-    import { Calendar, RangeCalendar } from 'bits-ui'
-    import { getComponentConfig } from '../config.js'
-    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
-    import Icon from '../Icon/Icon.svelte'
-    import { calendarDefaults, calendarVariants } from './calendar.variants.js'
-
-    const config = getComponentConfig('calendar', calendarDefaults)
-
-    let {
-        ref = $bindable(null),
-        value = $bindable(),
-        onValueChange,
-        placeholder = $bindable(),
-        onPlaceholderChange,
-        id,
-        name,
-        range = false,
-        prevMonthIcon = 'lucide:chevron-left',
-        nextMonthIcon = 'lucide:chevron-right',
-        prevYearIcon = 'lucide:chevrons-left',
-        nextYearIcon = 'lucide:chevrons-right',
-        monthControls = true,
-        yearControls = true,
-        weekNumbers = false,
-        preventDeselect = false,
-        minValue,
-        maxValue,
-        disabled = false,
-        pagedNavigation = false,
-        weekStartsOn = 0,
-        weekdayFormat = 'short',
-        isDateDisabled,
-        isDateUnavailable,
-        isDateHighlightable,
-        fixedWeeks = true,
-        numberOfMonths = 1,
-        calendarLabel,
-        locale = 'en',
-        readonly = false,
-        disableDaysOutsideMonth = false,
-        color = config.defaultVariants.color ?? 'primary',
-        size = config.defaultVariants.size ?? 'md',
-        variant = config.defaultVariants.variant ?? 'solid',
-        ui,
-        class: className,
-        heading: headingSlot,
-        day: daySlot,
-        weekDay: weekDaySlot,
-        ...restProps
-    }: Props = $props()
-
-    function firstDateOf(val: unknown): DateValue | undefined {
-        if (!val) return undefined
-        if (Array.isArray(val)) return val[0] as DateValue | undefined
-        if (typeof val === 'object' && 'start' in val) {
-            return (val as { start?: DateValue }).start
-        }
-        return val as DateValue
-    }
-
-    if (placeholder === undefined) {
-        placeholder = firstDateOf(value) ?? today(getLocalTimeZone())
-    }
-
-    const formFieldContext = useFormField()
-    const emit = useFormFieldEmit()
-
-    const hasError = $derived(
-        formFieldContext?.error !== undefined && formFieldContext?.error !== false
-    )
-    const resolvedColor = $derived(hasError ? 'error' : color)
-    const resolvedSize = $derived(size ?? formFieldContext?.size)
-    const resolvedId = $derived(id ?? formFieldContext?.ariaId)
-    const resolvedName = $derived(name ?? formFieldContext?.name)
-    const ariaDescribedBy = $derived(
-        !formFieldContext
-            ? undefined
-            : hasError
-              ? `${formFieldContext.ariaId}-error`
-              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
-    )
-
-    // Only Cell and Day differ between Calendar & RangeCalendar
-    const CalCell = $derived(range ? RangeCalendar.Cell : Calendar.Cell)
-    const CalDay = $derived(range ? RangeCalendar.Day : Calendar.Day)
-
-    const variantSlots = $derived(
-        calendarVariants({ color: resolvedColor, size: resolvedSize, variant, weekNumbers })
-    )
-    const classes = $derived({
-        root: variantSlots.root({ class: [config.slots.root, className, ui?.root] }),
-        header: variantSlots.header({ class: [config.slots.header, ui?.header] }),
-        body: variantSlots.body({ class: [config.slots.body, ui?.body] }),
-        heading: variantSlots.heading({ class: [config.slots.heading, ui?.heading] }),
-        navButton: variantSlots.navButton({ class: [config.slots.navButton, ui?.navButton] }),
-        navButtonIcon: variantSlots.navButtonIcon({
-            class: [config.slots.navButtonIcon, ui?.navButtonIcon]
-        }),
-        grid: variantSlots.grid({ class: [config.slots.grid, ui?.grid] }),
-        gridWeekDaysRow: variantSlots.gridWeekDaysRow({
-            class: [config.slots.gridWeekDaysRow, ui?.gridWeekDaysRow]
-        }),
-        gridBody: variantSlots.gridBody({ class: [config.slots.gridBody, ui?.gridBody] }),
-        gridRow: variantSlots.gridRow({ class: [config.slots.gridRow, ui?.gridRow] }),
-        headCell: variantSlots.headCell({ class: [config.slots.headCell, ui?.headCell] }),
-        headCellWeek: variantSlots.headCellWeek({
-            class: [config.slots.headCellWeek, ui?.headCellWeek]
-        }),
-        cell: variantSlots.cell({ class: [config.slots.cell, ui?.cell] }),
-        cellTrigger: variantSlots.cellTrigger({
-            class: [config.slots.cellTrigger, ui?.cellTrigger]
-        }),
-        cellWeek: variantSlots.cellWeek({ class: [config.slots.cellWeek, ui?.cellWeek] })
-    })
-
-    function paginateYear(date: DateValue, sign: -1 | 1): DateValue {
-        return sign === -1 ? date.subtract({ years: 1 }) : date.add({ years: 1 })
-    }
-
-    const commonProps = $derived({
-        id: resolvedId,
-        placeholder,
-        onPlaceholderChange: (val: DateValue) => {
-            placeholder = val
-            onPlaceholderChange?.(val)
-        },
-        preventDeselect,
-        minValue,
-        maxValue,
-        disabled,
-        pagedNavigation,
-        weekStartsOn,
-        weekdayFormat,
-        isDateDisabled,
-        isDateUnavailable,
-        fixedWeeks,
-        numberOfMonths,
-        calendarLabel,
-        locale,
-        readonly,
-        disableDaysOutsideMonth,
-        'aria-describedby': ariaDescribedBy,
-        'aria-invalid': hasError ? true : undefined,
-        'data-name': resolvedName,
-        onfocusin: () => emit.onFocus(),
-        onfocusout: () => emit.onBlur()
-    })
-
-    function handleValueChange(val: unknown) {
-        ;(onValueChange as ((value: unknown) => void) | undefined)?.(val)
-        emit.onChange()
-    }
+<script lang="ts">import { getLocalTimeZone, today } from "@internationalized/date";
+import { Calendar, RangeCalendar } from "bits-ui";
+import { getComponentConfig } from "../config.js";
+import { useFormField, useFormFieldEmit } from "../hooks/useFormField.svelte.js";
+import Icon from "../Icon/Icon.svelte";
+import { calendarDefaults, calendarVariants } from "./calendar.variants.js";
+const config = getComponentConfig("calendar", calendarDefaults);
+let { ref = $bindable(null), value = $bindable(), onValueChange, placeholder = $bindable(), onPlaceholderChange, id, name, range = false, prevMonthIcon = "lucide:chevron-left", nextMonthIcon = "lucide:chevron-right", prevYearIcon = "lucide:chevrons-left", nextYearIcon = "lucide:chevrons-right", monthControls = true, yearControls = true, weekNumbers = false, preventDeselect = false, minValue, maxValue, disabled = false, pagedNavigation = false, weekStartsOn = 0, weekdayFormat = "short", isDateDisabled, isDateUnavailable, isDateHighlightable, fixedWeeks = true, numberOfMonths = 1, calendarLabel, locale = "en", readonly = false, disableDaysOutsideMonth = false, color = config.defaultVariants.color ?? "primary", size = config.defaultVariants.size ?? "md", variant = config.defaultVariants.variant ?? "solid", ui, class: className, heading: headingSlot, day: daySlot, weekDay: weekDaySlot, ...restProps } = $props();
+function firstDateOf(val) {
+	if (!val) return undefined;
+	if (Array.isArray(val)) return val[0];
+	if (typeof val === "object" && "start" in val) {
+		return val.start;
+	}
+	return val;
+}
+if (placeholder === undefined) {
+	placeholder = firstDateOf(value) ?? today(getLocalTimeZone());
+}
+const formFieldContext = useFormField();
+const emit = useFormFieldEmit();
+const hasError = $derived(formFieldContext?.error !== undefined && formFieldContext?.error !== false);
+const resolvedColor = $derived(hasError ? "error" : color);
+const resolvedSize = $derived(size ?? formFieldContext?.size);
+const resolvedId = $derived(id ?? formFieldContext?.ariaId);
+const resolvedName = $derived(name ?? formFieldContext?.name);
+const ariaDescribedBy = $derived(!formFieldContext ? undefined : hasError ? `${formFieldContext.ariaId}-error` : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`);
+// Only Cell and Day differ between Calendar & RangeCalendar
+const CalCell = $derived(range ? RangeCalendar.Cell : Calendar.Cell);
+const CalDay = $derived(range ? RangeCalendar.Day : Calendar.Day);
+const variantSlots = $derived(calendarVariants({
+	color: resolvedColor,
+	size: resolvedSize,
+	variant,
+	weekNumbers
+}));
+const classes = $derived({
+	root: variantSlots.root({ class: [
+		config.slots.root,
+		className,
+		ui?.root
+	] }),
+	header: variantSlots.header({ class: [config.slots.header, ui?.header] }),
+	body: variantSlots.body({ class: [config.slots.body, ui?.body] }),
+	heading: variantSlots.heading({ class: [config.slots.heading, ui?.heading] }),
+	navButton: variantSlots.navButton({ class: [config.slots.navButton, ui?.navButton] }),
+	navButtonIcon: variantSlots.navButtonIcon({ class: [config.slots.navButtonIcon, ui?.navButtonIcon] }),
+	grid: variantSlots.grid({ class: [config.slots.grid, ui?.grid] }),
+	gridWeekDaysRow: variantSlots.gridWeekDaysRow({ class: [config.slots.gridWeekDaysRow, ui?.gridWeekDaysRow] }),
+	gridBody: variantSlots.gridBody({ class: [config.slots.gridBody, ui?.gridBody] }),
+	gridRow: variantSlots.gridRow({ class: [config.slots.gridRow, ui?.gridRow] }),
+	headCell: variantSlots.headCell({ class: [config.slots.headCell, ui?.headCell] }),
+	headCellWeek: variantSlots.headCellWeek({ class: [config.slots.headCellWeek, ui?.headCellWeek] }),
+	cell: variantSlots.cell({ class: [config.slots.cell, ui?.cell] }),
+	cellTrigger: variantSlots.cellTrigger({ class: [config.slots.cellTrigger, ui?.cellTrigger] }),
+	cellWeek: variantSlots.cellWeek({ class: [config.slots.cellWeek, ui?.cellWeek] })
+});
+function paginateYear(date, sign) {
+	return sign === -1 ? date.subtract({ years: 1 }) : date.add({ years: 1 });
+}
+const commonProps = $derived({
+	id: resolvedId,
+	placeholder,
+	onPlaceholderChange: (val) => {
+		placeholder = val;
+		onPlaceholderChange?.(val);
+	},
+	preventDeselect,
+	minValue,
+	maxValue,
+	disabled,
+	pagedNavigation,
+	weekStartsOn,
+	weekdayFormat,
+	isDateDisabled,
+	isDateUnavailable,
+	fixedWeeks,
+	numberOfMonths,
+	calendarLabel,
+	locale,
+	readonly,
+	disableDaysOutsideMonth,
+	"aria-describedby": ariaDescribedBy,
+	"aria-invalid": hasError ? true : undefined,
+	"data-name": resolvedName,
+	onfocusin: () => emit.onFocus(),
+	onfocusout: () => emit.onBlur()
+});
+function handleValueChange(val) {
+	;
+	onValueChange?.(val);
+	emit.onChange();
+}
 </script>
 
 {#snippet calendarContent(months: Month<DateValue>[], weekdays: string[])}

package/dist/Calendar/Calendar.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { CalendarProps } from './calendar.types.js';
 export type Props = CalendarProps;
 import { Calendar } from 'bits-ui';
-declare const Calendar: import("svelte").Component<CalendarProps, {}, "value" | "ref" | "placeholder">;
+declare const Calendar: import("svelte").Component<CalendarProps, {}, "ref" | "placeholder" | "value">;
 type Calendar = ReturnType<typeof Calendar>;
 export default Calendar;

package/dist/Card/Card.svelte

@@ -1,36 +1,23 @@
-<script lang="ts" module>
-    import type { CardProps } from './card.types.js'
-
-    export type Props = CardProps
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts">
-    import { getComponentConfig } from '../config.js'
-    import { cardDefaults, cardVariants } from './card.variants.js'
-
-    const config = getComponentConfig('card', cardDefaults)
-
-    let {
-        ref = $bindable(null),
-        as = 'div',
-        ui,
-        variant = config.defaultVariants.variant,
-        class: className,
-        header,
-        children,
-        footer,
-        ...restProps
-    }: Props = $props()
-
-    const classes = $derived.by(() => {
-        const slots = cardVariants({ variant })
-        return {
-            root: slots.root({ class: [config.slots.root, className, ui?.root] }),
-            header: slots.header({ class: [config.slots.header, ui?.header] }),
-            body: slots.body({ class: [config.slots.body, ui?.body] }),
-            footer: slots.footer({ class: [config.slots.footer, ui?.footer] })
-        }
-    })
+<script lang="ts">import { getComponentConfig } from "../config.js";
+import { cardDefaults, cardVariants } from "./card.variants.js";
+const config = getComponentConfig("card", cardDefaults);
+let { ref = $bindable(null), as = "div", ui, variant = config.defaultVariants.variant, class: className, header, children, footer, ...restProps } = $props();
+const classes = $derived.by(() => {
+	const slots = cardVariants({ variant });
+	return {
+		root: slots.root({ class: [
+			config.slots.root,
+			className,
+			ui?.root
+		] }),
+		header: slots.header({ class: [config.slots.header, ui?.header] }),
+		body: slots.body({ class: [config.slots.body, ui?.body] }),
+		footer: slots.footer({ class: [config.slots.footer, ui?.footer] })
+	};
+});
 </script>
 
 <svelte:element this={as} bind:this={ref} class={classes.root} {...restProps}>

package/dist/Carousel/Carousel.svelte

@@ -1,178 +1,123 @@
-<script lang="ts" module>
-    import type { CarouselAutoplayOptions, CarouselProps } from './carousel.types.js'
-
-    export type Props<T = unknown> = CarouselProps<T>
+<script lang="ts" module>export {};
 </script>
 
-<script lang="ts" generics="T = unknown">
-    import type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel'
-    import Autoplay from 'embla-carousel-autoplay'
-    import ClassNames from 'embla-carousel-class-names'
-    import Fade from 'embla-carousel-fade'
-    import useEmblaCarousel from 'embla-carousel-svelte'
-    import { untrack } from 'svelte'
-    import Button from '../Button/Button.svelte'
-    import { getComponentConfig } from '../config.js'
-    import { carouselDefaults, carouselVariants } from './carousel.variants.js'
-
-    const config = getComponentConfig('carousel', carouselDefaults)
-
-    let {
-        ref = $bindable(null),
-        api = $bindable<EmblaCarouselType | undefined>(),
-        items,
-        index = $bindable(0),
-        onIndexChange,
-        onSettle,
-        slidesToShow = 1,
-        loop = false,
-        align = 'start',
-        orientation = 'horizontal',
-        draggable = true,
-        dragFree = false,
-        slidesToScroll = 1,
-        autoplay = false,
-        fade = false,
-        classNames = false,
-        breakpoints,
-        plugins: extraPlugins,
-        options: optionsOverride,
-        arrows = true,
-        dots = true,
-        prevIcon,
-        nextIcon,
-        color = config.defaultVariants.color,
-        size = config.defaultVariants.size,
-        variant = config.defaultVariants.variant,
-        class: className,
-        ui,
-        slide: slideSnippet,
-        dot: dotSnippet,
-        prevSlot,
-        nextSlot,
-        children
-    }: Props<T> = $props()
-
-    let selectedIndex = $state(0)
-    let scrollSnaps = $state<number[]>([])
-    let canScrollPrev = $state(false)
-    let canScrollNext = $state(false)
-
-    const resolvedPrevIcon = $derived(
-        prevIcon ?? (orientation === 'vertical' ? 'lucide:chevron-up' : 'lucide:chevron-left')
-    )
-    const resolvedNextIcon = $derived(
-        nextIcon ?? (orientation === 'vertical' ? 'lucide:chevron-down' : 'lucide:chevron-right')
-    )
-
-    function buildAutoplay(opts: CarouselAutoplayOptions) {
-        return Autoplay({
-            delay: opts.delay ?? 4000,
-            defaultInteraction: opts.defaultInteraction ?? true,
-            stopOnLastSnap: opts.stopOnLastSnap ?? false,
-            rootNode: opts.rootNode ?? null
-        })
-    }
-
-    const plugins = $derived.by<EmblaPluginType[]>(() => {
-        const list: EmblaPluginType[] = []
-        if (autoplay) list.push(buildAutoplay(typeof autoplay === 'object' ? autoplay : {}))
-        if (fade) list.push(Fade())
-        if (classNames) list.push(ClassNames())
-        if (extraPlugins) list.push(...extraPlugins)
-        return list
-    })
-
-    const emblaOptions = $derived.by<EmblaOptionsType>(() => ({
-        loop,
-        align,
-        axis: orientation === 'vertical' ? 'y' : 'x',
-        draggable,
-        dragFree,
-        slidesToScroll,
-        breakpoints,
-        ...optionsOverride
-    }))
-
-    const dotIndices = $derived(scrollSnaps.map((_, i) => i))
-
-    function classListHas(cls: unknown, re: RegExp): boolean {
-        if (typeof cls === 'string') return re.test(cls)
-        if (Array.isArray(cls)) return cls.some((c) => classListHas(c, re))
-        return false
-    }
-
-    const userOverridesBasis = $derived(classListHas(ui?.slide, /\bbasis-/))
-    const containerStyle = $derived(
-        orientation === 'vertical'
-            ? 'display: flex; flex-direction: column; touch-action: pan-x;'
-            : 'display: flex; flex-direction: row; touch-action: pan-y;'
-    )
-    const slideStyle = $derived.by(() => {
-        if (userOverridesBasis) return undefined
-        const minDim = orientation === 'vertical' ? 'min-height' : 'min-width'
-        return `flex: 0 0 calc(100% / ${slidesToShow}); ${minDim}: 0;`
-    })
-
-    const variantSlots = $derived(carouselVariants({ orientation, size, color, variant }))
-    const classes = $derived({
-        root: variantSlots.root({ class: [config.slots.root, className, ui?.root] }),
-        viewport: variantSlots.viewport({ class: [config.slots.viewport, ui?.viewport] }),
-        container: variantSlots.container({ class: [config.slots.container, ui?.container] }),
-        slide: variantSlots.slide({ class: [config.slots.slide, ui?.slide] }),
-        arrow: variantSlots.arrow({ class: [config.slots.arrow, ui?.arrow] }),
-        arrowPrev: variantSlots.arrowPrev({ class: [config.slots.arrowPrev, ui?.arrowPrev] }),
-        arrowNext: variantSlots.arrowNext({ class: [config.slots.arrowNext, ui?.arrowNext] }),
-        dots: variantSlots.dots({ class: [config.slots.dots, ui?.dots] }),
-        dot: variantSlots.dot({ class: [config.slots.dot, ui?.dot] })
-    })
-
-    function syncFromApi(embla: EmblaCarouselType) {
-        const newIndex = embla.selectedSnap()
-        selectedIndex = newIndex
-        scrollSnaps = embla.snapList()
-        canScrollPrev = embla.canGoToPrev()
-        canScrollNext = embla.canGoToNext()
-        if (newIndex !== index) {
-            index = newIndex
-            onIndexChange?.(newIndex)
-        }
-    }
-
-    function handleEmblaInit(event: CustomEvent<EmblaCarouselType>) {
-        const embla = event.detail
-        api = embla
-        syncFromApi(embla)
-        embla.on('select', () => syncFromApi(embla))
-        embla.on('reinit', () => syncFromApi(embla))
-        if (onSettle) embla.on('settle', () => onSettle(embla))
-    }
-
-    $effect(() => {
-        if (!api) return
-        const desired = index
-        if (desired !== untrack(() => selectedIndex)) {
-            api.goTo(desired)
-        }
-    })
-
-    function scrollPrev() {
-        if (!api) return
-        api.goToPrev()
-        syncFromApi(api)
-    }
-
-    function scrollNext() {
-        if (!api) return
-        api.goToNext()
-        syncFromApi(api)
-    }
-
-    function scrollTo(i: number) {
-        if (!api) return
-        api.goTo(i)
-        syncFromApi(api)
-    }
+<script lang="ts" generics="T = unknown">import Autoplay from "embla-carousel-autoplay";
+import ClassNames from "embla-carousel-class-names";
+import Fade from "embla-carousel-fade";
+import useEmblaCarousel from "embla-carousel-svelte";
+import { untrack } from "svelte";
+import Button from "../Button/Button.svelte";
+import { getComponentConfig } from "../config.js";
+import { carouselDefaults, carouselVariants } from "./carousel.variants.js";
+const config = getComponentConfig("carousel", carouselDefaults);
+let { ref = $bindable(null), api = $bindable(), items, index = $bindable(0), onIndexChange, onSettle, slidesToShow = 1, loop = false, align = "start", orientation = "horizontal", draggable = true, dragFree = false, slidesToScroll = 1, autoplay = false, fade = false, classNames = false, breakpoints, plugins: extraPlugins, options: optionsOverride, arrows = true, dots = true, prevIcon, nextIcon, color = config.defaultVariants.color, size = config.defaultVariants.size, variant = config.defaultVariants.variant, class: className, ui, slide: slideSnippet, dot: dotSnippet, prevSlot, nextSlot, children } = $props();
+let selectedIndex = $state(0);
+let scrollSnaps = $state([]);
+let canScrollPrev = $state(false);
+let canScrollNext = $state(false);
+const resolvedPrevIcon = $derived(prevIcon ?? (orientation === "vertical" ? "lucide:chevron-up" : "lucide:chevron-left"));
+const resolvedNextIcon = $derived(nextIcon ?? (orientation === "vertical" ? "lucide:chevron-down" : "lucide:chevron-right"));
+function buildAutoplay(opts) {
+	return Autoplay({
+		delay: opts.delay ?? 4e3,
+		defaultInteraction: opts.defaultInteraction ?? true,
+		stopOnLastSnap: opts.stopOnLastSnap ?? false,
+		rootNode: opts.rootNode ?? null
+	});
+}
+const plugins = $derived.by(() => {
+	const list = [];
+	if (autoplay) list.push(buildAutoplay(typeof autoplay === "object" ? autoplay : {}));
+	if (fade) list.push(Fade());
+	if (classNames) list.push(ClassNames());
+	if (extraPlugins) list.push(...extraPlugins);
+	return list;
+});
+const emblaOptions = $derived.by(() => ({
+	loop,
+	align,
+	axis: orientation === "vertical" ? "y" : "x",
+	draggable,
+	dragFree,
+	slidesToScroll,
+	breakpoints,
+	...optionsOverride
+}));
+const dotIndices = $derived(scrollSnaps.map((_, i) => i));
+function classListHas(cls, re) {
+	if (typeof cls === "string") return re.test(cls);
+	if (Array.isArray(cls)) return cls.some((c) => classListHas(c, re));
+	return false;
+}
+const userOverridesBasis = $derived(classListHas(ui?.slide, /\bbasis-/));
+const containerStyle = $derived(orientation === "vertical" ? "display: flex; flex-direction: column; touch-action: pan-x;" : "display: flex; flex-direction: row; touch-action: pan-y;");
+const slideStyle = $derived.by(() => {
+	if (userOverridesBasis) return undefined;
+	const minDim = orientation === "vertical" ? "min-height" : "min-width";
+	return `flex: 0 0 calc(100% / ${slidesToShow}); ${minDim}: 0;`;
+});
+const variantSlots = $derived(carouselVariants({
+	orientation,
+	size,
+	color,
+	variant
+}));
+const classes = $derived({
+	root: variantSlots.root({ class: [
+		config.slots.root,
+		className,
+		ui?.root
+	] }),
+	viewport: variantSlots.viewport({ class: [config.slots.viewport, ui?.viewport] }),
+	container: variantSlots.container({ class: [config.slots.container, ui?.container] }),
+	slide: variantSlots.slide({ class: [config.slots.slide, ui?.slide] }),
+	arrow: variantSlots.arrow({ class: [config.slots.arrow, ui?.arrow] }),
+	arrowPrev: variantSlots.arrowPrev({ class: [config.slots.arrowPrev, ui?.arrowPrev] }),
+	arrowNext: variantSlots.arrowNext({ class: [config.slots.arrowNext, ui?.arrowNext] }),
+	dots: variantSlots.dots({ class: [config.slots.dots, ui?.dots] }),
+	dot: variantSlots.dot({ class: [config.slots.dot, ui?.dot] })
+});
+function syncFromApi(embla) {
+	const newIndex = embla.selectedSnap();
+	selectedIndex = newIndex;
+	scrollSnaps = embla.snapList();
+	canScrollPrev = embla.canGoToPrev();
+	canScrollNext = embla.canGoToNext();
+	if (newIndex !== index) {
+		index = newIndex;
+		onIndexChange?.(newIndex);
+	}
+}
+function handleEmblaInit(event) {
+	const embla = event.detail;
+	api = embla;
+	syncFromApi(embla);
+	embla.on("select", () => syncFromApi(embla));
+	embla.on("reinit", () => syncFromApi(embla));
+	if (onSettle) embla.on("settle", () => onSettle(embla));
+}
+$effect(() => {
+	if (!api) return;
+	const desired = index;
+	if (desired !== untrack(() => selectedIndex)) {
+		api.goTo(desired);
+	}
+});
+function scrollPrev() {
+	if (!api) return;
+	api.goToPrev();
+	syncFromApi(api);
+}
+function scrollNext() {
+	if (!api) return;
+	api.goToNext();
+	syncFromApi(api);
+}
+function scrollTo(i) {
+	if (!api) return;
+	api.goTo(i);
+	syncFromApi(api);
+}
 </script>
 
 {#snippet defaultPrev()}