@yusufceng1z/ding-svelte 0.0.1 → 0.0.3

package/README.md

@@ -0,0 +1,33 @@
+# @yusufceng1z/ding-svelte
+
+Toasts with real spring physics for Svelte 5. One toast that morphs in place. No stylesheet to import.
+
+## Install
+
+```bash
+npm i @yusufceng1z/ding-svelte
+```
+
+## Use
+
+Render the toaster once, then call `toast` from anywhere.
+
+```svelte
+<script>
+  import { Toaster, toast } from '@yusufceng1z/ding-svelte';
+</script>
+
+<Toaster position="top-center" theme="system" />
+<button onclick={() => toast.success('Saved')}>Save</button>
+```
+
+Options, actions, progress, sound and accessibility are covered in the [docs](https://ding.yusufcengiz.dev/docs.html).
+
+## Links
+
+- [Live demo and docs](https://ding.yusufcengiz.dev)
+- [Source on GitHub](https://github.com/YusufCeng1z/ding)
+
+## License
+
+[MIT](LICENSE)

package/dist/Toaster.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { toast, injectStyles, bindToast, onToastKey, ICONS, type Position, type Theme } from '@yusufceng1z/ding';
+  import { toast, injectStyles, bindToast, onToastKey, ICONS, type Position, type Theme, type ToastLabels } from '@yusufceng1z/ding';
 
-  let { position, theme }: { position?: Position; theme?: Theme } = $props();
+  let { position, theme, labels }: { position?: Position; theme?: Theme; labels?: Partial<ToastLabels> } = $props();
 
   let state = $state(toast.getState());
 
@@ -11,6 +11,8 @@
     return toast.subscribe(() => (state = toast.getState()));
   });
   $effect(() => toast.configure({ position, theme }));
+  // Read the strings so the effect tracks them, not the object identity.
+  $effect(() => toast.configure({ labels: { region: labels?.region, dismiss: labels?.dismiss } }));
 
   function bind(node: HTMLElement, id: string) {
     return { destroy: bindToast(node, id) };
@@ -22,7 +24,7 @@
 <div
   class="tst-viewport"
   role="region"
-  aria-label="Notifications"
+  aria-label={state.labels.region}
   data-position={state.position}
   data-theme={state.theme}
   onpointerenter={() => toast.pause()}
@@ -34,7 +36,7 @@
   <div class="tst-sr" role="alert">{state.alert}</div>
   {#each state.toasts as t, idx (t.id)}
     {@const i = state.toasts.length - 1 - idx}
-    <div class="tst-slot" style:--tst-i={i} use:bind={t.id}>
+    <div class="tst-slot" tabindex="-1" style:--tst-i={i} use:bind={t.id}>
       <!-- Announced through the viewport's persistent live regions, not here. -->
       <div
         class="tst"
@@ -78,7 +80,7 @@
             </button>
           {/if}
           {#if t.duration === 0 && t.type !== 'loading' && !t.secondary}
-            <button type="button" class="tst-close" aria-label="Dismiss notification" tabindex={t.phase === 'open' ? 0 : -1} onclick={() => toast.dismiss(t.id)}>
+            <button type="button" class="tst-close" aria-label={state.labels.dismiss} tabindex={t.phase === 'open' ? 0 : -1} onclick={() => toast.dismiss(t.id)}>
               <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" /></svg>
             </button>
           {/if}

package/dist/Toaster.svelte.d.ts

@@ -1,7 +1,8 @@
-import { type Position, type Theme } from '@yusufceng1z/ding';
+import { type Position, type Theme, type ToastLabels } from '@yusufceng1z/ding';
 type $$ComponentProps = {
     position?: Position;
     theme?: Theme;
+    labels?: Partial<ToastLabels>;
 };
 declare const Toaster: import("svelte").Component<$$ComponentProps, {}, "">;
 type Toaster = ReturnType<typeof Toaster>;

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { toast, type Position, type Theme } from '@yusufceng1z/ding';
+export { toast, type Position, type Theme, type ToastLabels } from '@yusufceng1z/ding';
 export { default as Toaster } from './Toaster.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yusufceng1z/ding-svelte",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "sideEffects": false,
   "svelte": "./dist/index.js",
@@ -16,7 +16,7 @@
     "dist"
   ],
   "dependencies": {
-    "@yusufceng1z/ding": "0.0.1"
+    "@yusufceng1z/ding": "0.0.3"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
@@ -27,6 +27,10 @@
     "svelte-check": "^4.7.8"
   },
   "description": "Svelte 5 renderer for Ding spring-physics toasts.",
+  "homepage": "https://ding.yusufcengiz.dev",
+  "bugs": {
+    "url": "https://github.com/YusufCeng1z/ding/issues"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/YusufCeng1z/ding.git",