@winkintel/bootstrap-svelte 1.0.4 → 1.0.6

package/dist/Pagination/pagination.svelte.js

@@ -1,4 +1,6 @@
 import { Context } from '../common/index.js';
+import { untrack } from 'svelte';
+import { SvelteSet } from 'svelte/reactivity';
 import { Pagination } from './index.js';
 /**
  * Manages the state for the Pagination root component.
@@ -8,13 +10,15 @@ import { Pagination } from './index.js';
 export class PaginationRootState {
     props;
     #activePaginationItemId = $state('');
-    #disabledPaginationItemId = $state('');
+    #disabledPaginationItemIds = new SvelteSet();
     constructor(props) {
         this.props = props;
         this.isPaginationItemActive = this.isPaginationItemActive.bind(this);
         this.setPaginationItemActive = this.setPaginationItemActive.bind(this);
+        this.removePaginationItemActive = this.removePaginationItemActive.bind(this);
         this.isPaginationItemDisabled = this.isPaginationItemDisabled.bind(this);
         this.setPaginationItemDisabled = this.setPaginationItemDisabled.bind(this);
+        this.removePaginationItemDisabled = this.removePaginationItemDisabled.bind(this);
     }
     isPaginationItemActive(itemId) {
         return this.#activePaginationItemId === itemId;
@@ -22,11 +26,29 @@ export class PaginationRootState {
     setPaginationItemActive(itemId) {
         this.#activePaginationItemId = itemId;
     }
+    removePaginationItemActive(itemId) {
+        untrack(() => {
+            if (this.#activePaginationItemId === itemId) {
+                this.#activePaginationItemId = '';
+            }
+        });
+    }
     isPaginationItemDisabled(itemId) {
-        return this.#disabledPaginationItemId === itemId;
+        return this.#disabledPaginationItemIds.has(itemId);
     }
     setPaginationItemDisabled(itemId) {
-        this.#disabledPaginationItemId = itemId;
+        untrack(() => {
+            if (itemId && !this.#disabledPaginationItemIds.has(itemId)) {
+                this.#disabledPaginationItemIds.add(itemId);
+            }
+        });
+    }
+    removePaginationItemDisabled(itemId) {
+        untrack(() => {
+            if (itemId && this.#disabledPaginationItemIds.has(itemId)) {
+                this.#disabledPaginationItemIds.delete(itemId);
+            }
+        });
     }
 }
 /**
@@ -37,17 +59,14 @@ export class PaginationRootState {
 export class PaginationItemState {
     props;
     root;
-    isActive = $derived.by(() => this.root.isPaginationItemActive(this.props.id || ''));
-    isDisabled = $derived.by(() => this.root.isPaginationItemDisabled(this.props.id || ''));
+    isActive = $derived.by(() => this.props.isActive || this.root.isPaginationItemActive(this.props.id || ''));
+    isDisabled = $derived.by(() => this.props.isDisabled || this.root.isPaginationItemDisabled(this.props.id || ''));
     constructor(props, root) {
         this.props = props;
         this.root = root;
         if (this.props.isActive) {
             this.root.setPaginationItemActive(this.props.id || '');
         }
-        if (this.props.isDisabled) {
-            this.root.setPaginationItemDisabled(this.props.id || '');
-        }
     }
 }
 /**
@@ -59,6 +78,7 @@ export class PaginationLinkState {
     props;
     root;
     item;
+    isDisabled = $derived.by(() => this.item.isDisabled || this.props.isDisabled);
     constructor(props, root, item) {
         this.props = props;
         this.root = root;

package/dist/Placeholder/placeholder-item.svelte

@@ -40,14 +40,19 @@ A component that represents an individual placeholder element.
 - `colorVariant` (string): Optional. Color variant for the placeholder ('primary', 'success', etc.).
 - `elementRef` (HTMLSpanElement): Optional. Reference to the placeholder item DOM element.
 - `id` (string): Optional. ID for the placeholder item element.
+- `isAnimated` (boolean): Deprecated compatibility no-op. Set `type` on `Placeholder.Root` to animate a placeholder group.
 - `size` ('xs' | 'sm' | 'lg'): Optional. Size of the placeholder.
-- `isAnimated` (boolean): Optional. Whether the placeholder should animate, defaults to true.
 -->
 <script lang="ts">import { uniqueClsx } from '../common/css.js';
 let { children, class: classValues, colorVariant, elementRef = $bindable(null), size, ...restOfProps } = $props();
+let sanitizedRestOfProps = $derived.by(() => {
+    // Keep accepting the legacy no-op without forwarding it as an invalid DOM attribute.
+    const { isAnimated: _isAnimated, ...sanitizedProps } = restOfProps;
+    return sanitizedProps;
+});
 let classes = $derived(uniqueClsx('placeholder', size && `placeholder-${size}`, colorVariant && `bg-${colorVariant}`, classValues));
 </script>
 
-<span bind:this={elementRef} class={classes} {...restOfProps}>
+<span bind:this={elementRef} class={classes} {...sanitizedRestOfProps}>
     {@render children?.()}
 </span>

package/dist/Placeholder/placeholder-item.svelte.d.ts

@@ -40,8 +40,8 @@ import type { Placeholder } from './index.js';
  * - `colorVariant` (string): Optional. Color variant for the placeholder ('primary', 'success', etc.).
  * - `elementRef` (HTMLSpanElement): Optional. Reference to the placeholder item DOM element.
  * - `id` (string): Optional. ID for the placeholder item element.
+ * - `isAnimated` (boolean): Deprecated compatibility no-op. Set `type` on `Placeholder.Root` to animate a placeholder group.
  * - `size` ('xs' | 'sm' | 'lg'): Optional. Size of the placeholder.
- * - `isAnimated` (boolean): Optional. Whether the placeholder should animate, defaults to true.
  */
 declare const PlaceholderItem: import("svelte").Component<Placeholder.ItemProps, {}, "elementRef">;
 type PlaceholderItem = ReturnType<typeof PlaceholderItem>;

