@dropi/ui 0.1.41 → 0.1.43

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

@@ -12,6 +12,8 @@ export class DropiIcon {
     iconWidth = '20px';
     iconHeight = '20px';
     color = 'currentColor';
+    /** Stroke width for icons that use strokes */
+    strokeWidth = '';
     widthChanged() {
         this.updateHostStyles();
     }
@@ -21,13 +23,22 @@ export class DropiIcon {
     colorChanged() {
         this.applyColor();
     }
+    strokeWidthChanged() {
+        this.applyStrokeWidth();
+    }
     componentWillLoad() {
         this.applyColor();
+        this.applyStrokeWidth();
         this.updateHostStyles();
     }
     componentDidUpdate() {
         this.updateHostStyles();
     }
+    applyStrokeWidth() {
+        if (this.strokeWidth) {
+            this.el.style.setProperty('--icon-stroke-width', this.strokeWidth);
+        }
+    }
     updateHostStyles() {
         this.el.style.width = this.iconWidth;
         this.el.style.height = this.iconHeight;
@@ -43,7 +54,7 @@ export class DropiIcon {
         this.el.style.setProperty('--icon-fill', fill);
     }
     render() {
-        return (h("svg", { key: '7185e1861c44aafcec2117f53f61ce18992388ad', width: this.iconWidth, height: this.iconHeight, class: { spin: (this.name ?? '') === 'Spinner' }, "aria-hidden": "true" }, h("use", { key: 'b7913bfbf0bbb6bfa35f848f9fee19e09646004d', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name ?? ''}` })));
+        return (h("svg", { key: '99f511720c6654b3f97490c966061520ee17d27f', width: this.iconWidth, height: this.iconHeight, class: { spin: (this.name ?? '') === 'Spinner' }, "aria-hidden": "true" }, h("use", { key: '04792170d8c23b3606249d051f8cc903bd5d1211', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name ?? ''}` })));
     }
     static get is() { return "dropi-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -138,6 +149,26 @@ export class DropiIcon {
                 "reflect": false,
                 "attribute": "color",
                 "defaultValue": "'currentColor'"
+            },
+            "strokeWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stroke width for icons that use strokes"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stroke-width",
+                "defaultValue": "''"
             }
         };
     }
@@ -152,6 +183,9 @@ export class DropiIcon {
             }, {
                 "propName": "color",
                 "methodName": "colorChanged"
+            }, {
+                "propName": "strokeWidth",
+                "methodName": "strokeWidthChanged"
             }];
     }
 }

package/dist/collection/components/dropi-ilustration-icon/dropi-ilustration-icon.js

