@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/cjs/sui-toast.cjs.entry.js

@@ -0,0 +1,510 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+
+/**
+ * Tipos + store singleton del `<sui-toast>`. Viven en este archivo hermano (no
+ * en el `.tsx`) por la regla del proyecto Stencil: en el `.tsx` solo se permite
+ * `export class` / `export type` / `export interface`. Cualquier
+ * `export const`/`export function`/`export enum` rompe el build de TODO el
+ * proyecto, así que el catálogo de tipos + la API imperativa (store + helper
+ * `toast`) se aíslan acá.
+ *
+ * Port 1:1 del Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-toast/):
+ *   - sui-toast.service.ts → store singleton + helper imperativo `toast`
+ *   - sui-toast-outlet.{ts,html,scss} → componente `<sui-toast>` (el outlet)
+ *
+ * Mismo modelo de datos, mismas variantes (5) / estilos (5) / posiciones (6) /
+ * estados (dismissible, action, duration Infinity), mismos defaults
+ * (variant=info, style=stroke-dark, duration=4000, dismissible=true,
+ * position=bottom-right) y mismo comportamiento de stack Sonner-style.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO · node 169:2399 (Alert & Notification &
+ * Toast — Toast section). El accent del DS es NARANJA brand (#fa7319), NO el
+ * azul de Figma — el visual lo da `<sui-alert>` que ya respeta ese accent.
+ */
+/** Las 6 posiciones, en el orden de render del outlet. */
+const SUI_TOAST_POSITIONS = [
+    'top-left',
+    'top-center',
+    'top-right',
+    'bottom-left',
+    'bottom-center',
+    'bottom-right',
+];
+/**
+ * Store singleton — equivalente al `@Injectable({ providedIn: 'root' })`
+ * del Angular `SuiToastService`. Mantiene el array de toasts y notifica a los
+ * outlets suscritos. La API pública imperativa (`toast.success(...)`, etc.)
+ * delega acá.
+ *
+ * No usa signals (no hay Angular en Stencil): es un observable manual con
+ * `subscribe` que devuelve un unsubscribe. El componente `<sui-toast>` se
+ * suscribe en `connectedCallback` y empuja el array a un `@State` para
+ * re-renderizar.
+ */
+class SuiToastStore {
+    constructor() {
+        this.toastsList = [];
+        this.listeners = new Set();
+        this.defaultPosition = 'bottom-right';
+    }
+    /** Toasts actuales (copia defensiva). */
+    getToasts() {
+        return this.toastsList.slice();
+    }
+    /** Position default global. Mutable via setDefaultPosition(). */
+    setDefaultPosition(position) {
+        this.defaultPosition = position;
+    }
+    getDefaultPosition() {
+        return this.defaultPosition;
+    }
+    /**
+     * Suscribe un listener a los cambios del store. Devuelve la función de
+     * desuscripción. Empuja el estado actual inmediatamente.
+     */
+    subscribe(fn) {
+        this.listeners.add(fn);
+        fn(this.getToasts());
+        return () => {
+            this.listeners.delete(fn);
+        };
+    }
+    emit() {
+        const snapshot = this.getToasts();
+        for (const fn of this.listeners)
+            fn(snapshot);
+    }
+    show(config) {
+        var _a, _b, _c, _d, _e, _f;
+        const id = (_a = config.id) !== null && _a !== void 0 ? _a : this.uuid();
+        const item = {
+            id,
+            variant: (_b = config.variant) !== null && _b !== void 0 ? _b : 'info',
+            title: config.title,
+            description: config.description,
+            duration: (_c = config.duration) !== null && _c !== void 0 ? _c : 4000,
+            dismissible: (_d = config.dismissible) !== null && _d !== void 0 ? _d : true,
+            position: (_e = config.position) !== null && _e !== void 0 ? _e : this.defaultPosition,
+            style: (_f = config.style) !== null && _f !== void 0 ? _f : 'stroke-dark',
+            action: config.action,
+            createdAt: Date.now(),
+        };
+        this.toastsList = [...this.toastsList, item];
+        /* Auto-dismiss timer NO se maneja acá — lo maneja el outlet (`<sui-toast>`)
+           observando nuevos toasts. Razón: el outlet maneja la exit-animation
+           Sonner-style (leavingIds + CSS transition + remove diferido). Si el
+           timer viviera acá y llamara directo `dismiss(id)`, se saltaba el flow
+           del outlet y el toast desaparecía sin animación al expirar. */
+        this.emit();
+        return id;
+    }
+    success(title, opts) {
+        return this.show(Object.assign(Object.assign({}, opts), { title, variant: 'success' }));
+    }
+    error(title, opts) {
+        return this.show(Object.assign(Object.assign({}, opts), { title, variant: 'error' }));
+    }
+    info(title, opts) {
+        return this.show(Object.assign(Object.assign({}, opts), { title, variant: 'info' }));
+    }
+    warning(title, opts) {
+        return this.show(Object.assign(Object.assign({}, opts), { title, variant: 'warning' }));
+    }
+    feature(title, opts) {
+        return this.show(Object.assign(Object.assign({}, opts), { title, variant: 'feature' }));
+    }
+    dismiss(id) {
+        this.toastsList = this.toastsList.filter((t) => t.id !== id);
+        this.emit();
+    }
+    /** Limpia todos los toasts (útil para teardown de stories). */
+    clear() {
+        this.toastsList = [];
+        this.emit();
+    }
+    uuid() {
+        if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+            return crypto.randomUUID();
+        }
+        return 'toast-' + Math.random().toString(36).slice(2) + Date.now().toString(36);
+    }
+}
+/**
+ * Singleton del store. El helper imperativo `toast` es la API pública
+ * user-facing (equivale a inyectar `SuiToastService` en Angular):
+ *
+ *   import { toast } from '...sui-toast.data';
+ *   toast.success('Guardado');
+ *   toast.error('Falló', { description: '...', duration: Infinity });
+ *   const id = toast.show({ title: '...', action: { label: 'Deshacer', onClick } });
+ *   toast.dismiss(id);
+ */
+const toast = new SuiToastStore();
+/** Agrupa toasts por posición (newest-first dentro de cada grupo, canon Sonner). */
+function groupByPosition(toasts) {
+    const grouped = {
+        'top-left': [],
+        'top-center': [],
+        'top-right': [],
+        'bottom-left': [],
+        'bottom-center': [],
+        'bottom-right': [],
+    };
+    /* unshift → el más reciente queda al inicio de cada grupo (index 0 = front). */
+    for (const t of toasts)
+        grouped[t.position].unshift(t);
+    return grouped;
+}
+
+const suiToastCss = () => `@charset "UTF-8";.sc-sui-toast-h{display:contents}.sui-toast-stack.sc-sui-toast{position:fixed;z-index:9000;pointer-events:none;max-width:360px;width:calc(100vw - 40px);min-height:90px;--toast-gap:10px}.sui-toast-stack[data-sui-position=top-left].sc-sui-toast{top:max(20px, env(safe-area-inset-top, 20px));left:20px}.sui-toast-stack[data-sui-position=top-center].sc-sui-toast{top:max(20px, env(safe-area-inset-top, 20px));left:50%;transform:translateX(-50%)}.sui-toast-stack[data-sui-position=top-right].sc-sui-toast{top:max(20px, env(safe-area-inset-top, 20px));right:20px}.sui-toast-stack[data-sui-position=bottom-left].sc-sui-toast{bottom:max(12px, env(safe-area-inset-bottom, 12px));left:20px}.sui-toast-stack[data-sui-position=bottom-center].sc-sui-toast{bottom:max(12px, env(safe-area-inset-bottom, 12px));left:50%;transform:translateX(-50%)}.sui-toast-stack[data-sui-position=bottom-right].sc-sui-toast{bottom:max(12px, env(safe-area-inset-bottom, 12px));right:20px}@media (max-width: 767px){.sui-toast-stack.sc-sui-toast{max-width:none;width:auto;left:12px;right:12px;transform:none}.sui-toast-stack[data-sui-position^=top-].sc-sui-toast{top:max(12px, env(safe-area-inset-top, 12px));bottom:auto;left:12px;right:12px;transform:none}.sui-toast-stack[data-sui-position^=bottom-].sc-sui-toast{bottom:max(12px, env(safe-area-inset-bottom, 12px));top:auto;left:12px;right:12px;transform:none}}.sui-toast-outlet--native-tab.sc-sui-toast-h .sui-toast-stack[data-sui-position^=bottom-].sc-sui-toast{bottom:var(--sui-toast-bottom-offset, 20px)}.sui-toast-slot.sc-sui-toast{position:absolute;width:100%;pointer-events:auto;z-index:calc(100 - var(--toast-index, 0));bottom:0;--offset-y:calc(var(--toast-index, 0) * -10px);--scale:calc(1 - var(--toast-index, 0) * 0.05);transform:translateY(var(--offset-y)) scale(var(--scale));transform-origin:bottom center;opacity:1}.sui-toast-slot.sc-sui-toast:nth-child(n+4){opacity:0;pointer-events:none}.sui-toast-slot.sc-sui-toast{transition:opacity 200ms ease-out, transform 500ms cubic-bezier(0.22, 1, 0.36, 1)}@starting-style{.sui-toast-slot{opacity:0;transform:translateY(100%) scale(0.94)}}.sui-toast-slot.sui-toast-slot--leaving.sc-sui-toast{opacity:0;transform:translateY(40%) scale(0.9);pointer-events:none}.sui-toast-slot.sui-toast-slot--leaving[data-front=true].sc-sui-toast{transform:translateY(100%) scale(1)}.sui-toast-slot.sui-toast-slot--leaving.sui-toast-slot--manual-dismiss.sc-sui-toast{transform:translateY(100%) scale(1)}.sui-toast-slot.sc-sui-toast>sui-alert.sc-sui-toast{display:block;box-shadow:var(--sui-custom-shadow-small);border-radius:var(--sui-radius-12)}.sui-toast-slot__close.sc-sui-toast{position:absolute;top:12px;right:12px;color:var(--sui-text-strong-950, #171717);opacity:0.48;transition:opacity 150ms ease-out;-webkit-tap-highlight-color:transparent}.sui-toast-slot__close.sc-sui-toast:hover{opacity:0.78}.sui-toast-slot__close.sc-sui-toast:focus-within{opacity:1}.sui-toast-slot__close.sc-sui-toast::before{content:"";position:absolute;inset:-10px}@media (max-width: 767px){.sui-toast-slot__close.sc-sui-toast::before{inset:calc((100% - 44px) / 2)}}.sui-toast-slot[data-toast-style=filled].sc-sui-toast .sui-toast-slot__close.sc-sui-toast,.sui-toast-slot[data-toast-style=stroke-dark].sc-sui-toast .sui-toast-slot__close.sc-sui-toast{color:var(--sui-static-white, #ffffff);opacity:0.72}.sui-toast-slot[data-toast-style=filled].sc-sui-toast .sui-toast-slot__close.sc-sui-toast:hover,.sui-toast-slot[data-toast-style=stroke-dark].sc-sui-toast .sui-toast-slot__close.sc-sui-toast:hover{opacity:0.92}.sui-toast-slot[data-toast-style=filled].sc-sui-toast .sui-toast-slot__close.sc-sui-toast:focus-within,.sui-toast-slot[data-toast-style=stroke-dark].sc-sui-toast .sui-toast-slot__close.sc-sui-toast:focus-within{opacity:1}.sui-toast-stack[data-sui-position^=top-].sc-sui-toast .sui-toast-slot--leaving.sc-sui-toast{transform:translateY(-40%) scale(0.9)}.sui-toast-stack[data-sui-position^=top-].sc-sui-toast .sui-toast-slot--leaving[data-front=true].sc-sui-toast,.sui-toast-stack[data-sui-position^=top-].sc-sui-toast .sui-toast-slot--leaving.sui-toast-slot--manual-dismiss.sc-sui-toast{transform:translateY(-100%) scale(1)}@starting-style{.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot{opacity:0;transform:translateY(-100%) scale(0.94)}}.sui-toast-stack[data-sui-position^=top-].sc-sui-toast .sui-toast-slot.sc-sui-toast{bottom:auto;top:0;--offset-y:calc(var(--toast-index, 0) * 10px);transform-origin:top center}.sui-toast-stack[data-sui-position^=bottom-].sc-sui-toast:hover .sui-toast-slot.sc-sui-toast,.sui-toast-stack[data-sui-position^=bottom-][data-expanded=true].sc-sui-toast .sui-toast-slot.sc-sui-toast{--offset-y:calc(var(--toast-offset, 0px) * -1);--scale:1;opacity:1}.sui-toast-stack[data-sui-position^=top-].sc-sui-toast:hover .sui-toast-slot.sc-sui-toast,.sui-toast-stack[data-sui-position^=top-][data-expanded=true].sc-sui-toast .sui-toast-slot.sc-sui-toast{--offset-y:var(--toast-offset, 0px);--scale:1;opacity:1}@media (prefers-reduced-motion: reduce){.sui-toast-slot.sc-sui-toast{transition:none}}`;
+
+const SuiToast = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * 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) {
+        toast.setDefaultPosition(position);
+    }
+    connectedCallback() {
+        /* Propaga el default-position al store (espeja setDefaultPosition). */
+        toast.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 = toast.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 toast.show(config);
+    }
+    async success(title, opts) {
+        return toast.success(title, opts);
+    }
+    async error(title, opts) {
+        return toast.error(title, opts);
+    }
+    async info(title, opts) {
+        return toast.info(title, opts);
+    }
+    async warning(title, opts) {
+        return toast.warning(title, opts);
+    }
+    async feature(title, opts) {
+        return toast.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
+            toast.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$1) {
+        const position = toast$1.position;
+        const id = toast$1.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$1));
+        this.storedLeavingIndex.set(id, this.computeVisualIndex(toast$1));
+        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;
+            }
+            toast.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 (index.h(index.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 (index.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 (index.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`,
+                    } }, index.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 && (index.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.
+                index.h("sui-compact-button", { class: "sui-toast-slot__close", icon: "close-line", variantStyle: "modifiable", size: "medium", ariaLabel: this.closeLabel, onClick: () => this.dismissManual(toast) }))));
+            })));
+        })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "defaultPosition": [{
+                "onDefaultPositionChange": 0
+            }]
+    }; }
+};
+SuiToast.style = suiToastCss();
+
+exports.sui_toast = SuiToast;

package/dist/cjs/sui-topbar-button_3.cjs.entry.js

@@ -0,0 +1,125 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var suiHref = require('./sui-href-BNQgPKnK.js');
+
+const suiTopbarButtonCss = () => `@charset "UTF-8";.sc-sui-topbar-button-h{display:inline-flex;flex-shrink:0}.sui-topbar-button__el.sc-sui-topbar-button{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:10px;border:none;border-radius:var(--sui-radius-10);background:transparent;cursor:pointer;box-sizing:border-box;transition:background-color 0.2s ease;-webkit-tap-highlight-color:transparent}.sui-topbar-button__el.sc-sui-topbar-button:hover{background:var(--sui-bg-weak-50)}[data-sui-active].sc-sui-topbar-button-h .sui-topbar-button__el.sc-sui-topbar-button{background:var(--sui-bg-weak-50)}.sui-topbar-button__icon.sc-sui-topbar-button{display:inline-flex;color:var(--sui-text-sub-600);transition:color 0.2s ease}[data-sui-active][data-sui-accent=brand].sc-sui-topbar-button-h .sui-topbar-button__icon.sc-sui-topbar-button{color:var(--sui-primary-base)}[data-sui-active][data-sui-accent=information].sc-sui-topbar-button-h .sui-topbar-button__icon.sc-sui-topbar-button{color:var(--sui-state-information-base)}.sui-topbar-button__dot.sc-sui-topbar-button{position:absolute;top:12px;right:12px;width:4px;height:4px;border-radius:var(--sui-radius-full);background:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0)}`;
+
+const SuiTopbarButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.clicked = index.createEvent(this, "clicked");
+        /** Notification dot rojo top-right (Figma notification=true). */
+        this.dot = false;
+        /** Estado activo (Figma State=Active). */
+        this.active = false;
+        /** Color del icono activo — ver REMAP en sui-topbar-item. */
+        this.accent = 'brand';
+    }
+    render() {
+        return (index.h(index.Host, { key: '2cb9181b27329c302043244313f8f717bc19cbdf', "data-sui-active": this.active ? '' : null, "data-sui-accent": this.accent }, index.h("button", { key: '36c19be48ff807a13f84a4e3e030a6b1a5c0dd72', type: "button", class: "sui-topbar-button__el", "aria-label": this.ariaLabel, "aria-pressed": this.active ? 'true' : undefined, onClick: () => this.clicked.emit(), onTouchStart: () => undefined, onTouchEnd: (e) => e.currentTarget.blur() }, index.h("sui-icon", { key: '2020641ddb20032d106ba4cf93e57dfc3ecdc501', class: "sui-topbar-button__icon", name: this.icon, size: 20 }), this.dot && index.h("span", { key: 'e71bcca46ede9cedf5b6012896dcac3b9af3dc63', class: "sui-topbar-button__dot", "aria-hidden": "true" }))));
+    }
+};
+SuiTopbarButton.style = suiTopbarButtonCss();
+
+const suiTopbarItemCss = () => `@charset "UTF-8";.sc-sui-topbar-item-h{display:inline-flex;flex-shrink:0;font-family:var(--sui-font-sans)}.sui-topbar-item.sc-sui-topbar-item{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:none;border-radius:var(--sui-radius-8);background:transparent;cursor:pointer;font-family:inherit;text-decoration:none;box-sizing:border-box;transition:background-color 0.2s ease;-webkit-tap-highlight-color:transparent}.sui-topbar-item--with-icon.sc-sui-topbar-item{padding-left:8px}.sui-topbar-item--with-right.sc-sui-topbar-item{padding-right:8px}.sui-topbar-item.sc-sui-topbar-item:hover{background:var(--sui-bg-weak-50)}[data-sui-active].sc-sui-topbar-item-h .sui-topbar-item.sc-sui-topbar-item{background:var(--sui-bg-weak-50)}.sui-topbar-item__text.sc-sui-topbar-item{display:inline-flex;align-items:center;gap:4px}.sui-topbar-item__label.sc-sui-topbar-item{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-0.084px;color:var(--sui-text-sub-600);white-space:nowrap;transition:color 0.2s ease}[data-sui-active].sc-sui-topbar-item-h .sui-topbar-item__label.sc-sui-topbar-item{color:var(--sui-text-strong-950)}.sui-topbar-item__icon.sc-sui-topbar-item,.sui-topbar-item__right-icon.sc-sui-topbar-item{display:inline-flex;flex-shrink:0;color:var(--sui-text-sub-600);transition:color 0.2s ease}[data-sui-active][data-sui-accent=brand].sc-sui-topbar-item-h .sui-topbar-item__icon.sc-sui-topbar-item{color:var(--sui-primary-base)}[data-sui-active][data-sui-accent=information].sc-sui-topbar-item-h .sui-topbar-item__icon.sc-sui-topbar-item{color:var(--sui-state-information-base)}`;
+
+const SuiTopbarItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.clicked = index.createEvent(this, "clicked");
+        /** RemixIcon a la izquierda (Figma leftIcon, ej. `layout-grid-line`). */
+        this.icon = null;
+        /** RemixIcon a la derecha (Figma rightIcon, típico `arrow-down-s-line`). */
+        this.rightIcon = null;
+        /**
+         * Badge junto al label (Figma badge=true, "NEW"). String shorthand = label
+         * con defaults orange/light/small; objeto = `SuiBadgeConfig`.
+         */
+        this.badge = null;
+        /** Notification count (Figma notification=true, "2" rojo). null → oculto. */
+        this.count = null;
+        /** Estado activo (Figma State=Active). */
+        this.active = false;
+        /** Color del icono activo: `brand` (naranja, default) | `information` (azul Figma). */
+        this.accent = 'brand';
+        /** Con href el item renderiza `<a>`; sin href, `<button>`. */
+        this.href = null;
+        /** target del anchor (solo con href). rel auto `noopener noreferrer` con `_blank`. */
+        this.target = null;
+        this.onClick = (ev) => {
+            this.clicked.emit();
+            if (this.href)
+                suiHref.suiHrefClick(ev, this.href);
+        };
+        this.onTouchEnd = (e) => e.currentTarget.blur();
+    }
+    /** Badge normalizado — el shorthand string renderiza idéntico al objeto. */
+    get badgeCfg() {
+        var _a, _b, _c;
+        const b = this.badge;
+        if (b === null || b === undefined || b === '')
+            return null;
+        const cfg = typeof b === 'string' ? { label: b } : b;
+        return {
+            label: cfg.label,
+            color: (_a = cfg.color) !== null && _a !== void 0 ? _a : 'orange',
+            variant: (_b = cfg.variant) !== null && _b !== void 0 ? _b : 'light',
+            size: (_c = cfg.size) !== null && _c !== void 0 ? _c : 'small',
+        };
+    }
+    renderBody() {
+        const b = this.badgeCfg;
+        return [
+            this.icon && index.h("sui-icon", { class: "sui-topbar-item__icon", name: this.icon, size: 20 }),
+            index.h("span", { class: "sui-topbar-item__text" }, index.h("span", { class: "sui-topbar-item__label" }, this.label), b && (index.h("sui-badge", { class: "sui-topbar-item__badge", color: b.color, variant: b.variant, size: b.size }, b.label))),
+            this.count !== null && this.count !== undefined && (index.h("sui-badge", { class: "sui-topbar-item__count", type: "number", variant: "filled", color: "red", size: "small" }, this.count)),
+            this.rightIcon && index.h("sui-icon", { class: "sui-topbar-item__right-icon", name: this.rightIcon, size: 20 }),
+        ];
+    }
+    render() {
+        var _a;
+        const cls = {
+            'sui-topbar-item': true,
+            'sui-topbar-item--with-icon': !!this.icon,
+            'sui-topbar-item--with-right': !!this.rightIcon,
+        };
+        const common = {
+            class: cls,
+            'aria-current': this.active ? 'page' : undefined,
+            onClick: this.onClick,
+            onTouchStart: () => undefined,
+            onTouchEnd: this.onTouchEnd,
+        };
+        return (index.h(index.Host, { key: '8e92484d3c5666d57da60cd4d35eb1e1d2cc6a56', "data-sui-active": this.active ? '' : null, "data-sui-accent": this.accent }, this.href ? (index.h("a", Object.assign({}, common, { href: this.href, target: (_a = this.target) !== null && _a !== void 0 ? _a : undefined, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined }), this.renderBody())) : (index.h("button", Object.assign({ type: "button" }, common), this.renderBody()))));
+    }
+};
+SuiTopbarItem.style = suiTopbarItemCss();
+
+const suiTopbarUserCss = () => `@charset "UTF-8";.sc-sui-topbar-user-h{display:inline-flex;flex-shrink:0;font-family:var(--sui-font-sans)}.sui-topbar-user.sc-sui-topbar-user{display:inline-flex;align-items:center;gap:6px;padding:4px 8px 4px 4px;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-10);background:var(--sui-bg-white-0);cursor:pointer;font-family:inherit;box-sizing:border-box;transition:background-color 0.2s ease, border-color 0.2s ease;-webkit-tap-highlight-color:transparent}.sui-topbar-user.sc-sui-topbar-user:hover{background:var(--sui-bg-weak-50);border-color:transparent}[data-sui-open].sc-sui-topbar-user-h .sui-topbar-user.sc-sui-topbar-user{background:var(--sui-bg-weak-50);border-color:transparent}.sui-topbar-user__main.sc-sui-topbar-user{display:inline-flex;align-items:center;gap:8px}.sui-topbar-user__name-row.sc-sui-topbar-user{display:inline-flex;align-items:center;gap:2px}.sui-topbar-user__name.sc-sui-topbar-user{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-0.084px;color:var(--sui-text-strong-950);white-space:nowrap}.sui-topbar-user__verified.sc-sui-topbar-user{display:inline-flex;flex-shrink:0;color:var(--sui-state-verified-base)}.sui-topbar-user__chevron.sc-sui-topbar-user{display:inline-flex;flex-shrink:0;color:var(--sui-text-sub-600)}`;
+
+const SuiTopbarUser = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.clicked = index.createEvent(this, "clicked");
+        /** Nombre visible. Vacío → chip solo-avatar (Figma name=false). */
+        this.name = '';
+        /** Avatar 32×32. String shorthand = src directo; objeto = `SuiAvatarConfig` { src?, initials?, color? }. */
+        this.avatar = null;
+        /** Badge verificado junto al nombre (Figma verified=true). */
+        this.verified = false;
+        /** Dropdown abierto (Figma State=Active): bg weak-50 + chevron up. */
+        this.open = false;
+    }
+    render() {
+        var _a, _b, _c;
+        const a = this.avatar;
+        const av = a === null || a === undefined ? {} : typeof a === 'string' ? { src: a } : a;
+        return (index.h(index.Host, { key: '600db09c768433f1a1aa15076f7fa46e3e22352f', "data-sui-open": this.open ? '' : null }, index.h("button", { key: 'a1c32bfd95e919056be4bb3fef8fd6c0806db451', type: "button", class: "sui-topbar-user", "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": "menu", onClick: () => this.clicked.emit(), onTouchStart: () => undefined, onTouchEnd: (e) => e.currentTarget.blur() }, index.h("span", { key: '70cbb72f2a93fe043031c31e5b3a9fe33d3ef545', class: "sui-topbar-user__main" }, index.h("sui-avatar", { key: '8ce3ba06e3945d1efdf29f354953eb6b2d3be785', class: "sui-topbar-user__avatar", size: "md", src: (_a = av.src) !== null && _a !== void 0 ? _a : null, initials: (_b = av.initials) !== null && _b !== void 0 ? _b : '', color: (_c = av.color) !== null && _c !== void 0 ? _c : 'slate', alt: this.name }), this.name && (index.h("span", { key: '46755347eb30ce0f2b44f35477f9a360757f27d2', class: "sui-topbar-user__name-row" }, index.h("span", { key: '336bd35041fc996ff09c9b46f34df4d2d27805cb', class: "sui-topbar-user__name" }, this.name), this.verified && (index.h("sui-icon", { key: '41dac354d5e80b4c49019b3c0ce75dff0eac2afb', class: "sui-topbar-user__verified", name: "verified-badge-fill", size: 20, "aria-label": "Verificado" }))))), index.h("sui-icon", { key: '8e4d5f566d0aa9669acc1a1dff2779e482112e2e', class: "sui-topbar-user__chevron", name: this.open ? 'arrow-up-s-fill' : 'arrow-down-s-fill', size: 20 }))));
+    }
+};
+SuiTopbarUser.style = suiTopbarUserCss();
+
+exports.sui_topbar_button = SuiTopbarButton;
+exports.sui_topbar_item = SuiTopbarItem;
+exports.sui_topbar_user = SuiTopbarUser;