@0001-labs/design-system-1 0.3.0-alpha.13 → 0.3.0-alpha.15

package/dist/0-face/theme-bootstrap.js

@@ -0,0 +1,214 @@
+/**
+ * Design system 1's theme, on before the first paint.
+ *
+ * A classic script for the <head>: inline it before the stylesheets, or load it
+ * there with a plain <script src> (not a module), which holds rendering until
+ * it has run. It needs nothing else and waits for nothing.
+ *
+ * It reads the stored choice, light, dark or system, and puts the theme on
+ * the root element at once (with nothing stored, `themeDefault`: system
+ * unless the product says light or dark):
+ * - the class `light-theme` or `dark-theme`, the canonical mark the
+ *   stylesheets key on;
+ * - `data-theme="light"` or `"dark"`, the same, for pages that key on it;
+ * - `color-scheme`, so light-dark() tokens and the browser's controls follow;
+ * - `--lightningcss-light` and `--lightningcss-dark`, so CSS compiled with
+ *   Lightning CSS's light-dark() fallback follows the choice, not the system;
+ * - the canvas behind the page and the theme-color meta, in the paper.
+ * It also sets `lang` from the language module's stored choice, or from the
+ * address when the product takes the language from there.
+ *
+ * Then it keeps the page right: in system mode it follows
+ * prefers-color-scheme as it changes, and it applies the choice again when
+ * another tab stores one and when a page returns from the back-forward cache.
+ * A change after the first paint crosses over in a view transition of the
+ * root, unless the reader asks for reduced motion.
+ *
+ * `window.DS_ONE_THEME` is the runtime: `mode()`, `theme()`, `set(mode)` and
+ * `apply()`; a change dispatches `theme-changed` on window with
+ * `{ theme, mode }`. `0-face/theme.ts` runs this same file, so the components
+ * and a page without them share one implementation, whichever loads first.
+ *
+ * Set options before it on `window.DS_ONE_PREFERENCES`: `themeStorageKey`
+ * (`"ds-one:theme"` by default), `themeDefault` (`"light"`, `"dark"` or
+ * `"system"`, the default) for a visitor who has chosen nothing yet,
+ * `themeMode: "system"` to follow the system and never read or write a stored
+ * choice, and `themePaper` as `{ light, dark }` colours for the canvas, or
+ * `false` to leave the background and theme-color to the page. The language
+ * follows `window.DS_ONE_I18N`: `storageKey` (`"language"`), `persist: false`,
+ * `languages`, `routing` with `languageFromAddress: true` (a prefix such as
+ * `/ja/…` wins over the stored choice), and `langTarget` (set, the root's
+ * `lang` is left alone).
+ */
+(function () {
+    if (typeof window === "undefined" || typeof document === "undefined" || window.DS_ONE_THEME)
+        return;
+    var root = document.documentElement;
+    var MODES = ["light", "dark", "system"];
+    // Design system 1's languages (0-face/languages.ts), the prefixes an address may carry by default.
+    var LANGUAGES = ["da", "de", "en", "es", "fi", "fr", "is", "it", "ja", "ko", "nb", "nn", "no", "pt", "pt-BR", "sv", "zh"];
+    var PAPER = { light: "#ffffff", dark: "#2a2a2a" };
+    // A choice that cannot be stored, or one made while the page follows the system, lasts for this page.
+    var session = null;
+    var shown = null;
+    var shownMode = null;
+    var crossing = null;
+    function options() { return window.DS_ONE_PREFERENCES || {}; }
+    function key() { return options().themeStorageKey || "ds-one:theme"; }
+    function query(media) {
+        try {
+            return window.matchMedia ? window.matchMedia(media) : null;
+        }
+        catch {
+            return null;
+        }
+    }
+    function mode() {
+        if (session)
+            return session;
+        if (options().themeMode === "system")
+            return "system";
+        try {
+            var stored = window.localStorage.getItem(key());
+            if (MODES.indexOf(stored) >= 0)
+                return stored;
+        }
+        catch { /* Storage can be blocked. */ }
+        var first = options().themeDefault;
+        return MODES.indexOf(first) >= 0 ? first : "system";
+    }
+    function resolve(choice) {
+        if (choice !== "system")
+            return choice;
+        var system = query("(prefers-color-scheme: dark)");
+        return system && system.matches ? "dark" : "light";
+    }
+    function paint(theme) {
+        root.classList.remove(theme === "dark" ? "light-theme" : "dark-theme");
+        root.classList.add(theme + "-theme");
+        root.setAttribute("data-theme", theme);
+        root.style.colorScheme = theme;
+        root.style.setProperty("--lightningcss-light", theme === "light" ? "initial" : " ");
+        root.style.setProperty("--lightningcss-dark", theme === "dark" ? "initial" : " ");
+        var paper = options().themePaper;
+        if (paper === false)
+            return;
+        var colour = (paper && paper[theme]) || PAPER[theme];
+        root.style.backgroundColor = colour;
+        var meta = document.querySelector('meta[name="theme-color"]:not([media])');
+        if (!meta && document.head) {
+            meta = document.createElement("meta");
+            meta.setAttribute("name", "theme-color");
+            document.head.appendChild(meta);
+        }
+        if (meta)
+            meta.setAttribute("content", colour);
+    }
+    // The two themes are two pictures of one page: cross from one to the other.
+    function cross(theme) {
+        var reduced = query("(prefers-reduced-motion: reduce)");
+        if (typeof document.startViewTransition !== "function" || (reduced && reduced.matches) || document.visibilityState === "hidden") {
+            paint(theme);
+            return;
+        }
+        if (crossing)
+            crossing.skipTransition();
+        var painted = false;
+        var once = function () { if (!painted) {
+            painted = true;
+            paint(theme);
+        } };
+        try {
+            var transition = document.startViewTransition(once);
+            crossing = transition;
+            // A skipped crossing rejects all three promises; none may swallow the change.
+            void transition.ready.catch(function () { });
+            void transition.updateCallbackDone.catch(once);
+            void transition.finished.catch(function () { }).then(function () { if (crossing === transition)
+                crossing = null; });
+        }
+        catch {
+            once();
+        }
+    }
+    function apply() {
+        var choice = mode();
+        var theme = resolve(choice);
+        var first = shown === null;
+        var moved = theme !== shown || choice !== shownMode;
+        if (!first && theme !== shown)
+            cross(theme);
+        else
+            paint(theme);
+        shown = theme;
+        shownMode = choice;
+        if (!first && moved)
+            window.dispatchEvent(new CustomEvent("theme-changed", { detail: { theme: theme, mode: choice } }));
+    }
+    function set(choice) {
+        if (MODES.indexOf(choice) < 0)
+            return;
+        session = null;
+        if (options().themeMode === "system") {
+            if (choice !== "system")
+                session = choice;
+        }
+        else {
+            try {
+                window.localStorage.setItem(key(), choice);
+            }
+            catch {
+                session = choice;
+            }
+        }
+        apply();
+    }
+    var i18n = window.DS_ONE_I18N || {};
+    // The language an address names in its first segment (`/pt-br/…` gives pt-BR), as the language module reads it.
+    function addressLanguage() {
+        if (!i18n.languageFromAddress)
+            return null;
+        var routing = i18n.routing || {};
+        var prefixed = (routing.languages && routing.languages.length ? routing.languages : null) || (i18n.languages && i18n.languages.length ? i18n.languages : null) || LANGUAGES;
+        var segment = String((window.location && window.location.pathname) || "").split("/")[1] || "";
+        var slug = segment.toLowerCase().replace(/_/g, "-");
+        if (!slug)
+            return null;
+        for (var index = 0; index < prefixed.length; index++) {
+            if (String(prefixed[index]).toLowerCase().replace(/_/g, "-") === slug)
+                return String(prefixed[index]);
+        }
+        return null;
+    }
+    function storedLanguage() {
+        if (i18n.persist === false)
+            return null;
+        try {
+            var language = window.localStorage.getItem(i18n.storageKey || "language");
+            if (language && (!i18n.languages || i18n.languages.indexOf(language) >= 0))
+                return language;
+        }
+        catch { /* Storage can be blocked. */ }
+        return null;
+    }
+    if (i18n.langTarget === undefined) {
+        var language = addressLanguage() || storedLanguage();
+        if (language && /^[a-z]{2,3}(-[A-Za-z0-9]{2,8})*$/.test(language))
+            root.lang = language;
+    }
+    window.DS_ONE_THEME = {
+        mode: function () { return shownMode; },
+        theme: function () { return shown; },
+        set: set,
+        apply: function () { apply(); },
+    };
+    apply();
+    var system = query("(prefers-color-scheme: dark)");
+    if (system && system.addEventListener)
+        system.addEventListener("change", function () { apply(); });
+    else if (system && system.addListener)
+        system.addListener(function () { apply(); });
+    window.addEventListener("storage", function (event) { if (event.key === null || event.key === key())
+        apply(); });
+    window.addEventListener("pageshow", function () { apply(); });
+})();

