@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/collection/components/sui-toast/sui-toast.js

@@ -0,0 +1,729 @@
+import { Host, h } from "@stencil/core";
+import { SUI_TOAST_POSITIONS, groupByPosition, toast as toastStore, } from "./sui-toast.data";
+/**
+ * `<sui-toast>` — SUI Design System (SUI Design System 2.0). COMPUESTO + outlet.
+ *
+ * Homologado con el SUI Angular (`lib/sui-toast/`): el service `SuiToastService`
+ * (acá el store `toast` de `sui-toast.data.ts`) + el outlet, que en Angular se
+ * llama `<sui-toast-outlet>` y acá conserva la etiqueta `<sui-toast>`. Misma API
+ * imperativa (`toast.success/error/info/warning/feature/show/dismiss`), mismas
+ * 5 variantes × 5 estilos × 6 posiciones, mismos defaults y mismo comportamiento
+ * de stack Sonner-style. El visual de cada toast lo da el primitivo ya portado
+ * `<sui-alert size="large">` (NO se re-implementa) + `<sui-link-button>` para la
+ * action + `<sui-compact-button>` para la X (se ve de 20; se toca en 40 × 40 y
+ * en 44 × 44 en el teléfono). El accent del DS es NARANJA brand (#fa7319).
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO · node 169:2399 (Toast section).
+ *
+ * USO (montar una sola vez en el root de la app):
+ *
+ *   <sui-toast></sui-toast>
+ *
+ * y desde cualquier lado, imperativo:
+ *
+ *   import { toast } from '@sui/components/sui-toast/sui-toast.data';
+ *   toast.success('Guardado');
+ *   toast.error('Falló', { description: '...', action: { label: 'Reintentar', onClick } });
+ *
+ * El componente NO crea toasts: lee del store singleton (`toast`) y renderiza la
+ * stack. Es el equivalente exacto del `SuiToastOutlet` Angular. También expone
+ * los métodos imperativos como `@Method` async sobre el elemento (`el.success(...)`)
+ * para consumers que prefieran no importar el store.
+ *
+ * El outlet maneja (espejo del Angular):
+ *   - Stack positioning (6 esquinas, mobile full-width)
+ *   - ResizeObserver per-slot → gap preciso en expand
+ *   - Expand on hover/touch con persistence 1.2s tras dismiss
+ *   - Auto-dismiss timers per toast (no en el store) → exit suave Sonner-style
+ *   - Leaving / manual-dismiss states (CSS class + remove diferido)
+ *
+ * `scoped: true` (light DOM, NO shadow): los `<sui-alert>` internos heredan
+ * tokens/font del global; el slot/styling de contenido proyectado transla limpio.
+ * Misma estrategia que el resto del DS Stencil.
+ */
+export class SuiToast {
+    constructor() {
+        /**
+         * Posición default global aplicada a los toasts creados sin `position`
+         * explícita. Default `bottom-right`. Equivale a `svc.setDefaultPosition()`.
+         * En HTML el atributo es `default-position`.
+         */
+        this.defaultPosition = 'bottom-right';
+        /**
+         * Offset bottom (px) cuando hay una tab bar nativa liquid-glass activa
+         * (iOS 26+). En Angular venía de `LiquidGlassService.tabBarHeight()`. Acá se
+         * expone como @Prop para que el host de la app lo setee. 0 = sin tab bar.
+         */
+        this.tabBarOffset = 0;
+        /** Nombre accesible de la pila (`textos.notificacion.region` del SUI Angular). */
+        this.regionLabel = 'Notificaciones';
+        /** Nombre accesible de la X de cerrar (`textos.comun.cerrar` del SUI Angular). */
+        this.closeLabel = 'Cerrar';
+        /** Array de toasts vivo (mirror del store, vía subscribe). */
+        this.toasts = [];
+        /** Posiciones expandidas (hover / touch / pin tras dismiss). */
+        this.expandedPositions = new Set();
+        /** Ids en fade-out (Sonner-style). CSS aplica la transition; tras
+         *  EXIT_DURATION_MS sucede el remove real del store. */
+        this.leavingIds = new Set();
+        /** Ids cerrados MANUALMENTE (click X) → siempre slide-out completo 100%. */
+        this.manuallyDismissedIds = new Set();
+        /** Altura real medida per slot (ResizeObserver) → gap preciso en expand. */
+        this.slotHeights = new Map();
+        this.positions = SUI_TOAST_POSITIONS;
+        this.toastGap = 10;
+        /** Match con `TIME_BEFORE_UNMOUNT` de Sonner. La transition CSS tiene opacity
+         *  200ms + transform 500ms: a los 200ms el opacity ya llegó a 0 (invisible)
+         *  → remove del DOM ahí. La transform restante corre con el element ya fuera
+         *  pero el animator visual retiene el rendering. Snappy + smooth. */
+        this.EXIT_DURATION_MS = 200;
+        this.observedSlots = new Map();
+        /* Timers per-toast (auto-dismiss) y per-position (collapse tras hover/pin). */
+        this.dismissTimers = new Map();
+        this.collapseTimers = new Map();
+        /* Cache de offset/index del toast cuando entra en leaving — así no recalcula
+           durante la salida y mantiene su posición visual última. */
+        this.storedLeavingOffset = new Map();
+        this.storedLeavingIndex = new Map();
+    }
+    // ── Lifecycle ───────────────────────────────────────────────────────────────
+    onDefaultPositionChange(position) {
+        toastStore.setDefaultPosition(position);
+    }
+    connectedCallback() {
+        /* Propaga el default-position al store (espeja setDefaultPosition). */
+        toastStore.setDefaultPosition(this.defaultPosition);
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                const updates = new Map(this.slotHeights);
+                let changed = false;
+                for (const entry of entries) {
+                    const target = entry.target;
+                    const id = target.dataset.toastId;
+                    if (!id)
+                        continue;
+                    const hgt = entry.contentRect.height;
+                    if (updates.get(id) !== hgt) {
+                        updates.set(id, hgt);
+                        changed = true;
+                    }
+                }
+                if (changed)
+                    this.slotHeights = updates;
+            });
+        }
+        this.unsubscribe = toastStore.subscribe((toasts) => {
+            this.toasts = toasts;
+            this.scheduleAutoDismiss(toasts);
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        for (const t of this.collapseTimers.values())
+            clearTimeout(t);
+        for (const t of this.dismissTimers.values())
+            clearTimeout(t);
+        this.collapseTimers.clear();
+        this.dismissTimers.clear();
+        this.observedSlots.clear();
+    }
+    componentDidRender() {
+        /* Sincroniza el ResizeObserver con los slots actuales del DOM (espeja el
+           `syncObserver` effect del Angular). Observa los nuevos, desobserva los
+           removidos y limpia su altura cacheada. */
+        if (!this.resizeObserver)
+            return;
+        const slots = Array.from(this.el.querySelectorAll('.sui-toast-slot'));
+        const currentIds = new Set();
+        for (const slotEl of slots) {
+            const id = slotEl.dataset.toastId;
+            if (!id)
+                continue;
+            currentIds.add(id);
+            if (!this.observedSlots.has(id)) {
+                this.observedSlots.set(id, slotEl);
+                this.resizeObserver.observe(slotEl);
+            }
+        }
+        let removedHeight = false;
+        const nextHeights = new Map(this.slotHeights);
+        for (const [id, slotEl] of Array.from(this.observedSlots.entries())) {
+            if (!currentIds.has(id)) {
+                this.resizeObserver.unobserve(slotEl);
+                this.observedSlots.delete(id);
+                if (nextHeights.delete(id))
+                    removedHeight = true;
+            }
+        }
+        if (removedHeight)
+            this.slotHeights = nextHeights;
+    }
+    // ── API imperativa (también disponible vía el store importado) ────────────────
+    /** Crea un toast con config completa. Devuelve su id. */
+    async show(config) {
+        return toastStore.show(config);
+    }
+    async success(title, opts) {
+        return toastStore.success(title, opts);
+    }
+    async error(title, opts) {
+        return toastStore.error(title, opts);
+    }
+    async info(title, opts) {
+        return toastStore.info(title, opts);
+    }
+    async warning(title, opts) {
+        return toastStore.warning(title, opts);
+    }
+    async feature(title, opts) {
+        return toastStore.feature(title, opts);
+    }
+    /** Cierra un toast por id (con exit animation Sonner-style). */
+    async dismiss(id) {
+        const item = this.toasts.find((t) => t.id === id);
+        if (item)
+            this.dismissItem(item);
+        else
+            toastStore.dismiss(id);
+    }
+    // ── Derived ───────────────────────────────────────────────────────────────────
+    get toastsByPosition() {
+        return groupByPosition(this.toasts);
+    }
+    get liquidTabOffset() {
+        return this.tabBarOffset > 0 ? this.tabBarOffset + 8 : 0;
+    }
+    get tabBarActive() {
+        return this.tabBarOffset > 0;
+    }
+    isExpanded(position) {
+        return this.expandedPositions.has(position);
+    }
+    isLeaving(id) {
+        return this.leavingIds.has(id);
+    }
+    isManuallyDismissed(id) {
+        return this.manuallyDismissedIds.has(id);
+    }
+    /** Index "visual" del toast: ignora los leaving para que los otros
+     *  reacomoden EN PARALELO con el fade-out, no en serie. */
+    computeVisualIndex(toast) {
+        var _a;
+        if (this.isLeaving(toast.id)) {
+            return (_a = this.storedLeavingIndex.get(toast.id)) !== null && _a !== void 0 ? _a : 0;
+        }
+        const list = this.toastsByPosition[toast.position];
+        const visibles = list.filter((t) => !this.leavingIds.has(t.id));
+        return visibles.indexOf(toast);
+    }
+    /** Offset px del toast al expandirse (suma alturas reales + gaps). Si está
+     *  leaving usa el offset cacheado para no moverse durante el fade-out. */
+    computeExpandOffset(toast) {
+        var _a, _b;
+        if (this.isLeaving(toast.id)) {
+            return (_a = this.storedLeavingOffset.get(toast.id)) !== null && _a !== void 0 ? _a : 0;
+        }
+        const list = this.toastsByPosition[toast.position];
+        const visibles = list.filter((t) => !this.leavingIds.has(t.id));
+        const idx = visibles.indexOf(toast);
+        if (idx <= 0)
+            return 0;
+        let offset = 0;
+        for (let i = 0; i < idx; i++) {
+            offset += (_b = this.slotHeights.get(visibles[i].id)) !== null && _b !== void 0 ? _b : 90;
+        }
+        offset += idx * this.toastGap;
+        return offset;
+    }
+    // ── Expand state (hover / touch / pin) ─────────────────────────────────────────
+    onStackEnter(position) {
+        const existing = this.collapseTimers.get(position);
+        if (existing)
+            clearTimeout(existing);
+        this.collapseTimers.delete(position);
+        if (!this.expandedPositions.has(position)) {
+            const ns = new Set(this.expandedPositions);
+            ns.add(position);
+            this.expandedPositions = ns;
+        }
+    }
+    onStackLeave(position) {
+        const existing = this.collapseTimers.get(position);
+        if (existing)
+            clearTimeout(existing);
+        const timer = setTimeout(() => {
+            const ns = new Set(this.expandedPositions);
+            ns.delete(position);
+            this.expandedPositions = ns;
+            this.collapseTimers.delete(position);
+        }, 400);
+        this.collapseTimers.set(position, timer);
+    }
+    // ── Auto-dismiss timers ─────────────────────────────────────────────────────────
+    scheduleAutoDismiss(toasts) {
+        const currentIds = new Set();
+        for (const toast of toasts) {
+            currentIds.add(toast.id);
+            if (this.dismissTimers.has(toast.id))
+                continue;
+            if (toast.duration === Infinity)
+                continue;
+            const remaining = Math.max(0, toast.duration - (Date.now() - toast.createdAt));
+            const timer = setTimeout(() => {
+                this.dismissTimers.delete(toast.id);
+                this.dismissItem(toast);
+            }, remaining);
+            this.dismissTimers.set(toast.id, timer);
+        }
+        /* Cleanup timers de toasts que ya no existen. */
+        for (const [id, t] of Array.from(this.dismissTimers.entries())) {
+            if (!currentIds.has(id)) {
+                clearTimeout(t);
+                this.dismissTimers.delete(id);
+            }
+        }
+    }
+    // ── Dismiss flow (Sonner-style: leaving CSS class + remove diferido) ─────────────
+    /** Dismiss disparado por click X manual. Marca como manual (CSS slide-out
+     *  completo) y delega al dismiss normal. */
+    dismissManual(toast) {
+        const ns = new Set(this.manuallyDismissedIds);
+        ns.add(toast.id);
+        this.manuallyDismissedIds = ns;
+        this.dismissItem(toast);
+    }
+    /**
+     * Dismiss un toast con exit animation.
+     *   1) Cancela el auto-dismiss timer si existe
+     *   2) Cachea offset/index ANTES de marcar leaving (sino los pierde)
+     *   3) Marca leaving → CSS aplica `.sui-toast-slot--leaving` con la transition
+     *   4) Pin expanded 1.2s si quedan más toasts en esa posición
+     *   5) Tras EXIT_DURATION_MS, remove real del store
+     */
+    dismissItem(toast) {
+        const position = toast.position;
+        const id = toast.id;
+        const autoTimer = this.dismissTimers.get(id);
+        if (autoTimer) {
+            clearTimeout(autoTimer);
+            this.dismissTimers.delete(id);
+        }
+        if (this.leavingIds.has(id))
+            return;
+        this.storedLeavingOffset.set(id, this.computeExpandOffset(toast));
+        this.storedLeavingIndex.set(id, this.computeVisualIndex(toast));
+        const leaving = new Set(this.leavingIds);
+        leaving.add(id);
+        this.leavingIds = leaving;
+        const remaining = this.toastsByPosition[position].length - 1;
+        if (remaining > 0) {
+            const existing = this.collapseTimers.get(position);
+            if (existing)
+                clearTimeout(existing);
+            const pinned = new Set(this.expandedPositions);
+            pinned.add(position);
+            this.expandedPositions = pinned;
+            const timer = setTimeout(() => {
+                const ns = new Set(this.expandedPositions);
+                ns.delete(position);
+                this.expandedPositions = ns;
+                this.collapseTimers.delete(position);
+            }, 1200);
+            this.collapseTimers.set(position, timer);
+        }
+        setTimeout(() => {
+            const ns = new Set(this.leavingIds);
+            ns.delete(id);
+            this.leavingIds = ns;
+            this.storedLeavingOffset.delete(id);
+            this.storedLeavingIndex.delete(id);
+            if (this.manuallyDismissedIds.has(id)) {
+                const md = new Set(this.manuallyDismissedIds);
+                md.delete(id);
+                this.manuallyDismissedIds = md;
+            }
+            toastStore.dismiss(id);
+        }, this.EXIT_DURATION_MS);
+    }
+    onAction(toast) {
+        var _a, _b;
+        (_a = toast.action) === null || _a === void 0 ? void 0 : _a.onClick();
+        if (!((_b = toast.action) === null || _b === void 0 ? void 0 : _b.keepOpen))
+            this.dismissItem(toast);
+    }
+    // ── Render ──────────────────────────────────────────────────────────────────────
+    render() {
+        const byPos = this.toastsByPosition;
+        return (h(Host, { key: '2d35deb05f51568115f6a6f434615948ad4f93b7', class: { 'sui-toast-outlet--native-tab': this.tabBarActive }, style: { '--sui-toast-bottom-offset': `${this.liquidTabOffset}px` } }, this.positions.map((pos) => {
+            const list = byPos[pos];
+            if (list.length === 0)
+                return null;
+            return (h("div", { class: "sui-toast-stack", "data-sui-position": pos, "data-expanded": this.isExpanded(pos) ? 'true' : 'false', style: { '--sui-toast-count': `${list.length}` }, onMouseEnter: () => this.onStackEnter(pos), onMouseLeave: () => this.onStackLeave(pos), onTouchStart: () => this.onStackEnter(pos), "aria-live": "polite", "aria-label": this.regionLabel }, list.map((toast) => {
+                var _a;
+                const visualIndex = this.computeVisualIndex(toast);
+                const offset = this.computeExpandOffset(toast);
+                return (h("div", { key: toast.id, class: {
+                        'sui-toast-slot': true,
+                        'sui-toast-slot--leaving': this.isLeaving(toast.id),
+                        'sui-toast-slot--manual-dismiss': this.isManuallyDismissed(toast.id),
+                    }, role: "status", "data-toast-id": toast.id, "data-toast-style": toast.style, "data-front": visualIndex === 0 ? 'true' : 'false', style: {
+                        '--toast-index': `${visualIndex}`,
+                        '--toast-offset': `${offset}px`,
+                    } }, h("sui-alert", { variant: toast.variant, variantStyle: toast.style, size: "large", heading: toast.title, description: (_a = toast.description) !== null && _a !== void 0 ? _a : undefined, dismissible: false, showIcon: true, ariaRole: 'none' }, toast.action && (h("sui-link-button", { slot: "action", variant: "modifiable", size: "medium", underline: true, onClicked: () => this.onAction(toast) }, toast.action.label))), toast.dismissible && (
+                // click nativo en el host (no `clicked`): también cuenta el área táctil ::before del host.
+                h("sui-compact-button", { class: "sui-toast-slot__close", icon: "close-line", variantStyle: "modifiable", size: "medium", ariaLabel: this.closeLabel, onClick: () => this.dismissManual(toast) }))));
+            })));
+        })));
+    }
+    static get is() { return "sui-toast"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-toast.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-toast.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "defaultPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiToastPosition",
+                    "resolved": "\"bottom-center\" | \"bottom-left\" | \"bottom-right\" | \"top-center\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "SuiToastPosition": {
+                            "location": "import",
+                            "path": "./sui-toast.data",
+                            "id": "src/components/sui-toast/sui-toast.data.ts::SuiToastPosition",
+                            "referenceLocation": "SuiToastPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Posici\u00F3n default global aplicada a los toasts creados sin `position`\nexpl\u00EDcita. Default `bottom-right`. Equivale a `svc.setDefaultPosition()`.\nEn HTML el atributo es `default-position`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-position",
+                "defaultValue": "'bottom-right'"
+            },
+            "tabBarOffset": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "Prop",
+                            "text": "para que el host de la app lo setee. 0 = sin tab bar."
+                        }],
+                    "text": "Offset bottom (px) cuando hay una tab bar nativa liquid-glass activa\n(iOS 26+). En Angular ven\u00EDa de `LiquidGlassService.tabBarHeight()`. Ac\u00E1 se\nexpone como"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tab-bar-offset",
+                "defaultValue": "0"
+            },
+            "regionLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nombre accesible de la pila (`textos.notificacion.region` del SUI Angular)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "region-label",
+                "defaultValue": "'Notificaciones'"
+            },
+            "closeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nombre accesible de la X de cerrar (`textos.comun.cerrar` del SUI Angular)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-label",
+                "defaultValue": "'Cerrar'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "toasts": {},
+            "expandedPositions": {},
+            "leavingIds": {},
+            "manuallyDismissedIds": {},
+            "slotHeights": {}
+        };
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "(config: SuiToastData) => Promise<string>",
+                    "parameters": [{
+                            "name": "config",
+                            "type": "SuiToastData",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "SuiToastData": {
+                            "location": "import",
+                            "path": "./sui-toast.data",
+                            "id": "src/components/sui-toast/sui-toast.data.ts::SuiToastData",
+                            "referenceLocation": "SuiToastData"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Crea un toast con config completa. Devuelve su id.",
+                    "tags": []
+                }
+            },
+            "success": {
+                "complexType": {
+                    "signature": "(title: string, opts?: Partial<SuiToastData>) => Promise<string>",
+                    "parameters": [{
+                            "name": "title",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "opts",
+                            "type": "Partial<SuiToastData> | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "SuiToastData": {
+                            "location": "import",
+                            "path": "./sui-toast.data",
+                            "id": "src/components/sui-toast/sui-toast.data.ts::SuiToastData",
+                            "referenceLocation": "SuiToastData"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "error": {
+                "complexType": {
+                    "signature": "(title: string, opts?: Partial<SuiToastData>) => Promise<string>",
+                    "parameters": [{
+                            "name": "title",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "opts",
+                            "type": "Partial<SuiToastData> | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "SuiToastData": {
+                            "location": "import",
+                            "path": "./sui-toast.data",
+                            "id": "src/components/sui-toast/sui-toast.data.ts::SuiToastData",
+                            "referenceLocation": "SuiToastData"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "info": {
+                "complexType": {
+                    "signature": "(title: string, opts?: Partial<SuiToastData>) => Promise<string>",
+                    "parameters": [{
+                            "name": "title",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "opts",
+                            "type": "Partial<SuiToastData> | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "SuiToastData": {
+                            "location": "import",
+                            "path": "./sui-toast.data",
+                            "id": "src/components/sui-toast/sui-toast.data.ts::SuiToastData",
+                            "referenceLocation": "SuiToastData"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "warning": {
+                "complexType": {
+                    "signature": "(title: string, opts?: Partial<SuiToastData>) => Promise<string>",
+                    "parameters": [{
+                            "name": "title",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "opts",
+                            "type": "Partial<SuiToastData> | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "SuiToastData": {
+                            "location": "import",
+                            "path": "./sui-toast.data",
+                            "id": "src/components/sui-toast/sui-toast.data.ts::SuiToastData",
+                            "referenceLocation": "SuiToastData"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "feature": {
+                "complexType": {
+                    "signature": "(title: string, opts?: Partial<SuiToastData>) => Promise<string>",
+                    "parameters": [{
+                            "name": "title",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "opts",
+                            "type": "Partial<SuiToastData> | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "SuiToastData": {
+                            "location": "import",
+                            "path": "./sui-toast.data",
+                            "id": "src/components/sui-toast/sui-toast.data.ts::SuiToastData",
+                            "referenceLocation": "SuiToastData"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "dismiss": {
+                "complexType": {
+                    "signature": "(id: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Cierra un toast por id (con exit animation Sonner-style).",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "defaultPosition",
+                "methodName": "onDefaultPositionChange"
+            }];
+    }
+}