@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/collection/components/sui-time-picker-status/sui-time-picker-status.js

@@ -0,0 +1,257 @@
+import { Host, h } from "@stencil/core";
+/**
+ * `<sui-time-picker-status>` — Pill de disponibilidad (disponible, ocupado, en reunión, desconectado) del panel de sui-time-picker.
+ *
+ * Portado 1:1 del SUI Angular (`sui-time-picker/sui-time-picker-status.*`).
+ * Misma API publica, las 16 variantes (Type x State) y mismos VALORES exactos.
+ * Los colores de estado son SEMANTICOS (success/error/warning/faded) — se
+ * respetan tal cual el Figma; NO son brand-override.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Node: 165596:41348 ("TimePickerSelectStatus") — VERIFIED via MCP.
+ *   Variant matrix: Type(4: Available / Busy / In-meeting / Offline)
+ *                 x State(4: Default / Hover / Selected / Disabled) = 16 combos.
+ *
+ * Pill de estado de disponibilidad que vive junto a los presets/columnas del
+ * time picker (ej. marcar un slot como "Busy"/"Available" en un scheduler). Es
+ * un componente standalone del MISMO set de Figma.
+ *
+ * EXACT (Figma 165596:41349 Default Available + variantes):
+ *   Container: inline-flex centrado, gap-4, pl-6 pr-10 py-4, radius-8,
+ *     overflow-clip. box-sizing border-box.
+ *   Dot: box 16x16, circulo r=3 (6px diametro) centrado, color = base del type.
+ *   Typography (label): Inter Medium 14/20, ls -0.6% (= -0.084px),
+ *     font-feature-settings 'ss11' 1, 'calt' 0, 'liga' 0.
+ *
+ * COLOR MAPPING por State (Figma → tokens):
+ *   Default:  bg white-0 - border stroke-soft-200 - shadow x-small - text sub-600
+ *   Hover:    bg weak-50  - border stroke-soft-200 - (sin shadow)  - text sub-600
+ *   Selected: bg <type>-lighter - sin border/shadow - text <type>-dark
+ *   Disabled: bg weak-50  - sin border/shadow - text disabled-300 - dot disabled-300
+ *
+ * Selected backgrounds + text por type (semanticos):
+ *   Available  → bg success-lighter (#e3f7ec) - text success-dark (#0b4627)
+ *   Busy       → bg error-lighter   (#ffebec) - text error-dark   (#681219)
+ *   In-meeting → bg warning-lighter (#fff3eb) - text warning-dark (#71330a)
+ *   Offline    → bg faded-lighter   (#f5f5f5) - text faded-dark   (#262626)
+ *
+ * Dot color por type (base):
+ *   Available → success-base (#1fc16b) - Busy → error-base (#fb3748)
+ *   In-meeting → warning-base (#fa7319) - Offline → faded-base (#7b7b7b)
+ *   Disabled (cualquier type) → disabled-300 (#d1d1d1)
+ *
+ * Asset: el Dot de Figma es un SVG externo (circulo r=3). Se replica con un
+ * radial-gradient sobre el box 16x16 (mismo patron que sui-badge dot) para no
+ * depender de un asset remoto.
+ *
+ * `scoped: true` (light DOM): los selectores `:host([data-sui-*])` reflejan el
+ * estado del host.
+ *
+ * iOS WKWebView :active fix: el host escucha touchstart/touchend.
+ *
+ * @prop type      — 'available' | 'busy' | 'in-meeting' | 'offline'
+ * @prop label     — override del texto ('' = label canon del type)
+ * @prop selected  — estado seleccionado (bg + texto semantico del type)
+ * @prop disabled
+ */
+export class SuiTimePickerStatus {
+    constructor() {
+        /** Tipo de disponibilidad. Default `available`. */
+        this.type = 'available';
+        /** Override del texto. `''` = label canon del type. Default `''`. */
+        this.label = '';
+        /** Estado seleccionado: bg + texto semantico del type. Default `false`. */
+        this.selected = false;
+        /** Deshabilitado: bg weak-50, sin border/shadow, dot disabled-300. Default `false`. */
+        this.disabled = false;
+        this.onActivate = (event) => {
+            if (this.disabled) {
+                event.stopPropagation();
+                event.preventDefault();
+                return;
+            }
+            this.clicked.emit(event);
+        };
+    }
+    /** Copy canon de cada type, en español como el SUI Angular (sui-textos `fecha.*`). */
+    get defaultLabel() {
+        switch (this.type) {
+            case 'busy':
+                return 'Ocupado';
+            case 'in-meeting':
+                return 'En reunión';
+            case 'offline':
+                return 'Desconectado';
+            case 'available':
+            default:
+                return 'Disponible';
+        }
+    }
+    /** Texto a mostrar: override del consumer o el copy canon del type. */
+    get displayLabel() {
+        return this.label || this.defaultLabel;
+    }
+    onKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+            event.preventDefault();
+            this.onActivate(event);
+        }
+    }
+    /* ── iOS :active fix ── */
+    onTouchStart() {
+        /* no-op a proposito; engage del touch pipeline iOS. */
+    }
+    onTouchEnd() {
+        this.el.blur();
+    }
+    render() {
+        return (h(Host, { key: '37e7ede383f5b5833974cd1f0c3b2618ebaf36cf', role: "button", tabindex: this.disabled ? '-1' : '0', "aria-pressed": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onActivate }, h("span", { key: '07829ee4dad2841acd35e0eaff08dedf63541da2', class: "sui-time-picker-status__dot", "aria-hidden": "true" }), h("span", { key: 'e7fb06f15987bfc3a8edcb3c4c388cf66be1f670', class: "sui-time-picker-status__label" }, this.displayLabel)));
+    }
+    static get is() { return "sui-time-picker-status"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-time-picker-status.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-time-picker-status.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiTimePickerStatusType",
+                    "resolved": "\"available\" | \"busy\" | \"in-meeting\" | \"offline\"",
+                    "references": {
+                        "SuiTimePickerStatusType": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-time-picker-status/sui-time-picker-status.tsx",
+                            "id": "src/components/sui-time-picker-status/sui-time-picker-status.tsx::SuiTimePickerStatusType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tipo de disponibilidad. Default `available`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'available'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override del texto. `''` = label canon del type. Default `''`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado seleccionado: bg + texto semantico del type. Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Deshabilitado: bg weak-50, sin border/shadow, dot disabled-300. Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "clicked",
+                "name": "clicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Click / Enter / Space sobre el pill (si no esta disabled)."
+                },
+                "complexType": {
+                    "original": "globalThis.Event",
+                    "resolved": "Event",
+                    "references": {
+                        "globalThis": {
+                            "location": "global",
+                            "id": "global::globalThis"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "touchstart",
+                "method": "onTouchStart",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "touchend",
+                "method": "onTouchEnd",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

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

@@ -0,0 +1,263 @@
+@charset "UTF-8";
+/* ═══ SUI Toast — SUI Design System 2.0 + Sonner-style stacking ══════════════════════
+ * Figma node: 169:2399 (Alert & Notification & Toast — Toast section)
+ *
+ * Homologado con el outlet del SUI Angular (lib/sui-toast/sui-toast-outlet.scss).
+ *
+ * El visual de cada toast lo da `<sui-alert size="large">`. Este componente
+ * (`<sui-toast>`, el outlet) maneja:
+ *   - position fixed en 6 esquinas
+ *   - STACKING colapsado (ilusión 3D con scale + translate)
+ *   - Expand on hover / touch / data-expanded (pin tras dismiss)
+ *   - Gap PRECISO entre toasts expanded — usa --toast-offset (px) calculado
+ *     por el TS via ResizeObserver sobre cada slot
+ *   - Entrance: @starting-style (iOS 17+/Chrome 117+)
+ *   - Exit: class .sui-toast-slot--leaving + transition CSS (Sonner-style)
+ *
+ * El accent del DS es NARANJA brand (#fa7319) — lo aplica `<sui-alert>`, este
+ * archivo solo posiciona/anima.
+ * ════════════════════════════════════════════════════════════════════════ */
+:host {
+  display: contents;
+}
+
+.sui-toast-stack {
+  position: fixed;
+  z-index: 9000;
+  pointer-events: none;
+  max-width: 360px;
+  width: calc(100vw - 40px);
+  /* Altura mínima para que los slots absolute tengan donde anchear */
+  min-height: 90px;
+  /* Gap configurable — usado por el TS via toastGap (10px). Si lo cambias acá,
+     cambialo también en sui-toast.tsx:toastGap. */
+  --toast-gap: 10px;
+  /* 6 positions — 20px desktop, 12px bottom default. */
+}
+.sui-toast-stack[data-sui-position=top-left] {
+  top: max(20px, env(safe-area-inset-top, 20px));
+  left: 20px;
+}
+.sui-toast-stack[data-sui-position=top-center] {
+  top: max(20px, env(safe-area-inset-top, 20px));
+  left: 50%;
+  transform: translateX(-50%);
+}
+.sui-toast-stack[data-sui-position=top-right] {
+  top: max(20px, env(safe-area-inset-top, 20px));
+  right: 20px;
+}
+.sui-toast-stack[data-sui-position=bottom-left] {
+  bottom: max(12px, env(safe-area-inset-bottom, 12px));
+  left: 20px;
+}
+.sui-toast-stack[data-sui-position=bottom-center] {
+  bottom: max(12px, env(safe-area-inset-bottom, 12px));
+  left: 50%;
+  transform: translateX(-50%);
+}
+.sui-toast-stack[data-sui-position=bottom-right] {
+  bottom: max(12px, env(safe-area-inset-bottom, 12px));
+  right: 20px;
+}
+.sui-toast-stack {
+  /* Mobile: cualquier left/center/right colapsa a full-width centered. */
+}
+@media (max-width: 767px) {
+  .sui-toast-stack {
+    max-width: none;
+    width: auto;
+    left: 12px;
+    right: 12px;
+    transform: none;
+  }
+  .sui-toast-stack[data-sui-position^=top-] {
+    top: max(12px, env(safe-area-inset-top, 12px));
+    bottom: auto;
+    left: 12px;
+    right: 12px;
+    transform: none;
+  }
+  .sui-toast-stack[data-sui-position^=bottom-] {
+    bottom: max(12px, env(safe-area-inset-bottom, 12px));
+    top: auto;
+    left: 12px;
+    right: 12px;
+    transform: none;
+  }
+}
+
+/* Liquid glass tab bar nativo activo (iOS 26+): override bottom. */
+:host(.sui-toast-outlet--native-tab) .sui-toast-stack[data-sui-position^=bottom-] {
+  bottom: var(--sui-toast-bottom-offset, 20px);
+}
+
+/* ── Slot — un toast individual con stacking + transitions ───────────────── */
+.sui-toast-slot {
+  position: absolute;
+  width: 100%;
+  pointer-events: auto;
+  /* z-index inverso: frontmost (index 0) arriba */
+  z-index: calc(100 - var(--toast-index, 0));
+  /* Anchor al edge bottom — por default todos los slots colapsan acá */
+  bottom: 0;
+  /* Default colapsado: scale + translate hacia "atrás" del stack */
+  --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;
+  /* Solo los primeros 3 visibles en colapsado. Index >= 3 → fade out. */
+  opacity: 1;
+}
+.sui-toast-slot:nth-child(n+4) {
+  opacity: 0;
+  pointer-events: none;
+}
+.sui-toast-slot {
+  /* Transitions: timings DESINCRONIZADOS — match Sonner src/styles.css.
+     Opacity rápida (200ms) para que el toast desaparezca visualmente snap;
+     transform lenta (500ms) para que el slide-down + scale fluyan suave
+     en background. El TS hace remove del array a los 200ms (cuando el opacity
+     llega a 0 = ya invisible). */
+  transition: opacity 200ms ease-out, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
+  /* Entrance: @starting-style define los valores iniciales. La transition
+     CSS los lleva a los valores de la regla. Compatible iOS 17+/Chrome 117+. */
+}
+@starting-style {
+  .sui-toast-slot {
+    opacity: 0;
+    transform: translateY(100%) scale(0.94);
+  }
+}
+.sui-toast-slot {
+  /* Exit:
+     - Front toast removed (data-front='true'): slide-out 100% de su altura
+       — drop fuera del viewport (match Sonner src/styles.css 325-327).
+     - Back toast removed (data-front='false'): transY 40% + scale-down + fade
+       — subtle, ya semi-invisible detrás (match Sonner 335-338). */
+}
+.sui-toast-slot.sui-toast-slot--leaving {
+  opacity: 0;
+  transform: translateY(40%) scale(0.9);
+  pointer-events: none;
+}
+.sui-toast-slot.sui-toast-slot--leaving[data-front=true] {
+  transform: translateY(100%) scale(1);
+}
+.sui-toast-slot {
+  /* Manual dismiss (click X) — siempre slide-out completo 100%, sea front o
+     back. Consistencia para el user que clickea. */
+}
+.sui-toast-slot.sui-toast-slot--leaving.sui-toast-slot--manual-dismiss {
+  transform: translateY(100%) scale(1);
+}
+.sui-toast-slot {
+  /* Drop shadow del toast — alert no aplica shadow en algunos styles */
+}
+.sui-toast-slot > sui-alert {
+  display: block;
+  box-shadow: var(--sui-custom-shadow-small);
+  border-radius: var(--sui-radius-12);
+}
+.sui-toast-slot {
+  /* Close button del OUTLET (no del sui-alert).
+     Es un <sui-compact-button variant-style="modifiable"> → el ícono hereda el
+     `currentColor` que se fija acá según [data-toast-style], espejando el close
+     interno del sui-alert:
+       filled / stroke-dark  → blanco (fondo oscuro)
+       light / lighter / stroke → strong-950 (fondo claro).
+     El compact-button trae su padding/radius/hover/active/focus; acá solo se
+     posiciona el host y se fija color + dimming base. */
+}
+.sui-toast-slot__close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  color: var(--sui-text-strong-950, #171717);
+  opacity: 0.48; /* dimming base — espeja el close del sui-alert */
+  transition: opacity 150ms ease-out;
+  -webkit-tap-highlight-color: transparent;
+}
+.sui-toast-slot__close:hover {
+  opacity: 0.78;
+}
+.sui-toast-slot__close:focus-within {
+  opacity: 1;
+}
+.sui-toast-slot__close {
+  /* Área táctil: la X se ve de 20 y se toca en 40 × 40 (inset −10). Va en el
+     host (el scoped de Stencil no alcanza al <button> interno del
+     compact-button); por eso el outlet escucha el click nativo del host. */
+}
+.sui-toast-slot__close::before {
+  content: "";
+  position: absolute;
+  inset: -10px;
+}
+.sui-toast-slot__close {
+  /* Teléfono: 44 × 44 (piso táctil 44). inset (20 − 44) / 2 = −12. */
+}
+@media (max-width: 767px) {
+  .sui-toast-slot__close::before {
+    inset: calc((100% - 44px) / 2);
+  }
+}
+.sui-toast-slot[data-toast-style=filled] .sui-toast-slot__close, .sui-toast-slot[data-toast-style=stroke-dark] .sui-toast-slot__close {
+  color: var(--sui-static-white, #ffffff);
+  opacity: 0.72; /* matchea el opacity del close interno del sui-alert */
+}
+.sui-toast-slot[data-toast-style=filled] .sui-toast-slot__close:hover, .sui-toast-slot[data-toast-style=stroke-dark] .sui-toast-slot__close:hover {
+  opacity: 0.92;
+}
+.sui-toast-slot[data-toast-style=filled] .sui-toast-slot__close:focus-within, .sui-toast-slot[data-toast-style=stroke-dark] .sui-toast-slot__close:focus-within {
+  opacity: 1;
+}
+
+/* Top positions: el leaving va hacia ARRIBA */
+.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot--leaving {
+  transform: translateY(-40%) scale(0.9);
+}
+
+.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot--leaving[data-front=true],
+.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot--leaving.sui-toast-slot--manual-dismiss {
+  transform: translateY(-100%) scale(1);
+}
+
+/* Top positions: entrance desde ARRIBA del viewport */
+@starting-style {
+  .sui-toast-stack[data-sui-position^=top-] .sui-toast-slot {
+    opacity: 0;
+    transform: translateY(-100%) scale(0.94);
+  }
+}
+
+/* Top positions: invertir signo del offset, anchor top, transform-origin top */
+.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot {
+  bottom: auto;
+  top: 0;
+  --offset-y: calc(var(--toast-index, 0) * 10px);
+  transform-origin: top center;
+}
+
+/* ── Expand: bottom positions — desplaza hacia arriba por --toast-offset ─── */
+.sui-toast-stack[data-sui-position^=bottom-]:hover .sui-toast-slot,
+.sui-toast-stack[data-sui-position^=bottom-][data-expanded=true] .sui-toast-slot {
+  /* Offset preciso del TS (suma alturas reales + gaps). Negativo = arriba. */
+  --offset-y: calc(var(--toast-offset, 0px) * -1);
+  --scale: 1;
+  opacity: 1;
+}
+
+/* ── Expand: top positions — desplaza hacia abajo por --toast-offset ────── */
+.sui-toast-stack[data-sui-position^=top-]:hover .sui-toast-slot,
+.sui-toast-stack[data-sui-position^=top-][data-expanded=true] .sui-toast-slot {
+  --offset-y: var(--toast-offset, 0px);
+  --scale: 1;
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sui-toast-slot {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,156 @@
+/**
+ * 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. */
+export 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);
+ */
+export const toast = new SuiToastStore();
+/** Agrupa toasts por posición (newest-first dentro de cada grupo, canon Sonner). */
+export 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;
+}