package/dist/Placeholder/types.d.ts

@@ -7,6 +7,7 @@ export type PlaceholderRootProps = DivElement & {
 };
 export type PlaceholderItemProps = SpanElement & {
     colorVariant?: PlaceholderItemColorVariant;
+    /** @deprecated Placeholder animation belongs on Placeholder.Root. Retained as a no-op for compatibility. */
     isAnimated?: boolean;
     size?: PlaceholderItemSize;
 };

package/dist/Portal/portal.svelte

@@ -42,7 +42,12 @@ $effect(() => {
         return;
     }
     if (typeof target === 'string') {
-        element = document.querySelector(target);
+        try {
+            element = document.querySelector(target);
+        }
+        catch {
+            element = null;
+        }
     }
     else {
         element = target;

package/dist/Progress/progress-bar.svelte

@@ -36,7 +36,7 @@ Supports percentage-based progress visualization with customizable styling, them
 -->
 <script lang="ts">import { fromStyle, toStyle, uniqueClsx } from '../common/css.js';
 import { initProgressState, ProgressState } from './progress.svelte.js';
-let { ariaLabel = 'Progress Bar', backgroundColorVariant, children, class: classValues, barProps = {}, elementRef = $bindable(null), style, valueMax = 100, valueMin = 0, valueNow = 0, ...restOfProps } = $props();
+let { 'aria-label': nativeAriaLabel, ariaLabel, backgroundColorVariant, children, class: classValues, barProps = {}, elementRef = $bindable(null), style, valueMax = 100, valueMin = 0, valueNow = 0, ...restOfProps } = $props();
 let { class: barClassValues, isAnimated = false, isStriped = false, style: barStyle, ...restOfBarProps } = $derived(barProps);
 // Initialize state and detect if this progress bar is part of a stacked container
 const barState = initProgressState({
@@ -47,6 +47,19 @@ const barState = initProgressState({
 // Determine where to apply width - when in a stacked layout, width is on the root element,
 // otherwise it's applied to the inner bar element
 let widthPlacement = $derived(barState.isStacked ? 'root' : 'bar');
+let resolvedAriaLabel = $derived(ariaLabel ?? nativeAriaLabel ?? 'Progress Bar');
+let normalizedProgress = $derived.by(() => {
+    if (!Number.isFinite(valueNow) || !Number.isFinite(valueMin) || !Number.isFinite(valueMax) || valueMax <= valueMin) {
+        return { max: 100, min: 0, now: 0, width: 0 };
+    }
+    const now = Math.min(Math.max(valueNow, valueMin), valueMax);
+    return {
+        max: valueMax,
+        min: valueMin,
+        now,
+        width: ((now - valueMin) / (valueMax - valueMin)) * 100
+    };
+});
 // Root element...
 let classes = $derived(uniqueClsx('progress', classValues));
 // Conditionally apply width to the root element's style if this bar is part of a stacked layout
@@ -55,7 +68,7 @@ let styles = $derived.by(() => {
         let cssProps = fromStyle(style);
         return toStyle({
             ...cssProps,
-            width: `${valueNow}%`
+            width: `${normalizedProgress.width}%`
         });
     }
     return style;
@@ -72,7 +85,7 @@ let barStyles = $derived.by(() => {
         let cssProps = fromStyle(barStyle);
         return toStyle({
             ...cssProps,
-            width: `${valueNow}%`
+            width: `${normalizedProgress.width}%`
         });
     }
     return barStyle;
@@ -86,15 +99,15 @@ let theme = $derived.by(() => {
 </script>
 
 <div
-    aria-label={ariaLabel}
-    aria-valuemax={valueMax}
-    aria-valuemin={valueMin}
-    aria-valuenow={valueNow}
+    {...restOfProps}
+    aria-label={resolvedAriaLabel}
+    aria-valuemax={normalizedProgress.max}
+    aria-valuemin={normalizedProgress.min}
+    aria-valuenow={normalizedProgress.now}
     bind:this={elementRef}
     class={classes}
     role="progressbar"
-    style={styles}
-    {...restOfProps}>
+    style={styles}>
     <div class={barClasses} data-bs-theme={theme} style={barStyles} {...restOfBarProps}>
         {@render children?.()}
     </div>

package/dist/Row/row.svelte

@@ -43,25 +43,24 @@ A component that implements Bootstrap's grid row functionality.
 -->
 <script lang="ts">import { uniqueClsx } from '../common/css.js';
 let { children, class: classValues, cols, elementRef = $bindable(null), ...restOfProps } = $props();
+const breakpoints = new Set(['xs', 'sm', 'md', 'lg', 'xl', 'xxl']);
+const isRowColsValue = (value) => value === 'auto' || (typeof value === 'number' && Number.isInteger(value) && value >= 1 && value <= 6);
 // Generate cols classes based on the cols prop
 let colsClasses = $derived.by(() => {
     // If cols is  a string (e.g., 'auto'), return a single row-cols-auto class
-    if (typeof cols === 'string' && cols === 'auto') {
-        return [`row-cols-${cols}`];
-    }
-    // If cols is a number (OneToSix type), generate a simple row-cols-n class
-    if (typeof cols === 'number') {
+    if (isRowColsValue(cols)) {
         return [`row-cols-${cols}`];
     }
     // If cols is an object (RowColsMap type), generate breakpoint-specific classes
     else if (cols && typeof cols === 'object') {
-        return Object.entries(cols).map(([breakpoint, value]) => {
-            // If the breakpoint is 'xs', return 'row-col-{value}'
+        return Object.entries(cols).flatMap(([breakpoint, value]) => {
+            if (!breakpoints.has(breakpoint) || !isRowColsValue(value)) {
+                return [];
+            }
             if (breakpoint === 'xs') {
-                return `row-col-${value}`;
+                return [`row-cols-${value}`];
             }
-            // Otherwise, return 'row-cols-{breakpoint}-{value}'
-            return `row-cols-${breakpoint}-${value}`;
+            return [`row-cols-${breakpoint}-${value}`];
         });
     }
     // Default: no row-cols classes

package/dist/Row/types.d.ts

@@ -1,12 +1,13 @@
 import type { DivElement, OneToSix } from '../common/types.js';
+export type RowColsValue = OneToSix | 'auto';
 export type RowColsMap = {
-    xs?: OneToSix;
-    sm?: OneToSix;
-    md?: OneToSix;
-    lg?: OneToSix;
-    xl?: OneToSix;
-    xxl?: OneToSix;
+    xs?: RowColsValue;
+    sm?: RowColsValue;
+    md?: RowColsValue;
+    lg?: RowColsValue;
+    xl?: RowColsValue;
+    xxl?: RowColsValue;
 };
 export type RowRootProps = DivElement & {
-    cols?: RowColsMap | OneToSix | 'auto';
+    cols?: RowColsMap | RowColsValue;
 };

package/dist/Scrollspy/scrollspy-attachment.svelte.js

@@ -1,5 +1,20 @@
 import { isDisabled } from '../common/dom.js';
-import { SvelteMap } from 'svelte/reactivity';
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+function resolveHashTarget(hash) {
+    const rawId = hash.startsWith('#') ? hash.slice(1) : hash;
+    if (!rawId) {
+        return null;
+    }
+    let decodedId = rawId;
+    try {
+        decodedId = decodeURIComponent(rawId);
+    }
+    catch {
+        // A literal percent sequence can be a valid element ID even when it is
+        // not a valid URI escape. Fall back to the exact fragment text.
+    }
+    return document.getElementById(decodedId) ?? (decodedId === rawId ? null : document.getElementById(rawId));
+}
 /**
  * Creates a scrollspy attachment that monitors elements matching a target selector
  * and triggers a callback when they intersect with the scrolling container.
@@ -20,14 +35,26 @@ export function scrollspy(options) {
             throw new Error('Scrollspy: callback must be a function');
         }
         // Get the target element from options targetSelector...
-        const targetElement = document.querySelector(options.targetSelector);
+        let targetElement;
+        try {
+            targetElement = document.querySelector(options.targetSelector);
+        }
+        catch {
+            throw new Error(`Scrollspy: invalid target selector "${options.targetSelector}"`);
+        }
         if (!targetElement) {
             throw new Error(`Scrollspy: target element not found for selector "${options.targetSelector}"`);
         }
+        const observerOptions = {
+            root: element,
+            rootMargin: '0px 0px -25%',
+            threshold: [0.1, 0.5, 1],
+            ...options.observerOptions
+        };
         // Smooth scroll functionality
         const handleClick = (event) => {
             const target = event.target;
-            if (!(target instanceof HTMLElement)) {
+            if (!(target instanceof Element)) {
                 return;
             }
             // Only handle clicks on anchor links with hash
@@ -36,32 +63,32 @@ export function scrollspy(options) {
                 return;
             }
             // Find the target element that corresponds to the clicked link's hash
-            const targetElement = element.querySelector(anchor.hash);
-            if (targetElement) {
+            const targetElement = resolveHashTarget(anchor.hash);
+            if (targetElement && element.contains(targetElement)) {
                 event.preventDefault();
-                // Get the scroll container (root element or window)
-                const root = options.observerOptions?.root || element;
+                // A null observer root represents the viewport/window.
+                const root = observerOptions.root;
+                const scrollContainer = root instanceof HTMLElement ? root : null;
                 // Calculate the scroll position
                 const elementRect = targetElement.getBoundingClientRect();
-                const containerRect = root.getBoundingClientRect();
                 let scrollTop;
-                if (root === element || root instanceof HTMLElement) {
+                if (scrollContainer) {
                     // Scrolling within a container element
                     // Cast targetElement to HTMLElement to use offsetTop
                     scrollTop = targetElement.offsetTop - element.offsetTop;
                 }
                 else {
                     // Scrolling the window
-                    scrollTop = elementRect.top + window.pageYOffset - containerRect.top;
+                    scrollTop = elementRect.top + window.pageYOffset;
                 }
                 // Perform smooth scroll
-                if (root === element || root instanceof HTMLElement) {
-                    if (root.scrollTo) {
-                        root.scrollTo({ top: scrollTop, behavior: 'smooth' });
+                if (scrollContainer) {
+                    if (scrollContainer.scrollTo) {
+                        scrollContainer.scrollTo({ top: scrollTop, behavior: 'smooth' });
                     }
                     else {
                         // Fallback for older browsers
-                        root.scrollTop = scrollTop;
+                        scrollContainer.scrollTop = scrollTop;
                     }
                 }
                 else {
@@ -78,7 +105,7 @@ export function scrollspy(options) {
             }
         };
         // Maps to store links and their target sections
-        const targetLinks = new SvelteMap();
+        const targetLinks = new SvelteSet();
         const observableSections = new SvelteMap();
         // Find all the anchor links within the target element...
         const anchors = targetElement.querySelectorAll('[href]');
@@ -87,24 +114,16 @@ export function scrollspy(options) {
             if (!anchor.hash || ['#', '#!'].includes(anchor.hash) || isDisabled(anchor)) {
                 continue;
             }
-            const observableSection = document.querySelector(decodeURI(anchor.hash));
-            if (observableSection !== null) {
-                targetLinks.set(decodeURI(anchor.hash), anchor);
+            const observableSection = resolveHashTarget(anchor.hash);
+            if (observableSection !== null && element.contains(observableSection)) {
+                targetLinks.add(anchor);
                 observableSections.set(anchor.hash, observableSection);
                 // attach the click handler to the anchor
                 anchor.addEventListener('click', handleClick);
             }
         }
-        // Set default options for the IntersectionObserver...
-        const defaultBootstrapObserverOptions = {
-            root: element,
-            rootMargin: '0px 0px -25%',
-            threshold: [0.1, 0.5, 1]
-        };
-        // Ensure observerOptions exists, create it if it doesn't
-        options.observerOptions = { ...defaultBootstrapObserverOptions, ...options.observerOptions };
         // Create an IntersectionObserver that will invoke the callback when targets intersect
-        const observer = new IntersectionObserver(options.callback, options.observerOptions);
+        const observer = new IntersectionObserver(options.callback, observerOptions);
         // Start observing each target element for intersection events
         for (const section of observableSections.values()) {
             observer.observe(section);
@@ -112,7 +131,7 @@ export function scrollspy(options) {
         // Return cleanup function that will be called when the attachment is removed
         return () => {
             // Remove click event listener
-            for (const anchor of targetLinks.values()) {
+            for (const anchor of targetLinks) {
                 anchor.removeEventListener('click', handleClick);
             }
             // Disconnect the observer to prevent memory leaks

package/dist/Tooltip/tooltip.svelte

@@ -66,6 +66,9 @@ let previousTrigger = unset;
 let popperInstance = null;
 let popperPlacement = $state('');
 let referenceElement = $state(null);
+let isClickActive = $state(false);
+let isHovering = $state(false);
+let isFocusing = $state(false);
 let currentPopperPlacement = $derived(popperPlacement || effectivePlacement || 'top');
 let triggers = $derived.by(() => effectiveTrigger.split(' ')); // support space-delimited list of triggers
 let classes = $derived(uniqueClsx(type, {
@@ -78,14 +81,41 @@ let classes = $derived(uniqueClsx(type, {
     show: isShown
 }, classValues));
 // Operations...
-const hide = () => (isShown = false);
 const show = () => (isShown = true);
+const hide = () => (isShown = false);
+const hideWhenInactive = () => {
+    if (!isClickActive && !isHovering && !isFocusing) {
+        hide();
+    }
+};
 const toggle = () => {
     if (triggers.includes('focus') && hasFocus(referenceElement)) {
         // If the reference element is focused, we don't want to toggle the tooltip
         return;
     }
-    isShown = !isShown;
+    isClickActive = !isClickActive;
+    if (isClickActive) {
+        show();
+    }
+    else {
+        hideWhenInactive();
+    }
+};
+const handleMouseEnter = () => {
+    isHovering = true;
+    show();
+};
+const handleMouseLeave = () => {
+    isHovering = false;
+    hideWhenInactive();
+};
+const handleFocusIn = () => {
+    isFocusing = true;
+    show();
+};
+const handleFocusOut = () => {
+    isFocusing = false;
+    hideWhenInactive();
 };
 const addEventListeners = () => {
     if (!referenceElement) {
@@ -98,12 +128,12 @@ const addEventListeners = () => {
         referenceElement.addEventListener('click', toggle);
     }
     if (triggers.includes('hover')) {
-        referenceElement.addEventListener('mouseenter', show);
-        referenceElement.addEventListener('mouseleave', hide);
+        referenceElement.addEventListener('mouseenter', handleMouseEnter);
+        referenceElement.addEventListener('mouseleave', handleMouseLeave);
     }
     if (triggers.includes('focus')) {
-        referenceElement.addEventListener('focusin', show);
-        referenceElement.addEventListener('focusout', hide);
+        referenceElement.addEventListener('focusin', handleFocusIn);
+        referenceElement.addEventListener('focusout', handleFocusOut);
     }
 };
 const destroyPopper = () => {
@@ -118,10 +148,26 @@ const removeEventListeners = () => {
         return;
     }
     referenceElement.removeEventListener('click', toggle);
-    referenceElement.removeEventListener('mouseenter', show);
-    referenceElement.removeEventListener('mouseleave', hide);
-    referenceElement.removeEventListener('focusin', show);
-    referenceElement.removeEventListener('focusout', hide);
+    referenceElement.removeEventListener('mouseenter', handleMouseEnter);
+    referenceElement.removeEventListener('mouseleave', handleMouseLeave);
+    referenceElement.removeEventListener('focusin', handleFocusIn);
+    referenceElement.removeEventListener('focusout', handleFocusOut);
+};
+const reconcileTriggerActivity = () => {
+    isClickActive = triggers.includes('click') && isClickActive;
+    isHovering = triggers.includes('hover') && !!referenceElement?.matches(':hover');
+    if (triggers.includes('focus')) {
+        isFocusing = hasFocus(referenceElement);
+    }
+    else {
+        isFocusing = false;
+    }
+    if (isClickActive || isHovering || isFocusing) {
+        show();
+    }
+    else {
+        hide();
+    }
 };
 // Event listeners...
 const handleOnHidden = (event) => {
@@ -149,6 +195,7 @@ onMount(() => {
 $effect(() => {
     if (previousTrigger !== unset && previousTrigger !== effectiveTrigger) {
         removeEventListeners();
+        reconcileTriggerActivity();
         addEventListeners();
     }
     previousTrigger = effectiveTrigger;