@winkintel/bootstrap-svelte 0.0.1

package/dist/Offcanvas/offcanvas.svelte

@@ -0,0 +1,220 @@
+<!--
+@component
+## Offcanvas
+Build hidden sidebars into your project for navigation, shopping carts, and more with the Bootstrap Offcanvas component.
+
+@example
+```svelte
+<Offcanvas placement="start" isVisible={true}>
+    <Offcanvas.Header>
+        <Offcanvas.Title>Offcanvas Title</Offcanvas.Title>
+    </Offcanvas.Header>
+    <Offcanvas.Body>
+        Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
+    </Offcanvas.Body>
+</Offcanvas>
+```
+
+#### Placement options
+```svelte
+<Offcanvas placement="start">...</Offcanvas>
+<Offcanvas placement="end">...</Offcanvas>
+<Offcanvas placement="top">...</Offcanvas>
+<Offcanvas placement="bottom">...</Offcanvas>
+```
+
+#### Body scrolling
+```svelte
+<Offcanvas bodyScrolling={true}>...</Offcanvas>
+```
+
+#### Static backdrop
+```svelte
+<Offcanvas isStatic={true}>...</Offcanvas>
+```
+
+#### Responsive offcanvas
+```svelte
+<Offcanvas breakpoint="lg">...</Offcanvas>
+```
+
+### Props
+- `children` (slot): Content to display inside the offcanvas.
+- `class` (string): Optional. Additional CSS classes.
+- `dir` (string): Optional. Text direction ('ltr' or 'rtl').
+- `elementRef` (HTMLElement): Optional. Reference to the offcanvas DOM element.
+- `id` (string): Optional. ID for the offcanvas element.
+- `isBodyScrollable` (boolean): Optional. Enables body scrolling when offcanvas is open.
+- `isKeyboardDismissible` (boolean): Optional. Enables dismissing the offcanvas on Escape key press.
+- `isShown` (boolean): Optional. Controls whether the offcanvas is visible.
+- `placement` (string): Optional. Position of the offcanvas ('start', 'end', 'top', 'bottom').
+- `showOnBreakpoint` (string): Optional. Show the offcanvas on a specific breakpoint ('sm', 'md', 'lg', 'xl', 'xxl').
+- `useBackdrop` (boolean): Optional. Controls whether to show a backdrop when the offcanvas is open.
+- `onHide` (function): Optional. Callback function when the offcanvas is hidden.
+- `onHidePrevented` (function): Optional. Callback function when the offcanvas hide is prevented.
+- `onHidden` (function): Optional. Callback function when the offcanvas is completely hidden.
+- `onShow` (function): Optional. Callback function when the offcanvas is shown.
+- `onShown` (function): Optional. Callback function when the offcanvas is completely shown.
+-->
+<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 { 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);
+const unset = Symbol('unset');
+let previousIsShown = unset;
+let previousShowOnBreakpoint = unset;
+let previousUseBackdrop = unset;
+const rootState = initOffcanvasRootState({
+    get id() {
+        return id;
+    },
+    get isShown() {
+        return isShown;
+    },
+    get showOnBreakpoint() {
+        return showOnBreakpoint;
+    },
+    get useBackdrop() {
+        return useBackdrop;
+    }
+});
+// Set up the derived state for the offcanvas component...
+let flyX = $derived.by(() => {
+    if (placement === 'start' && dir === 'ltr')
+        return '-100%';
+    if (placement === 'end' && dir === 'ltr')
+        return '100%';
+    if (placement === 'start' && dir === 'rtl')
+        return '100%';
+    if (placement === 'end' && dir === 'rtl')
+        return '-100%';
+    return undefined;
+});
+let flyY = $derived.by(() => {
+    if (placement === 'top')
+        return '-100%';
+    if (placement === 'bottom')
+        return '100%';
+    return undefined;
+});
+let hasShownOnBreakpoint = $derived(!!showOnBreakpoint); // !! to convert to boolean
+let hasPlacement = $derived(!!placement); // !! to convert to boolean
+// Derived classes for the offcanvas component...
+let backDropClasses = $derived(uniqueClsx('offcanvas-backdrop', 'fade', { show: rootState.isShown }));
+let classes = $derived(uniqueClsx({
+    offcanvas: !hasShownOnBreakpoint,
+    [`offcanvas-${showOnBreakpoint}`]: hasShownOnBreakpoint,
+    [`offcanvas-${placement}`]: hasPlacement,
+    show: rootState.isShown
+}, classValues));
+// Listen changes to the isShown prop and update the root state accordingly...
+$effect(() => {
+    if (previousIsShown !== unset && previousIsShown !== isShown) {
+        if (isShown !== rootState.isShown) {
+            // Because the transition is asynchronous, we need to wait for the next tick before toggling the state...
+            tick().then(() => {
+                rootState.toggleIsShown();
+            });
+        }
+    }
+    previousIsShown = isShown;
+});
+// Listen changes to the useBackdrop prop and update the root state accordingly...
+$effect(() => {
+    if (previousUseBackdrop !== unset && previousUseBackdrop !== useBackdrop) {
+        if (useBackdrop !== rootState.useBackdrop) {
+            rootState.useBackdrop = useBackdrop;
+        }
+    }
+    previousUseBackdrop = useBackdrop;
+});
+// Listen changes to the showOnBreakpoint prop and update the root state accordingly...
+$effect(() => {
+    if (previousShowOnBreakpoint !== unset && previousShowOnBreakpoint !== showOnBreakpoint) {
+        if (showOnBreakpoint !== rootState.showOnBreakpoint) {
+            rootState.showOnBreakpoint = showOnBreakpoint;
+        }
+    }
+    previousShowOnBreakpoint = showOnBreakpoint;
+});
+// Get the body element when the component is mounted...
+onMount(() => {
+    if (typeof window !== 'undefined') {
+        bodyElement = document.querySelector('body');
+    }
+});
+// Listen to the transition events to properly manage the body scrollbar...
+const handleOnShow = (event) => {
+    if (bodyElement && !isBodyScrollable && !rootState.isMediaQueryMatched) {
+        disableBodyScrolling(bodyElement);
+    }
+    onShow(event);
+};
+// Listen to the transition events to properly manage the body scrollbar...
+const handleOnHidden = (event) => {
+    if (bodyElement && !isBodyScrollable && !rootState.isMediaQueryMatched) {
+        resetBodyScrolling(bodyElement);
+    }
+    onHidden(event);
+};
+// Dismiss the offcanvas when the backdrop is clicked...
+const handleBackdropMouseDown = (event) => {
+    const target = event.target;
+    const nearestOffcanvas = target.closest('.offcanvas');
+    if (nearestOffcanvas && nearestOffcanvas.id === id) {
+        event.stopPropagation();
+        return;
+    }
+    if (rootState.isShown && useBackdrop === 'static') {
+        event.stopPropagation();
+        onHidePrevented(event);
+        return;
+    }
+    if (rootState.isShown && useBackdrop !== 'static') {
+        event.stopPropagation();
+        rootState.toggleIsShown();
+    }
+};
+// Dismiss the offcanvas on Escape key press
+const handleKeydown = (event) => {
+    const keyboardEvent = event;
+    if (rootState.isShown && !isKeyboardDismissible && useBackdrop === 'static') {
+        onHidePrevented(event);
+        return;
+    }
+    if (rootState.isShown && isKeyboardDismissible && keyboardEvent.key === 'Escape') {
+        rootState.toggleIsShown();
+    }
+};
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+<svelte:body on:mousedown={handleBackdropMouseDown} />
+
+{#if rootState.isShown}
+    <div
+        aria-modal={rootState.isShown}
+        bind:this={elementRef}
+        class={classes}
+        {id}
+        onintrostart={handleOnShow}
+        onintroend={onShown}
+        onoutrostart={onHide}
+        onoutroend={handleOnHidden}
+        role={rootState.isShown ? 'dialog' : undefined}
+        tabindex="-1"
+        transition:fly={{ duration: rootState.transitionDuration, x: flyX, y: flyY, opacity: 1 }}
+        {...restOfProps}>
+        {@render children?.()}
+    </div>
+{/if}
+
+{#if rootState.isBackdropShown}
+    <div class={backDropClasses} onmousedown={handleBackdropMouseDown} role="presentation" transition:fade={{ duration: 150 }}></div>
+{/if}

package/dist/Offcanvas/offcanvas.svelte.d.ts

@@ -0,0 +1,61 @@
+import type { Offcanvas } from './index.js';
+/**
+ * ## Offcanvas
+ * Build hidden sidebars into your project for navigation, shopping carts, and more with the Bootstrap Offcanvas component.
+ *
+ * @example
+ * ```svelte
+ * <Offcanvas placement="start" isVisible={true}>
+ * <Offcanvas.Header>
+ *     <Offcanvas.Title>Offcanvas Title</Offcanvas.Title>
+ * </Offcanvas.Header>
+ * <Offcanvas.Body>
+ *     Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
+ * </Offcanvas.Body>
+ * </Offcanvas>
+ * ```
+ *
+ * #### Placement options
+ * ```svelte
+ * <Offcanvas placement="start">...</Offcanvas>
+ * <Offcanvas placement="end">...</Offcanvas>
+ * <Offcanvas placement="top">...</Offcanvas>
+ * <Offcanvas placement="bottom">...</Offcanvas>
+ * ```
+ *
+ * #### Body scrolling
+ * ```svelte
+ * <Offcanvas bodyScrolling={true}>...</Offcanvas>
+ * ```
+ *
+ * #### Static backdrop
+ * ```svelte
+ * <Offcanvas isStatic={true}>...</Offcanvas>
+ * ```
+ *
+ * #### Responsive offcanvas
+ * ```svelte
+ * <Offcanvas breakpoint="lg">...</Offcanvas>
+ * ```
+ *
+ * ### Props
+ * - `children` (slot): Content to display inside the offcanvas.
+ * - `class` (string): Optional. Additional CSS classes.
+ * - `dir` (string): Optional. Text direction ('ltr' or 'rtl').
+ * - `elementRef` (HTMLElement): Optional. Reference to the offcanvas DOM element.
+ * - `id` (string): Optional. ID for the offcanvas element.
+ * - `isBodyScrollable` (boolean): Optional. Enables body scrolling when offcanvas is open.
+ * - `isKeyboardDismissible` (boolean): Optional. Enables dismissing the offcanvas on Escape key press.
+ * - `isShown` (boolean): Optional. Controls whether the offcanvas is visible.
+ * - `placement` (string): Optional. Position of the offcanvas ('start', 'end', 'top', 'bottom').
+ * - `showOnBreakpoint` (string): Optional. Show the offcanvas on a specific breakpoint ('sm', 'md', 'lg', 'xl', 'xxl').
+ * - `useBackdrop` (boolean): Optional. Controls whether to show a backdrop when the offcanvas is open.
+ * - `onHide` (function): Optional. Callback function when the offcanvas is hidden.
+ * - `onHidePrevented` (function): Optional. Callback function when the offcanvas hide is prevented.
+ * - `onHidden` (function): Optional. Callback function when the offcanvas is completely hidden.
+ * - `onShow` (function): Optional. Callback function when the offcanvas is shown.
+ * - `onShown` (function): Optional. Callback function when the offcanvas is completely shown.
+ */
+declare const Offcanvas: import("svelte").Component<Offcanvas.RootProps, {}, "elementRef">;
+type Offcanvas = ReturnType<typeof Offcanvas>;
+export default Offcanvas;

package/dist/Offcanvas/types.d.ts

@@ -0,0 +1,25 @@
+import type { BaseBreakpoint, DivElement, HeadingElement, HeadingLevels, TextDirection } from '../common/types.js';
+export type OffcanvasBackdrop = 'static' | boolean;
+export type OffcanvasBreakpoint = BaseBreakpoint;
+export type OffcanvasPlacement = 'start' | 'end' | 'top' | 'bottom';
+export type OffcanvasRootProps = DivElement & {
+    dir?: TextDirection;
+    isBodyScrollable?: boolean;
+    isKeyboardDismissible?: boolean;
+    isShown?: boolean;
+    onHide?: EventListener;
+    onHidePrevented?: EventListener;
+    onHidden?: EventListener;
+    onShow?: EventListener;
+    onShown?: EventListener;
+    placement?: OffcanvasPlacement;
+    showOnBreakpoint?: OffcanvasBreakpoint;
+    useBackdrop?: OffcanvasBackdrop;
+};
+export type OffcanvasHeaderProps = DivElement & {
+    isDismissible?: boolean;
+};
+export type OffcanvasTitleProps = HeadingElement & {
+    level?: HeadingLevels;
+};
+export type OffcanvasBodyProps = DivElement;

package/dist/Offcanvas/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Pagination/composition.d.ts

@@ -0,0 +1,4 @@
+export { default as Item } from './pagination-item.svelte';
+export { default as Link } from './pagination-link.svelte';
+export { default as Root } from './pagination.svelte';
+export type { PaginationItemProps as ItemProps, PaginationLinkProps as LinkProps, PaginationRootProps as RootProps } from './types.js';

package/dist/Pagination/composition.js

@@ -0,0 +1,3 @@
+export { default as Item } from './pagination-item.svelte';
+export { default as Link } from './pagination-link.svelte';
+export { default as Root } from './pagination.svelte';

package/dist/Pagination/index.d.ts

@@ -0,0 +1 @@
+export * as Pagination from './composition.js';

package/dist/Pagination/index.js

@@ -0,0 +1 @@
+export * as Pagination from './composition.js';

package/dist/Pagination/pagination-item.svelte

@@ -0,0 +1,81 @@
+<!--
+@component
+## Pagination.Item
+Pagination item component to wrap Pagination.Link components.
+
+@example
+```svelte
+<Pagination.Item>
+    <Pagination.Link href="#!">1</Pagination.Link>
+</Pagination.Item>
+```
+
+@example
+```svelte
+<Pagination.Item isActive={true}>
+    <Pagination.Link href="#!">2</Pagination.Link>
+</Pagination.Item>
+```
+
+@example
+```svelte
+<Pagination.Item isDisabled={true}>
+    <Pagination.Link href="#!">Next</Pagination.Link>
+</Pagination.Item>
+```
+
+### Props
+- `class` (string): Optional. Additional CSS classes.
+- `elementRef` (HTMLElement): Optional. Reference to the item DOM element.
+- `isActive` (boolean): Optional. Whether the pagination item is active. Defaults to false.
+- `isDisabled` (boolean): Optional. Whether the pagination item is disabled. Defaults to false.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+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();
+const itemState = initPaginationItemState({
+    get id() {
+        return id;
+    },
+    get isActive() {
+        return isActive;
+    },
+    get isDisabled() {
+        return isDisabled;
+    }
+});
+let classes = $derived(uniqueClsx('page-item', {
+    active: itemState.isActive,
+    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('');
+        }
+    }
+});
+$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('');
+        }
+    }
+});
+</script>
+
+<li aria-current={isActive ? 'page' : undefined} bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</li>

