@winkintel/bootstrap-svelte 1.0.5 → 1.0.7

package/dist/Modal/modal.svelte

@@ -48,16 +48,21 @@ Add dialogs to your site for lightboxes, user notifications, or completely custo
 - `useFade` (boolean): Optional. Controls whether the modal uses a fade transition.
 -->
 <script lang="ts">import { acquireBodyScrollLock, noop, releaseBodyScrollLock, uniqueClsx } from '../common/index.js';
+import { focusTopOverlay, isFocusInTopOverlay, isTopOverlay, registerOverlay, unregisterOverlay } from '../common/overlay-stack.js';
 import { Portal } from '../index.js';
 import { onDestroy, onMount, tick } from 'svelte';
 import { fade, fly } from 'svelte/transition';
-import { initModalRootState, ModalRootState } from './modal.svelte.js';
+import { acquireModalOpenClass, initModalRootState, ModalRootState, releaseModalOpenClass } from './modal.svelte.js';
 // Generate a unique ID for the modal element, in case one is not provided...
 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 holdsModalOpenClass = false;
 let holdsScrollLock = false;
+let hidePreventedTimeout;
+let overlayZIndex = $state(undefined);
+let backdropZIndex = $state(undefined);
 let previouslyFocusedElement = null;
 const unset = Symbol('unset');
 let previousIsShown = unset;
@@ -71,6 +76,17 @@ const rootState = initModalRootState({
         return useBackdrop;
     }
 });
+const overlayEntry = {
+    baseBackdropZIndex: 1050,
+    baseOverlayZIndex: 1055,
+    containsActiveElement: () => !!elementRef?.contains(document.activeElement),
+    focus: focusModal,
+    onKeydown: handleKeydown,
+    setLayers: (nextOverlayZIndex, nextBackdropZIndex) => {
+        overlayZIndex = nextOverlayZIndex;
+        backdropZIndex = nextBackdropZIndex;
+    }
+};
 // Derived classes for the modal component...
 let isHidePrevented = $state(false);
 let backDropClasses = $derived(uniqueClsx('modal-backdrop', { fade: useFade, show: rootState.isShown }));
@@ -106,11 +122,19 @@ $effect(() => {
 });
 $effect(() => {
     if (rootState.isShown && !previousRootIsShown) {
+        registerOverlay(overlayEntry);
         previouslyFocusedElement = document.activeElement instanceof HTMLElement ? document.activeElement : null;
         focusModal();
     }
     else if (!rootState.isShown && previousRootIsShown) {
-        restoreFocus();
+        const wasTopOverlay = isTopOverlay(overlayEntry);
+        unregisterOverlay(overlayEntry);
+        if (wasTopOverlay) {
+            restoreFocus();
+            if (!isFocusInTopOverlay()) {
+                focusTopOverlay();
+            }
+        }
     }
     previousRootIsShown = rootState.isShown;
 });
@@ -120,17 +144,21 @@ const handleOnShow = (event) => {
             acquireBodyScrollLock(bodyElement);
             holdsScrollLock = true;
         }
-        bodyElement.classList.add('modal-open');
+        if (!holdsModalOpenClass) {
+            acquireModalOpenClass(bodyElement);
+            holdsModalOpenClass = true;
+        }
     }
     onShow(event);
 };
 const handleOnHidden = (event) => {
+    if (bodyElement && holdsModalOpenClass) {
+        releaseModalOpenClass(bodyElement);
+        holdsModalOpenClass = false;
+    }
     if (bodyElement && holdsScrollLock) {
-        const remainingLocks = releaseBodyScrollLock(bodyElement);
+        releaseBodyScrollLock(bodyElement);
         holdsScrollLock = false;
-        if (remainingLocks === 0) {
-            bodyElement.classList.remove('modal-open');
-        }
     }
     onHidden(event);
 };
