@dropi/ui 0.1.41 → 0.1.42

package/dist/cjs/dropi-modal.cjs.entry.js

@@ -1,15 +1,15 @@
 'use strict';
 
-var index = require('./index-C8kwDvpf.js');
+var index = require('./index-CEWSDq65.js');
 
-const dropiModalCss = () => `:host{display:contents}*,*::before,*::after{box-sizing:border-box}.modal-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 0.18s ease;z-index:1100}.modal-root--open{opacity:1;pointer-events:auto}.modal-root--closing{opacity:1;pointer-events:none}.modal-mask{position:absolute;inset:0;background:rgba(6,11,16,0.66);pointer-events:auto;opacity:0;transition:opacity 0.18s ease}.modal-root--open .modal-mask{opacity:1}.modal-root--closing .modal-mask{opacity:0}.modal-panel{position:relative;pointer-events:auto;display:flex;flex-direction:column;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);box-shadow:0 0 60px rgba(0,0,0,0.06);overflow:hidden;padding:var(--Size-6, 32px);gap:var(--Size-5, 24px);max-height:calc(100vh - 60px);opacity:0;transform:translateY(16px) scale(0.92);transition:opacity 0.18s ease, transform 0.18s ease}.modal-root--open .modal-panel{opacity:1;transform:none}.modal-root--closing .modal-panel{opacity:0;transform:translateY(-12px) scale(1.06)}.modal-header{display:flex;align-items:center;gap:4px}.modal-title{color:var(--Gray-Gray-700,#32394d);font-size:var(--Size-5, 24px);font-weight:var(--font-weight-bold);flex:1;text-align:left}.modal-close{margin-left:auto;border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--font-size-xxl);line-height:1;color:var(--Gray-Gray-400)}.modal-close:hover{opacity:0.7}.modal-content{padding-right:8px;overflow:auto;flex:1;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--Gray-Gray-300,#a3abbf) var(--Gray-Gray-50,#f7f8fa)}.modal-content::-webkit-scrollbar{width:4px}.modal-content::-webkit-scrollbar-track{background:var(--Gray-Gray-50,#f7f8fa);border-radius:16px}.modal-content::-webkit-scrollbar-thumb{background:var(--Gray-Gray-300,#a3abbf);border-radius:16px}.modal-footer{display:flex;justify-content:flex-end;align-items:flex-start;gap:var(--Size-1, 4px);width:100%}.modal-footer:empty{display:none}::slotted(.button-container){display:grid;grid-template-columns:1fr 1fr;gap:var(--Size-4, 16px);min-width:470px;width:100%}::slotted(.button-container)>*{width:100%}::slotted(.button-container) dropi-button{width:100%}.modal-panel.size-m .modal-footer,.modal-panel.size-s .modal-footer{justify-content:center}.modal-panel.size-m .modal-footer ::slotted(.button-container),.modal-panel.size-s .modal-footer ::slotted(.button-container){min-width:unset !important;width:100%}.modal-panel.size-drawer-s .modal-footer ::slotted(.button-container){min-width:unset;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}.modal-panel.size-full{width:100%;height:100vh;max-height:100vh;border-radius:0}.modal-panel.size-xxl{width:calc(100% - 60px);max-width:1520px;height:calc(100vh - 120px);max-height:900px}.modal-panel.size-l{width:1137px;max-width:1137px;max-height:754px}.modal-panel.size-m{max-width:550px;width:550px}.modal-panel.size-s{width:454px}.modal-root--right{align-items:stretch;justify-content:flex-end}.modal-root--right .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--right .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--right .modal-panel{transform:translateX(100%)}.modal-root--right .modal-panel.size-drawer-s{width:351px;padding:20px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-m{width:550px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-l{width:1137px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-xxl{width:1214px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-sidebar-half{width:50vw;min-width:600px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}@media (max-width: 768px){.modal-root--right .modal-panel.size-drawer-s,.modal-root--right .modal-panel.size-drawer-m,.modal-root--right .modal-panel.size-drawer-l,.modal-root--right .modal-panel.size-drawer-xxl,.modal-root--right .modal-panel.size-sidebar-half{width:100vw;min-width:unset}}.modal-root--left{align-items:stretch;justify-content:flex-start}.modal-root--left .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(-100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--left .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--left .modal-panel{transform:translateX(-100%)}.modal-root--top{align-items:flex-start}.modal-root--bottom{align-items:flex-end}@media (max-width: 599px){.modal-panel{padding:20px;width:100% !important}.modal-panel:not(.size-s){border-radius:0 !important;height:100% !important;max-height:unset !important}.modal-root--right .modal-panel{width:100vw !important;min-width:unset !important}.modal-footer{justify-content:center}.modal-footer ::slotted(.button-container){width:100%;min-width:unset !important;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}}@media (prefers-reduced-motion: reduce){.modal-root,.modal-mask,.modal-panel{transition:none !important}}`;
+const dropiModalCss = () => `:host{display:contents}*,*::before,*::after{box-sizing:border-box}.modal-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 0.18s ease;z-index:9999;visibility:hidden}.modal-root--open{opacity:1;pointer-events:auto;visibility:visible}.modal-root--closing{opacity:1;pointer-events:none;visibility:visible}.modal-mask{position:absolute;inset:0;background:rgba(6,11,16,0.66);pointer-events:auto;opacity:0;transition:opacity 0.18s ease}.modal-root--open .modal-mask{opacity:1}.modal-root--closing .modal-mask{opacity:0}.modal-panel{position:relative;pointer-events:auto;display:flex;flex-direction:column;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);box-shadow:0 0 60px rgba(0,0,0,0.06);overflow:hidden;padding:var(--Size-6, 32px);gap:var(--Size-5, 24px);max-height:calc(100vh - 60px);opacity:0;transform:translateY(16px) scale(0.92);transition:opacity 0.18s ease, transform 0.18s ease}.modal-root--open .modal-panel{opacity:1;transform:none}.modal-root--closing .modal-panel{opacity:0;transform:translateY(-12px) scale(1.06)}.modal-header{display:flex;align-items:center;gap:4px}.modal-title{color:var(--Gray-Gray-700,#32394d);font-size:var(--Size-5, 24px);font-weight:var(--font-weight-bold);flex:1;text-align:left}.modal-close{margin-left:auto;border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--font-size-xxl);line-height:1;color:var(--Gray-Gray-400)}.modal-close:hover{opacity:0.7}.modal-content{padding-right:8px;overflow:auto;flex:1;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--Gray-Gray-300,#a3abbf) var(--Gray-Gray-50,#f7f8fa)}.modal-content::-webkit-scrollbar{width:4px}.modal-content::-webkit-scrollbar-track{background:var(--Gray-Gray-50,#f7f8fa);border-radius:16px}.modal-content::-webkit-scrollbar-thumb{background:var(--Gray-Gray-300,#a3abbf);border-radius:16px}.modal-footer{display:flex;justify-content:flex-end;align-items:flex-start;gap:var(--Size-1, 4px);width:100%;margin-top:auto;flex-shrink:0}.modal-footer:empty{display:none}::slotted(.button-container){display:grid;grid-template-columns:1fr 1fr;gap:var(--Size-4, 16px);min-width:470px;width:100%}::slotted(.button-container)>*{width:100%}::slotted(.button-container) dropi-button{width:100%}.modal-panel.size-m .modal-footer,.modal-panel.size-s .modal-footer,.modal-panel.size-xs .modal-footer{justify-content:flex-end}.modal-panel.size-m .modal-footer ::slotted(.button-container),.modal-panel.size-s .modal-footer ::slotted(.button-container),.modal-panel.size-xs .modal-footer ::slotted(.button-container){min-width:unset !important;width:100%}.modal-panel.size-drawer-s .modal-footer ::slotted(.button-container){min-width:unset;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}.modal-panel.size-full{width:100%;height:100vh;max-height:100vh;border-radius:0}.modal-panel.size-xxl{width:calc(100% - 60px);max-width:1520px;height:calc(100vh - 120px);max-height:900px}.modal-panel.size-l{width:1137px;max-width:1137px;max-height:754px}.modal-panel.size-m{max-width:550px;width:550px}.modal-panel.size-s{width:454px}.modal-panel.size-xs{width:320px;padding:24px;gap:16px}.modal-root--right{align-items:stretch;justify-content:flex-end}.modal-root--right .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--right .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--right .modal-panel{transform:translateX(100%)}.modal-root--right .modal-panel.size-drawer-s{width:351px;padding:20px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-m{width:550px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-l{width:1137px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-xxl{width:1214px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-sidebar-half{width:50vw;min-width:600px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}@media (max-width: 768px){.modal-root--right .modal-panel.size-drawer-s,.modal-root--right .modal-panel.size-drawer-m,.modal-root--right .modal-panel.size-drawer-l,.modal-root--right .modal-panel.size-drawer-xxl,.modal-root--right .modal-panel.size-sidebar-half{width:100vw;min-width:unset}}.modal-root--left{align-items:stretch;justify-content:flex-start}.modal-root--left .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(-100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--left .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--left .modal-panel{transform:translateX(-100%)}.modal-root--top{align-items:flex-start}.modal-root--bottom{align-items:flex-end}@media (max-width: 599px){.modal-panel{padding:20px;width:100% !important}.modal-panel:not(.size-s){border-radius:0 !important;height:100% !important;max-height:unset !important}.modal-root--right .modal-panel{width:100vw !important;min-width:unset !important}.modal-footer{justify-content:center}.modal-footer ::slotted(.button-container){width:100%;min-width:unset !important;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}}@media (prefers-reduced-motion: reduce){.modal-root,.modal-mask,.modal-panel{transition:none !important}}`;
 
 const DropiModal = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.onShow = index.createEvent(this, "onShow", 5);
