@winkintel/bootstrap-svelte 1.0.2 → 1.0.4

package/README.md

@@ -54,7 +54,7 @@ yarn add @winkintel/bootstrap-svelte bootstrap
 This package requires Svelte 5:
 
 ```bash
-pnpm add svelte@^5.0.0
+pnpm add svelte@^5.29.0
 ```
 
 ## Bootstrap CSS
@@ -174,7 +174,7 @@ Interactive components are implemented as Svelte components rather than requirin
 
 ## Status and feedback
 
-This package is published as `1.0.1`, but feedback from Svelte developers is still very welcome. Useful feedback includes:
+This package is published as `1.0.4`, but feedback from Svelte developers is still very welcome. Useful feedback includes:
 
 - Component API ergonomics
 - Svelte 5 idioms and runes compatibility

package/dist/Carousel/carousel-item.svelte

@@ -62,6 +62,12 @@ let classes = $derived(uniqueClsx('carousel-item', {
 let styles = $derived(`transition: transform ${itemState.root.transitionDuration / 1000}s ease-in-out !important;` + (style ? style : ''));
 </script>
 
+<!--
+    The slide and crossfade branches use in: (never transition:) — their exit visuals are
+    driven by the carousel-item-start/-end CSS classes during the transition window, and
+    Svelte freezes class bindings inside an outroing block, so an outro would hold the
+    outgoing item in the DOM with a stale 'active' class after the commit.
+-->
 {#if itemState.doSlideItem}
     <div
         bind:this={elementRef}
@@ -70,7 +76,7 @@ let styles = $derived(`transition: transform ${itemState.root.transitionDuration
         onintrostart={onSlide}
         onintroend={onSlid}
         style={styles}
-        transition:fly={{
+        in:fly={{
             duration: itemState.root.transitionDuration,
             x: flyX,
             y: undefined,
@@ -109,7 +115,7 @@ let styles = $derived(`transition: transform ${itemState.root.transitionDuration
         {id}
         onintrostart={onSlide}
         onintroend={onSlid}
-        transition:fly={{
+        in:fly={{
             duration: itemState.root.transitionDuration,
             x: '0%',
             y: undefined,

package/dist/Carousel/carousel.svelte.js

@@ -19,6 +19,8 @@ export class CarouselRootState {
     #indicators = [];
     #interval = $state(0);
     #timeoutId = $state(null);
+    #pendingTimeoutIds = [];
+    #isDisposed = false;
     #isAnimating = $state(false);
     #isHovered = $state(false);
     #isPaused = $state(true);
@@ -87,6 +89,16 @@ export class CarouselRootState {
     shouldCycle() {
         return this.#ride === 'carousel' || (this.#ride === true && this.#hasUserInteraction);
     }
+    // Schedules a setTimeout whose id is tracked so dispose() can cancel it if the
+    // instance is torn down before the callback fires. The id de-registers itself
+    // once the callback runs, keeping #pendingTimeoutIds from growing unbounded.
+    #schedule(callback, delay) {
+        const timeoutId = window.setTimeout(() => {
+            this.#pendingTimeoutIds = this.#pendingTimeoutIds.filter((id) => id !== timeoutId);
+            callback();
+        }, delay);
+        this.#pendingTimeoutIds.push(timeoutId);
+    }
     get animation() {
         return this.#animation;
     }
@@ -226,7 +238,7 @@ export class CarouselRootState {
                 toItem.direction = 'end';
                 toItem.order = 'prev';
             }
-            setTimeout(() => {
+            this.#schedule(() => {
                 fromItem.order = undefined;
                 fromItem.direction = undefined;
                 toItem.order = undefined;
@@ -248,7 +260,7 @@ export class CarouselRootState {
             if (isPrev) {
                 toItem.order = 'prev';
             }
-            setTimeout(() => {
+            this.#schedule(() => {
                 toItem.order = undefined;
                 this.#isAnimating = false;
             }, this.#transitionDuration / 2);
@@ -280,6 +292,9 @@ export class CarouselRootState {
         if (typeof window === 'undefined') {
             return;
         }
+        if (this.#isDisposed) {
+            return;
+        }
         // Don't start cycling if we're hovered and pause='hover'
         if (this.#pauseInteraction === 'hover' && this.#isHovered) {
             return;
@@ -367,16 +382,21 @@ export class CarouselRootState {
         this.#isPointerDown = false;
         // Resume cycling after touch with a delay to prevent immediate transition
         if (this.shouldCycle()) {
-            setTimeout(() => {
+            this.#schedule(() => {
                 this.cycle();
             }, 1000);
         }
     }
     dispose() {
+        this.#isDisposed = true;
         if (this.#timeoutId) {
             window.clearTimeout(this.#timeoutId);
             this.#timeoutId = null;
         }
+        for (const id of this.#pendingTimeoutIds) {
+            window.clearTimeout(id);
+        }
+        this.#pendingTimeoutIds = [];
         // Remove visibility change listener
         if (typeof document !== 'undefined' && this.#visibilityListener) {
             document.removeEventListener('visibilitychange', this.#visibilityListener);

package/dist/Dropdown/dropdown.svelte.js

@@ -210,10 +210,13 @@ export class DropdownMenuState {
         if (!this.isShown) {
             return;
         }
+        if (!this.root.props.id) {
+            return;
+        }
         const target = event.target;
         // Check if the click occurred within this specific dropdown instance.
         // This prevents closing if a click happens inside the dropdown menu or on its toggle.
-        const nearestDropdown = target.closest(`#${this.root.props.id}`);
+        const nearestDropdown = target.closest(`#${CSS.escape(this.root.props.id)}`);
         if (nearestDropdown && nearestDropdown.id === this.root.props.id) {
             // The click is within the current dropdown, so do nothing.
             return;

package/dist/Modal/modal.svelte

@@ -47,9 +47,9 @@ Add dialogs to your site for lightboxes, user notifications, or completely custo
 - `useBackdrop` (boolean | 'static'): Optional. Controls whether the modal has a backdrop and if it's static (non-dismissible).
 - `useFade` (boolean): Optional. Controls whether the modal uses a fade transition.
 -->
-<script lang="ts">import { disableBodyScrolling, noop, resetBodyScrolling, uniqueClsx } from '../common/index.js';
+<script lang="ts">import { acquireBodyScrollLock, noop, releaseBodyScrollLock, uniqueClsx } from '../common/index.js';
 import { Portal } from '../index.js';
-import { onMount, tick } from 'svelte';
+import { onDestroy, onMount, tick } from 'svelte';
 import { fade, fly } from 'svelte/transition';
 import { initModalRootState, ModalRootState } from './modal.svelte.js';
 // Generate a unique ID for the modal element, in case one is not provided...
@@ -57,6 +57,7 @@ const uid = $props.id();
 let { children, class: classValues, elementRef = $bindable(null), id = `modal-${uid}`, isShown = false, isKeyboardDismissible = true, isFocusable = true, onHide = noop, onHidePrevented = noop, onHidden = noop, onShow = noop, onShown = noop, useBackdrop = true, useFade = true, ...restOfProps } = $props();
 // Initialize the root state of the modal component...
 let bodyElement = $state(null);
+let holdsScrollLock = false;
 let previouslyFocusedElement = null;
 const unset = Symbol('unset');
 let previousIsShown = unset;
@@ -115,15 +116,21 @@ $effect(() => {
 });
 const handleOnShow = (event) => {
     if (bodyElement) {
-        disableBodyScrolling(bodyElement);
+        if (!holdsScrollLock) {
+            acquireBodyScrollLock(bodyElement);
+            holdsScrollLock = true;
+        }
         bodyElement.classList.add('modal-open');
     }
     onShow(event);
 };
 const handleOnHidden = (event) => {
-    if (bodyElement) {
-        resetBodyScrolling(bodyElement);
-        bodyElement.classList.remove('modal-open');
+    if (bodyElement && holdsScrollLock) {
+        const remainingLocks = releaseBodyScrollLock(bodyElement);
+        holdsScrollLock = false;
+        if (remainingLocks === 0) {
+            bodyElement.classList.remove('modal-open');
+        }
     }
     onHidden(event);
 };
@@ -166,6 +173,17 @@ onMount(() => {
         bodyElement = document.querySelector('body');
     }
 });
+// Release a held scroll lock if the modal is destroyed while shown, so a
+// removed-while-open modal doesn't permanently disable body scrolling...
+onDestroy(() => {
+    if (holdsScrollLock && bodyElement) {
+        const remainingLocks = releaseBodyScrollLock(bodyElement);
+        holdsScrollLock = false;
+        if (remainingLocks === 0) {
+            bodyElement.classList.remove('modal-open');
+        }
+    }
+});
 // Dismiss the modal when the backdrop is clicked...
 const handleBackdropMouseDown = (event) => {
     const target = event.target;

package/dist/Offcanvas/offcanvas.svelte

@@ -58,14 +58,15 @@ Build hidden sidebars into your project for navigation, shopping carts, and more
 -->
 <script lang="ts">import { noop, uniqueClsx } from '../common/index.js';
 import { initOffcanvasRootState, OffcanvasRootState } from '../common/navbar-offcanvas.svelte.js';
-import { disableBodyScrolling, resetBodyScrolling } from '../common/scrollbar.js';
-import { onMount, tick } from 'svelte';
+import { acquireBodyScrollLock, releaseBodyScrollLock } from '../common/scrollbar.js';
+import { onDestroy, onMount, tick } from 'svelte';
 import { fade, fly } from 'svelte/transition';
 // Generate a unique ID for the offcanvas element, in case one is not provided...
 const uid = $props.id();
 let { children, class: classValues, dir = 'ltr', elementRef = $bindable(null), id = `offcanvas-${uid}`, isBodyScrollable = false, isKeyboardDismissible = true, isShown = false, placement = 'start', showOnBreakpoint, useBackdrop = true, onHide = noop, onHidePrevented = noop, onHidden = noop, onShow = noop, onShown = noop, ...restOfProps } = $props();
 // Initialize the root state of the offcanvas component...
 let bodyElement = $state(null);
+let holdsScrollLock = false;
 const unset = Symbol('unset');
 let previousIsShown = unset;
 let previousShowOnBreakpoint = unset;
@@ -151,18 +152,29 @@ onMount(() => {
 });
 // Listen to the transition events to properly manage the body scrollbar...
 const handleOnShow = (event) => {
-    if (bodyElement && !isBodyScrollable && !rootState.isMediaQueryMatched) {
-        disableBodyScrolling(bodyElement);
+    if (bodyElement && !isBodyScrollable && !rootState.isMediaQueryMatched && !holdsScrollLock) {
+        acquireBodyScrollLock(bodyElement);
+        holdsScrollLock = true;
     }
     onShow(event);
 };
 // Listen to the transition events to properly manage the body scrollbar...
 const handleOnHidden = (event) => {
-    if (bodyElement && !isBodyScrollable && !rootState.isMediaQueryMatched) {
-        resetBodyScrolling(bodyElement);
+    if (holdsScrollLock && bodyElement) {
+        releaseBodyScrollLock(bodyElement);
+        holdsScrollLock = false;
     }
     onHidden(event);
 };
+// Release a held scroll lock if the offcanvas is destroyed while shown,
+// so a removed-while-open offcanvas doesn't permanently disable body
+// scrolling...
+onDestroy(() => {
+    if (holdsScrollLock && bodyElement) {
+        releaseBodyScrollLock(bodyElement);
+        holdsScrollLock = false;
+    }
+});
 // Dismiss the offcanvas when the backdrop is clicked...
 const handleBackdropMouseDown = (event) => {
     const target = event.target;

package/dist/Tooltip/tooltip.svelte

@@ -138,7 +138,7 @@ onMount(() => {
     }
     // accommodate the id containing a hash or not...
     const elementId = referenceElementId.startsWith('#') ? referenceElementId.substring(1) : referenceElementId;
-    referenceElement = document.querySelector(`#${elementId}`);
+    referenceElement = document.getElementById(elementId);
     addEventListeners();
     return () => {
         destroyPopper();

package/dist/common/css.d.ts

@@ -1,5 +1,5 @@
 import { type EasingFunction } from 'bezier-easing';
-import clsx from 'clsx';
+import type clsx from 'clsx';
 /**
  * This easing function will match the CSS `ease-in-out` easing function using a cubic Bezier curve defined by the points (0.25, 0.1, 0.25, 1).
  * @see https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#ease

package/dist/common/css.js

@@ -1,5 +1,50 @@
 import BezierEasing, {} from 'bezier-easing';
-import clsx from 'clsx';
+const whitespacePattern = /\s/;
+const classTokenPattern = /\S+/g;
+function appendClassTokens(result, value) {
+    const classValue = typeof value === 'string' ? value : String(value);
+    if (!classValue) {
+        return;
+    }
+    if (!whitespacePattern.test(classValue)) {
+        if (result.indexOf(classValue) === -1) {
+            result.push(classValue);
+        }
+        return;
+    }
+    const tokens = classValue.match(classTokenPattern);
+    if (!tokens) {
+        return;
+    }
+    for (let i = 0; i < tokens.length; i++) {
+        const token = tokens[i];
+        if (result.indexOf(token) === -1) {
+            result.push(token);
+        }
+    }
+}
+function appendClassValue(result, value) {
+    if (typeof value === 'string' || typeof value === 'number') {
+        appendClassTokens(result, value);
+        return;
+    }
+    if (!value || typeof value !== 'object') {
+        return;
+    }
+    if (Array.isArray(value)) {
+        for (let i = 0; i < value.length; i++) {
+            if (value[i]) {
+                appendClassValue(result, value[i]);
+            }
+        }
+        return;
+    }
+    for (const key in value) {
+        if (value[key]) {
+            appendClassTokens(result, key);
+        }
+    }
+}
 /**
  * This easing function will match the CSS `ease-in-out` easing function using a cubic Bezier curve defined by the points (0.25, 0.1, 0.25, 1).
  * @see https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#ease
@@ -42,20 +87,17 @@ export const cubicBezier = (x1, y1, x2, y2) => {
  * @returns A string containing unique class names.
  */
 export function uniqueClsx(...args) {
-    const classString = clsx(...args);
-    // Early return for empty strings
-    if (!classString) {
-        return '';
-    }
-    // Using a regex split will normalize whitespace and split simultaneously...
-    const classes = classString.split(/\s+/);
-    const seen = new Set();
     const result = [];
-    for (let i = 0; i < classes.length; i++) {
-        const cls = classes[i];
-        if (cls && !seen.has(cls)) {
-            seen.add(cls);
-            result.push(cls);
+    for (let i = 0; i < args.length; i++) {
+        const value = args[i];
+        if (!value) {
+            continue;
+        }
+        if (typeof value === 'string' || typeof value === 'number') {
+            appendClassTokens(result, value);
+        }
+        else {
+            appendClassValue(result, value);
         }
     }
     return result.join(' ');

package/dist/common/scrollbar.d.ts

@@ -8,6 +8,9 @@ export declare const getScrollbarWidth: () => number;
  * Disables body scrolling by setting overflow to hidden and
  * adjusting padding to prevent layout shift from scrollbar removal
  *
+ * @remarks Prefer {@link acquireBodyScrollLock} in library code — calling
+ * this directly is not safe when multiple overlays may lock scrolling at
+ * once, since a second call overwrites the saved "original" values.
  * @param {HTMLElement} bodyElement - The body element to disable scrolling on
  */
 export declare const disableBodyScrolling: (bodyElement: HTMLElement) => void;
@@ -15,6 +18,25 @@ export declare const disableBodyScrolling: (bodyElement: HTMLElement) => void;
  * Restores body scrolling by resetting overflow and padding-right to their
  * original values before scrolling was disabled
  *
+ * @remarks Prefer {@link releaseBodyScrollLock} in library code — pairing
+ * this directly with {@link disableBodyScrolling} corrupts scroll state
+ * when more than one overlay locks scrolling at the same time.
  * @param {HTMLElement} bodyElement - The body element to restore scrolling on
  */
 export declare const resetBodyScrolling: (bodyElement: HTMLElement) => void;
+/**
+ * Acquires a body scroll lock. The first acquisition disables scrolling;
+ * nested acquisitions only increment the count.
+ *
+ * @param {HTMLElement} bodyElement - The body element to lock scrolling on
+ * @returns {number} the lock count after acquiring
+ */
+export declare const acquireBodyScrollLock: (bodyElement: HTMLElement) => number;
+/**
+ * Releases a body scroll lock. Scrolling is restored only when the last
+ * holder releases. Releasing with no lock held is a no-op.
+ *
+ * @param {HTMLElement} bodyElement - The body element to unlock scrolling on
+ * @returns {number} the lock count after releasing
+ */
+export declare const releaseBodyScrollLock: (bodyElement: HTMLElement) => number;

package/dist/common/scrollbar.js

@@ -1,6 +1,7 @@
 import { hasAttribute, isRTL, setAttribute } from './dom.js';
 const SCROLLBAR_INITIAL_OVERFLOW = 'data-scrollbar-initial-overflow-value';
 const SCROLLBAR_INITIAL_PADDING = 'data-scrollbar-initial-padding-value';
+const SCROLLBAR_LOCK_COUNT = 'data-scrollbar-lock-count';
 /**
  * Calculates the width of the browser's scrollbar
  *
@@ -14,6 +15,9 @@ export const getScrollbarWidth = () => {
  * Disables body scrolling by setting overflow to hidden and
  * adjusting padding to prevent layout shift from scrollbar removal
  *
+ * @remarks Prefer {@link acquireBodyScrollLock} in library code — calling
+ * this directly is not safe when multiple overlays may lock scrolling at
+ * once, since a second call overwrites the saved "original" values.
  * @param {HTMLElement} bodyElement - The body element to disable scrolling on
  */
 export const disableBodyScrolling = (bodyElement) => {
@@ -33,6 +37,9 @@ export const disableBodyScrolling = (bodyElement) => {
  * Restores body scrolling by resetting overflow and padding-right to their
  * original values before scrolling was disabled
  *
+ * @remarks Prefer {@link releaseBodyScrollLock} in library code — pairing
+ * this directly with {@link disableBodyScrolling} corrupts scroll state
+ * when more than one overlay locks scrolling at the same time.
  * @param {HTMLElement} bodyElement - The body element to restore scrolling on
  */
 export const resetBodyScrolling = (bodyElement) => {
@@ -51,3 +58,40 @@ export const resetBodyScrolling = (bodyElement) => {
     bodyElement.removeAttribute(SCROLLBAR_INITIAL_OVERFLOW);
     bodyElement.removeAttribute(SCROLLBAR_INITIAL_PADDING);
 };
+/**
+ * Acquires a body scroll lock. The first acquisition disables scrolling;
+ * nested acquisitions only increment the count.
+ *
+ * @param {HTMLElement} bodyElement - The body element to lock scrolling on
+ * @returns {number} the lock count after acquiring
+ */
+export const acquireBodyScrollLock = (bodyElement) => {
+    const count = parseInt(bodyElement.getAttribute(SCROLLBAR_LOCK_COUNT) ?? '0', 10) + 1;
+    bodyElement.setAttribute(SCROLLBAR_LOCK_COUNT, `${count}`);
+    if (count === 1) {
+        disableBodyScrolling(bodyElement);
+    }
+    return count;
+};
+/**
+ * Releases a body scroll lock. Scrolling is restored only when the last
+ * holder releases. Releasing with no lock held is a no-op.
+ *
+ * @param {HTMLElement} bodyElement - The body element to unlock scrolling on
+ * @returns {number} the lock count after releasing
+ */
+export const releaseBodyScrollLock = (bodyElement) => {
+    const current = parseInt(bodyElement.getAttribute(SCROLLBAR_LOCK_COUNT) ?? '0', 10);
+    if (current <= 0) {
+        return 0;
+    }
+    const count = current - 1;
+    if (count === 0) {
+        bodyElement.removeAttribute(SCROLLBAR_LOCK_COUNT);
+        resetBodyScrolling(bodyElement);
+    }
+    else {
+        bodyElement.setAttribute(SCROLLBAR_LOCK_COUNT, `${count}`);
+    }
+    return count;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
     "author": "Wink, Inc.",
     "name": "@winkintel/bootstrap-svelte",
-    "version": "1.0.2",
+    "version": "1.0.4",
     "description": "Bootstrap components for Svelte 5 with TypeScript support.",
     "license": "Apache-2.0",
     "repository": {
@@ -54,7 +54,7 @@
         }
     },
     "peerDependencies": {
-        "svelte": "^5.0.0"
+        "svelte": "^5.29.0"
     },
     "dependencies": {
         "@popperjs/core": "~2.11.8",