{"_id":"@arisyntek/sv-dialog","_rev":"3-2d3890df12f23e6c746eeef5587a558a","name":"@arisyntek/sv-dialog","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@arisyntek/sv-dialog","version":"0.0.1","keywords":["components","dialog","modal","Svelte","SvelteKit"],"author":{"name":"Arisyntek"},"license":"MIT","_id":"@arisyntek/sv-dialog@0.0.1","maintainers":[{"name":"denwwer","email":"denwwer.c4@gmail.com"}],"homepage":"https://github.com/arisyntek/sv-dialog","bugs":{"url":"https://github.com/arisyntek/sv-dialog/issues"},"dist":{"shasum":"13960fb1e41222712fe60b79a7cbb509d3622286","tarball":"https://registry.npmjs.org/@arisyntek/sv-dialog/-/sv-dialog-0.0.1.tgz","fileCount":7,"integrity":"sha512-zjSc33i7sXRdcJSSv6JPv6Tfn2RoRtqsY77hTLGja9jQboJ7CTTJVSLY7Sq6vwCgYdg+DlD8l0t0jhL9jpIxjw==","signatures":[{"sig":"MEUCIHGc89zYK74H9ZChL4bbwPy221yKZz4AHr3HPqJ43bV8AiEAnxDuxUy6pDAhxhAX5Q0Tj5kwtfsf9IdyXA4FzJKWtVI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12900},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"gitHead":"23659d922007db886cde993e37dcd1ed5cbfd6af","scripts":{"dev":"vite dev","lint":"eslint src/ --fix","build":"vite build && npm run prepack","format":"prettier --write src/","prepack":"svelte-kit sync && svelte-package && publint","prepare":"svelte-kit sync || echo ''","publish":"npm publish --access public"},"_npmUser":{"name":"denwwer","email":"denwwer.c4@gmail.com"},"repository":{"url":"git+https://github.com/arisyntek/sv-dialog.git","type":"git"},"_npmVersion":"11.6.4","description":"A lightweight, accessible dialog component using the native HTML <dialog> element.","directories":{},"sideEffects":false,"_nodeVersion":"22.16.0","_hasShrinkwrap":false,"devDependencies":{"vite":"7.2.4","eslint":"9.39.1","svelte":"5.45.2","globals":"16.5.0","publint":"0.3.15","prettier":"3.7.1","@eslint/js":"9.39.1","typescript":"5.9.3","@types/node":"22","svelte-check":"4.3.4","@sveltejs/kit":"2.49.0","@eslint/compat":"1.4.1","@sveltejs/package":"2.5.7","typescript-eslint":"8.48.0","eslint-plugin-svelte":"3.13.0","@sveltejs/adapter-auto":"7.0.0","eslint-config-prettier":"10.1.8","prettier-plugin-svelte":"3.4.0","@sveltejs/vite-plugin-svelte":"6.2.1"},"peerDependencies":{"svelte":"5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/sv-dialog_0.0.1_1764274431406_0.47310879214017465","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@arisyntek/sv-dialog","version":"0.0.2","keywords":["components","dialog","modal","Svelte","SvelteKit"],"author":{"name":"Arisyntek"},"license":"MIT","_id":"@arisyntek/sv-dialog@0.0.2","maintainers":[{"name":"denwwer","email":"denwwer.c4@gmail.com"}],"homepage":"https://github.com/arisyntek/sv-dialog","bugs":{"url":"https://github.com/arisyntek/sv-dialog/issues"},"dist":{"shasum":"d72266b005037d5b114d8c9414a5dc701c848de7","tarball":"https://registry.npmjs.org/@arisyntek/sv-dialog/-/sv-dialog-0.0.2.tgz","fileCount":7,"integrity":"sha512-8950L0uBe3RCohcC/ZmLMvR4prZUMonCHQZhZXkdC1YUF0sZjtjVNsDeSbcdn/YzJP1bC+l09MCKjNJAZWk5OA==","signatures":[{"sig":"MEYCIQDBRtExctrIyjUoA3IfBBz3G+DPK9eNd5+rejvabZSWMQIhAMSZSFwVBnn6Vg0vJJ9uUPrVk4k1NCwxBRl8DlnkP2sn","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12899},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"gitHead":"23659d922007db886cde993e37dcd1ed5cbfd6af","scripts":{"dev":"vite dev","lint":"eslint src/ --fix","build":"vite build && npm run prepack","format":"prettier --write src/","prepack":"svelte-kit sync && svelte-package && publint","prepare":"svelte-kit sync || echo ''","publish":"npm publish --access public"},"_npmUser":{"name":"denwwer","email":"denwwer.c4@gmail.com"},"repository":{"url":"git+https://github.com/arisyntek/sv-dialog.git","type":"git"},"_npmVersion":"11.6.4","description":"A lightweight, accessible dialog component using the native HTML <dialog> element.","directories":{},"sideEffects":false,"_nodeVersion":"22.16.0","_hasShrinkwrap":false,"devDependencies":{"vite":"7.2.4","eslint":"9.39.1","svelte":"5.45.2","globals":"16.5.0","publint":"0.3.15","prettier":"3.7.1","@eslint/js":"9.39.1","typescript":"5.9.3","@types/node":"22","svelte-check":"4.3.4","@sveltejs/kit":"2.49.0","@eslint/compat":"1.4.1","@sveltejs/package":"2.5.7","typescript-eslint":"8.48.0","eslint-plugin-svelte":"3.13.0","@sveltejs/adapter-auto":"7.0.0","eslint-config-prettier":"10.1.8","prettier-plugin-svelte":"3.4.0","@sveltejs/vite-plugin-svelte":"6.2.1"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/sv-dialog_0.0.2_1764274923424_0.7451742636677554","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@arisyntek/sv-dialog","description":"A lightweight, accessible dialog component using the native HTML <dialog> element.","version":"0.0.3","homepage":"https://github.com/arisyntek/sv-dialog","repository":{"type":"git","url":"git+https://github.com/arisyntek/sv-dialog.git"},"author":{"name":"Arisyntek"},"license":"MIT","scripts":{"dev":"vite dev","lint":"eslint src/ --fix","format":"prettier --write src/","build":"vite build && npm run prepack","prepare":"svelte-kit sync || echo ''","prepack":"svelte-kit sync && svelte-package && publint","publish":"npm publish --access public"},"sideEffects":false,"svelte":"./dist/index.js","types":"./dist/index.d.ts","type":"module","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"peerDependencies":{"svelte":"^5.0.0"},"devDependencies":{"@eslint/compat":"1.4.1","@eslint/js":"9.39.1","@sveltejs/adapter-auto":"7.0.0","@sveltejs/kit":"2.49.0","@sveltejs/package":"2.5.7","@sveltejs/vite-plugin-svelte":"6.2.1","@types/node":"22","eslint":"9.39.1","eslint-config-prettier":"10.1.8","eslint-plugin-svelte":"3.13.0","globals":"16.5.0","prettier":"3.7.1","prettier-plugin-svelte":"3.4.0","publint":"0.3.15","svelte":"5.45.2","svelte-check":"4.3.4","typescript":"5.9.3","typescript-eslint":"8.48.0","vite":"7.2.4"},"keywords":["components","dialog","modal","Svelte","SvelteKit"],"gitHead":"23659d922007db886cde993e37dcd1ed5cbfd6af","_id":"@arisyntek/sv-dialog@0.0.3","bugs":{"url":"https://github.com/arisyntek/sv-dialog/issues"},"_nodeVersion":"22.16.0","_npmVersion":"11.6.4","dist":{"integrity":"sha512-UoRpfJauyyv6jUIsyaKuvfgUgux4cNVjbJBZsjSmw5NEQO50cKgvrUjXDGiuxJC+HpGvpiAhLTpShh5M4f1cYQ==","shasum":"a93bd355348e11368d728783ee8d2292216b2726","tarball":"https://registry.npmjs.org/@arisyntek/sv-dialog/-/sv-dialog-0.0.3.tgz","fileCount":7,"unpackedSize":13737,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCID0DTrd7M28B7TPoIog+c/WHzDplh7panAHeJzab/0xEAiB3dIEQXdYBBuHGmUN3ktkYAv+YI+ftV1UKtIjNusSnfw=="}]},"_npmUser":{"name":"denwwer","email":"denwwer.c4@gmail.com"},"directories":{},"maintainers":[{"name":"denwwer","email":"denwwer.c4@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/sv-dialog_0.0.3_1764276459649_0.41967485919189507"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-27T20:13:51.324Z","modified":"2025-11-27T20:47:40.029Z","0.0.1":"2025-11-27T20:13:51.613Z","0.0.2":"2025-11-27T20:22:03.629Z","0.0.3":"2025-11-27T20:47:39.826Z"},"bugs":{"url":"https://github.com/arisyntek/sv-dialog/issues"},"author":{"name":"Arisyntek"},"license":"MIT","homepage":"https://github.com/arisyntek/sv-dialog","keywords":["components","dialog","modal","Svelte","SvelteKit"],"repository":{"type":"git","url":"git+https://github.com/arisyntek/sv-dialog.git"},"description":"A lightweight, accessible dialog component using the native HTML <dialog> element.","maintainers":[{"name":"denwwer","email":"denwwer.c4@gmail.com"}],"readme":"# Svelte 5 Dialog Component\n\nA lightweight, accessible dialog component using the native HTML `<dialog>` element.\n\n## Installation\n\n```bash\nnpm i @arisyntek/sv-dialog\n```\n\n## Examples Usage\n\n### Confirmation Dialog\n\n```svelte\n<script lang=\"ts\">\n  import { Dialog } from '@arisyntek/sv-dialog';\n  \n  let open = $state(false);\n  \n  function handleConfirm() {\n    // do something\n    open = false;\n  }\n</script>\n\n<button onclick={() => open = true}>Open Dialog</button>\n\n<Dialog bind:open closedby=\"none\" --dialog-color=\"#ad2e24\">\n  \t<form method=\"dialog\">\n\t\t<h2>Confirm Delete</h2>\n\t\t<p>This action cannot be undone.</p>\n\t\t<footer>\n\t\t\t<button onclick={() => open = false} type=\"reset\">Cancel</button>\n\t\t\t<button onclick={handleConfirm} type=\"submit\">Delete</button>\n\t\t</footer>\n\t</form>\n</Dialog>\n```\n\n### Light Dismiss Dialog\n\n```svelte\n<script lang=\"ts\">\n  import { Dialog } from '@arisyntek/sv-dialog';\n  \n  let open = $state(false);\n</script>\n\n<button onclick={() => open = true}>Light Dialog</button>\n\n<Dialog bind:open closedby=\"any\">\n  <p>Click outside or press Esc to close</p>\n</Dialog>\n```\n\n### Non-Modal Dialog\n\n```svelte\n<script lang=\"ts\">\n  import { Dialog } from '@arisyntek/sv-dialog';\n  \n  let open = $state(false);\n</script>\n\n<button onclick={() => open = true}>Open Popup</button>\n\n<Dialog bind:open modal={false}>\n  <p>Page remains interactive behind this dialog</p>\n</Dialog>\n```\n\n## Programmatic Control\nProgrammatic Control lets you control the dialog via a component reference (`bind:this`) instead of binding the `open` state:\n\n```svelte\n<script lang=\"ts\">\n  import { Dialog } from '@arisyntek/sv-dialog';\n  \n  let dialogRef;\n</script>\n\n<button onclick={() => dialogRef.show()}>Open</button>\n<button onclick={() => dialogRef.close('cancelled')}>Close with value</button>\n\n<Dialog bind:this={dialogRef}>\n  Content\n</Dialog>\n```\n\n## Props\n\n| Prop | Type | Default | Description                                                                                          |\n|------|------|---------|------------------------------------------------------------------------------------------------------|\n| `open` | `boolean` | `false` | Two-way bindable open state                                                                          |\n| `modal` | `boolean` | `true` | Modal (blocks page) or non-modal                                                                     |\n| `closedby` | `'any' \\| 'closerequest' \\| 'none'` | - | `any` — Light dismiss (click outside, Esc key, or button). `closerequest` — Esc key or button only. `none` — Button/programmatic only |\n| `returnValue` | `string` | `''` | Bindable return value from forms                                                                     |\n| `class` | `string` | `''` | Additional CSS class                                                                                 |\n| `onclose` | `(e: Event) => void` | - | Close event handler                                                                                  |\n| `oncancel` | `(e: Event) => void` | - | Cancel (Esc) event handler                                                                           |\n\n\n## Styling\n\n### Method 1: CSS Custom Properties\n\nThe component exposes CSS variables for easy customization:\n\n```svelte\n<!-- Inline on component -->\n<Dialog \n  bind:open\n  --dialog-bg=\"#1e1e1e\"\n  --dialog-color=\"white\"\n  --dialog-radius=\"1rem\"\n>\n  Dark theme dialog\n</Dialog>\n```\n\n```css\n/* Or globally in your CSS */\n:root {\n  --dialog-bg: #1e1e1e;\n  --dialog-color: #ffffff;\n  --dialog-radius: 1rem;\n  --dialog-backdrop: rgb(0 0 0 / 0.8);\n}\n```\n\n### Available CSS Variables\n\n| Variable | Default | Description |\n|----------|---------|-------------|\n| `--dialog-bg` | `white` | Background color |\n| `--dialog-color` | `inherit` | Text color |\n| `--dialog-radius` | `0.5rem` | Border radius |\n| `--dialog-padding` | `0` | Dialog padding |\n| `--dialog-content-padding` | `1.5rem` | Content area padding |\n| `--dialog-max-width` | `min(90vw, 32rem)` | Maximum width |\n| `--dialog-max-height` | `85vh` | Maximum height |\n| `--dialog-shadow` | `0 25px 50px...` | Box shadow |\n| `--dialog-backdrop` | `rgb(0 0 0 / 0.5)` | Backdrop color |\n| `--dialog-duration` | `0.2s` | Animation duration |\n| `--dialog-easing` | `ease-out` | Animation easing |\n| `--dialog-scale-from` | `0.95` | Scale animation start |\n\n### Method 2: Custom Class + Global Styles\n\n```svelte\n<Dialog bind:open class=\"my-dialog\">\n  Content\n</Dialog>\n```\n\n```css\n/* In global CSS or :global() block */\n:global(.my-dialog) {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  border-radius: 1rem;\n}\n\n:global(.my-dialog::backdrop) {\n  background: rgb(0 0 0 / 0.8);\n  backdrop-filter: blur(4px);\n}\n```\n\n## Accessibility\n\n- Uses native `<dialog>` element with built-in accessibility\n- Modal dialogs trap focus automatically\n- Esc key closes modal dialogs by default\n- Proper `aria-modal` handling via `showModal()`\n\n## Browser Support\n\nAll modern browsers since March 2022 with `<dialog>` element support.\n","readmeFilename":"README.md"}