-        this.onHide = index.createEvent(this, "onHide", 5);
-        this.visibleChange = index.createEvent(this, "visibleChange", 5);
+        this.dropiShow = index.createEvent(this, "dropiShow");
+        this.dropiHide = index.createEvent(this, "dropiHide");
+        this.dropiVisibleChange = index.createEvent(this, "dropiVisibleChange");
     }
     visible = false;
     header = null;
@@ -39,25 +39,25 @@ const DropiModal = class {
     isDraggable = false;
     /** No-op — kept for API parity with Angular (matches Angular `resizable`) */
     resizable = false;
-    onShow;
-    onHide;
-    visibleChange;
+    dropiShow;
+    dropiHide;
+    dropiVisibleChange;
     isOpen = false;
     isClosing = false;
     mounted = false;
     closeTimer = null;
     keyHandler = null;
-    visibleChanged(val, oldVal) {
-        const isVisible = val === true || String(val) === 'true';
-        const wasVisible = oldVal === true || String(oldVal) === 'true';
-        if (isVisible === wasVisible)
-            return;
-        console.log('[DropiModal] visibleChanged:', isVisible);
-        isVisible ? this.openModal() : (this.mounted && this.startClose());
+    canDismiss = false;
+    visibleChanged(val) {
+        if (val) {
+            this.openModal();
+        }
+        else {
+            this.startClose();
+        }
     }
     componentDidLoad() {
-        const isVisible = this.visible === true || String(this.visible) === 'true';
-        if (isVisible)
+        if (this.visible)
             this.openModal();
     }
     disconnectedCallback() {
@@ -68,35 +68,40 @@ const DropiModal = class {
             document.body.classList.remove('dropi-modal-open');
         }
     }
-    async hide() {
-        this.visible = false;
-        this.visibleChange.emit(false);
-        this.startClose();
+    async dismiss() {
+        if (this.visible) {
+            this.visible = false;
+            this.dropiVisibleChange.emit(false);
+        }
+        else {
+            this.startClose();
+        }
     }
-    async show() {
+    async openModalExternally() {
         this.visible = true;
-        this.visibleChange.emit(true);
-        this.openModal();
+        this.dropiVisibleChange.emit(true);
     }
     openModal() {
         if (this.closeTimer) {
             clearTimeout(this.closeTimer);
             this.closeTimer = null;
         }
-        this.mounted = true;
+        // Safety: ensure it's not already open or in a closing state
         this.isClosing = false;
-        this.isOpen = false;
+        this.mounted = true;
         requestAnimationFrame(() => requestAnimationFrame(() => {
             this.isOpen = true;
-            this.onShow.emit();
+            this.dropiShow.emit();
         }));
         this.addKeyHandler();
+        this.canDismiss = false;
+        setTimeout(() => { this.canDismiss = true; }, 300);
         if ((this.modal ?? true) && index.Build.isBrowser && document.body) {
             document.body.classList.add('dropi-modal-open');
         }
     }
     startClose() {
-        if (this.isClosing)
+        if (this.isClosing || !this.mounted)
             return;
         this.isClosing = true;
         this.isOpen = false;
@@ -110,15 +115,15 @@ const DropiModal = class {
             if ((this.modal ?? true) && index.Build.isBrowser && document.body) {
                 document.body.classList.remove('dropi-modal-open');
             }
-            this.onHide.emit();
+            this.dropiHide.emit();
         }, 200);
     }
     addKeyHandler() {
         if (!this.closeOnEscape)
             return;
         this.keyHandler = (e) => {
-            if (e.key === 'Escape' && this.visible && this.dismissable)
-                this.hide();
+            if (e.key === 'Escape' && this.visible && this.dismissable && this.canDismiss)
+                this.dismiss();
         };
         document.addEventListener('keydown', this.keyHandler);
     }
@@ -129,7 +134,7 @@ const DropiModal = class {
         }
     }
     render() {
-        return (index.h("div", { key: '1aee093f108c54540005a6cb2f48bef700f05d63', class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}`, style: { display: this.mounted || this.isClosing ? 'flex' : 'none' } }, (this.modal ?? true) && index.h("div", { key: '06ebd29da0c7dc699e7c16769476e310336ab149', class: "modal-mask", onClick: () => this.dismissable && this.hide() }), index.h("div", { key: '87cb9bbd4c1c6c27a6a7d09f561ea781c1571803', class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true" }, this.showHeader && (index.h("div", { key: '86f22ef920b7a7437825f4c5f9ccff23b591c499', class: "modal-header" }, this.header && index.h("span", { key: '2ae7c9b879ee6c025b6b42977bad643ff4d28370', class: "modal-title" }, this.header), index.h("slot", { key: '85a0a54691ca191719202c8fea6b30ffff30aacc', name: "header" }), this.showCloseIcon && (index.h("button", { key: 'dc1f570830d22535a39c9e9fbf0bccdb8e4bfcf7', class: "modal-close", onClick: () => this.hide(), "aria-label": "Cerrar" }, "\u00D7")))), index.h("div", { key: 'ceca42f33ff7d4762c79b2d133e23bc7cedb3cb3', class: "modal-content" }, index.h("slot", { key: '14a82735c521c45deda61e8a69ae8673ad754b3d' })), this.showFooter && index.h("div", { key: 'e71a5393c19de696247502abd09d26a38cd1b979', class: "modal-footer" }, index.h("slot", { key: '1364eed1b66e82d321d06d13d9d34615c7634ce0', name: "footer" })))));
+        return (index.h("div", { key: '95847ba48baae69b93888cb59ecaa9d2130ae17a', class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}` }, (this.modal ?? true) && index.h("div", { key: '78acc3c2f1b7327b6fc1770a9536cdf0c2c57f99', class: "modal-mask", onClick: () => this.canDismiss && this.dismissable && this.dismiss() }), index.h("div", { key: '63906a7ed0432879c3256a659ddd9773099244bc', class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true", style: this.maxWidth ? { maxWidth: this.maxWidth, width: '100%' } : {} }, this.showHeader && (index.h("div", { key: '7d960505ea8fd7804ac67ceb88b9195e6ad1998d', class: "modal-header" }, this.header && index.h("span", { key: 'fed4b8a2e6c89fca39a8766d0e843db7c184be59', class: "modal-title" }, this.header), index.h("slot", { key: 'b2c6c5cc1f019229c3ad5028e42b1fd887494abd', name: "header" }), this.showCloseIcon && (index.h("button", { key: '24fc8ff422ea5c7e6a8c0737acbb29c1d7467f40', class: "modal-close", onClick: () => this.dismiss(), "aria-label": "Cerrar" }, "\u00D7")))), index.h("div", { key: '472a7dfe704b0b8d129b00bc88204602ead66403', class: "modal-content" }, index.h("slot", { key: '6b3e6fdefca0c6510d4fdbbccce53a5efa52e4c8' })), this.showFooter && index.h("div", { key: '5bd3c15d4d1fb2ebffad79c9314d03d1d72dae29', class: "modal-footer" }, index.h("slot", { key: '1980d019b142e2a00f55a3a755e9e08d0393c5e5', name: "footer" })))));
     }
     static get watchers() { return {
         "visible": [{

package/dist/cjs/dropi-navbar.cjs.entry.js

@@ -1,16 +1,16 @@
 'use strict';
 
-var index = require('./index-C8kwDvpf.js');
+var index = require('./index-CEWSDq65.js');
 
 const dropiNavbarCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.navbar{display:flex;align-items:center;height:56px;padding:0 var(--Size-4, 16px);background:var(--Neutral-White, #ffffff);border-bottom:1px solid var(--Gray-Gray-100, #eceef4);gap:var(--Size-4, 16px);position:relative}.navbar__left{display:flex;align-items:center;gap:var(--Size-2, 8px);flex-shrink:0}.navbar__menu-btn{background:none;border:none;padding:6px;cursor:pointer;border-radius:var(--Border-1, 4px);display:flex;align-items:center;transition:background 0.15s}.navbar__menu-btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__logo{height:28px;object-fit:contain}.navbar__items{flex:1;list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:var(--Size-1, 4px)}.navbar__item{display:flex;align-items:center;gap:var(--Size-1, 4px);padding:6px var(--Size-3, 12px);background:none;border:none;border-radius:var(--Border-1, 4px);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-600, #475066);cursor:pointer;transition:background 0.15s, color 0.15s;white-space:nowrap}.navbar__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__item--active{background:var(--Primary-Primary-50, #fff5eb);color:var(--Primary-Primary-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.navbar__badge{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #ffffff);font-size:var(--font-size-xxs);font-weight:var(--font-weight-bold);min-width:16px;height:16px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 4px}.navbar__right{display:flex;align-items:center;gap:var(--Size-2, 8px);flex-shrink:0}.navbar__icon-btn{position:relative;background:none;border:none;padding:6px;cursor:pointer;border-radius:var(--Border-1, 4px);display:flex;align-items:center;transition:background 0.15s}.navbar__icon-btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__notif-badge{position:absolute;top:2px;right:2px;background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #ffffff);font-size:9px;font-weight:var(--font-weight-bold);min-width:14px;height:14px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 3px}.navbar__user-btn{display:flex;align-items:center;gap:var(--Size-1, 4px);background:none;border:none;padding:4px 8px;border-radius:var(--Border-1, 4px);cursor:pointer;transition:background 0.15s;font-family:inherit}.navbar__user-btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}.navbar__avatar-placeholder{width:28px;height:28px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700)}.navbar__user-name{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
 
 const DropiNavbar = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.clickLoadItem = index.createEvent(this, "clickLoadItem", 7);
-        this.dropiNotificationsClick = index.createEvent(this, "dropiNotificationsClick", 7);
-        this.dropiUserClick = index.createEvent(this, "dropiUserClick", 7);
-        this.dropiMenuToggle = index.createEvent(this, "dropiMenuToggle", 7);
+        this.clickLoadItem = index.createEvent(this, "clickLoadItem");
+        this.dropiNotificationsClick = index.createEvent(this, "dropiNotificationsClick");
+        this.dropiUserClick = index.createEvent(this, "dropiUserClick");
+        this.dropiMenuToggle = index.createEvent(this, "dropiMenuToggle");
     }
     /** Logo URL */
     logoUrl = '';
@@ -44,9 +44,9 @@ const DropiNavbar = class {
     }
     render() {
         const items = this.parsedData;
-        return (index.h("nav", { key: '15c337396dbe445ac7a13d7e0f2d99f88b4de439', class: "navbar" }, index.h("div", { key: '922a217dfe53f3f34dd6746033996bcd71dadfb2', class: "navbar__left" }, this.showMenuToggle && (index.h("button", { key: 'db80ad1fd6f47807196c81ae60bf9cea8bb16e77', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, index.h("dropi-icon", { key: 'eca18144260cb6471a19f78f7ce75254ba5a138e', name: "Menu", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (index.h("img", { key: '374ea8553605f289c413882c757eda70054ba71d', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && index.h("span", { key: '8e2abceb591c0de10ca99d2090fea7a0da792a7b', class: "navbar__title" }, this.title)), items.length > 0 && (index.h("ul", { key: 'fd26fc64ea3325ddc439a802ab56e69b329020dd', class: "navbar__items" }, items.map(item => (index.h("li", null, index.h("button", { class: { 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }, onClick: () => this.clickLoadItem.emit(item), type: "button" }, item.icon && index.h("dropi-icon", { name: item.icon, iconWidth: "16px", iconHeight: "16px", color: item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600' }), index.h("span", null, item.name?.value || item.label), item.badge != null && String(item.badge) !== '0' && (index.h("span", { class: "navbar__badge" }, item.badge)))))))), index.h("div", { key: '51a6532caac773ea7236e95b0aa5ee9ee052db4a', class: "navbar__right" }, index.h("button", { key: '309b47a8fa074e7d47632a95490c5ba0d2950745', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, index.h("dropi-icon", { key: '2a970ae36fdd4e42d9fbab5d8ebb61a1d14d54c8', name: "Bell", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (index.h("span", { key: '67412b6d3c7689f78cca15e91a1e8e3ee88152a2', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), index.h("button", { key: '38cc70fdc1c204b06b62c54a23f4b8c76647fd6b', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
+        return (index.h("nav", { key: '83ec218a7545739c65d8f1f61197b429b0e7d407', class: "navbar" }, index.h("div", { key: 'e40038630c33a280f3c231b3dd26643f1c853ea3', class: "navbar__left" }, this.showMenuToggle && (index.h("button", { key: '0ecbae684b9324c48cd01a6081fd1951b3ba7cf8', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, index.h("dropi-icon", { key: '9edea72a4508a984be2e6785f3f0fa6abe0625c4', name: "Menu", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (index.h("img", { key: 'b8cd9896736d505dad05b8df5f10928d40f250dd', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && index.h("span", { key: '4e5dae851fe28f1bc913d7a5d4d42a2413342635', class: "navbar__title" }, this.title)), items.length > 0 && (index.h("ul", { key: 'b951cc880b8aaf718b85403e3420d73ac976aa60', class: "navbar__items" }, items.map(item => (index.h("li", null, index.h("button", { class: { 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }, onClick: () => this.clickLoadItem.emit(item), type: "button" }, item.icon && index.h("dropi-icon", { name: item.icon, iconWidth: "16px", iconHeight: "16px", color: item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600' }), index.h("span", null, item.name?.value || item.label), item.badge != null && String(item.badge) !== '0' && (index.h("span", { class: "navbar__badge" }, item.badge)))))))), index.h("div", { key: '8fe68f93af722982bac11890b106a35a292b3d98', class: "navbar__right" }, index.h("button", { key: 'a4d0ff928dca2502384cd21e0bc852cacc895a30', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, index.h("dropi-icon", { key: '41007746a151c27059d41db7c4672a2b551882d1', name: "Bell", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (index.h("span", { key: 'a0e5c6c9f8e2aaf3e67cc22bdff2ae65472b7cb5', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), index.h("button", { key: 'e1996f9e1fa922cd03a4e9c5721f5be838a941d3', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
             ? index.h("img", { class: "navbar__avatar", src: this.userAvatar, alt: this.userName })
-            : index.h("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && index.h("span", { key: '1f2cfe4bddef60d31751c24c3f02cace2f07d6dd', class: "navbar__user-name" }, this.userName), index.h("dropi-icon", { key: '520aff19c56964eefb3b1f59646c19df779c7e47', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })))));
+            : index.h("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && index.h("span", { key: 'd539c8f456564aa8d3a29e9d2e2ed6250241f411', class: "navbar__user-name" }, this.userName), index.h("dropi-icon", { key: 'd32cba548201f28a051142e889f6de207a4e67d2', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })))));
     }
 };
 DropiNavbar.style = dropiNavbarCss();

package/dist/cjs/dropi-otp-send-code.cjs.entry.js

@@ -1,17 +1,16 @@
 'use strict';
 
-var index = require('./index-C8kwDvpf.js');
+var index = require('./index-CEWSDq65.js');
 
 const dropiOtpSendCodeCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.otp{display:flex;flex-direction:column;align-items:center;gap:var(--Size-4, 16px)}.otp__label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066);text-align:center;margin:0}.otp__inputs{display:flex;gap:var(--Size-4, 16px)}.otp__digit{width:56px;height:56px;border:1.5px solid var(--Gray-Gray-200, #d3d7de);border-radius:var(--Border-2, 8px);text-align:center;font-size:22px;font-weight:var(--font-weight-bold, 700);font-family:inherit;color:var(--Gray-Gray-800, #1f2433);outline:none;transition:border-color 0.15s ease;background:var(--Neutral-White, #ffffff)}.otp__digit:focus{border:2px solid var(--Primary-Primary-500, #f49a3d)}.otp__digit--filled{border:1px solid var(--Success-Success-500, #0abb87);color:var(--Neutral-Neutral-900, #0e111a)}.otp__digit--error{border:1px solid var(--Error-Error-500, #f46a6b)}.otp__error{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b);text-align:center}.otp__resend{text-align:center}.otp__countdown{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6)}.otp__resend-btn{background:none;border:none;padding:0;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d);cursor:pointer;text-decoration:underline}`;
 
-const OTP_LENGTH = 6;
 const RESEND_SECONDS = 30;
 const DropiOtpSendCode = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.codeCompleted = index.createEvent(this, "codeCompleted", 7);
-        this.codeAccepted = index.createEvent(this, "codeAccepted", 7);
-        this.dropiResend = index.createEvent(this, "dropiResend", 7);
+        this.codeCompleted = index.createEvent(this, "codeCompleted");
+        this.codeAccepted = index.createEvent(this, "codeAccepted");
+        this.dropiResend = index.createEvent(this, "dropiResend");
     }
     /** Delivery method label */
     engine = 'email';
@@ -21,19 +20,30 @@ const DropiOtpSendCode = class {
     showLabelContact = false;
     /** Error message to display */
     errorMessage = '';
-    digits = Array(OTP_LENGTH).fill('');
-    digitStates = Array(OTP_LENGTH).fill('idle');
+    /** Number of digits for the OTP */
+    digitsCount = 6;
+    digits = [];
+    digitStates = [];
     countdown = RESEND_SECONDS;
     canResend = false;
     error = false;
     inputs = [];
     timer;
-    /** Emitted when all 6 digits are entered. */
+    handleDigitsCountChange(newValue) {
+        this.digits = Array(newValue).fill('');
+        this.digitStates = Array(newValue).fill('idle');
+        this.inputs = [];
+    }
+    /** Emitted when all digits are entered. */
     codeCompleted;
-    /** Emitted when all 6 digits are entered (alternative event). */
+    /** Emitted when all digits are entered (alternative event). */
     codeAccepted;
     /** Emitted when resend is requested */
     dropiResend;
+    componentWillLoad() {
+        this.digits = Array(this.digitsCount).fill('');
+        this.digitStates = Array(this.digitsCount).fill('idle');
+    }
     componentDidLoad() { this.startCountdown(); }
     disconnectedCallback() { clearInterval(this.timer); }
     startCountdown() {
@@ -50,13 +60,13 @@ const DropiOtpSendCode = class {
     }
     handleInput(e, index) {
         const val = e.target.value.replace(/\D/g, '').slice(-1);
-        const newDigits = [...(this.digits ?? Array(OTP_LENGTH).fill(''))];
+        const newDigits = [...this.digits];
         newDigits[index] = val;
         this.digits = newDigits;
-        const newStates = [...(this.digitStates ?? Array(OTP_LENGTH).fill('idle'))];
+        const newStates = [...this.digitStates];
         newStates[index] = val ? 'filled' : 'idle';
         this.digitStates = newStates;
-        if (val && index < OTP_LENGTH - 1)
+        if (val && index < this.digitsCount - 1)
             this.inputs[index + 1]?.focus();
         if (newDigits.every(d => d !== '')) {
             const finalCode = newDigits.join('');
@@ -65,18 +75,18 @@ const DropiOtpSendCode = class {
         }
     }
     handleKeyDown(e, index) {
-        if (e.key === 'Backspace' && !(this.digits ?? [])[index] && index > 0) {
+        if (e.key === 'Backspace' && !this.digits[index] && index > 0) {
             this.inputs[index - 1]?.focus();
         }
     }
     handlePaste(e) {
         e.preventDefault();
-        const text = e.clipboardData?.getData('text')?.replace(/\D/g, '').slice(0, OTP_LENGTH) || '';
-        const newDigits = Array(OTP_LENGTH).fill('');
+        const text = e.clipboardData?.getData('text')?.replace(/\D/g, '').slice(0, this.digitsCount) || '';
+        const newDigits = Array(this.digitsCount).fill('');
         text.split('').forEach((c, i) => { newDigits[i] = c; });
         this.digits = newDigits;
         this.digitStates = newDigits.map(d => d ? 'filled' : 'idle');
-        this.inputs[Math.min(text.length, OTP_LENGTH - 1)]?.focus();
+        this.inputs[Math.min(text.length, this.digitsCount - 1)]?.focus();
         if (newDigits.every(d => d !== '')) {
             const finalCode = newDigits.join('');
             this.codeCompleted.emit(finalCode);
@@ -85,15 +95,20 @@ const DropiOtpSendCode = class {
     }
     render() {
         const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
-        return (index.h("div", { key: '09eb961c43257d0a2a852ec05bafa7c050d9e4ec', class: "otp" }, this.showLabelContact && (index.h("p", { key: '46b215b5343892c5bca4d5aab6590e8da791fc9d', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && index.h("strong", { key: '0c0871dbb99ad85a15275be1ed7f698cf9e4a808' }, " ", this.labelContact))), index.h("div", { key: 'd11d2c4f094a82240b3bde49039ff2e2d027f5d5', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, Array.from({ length: OTP_LENGTH }, (_, i) => (index.h("input", { key: i, ref: (el) => {
+        return (index.h("div", { key: 'c9c6c3387cec2371049c547d87742563268bf28d', class: "otp" }, this.showLabelContact && (index.h("p", { key: 'c3f36c62d7502eff8f86ef8202c3dfc65d846ba1', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && index.h("strong", { key: '25c05d8f0773bf6f2af83f6154ac76638499e4d7' }, " ", this.labelContact))), index.h("div", { key: '3ca2687723735b3eb6ada997f622a4a50c2d7ee9', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, this.digits.map((_, i) => (index.h("input", { key: i, ref: (el) => {
                 if (el)
                     this.inputs[i] = el;
             }, class: {
                 'otp__digit': true,
-                'otp__digit--filled': (this.digitStates ?? [])[i] === 'filled',
+                'otp__digit--filled': this.digitStates[i] === 'filled',
                 'otp__digit--error': this.error,
-            }, type: "text", inputMode: "numeric", maxLength: 1, value: (this.digits ?? [])[i] ?? '', onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (index.h("p", { key: 'a9156a4da398eeeec8128a012978e8e2c5f7eef4', class: "otp__error" }, this.errorMessage)), index.h("div", { key: '9c685306ba97d19907b92bbf6c203f0473a809fb', class: "otp__resend" }, this.canResend ? (index.h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (index.h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
+            }, type: "text", inputMode: "numeric", maxLength: 1, value: this.digits[i] ?? '', onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (index.h("p", { key: 'ddcdd5dacc533b73e6353c2670f762168c2803d3', class: "otp__error" }, this.errorMessage)), index.h("div", { key: 'a21650c43d7a62f9e187bd9f4eb307d275ff37be', class: "otp__resend" }, this.canResend ? (index.h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (index.h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
     }
+    static get watchers() { return {
+        "digitsCount": [{
+                "handleDigitsCountChange": 0
+            }]
+    }; }
 };
 DropiOtpSendCode.style = dropiOtpSendCodeCss();
 

package/dist/cjs/dropi-phone-input.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C8kwDvpf.js');
+var index = require('./index-CEWSDq65.js');
 
 const dropiPhoneInputCss = () => `:host{display:block;width:100%;position:relative;font-family:'Inter', sans-serif}*,*::before,*::after{box-sizing:border-box}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}input[type='number']{-moz-appearance:textfield;appearance:textfield}.phone-wrap{width:100%}.phone-label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.phone-input-container{display:flex;align-items:center;gap:8px}.custom-select{position:relative;width:50%}.form-control{flex:1;width:100%;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:5px;font-size:14px;font-family:inherit;transition:border-color 0.3s ease-in-out;height:40px;padding:0 12px;outline:none;color:var(--Gray-Gray-700, #32394d);background-color:var(--Neutral-White, #ffffff)}.form-control::placeholder{color:var(--Gray-Gray-500, #69738c)}.form-control:focus::placeholder{color:var(--Gray-Gray-500, #69738c)}.form-control:focus{border-color:var(--Info-Info-500, #50a5f1);outline:none}.form-control:disabled{border:1px solid var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);outline:none}.form-control.is-invalid{background:#fffbfb;border-color:var(--Error-Error-500, #f46a6b) !important}.select-button{width:100%;height:40px;padding:0.47rem 0.75rem;padding-right:7px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer}.select-button img{width:20px;height:20px}.select-button:focus{border-color:var(--Info-Info-500, #50a5f1) !important;outline:none}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:unset}.select-button.select-completed{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066);background:var(--Neutral-White, #ffffff)}.select-button.select-invalid{border-color:var(--Error-Error-500, #f46a6b) !important}.select-dropdown{position:absolute;width:100%;overflow:hidden;list-style:none;padding:0;margin:4px 0 0 0;border:1px solid transparent;border-radius:var(--Border-2, 8px);overflow-y:scroll;z-index:100}.select-dropdown::-webkit-scrollbar{width:6px}.select-dropdown::-webkit-scrollbar-thumb{background-color:var(--Gray-Gray-300, #d1d6e1);border-radius:4px}.expanded-select{max-height:250px;background:var(--Neutral-White, #ffffff);box-shadow:var(--Shadow-medium, 0 4px 16px rgba(0, 0, 0, 0.08));border:1px solid var(--Gray-Gray-200, #c3c9d9);transition:max-height 0.2s ease-in}.collapsed-select{max-height:0;background:transparent;box-shadow:none;border:1px solid transparent;transition:max-height 0.2s ease-out, background 0.6s ease-out, box-shadow 0.6s ease-out}.select-dropdown li{margin:0;padding:0}.option{width:100%;height:45px;border-radius:var(--Border-2, 8px);padding-top:var(--Size-3, 12px);padding-right:var(--Size-4, 16px);padding-bottom:var(--Size-3, 12px);padding-left:var(--Size-4, 16px);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:8px}.option img{width:20px;height:20px}.option:hover{background:var(--Gray-Gray-50, #f7f8fa)}.option:disabled{color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:unset}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}.phone-error{margin:4px 0 0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b)}`;
 
@@ -101,10 +101,10 @@ const COUNTRIES = [
 const DropiPhoneInput = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.ngModelChangeCod = index.createEvent(this, "ngModelChangeCod", 7);
-        this.ngModelChangePhone = index.createEvent(this, "ngModelChangePhone", 7);
-        this.verifiedField = index.createEvent(this, "verifiedField", 7);
-        this.onChangeSelect = index.createEvent(this, "onChangeSelect", 7);
+        this.dropiCodChange = index.createEvent(this, "dropiCodChange");
+        this.dropiPhoneChange = index.createEvent(this, "dropiPhoneChange");
+        this.dropiVerify = index.createEvent(this, "dropiVerify");
+        this.dropiChangeSelect = index.createEvent(this, "dropiChangeSelect");
     }
     get el() { return index.getElement(this); }
     /** Initial country dial code (e.g. "57") — matches Angular 'CodArea' setter */
@@ -132,13 +132,13 @@ const DropiPhoneInput = class {
     selectProperties = null;
     open = false;
     /** Emitted when country dial code changes — matches Angular 'ngModelChangeCod' */
-    ngModelChangeCod;
+    dropiCodChange;
     /** Emitted when phone number changes — matches Angular 'ngModelChangePhone' */
-    ngModelChangePhone;
+    dropiPhoneChange;
     /** Emitted on field verification — matches Angular 'verifiedField' */
-    verifiedField;
+    dropiVerify;
     /** Emitted when country selection changes — matches Angular 'onChangeSelect' */
-    onChangeSelect;
+    dropiChangeSelect;
     codAreaChanged() {
         this.ngModelPhone = '';
     }
@@ -160,14 +160,14 @@ const DropiPhoneInput = class {
     selectCountry(c) {
         this.codArea = c.code;
         this.open = false;
-        this.ngModelChangeCod.emit(c.code);
-        this.onChangeSelect.emit(c);
+        this.dropiCodChange.emit(c.code);
+        this.dropiChangeSelect.emit(c);
     }
     handleInput(e) {
         const raw = e.target.value.replace(/\D/g, '');
         this.ngModelPhone = raw.slice(0, this.selectedCountry.maxLength);
         e.target.value = this.ngModelPhone;
-        this.ngModelChangePhone.emit(this.ngModelPhone);
+        this.dropiPhoneChange.emit(this.ngModelPhone);
     }
     handleWindowClick(ev) {
         const path = ev.composedPath();
@@ -178,10 +178,10 @@ const DropiPhoneInput = class {
     render() {
         const country = this.selectedCountry;
         const isInvalid = this.isValidPhone === false;
-        return (index.h("div", { key: 'e4a9468971ff90e3e1c2cf6944a8475451843428', class: "phone-wrap" }, index.h("div", { key: 'dabdccaf0453e98afb3db78ee6b6f83a66615baa', class: "phone-input-container" }, index.h("div", { key: '6481136b782da271fe47c19cfd359398bf632f35', class: "custom-select" }, index.h("button", { key: 'd314c0e2c74724eff20eae8f34241caf1fc2448c', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
+        return (index.h("div", { key: 'a377fcfcfdb239d79f319f0e058f5d54cbcfac02', class: "phone-wrap" }, index.h("div", { key: '83719d2b76b491f1f7a9f3e202eb61c61abb2c31', class: "phone-input-container" }, index.h("div", { key: 'c92ff5d9f260b80ad4e7b8f7e290b7b4e1f595f0', class: "custom-select" }, index.h("button", { key: '35c56642c1828d86b7f211face2845dc79878fd4', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
                 if (!this.disabledInput)
                     this.open = !this.open;
-            } }, index.h("span", { key: 'c8b2aa7801a5c633c70010e7eeb2d5d9f3fb6b37', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, index.h("img", { key: 'c2a6583a02b029cee578b9c931f185f7d4102e3f', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), index.h("dropi-icon", { key: '26e6e575c9072c008060560f03fcaba942ae5157', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), index.h("ul", { key: 'ad2d7688f2de26aa1c8ac080819203c7f5839764', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (index.h("li", null, index.h("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, index.h("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), index.h("input", { key: '399968a68860688b9e91084dc5530aa5464ef5f1', id: "phone-input", type: "tel", inputmode: "numeric", class: { 'form-control': true, 'is-invalid': isInvalid }, placeholder: this.phoneNumberPlaceholder, value: this.ngModelPhone, disabled: this.disabledInput, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) }))));
+            } }, index.h("span", { key: 'e39cdac451df1c9a47c6552e7f133cb7662cae7f', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, index.h("img", { key: '620c8efc2695ee26fed0c2bcd7f6132af05cdbed', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), index.h("dropi-icon", { key: 'cf57cc1ef06e12b0112fdbbb063fb8f045c17e39', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), index.h("ul", { key: '1009d2e4212267bbfaf4aa26c0c2152606a8d092', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (index.h("li", null, index.h("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, index.h("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), index.h("input", { key: '87be58fc820c63741b076b04d807b7410e292344', id: "phone-input", type: "tel", inputmode: "numeric", class: { 'form-control': true, 'is-invalid': isInvalid }, placeholder: this.phoneNumberPlaceholder, value: this.ngModelPhone, disabled: this.disabledInput, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) }))));
     }
     static get watchers() { return {
         "codArea": [{

package/dist/cjs/dropi-progress-bar.cjs.entry.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var index = require('./index-CEWSDq65.js');
+
+const dropiProgressBarCss = () => `:host{display:block;width:100%}.progress-container{width:100%;display:flex;flex-direction:column;gap:4px}.progress-header{display:flex;justify-content:flex-end}.progress-value{font-size:var(--font-size-xs, 12px);color:var(--Gray-Gray-600, #475066);font-weight:500}.progress-track{width:100%;border-radius:999px;overflow:hidden;position:relative}.progress-fill{height:100%;border-radius:999px;transition:width 0.3s ease-in-out, background-color 0.3s ease-in-out}`;
+
+const DropiProgressBar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** The progress value (0-100) */
+    value = 0;
+    /** The color scheme of the progress bar */
+    severity = 'primary';
+    /** Height of the progress bar */
+    height = '8px';
+    /** Whether to show the value as text */
+    showValue = false;
+    /** Background color of the track (optional, defaults to gray-100) */
+    trackColor = 'var(--Gray-Gray-100, #F7F8FA)';
+    /** Custom color for the progress fill (overrides severity) */
+    color = '';
+    render() {
+        const fillStyle = {
+            width: `${Math.min(100, Math.max(0, this.value))}%`,
+            backgroundColor: this.color || `var(--${this.getSeverityVariable()}, #50A5F1)`,
+        };
+        return (index.h("div", { key: 'f68b88240ebc188f1f0378424b8d1617c2e7440e', class: "progress-container" }, this.showValue && (index.h("div", { key: 'f8116e4eb824031d4bd1ac9d694e2bd3bca1ed6d', class: "progress-header" }, index.h("span", { key: '892813f8e0a028ce286c00edd0489d489dd271c4', class: "progress-value" }, this.value, "%"))), index.h("div", { key: '2e740487a59df1ec7def96565a9ee64d53b773b8', class: "progress-track", style: { height: this.height, backgroundColor: this.trackColor } }, index.h("div", { key: '4f6fd1c436563cacac31e385d84c4a21945f6e10', class: "progress-fill", style: fillStyle }))));
+    }
+    getSeverityVariable() {
+        switch (this.severity) {
+            case 'success': return 'Success-Success-500';
+            case 'warning': return 'Warning-Warning-500';
+            case 'error': return 'Error-Error-500';
+            case 'info': return 'Info-Info-500';
+            case 'neutral': return 'Gray-Gray-400';
+            default: return 'Primary-Primary-500';
+        }
+    }
+};
+DropiProgressBar.style = dropiProgressBarCss();
+
+exports.dropi_progress_bar = DropiProgressBar;

package/dist/cjs/dropi-radio-button.cjs.entry.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-C8kwDvpf.js');
+var index = require('./index-CEWSDq65.js');
 
 const dropiRadioButtonCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.dropi-radio-button{display:flex;align-items:center;justify-content:flex-start;gap:20px}label{display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);line-height:1.5}input[type='radio']{appearance:none;-webkit-appearance:none;width:20px;height:20px;min-width:20px;border:2px solid var(--Gray-Gray-200, #c3c9d9);border-radius:50%;background-color:transparent;position:relative;cursor:pointer;outline:none;flex-shrink:0;align-self:center;vertical-align:middle;margin:0}input[type='radio']::before{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;background-color:var(--Primary-Primary-400, #f7b46f);border-radius:50%;display:none}input[type='radio']:checked{border:2px solid var(--Primary-Primary-500, #f49a3d)}input[type='radio']:checked::before{display:block}`;
 
 const DropiRadioButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.onChange = index.createEvent(this, "onChange", 7);
+        this.dropiChange = index.createEvent(this, "dropiChange");
     }
     /** Label text displayed next to the radio */
     label = '';
@@ -23,17 +23,17 @@ const DropiRadioButton = class {
      */
     resetTrigger = false;
     /** Emitted when the radio is selected */
-    onChange;
+    dropiChange;
     onResetTrigger(val) {
         if (val)
             this.checked = false;
     }
     handleChange(e) {
         this.checked = e.target.checked;
-        this.onChange.emit(e);
+        this.dropiChange.emit(e);
     }
     render() {
-        return (index.h("div", { key: '86430f601f7ddb6144682c0356938886217eb2ae', class: "dropi-radio-button" }, index.h("label", { key: '653fa8d5c33fc64ab44174e6d0fe35c6fd992be7', htmlFor: this.id }, index.h("input", { key: 'd99eae69867b0a09b6585a18dfaa52da353c5bd2', id: this.id, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
+        return (index.h("div", { key: '9f4c4f3be63c0aa0bcd1c48dacb97cec903db98d', class: "dropi-radio-button" }, index.h("label", { key: 'c29bd1ccc6c468b57fdcb4dd6c15cf541255cb71', htmlFor: this.id }, index.h("input", { key: '19533ffd5e5eb1b43d7e0f42971aa81652c8c926', id: this.id, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/cjs/dropi-radio-selection-list.cjs.entry.js

@@ -1,14 +1,14 @@
 'use strict';
 
-var index = require('./index-C8kwDvpf.js');
+var index = require('./index-CEWSDq65.js');
 
 const dropiRadioSelectionListCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.rsl__search{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);margin-bottom:var(--Size-2, 8px)}.rsl__search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.rsl__list{display:flex;flex-direction:column;gap:var(--Size-2, 8px)}.rsl__item{display:flex;align-items:flex-start;gap:var(--Size-3, 12px);padding:var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);cursor:pointer;transition:border-color 0.15s, background 0.15s}.rsl__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.rsl__item--selected{border-color:var(--Primary-Primary-500, #f49a3d);background:var(--Primary-Primary-50, #fff5eb)}.rsl__radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--Gray-Gray-300, #a3abbf);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:3px;transition:border-color 0.15s}.rsl__radio--checked{border-color:var(--Primary-Primary-500, #f49a3d)}.rsl__radio-dot{width:8px;height:8px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.rsl__content{display:flex;flex-direction:column;gap:2px}.rsl__name{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d)}.rsl__desc{font-size:var(--font-size-xs, 10px);line-height:1.4;color:var(--Gray-Gray-500, #69738c)}`;
 
 const DropiRadioSelectionList = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.valueChange = index.createEvent(this, "valueChange", 7);
-        this.onSearch = index.createEvent(this, "onSearch", 7);
+        this.dropiChange = index.createEvent(this, "dropiChange");
+        this.dropiSearch = index.createEvent(this, "dropiSearch");
     }
     /** Options array or JSON string */
     options = [];
@@ -27,9 +27,9 @@ const DropiRadioSelectionList = class {
     filterText = '';
     parsedOptions = [];
     /** Emitted on selection change. e.detail = selected option id */
-    valueChange;
+    dropiChange;
     /** Emitted on search — matches Angular 'onSearch' */
-    onSearch;
+    dropiSearch;
     optionsChanged(val) {
         this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
     }
@@ -41,12 +41,12 @@ const DropiRadioSelectionList = class {
         return this.parsedOptions.filter(o => o.name?.toLowerCase().includes(q));
     }
     render() {
-        return (index.h("div", { key: '7fdbf3d20a030a78ab4f48e7dba8333a34b1017b', class: "rsl" }, this.showFilter && (index.h("div", { key: '12e2abb8f8ed76c6b3231f28b63c842ba3c3c326', class: "rsl__search" }, index.h("dropi-icon", { key: '0d3e759696ceefdc997fadec75cc73f281caafd0', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), index.h("input", { key: 'd5605975ebfda35d7abb0e69fe0a2baa929faddb', class: "rsl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
+        return (index.h("div", { key: '296bdc955d13b8163ca954f6d399543343e7e121', class: "rsl" }, this.showFilter && (index.h("div", { key: '4cdd3764411f389d2b6ce1145f5b6759bb20fc7b', class: "rsl__search" }, index.h("dropi-icon", { key: '81af80a3dddb6176625b6ba575b084501741cd81', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), index.h("input", { key: 'aa0e762f4403431225375f95c792af8596529588', class: "rsl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
                 this.filterText = e.target.value;
-                this.onSearch.emit({ searchValue: this.filterText, filteredOptions: this.filtered });
-            } }))), index.h("div", { key: '25dae74884621ce4f27f214de94c9ddb0fa1799f', class: "rsl__list" }, this.filtered.map(opt => {
+                this.dropiSearch.emit({ searchValue: this.filterText, filteredOptions: this.filtered });
+            } }))), index.h("div", { key: 'd153875a1c09957b74648f61f70320968ea6cd40', class: "rsl__list" }, this.filtered.map(opt => {
             const isSelected = opt.id === this.selectedOption;
-            return (index.h("div", { class: { 'rsl__item': true, 'rsl__item--selected': isSelected }, key: opt.id, onClick: () => { this.selectedOption = opt.id; this.valueChange.emit(opt.id); } }, index.h("div", { class: { 'rsl__radio': true, 'rsl__radio--checked': isSelected } }, isSelected && index.h("div", { class: "rsl__radio-dot" })), index.h("div", { class: "rsl__content" }, index.h("span", { class: "rsl__name" }, opt.name), (isSelected || this.alwaysShowDescription) && opt.description && (index.h("span", { class: "rsl__desc" }, opt.description)))));
+            return (index.h("div", { class: { 'rsl__item': true, 'rsl__item--selected': isSelected }, key: opt.id, onClick: () => { this.selectedOption = opt.id; this.dropiChange.emit(opt.id); } }, index.h("div", { class: { 'rsl__radio': true, 'rsl__radio--checked': isSelected } }, isSelected && index.h("div", { class: "rsl__radio-dot" })), index.h("div", { class: "rsl__content" }, index.h("span", { class: "rsl__name" }, opt.name), (isSelected || this.alwaysShowDescription) && opt.description && (index.h("span", { class: "rsl__desc" }, opt.description)))));
         }))));
     }
     static get watchers() { return {

package/dist/cjs/dropi-read-more.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C8kwDvpf.js');
+var index = require('./index-CEWSDq65.js');
 
 const dropiReadMoreCss = () => `:host{display:block}.read-more__text{margin:0;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-800, #1f2433);line-height:1.5}.read-more__toggle{all:unset;display:inline;font-size:var(--font-size-s, 12px);font-family:inherit;font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-600);cursor:pointer}.read-more__toggle:hover{color:var(--Primary-Primary-600, #d4872e)}`;
 
@@ -32,7 +32,7 @@ const DropiReadMore = class {
     }
     render() {
         const showToggle = this.needsTruncation && (this.expanded ? this.showSeeLess : true);
-        return (index.h("div", { key: '125c5f1d75c1e06f02d9898f375626bb75a67cd8', class: "read-more" }, index.h("p", { key: '4a4450a3468e7fe7297fdae98d370f8cd77b8553', class: "read-more__text", style: this.textStyle ? this.textStyle : undefined }, this.displayText, showToggle && (index.h("button", { key: 'cfe58b2781b908d9a0a802b4bd68cedf8dea827e', class: "read-more__toggle", style: this.buttonStyle ? this.buttonStyle : undefined, onClick: () => this.expanded = !this.expanded }, this.expanded ? ' Ver menos' : '... Ver más')))));
+        return (index.h("div", { key: '6accf9aa0a6f7377c7de6e8cbcb9e2a7ee99573a', class: "read-more" }, index.h("p", { key: '96e5493df8b065008f9bc45cea1ba768eabfc0a2', class: "read-more__text", style: this.textStyle ? this.textStyle : undefined }, this.displayText, showToggle && (index.h("button", { key: '195d962715c5c618701c3e86df618289915e3a9b', class: "read-more__toggle", style: this.buttonStyle ? this.buttonStyle : undefined, onClick: () => this.expanded = !this.expanded }, this.expanded ? ' Ver menos' : '... Ver más')))));
     }
 };
 DropiReadMore.style = dropiReadMoreCss();