@@ -152,12 +180,28 @@ function getFocusableElements() {
         return [];
     return Array.from(elementRef.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter((element) => !element.hasAttribute('disabled') && element.getAttribute('aria-hidden') !== 'true');
 }
+function triggerHidePrevented(event) {
+    onHidePrevented(event);
+    isHidePrevented = true;
+    if (hidePreventedTimeout) {
+        clearTimeout(hidePreventedTimeout);
+    }
+    hidePreventedTimeout = setTimeout(() => {
+        isHidePrevented = false;
+        hidePreventedTimeout = undefined;
+    }, 300);
+}
 function trapFocus(event) {
     const focusableElements = getFocusableElements();
     const firstElement = focusableElements[0] ?? elementRef;
     const lastElement = focusableElements[focusableElements.length - 1] ?? elementRef;
     if (!firstElement || !lastElement)
         return;
+    if (!elementRef?.contains(document.activeElement)) {
+        event.preventDefault();
+        (event.shiftKey ? lastElement : firstElement).focus();
+        return;
+    }
     if (event.shiftKey && document.activeElement === firstElement) {
         event.preventDefault();
         lastElement.focus();
@@ -176,12 +220,24 @@ onMount(() => {
 // 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(() => {
+    const wasTopOverlay = isTopOverlay(overlayEntry);
+    unregisterOverlay(overlayEntry);
+    if (wasTopOverlay) {
+        restoreFocus();
+        if (!isFocusInTopOverlay()) {
+            focusTopOverlay();
+        }
+    }
+    if (hidePreventedTimeout) {
+        clearTimeout(hidePreventedTimeout);
+    }
+    if (holdsModalOpenClass && bodyElement) {
+        releaseModalOpenClass(bodyElement);
+        holdsModalOpenClass = false;
+    }
     if (holdsScrollLock && bodyElement) {
-        const remainingLocks = releaseBodyScrollLock(bodyElement);
+        releaseBodyScrollLock(bodyElement);
         holdsScrollLock = false;
-        if (remainingLocks === 0) {
-            bodyElement.classList.remove('modal-open');
-        }
     }
 });
 // Dismiss the modal when the backdrop is clicked...
@@ -194,11 +250,7 @@ const handleBackdropMouseDown = (event) => {
     }
     if (rootState.isShown && useBackdrop === 'static') {
         event.stopPropagation();
-        onHidePrevented(event);
-        isHidePrevented = true;
-        setTimeout(() => {
-            isHidePrevented = false;
-        }, 300);
+        triggerHidePrevented(event);
         return;
     }
     if (rootState.isShown && useBackdrop !== 'static') {
@@ -207,22 +259,24 @@ const handleBackdropMouseDown = (event) => {
     }
 };
 // Handle keyboard events to dismiss modal on Escape key press
-const handleKeydown = (event) => {
-    const keyboardEvent = event;
+function handleKeydown(event) {
     if (!rootState.isShown)
         return;
-    if (keyboardEvent.key === 'Tab') {
-        trapFocus(keyboardEvent);
+    if (event.key === 'Tab') {
+        trapFocus(event);
         return;
     }
-    if (rootState.isShown && isKeyboardDismissible && keyboardEvent.key === 'Escape') {
-        rootState.toggleIsShown();
+    if (event.key === 'Escape') {
+        if (isKeyboardDismissible) {
+            rootState.toggleIsShown();
+        }
+        else {
+            triggerHidePrevented(event);
+        }
     }
-};
+}
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
-
 {#if rootState.isShown}
     <div
         aria-labelledby={rootState.titleId}
@@ -231,6 +285,7 @@ const handleKeydown = (event) => {
         class={classes}
         {id}
         role="dialog"
+        style:z-index={overlayZIndex}
         tabindex={isFocusable ? -1 : undefined}
         onmousedown={handleBackdropMouseDown}
         onintrostart={handleOnShow}
@@ -245,7 +300,12 @@ const handleKeydown = (event) => {
 
 <Portal target="body">
     {#if rootState.isBackdropShown}
-        <div class={backDropClasses} onmousedown={handleBackdropMouseDown} role="presentation" transition:fade={{ duration: useFade ? 150 : 0 }}>
+        <div
+            class={backDropClasses}
+            onmousedown={handleBackdropMouseDown}
+            role="presentation"
+            style:z-index={backdropZIndex}
+            transition:fade={{ duration: useFade ? 150 : 0 }}>
         </div>
     {/if}
 </Portal>

package/dist/Modal/modal.svelte.js

@@ -58,6 +58,21 @@ export class ModalHeaderState {
     }
 }
 const ModalRootContext = new Context('modal-root');
+const modalOpenCounts = new WeakMap();
+export function acquireModalOpenClass(bodyElement) {
+    const count = (modalOpenCounts.get(bodyElement) ?? 0) + 1;
+    modalOpenCounts.set(bodyElement, count);
+    bodyElement.classList.add('modal-open');
+}
+export function releaseModalOpenClass(bodyElement) {
+    const count = modalOpenCounts.get(bodyElement) ?? 0;
+    if (count <= 1) {
+        modalOpenCounts.delete(bodyElement);
+        bodyElement.classList.remove('modal-open');
+        return;
+    }
+    modalOpenCounts.set(bodyElement, count - 1);
+}
 /**
  * Creates a new ModalRootState and sets it in the ModalRootContext.
  * This is used to manage the state of the Modal component and its children.

package/dist/Nav/nav-link.svelte

@@ -22,7 +22,7 @@ import { initNavLinkState, NavLinkState } from '../common/nav-tab.svelte.js';
 import { noop } from '../common/noop.js';
 // Generate a unique ID for the link, in case one is not provided...
 const uid = $props.id();
-let { children, class: classValues, elementRef = $bindable(null), href = '#!', id = `nav-link-${uid}`, isActive, isDisabled = false, onclick = noop, role, ...restOfProps } = $props();
+let { 'aria-controls': ariaControls, 'aria-current': ariaCurrent, 'aria-disabled': ariaDisabled, 'aria-selected': ariaSelected, children, class: classValues, elementRef = $bindable(null), href = '#!', id = `nav-link-${uid}`, isActive, isDisabled = false, onclick = noop, role, tabindex: consumerTabIndex, ...restOfProps } = $props();
 const linkState = initNavLinkState({
     get href() {
         return href;
@@ -40,6 +40,10 @@ let defaultRole = $derived(linkState.isTab ? 'tab' : role);
 let isActiveState = $derived(isActive !== undefined ? isActive : linkState.isActive);
 let classes = $derived(uniqueClsx('nav-link', { active: isActiveState, disabled: isDisabled }, classValues));
 const handleClick = (event) => {
+    if (isDisabled) {
+        event.preventDefault();
+        return;
+    }
     linkState.onclick(event);
     onclick(event);
 };
@@ -61,17 +65,17 @@ $effect(() => {
 </script>
 
 <a
-    aria-controls={linkState.ariaControls}
-    aria-current={isActiveState ? 'page' : undefined}
-    aria-disabled={isDisabled ? 'true' : undefined}
-    aria-selected={linkState.isTab ? isActiveState : undefined}
+    {...restOfProps}
+    aria-controls={linkState.ariaControls ?? ariaControls}
+    aria-current={isActiveState ? 'page' : ariaCurrent}
+    aria-disabled={isDisabled ? 'true' : ariaDisabled}
+    aria-selected={linkState.isTab ? isActiveState : ariaSelected}
     bind:this={elementRef}
     class={classes}
     {href}
     {id}
     onclick={handleClick}
-    tabindex={isDisabled ? -1 : undefined}
-    role={defaultRole}
-    {...restOfProps}>
+    tabindex={isDisabled ? -1 : consumerTabIndex}
+    role={defaultRole}>
     {@render children?.()}
 </a>

package/dist/Navbar/navbar-collapse.svelte

@@ -44,7 +44,7 @@ Collapsible container for navbar content that toggles when the navbar toggler is
 - `children`: Optional. Content to render inside the collapsible container.
 - `class` (string): Optional. Additional CSS classes to apply to the container.
 - `elementRef` (HTMLElement): Optional. Reference to the DOM element.
-- `id` (string): Optional. Unique ID for the container. Defaults to `navbar-collapse-{uid}`.
+- `id` (string): Optional. Unique ID for the container. Defaults to `{navbar-id}-collapse`.
 - `onCollapse` (function): Optional. Handler called when the container starts collapsing.
 - `onCollapsed` (function): Optional. Handler called when the container has finished collapsing.
 - `onExpand` (function): Optional. Handler called when the container starts expanding.
@@ -53,17 +53,18 @@ Collapsible container for navbar content that toggles when the navbar toggler is
 <script lang="ts">import { noop, uniqueClsx } from '../common/index.js';
 import { initNavbarCollapseState, NavbarCollapseState } from '../common/navbar-offcanvas.svelte.js';
 import { Collapse } from '../index.js';
-// Generate a unique ID for the component, in case one is not provided...
-const uid = $props.id();
-let { children, class: classValues, elementRef = $bindable(null), id = `navbar-collapse-${uid}`, onCollapse: _onCollapse = noop, onCollapsed = noop, onExpand: _onExpand = noop, onExpanded: _onExpanded = noop, ...restOfProps } = $props();
+let { children, class: classValues, elementRef = $bindable(null), id: providedId, onCollapse = noop, onCollapsed = noop, onExpand = noop, onExpanded = noop, transitionDuration: transitionDurationOverride, ...restOfProps } = $props();
 const collapseState = initNavbarCollapseState({
     get id() {
-        return id;
+        return providedId;
     }
 });
 let classes = $derived(uniqueClsx('navbar-collapse', classValues));
-let transitionDuration = $derived(collapseState.root.transitionDuration);
+let transitionDuration = $derived(transitionDurationOverride ?? collapseState.root.transitionDuration);
 let isExpandedState = $derived(collapseState.isExpanded);
+$effect(() => {
+    collapseState.root.ariaControls = collapseState.id;
+});
 function handleOnCollapsed(event) {
     // This will ensure that not transition animation will occur when the Navbar is expanded...
     collapseState.root.transitionDuration = 0;
@@ -71,6 +72,16 @@ function handleOnCollapsed(event) {
 }
 </script>
 
-<Collapse bind:elementRef class={classes} {id} isExpanded={isExpandedState} {transitionDuration} onCollapsed={handleOnCollapsed} {...restOfProps}>
+<Collapse
+    {...restOfProps}
+    bind:elementRef
+    class={classes}
+    id={collapseState.id}
+    isExpanded={isExpandedState}
+    {transitionDuration}
+    {onCollapse}
+    onCollapsed={handleOnCollapsed}
+    {onExpand}
+    {onExpanded}>
     {@render children?.()}
 </Collapse>

package/dist/Navbar/navbar-collapse.svelte.d.ts

@@ -44,7 +44,7 @@ import type { Navbar } from './index.js';
  * - `children`: Optional. Content to render inside the collapsible container.
  * - `class` (string): Optional. Additional CSS classes to apply to the container.
  * - `elementRef` (HTMLElement): Optional. Reference to the DOM element.
- * - `id` (string): Optional. Unique ID for the container. Defaults to `navbar-collapse-{uid}`.
+ * - `id` (string): Optional. Unique ID for the container. Defaults to `{navbar-id}-collapse`.
  * - `onCollapse` (function): Optional. Handler called when the container starts collapsing.
  * - `onCollapsed` (function): Optional. Handler called when the container has finished collapsing.
  * - `onExpand` (function): Optional. Handler called when the container starts expanding.

package/dist/Navbar/navbar-nav.svelte

@@ -58,7 +58,7 @@ const _rootState = initNavRootState({
         return id;
     }
 });
-let classes = $derived(uniqueClsx('navbar-nav', { 'navbar-scrolling': isVerticalScrolling }, classValues));
+let classes = $derived(uniqueClsx('navbar-nav', { 'navbar-nav-scroll': isVerticalScrolling }, classValues));
 </script>
 
 <ul bind:this={elementRef} class={classes} {id} {...restOfProps}>

package/dist/Navbar/navbar-toggler.svelte

@@ -41,35 +41,37 @@ Toggle button for collapsible navbar content. Controls the expansion/collapse of
 - `class` (string): Optional. Additional CSS classes to apply to the toggle button.
 - `elementRef` (HTMLButtonElement): Optional. Reference to the DOM button element.
 - `id` (string): Optional. Unique ID for the toggle button. Defaults to `navbar-toggler-{uid}`.
-- `type` (string): Optional. Button type attribute.
+- `type` ('button'): Optional compatibility prop. The toggler always renders `type="button"`.
 -->
-<script lang="ts">import { uniqueClsx } from '../common/index.js';
+<script lang="ts">import { noop, uniqueClsx } from '../common/index.js';
 import { initNavbarTogglerState, NavbarTogglerState } from '../common/navbar-offcanvas.svelte.js';
 // Generate a unique ID for the component, in case one is not provided...
 const uid = $props.id();
-let { ariaLabel = 'Toggle navigation', children, class: classValues, elementRef = $bindable(null), id = `navbar-toggler-${uid}`, type: _type, ...restOfProps } = $props();
+let { 'aria-controls': consumerAriaControls, 'aria-expanded': _consumerAriaExpanded, 'aria-label': nativeAriaLabel, ariaLabel, children, class: classValues, elementRef = $bindable(null), id = `navbar-toggler-${uid}`, onclick = noop, type: _type, ...restOfProps } = $props();
 const togglerState = initNavbarTogglerState({
     get id() {
         return id;
     }
 });
-let ariaControls = $derived(togglerState.root.ariaControls);
+let ariaControls = $derived(consumerAriaControls ?? togglerState.root.ariaControls);
+let resolvedAriaLabel = $derived(ariaLabel ?? nativeAriaLabel ?? 'Toggle navigation');
 let isExpanded = $derived(togglerState.isExpanded);
 let classes = $derived(uniqueClsx('navbar-toggler', { collapsed: !isExpanded }, classValues));
 const handleClick = (_event) => {
     togglerState.onclick();
+    onclick?.(_event);
 };
 </script>
 
 <button
+    {...restOfProps}
     aria-controls={ariaControls}
     aria-expanded={isExpanded}
-    aria-label={ariaLabel}
+    aria-label={resolvedAriaLabel}
     bind:this={elementRef}
     class={classes}
     {id}
     onclick={handleClick}
-    type="button"
-    {...restOfProps}>
+    type="button">
     {@render children?.()}
 </button>

package/dist/Navbar/navbar-toggler.svelte.d.ts

@@ -41,7 +41,7 @@ import type { Navbar } from './index.js';
  * - `class` (string): Optional. Additional CSS classes to apply to the toggle button.
  * - `elementRef` (HTMLButtonElement): Optional. Reference to the DOM button element.
  * - `id` (string): Optional. Unique ID for the toggle button. Defaults to `navbar-toggler-{uid}`.
- * - `type` (string): Optional. Button type attribute.
+ * - `type` ('button'): Optional compatibility prop. The toggler always renders `type="button"`.
  */
 declare const NavbarToggler: import("svelte").Component<Navbar.TogglerProps, {}, "elementRef">;
 type NavbarToggler = ReturnType<typeof NavbarToggler>;

package/dist/Navbar/types.d.ts

@@ -17,7 +17,8 @@ export type NavbarNavProps = UListElement & {
 };
 export type NavbarTextProps = DivElement;
 export type NavbarTogglerIconProps = SpanElement;
-export type NavbarTogglerProps = ButtonElement & {
+export type NavbarTogglerProps = Omit<ButtonElement, 'type'> & {
     ariaLabel?: string;
-    type?: HTMLButtonElement['type'];
+    /** Retained for compatibility; Navbar.Toggler always renders a non-submitting button. */
+    type?: 'button';
 };

package/dist/Offcanvas/offcanvas.svelte

@@ -58,6 +58,7 @@ 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 { isTopOverlay, registerOverlay, unregisterOverlay } from '../common/overlay-stack.js';
 import { acquireBodyScrollLock, releaseBodyScrollLock } from '../common/scrollbar.js';
 import { onDestroy, onMount, tick } from 'svelte';
 import { fade, fly } from 'svelte/transition';
@@ -67,8 +68,11 @@ let { children, class: classValues, dir = 'ltr', elementRef = $bindable(null), i
 // Initialize the root state of the offcanvas component...
 let bodyElement = $state(null);
 let holdsScrollLock = false;
+let overlayZIndex = $state(undefined);
+let backdropZIndex = $state(undefined);
 const unset = Symbol('unset');
 let previousIsShown = unset;
+let previousRootIsOverlayShown = false;
 let previousShowOnBreakpoint = unset;
 let previousUseBackdrop = unset;
 const rootState = initOffcanvasRootState({
@@ -85,6 +89,15 @@ const rootState = initOffcanvasRootState({
         return useBackdrop;
     }
 });
+const overlayEntry = {
+    baseBackdropZIndex: 1040,
+    baseOverlayZIndex: 1045,
+    onKeydown: handleKeydown,
+    setLayers: (nextOverlayZIndex, nextBackdropZIndex) => {
+        overlayZIndex = nextOverlayZIndex;
+        backdropZIndex = nextBackdropZIndex;
+    }
+};
 // Set up the derived state for the offcanvas component...
 let flyX = $derived.by(() => {
     if (placement === 'start' && dir === 'ltr')
@@ -144,6 +157,16 @@ $effect(() => {
     }
     previousShowOnBreakpoint = showOnBreakpoint;
 });
+$effect(() => {
+    const isOverlayShown = rootState.isShown && !rootState.isMediaQueryMatched;
+    if (isOverlayShown && !previousRootIsOverlayShown) {
+        registerOverlay(overlayEntry);
+    }
+    else if (!isOverlayShown && previousRootIsOverlayShown) {
+        unregisterOverlay(overlayEntry);
+    }
+    previousRootIsOverlayShown = isOverlayShown;
+});
 // Get the body element when the component is mounted...
 onMount(() => {
     if (typeof window !== 'undefined') {
@@ -170,6 +193,7 @@ const handleOnHidden = (event) => {
 // so a removed-while-open offcanvas doesn't permanently disable body
 // scrolling...
 onDestroy(() => {
+    unregisterOverlay(overlayEntry);
     if (holdsScrollLock && bodyElement) {
         releaseBodyScrollLock(bodyElement);
         holdsScrollLock = false;
@@ -177,6 +201,8 @@ onDestroy(() => {
 });
 // Dismiss the offcanvas when the backdrop is clicked...
 const handleBackdropMouseDown = (event) => {
+    if (!isTopOverlay(overlayEntry))
+        return;
     const target = event.target;
     const nearestOffcanvas = target.closest('.offcanvas');
     if (nearestOffcanvas && nearestOffcanvas.id === id) {
@@ -194,19 +220,17 @@ const handleBackdropMouseDown = (event) => {
     }
 };
 // Dismiss the offcanvas on Escape key press
-const handleKeydown = (event) => {
-    const keyboardEvent = event;
-    if (rootState.isShown && !isKeyboardDismissible && useBackdrop === 'static') {
+function handleKeydown(event) {
+    if (rootState.isShown && !isKeyboardDismissible && useBackdrop === 'static' && event.key === 'Escape') {
         onHidePrevented(event);
         return;
     }
-    if (rootState.isShown && isKeyboardDismissible && keyboardEvent.key === 'Escape') {
+    if (rootState.isShown && isKeyboardDismissible && event.key === 'Escape') {
         rootState.toggleIsShown();
     }
-};
+}
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
 <svelte:body on:mousedown={handleBackdropMouseDown} />
 
 {#if rootState.isShown}
@@ -220,6 +244,7 @@ const handleKeydown = (event) => {
         onoutrostart={onHide}
         onoutroend={handleOnHidden}
         role={rootState.isShown ? 'dialog' : undefined}
+        style:z-index={overlayZIndex}
         tabindex="-1"
         transition:fly={{ duration: rootState.transitionDuration, x: flyX, y: flyY, opacity: 1 }}
         {...restOfProps}>
@@ -228,5 +253,11 @@ const handleKeydown = (event) => {
 {/if}
 
 {#if rootState.isBackdropShown}
-    <div class={backDropClasses} onmousedown={handleBackdropMouseDown} role="presentation" transition:fade={{ duration: 150 }}></div>
+    <div
+        class={backDropClasses}
+        onmousedown={handleBackdropMouseDown}
+        role="presentation"
+        style:z-index={backdropZIndex}
+        transition:fade={{ duration: 150 }}>
+    </div>
 {/if}

package/dist/Pagination/pagination-item.svelte

@@ -34,7 +34,7 @@ Pagination item component to wrap Pagination.Link components.
 import { initPaginationItemState, PaginationItemState } from './pagination.svelte.js';
 // Generate a unique ID for the collapse element, in case one is not provided...
 const uid = $props.id();
-let { children, class: classValues, elementRef = $bindable(null), id = `page-item-${uid}`, isActive = false, isDisabled = false, ...restOfProps } = $props();
+let { children, class: classValues, elementRef = $bindable(null), id = `page-item-${uid}`, isActive = false, isDisabled = false, 'aria-current': ariaCurrent, ...restOfProps } = $props();
 const itemState = initPaginationItemState({
     get id() {
         return id;
@@ -51,31 +51,38 @@ let classes = $derived(uniqueClsx('page-item', {
     disabled: itemState.isDisabled
 }, classValues));
 $effect(() => {
-    // Update the state when the isActive prop changes...
-    if (id && itemState.isActive !== isActive) {
-        const isItemActive = itemState.root.isPaginationItemActive(id);
-        if (isActive && !isItemActive) {
-            itemState.root.setPaginationItemActive(id);
-        }
-        else if (!isActive && isItemActive) {
-            itemState.root.setPaginationItemActive('');
-        }
+    const itemId = id;
+    const itemIsActive = isActive;
+    if (!itemId) {
+        return;
     }
+    if (itemIsActive) {
+        itemState.root.setPaginationItemActive(itemId);
+    }
+    else {
+        itemState.root.removePaginationItemActive(itemId);
+    }
+    return () => {
+        // The root may have activated this identity through a stateful link
+        // click even when the declarative isActive prop is false.
+        itemState.root.removePaginationItemActive(itemId);
+    };
 });
 $effect(() => {
-    // Update the state when the isDisabled prop changes...
-    if (id && itemState.isDisabled !== isDisabled) {
-        const isItemDisabled = itemState.root.isPaginationItemDisabled(id);
-        if (isDisabled && !isItemDisabled) {
-            itemState.root.setPaginationItemDisabled(id);
-        }
-        else if (!isDisabled && isItemDisabled) {
-            itemState.root.setPaginationItemDisabled('');
-        }
+    const itemId = id;
+    if (!itemId) {
+        return;
+    }
+    if (isDisabled) {
+        itemState.root.setPaginationItemDisabled(itemId);
+    }
+    else {
+        itemState.root.removePaginationItemDisabled(itemId);
     }
+    return () => itemState.root.removePaginationItemDisabled(itemId);
 });
 </script>
 
-<li aria-current={isActive ? 'page' : undefined} bind:this={elementRef} class={classes} {id} {...restOfProps}>
+<li {...restOfProps} aria-current={itemState.isActive ? 'page' : ariaCurrent} bind:this={elementRef} class={classes} {id}>
     {@render children?.()}
 </li>

package/dist/Pagination/pagination-link.svelte

@@ -25,21 +25,36 @@ import { noop } from '../common/noop.js';
 import { initPaginationLinkState, PaginationLinkState } from './pagination.svelte.js';
 // Generate a unique ID for the collapse element, in case one is not provided...
 const uid = $props.id();
-let { 'aria-label': ariaLabel, children, class: classValues, elementRef = $bindable(null), href = '#!', id = `page-link-${uid}`, onclick = noop, ...restOfProps } = $props();
+let { 'aria-label': ariaLabel, 'aria-disabled': ariaDisabled, children, class: classValues, elementRef = $bindable(null), href = '#!', id = `page-link-${uid}`, isDisabled = false, onclick = noop, tabindex: consumerTabIndex, ...restOfProps } = $props();
 const linkState = initPaginationLinkState({
     get id() {
         return id;
+    },
+    get isDisabled() {
+        return isDisabled;
     }
 });
-let classes = $derived(uniqueClsx('page-link', classValues));
-let isDisabled = $derived(linkState.item.isDisabled);
-let tabIndex = $derived(isDisabled ? -1 : 0);
+let classes = $derived(uniqueClsx('page-link', { disabled: linkState.isDisabled }, classValues));
+let tabIndex = $derived(linkState.isDisabled ? -1 : (consumerTabIndex ?? 0));
 const handleClick = (event) => {
+    if (linkState.isDisabled) {
+        event.preventDefault();
+        return;
+    }
     linkState.onclick();
     onclick(event);
 };
 </script>
 
-<a aria-label={ariaLabel} bind:this={elementRef} class={classes} {href} {id} onclick={handleClick} tabindex={tabIndex} {...restOfProps}>
+<a
+    {...restOfProps}
+    aria-label={ariaLabel}
+    aria-disabled={linkState.isDisabled ? 'true' : ariaDisabled}
+    bind:this={elementRef}
+    class={classes}
+    {href}
+    {id}
+    onclick={handleClick}
+    tabindex={tabIndex}>
     {@render children?.()}
 </a>