package/dist/Pagination/pagination-item.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { Pagination } from './index.js';
+/**
+ * ## Pagination.Item
+ * Pagination item component to wrap Pagination.Link components.
+ *
+ * @example
+ * ```svelte
+ * <Pagination.Item>
+ * <Pagination.Link href="#!">1</Pagination.Link>
+ * </Pagination.Item>
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <Pagination.Item isActive={true}>
+ * <Pagination.Link href="#!">2</Pagination.Link>
+ * </Pagination.Item>
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <Pagination.Item isDisabled={true}>
+ * <Pagination.Link href="#!">Next</Pagination.Link>
+ * </Pagination.Item>
+ * ```
+ *
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes.
+ * - `elementRef` (HTMLElement): Optional. Reference to the item DOM element.
+ * - `isActive` (boolean): Optional. Whether the pagination item is active. Defaults to false.
+ * - `isDisabled` (boolean): Optional. Whether the pagination item is disabled. Defaults to false.
+ */
+declare const PaginationItem: import("svelte").Component<Pagination.ItemProps, {}, "elementRef">;
+type PaginationItem = ReturnType<typeof PaginationItem>;
+export default PaginationItem;

package/dist/Pagination/pagination-link.svelte

@@ -0,0 +1,45 @@
+<!--
+@component
+## Pagination.Link
+Pagination link component that is typically used inside a Pagination.Item.
+
+@example
+```svelte
+<Pagination.Link href="#!">1</Pagination.Link>
+```
+
+@example
+```svelte
+<Pagination.Link href="#!" ariaLabel="Go to previous page">Previous</Pagination.Link>
+```
+
+### Props
+- `ariaLabel` (string): Optional. ARIA label for the link.
+- `class` (string): Optional. Additional CSS classes.
+- `elementRef` (HTMLElement): Optional. Reference to the link DOM element.
+- `href` (string): Optional. The URL to link to. Defaults to "#".
+- `isDisabled` (boolean): Optional. Whether the link is disabled (pagination item should also be set to disabled). Defaults to false.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+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();
+const linkState = initPaginationLinkState({
+    get id() {
+        return id;
+    }
+});
+let classes = $derived(uniqueClsx('page-link', classValues));
+let isDisabled = $derived(linkState.item.isDisabled);
+let tabIndex = $derived(isDisabled ? -1 : 0);
+const handleClick = (event) => {
+    linkState.onclick();
+    onclick(event);
+};
+</script>
+
+<a aria-label={ariaLabel} bind:this={elementRef} class={classes} {href} {id} onclick={handleClick} tabindex={tabIndex} {...restOfProps}>
+    {@render children?.()}
+</a>

