@dropi/ui 0.1.19 → 0.1.20

package/dist/collection/components/dropi-alert/dropi-alert.css

@@ -7,9 +7,9 @@
 
 .alert {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: var(--Size-2, 8px);
-  padding: var(--Size-3, 12px) var(--Size-4, 16px);
+  padding: var(--Size-3, 12px);
   border-radius: var(--Border-2, 8px);
   border: 1px solid transparent;
   width: 100%;
@@ -23,29 +23,39 @@
 
 /* ── State colors ───────────────────────────────────────── */
 .alert--success {
-  background: var(--Success-Success-50, #f0fdf4);
-  border-color: var(--Success-Success-200, #bbf7d0);
+  background: var(--Success-Success-50, #e7f8f3);
+  border-color: var(--Success-Success-500, #0abb87);
 }
 
 .alert--error {
-  background: var(--Error-Error-50, #fff5f5);
-  border-color: var(--Error-Error-200, #fecaca);
+  background: var(--Error-Error-50, #fef0f0);
+  border-color: var(--Error-Error-500, #f46a6b);
 }
 
 .alert--warning {
-  background: var(--Warning-Warning-50, #fffbeb);
-  border-color: var(--Warning-Warning-200, #fde68a);
+  background: var(--Warning-Warning-50, #fef8ed);
+  border-color: var(--Warning-Warning-500, #f1b44c);
 }
 
 .alert--info {
-  background: var(--Info-Info-50, #eff6ff);
-  border-color: var(--Info-Info-200, #bfdbfe);
+  background: var(--Info-Info-50, #eef6fe);
+  border-color: var(--Info-Info-500, #50a5f1);
 }
 
 /* ── Flag type (left accent border) ────────────────────── */
 .alert--flag {
-  border-left-width: 4px;
-  border-radius: 0 var(--Border-2, 8px) var(--Border-2, 8px) 0;
+  padding: var(--Size-1, 4px) var(--Size-2, 8px);
+  border-radius: var(--Border-1, 4px);
+  border: none !important;
+  justify-content: center;
+}
+.alert--flag .alert__body {
+  justify-content: center;
+  text-align: center;
+}
+.alert--flag .alert__message {
+  font-size: 12px;
+  font-weight: 400;
 }
 
 /* ── Icon ───────────────────────────────────────────────── */
@@ -66,8 +76,9 @@
 }
 
 .alert__message {
-  font-size: var(--font-size-s, 12px);
-  color: var(--Gray-Gray-700, #32394d);
+  font-size: 14px;
+  color: var(--Gray-600, #475066);
+  font-weight: 500;
   line-height: 1.5;
 }
 

package/dist/collection/components/dropi-alert/dropi-alert.js

@@ -3,7 +3,7 @@ const STATE_ICONS = {
     success: 'Check-circle',
     error: 'Warning-circle',
     warning: 'Warning-triangle',
-    info: 'Info-circle',
+    info: 'Info',
 };
 const STATE_COLORS = {
     success: 'Success-Success-500',
@@ -44,7 +44,7 @@ export class DropiAlert {
     render() {
         if (!this.showAlert)
             return null;
-        return (h("div", { class: { 'alert': true, [`alert--${this.type}`]: true, [`alert--${this.state}`]: true } }, h("div", { class: "alert__icon" }, h("dropi-icon", { name: STATE_ICONS[this.state], width: "18px", height: "18px", color: STATE_COLORS[this.state] })), h("div", { class: "alert__body" }, h("span", { class: "alert__message" }, this.message), this.anchorText && (h("a", { class: "alert__link", href: this.anchorUrl || '#', onClick: (e) => { e.preventDefault(); this.dropiLinkClick.emit(); } }, this.anchorText))), h("div", { class: "alert__actions" }, this.showButton && this.buttonText && (h("button", { class: "alert__btn", onClick: () => this.dropiButtonClick.emit() }, this.buttonText)), this.dismissable && (h("button", { class: "alert__close", onClick: () => { this.showAlert = false; this.dropiClose.emit(); }, "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-small", width: "18px", height: "18px", color: "Gray-Gray-500" }))))));
+        return (h("div", { class: { 'alert': true, [`alert--${this.type}`]: true, [`alert--${this.state}`]: true } }, this.type !== 'flag' && (h("div", { class: "alert__icon" }, h("dropi-icon", { name: STATE_ICONS[this.state], width: "18px", height: "18px", color: STATE_COLORS[this.state] }))), h("div", { class: "alert__body" }, h("span", { class: "alert__message" }, this.message), this.anchorText && (h("a", { class: "alert__link", href: this.anchorUrl || '#', onClick: (e) => { e.preventDefault(); this.dropiLinkClick.emit(); } }, this.anchorText))), h("div", { class: "alert__actions" }, this.showButton && this.buttonText && this.type !== 'flag' && (h("button", { class: "alert__btn", onClick: () => this.dropiButtonClick.emit() }, this.buttonText)), this.dismissable && (h("button", { class: "alert__close", onClick: () => { this.showAlert = false; this.dropiClose.emit(); }, "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-small", width: "18px", height: "18px", color: "Gray-Gray-500" }))))));
     }
     static get is() { return "dropi-alert"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-alert-modal/dropi-alert-modal.css

@@ -0,0 +1,73 @@
+:host {
+  display: contents;
+}
+
+.body-alert {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--Size-3, 12px);
+  padding: 0;
+  overflow: hidden;
+  width: 100%;
+  text-align: center !important;
+}
+
+.lottie-img {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100px;
+  width: 120px;
+  margin-top: -8px;
+  margin-bottom: var(--Size-2, 8px);
+}
+
+.lottie-img--loading {
+  min-height: 160px;
+  width: 100%;
+}
+
+.content-alert {
+  text-align: center;
+  width: 100%;
+}
+
+.content-alert h2 {
+  color: var(--Gray-Gray-700, #32394d);
+  font-size: var(--Size-5, 24px);
+  font-weight: 700;
+  margin: 0 0 var(--Size-2, 8px);
+  text-align: center !important;
+}
+
+.content-alert p {
+  color: var(--Gray-Gray-500, #69738c);
+  font-size: var(--font-size-s, 14px);
+  margin: 0;
+  text-align: center !important;
+  overflow-wrap: anywhere;
+  max-height: 100px;
+  overflow: auto;
+}
+
+.actions {
+  display: flex;
+  gap: 12px;
+  width: 100%;
+  margin-top: var(--Size-4, 16px);
+}
+
+.actions dropi-button {
+  flex: 1;
+  display: flex;
+}
+
+/* .btn replaced by dropi-button components */
+
+@media (max-width: 768px) {
+  .actions {
+    flex-direction: column;
+  }
+}

package/dist/collection/components/dropi-alert-modal/dropi-alert-modal.js

@@ -0,0 +1,395 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-alert-modal
+ * Confirmation/alert modal with Lottie animation, title, message and action buttons.
+ * Uses dropi-modal internally.
+ *
+ * @example
+ * const el = document.querySelector('dropi-alert-modal');
+ * el.visible = true;
+ */
+export class DropiAlertModal {
+    /** Controls visibility */
+    visible = false;
+    /** Modal type — determines Lottie animation */
+    type = 'question';
+    /** Bold title */
+    alertTitle = '';
+    /** Body message */
+    message = '';
+    /** Primary button label */
+    primaryButton = 'Aceptar';
+    /** Secondary button label (hidden if empty) */
+    secondaryButton = '';
+    /** Show loading state with loading.json Lottie */
+    loading = false;
+    /** Show close icon in header */
+    closable = false;
+    /** Hide action buttons */
+    displayButtons = true;
+    /** Loading title */
+    loadingTitle = 'Cargando';
+    /** Loading message */
+    loadingMessage = 'Por favor espera un momento';
+    /** Emitted when primary button is clicked */
+    dropiPrimary;
+    /** Emitted when secondary button is clicked */
+    dropiSecondary;
+    /** Emitted when modal is hidden */
+    dropiHide;
+    lottieMap = {
+        question: '/assets/lottie-files/question.json',
+        warning: '/assets/lottie-files/warning.json',
+        success: '/assets/lottie-files/success.json',
+        error: '/assets/lottie-files/failure.json',
+        loading: '/assets/lottie-files/loading.json',
+    };
+    async show() { this.visible = true; }
+    async hide() { this.visible = false; }
+    handlePrimary() {
+        this.dropiPrimary.emit();
+        this.visible = false;
+    }
+    handleSecondary() {
+        this.dropiSecondary.emit();
+        this.visible = false;
+    }
+    onModalHide() {
+        this.visible = false;
+        this.dropiHide.emit();
+    }
+    render() {
+        const lottieKey = this.loading ? 'loading' : this.type;
+        const lottieSize = this.loading ? '300px' : '120px';
+        console.log('[DropiAlertModal] type:', this.type, 'lottieKey:', lottieKey, 'src:', this.lottieMap[lottieKey]);
+        return (h("dropi-modal", { key: '4038a17b3572d834f6eb015ad1ece188735d5f74', visible: this.visible, showHeader: this.closable, showCloseIcon: this.closable, dismissable: false, closeOnEscape: false, size: "s", onDropiHide: () => this.onModalHide() }, h("div", { key: '89a8709256c27102bde8ac25a387dc90f3f61ed4', class: `body-alert${this.loading ? ' is-loading' : ''}` }, this.lottieMap[lottieKey] && (h("div", { key: '5bf98eb48cd930bfa8fe4b94077753031830de6b', class: `lottie-img${this.loading ? ' lottie-img--loading' : ''}` }, h("dotlottie-player", { key: lottieKey, src: this.lottieMap[lottieKey], background: "transparent", speed: "1", style: { width: lottieSize, height: 'auto' }, loop: true, autoplay: true }))), h("div", { key: 'a2c9cd8f737ea3584a6706b0e92270893b592870', class: "content-alert" }, h("h2", { key: '2cd2e5567910995c62eeb64e60c13ed40fdd14a1' }, this.loading ? this.loadingTitle : this.alertTitle), h("p", { key: 'c6baa31f8f6bbbeb2b1f514e3584d61a50616096' }, this.loading ? this.loadingMessage : this.message)), !this.loading && this.displayButtons && (h("div", { key: '7bc16afdb60ea6549fa5dff250a0146141a5715d', class: "actions" }, this.secondaryButton && (h("dropi-button", { key: '8b289d9bf39622340ad2cae9ab21457a948c4843', text: this.secondaryButton, severity: "secondary", onDropiClick: () => this.handleSecondary(), fullWidth: true })), h("dropi-button", { key: 'f87a1a80be2e72b26ddeac81d5f7638f40ddd8f7', text: this.primaryButton, severity: "primary", onDropiClick: () => this.handlePrimary(), fullWidth: true }))))));
+    }
+    static get is() { return "dropi-alert-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-alert-modal.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-alert-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "visible": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls visibility"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "visible",
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AlertModalType",
+                    "resolved": "\"error\" | \"loading\" | \"question\" | \"success\" | \"warning\"",
+                    "references": {
+                        "AlertModalType": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-alert-modal/dropi-alert-modal.tsx",
+                            "id": "src/components/dropi-alert-modal/dropi-alert-modal.tsx::AlertModalType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Modal type \u2014 determines Lottie animation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'question'"
+            },
+            "alertTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Bold title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alert-title",
+                "defaultValue": "''"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Body message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message",
+                "defaultValue": "''"
+            },
+            "primaryButton": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary button label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "primary-button",
+                "defaultValue": "'Aceptar'"
+            },
+            "secondaryButton": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary button label (hidden if empty)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "secondary-button",
+                "defaultValue": "''"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show loading state with loading.json Lottie"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show close icon in header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closable",
+                "defaultValue": "false"
+            },
+            "displayButtons": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide action buttons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "display-buttons",
+                "defaultValue": "true"
+            },
+            "loadingTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loading title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading-title",
+                "defaultValue": "'Cargando'"
+            },
+            "loadingMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loading message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading-message",
+                "defaultValue": "'Por favor espera un momento'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiPrimary",
+                "name": "dropiPrimary",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when primary button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiSecondary",
+                "name": "dropiSecondary",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when secondary button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiHide",
+                "name": "dropiHide",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when modal is hidden"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/dropi-avatars/dropi-avatars.js

@@ -19,7 +19,7 @@ export class DropiAvatars {
     render() {
         const displayInitials = this.initials?.slice(0, 2).toUpperCase();
         const showInitials = !this.image && displayInitials;
-        return (h("figure", { key: '5bce853f6d1d17dcad603cf103d6de09ae612147', class: { 'avatar': true, [`avatar--${this.type}`]: true } }, showInitials ? (h("div", { class: "avatar__initials" }, displayInitials)) : (h("img", { src: this.image || FALLBACK, alt: this.alt, onError: (e) => this.handleError(e) }))));
+        return (h("figure", { key: '207390b678faada7a5c276b23246573b04c0416c', class: { 'avatar': true, [`avatar--${this.type}`]: true } }, showInitials ? (h("div", { class: "avatar__initials" }, displayInitials)) : (h("img", { src: this.image || FALLBACK, alt: this.alt, onError: (e) => this.handleError(e) }))));
     }
     static get is() { return "dropi-avatars"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-badge/dropi-badge.js

@@ -25,7 +25,7 @@ export class DropiBadge {
         return null;
     }
     render() {
-        return (h("div", { key: '7a043420848f083d161765c16da41dc1f7c38065', class: `tag-state ${this.state}` }, this.renderIcon(), h("p", { key: '4227bf47f3169673f44b62bde46498e3c8d607cd' }, this.stateText[this.state])));
+        return (h("div", { key: '5fe86b98326a2bc1b6916421ff51204fe307e7b7', class: `tag-state ${this.state}` }, this.renderIcon(), h("p", { key: '887a979f44c1128a3e78f01be2f20750aab9b276' }, this.stateText[this.state])));
     }
     static get is() { return "dropi-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-banner-external/dropi-banner-external.css

@@ -0,0 +1,56 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.dropi-banner-external {
+  display: block;
+  width: 100%;
+  position: relative;
+  margin-bottom: 16px;
+  border-radius: var(--Border-2, 8px);
+}
+
+.dropi-banner-external a {
+  display: block;
+  text-decoration: none;
+}
+
+.click-wrapper {
+  cursor: pointer;
+}
+
+.inner {
+  position: relative;
+  display: block;
+}
+
+.inner img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: var(--Border-2, 8px);
+  max-width: 1220px;
+  margin: auto;
+}
+
+.close-btn {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  background: rgba(255, 255, 255, 0.8);
+  border: none;
+  border-radius: 50%;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.15s ease;
+}
+
+.close-btn:hover {
+  background: rgba(255, 255, 255, 1);
+}