@ttdk-design-system/library-svelte 0.0.0-stage → 1.0.0

package/dist/web/modal/modal.svelte

@@ -0,0 +1,333 @@
+<script context="module"></script>
+
+<script>import { onDestroy, onMount } from "svelte";
+import { buildUiVars, UiProps } from "../../core/types";
+export let open = void 0;
+export let defaultOpen = void 0;
+export let preventClose = void 0;
+export let dismissible = void 0;
+export let onOpen = void 0;
+export let onUpdateOpen = void 0;
+export let onOpenChange = void 0;
+export let onClosePrevent = void 0;
+export let onClose = void 0;
+export let header = void 0;
+export let body = void 0;
+export let footer = void 0;
+export let content = void 0;
+export let className = void 0;
+export let modal = void 0;
+export let ui = void 0;
+export let overlay = void 0;
+export let overlayClass = void 0;
+export let overlayStyle = void 0;
+export let contentClass = void 0;
+export let size = void 0;
+export let fullscreen = void 0;
+export let scrollable = void 0;
+export let contentStyle = void 0;
+export let title = void 0;
+export let close = void 0;
+export let headerClass = void 0;
+export let headerStyle = void 0;
+export let description = void 0;
+export let closeIcon = void 0;
+export let bodyClass = void 0;
+export let bodyStyle = void 0;
+export let footerClass = void 0;
+export let footerStyle = void 0;
+export let preventScroll = void 0;
+export let lockScroll = void 0;
+function stringifyStyles(stylesObj) {
+  let styles = "";
+  for (let key in stylesObj) {
+    const dashedKey = key.replace(/[A-Z]/g, function(match) {
+      return "-" + match.toLowerCase();
+    });
+    styles += dashedKey + ":" + stylesObj[key] + ";";
+  }
+  return styles;
+}
+function isDismissible() {
+  if (preventClose === true)
+    return false;
+  return dismissible !== false;
+}
+function triggerShake() {
+  if (shakeTimer) {
+    clearTimeout(shakeTimer);
+  }
+  isAnimDone = true;
+  isShaking = true;
+  shakeTimer = setTimeout(() => {
+    isShaking = false;
+    shakeTimer = null;
+  }, 400);
+}
+function openModal() {
+  if (!isOpen) {
+    isOpen = true;
+    isAnimDone = false;
+    if (animTimer)
+      clearTimeout(animTimer);
+    animTimer = setTimeout(() => {
+      isAnimDone = true;
+    }, 250);
+    if (onOpen)
+      onOpen();
+    if (onUpdateOpen)
+      onUpdateOpen(true);
+    if (onOpenChange)
+      onOpenChange(true);
+  }
+}
+function closeModal(force) {
+  if (!isDismissible() && !force) {
+    triggerShake();
+    if (onClosePrevent) {
+      onClosePrevent();
+    }
+    return;
+  }
+  if (isOpen) {
+    isOpen = false;
+    isAnimDone = false;
+    if (onClose)
+      onClose();
+    if (onUpdateOpen)
+      onUpdateOpen(false);
+    if (onOpenChange)
+      onOpenChange(false);
+  }
+}
+function handleOverlayClick() {
+  closeModal();
+}
+function handleKeyDown(event) {
+  if (!isOpen)
+    return;
+  if (event.key === "Escape") {
+    closeModal();
+  }
+}
+function renderHeaderContent() {
+  if (header) {
+    return typeof header === "function" ? header({
+      close: () => closeModal(true)
+    }) : header;
+  }
+  return null;
+}
+function renderBodyContent() {
+  if (body) {
+    return typeof body === "function" ? body({
+      close: () => closeModal(true)
+    }) : body;
+  }
+  return null;
+}
+function renderFooterContent() {
+  if (footer) {
+    return typeof footer === "function" ? footer({
+      close: () => closeModal(true)
+    }) : footer;
+  }
+  return null;
+}
+function renderCustomContent() {
+  if (content) {
+    return typeof content === "function" ? content({
+      close: () => closeModal(true)
+    }) : content;
+  }
+  return null;
+}
+let dialogRef;
+let isOpen = open !== void 0 ? open : Boolean(defaultOpen);
+let originalOverflow = "";
+let isScrollLocked = false;
+function portal(node) {
+  if (typeof document !== "undefined") {
+    document.body.appendChild(node);
+  }
+  return {
+    destroy() {
+      if (node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    }
+  };
+}
+function applyScrollLock(shouldLock) {
+  if (typeof document === "undefined")
+    return;
+  if (shouldLock && !isScrollLocked) {
+    originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    isScrollLocked = true;
+  } else if (!shouldLock && isScrollLocked) {
+    document.body.style.overflow = originalOverflow;
+    isScrollLocked = false;
+  }
+}
+$:
+  if (open !== void 0 && open !== isOpen) {
+    if (open) {
+      openModal();
+    } else {
+      closeModal(true);
+    }
+  }
+$: {
+  const shouldLock = isOpen && preventScroll !== false && lockScroll !== false;
+  applyScrollLock(shouldLock);
+}
+let isShaking = false;
+let isAnimDone = false;
+let shakeTimer = null;
+let animTimer = null;
+onMount(() => {
+  if (typeof document !== "undefined") {
+    document.addEventListener("keydown", (e) => handleKeyDown(e), true);
+  }
+});
+onDestroy(() => {
+  applyScrollLock(false);
+  if (shakeTimer) {
+    clearTimeout(shakeTimer);
+  }
+  if (typeof document !== "undefined") {
+    document.removeEventListener(
+      "keydown",
+      (e) => handleKeyDown(e),
+      true
+    );
+  }
+});
+</script>
+
+<div>
+  {#if isOpen}
+    <div
+      style={stringifyStyles({
+        ...buildUiVars(ui),
+    })}
+      role="dialog"
+      use:portal
+      class={`ttdk-modal-portal ${className || ""}`.trim()}
+      aria-modal={modal !== false ? "true" : "false"}
+      tabIndex={-1}
+    >
+      {#if overlay !== false}
+        <div
+          style={stringifyStyles({
+            ...buildUiVars(overlayStyle),
+          })}
+          class={`ttdk-modal-overlay ${overlayClass || ""}`.trim()}
+          on:click={(event) => {
+            handleOverlayClick();
+          }}
+        />
+      {/if}
+      <div
+        style={stringifyStyles({
+          ...buildUiVars(contentStyle),
+        })}
+        bind:this={dialogRef}
+        class={`ttdk-modal-dialog ${isAnimDone ? "ttdk-modal-anim-done" : ""} ${
+          isShaking ? "ttdk-modal-shake" : ""
+        } ${contentClass || ""}`.trim()}
+        data-size={size || "md"}
+        data-fullscreen={fullscreen ? "true" : undefined}
+        data-scrollable={scrollable !== false ? "true" : undefined}
+      >
+        {#if Boolean(content)}
+          {renderCustomContent()}
+        {/if}
+        {#if !content}
+          {#if Boolean(header || title || close !== false)}
+            <div
+              style={stringifyStyles({
+                ...buildUiVars(headerStyle),
+              })}
+              class={`ttdk-modal-header ${headerClass || ""}`.trim()}
+            >
+              {#if Boolean(header)}
+                {renderHeaderContent()}
+              {/if}
+              {#if !header}
+                <div class="ttdk-modal-header-info">
+                  {#if Boolean(title)}
+                    <h3 class="ttdk-modal-title">{title}</h3>
+                  {/if}
+                  {#if Boolean(description)}
+                    <p class="ttdk-modal-description">{description}</p>
+                  {/if}
+                </div>
+
+                {#if close !== false}
+                  <button
+                    type="button"
+                    class="ttdk-modal-close"
+                    aria-label="Tutup modal"
+                    on:click={(event) => {
+                      closeModal(true);
+                    }}
+                  >
+                    {#if Boolean(closeIcon)}
+                      {closeIcon}
+                    {/if}
+                    {#if !closeIcon}
+                      <svg
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        ><line x1="18" y1="6" x2="6" y2="18" /><line
+                          x1="6"
+                          y1="6"
+                          x2="18"
+                          y2="18"
+                        /></svg
+                      >
+                    {/if}</button
+                  >
+                {/if}
+              {/if}
+            </div>
+          {/if}
+          <div
+            style={stringifyStyles({
+              ...buildUiVars(bodyStyle),
+            })}
+            class={`ttdk-modal-body ${bodyClass || ""}`.trim()}
+          >
+            {#if Boolean(body)}
+              {renderBodyContent()}
+            {/if}
+            {#if !body && $$slots.default}
+              <slot />
+            {/if}
+          </div>
+
+          {#if Boolean(footer) || $$slots.footer}
+            <div
+              style={stringifyStyles({
+                ...buildUiVars(footerStyle),
+              })}
+              class={`ttdk-modal-footer ${footerClass || ""}`.trim()}
+            >
+              {#if Boolean(footer)}
+                {renderFooterContent()}
+              {/if}
+              {#if $$slots.footer}
+                <slot name="footer" />
+              {/if}
+            </div>
+          {/if}
+        {/if}
+      </div>
+    </div>
+  {/if}
+</div>

package/dist/web/modal/modal.svelte.d.ts

@@ -0,0 +1,231 @@
+import { SvelteComponent } from "svelte";
+export type ModalSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full";
+export type ModalUiProps = UiProps;
+export interface ModalProps {
+    /**
+     * Status visibilitas modal (mode terkontrol / controlled state).
+     * Mendukung `v-model:open` / `v-model` pada Vue 3 dan controlled prop `open` pada React.
+     */
+    open?: boolean;
+    /**
+     * Status visibilitas awal saat pertama kali dirender (uncontrolled initial state).
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Judul teks di bagian header modal.
+     */
+    title?: string;
+    /**
+     * Deskripsi penjelasan di bagian header modal di bawah judul.
+     */
+    description?: string;
+    /**
+     * Menampilkan tombol tutup 'X' di pojok kanan atas header.
+     * Berikan `false` untuk menyembunyikan tombol tutup.
+     * @default true
+     */
+    close?: boolean | any;
+    /**
+     * Ikon kustom untuk tombol tutup.
+     */
+    closeIcon?: any;
+    /**
+     * Menjadikan modal tampil dalam ukuran layar penuh (fullscreen 100vw x 100vh).
+     * @default false
+     */
+    fullscreen?: boolean;
+    /**
+     * Skala ukuran lebar maksimum modal dialog ('xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | 'full').
+     * @default 'md'
+     */
+    size?: ModalSize;
+    /**
+     * Mengizinkan modal ditutup saat pengguna mengeklik latar belakang (backdrop) atau menekan tombol `Escape`.
+     * @default true
+     */
+    dismissible?: boolean;
+    /**
+     * Mencegah modal ditutup saat klik di luar atau tombol `Escape` (alias selaras Nuxt UI prevent-close).
+     * Jika bernilai `true`, popover/modal tidak dapat ditutup kecuali melalui tombol aksi eksplisit di dalam modal.
+     * @default false
+     */
+    preventClose?: boolean;
+    /**
+     * Menampilkan lapisan latar belakang redup (backdrop overlay).
+     * @default true
+     */
+    overlay?: boolean;
+    /**
+     * Menjadikan modal sebagai dialog modal yang memusatkan fokus interaksi pengguna.
+     * @default true
+     */
+    modal?: boolean;
+    /**
+     * Mengaktifkan area konten body yang dapat digulir jika isi modal melebihi tinggi layar.
+     * @default true
+     */
+    scrollable?: boolean;
+    /**
+     * Mengunci scrolling halaman web latar belakang saat modal sedang terbuka (body scroll lock).
+     * @default true
+     */
+    preventScroll?: boolean;
+    /**
+     * Alias untuk `preventScroll`.
+     * @default true
+     */
+    lockScroll?: boolean;
+    /**
+     * Konten kustom untuk seluruh dialog (menggantikan header, body, dan footer default).
+     */
+    content?: any;
+    /**
+     * Konten kustom untuk bagian header modal.
+     */
+    header?: any;
+    /**
+     * Konten kustom untuk bagian isi utama (body) modal.
+     */
+    body?: any;
+    /**
+     * Konten kustom untuk bagian footer (biasanya tombol aksi Batal / Konfirmasi).
+     */
+    footer?: any;
+    /**
+     * Kustomisasi CSS variables atau token visual melalui UiProps.
+     */
+    ui?: ModalUiProps;
+    /**
+     * Class CSS kustom pada elemen pembungkus terluar.
+     */
+    className?: string;
+    /**
+     * Class CSS kustom (alias framework Vue).
+     */
+    class?: string;
+    /**
+     * Style inline kustom pada kontainer dialog.
+     */
+    style?: any;
+    /**
+     * Class CSS kustom untuk lapisan backdrop overlay.
+     */
+    overlayClass?: string;
+    /**
+     * Style kustom untuk lapisan backdrop overlay (UiProps).
+     */
+    overlayStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk kartu panel modal dialog.
+     */
+    contentClass?: string;
+    /**
+     * Style kustom untuk kartu panel modal dialog (UiProps).
+     */
+    contentStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk header modal.
+     */
+    headerClass?: string;
+    /**
+     * Style kustom untuk header modal (UiProps).
+     */
+    headerStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk body modal.
+     */
+    bodyClass?: string;
+    /**
+     * Style kustom untuk body modal (UiProps).
+     */
+    bodyStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk footer modal.
+     */
+    footerClass?: string;
+    /**
+     * Style kustom untuk footer modal (UiProps).
+     */
+    footerStyle?: UiProps;
+    /**
+     * Callback event saat status terbuka/tertutup berubah (kompatibel dengan v-model:open pada Vue 3).
+     */
+    onUpdateOpen?: (open: boolean) => void;
+    /**
+     * Callback event saat status terbuka/tertutup berubah (alias standar React).
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Callback event saat modal terbuka.
+     */
+    onOpen?: () => void;
+    /**
+     * Callback event saat modal ditutup.
+     */
+    onClose?: () => void;
+    /**
+     * Callback event saat pengguna mencoba menutup modal tetapi dicegah karena preventClose={true} atau dismissible={false}.
+     */
+    onClosePrevent?: () => void;
+    /**
+     * Elemen pemicu (trigger), tombol, atau konten modal default.
+     */
+    children?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        open?: ModalProps["open"];
+        defaultOpen?: ModalProps["defaultOpen"];
+        preventClose?: ModalProps["preventClose"];
+        dismissible?: ModalProps["dismissible"];
+        onOpen?: ModalProps["onOpen"];
+        onUpdateOpen?: ModalProps["onUpdateOpen"];
+        onOpenChange?: ModalProps["onOpenChange"];
+        onClosePrevent?: ModalProps["onClosePrevent"];
+        onClose?: ModalProps["onClose"];
+        header?: ModalProps["header"];
+        body?: ModalProps["body"];
+        footer?: ModalProps["footer"];
+        content?: ModalProps["content"];
+        className?: ModalProps["className"];
+        modal?: ModalProps["modal"];
+        ui?: ModalProps["ui"];
+        overlay?: ModalProps["overlay"];
+        overlayClass?: ModalProps["overlayClass"];
+        overlayStyle?: ModalProps["overlayStyle"];
+        contentClass?: ModalProps["contentClass"];
+        size?: ModalProps["size"];
+        fullscreen?: ModalProps["fullscreen"];
+        scrollable?: ModalProps["scrollable"];
+        contentStyle?: ModalProps["contentStyle"];
+        title?: ModalProps["title"];
+        close?: ModalProps["close"];
+        headerClass?: ModalProps["headerClass"];
+        headerStyle?: ModalProps["headerStyle"];
+        description?: ModalProps["description"];
+        closeIcon?: ModalProps["closeIcon"];
+        bodyClass?: ModalProps["bodyClass"];
+        bodyStyle?: ModalProps["bodyStyle"];
+        footerClass?: ModalProps["footerClass"];
+        footerStyle?: ModalProps["footerStyle"];
+        preventScroll?: ModalProps["preventScroll"];
+        lockScroll?: ModalProps["lockScroll"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        footer: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type ModalProps_ = typeof __propDef.props;
+export type ModalEvents = typeof __propDef.events;
+export type ModalSlots = typeof __propDef.slots;
+export default class Modal extends SvelteComponent<ModalProps_, ModalEvents, ModalSlots> {
+}
+export {};

package/dist/web/pagination/AI_GUIDE.md

@@ -0,0 +1,148 @@
+# <Pagination /> — TTDK Component Reference
+
+Komponen Pagination navigasi halaman dengan dukungan Compound API (ala Shadcn UI) dan Props-driven mode.
+
+## 1. Stylesheets & Theming (Pure CSS)
+Import the corresponding stylesheet for the theme you wish to use:
+- **COMMON Theme**: `import "@ttdk-design-system/library-<react|vue|svelte>/web/pagination/pagination.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Pagination from "@ttdk-design-system/library-react/web/pagination";
+
+// Vue 3
+import Pagination from "@ttdk-design-system/library-vue/web/pagination";
+
+// Svelte
+import Pagination from "@ttdk-design-system/library-svelte/web/pagination";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `page?` | `number` | `1` | Nomor halaman saat ini (1-indexed). |
+| `maxPages?` | `number` | `1` | Jumlah total halaman maksimum (alias untuk totalPages). |
+| `totalPages?` | `number` | `1` | Jumlah total halaman (alias maxPages). |
+| `limit?` | `number` | `10` | Jumlah baris/item data per halaman (page size). |
+| `onLimitChange?` | `(limit: number) => void` | `-` | Callback saat jumlah baris per halaman diubah via select box. |
+| `limitOptions?` | `number[]` | `[10, 20, 50, 100]` | Pilihan angka baris per halaman pada select box. |
+| `canPrevPage?` | `boolean` | `false` | Menentukan apakah navigasi ke halaman sebelumnya diizinkan (false = tombol Previous dinonaktifkan). |
+| `canNextPage?` | `boolean` | `false` | Menentukan apakah navigasi ke halaman berikutnya diizinkan (false = tombol Next dinonaktifkan). |
+| `onFirstPage?` | `() => void` | `-` | Callback saat tombol First Page (halaman pertama) diklik. |
+| `onPrevPage?` | `() => void` | `-` | Callback saat tombol Previous Page (halaman sebelumnya) diklik. |
+| `onNextPage?` | `() => void` | `-` | Callback saat tombol Next Page (halaman selanjutnya) diklik. |
+| `onLastPage?` | `() => void` | `-` | Callback saat tombol Last Page (halaman terakhir) diklik. |
+| `onPageChange?` | `(page: number) => void` | `-` | Callback saat nomor halaman tertentu diklik. |
+| `siblingCount?` | `number` | `1` | Jumlah tetangga nomor halaman di samping kiri dan kanan halaman aktif. |
+| `showEdges?` | `boolean` | `false` | Menampilkan tombol First (<<) dan Last (>>). |
+| `showPageNumbers?` | `boolean` | `true` | Menampilkan nomor halaman terpaginasi (1, 2, 3...). |
+| `size?` | `'sm' | 'md' | 'lg'` | `md` | Skala ukuran pagination: - `'sm'`: 28px - `'md'`: 36px (standar) - `'lg'`: 44px |
+| `style?` | `any` | `-` | Inline CSS style object native. |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual granular root kontainer pagination (UiProps). |
+| `contentStyle?` | `UiProps` | `-` | Style kustom untuk kontainer daftar pagination content (ul.ttdk-pagination-content). |
+| `contentClass?` | `string` | `-` | Class CSS kustom untuk kontainer daftar pagination content. |
+| `linkStyle?` | `UiProps` | `-` | Style kustom untuk tombol link nomor halaman / navigasi. |
+| `linkClass?` | `string` | `-` | Class CSS kustom untuk tombol link nomor halaman / navigasi. |
+| `activeLinkStyle?` | `UiProps` | `-` | Style kustom untuk tombol nomor halaman saat aktif. |
+| `activeLinkClass?` | `string` | `-` | Class CSS kustom untuk tombol nomor halaman saat aktif. |
+| `limitStyle?` | `UiProps` | `-` | Style kustom untuk kontainer baris per halaman (limit). |
+| `limitClass?` | `string` | `-` | Class CSS kustom untuk kontainer baris per halaman (limit). |
+| `limitSelectStyle?` | `UiProps` | `-` | Style kustom untuk elemen Selectbox baris per halaman (limit). |
+| `limitSlot?` | `any` | `-` | Slot kustom untuk menggantikan elemen limit selector bawaan. |
+| `showLimit?` | `boolean` | `-` | Menentukan apakah kontrol baris per halaman (limit selectbox) ditampilkan. Jika tidak disetel, otomatis mengikuti keberadaan callback onLimitChange. |
+| `showLimitLabel?` | `boolean` | `true` | Menentukan apakah teks label 'Baris per halaman:' ditampilkan di samping selectbox limit. |
+| `limitLabel?` | `string` | `Baris per halaman:` | Teks label untuk opsi baris per halaman. |
+| `firstIcon?` | `any` | `-` | Ikon kustom untuk tombol halaman pertama (first page, menggantikan <<). |
+| `prevIcon?` | `any` | `-` | Ikon kustom untuk tombol halaman sebelumnya (previous page, menggantikan <). |
+| `nextIcon?` | `any` | `-` | Ikon kustom untuk tombol halaman selanjutnya (next page, menggantikan >). |
+| `lastIcon?` | `any` | `-` | Ikon kustom untuk tombol halaman terakhir (last page, menggantikan >>). |
+| `ellipsisIcon?` | `any` | `-` | Ikon kustom untuk separator elipsis (menggantikan ...). |
+| `prevText?` | `string` | `Previous` | Label teks tombol Previous. |
+| `nextText?` | `string` | `Next` | Label teks tombol Next. |
+| `iconOnly?` | `boolean` | `false` | Mode hanya menampilkan ikon pada tombol Previous dan Next tanpa teks label. |
+| `className?` | `string` | `-` | Class CSS kustom. |
+| `children?` | `any` | `-` | Konten kustom atau subkomponen compound (PaginationContent, PaginationItem, dll). |
+
+### Sub-interface: `PaginationPageItem`
+
+| Field | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `type` | `'page' | 'ellipsis'` | `-` |  |
+| `value` | `number | string` | `-` |  |
+| `key` | `string` | `-` |  |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import { useState } from "react";
+import Pagination from "@ttdk-design-system/library-react/pagination";
+import "@ttdk-design-system/library-react/pagination/pagination.css";
+
+export function Example() {
+  const [page, setPage] = useState(1);
+  const [limit, setLimit] = useState(10);
+
+  return (
+    <Pagination
+      page={page}
+      totalPages={15}
+      limit={limit}
+      limitOptions={[10, 25, 50, 100]}
+      canPrevPage={page > 1}
+      canNextPage={page < 15}
+      onPageChange={(p) => setPage(p)}
+      onLimitChange={(l) => setLimit(l)}
+    />
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import Pagination from "@ttdk-design-system/library-vue/pagination";
+import "@ttdk-design-system/library-vue/pagination/pagination.css";
+
+const page = ref(1);
+const limit = ref(10);
+</script>
+
+<template>
+  <Pagination
+    :page="page"
+    :total-pages="15"
+    :limit="limit"
+    :limit-options="[10, 25, 50, 100]"
+    :can-prev-page="page > 1"
+    :can-next-page="page < 15"
+    @page-change="(p: number) => (page = p)"
+    @limit-change="(l: number) => (limit = l)"
+  />
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Pagination from "@ttdk-design-system/library-svelte/pagination";
+  import "@ttdk-design-system/library-svelte/pagination/pagination.css";
+
+  let page = 1;
+  let limit = 10;
+</script>
+
+<Pagination
+  {page}
+  totalPages={15}
+  {limit}
+  limitOptions={[10, 25, 50, 100]}
+  canPrevPage={page > 1}
+  canNextPage={page < 15}
+  on:pageChange={(e) => (page = e.detail)}
+  on:limitChange={(e) => (limit = e.detail)}
+/>
+```