package/dist/Pagination/pagination-link.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Pagination } from './index.js';
+/**
+ * ## Pagination.Link
+ * Pagination link component that is typically used inside a Pagination.Item.
+ *
+ * @example
+ * ```svelte
+ * <Pagination.Link href="#!">1</Pagination.Link>
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <Pagination.Link href="#!" ariaLabel="Go to previous page">Previous</Pagination.Link>
+ * ```
+ *
+ * ### Props
+ * - `ariaLabel` (string): Optional. ARIA label for the link.
+ * - `class` (string): Optional. Additional CSS classes.
+ * - `elementRef` (HTMLElement): Optional. Reference to the link DOM element.
+ * - `href` (string): Optional. The URL to link to. Defaults to "#".
+ * - `isDisabled` (boolean): Optional. Whether the link is disabled (pagination item should also be set to disabled). Defaults to false.
+ */
+declare const PaginationLink: import("svelte").Component<Pagination.LinkProps, {}, "elementRef">;
+type PaginationLink = ReturnType<typeof PaginationLink>;
+export default PaginationLink;

package/dist/Pagination/pagination.svelte

@@ -0,0 +1,60 @@
+<!--
+@component
+## Pagination.Root
+Root pagination component that contains pagination items and links.
+
+@example
+```svelte
+<Pagination.Root>
+    <Pagination.Item>
+        <Pagination.Link href="#!">Previous</Pagination.Link>
+    </Pagination.Item>
+    <Pagination.Item>
+        <Pagination.Link href="#!">1</Pagination.Link>
+    </Pagination.Item>
+    <Pagination.Item isActive={true}>
+        <Pagination.Link href="#!">2</Pagination.Link>
+    </Pagination.Item>
+    <Pagination.Item>
+        <Pagination.Link href="#!">3</Pagination.Link>
+    </Pagination.Item>
+    <Pagination.Item>
+        <Pagination.Link href="#!">Next</Pagination.Link>
+    </Pagination.Item>
+</Pagination.Root>
+```
+### Props
+- `alignment` (string): Optional. Horizontal alignment, one of: 'start', 'center', 'end'.
+- `ariaLabel` (string): Optional. ARIA label for the pagination navigation. Defaults to "pagination".
+- `class` (string): Optional. Additional CSS classes.
+- `disabled` (boolean): Optional. Whether the pagination is disabled. Defaults to false.
+- `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+- `id` (string): Optional. Unique ID for the pagination element.
+- `size` (string): Optional. Size of pagination component, one of: 'sm', 'lg'.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+import { initPaginationRootState, PaginationRootState } from './pagination.svelte.js';
+// Generate a unique ID for the component, in case one is not provided...
+const uid = $props.id();
+let { alignment, 'aria-label': ariaLabel = 'Pagination navigation', children, class: classValues, elementRef = $bindable(null), id = `pagination-${uid}`, isStateful = true, size, ...restOfProps } = $props();
+const _rootState = initPaginationRootState({
+    get id() {
+        return id;
+    },
+    get isStateful() {
+        return isStateful;
+    }
+});
+let classes = $derived(uniqueClsx('pagination', {
+    'justify-content-center': alignment === 'center',
+    'justify-content-end': alignment === 'end',
+    'pagination-sm': size === 'sm',
+    'pagination-lg': size === 'lg'
+}, classValues));
+</script>
+
+<nav aria-label={ariaLabel}>
+    <ul bind:this={elementRef} class={classes} {id} {...restOfProps}>
+        {@render children?.()}
+    </ul>
+</nav>

package/dist/Pagination/pagination.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { Pagination } from './index.js';
+/**
+ * ## Pagination.Root
+ * Root pagination component that contains pagination items and links.
+ *
+ * @example
+ * ```svelte
+ * <Pagination.Root>
+ * <Pagination.Item>
+ *     <Pagination.Link href="#!">Previous</Pagination.Link>
+ * </Pagination.Item>
+ * <Pagination.Item>
+ *     <Pagination.Link href="#!">1</Pagination.Link>
+ * </Pagination.Item>
+ * <Pagination.Item isActive={true}>
+ *     <Pagination.Link href="#!">2</Pagination.Link>
+ * </Pagination.Item>
+ * <Pagination.Item>
+ *     <Pagination.Link href="#!">3</Pagination.Link>
+ * </Pagination.Item>
+ * <Pagination.Item>
+ *     <Pagination.Link href="#!">Next</Pagination.Link>
+ * </Pagination.Item>
+ * </Pagination.Root>
+ * ```
+ * ### Props
+ * - `alignment` (string): Optional. Horizontal alignment, one of: 'start', 'center', 'end'.
+ * - `ariaLabel` (string): Optional. ARIA label for the pagination navigation. Defaults to "pagination".
+ * - `class` (string): Optional. Additional CSS classes.
+ * - `disabled` (boolean): Optional. Whether the pagination is disabled. Defaults to false.
+ * - `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+ * - `id` (string): Optional. Unique ID for the pagination element.
+ * - `size` (string): Optional. Size of pagination component, one of: 'sm', 'lg'.
+ */
+declare const Pagination: import("svelte").Component<Pagination.RootProps, {}, "elementRef">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;