package/dist/0-face/theme.d.ts

@@ -1,4 +1,36 @@
+import "./theme-bootstrap.js";
+/** The theme on the page. */
 export type ThemeType = "light" | "dark";
+/** The stored choice: a theme, or the system's. */
+export type ThemeMode = ThemeType | "system";
+export declare const THEME_MODES: readonly ThemeMode[];
+/** `window.DS_ONE_THEME`, installed by `theme-bootstrap.js`. */
+export interface ThemeRuntime {
+    /** The choice in effect: light, dark or system. */
+    mode(): ThemeMode;
+    /** The theme on the page. */
+    theme(): ThemeType;
+    /** Choose and remember light, dark or system, and put it on the page. */
+    set(mode: ThemeMode): void;
+    /** Read the stored choice, the options and the system again, and put them on the page. */
+    apply(): void;
+}
+declare global {
+    interface Window {
+        DS_ONE_THEME?: ThemeRuntime;
+    }
+}
 export declare const currentTheme: import("@lit-labs/signals").Signal.State<ThemeType>;
+export declare const currentThemeMode: import("@lit-labs/signals").Signal.State<ThemeMode>;
+export declare function getThemeMode(): ThemeMode;
+/** Choose light, dark or system, store it and put it on the page; `theme-changed` follows a change. */
+export declare function setThemeMode(mode: ThemeMode): void;
+/** Choose light or dark. `setThemeMode("system")` hands the choice back to the system. */
 export declare function setTheme(theme: ThemeType): void;
