@yusufceng1z/ding 0.0.1 → 0.0.3

package/README.md

@@ -0,0 +1,39 @@
+# @yusufceng1z/ding
+
+Toasts with real spring physics. One toast that morphs in place. No dependencies, no stylesheet.
+
+This is the core: springs, timers, store, sound and a plain DOM renderer. For React or Svelte, use [`@yusufceng1z/ding-react`](https://www.npmjs.com/package/@yusufceng1z/ding-react) or [`@yusufceng1z/ding-svelte`](https://www.npmjs.com/package/@yusufceng1z/ding-svelte).
+
+## Install
+
+```bash
+npm i @yusufceng1z/ding
+```
+
+## Use
+
+```ts
+import { mountToaster, toast } from '@yusufceng1z/ding';
+
+mountToaster({ position: 'top-center' });
+
+toast.success('Saved');
+toast.error('Payment failed', { description: 'Card declined' });
+
+toast.promise(save(), {
+  loading: 'Saving…',
+  success: 'Saved',
+  error: (err) => `Could not save: ${err.message}`,
+});
+```
+
+Only one toast shows at a time. A new call morphs the toast on screen instead of stacking a second one. 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/index.cjs

@@ -94,8 +94,10 @@ var TIMING = {
   duration: 5e3
 };
 var autoDuration = (type, hasAction) => type === "loading" || type === "error" || hasAction ? 0 : TIMING.duration;
+var DEFAULT_LABELS = { region: "Notifications", dismiss: "Dismiss notification" };
+var definedOnly = (o) => Object.fromEntries(Object.entries(o).filter(([, v]) => v !== void 0));
 function createToaster() {
-  let state = { toasts: [], position: "top-center", theme: "system", status: "", alert: "" };
+  let state = { toasts: [], position: "top-center", theme: "system", labels: DEFAULT_LABELS, status: "", alert: "" };
   let flip = false;
   const subs = /* @__PURE__ */ new Set();
   const entries = /* @__PURE__ */ new Map();
@@ -278,7 +280,13 @@ function createToaster() {
     configure(c) {
       if (c.sound !== void 0) sound = c.sound;
       if (c.volume !== void 0) volume = c.volume;
-      state = { ...state, ...c.position && { position: c.position }, ...c.theme && { theme: c.theme } };
+      state = {
+        ...state,
+        ...c.position && { position: c.position },
+        ...c.theme && { theme: c.theme },
+        // undefined keys are skipped so `{ region: undefined }` keeps the current label
+        ...c.labels && { labels: { ...state.labels, ...definedOnly(c.labels) } }
+      };
       emit();
     },
     subscribe(fn) {
@@ -363,7 +371,7 @@ position:fixed;inset:0;z-index:2147483647;pointer-events:none;font:500 14px/1.3
 .tst-viewport[data-position$=left]{--tst-ox:0%;--tx:0px}
 .tst-viewport[data-position$=right]{--tst-ox:100%;--tx:0px}
 .tst-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
-.tst-slot{position:absolute;pointer-events:auto;touch-action:none;user-select:none;cursor:grab;--tst-i:0;
+.tst-slot{position:absolute;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:grab;--tst-i:0;
 --y:calc(var(--tst-dir)*-1*var(--tst-i)*var(--tst-stack-offset));--s:calc(1 - var(--tst-i)*var(--tst-stack-scale));
 transform:translate(calc(var(--tx) + var(--dx,0px)),calc(var(--y) + var(--dy,0px))) scale(var(--s));
 transform-origin:var(--tst-ox) var(--tst-oy);z-index:calc(100 - var(--tst-i));
@@ -388,7 +396,7 @@ translate:0 var(--tst-y0);scale:var(--tst-enter-scale,.5);opacity:0;will-change:
 .tst[data-type=warning]{--c:var(--tst-warning)}
 .tst[data-type=info]{--c:var(--tst-info)}
 
-.tst-icon{position:absolute;inset-inline-start:0;top:0;width:var(--tst-size);height:var(--tst-size);display:grid;place-items:center}
+.tst-icon{position:absolute;inset-inline-start:-1px;top:-1px;width:var(--tst-size);height:var(--tst-size);display:grid;place-items:center}
 .tst-media{width:28px;height:28px;border-radius:50%;object-fit:cover;outline:1px solid light-dark(oklch(0 0 0/.1),oklch(1 0 0/.1));outline-offset:-1px;animation:tst-swap var(--tst-stack-dur) var(--tst-stack) .1s both}
 .tst-badge{position:relative;width:24px;height:24px;display:grid;place-items:center}
 .tst-svg{width:22px;height:22px;fill:none;stroke:var(--c);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s cubic-bezier(.2,0,0,1);animation:tst-swap var(--tst-stack-dur) var(--tst-stack) .1s both}
@@ -409,7 +417,7 @@ translate:0 var(--tst-y0);scale:var(--tst-enter-scale,.5);opacity:0;will-change:
 .tst[data-type=info] .tst-svg path:nth-child(3){stroke-dasharray:none;stroke-dashoffset:0;animation:tst-dot .4s var(--tst-pop) var(--md) both}
 .tst[data-type=info] .tst-svg path:nth-child(2){animation-delay:calc(var(--md) + .16s)}
 
-.tst-body{position:absolute;inset-inline-start:calc(var(--tst-size) - 1px);top:-1px;display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;width:max-content;max-width:calc(100vw - 2*var(--tst-pad) - var(--tst-size) + 1px);min-height:var(--tst-size);padding-inline-end:18px;
+.tst-body{position:absolute;inset-inline-start:calc(var(--tst-size) - 1px);top:-1px;display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;width:max-content;max-width:calc(100vw - 2*var(--tst-pad) - var(--tst-size) + 1px);min-height:var(--tst-size);padding-inline-end:8px;
 opacity:calc(var(--tp)*1.5 - .25);filter:blur(calc((1 - var(--tp))*10px));transform:translateX(calc((1 - var(--tp))*-12px*var(--tst-flip,1)))}
 .tst-body:has(.tst-action,.tst-close){padding-inline-end:8px;padding-bottom:0}
 .tst-body[data-wrapped]{padding-bottom:10px}
@@ -429,12 +437,16 @@ opacity:calc(var(--tp)*1.5 - .25);filter:blur(calc((1 - var(--tp))*10px));transf
 .tst[data-phase=open] .tst-desc{animation:tst-in-up var(--tst-pop-dur) var(--tst-pop) .1s both}
 .tst[data-phase=open] .tst-action,.tst[data-phase=open] .tst-close{animation:tst-in-btn var(--tst-pop-dur) var(--tst-pop) .16s backwards}
 .tst[data-phase=open] .tst-secondary{animation-delay:.1s}
-.tst-action,.tst-close{flex:none;border:0;color:inherit;font:inherit;cursor:pointer;background:transparent;
+.tst-action,.tst-close{position:relative;flex:none;margin:0;border:0;color:inherit;font:inherit;cursor:pointer;background:transparent;
 opacity:calc(var(--ap)*1.3 - .15);transform:scale(calc(.85 + var(--ap)*.15));
 transition-property:background-color,scale;transition-duration:.15s;transition-timing-function:ease-out}
 .tst-action{height:30px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600;background:var(--tst-fg);color:var(--tst-bg)}
 .tst-secondary{background:transparent;color:color-mix(in srgb,var(--tst-fg) 65%,transparent);padding:0 10px}
 .tst-close{width:30px;height:30px;padding:0;border-radius:50%;display:grid;place-items:center}
+/* 30px look, 44px target: taller hit area, narrow enough sideways that neighbours (8px apart) never overlap */
+.tst-action::before,.tst-close::before{content:'';position:absolute;inset:-7px -3px}
+.tst-slot:focus-visible{outline:none}
+.tst-slot:focus-visible .tst{outline:2px solid var(--tst-fg);outline-offset:-5px}
 .tst-close svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
 @media (hover:hover){.tst-action:hover{background:color-mix(in srgb,var(--tst-fg) 82%,var(--tst-bg))}.tst-secondary:hover,.tst-close:hover{background:color-mix(in srgb,var(--tst-fg) 10%,transparent);color:var(--tst-fg)}}
 .tst-action:not(:disabled):active,.tst-close:not(:disabled):active{scale:.96}
@@ -777,10 +789,15 @@ var ICONS = {
 };
 
 // src/vanilla.ts
+var BUSY = "dialog,[role=dialog],[aria-modal=true],[role=menu],[role=listbox],input,textarea,select,[contenteditable]";
 function onToastKey(e) {
   if (e.defaultPrevented || !toast.getState().toasts.length) return;
-  if (e.key === "Escape") toast.dismiss();
-  else if (e.altKey && e.code === "KeyT") document.querySelector('.tst-viewport button:not([tabindex="-1"])')?.focus();
+  if (e.key === "Escape") {
+    if (!document.activeElement?.closest(BUSY)) toast.dismiss();
+  } else if (e.altKey && e.code === "KeyT") {
+    const slots = document.querySelectorAll(".tst-viewport .tst-slot");
+    (document.querySelector('.tst-viewport button:not([tabindex="-1"])') ?? slots[slots.length - 1])?.focus();
+  }
 }
 var el = (tag, cls, parent) => {
   const n = document.createElement(tag);
@@ -808,7 +825,6 @@ function mountToaster(opts = {}) {
   toast.configure(opts);
   const vp = el("div", "tst-viewport", document.body);
   vp.setAttribute("role", "region");
-  vp.setAttribute("aria-label", "Notifications");
   const status = el("div", "tst-sr", vp);
   status.setAttribute("role", "status");
   const alert = el("div", "tst-sr", vp);
@@ -821,6 +837,7 @@ function mountToaster(opts = {}) {
   const nodes = /* @__PURE__ */ new Map();
   function build(t) {
     const slot = el("div", "tst-slot", vp);
+    slot.tabIndex = -1;
     el("div", "tst", slot);
     return { slot };
   }
@@ -828,6 +845,7 @@ function mountToaster(opts = {}) {
     const s = toast.getState();
     vp.dataset.position = s.position;
     vp.dataset.theme = s.theme;
+    vp.setAttribute("aria-label", s.labels.region);
     status.textContent = s.status;
     alert.textContent = s.alert;
     const live = new Set(s.toasts.map((t) => t.id));
@@ -907,10 +925,10 @@ function mountToaster(opts = {}) {
         if (!close) {
           close = el("button", "tst-close", body);
           close.type = "button";
-          close.setAttribute("aria-label", "Dismiss notification");
           close.append(svg("", ["M6 6l12 12M18 6L6 18"]));
           close.onclick = () => toast.dismiss(t.id);
         }
+        close.setAttribute("aria-label", s.labels.dismiss);
         close.tabIndex = t.phase === "open" ? 0 : -1;
       }
       n.off ??= bindToast(n.slot, t.id);

package/dist/index.d.cts

@@ -3,6 +3,13 @@ type ToastType = 'success' | 'error' | 'warning' | 'info' | 'loading';
 type Phase = 'enter' | 'open' | 'closing' | 'exit';
 type Position = 'top-center' | 'top-left' | 'top-right' | 'bottom-center' | 'bottom-left' | 'bottom-right';
 type Theme = 'system' | 'light' | 'dark';
+/** Accessible names read by screen readers. Pass your own strings to localize them. */
+interface ToastLabels {
+    /** Name of the notifications region. Default `Notifications` */
+    region: string;
+    /** Name of the close button on sticky toasts. Default `Dismiss notification` */
+    dismiss: string;
+}
 interface ToastAction {
     label: string;
     /** Return a patch to morph this toast in place (e.g. Undo → "Restored"). Return nothing to dismiss it. */
@@ -58,6 +65,7 @@ interface ToasterState {
     toasts: ToastItem[];
     position: Position;
     theme: Theme;
+    labels: ToastLabels;
     /** text for the persistent polite live region (role=status) */
     status: string;
     /** text for the persistent assertive live region (role=alert) */
@@ -96,6 +104,8 @@ declare function createToaster(): {
     configure(c: {
         position?: Position;
         theme?: Theme;
+        /** Partial: keys you leave out keep their current value. */
+        labels?: Partial<ToastLabels>;
         sound?: boolean | ((type: ToastType) => void);
         volume?: number;
     }): void;
@@ -147,12 +157,13 @@ declare function injectStyles(doc?: Document): void;
 /** Adapter hook-up: call with the `.tst-slot` element (its first child is the pill). Returns cleanup. */
 declare function bindToast(slot: HTMLElement, id: string, t?: Toaster): () => void;
 
-/** Shared keyboard handling for every adapter: Escape dismisses, Alt+T moves focus into the toast. */
+/** Shared keyboard handling for every adapter: Escape dismisses, Alt+T moves focus into the toast (which also pauses its timer). */
 declare function onToastKey(e: KeyboardEvent): void;
 /** Framework-free renderer. Returns an unmount function. */
 declare function mountToaster(opts?: {
     position?: Position;
     theme?: Theme;
+    labels?: Partial<ToastLabels>;
 }): () => void;
 
 /** Play the cue for a toast type. Silent for types without one, and wherever Web Audio is missing or still locked. */
@@ -161,4 +172,4 @@ declare function chime(type: ToastType, volume?: number): void;
 declare const ICONS: Record<ToastType, string[]>;
 
 export { ICONS, TIMING, bindToast, buildCss, chime, createToaster, getSprings, injectStyles, mountToaster, onToastKey, setSprings, springEasing, toast };
-export type { Phase, Position, PromiseMessages, SpringConfig, Theme, ToastAction, ToastItem, ToastOptions, ToastPatch, ToastType, Toaster, ToasterState };
+export type { Phase, Position, PromiseMessages, SpringConfig, Theme, ToastAction, ToastItem, ToastLabels, ToastOptions, ToastPatch, ToastType, Toaster, ToasterState };

package/dist/index.d.ts

@@ -3,6 +3,13 @@ type ToastType = 'success' | 'error' | 'warning' | 'info' | 'loading';
 type Phase = 'enter' | 'open' | 'closing' | 'exit';
 type Position = 'top-center' | 'top-left' | 'top-right' | 'bottom-center' | 'bottom-left' | 'bottom-right';
 type Theme = 'system' | 'light' | 'dark';
+/** Accessible names read by screen readers. Pass your own strings to localize them. */
+interface ToastLabels {
+    /** Name of the notifications region. Default `Notifications` */
+    region: string;
+    /** Name of the close button on sticky toasts. Default `Dismiss notification` */
+    dismiss: string;
+}
 interface ToastAction {
     label: string;
     /** Return a patch to morph this toast in place (e.g. Undo → "Restored"). Return nothing to dismiss it. */
@@ -58,6 +65,7 @@ interface ToasterState {
     toasts: ToastItem[];
     position: Position;
     theme: Theme;
+    labels: ToastLabels;
     /** text for the persistent polite live region (role=status) */
     status: string;
     /** text for the persistent assertive live region (role=alert) */
@@ -96,6 +104,8 @@ declare function createToaster(): {
     configure(c: {
         position?: Position;
         theme?: Theme;
+        /** Partial: keys you leave out keep their current value. */
+        labels?: Partial<ToastLabels>;
         sound?: boolean | ((type: ToastType) => void);
         volume?: number;
     }): void;
@@ -147,12 +157,13 @@ declare function injectStyles(doc?: Document): void;
 /** Adapter hook-up: call with the `.tst-slot` element (its first child is the pill). Returns cleanup. */
 declare function bindToast(slot: HTMLElement, id: string, t?: Toaster): () => void;
 
-/** Shared keyboard handling for every adapter: Escape dismisses, Alt+T moves focus into the toast. */
+/** Shared keyboard handling for every adapter: Escape dismisses, Alt+T moves focus into the toast (which also pauses its timer). */
 declare function onToastKey(e: KeyboardEvent): void;
 /** Framework-free renderer. Returns an unmount function. */
 declare function mountToaster(opts?: {
     position?: Position;
     theme?: Theme;
+    labels?: Partial<ToastLabels>;
 }): () => void;
 
 /** Play the cue for a toast type. Silent for types without one, and wherever Web Audio is missing or still locked. */
@@ -161,4 +172,4 @@ declare function chime(type: ToastType, volume?: number): void;
 declare const ICONS: Record<ToastType, string[]>;
 
 export { ICONS, TIMING, bindToast, buildCss, chime, createToaster, getSprings, injectStyles, mountToaster, onToastKey, setSprings, springEasing, toast };
-export type { Phase, Position, PromiseMessages, SpringConfig, Theme, ToastAction, ToastItem, ToastOptions, ToastPatch, ToastType, Toaster, ToasterState };
+export type { Phase, Position, PromiseMessages, SpringConfig, Theme, ToastAction, ToastItem, ToastLabels, ToastOptions, ToastPatch, ToastType, Toaster, ToasterState };

package/dist/index.js

@@ -56,8 +56,10 @@ var TIMING = {
   duration: 5e3
 };
 var autoDuration = (type, hasAction) => type === "loading" || type === "error" || hasAction ? 0 : TIMING.duration;
+var DEFAULT_LABELS = { region: "Notifications", dismiss: "Dismiss notification" };
+var definedOnly = (o) => Object.fromEntries(Object.entries(o).filter(([, v]) => v !== void 0));
 function createToaster() {
-  let state = { toasts: [], position: "top-center", theme: "system", status: "", alert: "" };
+  let state = { toasts: [], position: "top-center", theme: "system", labels: DEFAULT_LABELS, status: "", alert: "" };
   let flip = false;
   const subs = /* @__PURE__ */ new Set();
   const entries = /* @__PURE__ */ new Map();
@@ -240,7 +242,13 @@ function createToaster() {
     configure(c) {
       if (c.sound !== void 0) sound = c.sound;
       if (c.volume !== void 0) volume = c.volume;
-      state = { ...state, ...c.position && { position: c.position }, ...c.theme && { theme: c.theme } };
+      state = {
+        ...state,
+        ...c.position && { position: c.position },
+        ...c.theme && { theme: c.theme },
+        // undefined keys are skipped so `{ region: undefined }` keeps the current label
+        ...c.labels && { labels: { ...state.labels, ...definedOnly(c.labels) } }
+      };
       emit();
     },
     subscribe(fn) {
@@ -325,7 +333,7 @@ position:fixed;inset:0;z-index:2147483647;pointer-events:none;font:500 14px/1.3
 .tst-viewport[data-position$=left]{--tst-ox:0%;--tx:0px}
 .tst-viewport[data-position$=right]{--tst-ox:100%;--tx:0px}
 .tst-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
-.tst-slot{position:absolute;pointer-events:auto;touch-action:none;user-select:none;cursor:grab;--tst-i:0;
+.tst-slot{position:absolute;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:grab;--tst-i:0;
 --y:calc(var(--tst-dir)*-1*var(--tst-i)*var(--tst-stack-offset));--s:calc(1 - var(--tst-i)*var(--tst-stack-scale));
 transform:translate(calc(var(--tx) + var(--dx,0px)),calc(var(--y) + var(--dy,0px))) scale(var(--s));
 transform-origin:var(--tst-ox) var(--tst-oy);z-index:calc(100 - var(--tst-i));
@@ -350,7 +358,7 @@ translate:0 var(--tst-y0);scale:var(--tst-enter-scale,.5);opacity:0;will-change:
 .tst[data-type=warning]{--c:var(--tst-warning)}
 .tst[data-type=info]{--c:var(--tst-info)}
 
-.tst-icon{position:absolute;inset-inline-start:0;top:0;width:var(--tst-size);height:var(--tst-size);display:grid;place-items:center}
+.tst-icon{position:absolute;inset-inline-start:-1px;top:-1px;width:var(--tst-size);height:var(--tst-size);display:grid;place-items:center}
 .tst-media{width:28px;height:28px;border-radius:50%;object-fit:cover;outline:1px solid light-dark(oklch(0 0 0/.1),oklch(1 0 0/.1));outline-offset:-1px;animation:tst-swap var(--tst-stack-dur) var(--tst-stack) .1s both}
 .tst-badge{position:relative;width:24px;height:24px;display:grid;place-items:center}
 .tst-svg{width:22px;height:22px;fill:none;stroke:var(--c);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s cubic-bezier(.2,0,0,1);animation:tst-swap var(--tst-stack-dur) var(--tst-stack) .1s both}
@@ -371,7 +379,7 @@ translate:0 var(--tst-y0);scale:var(--tst-enter-scale,.5);opacity:0;will-change:
 .tst[data-type=info] .tst-svg path:nth-child(3){stroke-dasharray:none;stroke-dashoffset:0;animation:tst-dot .4s var(--tst-pop) var(--md) both}
 .tst[data-type=info] .tst-svg path:nth-child(2){animation-delay:calc(var(--md) + .16s)}
 
-.tst-body{position:absolute;inset-inline-start:calc(var(--tst-size) - 1px);top:-1px;display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;width:max-content;max-width:calc(100vw - 2*var(--tst-pad) - var(--tst-size) + 1px);min-height:var(--tst-size);padding-inline-end:18px;
+.tst-body{position:absolute;inset-inline-start:calc(var(--tst-size) - 1px);top:-1px;display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;width:max-content;max-width:calc(100vw - 2*var(--tst-pad) - var(--tst-size) + 1px);min-height:var(--tst-size);padding-inline-end:8px;
 opacity:calc(var(--tp)*1.5 - .25);filter:blur(calc((1 - var(--tp))*10px));transform:translateX(calc((1 - var(--tp))*-12px*var(--tst-flip,1)))}
 .tst-body:has(.tst-action,.tst-close){padding-inline-end:8px;padding-bottom:0}
 .tst-body[data-wrapped]{padding-bottom:10px}
@@ -391,12 +399,16 @@ opacity:calc(var(--tp)*1.5 - .25);filter:blur(calc((1 - var(--tp))*10px));transf
 .tst[data-phase=open] .tst-desc{animation:tst-in-up var(--tst-pop-dur) var(--tst-pop) .1s both}
 .tst[data-phase=open] .tst-action,.tst[data-phase=open] .tst-close{animation:tst-in-btn var(--tst-pop-dur) var(--tst-pop) .16s backwards}
 .tst[data-phase=open] .tst-secondary{animation-delay:.1s}
-.tst-action,.tst-close{flex:none;border:0;color:inherit;font:inherit;cursor:pointer;background:transparent;
+.tst-action,.tst-close{position:relative;flex:none;margin:0;border:0;color:inherit;font:inherit;cursor:pointer;background:transparent;
 opacity:calc(var(--ap)*1.3 - .15);transform:scale(calc(.85 + var(--ap)*.15));
 transition-property:background-color,scale;transition-duration:.15s;transition-timing-function:ease-out}
 .tst-action{height:30px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600;background:var(--tst-fg);color:var(--tst-bg)}
 .tst-secondary{background:transparent;color:color-mix(in srgb,var(--tst-fg) 65%,transparent);padding:0 10px}
 .tst-close{width:30px;height:30px;padding:0;border-radius:50%;display:grid;place-items:center}
+/* 30px look, 44px target: taller hit area, narrow enough sideways that neighbours (8px apart) never overlap */
+.tst-action::before,.tst-close::before{content:'';position:absolute;inset:-7px -3px}
+.tst-slot:focus-visible{outline:none}
+.tst-slot:focus-visible .tst{outline:2px solid var(--tst-fg);outline-offset:-5px}
 .tst-close svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
 @media (hover:hover){.tst-action:hover{background:color-mix(in srgb,var(--tst-fg) 82%,var(--tst-bg))}.tst-secondary:hover,.tst-close:hover{background:color-mix(in srgb,var(--tst-fg) 10%,transparent);color:var(--tst-fg)}}
 .tst-action:not(:disabled):active,.tst-close:not(:disabled):active{scale:.96}
@@ -739,10 +751,15 @@ var ICONS = {
 };
 
 // src/vanilla.ts
+var BUSY = "dialog,[role=dialog],[aria-modal=true],[role=menu],[role=listbox],input,textarea,select,[contenteditable]";
 function onToastKey(e) {
   if (e.defaultPrevented || !toast.getState().toasts.length) return;
-  if (e.key === "Escape") toast.dismiss();
-  else if (e.altKey && e.code === "KeyT") document.querySelector('.tst-viewport button:not([tabindex="-1"])')?.focus();
+  if (e.key === "Escape") {
+    if (!document.activeElement?.closest(BUSY)) toast.dismiss();
+  } else if (e.altKey && e.code === "KeyT") {
+    const slots = document.querySelectorAll(".tst-viewport .tst-slot");
+    (document.querySelector('.tst-viewport button:not([tabindex="-1"])') ?? slots[slots.length - 1])?.focus();
+  }
 }
 var el = (tag, cls, parent) => {
   const n = document.createElement(tag);
@@ -770,7 +787,6 @@ function mountToaster(opts = {}) {
   toast.configure(opts);
   const vp = el("div", "tst-viewport", document.body);
   vp.setAttribute("role", "region");
-  vp.setAttribute("aria-label", "Notifications");
   const status = el("div", "tst-sr", vp);
   status.setAttribute("role", "status");
   const alert = el("div", "tst-sr", vp);
@@ -783,6 +799,7 @@ function mountToaster(opts = {}) {
   const nodes = /* @__PURE__ */ new Map();
   function build(t) {
     const slot = el("div", "tst-slot", vp);
+    slot.tabIndex = -1;
     el("div", "tst", slot);
     return { slot };
   }
@@ -790,6 +807,7 @@ function mountToaster(opts = {}) {
     const s = toast.getState();
     vp.dataset.position = s.position;
     vp.dataset.theme = s.theme;
+    vp.setAttribute("aria-label", s.labels.region);
     status.textContent = s.status;
     alert.textContent = s.alert;
     const live = new Set(s.toasts.map((t) => t.id));
@@ -869,10 +887,10 @@ function mountToaster(opts = {}) {
         if (!close) {
           close = el("button", "tst-close", body);
           close.type = "button";
-          close.setAttribute("aria-label", "Dismiss notification");
           close.append(svg("", ["M6 6l12 12M18 6L6 18"]));
           close.onclick = () => toast.dismiss(t.id);
         }
+        close.setAttribute("aria-label", s.labels.dismiss);
         close.tabIndex = t.phase === "open" ? 0 : -1;
       }
       n.off ??= bindToast(n.slot, t.id);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yusufceng1z/ding",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Framework-agnostic toast engine: spring solver, timers, state machine.",
   "type": "module",
   "sideEffects": false,
@@ -22,6 +22,10 @@
   "files": [
     "dist"
   ],
+  "homepage": "https://ding.yusufcengiz.dev",
+  "bugs": {
+    "url": "https://github.com/YusufCeng1z/ding/issues"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/YusufCeng1z/ding.git",
@@ -40,7 +44,7 @@
   "author": "Yusuf Cengiz",
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --clean",
-    "test": "node --test src/",
+    "test": "node --test \"src/**/*.test.ts\"",
     "typecheck": "tsc -p ."
   }
 }