@winkintel/bootstrap-svelte 1.0.4 → 1.0.6

package/dist/Carousel/carousel.svelte.js

@@ -12,11 +12,18 @@ export class CarouselRootState {
     static PAUSE_DEFAULT = 'hover';
     static RIDE_DEFAULT = false;
     static TRANSITION_DURATION_DEFAULT = 600;
+    static normalizeInterval(value) {
+        return typeof value === 'number' && Number.isFinite(value) && value > 0 ? value : CarouselRootState.INTERNAL_DEFAULT;
+    }
+    static normalizeTransitionDuration(value) {
+        return typeof value === 'number' && Number.isFinite(value) && value >= 0 ? value : CarouselRootState.TRANSITION_DURATION_DEFAULT;
+    }
     // Private state properties...
     #activeItemIndex = $state(0); // Zero-based index for active item
     #animation = $state(CarouselRootState.ANIMATION_DEFAULT);
     #hasUserInteraction = $state(false); // Used to delay autoplay until user interacts when ride=true
-    #indicators = [];
+    #indicators = $state([]);
+    #hasStarted = false;
     #interval = $state(0);
     #timeoutId = $state(null);
     #pendingTimeoutIds = [];
@@ -25,12 +32,17 @@ export class CarouselRootState {
     #isHovered = $state(false);
     #isPaused = $state(true);
     #isPointerDown = $state(false);
-    #items = [];
+    #isTouchGesture = false;
+    #items = $state([]);
     #nextActiveItemIndex = $state(-1); // Tracks the index of the slide that will become active (-1 when no transition is pending)
     #pauseInteraction = $state(CarouselRootState.PAUSE_DEFAULT);
     #pointerStartX = $state(0);
+    #registrationOrderScheduled = false;
+    #resumeTimeoutId = null;
     #ride = $state(false);
     #transitionDuration = $state(CarouselRootState.TRANSITION_DURATION_DEFAULT);
+    #transitionGeneration = 0;
+    #transitionTimeoutId = null;
     #visibilityListener = null;
     // Public readonly properties...
     isSlideAnimation = $derived.by(() => this.animation === 'slide');
@@ -40,11 +52,13 @@ export class CarouselRootState {
     constructor(props) {
         this.props = props;
         this.#animation = this.props.animation || CarouselRootState.ANIMATION_DEFAULT;
-        this.#interval = this.props.interval || CarouselRootState.INTERNAL_DEFAULT;
+        this.#interval = CarouselRootState.normalizeInterval(this.props.interval);
         this.#pauseInteraction = this.props.pause !== undefined ? this.props.pause : CarouselRootState.PAUSE_DEFAULT;
         this.#ride = this.props.ride || CarouselRootState.RIDE_DEFAULT;
-        this.#transitionDuration = this.props.transitionDuration || CarouselRootState.TRANSITION_DURATION_DEFAULT;
+        this.#transitionDuration = CarouselRootState.normalizeTransitionDuration(this.props.transitionDuration);
         this.registerItem = this.registerItem.bind(this);
+        this.unregisterItem = this.unregisterItem.bind(this);
+        this.unregisterIndicator = this.unregisterIndicator.bind(this);
         this.isItemActive = this.isItemActive.bind(this);
         this.next = this.next.bind(this);
         this.prev = this.prev.bind(this);
@@ -56,6 +70,7 @@ export class CarouselRootState {
         this.handlePointerDown = this.handlePointerDown.bind(this);
         this.handlePointerMove = this.handlePointerMove.bind(this);
         this.handlePointerUp = this.handlePointerUp.bind(this);
+        this.handlePointerCancel = this.handlePointerCancel.bind(this);
         // Setup Page Visibility API listener
         if (typeof document !== 'undefined' && 'hidden' in document) {
             this.#visibilityListener = () => {
@@ -68,11 +83,6 @@ export class CarouselRootState {
             };
             document.addEventListener('visibilitychange', this.#visibilityListener);
         }
-        // Start autoplay immediately in the browser if ride='carousel', otherwise wait for user interaction.
-        // During static prerendering there is no browser timer API, so autoplay starts during hydration instead.
-        if (typeof window !== 'undefined' && this.#ride === 'carousel' && !this.#timeoutId) {
-            this.cycle();
-        }
     }
     // Determines the appropriate interval duration, prioritizing the active item's specific interval
     getCurrentItemInterval() {
@@ -80,8 +90,10 @@ export class CarouselRootState {
             return this.#interval;
         }
         const activeItem = this.#items[this.#activeItemIndex];
-        if (activeItem && activeItem.interval) {
-            return activeItem.interval;
+        if (activeItem?.interval !== undefined) {
+            return typeof activeItem.interval === 'number' && Number.isFinite(activeItem.interval) && activeItem.interval > 0
+                ? activeItem.interval
+                : this.#interval;
         }
         return this.#interval;
     }
@@ -98,6 +110,7 @@ export class CarouselRootState {
             callback();
         }, delay);
         this.#pendingTimeoutIds.push(timeoutId);
+        return timeoutId;
     }
     get animation() {
         return this.#animation;
@@ -115,7 +128,7 @@ export class CarouselRootState {
         return this.#interval;
     }
     set interval(interval) {
-        this.#interval = interval;
+        this.#interval = CarouselRootState.normalizeInterval(interval);
         if (this.shouldCycle()) {
             this.cycle();
         }
@@ -136,7 +149,7 @@ export class CarouselRootState {
         return this.#transitionDuration;
     }
     set transitionDuration(duration) {
-        this.#transitionDuration = duration;
+        this.#transitionDuration = CarouselRootState.normalizeTransitionDuration(duration);
     }
     get isAnimating() {
         return this.#isAnimating;
@@ -147,10 +160,82 @@ export class CarouselRootState {
         if (item.props.isActive && !this.#isAnimating) {
             this.#activeItemIndex = item.index;
         }
+        if (this.#hasStarted && this.#items.length === 2 && this.shouldCycle()) {
+            this.cycle();
+        }
+    }
+    unregisterItem(item) {
+        const removedIndex = this.#items.indexOf(item);
+        if (removedIndex === -1) {
+            return;
+        }
+        if (removedIndex === this.#activeItemIndex || removedIndex === this.#nextActiveItemIndex) {
+            this.#invalidateTransition();
+        }
+        this.#items.splice(removedIndex, 1);
+        if (this.#items.length === 0) {
+            this.#activeItemIndex = 0;
+            this.#nextActiveItemIndex = -1;
+            this.#isAnimating = false;
+            this.pause();
+            return;
+        }
+        if (removedIndex < this.#activeItemIndex) {
+            this.#activeItemIndex--;
+        }
+        else if (removedIndex === this.#activeItemIndex) {
+            this.#activeItemIndex = Math.min(removedIndex, this.#items.length - 1);
+        }
+        if (removedIndex < this.#nextActiveItemIndex) {
+            this.#nextActiveItemIndex--;
+        }
+        else if (removedIndex === this.#nextActiveItemIndex) {
+            this.#nextActiveItemIndex = -1;
+        }
     }
     registerIndicator(indicator) {
         this.#indicators.push(indicator);
     }
+    scheduleRegistrationOrder() {
+        if (this.#registrationOrderScheduled)
+            return;
+        this.#registrationOrderScheduled = true;
+        queueMicrotask(() => {
+            this.#registrationOrderScheduled = false;
+            if (this.#isDisposed)
+                return;
+            this.#reorderRegistrations();
+        });
+    }
+    unregisterIndicator(indicator) {
+        const index = this.#indicators.indexOf(indicator);
+        if (index !== -1) {
+            this.#indicators.splice(index, 1);
+        }
+    }
+    getItemIndex(item) {
+        return this.#items.indexOf(item);
+    }
+    getIndicatorIndex(indicator) {
+        return this.#indicators.indexOf(indicator);
+    }
+    #reorderRegistrations() {
+        const activeItem = this.#items[this.#activeItemIndex];
+        const nextActiveItem = this.#items[this.#nextActiveItemIndex];
+        const compareElementOrder = (first, second) => {
+            const firstElement = first.props.orderElementRef ?? first.props.elementRef;
+            const secondElement = second.props.orderElementRef ?? second.props.elementRef;
+            if (!firstElement || !secondElement || firstElement === secondElement) {
+                return firstElement ? -1 : secondElement ? 1 : 0;
+            }
+            const position = firstElement.compareDocumentPosition(secondElement);
+            return position & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : position & Node.DOCUMENT_POSITION_PRECEDING ? 1 : 0;
+        };
+        this.#items.sort(compareElementOrder);
+        this.#indicators.sort(compareElementOrder);
+        this.#activeItemIndex = activeItem ? this.#items.indexOf(activeItem) : Math.min(this.#activeItemIndex, this.#items.length - 1);
+        this.#nextActiveItemIndex = nextActiveItem ? this.#items.indexOf(nextActiveItem) : -1;
+    }
     isItemActive(index) {
         return this.#activeItemIndex === index;
     }
@@ -169,31 +254,29 @@ export class CarouselRootState {
     getIndicatorCount() {
         return this.#indicators.length;
     }
+    registerUserInteraction() {
+        this.#hasUserInteraction = true;
+        if (!this.#isTouchGesture && this.#ride === true && !this.#timeoutId) {
+            this.cycle();
+        }
+    }
     next() {
-        if (this.#isAnimating) {
+        if (this.#isAnimating || this.#items.length < 2) {
             return;
         }
         const nextIndex = (this.#activeItemIndex + 1) % this.#items.length;
         this.to(nextIndex, 'next');
         // Mark that user interaction has occurred
-        this.#hasUserInteraction = true;
-        // Start cycling if ride is true and this is first interaction
-        if (this.#ride === true && !this.#timeoutId) {
-            this.cycle();
-        }
+        this.registerUserInteraction();
     }
     prev() {
-        if (this.#isAnimating) {
+        if (this.#isAnimating || this.#items.length < 2) {
             return;
         }
         const prevIndex = (this.#activeItemIndex - 1 + this.#items.length) % this.#items.length;
         this.to(prevIndex, 'prev');
         // Mark that user interaction has occurred
-        this.#hasUserInteraction = true;
-        // Start cycling if ride is true and this is first interaction
-        if (this.#ride === true && !this.#timeoutId) {
-            this.cycle();
-        }
+        this.registerUserInteraction();
     }
     /**
      * Navigates to the slide at the specified index with the given transition direction.
@@ -226,6 +309,7 @@ export class CarouselRootState {
         }
         this.#isAnimating = true;
         this.#nextActiveItemIndex = index;
+        const generation = ++this.#transitionGeneration;
         // For slide and crossfade animations, we set directional classes and clean up after transition
         if (this.#animation === 'slide' || this.#animation === 'crossfade') {
             if (isNext) {
@@ -238,12 +322,16 @@ export class CarouselRootState {
                 toItem.direction = 'end';
                 toItem.order = 'prev';
             }
-            this.#schedule(() => {
+            this.#transitionTimeoutId = this.#schedule(() => {
+                this.#transitionTimeoutId = null;
+                if (generation !== this.#transitionGeneration || !this.#items.includes(fromItem) || !this.#items.includes(toItem)) {
+                    return;
+                }
                 fromItem.order = undefined;
                 fromItem.direction = undefined;
                 toItem.order = undefined;
                 toItem.direction = undefined;
-                this.#activeItemIndex = index;
+                this.#activeItemIndex = this.#items.indexOf(toItem);
                 this.#nextActiveItemIndex = -1;
                 this.#isAnimating = false;
                 // Restart cycle with new slide's interval if cycling
@@ -260,10 +348,14 @@ export class CarouselRootState {
             if (isPrev) {
                 toItem.order = 'prev';
             }
-            this.#schedule(() => {
+            this.#transitionTimeoutId = this.#schedule(() => {
+                this.#transitionTimeoutId = null;
+                if (generation !== this.#transitionGeneration || !this.#items.includes(toItem)) {
+                    return;
+                }
                 toItem.order = undefined;
                 this.#isAnimating = false;
-            }, this.#transitionDuration / 2);
+            }, this.#transitionDuration);
             this.#activeItemIndex = index;
             this.#nextActiveItemIndex = -1;
             // Restart cycle with new slide's interval if cycling
@@ -274,7 +366,10 @@ export class CarouselRootState {
         // For no animation, we simply update the active index on the next tick
         if (this.#animation === 'none') {
             tick().then(() => {
-                this.#activeItemIndex = index;
+                if (generation !== this.#transitionGeneration || !this.#items.includes(fromItem) || !this.#items.includes(toItem)) {
+                    return;
+                }
+                this.#activeItemIndex = this.#items.indexOf(toItem);
                 this.#nextActiveItemIndex = -1;
                 this.#isAnimating = false;
                 // Restart cycle with new slide's interval if cycling
@@ -292,7 +387,12 @@ export class CarouselRootState {
         if (typeof window === 'undefined') {
             return;
         }
-        if (this.#isDisposed) {
+        if (this.#isDisposed || !this.shouldCycle() || this.#items.length < 2) {
+            return;
+        }
+        // A mount/start or reactive ride update can race with an in-progress touch.
+        // Keep the carousel paused until the single delayed touch resume fires.
+        if (this.#isPointerDown || this.#resumeTimeoutId !== null) {
             return;
         }
         // Don't start cycling if we're hovered and pause='hover'
@@ -310,6 +410,7 @@ export class CarouselRootState {
         const currentInterval = this.getCurrentItemInterval();
         // Schedule the next slide using setTimeout
         this.#timeoutId = window.setTimeout(() => {
+            this.#timeoutId = null;
             if (!this.#isPaused && !this.#isAnimating) {
                 this.next();
             }
@@ -344,6 +445,7 @@ export class CarouselRootState {
     handlePointerDown(pointerEvent) {
         // Only track primary touch pointer
         if (pointerEvent.pointerType === 'touch' && pointerEvent.isPrimary) {
+            this.#cancelTouchResume();
             this.#isPointerDown = true;
             this.#pointerStartX = pointerEvent.clientX;
             // Pause autoplay during touch interaction
@@ -366,29 +468,81 @@ export class CarouselRootState {
      * Determines swipe direction based on horizontal movement distance.
      */
     handlePointerUp(pointerEvent) {
-        if (!this.#isPointerDown || pointerEvent.pointerType !== 'touch' || !pointerEvent.isPrimary) {
+        if (!this.#isPointerDown) {
+            return;
+        }
+        this.#isPointerDown = false;
+        if (pointerEvent.pointerType !== 'touch' || !pointerEvent.isPrimary) {
+            this.#scheduleTouchResume();
             return;
         }
         const deltaX = pointerEvent.clientX - this.#pointerStartX;
         // Consider it a swipe if movement exceeds threshold (50px)
         if (Math.abs(deltaX) > 50) {
+            this.#isTouchGesture = true;
             if (deltaX > 0) {
                 this.prev(); // Swipe right means go to previous
             }
             else {
                 this.next(); // Swipe left means go to next
             }
+            this.#isTouchGesture = false;
         }
-        this.#isPointerDown = false;
         // Resume cycling after touch with a delay to prevent immediate transition
-        if (this.shouldCycle()) {
-            this.#schedule(() => {
+        this.#scheduleTouchResume();
+    }
+    handlePointerCancel() {
+        if (!this.#isPointerDown) {
+            return;
+        }
+        this.#isPointerDown = false;
+        this.#scheduleTouchResume();
+    }
+    #invalidateTransition() {
+        this.#transitionGeneration++;
+        if (this.#transitionTimeoutId !== null) {
+            window.clearTimeout(this.#transitionTimeoutId);
+            this.#pendingTimeoutIds = this.#pendingTimeoutIds.filter((id) => id !== this.#transitionTimeoutId);
+            this.#transitionTimeoutId = null;
+        }
+        for (const item of this.#items) {
+            item.order = undefined;
+            item.direction = undefined;
+        }
+        this.#nextActiveItemIndex = -1;
+        this.#isAnimating = false;
+    }
+    #cancelTouchResume() {
+        if (this.#resumeTimeoutId === null) {
+            return;
+        }
+        window.clearTimeout(this.#resumeTimeoutId);
+        this.#pendingTimeoutIds = this.#pendingTimeoutIds.filter((id) => id !== this.#resumeTimeoutId);
+        this.#resumeTimeoutId = null;
+    }
+    #scheduleTouchResume() {
+        this.#cancelTouchResume();
+        if (!this.shouldCycle() || this.#isDisposed) {
+            return;
+        }
+        this.#schedule(() => {
+            this.#resumeTimeoutId = null;
+            if (!this.#isDisposed && this.shouldCycle()) {
                 this.cycle();
-            }, 1000);
+            }
+        }, 1000);
+        this.#resumeTimeoutId = this.#pendingTimeoutIds.at(-1) ?? null;
+    }
+    start() {
+        this.#hasStarted = true;
+        if (this.shouldCycle()) {
+            this.cycle();
         }
     }
     dispose() {
         this.#isDisposed = true;
+        this.#invalidateTransition();
+        this.#cancelTouchResume();
         if (this.#timeoutId) {
             window.clearTimeout(this.#timeoutId);
             this.#timeoutId = null;
@@ -413,8 +567,12 @@ export class CarouselItemState {
     root;
     #order = $state(undefined);
     #direction = $state(undefined);
-    index;
-    interval;
+    get index() {
+        return this.root.getItemIndex(this);
+    }
+    get interval() {
+        return this.props.interval;
+    }
     isActive = $derived.by(() => this.root.isItemActive(this.index));
     isNext = $derived(this.#order === 'next');
     isPrev = $derived(this.#order === 'prev');
@@ -434,8 +592,6 @@ export class CarouselItemState {
     constructor(props, root) {
         this.props = props;
         this.root = root;
-        this.index = this.root.getItemCount();
-        this.interval = this.props.interval || 5000;
     }
     get order() {
         return this.#order;
@@ -493,15 +649,17 @@ export class CarouselIndicatorButtonState {
     root;
     isActive = $derived.by(() => this.root.isItemActive(this.index) && !this.root.isAnimating);
     isNextActive = $derived.by(() => this.root.isNextItemActive(this.index));
-    index;
+    get index() {
+        return this.root.getIndicatorIndex(this);
+    }
     constructor(props, root) {
         this.props = props;
         this.root = root;
-        this.index = this.root.getIndicatorCount();
         this.onclick = this.onclick.bind(this);
     }
     onclick(event) {
         event.preventDefault();
+        this.root.registerUserInteraction();
         const order = this.index > this.root.getActiveIndex() ? 'next' : 'prev';
         this.root.to(this.index, order);
     }

package/dist/Col/col.svelte

@@ -57,29 +57,37 @@ A component that implements Bootstrap's grid column functionality.
 -->
 <script lang="ts">import { uniqueClsx } from '../common/css.js';
 let { children, class: classValues, elementRef = $bindable(null), offset, order, sizing, ...restOfProps } = $props();
+const breakpoints = new Set(['xs', 'sm', 'md', 'lg', 'xl', 'xxl']);
+const isIntegerInRange = (value, min, max) => typeof value === 'number' && Number.isInteger(value) && value >= min && value <= max;
+const isSizingValue = (value) => value === 'auto' || value === '*' || isIntegerInRange(value, 1, 12);
+const isOffsetValue = (value) => isIntegerInRange(value, 0, 11);
+const isOrderValue = (value) => value === 'first' || value === 'last' || isIntegerInRange(value, 0, 5);
 // Generate sizing classes based on the sizing prop
 let sizingClasses = $derived.by(() => {
     // If sizing is a string and is 'auto', return a single col-auto class
-    if (typeof sizing === 'string' && sizing === 'auto') {
+    if (sizing === 'auto') {
         return [`col-${sizing}`];
     }
     // If sizing is a number (OneToTwelve type), generate a simple col-n class
-    if (typeof sizing === 'number') {
+    if (isIntegerInRange(sizing, 1, 12)) {
         return [`col-${sizing}`];
     }
     // If sizing is an object (BreakpointSizingMap type), generate breakpoint-specific classes
     else if (sizing && typeof sizing === 'object') {
-        return Object.entries(sizing).map(([breakpoint, value]) => {
-            // If the breakpoint is 'xs', return 'col-{value}'
-            if (breakpoint === 'xs') {
-                return `col-${value}`;
+        return Object.entries(sizing).flatMap(([breakpoint, value]) => {
+            if (!breakpoints.has(breakpoint) || !isSizingValue(value)) {
+                return [];
             }
             // If the value is '*', return just 'col-{breakpoint}'
             if (value === '*') {
-                return `col-${breakpoint}`;
+                return [breakpoint === 'xs' ? 'col' : `col-${breakpoint}`];
+            }
+            // If the breakpoint is 'xs', return 'col-{value}'
+            if (breakpoint === 'xs') {
+                return [`col-${value}`];
             }
             // Otherwise, return 'col-{breakpoint}-{value}'
-            return `col-${breakpoint}-${value}`;
+            return [`col-${breakpoint}-${value}`];
         });
     }
     // Default: no sizing classes
@@ -88,18 +96,16 @@ let sizingClasses = $derived.by(() => {
 // Generate offset classes if provided
 let offsetClasses = $derived.by(() => {
     // If offset is a number (ZeroToEleven type), generate a simple offset-n class
-    if (typeof offset === 'number') {
+    if (isOffsetValue(offset)) {
         return [`offset-${offset}`];
     }
     // If offset is an object (ColOffsetMap type), generate breakpoint-specific classes
     else if (offset && typeof offset === 'object') {
-        return Object.entries(offset).map(([breakpoint, value]) => {
-            // If the value is '*', return just 'offset-{breakpoint}'
-            // if (value === '*') {
-            //     return `offset-${breakpoint}`;
-            // }
-            // Otherwise, return 'offset-{breakpoint}-{value}'
-            return `offset-${breakpoint}-${value}`;
+        return Object.entries(offset).flatMap(([breakpoint, value]) => {
+            if (!breakpoints.has(breakpoint) || !isOffsetValue(value)) {
+                return [];
+            }
+            return [breakpoint === 'xs' ? `offset-${value}` : `offset-${breakpoint}-${value}`];
         });
     }
     // Default: no offset classes
@@ -108,24 +114,26 @@ let offsetClasses = $derived.by(() => {
 // Generate order classes if provided
 let orderClasses = $derived.by(() => {
     // If order is a string (e.g., 'first' or 'last'), return a single order-first or order-last class
-    if (typeof order === 'string' && (order === 'first' || order === 'last')) {
+    if (order === 'first' || order === 'last') {
         return [`order-${order}`];
     }
     // If order is a number (ZeroToEleven type), generate a simple order-n class
-    if (typeof order === 'number') {
+    if (isIntegerInRange(order, 0, 5)) {
         return [`order-${order}`];
     }
     // If order is an object (ColOrderMap type), generate breakpoint-specific classes
     else if (order && typeof order === 'object') {
-        return Object.entries(order).map(([breakpoint, value]) => {
-            // return 'order-{breakpoint}-{value}'
-            return `order-${breakpoint}-${value}`;
+        return Object.entries(order).flatMap(([breakpoint, value]) => {
+            if (!breakpoints.has(breakpoint) || !isOrderValue(value)) {
+                return [];
+            }
+            return [breakpoint === 'xs' ? `order-${value}` : `order-${breakpoint}-${value}`];
         });
     }
     // Default: no order classes
     return [];
 });
-let classes = $derived(uniqueClsx({ col: sizing === undefined }, ...sizingClasses, ...offsetClasses, ...orderClasses, classValues));
+let classes = $derived(uniqueClsx({ col: sizingClasses.length === 0 }, ...sizingClasses, ...offsetClasses, ...orderClasses, classValues));
 </script>
 
 <div bind:this={elementRef} class={classes} {...restOfProps}>

package/dist/Collapse/collapse.svelte

@@ -43,7 +43,7 @@ Supports both vertical and horizontal collapse directions.
 <script lang="ts">import { uniqueClsx } from '../common/css.js';
 import { noop } from '../common/noop.js';
 import { collapseIn, collapseOut } from './transition.js';
-let { children, class: classValues, transitionDuration: _transitionDuration = 350, elementRef = $bindable(null), isHorizontal = false, isExpanded = false, onCollapse = noop, onCollapsed = noop, onExpand = noop, onExpanded = noop, ...restOfProps } = $props();
+let { children, class: classValues, transitionDuration, elementRef = $bindable(null), isHorizontal = false, isExpanded = false, onCollapse = noop, onCollapsed = noop, onExpand = noop, onExpanded = noop, ...restOfProps } = $props();
 let classes = $derived(uniqueClsx('collapse', { 'collapse-horizontal': isHorizontal }, { show: isExpanded }, classValues));
 </script>
 
@@ -55,8 +55,8 @@ let classes = $derived(uniqueClsx('collapse', { 'collapse-horizontal': isHorizon
         onintroend={onExpanded}
         onoutrostart={onCollapse}
         onoutroend={onCollapsed}
-        in:collapseIn={{ isHorizontal }}
-        out:collapseOut={{ isHorizontal }}
+        in:collapseIn={{ isHorizontal, transitionDuration }}
+        out:collapseOut={{ isHorizontal, transitionDuration }}
         {...restOfProps}>
         {@render children?.()}
     </div>