+/**
+ * Bind an automatic surface to system appearance, leaving stored choices
+ * intact: nothing is read from or written to storage until the returned
+ * function hands the page back to its stored choice.
+ */
+export declare function followSystemTheme(): () => void;
 //# sourceMappingURL=theme.d.ts.map

package/dist/0-face/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../DS1/0-face/theme.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAkBzC,eAAO,MAAM,YAAY,qDAAuC,CAAC;AAEjE,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAwB/C"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../DS1/0-face/theme.ts"],"names":[],"mappings":"AAqBA,OAAO,sBAAsB,CAAC;AAG9B,6BAA6B;AAC7B,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AACzC,mDAAmD;AACnD,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC7C,eAAO,MAAM,WAAW,EAAE,SAAS,SAAS,EAAgC,CAAC;AAE7E,gEAAgE;AAChE,MAAM,WAAW,YAAY;IAC3B,mDAAmD;IACnD,IAAI,IAAI,SAAS,CAAC;IAClB,6BAA6B;IAC7B,KAAK,IAAI,SAAS,CAAC;IACnB,yEAAyE;IACzE,GAAG,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC;IAC3B,0FAA0F;IAC1F,KAAK,IAAI,IAAI,CAAC;CACf;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QAAG,YAAY,CAAC,EAAE,YAAY,CAAC;KAAE;CAClD;AASD,eAAO,MAAM,YAAY,qDAAmD,CAAC;AAC7E,eAAO,MAAM,gBAAgB,qDAAmD,CAAC;AAWjF,wBAAgB,YAAY,IAAI,SAAS,CAExC;AAED,uGAAuG;AACvG,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,CAGlD;AAED,0FAA0F;AAC1F,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAE/C;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,IAAI,CAc9C"}

package/dist/0-face/theme.js

