sonner-wc 0.1.0

package/LICENSE

@@ -0,0 +1,28 @@
+MIT License
+
+Copyright (c) 2026 Ben Nyberg
+
+This project, `sonner-wc`, is a port of Sonner — a React toast library by
+Emil Kowalski (https://github.com/emilkowalski/sonner) — to a framework-agnostic
+web component. Substantial portions of the CSS, the icon SVGs, the constants,
+and the swipe and stacking algorithms are derived directly from Sonner.
+
+Copyright (c) 2023 Emil Kowalski
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,144 @@
+# sonner-wc
+
+[Sonner](https://github.com/emilkowalski/sonner)'s toast UX as a framework-agnostic web component.
+Drop it into anything — vanilla HTML, Vue, Svelte, htmx — same API, same look.
+
+```html
+<script type="module" src="https://unpkg.com/sonner-wc/dist/sonner-wc.bundle.js"></script>
+
+<sonner-toaster position="bottom-right" theme="system" rich-colors></sonner-toaster>
+
+<script type="module">
+  import { toast } from 'sonner-wc';
+  toast.success('Saved!', { description: 'Your changes are live.' });
+</script>
+```
+
+## Install
+
+```sh
+bun add sonner-wc           # or npm / pnpm / yarn
+```
+
+ESM only. Modern browsers (last two versions of Chrome, Firefox, Safari, Edge).
+
+## API
+
+### The `<sonner-toaster>` host
+
+Place once, anywhere in the page. Configure with attributes.
+
+| Attribute        | Values                                                                           | Default        |
+| ---------------- | -------------------------------------------------------------------------------- | -------------- |
+| `position`       | `top-left` `top-center` `top-right` `bottom-left` `bottom-center` `bottom-right` | `bottom-right` |
+| `theme`          | `light` `dark` `system`                                                          | `light`        |
+| `rich-colors`    | presence flag                                                                    | off            |
+| `close-button`   | presence flag (applies to all toasts)                                            | off            |
+| `invert`         | presence flag                                                                    | off            |
+| `dir`            | `ltr` `rtl` `auto`                                                               | `auto`         |
+| `gap`            | number (px) between stacked toasts                                               | `14`           |
+| `duration`       | default lifetime in ms (per-toast override wins)                                 | `4000`         |
+| `visible-toasts` | how many toasts fan out vs. stack behind                                         | `3`            |
+| `offset`         | viewport gutter; px number or CSS length                                         | `24px`         |
+| `mobile-offset`  | gutter under 600px                                                               | `16px`         |
+| `hotkey`         | `Alt+KeyT`-style chord that expands the stack                                    | `altKey+KeyT`  |
+
+### The `toast()` helper
+
+```ts
+import { toast } from 'sonner-wc';
+
+toast('Default message');
+toast.success('Saved', { description: 'Looks good.' });
+toast.error('Oops', { action: { label: 'Retry', onClick: () => retry() } });
+toast.warning('Storage almost full');
+toast.info('You have a new message');
+toast.loading('Uploading…', { id: 'job-1' });
+
+// Update in place by reusing an id:
+toast.success('Done', { id: 'job-1' });
+
+// Async with automatic loading → success/error:
+toast.promise(api.save(), {
+  loading: 'Saving…',
+  success: (data) => `Saved as ${data.name}`,
+  error: (err) => `Couldn't save: ${err.message}`,
+});
+
+// Anything custom:
+toast.custom((id) => {
+  const el = document.createElement('div');
+  el.innerHTML = `<strong>Custom</strong> content #${id}`;
+  return el;
+});
+
+// Dismiss programmatically:
+toast.dismiss('job-1'); // by id
+toast.dismiss(); // all
+```
+
+The returned element is the `<sonner-toast>` itself. You can mutate it directly — set
+attributes, add children, call `.dismiss()`, etc.
+
+### Declarative form
+
+You can also build toasts as plain HTML and append them to a toaster:
+
+```html
+<sonner-toaster id="t" position="bottom-right"></sonner-toaster>
+
+<script>
+  const el = document.createElement('sonner-toast');
+  el.setAttribute('type', 'success');
+  el.setAttribute('duration', '4000');
+  el.innerHTML = `
+    <span slot="title">Saved!</span>
+    <span slot="description">Your changes are live.</span>
+    <button slot="action">View</button>
+  `;
+  document.getElementById('t').appendChild(el);
+</script>
+```
+
+### Slots on `<sonner-toast>`
+
+| Slot          | Purpose                                      |
+| ------------- | -------------------------------------------- |
+| `title`       | Primary text                                 |
+| `description` | Secondary text                               |
+| `icon`        | Icon override (otherwise picked from `type`) |
+| `action`      | Right-aligned action button                  |
+| `cancel`      | Left-aligned cancel button                   |
+
+### Theming
+
+All colors are CSS custom properties on the toaster. Override them in your own
+CSS to restyle:
+
+```css
+sonner-toaster {
+  --normal-bg: #1a1a1a;
+  --normal-border: #2a2a2a;
+  --normal-text: #fafafa;
+  --success-bg: #042f2e;
+  --success-text: #5eead4;
+  --border-radius: 12px;
+  --width: 400px;
+}
+```
+
+## Development
+
+```sh
+bun install
+bun run dev      # builds with watch + serves demo at http://localhost:3000
+bun test         # runs unit tests
+bun run build    # produces dist/
+```
+
+## Credits
+
+UI behavior and visual design are direct ports of [Sonner](https://github.com/emilkowalski/sonner) by Emil Kowalski.
+This package adapts that work into a framework-agnostic web component.
+
+MIT.

package/dist/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const VISIBLE_TOASTS_AMOUNT = 3;
+export declare const VIEWPORT_OFFSET = "24px";
+export declare const MOBILE_VIEWPORT_OFFSET = "16px";
+export declare const TOAST_LIFETIME = 4000;
+export declare const TOAST_WIDTH = 356;
+export declare const GAP = 14;
+export declare const SWIPE_THRESHOLD = 45;
+export declare const SWIPE_VELOCITY_THRESHOLD = 0.11;
+export declare const TIME_BEFORE_UNMOUNT = 200;
+export declare const DEFAULT_HOTKEY: readonly string[];

package/dist/icons.d.ts

@@ -0,0 +1,8 @@
+import type { ToastType } from './types.js';
+export declare const SUCCESS_ICON = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" height=\"20\" width=\"20\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\" clip-rule=\"evenodd\"/></svg>";
+export declare const WARNING_ICON = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" height=\"20\" width=\"20\"><path fill-rule=\"evenodd\" d=\"M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z\" clip-rule=\"evenodd\"/></svg>";
+export declare const INFO_ICON = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" height=\"20\" width=\"20\"><path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z\" clip-rule=\"evenodd\"/></svg>";
+export declare const ERROR_ICON = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" height=\"20\" width=\"20\"><path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z\" clip-rule=\"evenodd\"/></svg>";
+export declare const CLOSE_ICON = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>";
+export declare const LOADING_SPINNER: string;
+export declare function getTypeIcon(type: ToastType): string | null;

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export { SonnerToast } from './sonner-toast.js';
+export { SonnerToaster } from './sonner-toaster.js';
+export { toast } from './toast.js';
+import type { SonnerToast as _SonnerToast } from './sonner-toast.js';
+import type { SonnerToaster as _SonnerToaster } from './sonner-toaster.js';
+export type { Position, PromiseOptions, SonnerToastElement, SonnerToasterElement, SwipeDirection, Theme, ToastAction, ToastContent, ToastOptions, ToastType, ToasterOptions, } from './types.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sonner-toast': _SonnerToast;
+        'sonner-toaster': _SonnerToaster;
+    }
+}

package/dist/registry.d.ts

@@ -0,0 +1,11 @@
+import type { SonnerToastElement, SonnerToasterElement } from './types.js';
+export declare function nextToastId(): number;
+export declare function registerToast(el: SonnerToastElement): void;
+export declare function unregisterToast(el: SonnerToastElement): void;
+export declare function getToast(id: string | number): SonnerToastElement | undefined;
+export declare function registerToaster(el: SonnerToasterElement): void;
+export declare function unregisterToaster(el: SonnerToasterElement): void;
+/** Find a toaster element to host a new toast. Prefer the most-recently-connected one. */
+export declare function defaultToaster(): SonnerToasterElement | undefined;
+export declare function allToasters(): readonly SonnerToasterElement[];
+export declare function dismissAllToasts(): void;

package/dist/sonner-toast.d.ts

@@ -0,0 +1,29 @@
+import type { SonnerToastElement, ToastContent, ToastOptions, ToastType } from './types.js';
+declare const HTMLElementCtor: typeof HTMLElement;
+export declare class SonnerToast extends HTMLElementCtor implements SonnerToastElement {
+    #private;
+    static get observedAttributes(): string[];
+    toastId: string | number;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, _val: string | null): void;
+    get toastType(): ToastType;
+    /** Imperative dismiss — triggers exit animation, then removes from DOM. */
+    dismiss(): void;
+    /** Apply new content/options. Used by toast.promise() for loading→success/error transitions. */
+    update(options: ToastOptions & {
+        title?: ToastContent;
+        type?: ToastType;
+    }): void;
+    setTitle(value: ToastContent): void;
+    setDescription(value: ToastContent | undefined): void;
+    setIcon(value: Node | string | null | undefined): void;
+    setHandlers(handlers: {
+        onDismiss?: ToastOptions['onDismiss'];
+        onAutoClose?: ToastOptions['onAutoClose'];
+    }): void;
+    /** Called by the toaster to pause/resume this toast's auto-dismiss timer. */
+    setPaused(paused: boolean): void;
+}
+export {};

package/dist/sonner-toaster.d.ts

@@ -0,0 +1,20 @@
+import type { SonnerToastElement, SonnerToasterElement } from './types.js';
+declare const HTMLElementCtor: typeof HTMLElement;
+export declare class SonnerToaster extends HTMLElementCtor implements SonnerToasterElement {
+    #private;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, _val: string | null): void;
+    addToast(el: SonnerToastElement): SonnerToastElement;
+    /** Re-announce `text` through the dedicated assertive live region. Used when
+     *  a toast transitions to an urgent type (error/warning) after mount — the
+     *  toast's own aria-live change is unreliable across screen readers, so we
+     *  route the alert through a fresh region whose announcement behavior is
+     *  consistent. The clear-then-set pattern forces SRs that diff content to
+     *  treat the new text as a new announcement. */
+    announceUrgent(text: string): void;
+    dismissAll(): void;
+}
+export {};