@@ -25,13 +25,13 @@ export class DropiIlustrationIcon {
         const map = {
             success: 'Check-circle',
             error: 'Cross-circle',
-            info: 'Info',
-            warning: 'Info',
+            info: 'Comment-round_info',
+            warning: 'Comment-round_info',
         };
-        return map[state] || 'Info';
+        return map[state] || 'Comment-round_info';
     }
     render() {
-        return (h("div", { key: '2f956eddb214de168aae134374512600867e77a8', class: "dropi-ilustration" }, this.type === 'dropi' && (h("figure", { key: '3d05624542d51f64cb6402fb958f039bc943afb7', class: "dropi-ilustration__image" }, h("img", { key: '6fb383b378d989f675433c46710e246dc193f26b', src: `assets/icons/ilustration/${(!this.state || String(this.state) === 'undefined' || String(this.state) === 'null') ? 'default' : this.state}.svg`, alt: this.state ?? 'default', onError: (e) => { e.target.src = 'assets/icons/ilustration/default.svg'; } }))), this.type === 'mb' && (h("figure", { key: 'f66957ddbba9506d041ab1b2e8877872b25bdbf3', class: `dropi-ilustration__image-mb ${this.state}` }, ['success', 'error', 'info', 'warning'].includes(this.state) && (h("dropi-icon", { key: '4f65eb91eb99c07abefc6089c6935b1fb573978b', name: this.getIconName(this.state), iconWidth: "24px", iconHeight: "24px", color: "Neutral-White" })))), this.type === 'insignia' && (h("figure", { key: 'fd0db6cbdc7daf018446f03cf8dd13dbe218733a', class: this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia' }, h("img", { key: '79cd16693eeb848db9c027c8d2e96c6760a9e2ac', src: this.insigniaIcons[this.stateInsignia], alt: this.stateInsignia }), this.tagProduct && (h("p", { key: '58ec25aa47c8756ec11a0fba679194a25dfaad0c', class: `tag tag--${this.stateInsignia}` }, h("span", { key: '8354a3de165526351bc53021218b1fb2a0a4d064', class: "Caption-S" }, this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1))))))));
+        return (h("div", { key: 'd7fa7fce7346d3496ae99c580dee9de5fea934b8', class: "dropi-ilustration" }, this.type === 'dropi' && (h("figure", { key: 'faa5686e775ac3a373037b6e1f9bf32076cfb495', class: "dropi-ilustration__image" }, h("img", { key: '209017a72b774b3e14c8e34f7e3bface75ba592b', src: `assets/icons/ilustration/${(!this.state || String(this.state) === 'undefined' || String(this.state) === 'null') ? 'default' : this.state}.svg`, alt: this.state ?? 'default', onError: (e) => { e.target.src = 'assets/icons/ilustration/default.svg'; } }))), this.type === 'mb' && (h("figure", { key: '75c82f5356c427d4ed35db3e9697d232e7f1b132', class: `dropi-ilustration__image-mb ${this.state}` }, ['success', 'error', 'info', 'warning'].includes(this.state) && (h("dropi-icon", { key: '86a371bef276d6c945959405d39cea3a8dcecde3', name: this.getIconName(this.state), iconWidth: "24px", iconHeight: "24px", color: "Neutral-White" })))), this.type === 'insignia' && (h("figure", { key: 'c1bef5162ba49d8493a1c8d6b16d886543215046', class: this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia' }, h("img", { key: '8d1313457cda0f356f278f095b42d75d960a1c27', src: this.insigniaIcons[this.stateInsignia], alt: this.stateInsignia }), this.tagProduct && (h("p", { key: '303cce4a3a632e9e36f8c7e6d186b56cec9c5ed6', class: `tag tag--${this.stateInsignia}` }, h("span", { key: '3c2b051198e41dcfc2944aa7b1f869ba30e56c2a', class: "Caption-S" }, this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1))))))));
     }
     static get is() { return "dropi-ilustration-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-image-miniature/dropi-image-miniature.js

@@ -31,7 +31,7 @@ export class DropiImageMiniature {
     }
     render() {
         const imgs = this.parsedImages;
-        return (h("div", { key: '111d908339df1d3fba74cb8737f3c72e2254e2f0', class: "miniature" }, this.label && h("span", { key: '007ecc8149b6778eac7dd80a978a088f686001eb', class: "miniature__label" }, this.label), h("div", { key: '95c18d71f5c753bd2610915b62632aca7fbd4d16', class: "miniature__grid" }, imgs.map((src, i) => (h("div", { class: "miniature__item", style: { width: this.width, height: this.height }, key: i, onClick: () => this.dropiImageClick.emit({ images: imgs, index: i }) }, h("img", { src: src, alt: `imagen ${i + 1}`, loading: "lazy", onError: (e) => this.handleError(e) }), h("div", { class: "miniature__zoom" }, h("dropi-icon", { name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Neutral-White" }))))))));
+        return (h("div", { key: 'aefd44eab41f586a8a5bf4bbc1675b6c9cc67124', class: "miniature" }, this.label && h("span", { key: 'f61ea53ad1dfa354a93781877e0f02c120e0f445', class: "miniature__label" }, this.label), h("div", { key: 'fbde49689bed4e93c63cab97e787e6d877a7fcb2', class: "miniature__grid" }, imgs.map((src, i) => (h("div", { class: "miniature__item", style: { width: this.width, height: this.height }, key: i, onClick: () => this.dropiImageClick.emit({ images: imgs, index: i }) }, h("img", { src: src, alt: `imagen ${i + 1}`, loading: "lazy", onError: (e) => this.handleError(e) }), h("div", { class: "miniature__zoom" }, h("dropi-icon", { name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Neutral-White" }))))))));
     }
     static get is() { return "dropi-image-miniature"; }
     static get encapsulation() { return "shadow"; }

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

@@ -81,13 +81,13 @@ export class DropiInput {
     touched = false;
     // ── Events ──────────────────────────────────────────────────
     /** Emitted on every keystroke with the current value */
-    onInput;
+    dropiInput;
     /** Emitted on blur with the final value */
-    onChange;
+    dropiChange;
     /** Emitted on focus */
-    onFocus;
+    dropiFocus;
     /** Emitted on blur */
-    onBlur;
+    dropiBlur;
     inputPropertiesChanged(val) {
         if (!val)
             return;
@@ -150,7 +150,7 @@ export class DropiInput {
             val = this.formatThousands(val, this.isMoneyInput);
         this.value = val;
         this.internals.setFormValue(val);
-        this.onInput.emit(val);
+        this.dropiInput.emit(val);
     }
     handleKeyDown(e) {
         if ((this.isNumericInput || this.isMoneyInput || this.isThousandSeparator) && !this.isAllowedNumberKey(e)) {
@@ -161,12 +161,12 @@ export class DropiInput {
         }
     }
     handleFocus() {
-        this.onFocus.emit();
+        this.dropiFocus.emit();
     }
     handleBlur() {
         this.touched = true;
-        this.onChange.emit(this.value);
-        this.onBlur.emit();
+        this.dropiChange.emit(this.value);
+        this.dropiBlur.emit();
     }
     togglePassword() {
         if (this.disabled)
@@ -231,14 +231,14 @@ export class DropiInput {
     render() {
         const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
         const showIconInline = !!this.icon;
-        return (h("div", { key: 'a6c762070ca5c0ffb5028f1899d4e026721664ee', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: 'fb223818b568114400aa456e595623c882b8bcd2', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && h("span", { key: '04c522a21ba3e0ec9710d267feb866d79dae7cbb', class: "asterisk" }, " *"))), h("div", { key: '1672e9954f11ad61e6f224953f97aa7036e5b212', class: "form-group" }, h("div", { key: 'd9bfc41486fe3f93d5144f55bf89a4ae1a916f5e', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: 'e7d21fd9b115925ed2bc584a6f5c614ea3761922', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (h("dropi-icon", { key: '5593f56ed03acdb79a9e8e4fefac58d585a5a092', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' }, color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: 'ef70c2be1606334593269be63234295bdbdf86b1', id: this.resolvedId, class: {
+        return (h("div", { key: '36a33fdb7048e3ba43dae3c2d3d71c9f69643cac', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: '699adfe37d662ed328cd13fdad428e857b70f01d', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && h("span", { key: 'b2d6f4757cdb50eacfb7879e4a878e30adf5235d', class: "asterisk" }, " *"))), h("div", { key: 'dc080fc5d0ab12f0eadf7e1bb30cae5539f76640', class: "form-group" }, h("div", { key: 'cf228d5e4c7e0a04735d38ba239a2b989f5247ca', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: '049e396ea1f2f11625de73bc074c0e0aecea96ab', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (h("dropi-icon", { key: '544316f6e7a284acf65d3a2b7fb3a2654c80d95b', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' }, color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: '6d23ac748d0768d6eea0eb347bde7b13d8f20321', id: this.resolvedId, class: {
                 'form-control': true,
                 'form-control-valid': !this.isInvalid && this.touched && !!this.value,
                 'form-control-invalid': this.isInvalid,
                 'padding-icon': showIconInline,
                 'text-password': this.passwordInput && !this.showPassword,
                 'fixed-label-input': this.fixedLabel,
-            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, "data-cy": undefined, onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: 'c0d079355d299b26dc2e8bde4347fd30aa791e21', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: 'fca9bc2745e0ccb7ba3b10c4e3e6b5d8bbb6f645', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: 'f864cc07f591d0948cb06d6dde1e910bab10187a', class: "form-control-helper" }, this.isInvalid && h("dropi-icon", { key: 'be2cf0d632fd8245e817d4023b4e4f060bc80d24', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '3768369a635e8ac03db24b0ba7fa7a214cc71577', class: {
+            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, "data-cy": undefined, onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: '8f26c9430cbc1c6b55286d62c2a350724dd0101f', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: '95d953c160cf22457b0e1d6265b8137a24d4092b', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: 'ad3d4b5230fd32e97c661c64deadf97830caa550', class: "form-control-helper" }, this.isInvalid && h("dropi-icon", { key: '7c28120d1cc46ccd288948b1d2d9e5cc24521af7', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '40eb1eedd2a204975aed61fcd24ccadd26d8aaef', class: {
                 'disabled-helper': this.disabled,
                 'invalid-color': this.isInvalid,
             } }, this.textHelper)))))));
@@ -733,8 +733,8 @@ export class DropiInput {
     }
     static get events() {
         return [{
-                "method": "onInput",
-                "name": "onInput",
+                "method": "dropiInput",
+                "name": "dropiInput",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -748,8 +748,8 @@ export class DropiInput {
                     "references": {}
                 }
             }, {
-                "method": "onChange",
-                "name": "onChange",
+                "method": "dropiChange",
+                "name": "dropiChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -763,8 +763,8 @@ export class DropiInput {
                     "references": {}
                 }
             }, {
-                "method": "onFocus",
-                "name": "onFocus",
+                "method": "dropiFocus",
+                "name": "dropiFocus",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -778,8 +778,8 @@ export class DropiInput {
                     "references": {}
                 }
             }, {
-                "method": "onBlur",
-                "name": "onBlur",
+                "method": "dropiBlur",
+                "name": "dropiBlur",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/dropi-languages-selector/dropi-languages-selector.js

@@ -13,7 +13,7 @@ export class DropiLanguagesSelector {
     languages = [];
     /** Currently selected language (LanguageOption or JSON string) */
     selectedLang = null;
-    languageChange;
+    dropiLanguageChange;
     isOpen = false;
     parsedLanguages = [];
     currentLang = null;
@@ -40,7 +40,7 @@ export class DropiLanguagesSelector {
     select(lang) {
         this.currentLang = lang;
         this.isOpen = false;
-        this.languageChange.emit(lang);
+        this.dropiLanguageChange.emit(lang);
     }
     render() {
         if (!this.currentLang)
@@ -124,8 +124,8 @@ export class DropiLanguagesSelector {
     }
     static get events() {
         return [{
-                "method": "languageChange",
-                "name": "languageChange",
+                "method": "dropiLanguageChange",
+                "name": "dropiLanguageChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

@@ -25,7 +25,7 @@ export class DropiLogo {
         e.target.src = FALLBACK_SVG;
     }
     render() {
-        return (h("figure", { key: '479af3da2dc04c7d6e79b99494fce0fb5419af4d', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, h("img", { key: '6b78e7004f4b1dd782e4c17dae7b264fff483875', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", onError: (e) => this.handleError(e) })));
+        return (h("figure", { key: '2a5ed49bd2ac8592db5b06256ff4e911e26ee6fd', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, h("img", { key: 'f0f63e2e5ceb30c24eac3f7f5a3446858b632f90', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", onError: (e) => this.handleError(e) })));
     }
     static get is() { return "dropi-logo"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,10 +5,11 @@
   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;
+  transition: opacity 0.18s ease; z-index: var(--dropi-z-index-modal, 9999);
+  visibility: hidden;
 }
-.modal-root--open { opacity: 1; pointer-events: auto; }
-.modal-root--closing { opacity: 1; pointer-events: none; }
+.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;
@@ -53,6 +54,8 @@
   align-items: flex-start; 
   gap: var(--Size-1, 4px); 
   width: 100%;
+  margin-top: auto;
+  flex-shrink: 0;
 }
 .modal-footer:empty { display: none; }
 
@@ -72,12 +75,14 @@
 }
 
 .modal-panel.size-m .modal-footer,
-.modal-panel.size-s .modal-footer { 
-  justify-content: center; 
+.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-s .modal-footer ::slotted(.button-container),
+.modal-panel.size-xs .modal-footer ::slotted(.button-container) { 
   min-width: unset !important;
   width: 100%;
 }
@@ -94,6 +99,7 @@
 .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); }

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

@@ -33,25 +33,25 @@ export class DropiModal {
     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() {
@@ -62,35 +62,40 @@ export class DropiModal {
             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) && 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;
@@ -104,15 +109,15 @@ export class DropiModal {
             if ((this.modal ?? true) && 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);
     }
@@ -123,7 +128,7 @@ export class DropiModal {
         }
     }
     render() {
-        return (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) && h("div", { key: '06ebd29da0c7dc699e7c16769476e310336ab149', class: "modal-mask", onClick: () => this.dismissable && this.hide() }), h("div", { key: '87cb9bbd4c1c6c27a6a7d09f561ea781c1571803', class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true" }, this.showHeader && (h("div", { key: '86f22ef920b7a7437825f4c5f9ccff23b591c499', class: "modal-header" }, this.header && h("span", { key: '2ae7c9b879ee6c025b6b42977bad643ff4d28370', class: "modal-title" }, this.header), h("slot", { key: '85a0a54691ca191719202c8fea6b30ffff30aacc', name: "header" }), this.showCloseIcon && (h("button", { key: 'dc1f570830d22535a39c9e9fbf0bccdb8e4bfcf7', class: "modal-close", onClick: () => this.hide(), "aria-label": "Cerrar" }, "\u00D7")))), h("div", { key: 'ceca42f33ff7d4762c79b2d133e23bc7cedb3cb3', class: "modal-content" }, h("slot", { key: '14a82735c521c45deda61e8a69ae8673ad754b3d' })), this.showFooter && h("div", { key: 'e71a5393c19de696247502abd09d26a38cd1b979', class: "modal-footer" }, h("slot", { key: '1364eed1b66e82d321d06d13d9d34615c7634ce0', name: "footer" })))));
+        return (h("div", { key: '95847ba48baae69b93888cb59ecaa9d2130ae17a', class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}` }, (this.modal ?? true) && h("div", { key: '78acc3c2f1b7327b6fc1770a9536cdf0c2c57f99', class: "modal-mask", onClick: () => this.canDismiss && this.dismissable && this.dismiss() }), 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 && (h("div", { key: '7d960505ea8fd7804ac67ceb88b9195e6ad1998d', class: "modal-header" }, this.header && h("span", { key: 'fed4b8a2e6c89fca39a8766d0e843db7c184be59', class: "modal-title" }, this.header), h("slot", { key: 'b2c6c5cc1f019229c3ad5028e42b1fd887494abd', name: "header" }), this.showCloseIcon && (h("button", { key: '24fc8ff422ea5c7e6a8c0737acbb29c1d7467f40', class: "modal-close", onClick: () => this.dismiss(), "aria-label": "Cerrar" }, "\u00D7")))), h("div", { key: '472a7dfe704b0b8d129b00bc88204602ead66403', class: "modal-content" }, h("slot", { key: '6b3e6fdefca0c6510d4fdbbccce53a5efa52e4c8' })), this.showFooter && h("div", { key: '5bd3c15d4d1fb2ebffad79c9314d03d1d72dae29', class: "modal-footer" }, h("slot", { key: '1980d019b142e2a00f55a3a755e9e08d0393c5e5', name: "footer" })))));
     }
     static get is() { return "dropi-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -140,11 +145,11 @@ export class DropiModal {
     static get properties() {
         return {
             "visible": {
-                "type": "any",
+                "type": "boolean",
                 "mutable": true,
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
@@ -410,7 +415,7 @@ export class DropiModal {
                 "mutable": false,
                 "complexType": {
                     "original": "ModalSize",
-                    "resolved": "\"drawer-l\" | \"drawer-m\" | \"drawer-s\" | \"drawer-xxl\" | \"full\" | \"l\" | \"m\" | \"s\" | \"sidebar-half\" | \"xxl\"",
+                    "resolved": "\"drawer-l\" | \"drawer-m\" | \"drawer-s\" | \"drawer-xxl\" | \"full\" | \"l\" | \"m\" | \"s\" | \"sidebar-half\" | \"xs\" | \"xxl\"",
                     "references": {
                         "ModalSize": {
                             "location": "local",
@@ -602,11 +607,11 @@ export class DropiModal {
     }
     static get events() {
         return [{
-                "method": "onShow",
-                "name": "onShow",
+                "method": "dropiShow",
+                "name": "dropiShow",
                 "bubbles": true,
                 "cancelable": true,
-                "composed": false,
+                "composed": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -617,11 +622,11 @@ export class DropiModal {
                     "references": {}
                 }
             }, {
-                "method": "onHide",
-                "name": "onHide",
+                "method": "dropiHide",
+                "name": "dropiHide",
                 "bubbles": true,
                 "cancelable": true,
-                "composed": false,
+                "composed": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -632,11 +637,11 @@ export class DropiModal {
                     "references": {}
                 }
             }, {
-                "method": "visibleChange",
-                "name": "visibleChange",
+                "method": "dropiVisibleChange",
+                "name": "dropiVisibleChange",
                 "bubbles": true,
                 "cancelable": true,
-                "composed": false,
+                "composed": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -650,7 +655,7 @@ export class DropiModal {
     }
     static get methods() {
         return {
-            "hide": {
+            "dismiss": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -667,7 +672,7 @@ export class DropiModal {
                     "tags": []
                 }
             },
-            "show": {
+            "openModalExternally": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],

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

@@ -36,9 +36,9 @@ export class DropiNavbar {
     }
     render() {
         const items = this.parsedData;
-        return (h("nav", { key: '15c337396dbe445ac7a13d7e0f2d99f88b4de439', class: "navbar" }, h("div", { key: '922a217dfe53f3f34dd6746033996bcd71dadfb2', class: "navbar__left" }, this.showMenuToggle && (h("button", { key: 'db80ad1fd6f47807196c81ae60bf9cea8bb16e77', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, h("dropi-icon", { key: 'eca18144260cb6471a19f78f7ce75254ba5a138e', name: "Menu", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (h("img", { key: '374ea8553605f289c413882c757eda70054ba71d', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && h("span", { key: '8e2abceb591c0de10ca99d2090fea7a0da792a7b', class: "navbar__title" }, this.title)), items.length > 0 && (h("ul", { key: 'fd26fc64ea3325ddc439a802ab56e69b329020dd', class: "navbar__items" }, items.map(item => (h("li", null, h("button", { class: { 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }, onClick: () => this.clickLoadItem.emit(item), type: "button" }, item.icon && h("dropi-icon", { name: item.icon, iconWidth: "16px", iconHeight: "16px", color: item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600' }), h("span", null, item.name?.value || item.label), item.badge != null && String(item.badge) !== '0' && (h("span", { class: "navbar__badge" }, item.badge)))))))), h("div", { key: '51a6532caac773ea7236e95b0aa5ee9ee052db4a', class: "navbar__right" }, h("button", { key: '309b47a8fa074e7d47632a95490c5ba0d2950745', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, h("dropi-icon", { key: '2a970ae36fdd4e42d9fbab5d8ebb61a1d14d54c8', name: "Bell", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (h("span", { key: '67412b6d3c7689f78cca15e91a1e8e3ee88152a2', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), h("button", { key: '38cc70fdc1c204b06b62c54a23f4b8c76647fd6b', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
+        return (h("nav", { key: '83ec218a7545739c65d8f1f61197b429b0e7d407', class: "navbar" }, h("div", { key: 'e40038630c33a280f3c231b3dd26643f1c853ea3', class: "navbar__left" }, this.showMenuToggle && (h("button", { key: '0ecbae684b9324c48cd01a6081fd1951b3ba7cf8', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, h("dropi-icon", { key: '9edea72a4508a984be2e6785f3f0fa6abe0625c4', name: "Menu", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (h("img", { key: 'b8cd9896736d505dad05b8df5f10928d40f250dd', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && h("span", { key: '4e5dae851fe28f1bc913d7a5d4d42a2413342635', class: "navbar__title" }, this.title)), items.length > 0 && (h("ul", { key: 'b951cc880b8aaf718b85403e3420d73ac976aa60', class: "navbar__items" }, items.map(item => (h("li", null, h("button", { class: { 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }, onClick: () => this.clickLoadItem.emit(item), type: "button" }, item.icon && h("dropi-icon", { name: item.icon, iconWidth: "16px", iconHeight: "16px", color: item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600' }), h("span", null, item.name?.value || item.label), item.badge != null && String(item.badge) !== '0' && (h("span", { class: "navbar__badge" }, item.badge)))))))), h("div", { key: '8fe68f93af722982bac11890b106a35a292b3d98', class: "navbar__right" }, h("button", { key: 'a4d0ff928dca2502384cd21e0bc852cacc895a30', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, h("dropi-icon", { key: '41007746a151c27059d41db7c4672a2b551882d1', name: "Bell", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (h("span", { key: 'a0e5c6c9f8e2aaf3e67cc22bdff2ae65472b7cb5', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), h("button", { key: 'e1996f9e1fa922cd03a4e9c5721f5be838a941d3', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
             ? h("img", { class: "navbar__avatar", src: this.userAvatar, alt: this.userName })
-            : h("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && h("span", { key: '1f2cfe4bddef60d31751c24c3f02cace2f07d6dd', class: "navbar__user-name" }, this.userName), h("dropi-icon", { key: '520aff19c56964eefb3b1f59646c19df779c7e47', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })))));
+            : h("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && h("span", { key: 'd539c8f456564aa8d3a29e9d2e2ed6250241f411', class: "navbar__user-name" }, this.userName), h("dropi-icon", { key: 'd32cba548201f28a051142e889f6de207a4e67d2', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })))));
     }
     static get is() { return "dropi-navbar"; }
     static get encapsulation() { return "shadow"; }