@@ -1,48 +1,74 @@
+/**
+ * Light, dark or system, remembered in one stored choice.
+ *
+ * The runtime is `theme-bootstrap.js`, the classic script a page inlines in
+ * its <head> so the first paint is already in the chosen theme. Imported here
+ * as well, it installs itself when the page did not inline it, so the
+ * components and a page without them share one implementation. This module
+ * mirrors it in signals for the components.
+ *
+ * The theme is marked on the root element by the class `light-theme` or
+ * `dark-theme` (canonical), `data-theme="light|dark"` (for pages that key on
+ * the attribute) and `color-scheme`. In system mode it follows
+ * prefers-color-scheme as it changes. A visitor who has chosen nothing sees
+ * `themeDefault` from `window.DS_ONE_PREFERENCES` (system unless the product
+ * says light or dark).
+ *
+ * A page without the components copies it with Sync 1's `root` export,
+ * `"modules": ["theme"]` (this file, the head script and the options type);
+ * it needs `@lit-labs/signals`.
+ */
 import { signal } from "@lit-labs/signals";
-import { preferenceStorageKey } from "./preferences";
-function getInitialTheme() {
-    if (typeof window === "undefined") {
-        return "light";
-    }
-    let storedTheme = null;
-    try {
-        storedTheme = window.localStorage?.getItem(preferenceStorageKey("theme"));
-    }
-    catch { /* Storage can be unavailable. */ }
-    if (storedTheme === "light" || storedTheme === "dark") {
-        return storedTheme;
-    }
-    // Check system preference
-    const prefersDark = window.matchMedia?.("(prefers-color-scheme: dark)").matches;
-    return prefersDark ? "dark" : "light";
+import "./theme-bootstrap.js";
+export const THEME_MODES = ["light", "dark", "system"];
+function runtime() {
+    return typeof window === "undefined" ? undefined : window.DS_ONE_THEME;
 }
-export const currentTheme = signal(getInitialTheme());
-export function setTheme(theme) {
-    if (theme === currentTheme.get()) {
+// Options set since the head script ran (a product's storage key, system mode) take effect now.
+runtime()?.apply();
+export const currentTheme = signal(runtime()?.theme() ?? "light");
+export const currentThemeMode = signal(runtime()?.mode() ?? "system");
+function sync() {
+    const theme = runtime();
+    if (!theme)
         return;
-    }
-    currentTheme.set(theme);
-    if (typeof window !== "undefined") {
-        try {
-            window.localStorage?.setItem(preferenceStorageKey("theme"), theme);
-        }
-        catch (error) {
-            console.warn("ds-one: unable to persist theme preference", error);
-        }
-        const root = window.document?.documentElement;
-        if (root) {
-            root.classList.remove("light-theme", "dark-theme");
-            root.classList.add(`${theme}-theme`);
-        }
-        window.dispatchEvent(new CustomEvent("theme-changed", { detail: { theme } }));
-    }
+    currentTheme.set(theme.theme());
+    currentThemeMode.set(theme.mode());
+}
+if (typeof window !== "undefined")
+    window.addEventListener("theme-changed", sync);
+export function getThemeMode() {
+    return runtime()?.mode() ?? currentThemeMode.get();
+}
+/** Choose light, dark or system, store it and put it on the page; `theme-changed` follows a change. */
+export function setThemeMode(mode) {
+    runtime()?.set(mode);
+    sync();
+}
+/** Choose light or dark. `setThemeMode("system")` hands the choice back to the system. */
+export function setTheme(theme) {
+    setThemeMode(theme);
 }
-// Initialize theme on load
-if (typeof window !== "undefined") {
-    const theme = currentTheme.get();
-    const root = window.document?.documentElement;
-    if (root) {
-        root.classList.remove("light-theme", "dark-theme");
-        root.classList.add(`${theme}-theme`);
-    }
+/**
+ * Bind an automatic surface to system appearance, leaving stored choices
+ * intact: nothing is read from or written to storage until the returned
+ * function hands the page back to its stored choice.
+ */
+export function followSystemTheme() {
+    if (typeof window === "undefined")
+        return () => { };
+    const previous = window.DS_ONE_PREFERENCES?.themeMode;
+    const following = { ...window.DS_ONE_PREFERENCES, themeMode: "system" };
+    window.DS_ONE_PREFERENCES = following;
+    setThemeMode("system");
+    return () => {
+        const options = { ...window.DS_ONE_PREFERENCES };
+        if (previous)
+            options.themeMode = previous;
+        else
+            delete options.themeMode;
+        window.DS_ONE_PREFERENCES = options;
+        runtime()?.apply();
+        sync();
+    };
 }

package/dist/0-face/toast-queue.d.ts

@@ -0,0 +1,110 @@
+/**
+ * The toasts' queue: Sonner's `toast()` calls and the observer that carries
+ * them to whatever draws the stack, with no framework.
+ *
+ * BASED ON SONNER, the React toast library by Emil Kowalski
+ * (https://sonner.emilkowal.ski, https://github.com/emilkowalski/sonner, MIT
+ * licence). The calls, their options and their ids are Sonner's, so Sonner's
+ * documentation describes them.
+ *
+ * Two toasters draw what it sends, in the same look: `<ds-toast>`
+ * (`2-core/ds-toast.ts`, Lit) and the page toaster (`0-face/toaster.ts`, no
+ * framework). A page shows one stack whichever it loads: a `<ds-toast>` in the
+ * page takes every toast, the page toaster draws only when there is none, and
+ * `toast()` with no toaster listening adds a `<ds-toast>` when the element is
+ * registered and the page toaster otherwise.
+ *
+ * The queue lives on `globalThis`, so two copies of this module (a product
+ * that vendors Design system 1 in two folders) still feed one stack.
+ *
+ * Where it departs from Sonner: an error is announced assertively unless it
+ * says `important: false`.
+ */
+export type ToastId = string | number;
+export type ToastType = "default" | "success" | "info" | "warning" | "error" | "loading";
+export type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+/**
+ * A button in a toast. Clicking it closes the toast unless `onClick` calls
+ * `preventDefault()`, as in Sonner. With `href` it is a link instead (not in
+ * Sonner), which still closes the toast as the page follows it.
+ */
+export interface ToastButton {
+    label: string;
+    onClick?: (event: MouseEvent) => void;
+    href?: string;
+}
+export interface ToastOptions {
+    /** Reuse an id to update a toast in place, as Sonner does. */
+    id?: ToastId;
+    description?: string;
+    /** Milliseconds; `Infinity` keeps the toast until it is dismissed. */
+    duration?: number;
+    /** A Design system 1 icon name, replacing the type's icon. */
+    icon?: string;
+    action?: ToastButton;
+    cancel?: ToastButton;
+    /** False keeps the toast from being swiped or closed by a person. */
+    dismissible?: boolean;
+    closeButton?: boolean;
+    /** Announced assertively instead of politely. Errors are, unless this is false. */
+    important?: boolean;
+    onDismiss?: (toast: ToastData) => void;
+    onAutoClose?: (toast: ToastData) => void;
+}
+export interface ToastData extends ToastOptions {
+    id: ToastId;
+    title: string;
+    type: ToastType;
+}
+type Message<T> = string | ((value: T) => string);
+export interface ToastPromiseMessages<T> extends ToastOptions {
+    loading: string;
+    success: Message<T>;
+    error: Message<unknown>;
+    finally?: () => void;
+}
+/** What a toaster hears: a toast to show or update, or a dismissal (every toast when the id is undefined). */
+export type ToastSignal = {
+    toast: ToastData;
+} | {
+    dismiss: ToastId | undefined;
+};
+type Listener = (signal: ToastSignal) => void;
+/** Sonner's constants, shared by both toasters; its gap and offset are rounded to squares in the stylesheet. */
+export declare const TOAST_DURATION: number;
+export declare const VISIBLE_TOASTS = 3;
+export declare const TIME_BEFORE_UNMOUNT = 200;
+export declare const SWIPE_THRESHOLD = 45;
+export declare const SWIPE_VELOCITY = 0.11;
+/** The Design system 1 icon each type shows. */
+export declare const TOAST_ICONS: Partial<Record<ToastType, string>>;
+/**
+ * Listen for toasts. A `<ds-toast>` listens as a toaster; the page toaster
+ * listens as the fallback, hearing new toasts only while no toaster listens.
+ * Returns the function that stops listening.
+ */
+export declare function listenForToasts(listener: Listener, { fallback }?: {
+    fallback?: boolean;
+}): () => void;
+/**
+ * Whether a toast shown now is drawn: a toaster listens, the page toaster is
+ * loaded, or `<ds-toast>` is registered (and so is added to the page).
+ */
+export declare function toasterListening(): boolean;
+/** How the page toaster mounts itself when a toast arrives and nothing draws it. */
+export declare function setFallbackToaster(mount: () => void): void;
+/** Show a toast, as Sonner's `toast()`. Returns its id. */
+export declare const toast: ((title: string, options?: ToastOptions) => ToastId) & {
+    message: (title: string, options?: ToastOptions) => ToastId;
+    success: (title: string, options?: ToastOptions) => ToastId;
+    info: (title: string, options?: ToastOptions) => ToastId;
+    warning: (title: string, options?: ToastOptions) => ToastId;
+    error: (title: string, options?: ToastOptions) => ToastId;
+    loading: (title: string, options?: ToastOptions) => ToastId;
+    /** A loading toast that becomes a success or an error when the promise settles. */
+    promise<T>(promise: Promise<T> | (() => Promise<T>), messages: ToastPromiseMessages<T>): ToastId;
+    /** Dismiss one toast, or every toast without an id. */
+    dismiss(id?: ToastId): ToastId | undefined;
+};
+export {};
+//# sourceMappingURL=toast-queue.d.ts.map

package/dist/0-face/toast-queue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-queue.d.ts","sourceRoot":"","sources":["../../DS1/0-face/toast-queue.ts"],"names":[],"mappings":"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"}

package/dist/0-face/toast-queue.js

@@ -0,0 +1,98 @@
+/**
+ * The toasts' queue: Sonner's `toast()` calls and the observer that carries
+ * them to whatever draws the stack, with no framework.
+ *
+ * BASED ON SONNER, the React toast library by Emil Kowalski
+ * (https://sonner.emilkowal.ski, https://github.com/emilkowalski/sonner, MIT
+ * licence). The calls, their options and their ids are Sonner's, so Sonner's
+ * documentation describes them.
+ *
+ * Two toasters draw what it sends, in the same look: `<ds-toast>`
+ * (`2-core/ds-toast.ts`, Lit) and the page toaster (`0-face/toaster.ts`, no
+ * framework). A page shows one stack whichever it loads: a `<ds-toast>` in the
+ * page takes every toast, the page toaster draws only when there is none, and
+ * `toast()` with no toaster listening adds a `<ds-toast>` when the element is
+ * registered and the page toaster otherwise.
+ *
+ * The queue lives on `globalThis`, so two copies of this module (a product
+ * that vendors Design system 1 in two folders) still feed one stack.
+ *
+ * Where it departs from Sonner: an error is announced assertively unless it
+ * says `important: false`.
+ */
+/** Sonner's constants, shared by both toasters; its gap and offset are rounded to squares in the stylesheet. */
+export const TOAST_DURATION = Infinity;
+export const VISIBLE_TOASTS = 3;
+export const TIME_BEFORE_UNMOUNT = 200;
+export const SWIPE_THRESHOLD = 45;
+export const SWIPE_VELOCITY = 0.11;
+/** The Design system 1 icon each type shows. */
+export const TOAST_ICONS = { success: "check", info: "notifications", warning: "warning", error: "warning" };
+const QUEUE = Symbol.for("design-system-1.toasts");
+function queue() {
+    const scope = globalThis;
+    return (scope[QUEUE] ?? (scope[QUEUE] = { toasters: new Set(), fallbacks: new Set(), lastId: 0 }));
+}
+/**
+ * Listen for toasts. A `<ds-toast>` listens as a toaster; the page toaster
+ * listens as the fallback, hearing new toasts only while no toaster listens.
+ * Returns the function that stops listening.
+ */
+export function listenForToasts(listener, { fallback = false } = {}) {
+    const listeners = fallback ? queue().fallbacks : queue().toasters;
+    listeners.add(listener);
+    return () => { listeners.delete(listener); };
+}
+/**
+ * Whether a toast shown now is drawn: a toaster listens, the page toaster is
+ * loaded, or `<ds-toast>` is registered (and so is added to the page).
+ */
+export function toasterListening() {
+    const state = queue();
+    return state.toasters.size > 0 || state.fallbacks.size > 0 || !!state.mountFallback || (typeof customElements !== "undefined" && !!customElements.get("ds-toast"));
+}
+/** How the page toaster mounts itself when a toast arrives and nothing draws it. */
+export function setFallbackToaster(mount) {
+    queue().mountFallback = mount;
+}
+function show(title, type, options = {}) {
+    const state = queue();
+    const id = options.id ?? ++state.lastId;
+    if (!state.toasters.size && typeof document !== "undefined" && document.body) {
+        if (typeof customElements !== "undefined" && customElements.get("ds-toast"))
+            document.body.appendChild(document.createElement("ds-toast"));
+        else if (!state.fallbacks.size)
+            state.mountFallback?.();
+    }
+    const important = options.important ?? (type === "error" ? true : undefined);
+    const data = { ...options, ...(important === undefined ? {} : { important }), id, title, type };
+    // A copy: a listener may add or remove listeners while it hears the toast.
+    for (const listener of Array.from(state.toasters.size ? state.toasters : state.fallbacks))
+        listener({ toast: data });
+    return id;
+}
+/** Show a toast, as Sonner's `toast()`. Returns its id. */
+export const toast = Object.assign((title, options) => show(title, "default", options), {
+    message: (title, options) => show(title, "default", options),
+    success: (title, options) => show(title, "success", options),
+    info: (title, options) => show(title, "info", options),
+    warning: (title, options) => show(title, "warning", options),
+    error: (title, options) => show(title, "error", options),
+    loading: (title, options) => show(title, "loading", options),
+    /** A loading toast that becomes a success or an error when the promise settles. */
+    promise(promise, messages) {
+        const { loading, success, error, finally: done, ...options } = messages;
+        const id = show(loading, "loading", options);
+        Promise.resolve(typeof promise === "function" ? promise() : promise)
+            .then(value => { show(typeof success === "function" ? success(value) : success, "success", { ...options, id }); }, reason => { show(typeof error === "function" ? error(reason) : error, "error", { ...options, id }); })
+            .finally(() => done?.());
+        return id;
+    },
+    /** Dismiss one toast, or every toast without an id. */
+    dismiss(id) {
+        const state = queue();
+        for (const listener of [...state.toasters, ...state.fallbacks])
+            listener({ dismiss: id });
+        return id;
+    },
+});

package/dist/0-face/toaster.d.ts

@@ -0,0 +1,27 @@
+import type { ToastPosition } from "./toast-queue";
+export { toast } from "./toast-queue";
+export type { ToastButton, ToastData, ToastId, ToastOptions, ToastPosition, ToastPromiseMessages, ToastType } from "./toast-queue";
+/** Sonner's `<Toaster />` props, for the page toaster. */
+export interface ToasterOptions {
+    /** `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center` or `bottom-right` (the default). */
+    position?: ToastPosition;
+    /** Keep the toasts spread out instead of stacked. */
+    expand?: boolean;
+    /** How many show at once; three by default. */
+    visibleToasts?: number;
+    /** Milliseconds each toast stays; Infinity by default, until dismissed. */
+    duration?: number;
+    /** A close button on every toast. */
+    closeButton?: boolean;
+    /** Fill success, info, warning and error toasts with their colour. */
+    richColors?: boolean;
+    /** The region's accessible name; the shared word "Notifications" by default. */
+    label?: string;
+    /** The close button's accessible name; the shared word "Close" by default. */
+    closeLabel?: string;
+}
+/** Set the page toaster's options, as Sonner's `<Toaster />` props. Toasts already shown take them at once. */
+export declare function configureToaster(options: ToasterOptions): void;
+/** The page toaster, put in the page when it is first needed. */
+export declare function pageToaster(): HTMLElement | undefined;
+//# sourceMappingURL=toaster.d.ts.map

package/dist/0-face/toaster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toaster.d.ts","sourceRoot":"","sources":["../../DS1/0-face/toaster.ts"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAmC,aAAa,EAAe,MAAM,eAAe,CAAC;AAEjG,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAEnI,0DAA0D;AAC1D,MAAM,WAAW,cAAc;IAC7B,6GAA6G;IAC7G,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sEAAsE;IACtE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAeD,+GAA+G;AAC/G,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAG9D;AAiSD,iEAAiE;AACjE,wBAAgB,WAAW,IAAI,WAAW,GAAG,SAAS,CAKrD"}