@dropi/ui 0.1.21 → 0.1.22

package/dist/esm/dropi-ilustration-icon.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, h } from './index-D5SAM1O2.js';
 
 const dropiIlustrationIconCss = () => `:host{display:inline-flex}.dropi-ilustration{display:inline-flex;align-items:center;justify-content:center}.dropi-ilustration__image,.dropi-ilustration-insignia{margin:0;display:flex;align-items:center;justify-content:center}.dropi-ilustration__image img{max-width:100%;height:auto}.dropi-ilustration__image-mb{width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:50%;margin:0}.dropi-ilustration__image-mb.success{background:var(--Success-Success-500, #22c55e)}.dropi-ilustration__image-mb.error{background:var(--Error-Error-500, #ef4444)}.dropi-ilustration__image-mb.info{background:var(--Info-Info-500, #3b82f6)}.dropi-ilustration__image-mb.warning{background:url('assets/icons/ilustration/bg-warning.svg') no-repeat center;background-size:contain;border-radius:0}.dropi-ilustration-insignia-tag{display:flex;align-items:center;margin:0}.dropi-ilustration-insignia-tag img{position:relative;z-index:2;height:32px;width:auto}.tag{border-radius:32px;color:var(--Neutral-White, #ffffff);text-transform:capitalize;margin:0 0 0 -20px;display:flex;align-items:center;justify-content:flex-start}.tag span{color:var(--Neutral-White, #ffffff);padding:4px 8px 4px 18px;font-size:var(--font-size-xxs)}.tag--verified{background:linear-gradient(90deg, #ffc10d 41.3%, #ff6102 112.32%)}.tag--premium{background:linear-gradient(90deg, #ff6102 56.52%, #ffc10d 107.25%)}.tag--exclusive{background:linear-gradient(90deg, var(--Gray-900, #0e111a) 26.09%, #ff6102 116.67%)}`;
 
@@ -29,7 +29,7 @@ const DropiIlustrationIcon = class {
         return map[state] || 'Info';
     }
     render() {
-        return (h("div", { key: '1d3d1015a31881df6ba5693ceddc1cfb0b8df2bb', class: "dropi-ilustration" }, this.type === 'dropi' && (h("figure", { key: '5491f93ace8b3e0bad048fac1ad7c4bf01890981', class: "dropi-ilustration__image" }, h("img", { key: '9f189e2c83803d65f065ad9cd2c85ace66ceaa2c', src: `assets/icons/ilustration/${this.state}.svg`, alt: this.state, onError: (e) => { e.target.src = 'assets/icons/ilustration/default.svg'; } }))), this.type === 'mb' && (h("figure", { key: '170b1e7b9eea152ee3089a995f0f365557c06e6b', class: `dropi-ilustration__image-mb ${this.state}` }, ['success', 'error', 'info', 'warning'].includes(this.state) && (h("dropi-icon", { key: '50ce63e3d60ac955484fc3909579196d3b8ce762', name: this.getIconName(this.state), width: "24px", height: "24px", color: "Neutral-White" })))), this.type === 'insignia' && (h("figure", { key: 'af5f8083be7a39243d4022157f960db46ca905a5', class: this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia' }, h("img", { key: '75539c260008b6bd7e84253454f71e413baef2fe', src: this.insigniaIcons[this.stateInsignia], alt: this.stateInsignia }), this.tagProduct && (h("p", { key: '4d96bad0a9b7735bd14889ea011843e46f19f146', class: `tag tag--${this.stateInsignia}` }, h("span", { key: 'b605d343b863c5a3aa5956000ea4b510efd7c506', class: "Caption-S" }, this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1))))))));
+        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: '2844c2707906bcba57835c1e7652c52769b504fe', name: this.getIconName(this.state), width: "24px", height: "24px", color: "Neutral-White" })))), this.type === 'insignia' && (h("figure", { key: '4c091e2f415d252ae3cdaa7b62b1e4788192ae6c', class: this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia' }, h("img", { key: 'dc9e11b8ecf525dbfd0c8c147a64e12350c2b6d5', src: this.insigniaIcons[this.stateInsignia], alt: this.stateInsignia }), this.tagProduct && (h("p", { key: '0fa7f6fdd1bb9075d1ef2a09a6701b0b464a746b', class: `tag tag--${this.stateInsignia}` }, h("span", { key: 'dae1336fefa32471ebbc78f1bcdd0c9b1c89dcba', class: "Caption-S" }, this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1))))))));
     }
 };
 DropiIlustrationIcon.style = dropiIlustrationIconCss();

package/dist/esm/dropi-image-miniature.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, c as createEvent, h } from './index-D5SAM1O2.js';
 
 const dropiImageMiniatureCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.miniature__label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:var(--Size-2, 8px)}.miniature__grid{display:flex;flex-wrap:wrap;gap:var(--Size-2, 8px)}.miniature__item{position:relative;border-radius:var(--Border-2, 8px);overflow:hidden;cursor:pointer;flex-shrink:0}.miniature__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.2s}.miniature__zoom{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.35);opacity:0;transition:opacity 0.2s}.miniature__item:hover img{transform:scale(1.05)}.miniature__item:hover .miniature__zoom{opacity:1}`;
 
@@ -34,7 +34,7 @@ const DropiImageMiniature = class {
     }
     render() {
         const imgs = this.parsedImages;
-        return (h("div", { key: 'dce259f33f9cd9314c2b43a01a58a150567cf6c7', class: "miniature" }, this.label && h("span", { key: 'b8eaf4c77c4d488a01870e5aa42822823af8d941', class: "miniature__label" }, this.label), h("div", { key: '80bbca393884ebf25ece231f766846b2d7547ce0', 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", width: "16px", height: "16px", color: "Neutral-White" }))))))));
+        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", width: "16px", height: "16px", color: "Neutral-White" }))))))));
     }
 };
 DropiImageMiniature.style = dropiImageMiniatureCss();

package/dist/esm/dropi-image-overlay.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, c as createEvent, h } from './index-D5SAM1O2.js';
 
 const dropiImageOverlayCss = () => `:host{display:block}.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.92);display:flex;justify-content:center;align-items:center;z-index:9999;animation:fade-in 0.3s ease-out}.overlay__close{position:absolute;top:24px;right:24px;background:rgba(255, 255, 255, 0.1);border:none;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10010;transition:background 0.15s}.overlay__close:hover{background:rgba(255, 255, 255, 0.2)}.overlay__body{display:flex;width:90%;height:80%;max-width:1200px;gap:32px;align-items:center}.overlay__body--single{justify-content:center}.overlay__thumbs{display:flex;flex-direction:column;gap:12px;height:100%;overflow-y:auto;padding-right:8px;width:100px;flex-shrink:0}.overlay__thumbs::-webkit-scrollbar{width:4px}.overlay__thumbs::-webkit-scrollbar-thumb{background:var(--Gray-Gray-600);border-radius:4px}.overlay__thumb-box{width:80px;height:80px;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;flex-shrink:0;transition:border-color 0.2s}.overlay__thumb-box--active{border-color:var(--Primary-Primary-500, #f49a3d)}.overlay__thumb-img{width:100%;height:100%;object-fit:cover}.overlay__content{flex:1;height:100%;position:relative;display:flex;justify-content:center;align-items:center}.overlay__main-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.5);animation:scale-up 0.3s ease-out}.overlay__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255, 255, 255, 0.1);border:none;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.2s;z-index:5}.overlay__nav:hover{background:rgba(255, 255, 255, 0.2)}.overlay__nav--prev{left:-24px}.overlay__nav--next{right:-24px;background:var(--Neutral-White)}.overlay__nav--next:hover{background:var(--Neutral-White)}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes scale-up{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}`;
 
@@ -37,7 +37,8 @@ const DropiImageOverlay = class {
             `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0iIzFhMjAzMyIvPjx0ZXh0IHg9IjIwMCIgeT0iMTU1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjNDc1MDY2IiBmb250LXNpemU9IjE0Ij5TaW4gaW1hZ2VuPC90ZXh0Pjwvc3ZnPg==`;
     }
     render() {
-        if (!this.visible)
+        const isVisible = this.visible === true || String(this.visible) === 'true';
+        if (!isVisible)
             return null;
         const imgs = this.parsedImages;
         const multi = imgs.length > 1;

package/dist/esm/dropi-input_3.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, c as createEvent, h } from './index-D5SAM1O2.js';
 
 const dropiInputCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.fixed-label-container{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:8px}.input-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);text-align:left}.asterisk{color:var(--Error-Error-500, #f46a6b)}.form-group{position:relative;width:100%}.input-container{position:relative}.icon-input{position:absolute;top:10px;left:5px;z-index:1}.icon-input-password{position:absolute;top:10px;right:13px;cursor:pointer;z-index:1}.form-control{box-sizing:border-box;width:100%;padding:var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);transition:border-color 0.3s ease-in-out;height:40px;outline:none;appearance:none;text-align:left}.form-control::placeholder{color:transparent;transition:color 0.2s ease-in-out}.form-control:focus::placeholder,.fixed-label-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.padding-icon{padding-left:28px}.input-container--has-icon label.label-bottom{left:28px}.input-container--has-icon .form-control:focus+label.label-bottom,.input-container--has-icon .form-control:not(:placeholder-shown)+label.label-bottom{left:0}.text-password{-webkit-text-security:disc;text-security:disc}label.label-bottom{position:absolute;font-weight:var(--font-weight-regular, 400);top:10px;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);left:10px;transition:all 0.2s ease-in-out;pointer-events:none;overflow:hidden;width:90%;white-space:nowrap}.form-control:focus+label.label-bottom,.form-control:not(:placeholder-shown)+label.label-bottom{top:-22px;left:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);width:unset}.form-control:disabled+label.label-bottom{color:var(--Gray-Gray-400, #858ea6)}.form-control-helper{display:flex;position:absolute;top:100%;left:0;gap:4px;align-items:center;margin-top:4px}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}`;
 
@@ -45,7 +45,7 @@ const DropiInput = class {
     inputMode = 'text';
     // ── Input type modifiers ────────────────────────────────────
     /** Show password visibility toggle (renders as password field) */
-    isPasswordInput = false;
+    passwordInput = false;
     /** Apply thousand separator formatting (e.g. 1,000,000) */
     isMoneyInput = false;
     /** Apply thousand separator without currency symbol */
@@ -71,7 +71,7 @@ const DropiInput = class {
     // ── Angular-parity ──────────────────────────────────────────
     /**
      * Convenience object prop — matches Angular `inputProperties: InputProperties`.
-     * Fields: id, label, placeholder, maxLength, textHelper, isPasswordInput,
+     * Fields: id, label, placeholder, maxLength, textHelper, passwordInput,
      * icon, iconColor, isMoneyInput, showObligatoryAsterisk, isNumericInput,
      * allowDecimals, isThousandSeparator, showHelperOnlyOnError,
      * isLettersOnly, inputMode.
@@ -103,8 +103,10 @@ const DropiInput = class {
             this.maxLength = val.maxLength;
         if (val.textHelper !== undefined)
             this.textHelper = val.textHelper;
+        if (val.passwordInput !== undefined)
+            this.passwordInput = val.passwordInput;
         if (val.isPasswordInput !== undefined)
-            this.isPasswordInput = val.isPasswordInput;
+            this.passwordInput = val.isPasswordInput; // Fallback
         if (val.icon !== undefined)
             this.icon = val.icon;
         if (val.iconColor !== undefined)
@@ -211,7 +213,7 @@ const DropiInput = class {
         return this.id || this.label;
     }
     get inputType() {
-        if (this.isPasswordInput)
+        if (this.passwordInput)
             return this.showPassword ? 'text' : 'password';
         return 'text';
     }
@@ -229,14 +231,14 @@ const DropiInput = class {
     render() {
         const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
         const showIconInline = !!this.icon;
-        return (h("div", { key: '2156d42c9c108aabf2089c0c786c1fb520457c05', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: '6ccd102fe2873bb2c338a0e5e63b3622a2be1812', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && h("span", { key: 'd7057cd87b711e9b158ac847b5e85cb5058736a8', class: "asterisk" }, " *"))), h("div", { key: 'b91973d056acf1c25bd220868a12d9d3afdba86f', class: "form-group" }, h("div", { key: '5cb70a37814949372eeab77746bf609a6500cf0b', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: '2bad8e8a23875531285d0321f4c629671b13dd84', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" })), this.isPasswordInput && (h("dropi-icon", { key: 'e330216b12fdf771e891a207f60ffea359d81702', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: '17a548015deebd47d2f3e5751edbc596161fa836', id: this.resolvedId, class: {
+        return (h("div", { key: 'cc38b113d77982ba53665a6c8ccbf39a393da696', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: '06bb6b6df585f859dc7a903fac4ed3f9f6c31077', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && h("span", { key: '6e87d6717a312d7497c2cf438aec7a692b974dda', class: "asterisk" }, " *"))), h("div", { key: '2eb67324cb06e04ee9fc5507a319a2eda8b5e410', class: "form-group" }, h("div", { key: '9d8d6f8df83c33782fd61810267e433fdab452d9', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && h("dropi-icon", { key: '370070a0e75a929438cb564698ee10c866e944a9', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" }), this.passwordInput && (h("dropi-icon", { key: '675958939e32a94060993515f9b9a58513ec2adc', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: 'd2ac98c43f9863ea8153dc66dd3fe347a7c28473', 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.isPasswordInput && !this.showPassword,
+                '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: '8dcc33eecd0b36188977c0f9139044f7d343c1c9', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: '8944ef639c328e0745b820b83fcf5c4772cae226', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: '7087f38a3bf05fa0514a4edbd8c6e1c6ae7ffcc6', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: '2c91fc6773478a592aa4940c7251f15d3026d07c', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), h("span", { key: '6ec4185eac0b8ea1fdfd810e366cec4616880eed', 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: '45eb57801e7d199532215ba069af8ba01714a46f', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: '5d4d83ce2575d60567a4a947d643a89f760cb3bd', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: 'b78fdac5f0c46b827c9dd2895d43a5e1724058d8', class: "form-control-helper" }, this.isInvalid && h("dropi-icon", { key: 'f037c95230fe0fa57540a1b74a26c14e56e555e4', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: 'fc48f7418c36f7ded7a999e446323ca8adb2b590', class: {
                 'disabled-helper': this.disabled,
                 'invalid-color': this.isInvalid,
             } }, this.textHelper)))))));
@@ -313,9 +315,9 @@ const DropiPaginator = class {
         const pages = this.pageNumbers;
         const isFirst = this.currentPage <= 1;
         const isLast = this.currentPage >= this.totalPages;
-        return (h("div", { key: '5f69b3abd4ddf98c2ab5df9c20361ba7f71addac', class: "paginator" }, h("div", { key: 'c050104ff12ec9c8b0cca40a75e0538cdd43d1e5', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: 'b03958b21bd015c6e80356172bea98f980c9eab4', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: 'c1670fe542a342765f79efde0ac3bd754dad4798', name: "Arrow-double-small-left", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: '170d5b6c0f1f105682d9a8bd69d95d445af1c5ac', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, h("dropi-icon", { key: 'a5233c1025b3a7c96ae3d8a30a7a38fe4d009ce8', name: "Dropdown-left", width: "16px", height: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: '074c645f02a26e1a1607aaccaa2a6c25b2d2e17a', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
+        return (h("div", { key: 'b601f88e4f971f885835d81fe876303fe97027c7', class: "paginator" }, h("div", { key: '988ffb7ed122d4a666af4525bc85159d8d36538a', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: '920a1a407782bde436fb6560caeb39848e9c7e28', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '67bc6ba66852a8883a19b2a3182be3cb298f2c8d', name: "Arrow-double-small-left", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: 'b1d0c5a8f66056cb53c31b01959177754632a906', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, h("dropi-icon", { key: '951435cbf9b7a8b9bd0e0f33d2c9eacaea6e7af1', name: "Dropdown-left", width: "16px", height: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: 'fed8a203b3e62f5da3e6fa055b1ee6e35453147c', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
             ? h("span", { class: "paginator-ellipsis", key: `e${i}` }, "\u2026")
-            : h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.currentPage }, onClick: () => this.goTo(p), "aria-current": p === this.currentPage ? 'page' : undefined, disabled: this.disabled }, p)), !isLast && (h("button", { key: 'd02f057415086137540417bcd5762bc2f955885f', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage + 1), "aria-label": "Siguiente", disabled: this.disabled }, !this.noLabels && h("span", { key: '4bfc14f3fa8ce553a61702bd5323b9554c99b05e', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: 'c9e532e95dc78ac8e91ef43d64d98ef75a4b5fb8', name: "Dropdown-Right", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: 'fe498a605de588ce33ed4597fa09d6659f555790', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '1e0d64045e390c5f934ea2c70c4ccc8f0c542b8a', name: "Arrow-double-small-right", width: "16px", height: "16px", color: "Gray-Gray-600" }))))));
+            : h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.currentPage }, onClick: () => this.goTo(p), "aria-current": p === this.currentPage ? 'page' : undefined, disabled: this.disabled }, p)), !isLast && (h("button", { key: '35a728e031880403ee0ff984484237ab701bd406', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage + 1), "aria-label": "Siguiente", disabled: this.disabled }, !this.noLabels && h("span", { key: '4a73ba225105e449f8dfe8a504c5b1ad3e9c31cd', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: '7b140df9437922acc8c24d6ee1ff15d69ce7b7f1', name: "Dropdown-Right", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: '6157fa189ca011be4c13da803d2cd110d882bb8e', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '7b6c1b31d4caed8203b739cc10f3084568e40f10', name: "Arrow-double-small-right", width: "16px", height: "16px", color: "Gray-Gray-600" }))))));
     }
 };
 DropiPaginator.style = dropiPaginatorCss();
@@ -370,7 +372,7 @@ const DropiTag = class {
         return typeof this.text === 'string' && this.text.trim().length > 0;
     }
     render() {
-        return (h("div", { key: 'b949409e06cf0ba23112c5cb5c2f49e605ddc730', class: "container-chips" }, h("div", { key: '3013650803f96e0f77e1631ba824e378ad9d5296', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (h("dropi-icon", { key: '5f8b72bef223fbf1ab47a1fcef7b016bfa8d7b91', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && h("span", { key: '63921861c9549d70fc432bb1252c2af2b76cbaa1' }, this.text))));
+        return (h("div", { key: '1736efc48b3ccaf5f3ca85ad29622f42b4fb3c8d', class: "container-chips" }, h("div", { key: '96c2b0e9d22881ca71c58488dcd622a1eef1a120', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (h("dropi-icon", { key: 'aab0330382fe0690177edcb364ab043459b9a316', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && h("span", { key: 'be38207ca7668b6b4976d5f3f2f506c380ee0491' }, this.text))));
     }
     static get watchers() { return {
         "type": [{

package/dist/esm/dropi-languages-selector.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, c as createEvent, h } from './index-D5SAM1O2.js';
 
 const dropiLanguagesSelectorCss = () => `:host{display:inline-block;position:relative}*,*::before,*::after{box-sizing:border-box}.custom-dropdown{position:relative;cursor:pointer;user-select:none}.custom-dropdown.open dropi-icon{transform:rotate(180deg)}.selected-option{display:flex;height:38px;padding:var(--Size-2, 8px) var(--Size-3, 12px);align-items:center;gap:var(--Size-2, 8px);border-radius:4px;border:1px solid var(--Gray-Gray-200, #c3c9d9);background:var(--Neutral-White, #ffffff);font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.dropdown-options{position:absolute;top:100%;left:0;right:0;background:white;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:6px;margin-top:4px;z-index:1000;overflow-y:auto;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);padding:0;list-style:none;height:0;opacity:0;visibility:hidden;transition:height 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;max-height:0}.dropdown-options.dropdown-open{max-height:300px;height:auto;opacity:1;visibility:visible}.dropdown-options li{padding:8px 12px;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.dropdown-options li:hover,.dropdown-options li.active{background:var(--Gray-Gray-50, #f7f8fa)}@media screen and (max-width: 720px){.selected-option span,.dropdown-options li span{display:none}}`;
 
@@ -16,7 +16,11 @@ const DropiLanguagesSelector = class {
     parsedLanguages = [];
     currentLang = null;
     languagesChanged(val) {
-        this.parsedLanguages = typeof val === 'string' ? JSON.parse(val) : val;
+        if (val == null) {
+            this.parsedLanguages = [];
+            return;
+        }
+        this.parsedLanguages = typeof val === 'string' ? JSON.parse(val) : (val ?? []);
         if (!this.currentLang && this.parsedLanguages.length > 0) {
             this.currentLang = this.parsedLanguages[0];
         }

package/dist/esm/dropi-logo.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, a as getElement, h } from './index-D5SAM1O2.js';
 
 const dropiLogoCss = () => `:host{display:inline-block}.dropi-logo{margin:0;padding:0;display:flex;align-items:center;justify-content:center}.dropi-logo img{display:block;object-fit:contain}.dropi-logo--large img{width:256px;height:84px}.dropi-logo--small img{width:86px;height:81px}`;
 
@@ -7,17 +7,27 @@ const DropiLogo = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
+    get el() { return getElement(this); }
     /** Logo image URL */
     urlLogo = '';
     /** Size variant */
     size = 'large';
     /** Theme (reserved for future use) */
     theme = 'light';
+    componentWillLoad() {
+        if (!this.urlLogo) {
+            this.urlLogo =
+                this.el.getAttribute('urlLogo') ||
+                    this.el.getAttribute('url-logo') ||
+                    this.el.getAttribute('urllogo') ||
+                    '';
+        }
+    }
     handleError(e) {
         e.target.src = FALLBACK_SVG;
     }
     render() {
-        return (h("figure", { key: '3e333d272f1f7ee4af549167e5e4f7a713aaa508', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, h("img", { key: 'e3f29c17b649b76da50b769fd88f5de9a86515e3', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", loading: "lazy", onError: (e) => this.handleError(e) })));
+        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) })));
     }
 };
 DropiLogo.style = dropiLogoCss();

package/dist/esm/dropi-lottie-loader.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, h } from './index-D5SAM1O2.js';
 
 const dropiLottieLoaderCss = () => `:host{display:block}.loader-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255, 255, 255, 0.85);z-index:9999}.loader-container{display:flex;flex-direction:column;align-items:center;gap:var(--Size-4, 16px)}.lottie-animation{display:flex;align-items:center;justify-content:center;width:300px;height:300px}.lottie-animation lottie-player{display:block;width:300px !important;height:300px !important}.loader-text{display:flex;flex-direction:column;align-items:center;gap:var(--Size-2, 8px);text-align:center}.loader-title{margin:0;font-size:var(--font-size-m, 14px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d)}.loader-message{margin:0;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-500, #69738c)}`;
 

package/dist/esm/dropi-media-player.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-D5SAM1O2.js';
 
 const dropiMediaPlayerCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.dropi-media-player{position:relative;width:100%;max-width:335px;height:auto;aspect-ratio:335 / 567;background-color:var(--Neutral-Black);border-radius:var(--Border-2, 8px);overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer}.dropi-media-player--mobile-vertical{max-width:335px;aspect-ratio:335 / 567}.dropi-media-player--mobile-compact{max-width:335px;aspect-ratio:335 / 337}.dropi-media-player--desktop{max-width:587px;aspect-ratio:587 / 567}.dropi-media-player__video{width:100%;height:100%;object-fit:cover}.dropi-media-player__center-play{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:400px;background-color:rgba(14, 17, 26, 0.6);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;transition:opacity 0.3s ease;pointer-events:auto}.dropi-media-player__center-play--hidden{opacity:0;pointer-events:none}.dropi-media-player__controls-bar{position:absolute;bottom:0;left:0;width:100%;height:72px;padding:24px;display:flex;flex-direction:row;align-items:center;gap:10px;background:linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);transition:opacity 0.3s ease;box-sizing:border-box}.dropi-media-player__controls-bar--hidden{opacity:0;pointer-events:none}.dropi-media-player__timestamp{font-family:'Inter', sans-serif;font-size:var(--font-size-xs, 12px);font-weight:var(--font-weight-medium, 500);color:var(--Neutral-White);white-space:nowrap;flex-shrink:0}.dropi-media-player__progress{flex:1;padding:6px 0;cursor:pointer;position:relative}.dropi-media-player__progress-track{position:relative;width:100%;height:5px;border-radius:var(--Border-2, 8px);background-color:var(--Gray-Gray-700, #32394d)}.dropi-media-player__progress-fill{height:100%;background-color:var(--Neutral-White);border-radius:var(--Border-2, 8px);will-change:width}.dropi-media-player__progress-thumb{position:absolute;top:50%;transform:translate(-50%, -50%);width:12px;height:12px;border-radius:50%;background-color:var(--Neutral-White);pointer-events:none;will-change:left}.dropi-media-player__actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.dropi-media-player__btn{-webkit-appearance:none;appearance:none;background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--Neutral-White);transition:opacity 0.15s ease}.dropi-media-player__btn:hover{opacity:0.8}.dropi-media-player__btn--speed{font-family:'Inter', sans-serif;font-size:var(--font-size-sm, 14px);font-weight:var(--font-weight-medium, 500);color:var(--Neutral-White);min-width:20px}.dropi-media-player__speed-control{position:relative;display:flex;align-items:center}.dropi-media-player__speed-menu{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--Gray-Gray-800, #1f2433);border-radius:var(--Border-2, 8px);padding:6px 0;min-width:44px;display:flex;flex-direction:column;z-index:20}.dropi-media-player__speed-option{-webkit-appearance:none;appearance:none;background:transparent;border:none;padding:6px 10px;font-family:'Inter', sans-serif;font-size:var(--font-size-s);font-weight:var(--font-weight-medium);color:var(--Neutral-White);cursor:pointer;text-align:center;white-space:nowrap;transition:opacity 0.15s ease}.dropi-media-player__speed-option--active{color:var(--Primary-Primary-500, #f49a3d)}.dropi-media-player__speed-option:hover{opacity:0.8}.dropi-media-player__volume-control{position:relative;display:flex;align-items:center}.dropi-media-player__volume-popup{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:32px;height:108px;display:flex;align-items:center;justify-content:center;background:var(--Gray-Gray-800, #1f2433);border-radius:var(--Border-2, 8px);overflow:visible;z-index:20}.dropi-media-player__volume-slider{-webkit-appearance:none;appearance:none;width:97px;height:8px;transform:rotate(-90deg);border-radius:4px;cursor:pointer;outline:none;flex-shrink:0}.dropi-media-player__volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--Neutral-White);cursor:pointer}.dropi-media-player__volume-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--Neutral-White);border:none;cursor:pointer}.dropi-media-player__volume-slider::-webkit-slider-runnable-track{border-radius:4px}.dropi-media-player__volume-slider::-moz-range-track{height:8px;background:var(--Gray-Gray-700, #32394d);border-radius:4px}.dropi-media-player__blur-bg{display:none;position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(21px);transform:scale(1.15);z-index:0}.dropi-media-player__blur-overlay{display:none;position:absolute;inset:0;background-color:rgba(0, 0, 0, 0.7);z-index:0}.dropi-media-player.is-fullscreen,.dropi-media-player:fullscreen{max-width:none;aspect-ratio:auto;width:100vw;height:100vh;border-radius:0}.dropi-media-player.is-fullscreen .dropi-media-player__blur-bg,.dropi-media-player:fullscreen .dropi-media-player__blur-bg,.dropi-media-player.is-fullscreen .dropi-media-player__blur-overlay,.dropi-media-player:fullscreen .dropi-media-player__blur-overlay{display:block}.dropi-media-player.is-fullscreen .dropi-media-player__video,.dropi-media-player:fullscreen .dropi-media-player__video{object-fit:contain;position:relative;z-index:1}.dropi-media-player.is-fullscreen .dropi-media-player__center-play,.dropi-media-player:fullscreen .dropi-media-player__center-play,.dropi-media-player.is-fullscreen .dropi-media-player__controls-bar,.dropi-media-player:fullscreen .dropi-media-player__controls-bar{z-index:2}`;
 
@@ -36,9 +36,12 @@ const DropiMediaPlayer = class {
     dropiEnded;
     componentDidLoad() {
         if (this.mediaEl) {
-            this.mediaEl.volume = this.initialVolume;
-            this.muted = this.initialVolume === 0;
-            this.volume = this.initialVolume;
+            const vol = this.initialVolume ?? 1;
+            if (isFinite(vol)) {
+                this.mediaEl.volume = vol;
+                this.muted = vol === 0;
+                this.volume = vol;
+            }
         }
         document.addEventListener('fullscreenchange', this.handleFullscreenChange);
     }

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, c as createEvent, B as Build, h } from './index-D5SAM1O2.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}}`;
 
@@ -45,18 +45,26 @@ const DropiModal = class {
     mounted = false;
     closeTimer = null;
     keyHandler = null;
-    visibleChanged(val) {
-        val ? this.openModal() : this.startClose();
+    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());
     }
     componentDidLoad() {
-        if (this.visible)
+        const isVisible = this.visible === true || String(this.visible) === 'true';
+        if (isVisible)
             this.openModal();
     }
     disconnectedCallback() {
         this.removeKeyHandler();
         if (this.closeTimer)
             clearTimeout(this.closeTimer);
-        document.body.style.overflow = '';
+        if (typeof document !== 'undefined') {
+            document.body.classList.remove('dropi-modal-open');
+        }
     }
     async hide() {
         this.visible = false;
@@ -81,8 +89,8 @@ const DropiModal = class {
             this.onShow.emit();
         }));
         this.addKeyHandler();
-        if (this.modal && document.body && document.body.style) {
-            document.body.style.setProperty('overflow', 'hidden');
+        if ((this.modal ?? true) && Build.isBrowser && document.body) {
+            document.body.classList.add('dropi-modal-open');
         }
     }
     startClose() {
@@ -96,8 +104,9 @@ const DropiModal = class {
         this.closeTimer = setTimeout(() => {
             this.mounted = false;
             this.isClosing = false;
-            if (document.body && document.body.style) {
-                document.body.style.setProperty('overflow', '');
+            this.closeTimer = null;
+            if ((this.modal ?? true) && Build.isBrowser && document.body) {
+                document.body.classList.remove('dropi-modal-open');
             }
             this.onHide.emit();
         }, 200);
@@ -118,9 +127,7 @@ const DropiModal = class {
         }
     }
     render() {
-        if (!this.mounted)
-            return null;
-        return (h("div", { class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}` }, this.modal && h("div", { class: "modal-mask", onClick: () => this.dismissable && this.hide() }), h("div", { class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true" }, this.showHeader && (h("div", { class: "modal-header" }, this.header && h("span", { class: "modal-title" }, this.header), h("slot", { name: "header" }), this.showCloseIcon && (h("button", { class: "modal-close", onClick: () => this.hide(), "aria-label": "Cerrar" }, "\u00D7")))), h("div", { class: "modal-content" }, h("slot", null)), this.showFooter && h("div", { class: "modal-footer" }, h("slot", { name: "footer" })))));
+        return (h("div", { key: '6f790289cbdcb0cb92040abc471e8dc592f3d0ab', 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: '6667d2df75ac67352346f454452a360a6506473a', class: "modal-mask", onClick: () => this.dismissable && this.hide() }), h("div", { key: '3a5485798cec9e986f411631aee819f10716e441', class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true" }, this.showHeader && (h("div", { key: '795afcb76540a52beefd1ca4c0fb80d88156ef98', class: "modal-header" }, this.header && h("span", { key: '3df861b36deca9caaf6c64c54b89dc897f5b9453', class: "modal-title" }, this.header), h("slot", { key: 'b6b1913314b2c05daa299d273ff7b495d4f72c39', name: "header" }), this.showCloseIcon && (h("button", { key: '529dd7e8787a09fc588e28c0c77f0f27c304659f', class: "modal-close", onClick: () => this.hide(), "aria-label": "Cerrar" }, "\u00D7")))), h("div", { key: 'eeeae841372a788a34cee76b38de7689a7a296fc', class: "modal-content" }, h("slot", { key: '83c67fb239b5579169368b5b2ba6c2ee22564a73' })), this.showFooter && h("div", { key: 'd86cd40508a7b6ea3c9cd4583aaa5a69646bb549', class: "modal-footer" }, h("slot", { key: 'f70503acd5f2b5e672700cec46e4e9705d944e22', name: "footer" })))));
     }
     static get watchers() { return {
         "visible": [{

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, c as createEvent, h } from './index-D5SAM1O2.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}`;
 
@@ -42,9 +42,9 @@ const DropiNavbar = class {
     }
     render() {
         const items = this.parsedData;
-        return (h("nav", { key: '7309fb8df82f8d3fb17f7bde2791d9442a7b07b3', class: "navbar" }, h("div", { key: 'a32dc538c37aef53bc25146ff4a42a5ee0a68a48', class: "navbar__left" }, this.showMenuToggle && (h("button", { key: '943f67d583ba37abb09bdf9db816ff06871591d6', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, h("dropi-icon", { key: '5e1365b03f3aaeb1515fbd206ebd868706897818', name: "Menu", width: "20px", height: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (h("img", { key: '1572e5f2ccd930caba4c207a7f945b5e54709c9b', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && h("span", { key: '9822f3e3d05eca7aee36ca4a0d41ea0d7a1b0971', class: "navbar__title" }, this.title)), items.length > 0 && (h("ul", { key: '6734921e0d83825c0dca5681b35c4a98e85dd33f', 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, width: "16px", height: "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: '2efb80c64b439bb8af4bfaad2af2a2e82eac8dbf', class: "navbar__right" }, h("button", { key: 'd07cf88c4ea1714187f0e0d9b4fb90b828d5ee10', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, h("dropi-icon", { key: '7f0c09a30363fcf4cd019250261e2f5f0fd362c1', name: "Bell", width: "20px", height: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (h("span", { key: '916b683d0e12ee0d5851b8c53a0cefffbd15b59a', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), h("button", { key: 'adda21458f6f7aac056beac14d59dcbe0a5c6cb5', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
+        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: 'c35615cbfd5dc807def32957062ea25b059664b5', name: "Menu", width: "20px", height: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (h("img", { key: 'ffc532e501bc7bc0a5625c865955a43c84857a58', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && h("span", { key: '7fb10d4a5e42030a7701bf0933587ecdaf5ab20b', class: "navbar__title" }, this.title)), items.length > 0 && (h("ul", { key: '338118e694ca0a46d94fee60211302efe8bbee51', 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, width: "16px", height: "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: 'f2ac52b78963fa9165b6614a7abaa6fe822b2a89', class: "navbar__right" }, h("button", { key: '4e78c3fbc69899f8b1f0206dc27372c3c0d15c31', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, h("dropi-icon", { key: 'a94bbd4aa73b7be9a735b31b92d882c53616f8e6', name: "Bell", width: "20px", height: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (h("span", { key: 'c2157fca16e1c3f992562027d4dfeb348ef7ad23', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), h("button", { key: 'ba2cb25cda984ba8ea180ff8edb3d3ffc955ab27', 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: '0a59f395793ceede59e52ef92ac37c71f6099f24', class: "navbar__user-name" }, this.userName), h("dropi-icon", { key: '8f430373d4a8f887a8c5da89f86bb3cc0aa5205a', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })))));
+            : h("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && h("span", { key: '11b4c378a089644e63d6186fe40e31ca7b4ab924', class: "navbar__user-name" }, this.userName), h("dropi-icon", { key: 'c2a140081f5ad014b73d35f45476cc1ac41391b5', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })))));
     }
 };
 DropiNavbar.style = dropiNavbarCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, c as createEvent, h } from './index-D5SAM1O2.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}`;
 
@@ -45,10 +45,10 @@ const DropiOtpSendCode = class {
     }
     handleInput(e, index) {
         const val = e.target.value.replace(/\D/g, '').slice(-1);
-        const newDigits = [...this.digits];
+        const newDigits = [...(this.digits ?? Array(OTP_LENGTH).fill(''))];
         newDigits[index] = val;
         this.digits = newDigits;
-        const newStates = [...this.digitStates];
+        const newStates = [...(this.digitStates ?? Array(OTP_LENGTH).fill('idle'))];
         newStates[index] = val ? 'filled' : 'idle';
         this.digitStates = newStates;
         if (val && index < OTP_LENGTH - 1)
@@ -58,7 +58,7 @@ 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();
         }
     }
@@ -75,14 +75,14 @@ const DropiOtpSendCode = class {
     }
     render() {
         const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
-        return (h("div", { key: 'cc04c9f7a77e627f0ca7cf25fbd0316e05a7456c', class: "otp" }, this.showLabelContact && (h("p", { key: 'b4c060cdc5c9fa00887b675585c64325f5eefcf3', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: '02b82a168f9f4c9e7dda74cbf3a86b0f63ccd878' }, " ", this.labelContact))), h("div", { key: '9a628fd456ec89892b126782104235545f2d3e8c', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, Array.from({ length: OTP_LENGTH }, (_, i) => (h("input", { key: i, ref: (el) => {
+        return (h("div", { key: '3cfe0d64890b2c90f500c662fe8572f9630d614b', class: "otp" }, this.showLabelContact && (h("p", { key: 'd791c408a5393ae82e00e758b67530d4b21381ac', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: '3d6ca9c3a00a71ba99800a94f1b95d3247d75522' }, " ", this.labelContact))), h("div", { key: '22d172d48ae8748fa27aaead4c65145d848ae4f2', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, Array.from({ length: OTP_LENGTH }, (_, i) => (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 && (h("p", { key: 'e1d3e33e3eae69255909f47735210a2123f099d9', class: "otp__error" }, this.errorMessage)), h("div", { key: 'ebfc8892f232f90afdcec507de4019b1aea2e915', class: "otp__resend" }, this.canResend ? (h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (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 && (h("p", { key: 'c6434be80f44e6f8a277bdff49503f67db5cdca7', class: "otp__error" }, this.errorMessage)), h("div", { key: '281e56d25ec3b01136aae2220605037d4dff4e16', class: "otp__resend" }, this.canResend ? (h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
     }
 };
 DropiOtpSendCode.style = dropiOtpSendCodeCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-D5SAM1O2.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)}`;
 
@@ -152,7 +152,7 @@ const DropiPhoneInput = class {
             this.selectedOptionChanged(this.selectedOption);
     }
     get selectedCountry() {
-        const cleanCodArea = this.codArea.replace('+', '');
+        const cleanCodArea = (this.codArea ?? '57').replace('+', '');
         return COUNTRIES.find(c => c.code === cleanCodArea) ?? COUNTRIES[0];
     }
     selectCountry(c) {
@@ -176,10 +176,10 @@ const DropiPhoneInput = class {
     render() {
         const country = this.selectedCountry;
         const isInvalid = this.isValidPhone === false;
-        return (h("div", { key: '884ddc86a364c666e79c2e99501c607a5c332599', class: "phone-wrap" }, h("div", { key: 'e0b044ac41b640cddffe080c695b7fe2d4add574', class: "phone-input-container" }, h("div", { key: 'f9f8b6794fb73efff50e064550ce462e25bb4d51', class: "custom-select" }, h("button", { key: '564675d4b89d33cc7cba743f77b4d96f7f6afea3', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
+        return (h("div", { key: 'e4a9468971ff90e3e1c2cf6944a8475451843428', class: "phone-wrap" }, h("div", { key: 'dabdccaf0453e98afb3db78ee6b6f83a66615baa', class: "phone-input-container" }, h("div", { key: '6481136b782da271fe47c19cfd359398bf632f35', class: "custom-select" }, h("button", { key: 'd314c0e2c74724eff20eae8f34241caf1fc2448c', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
                 if (!this.disabledInput)
                     this.open = !this.open;
-            } }, h("span", { key: '884a8a6d688e9fae8bc62ace8ba1f870f3ebdedf', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, h("img", { key: '4c263356870f8d2aaaa84ffe5f1a1bff49f98e34', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), h("dropi-icon", { key: '589ff50ef5881a58586e9b08d9db3e0abcde5873', name: this.open ? 'Dropdown-up' : 'Dropdown-down', width: "14px", height: "14px", color: "Gray-Gray-500" })), h("ul", { key: 'fed2ed2efc5be49ebeb8fe8c36557914eff439c7', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (h("li", null, h("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, h("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), h("input", { key: 'dcefc1987643eab23dc5d9fbf211804fa90a9d82', 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) }))));
+            } }, h("span", { key: 'c8b2aa7801a5c633c70010e7eeb2d5d9f3fb6b37', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, h("img", { key: 'c2a6583a02b029cee578b9c931f185f7d4102e3f', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), h("dropi-icon", { key: '0ace7b7188e846793d66373ea3d2c2d8ae881c24', name: this.open ? 'Dropdown-up' : 'Dropdown-down', width: "14px", height: "14px", color: "Gray-Gray-500" })), h("ul", { key: '832b37902ce54aac152e956d671fb6f899781029', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (h("li", null, h("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, h("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), h("input", { key: 'eaf32641b019e1ffd3fe5a1d7a3c4597e1cd0cb5', 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/esm/dropi-radio-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, c as createEvent, h } from './index-D5SAM1O2.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}`;
 
@@ -31,7 +31,7 @@ const DropiRadioButton = class {
         this.onChange.emit(e);
     }
     render() {
-        return (h("div", { key: '560f5edef6d0646d8797dfc3add17003ea847d0b', class: "dropi-radio-button" }, h("label", { key: 'aeb5159c64643485457ffe083bbeb78a97da8b50', htmlFor: this.id }, h("input", { key: '78ff657aee559c1230e2e16c01adfea0382e4979', id: this.id, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
+        return (h("div", { key: '86430f601f7ddb6144682c0356938886217eb2ae', class: "dropi-radio-button" }, h("label", { key: '653fa8d5c33fc64ab44174e6d0fe35c6fd992be7', htmlFor: this.id }, h("input", { key: 'd99eae69867b0a09b6585a18dfaa52da353c5bd2', 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/esm/dropi-radio-selection-list.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, c as createEvent, h } from './index-D5SAM1O2.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)}`;
 
@@ -39,10 +39,10 @@ const DropiRadioSelectionList = class {
         return this.parsedOptions.filter(o => o.name?.toLowerCase().includes(q));
     }
     render() {
-        return (h("div", { key: '25a4a4fcdb6915f6f09a33339adad159b49cba23', class: "rsl" }, this.showFilter && (h("div", { key: '5aa576318ea9f8b848728684aaef96f58e4fee7b', class: "rsl__search" }, h("dropi-icon", { key: '5c025e7a773ee5595e5beb86d337f5c0c9247c21', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: '794a9fdab94dc32b9af1ebb4bef9f5864ef0613c', class: "rsl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
+        return (h("div", { key: '7fdbf3d20a030a78ab4f48e7dba8333a34b1017b', class: "rsl" }, this.showFilter && (h("div", { key: '12e2abb8f8ed76c6b3231f28b63c842ba3c3c326', class: "rsl__search" }, h("dropi-icon", { key: '4f6a63480a811ed22d67485274b7edf3bf9765f4', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: 'c1f1c5942d422fceaa967640b7795a981896d68d', 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 });
-            } }))), h("div", { key: 'bd450fdec58e77782d5617f6225870d4dbb38d9c', class: "rsl__list" }, this.filtered.map(opt => {
+            } }))), h("div", { key: '425b4048cbf4fa4a22c13d932f296cb594ffe993', class: "rsl__list" }, this.filtered.map(opt => {
             const isSelected = opt.id === this.selectedOption;
             return (h("div", { class: { 'rsl__item': true, 'rsl__item--selected': isSelected }, key: opt.id, onClick: () => { this.selectedOption = opt.id; this.valueChange.emit(opt.id); } }, h("div", { class: { 'rsl__radio': true, 'rsl__radio--checked': isSelected } }, isSelected && h("div", { class: "rsl__radio-dot" })), h("div", { class: "rsl__content" }, h("span", { class: "rsl__name" }, opt.name), (isSelected || this.alwaysShowDescription) && opt.description && (h("span", { class: "rsl__desc" }, opt.description)))));
         }))));

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, h } from './index-D5SAM1O2.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)}`;
 
@@ -30,7 +30,7 @@ const DropiReadMore = class {
     }
     render() {
         const showToggle = this.needsTruncation && (this.expanded ? this.showSeeLess : true);
-        return (h("div", { key: 'ae43f258e0254cc03f87436486b0bfecc55bc23c', class: "read-more" }, h("p", { key: '7b56af2b2bd8e068bb28bfd0e5184da9e7abafd2', class: "read-more__text", style: this.textStyle ? this.textStyle : undefined }, this.displayText, showToggle && (h("button", { key: 'd1a0a8eae3431c35b9bac8cfb9b47102f18cf2f0', class: "read-more__toggle", style: this.buttonStyle ? this.buttonStyle : undefined, onClick: () => this.expanded = !this.expanded }, this.expanded ? ' Ver menos' : '... Ver más')))));
+        return (h("div", { key: '125c5f1d75c1e06f02d9898f375626bb75a67cd8', class: "read-more" }, h("p", { key: '4a4450a3468e7fe7297fdae98d370f8cd77b8553', class: "read-more__text", style: this.textStyle ? this.textStyle : undefined }, this.displayText, showToggle && (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')))));
     }
 };
 DropiReadMore.style = dropiReadMoreCss();

package/dist/esm/dropi-search.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, c as createEvent, h } from './index-D5SAM1O2.js';
 
 const dropiSearchCss = () => `:host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.search-label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.search-input-row{position:relative;display:flex;align-items:center;width:100%}.search-icon{position:absolute;left:10px;pointer-events:none;z-index:1}.search-input{width:100%;height:40px;padding:0 36px 0 34px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);outline:none;transition:border-color 0.2s}.search-input:focus{border-color:var(--Info-Info-500, #50a5f1)}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-clear{position:absolute;right:10px;display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer;z-index:1}.search-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:var(--dropdown-height, 240px);overflow-y:auto;background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);box-shadow:0 4px 16px rgba(0, 0, 0, 0.08);z-index:100}.search-option{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;transition:background 0.15s;user-select:none}.search-option:hover{background:var(--Gray-Gray-50, #f7f8fa)}.search-option--selected{background:var(--Primary-Primary-50, #fff5eb)}.search-option__label{flex:1;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-no-results{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-400, #858ea6);text-align:center}`;
 
@@ -106,10 +106,10 @@ const DropiSearch = class {
     }
     render() {
         const showDropdown = this.open && this.parsedOptions.length > 0;
-        return (h("div", { key: '3a191ce6fcdede699dcc707411c4f901a4c16e49', class: "search-wrap" }, this.label && h("label", { key: '41049aa159d5bdb89d07b94821bbfe41bb12c2c7', class: "search-label" }, this.label), h("div", { key: 'fba00db1ed11f78cefc0a12ca4d3be780989a48e', class: `search-input-row search-input-row--${this.type}` }, this.showIcon && h("dropi-icon", { key: '7b9d9a9c91eb88161492e4fb8f0c87e89c0f24cb', class: "search-icon", name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: '0340848a8c7cdb336fca7e70a863b83a8e8e31ef', class: "search-input", type: this.typeInput, placeholder: this.placeholder, value: this.textInput, maxLength: this.maxLength, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => {
+        return (h("div", { key: 'ec00c8851a1d2d4ddda50edea458589a62d9451a', class: "search-wrap" }, this.label && h("label", { key: '31cadba1b21276ec43f3623676fe1a7f9bac4da2', class: "search-label" }, this.label), h("div", { key: 'bf68dbb7cfa657e8a7e441a2fe47db0e7d214e44', class: `search-input-row search-input-row--${this.type}` }, this.showIcon && h("dropi-icon", { key: 'c1c442a8fed018f774d6addc9dcaf3d1e89d6121', class: "search-icon", name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: 'd22791b1864320c54060827cc601bbc242d6c37d', class: "search-input", type: this.typeInput, placeholder: this.placeholder, value: this.textInput, maxLength: this.maxLength, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => {
                 if (this.parsedOptions.length)
                     this.open = true;
-            }, onBlur: () => { setTimeout(() => this.open = false, 150); this.onBlur.emit(); } }), this.showClear && this.textInput && (h("button", { key: '80b5c05828f5f67c861b2f05db4e11f3282c995c', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, h("dropi-icon", { key: 'b83d1998021e65431225e73d1edd0388e01b07ce', name: "Close-small", width: "16px", height: "16px", color: "Gray-Gray-400" })))), showDropdown && (h("div", { key: '1800618fb2f8f2a47c9a8ddbb9c9649c254a03d2', class: `search-dropdown search-dropdown--${this.position}`, style: { '--dropdown-height': `${this.heightOverlay}px` } }, this.filtered.length === 0 ? (h("div", { class: "search-no-results" }, "Sin resultados")) : (this.filtered.map((opt, i) => (h("div", { class: { 'search-option': true, 'search-option--selected': this.isSelected(opt) }, key: i, onMouseDown: (e) => { e.preventDefault(); this.selectOption(opt); } }, this.multipleSelectModel && h("dropi-checkbox", { checked: this.isSelected(opt) }), h("span", { class: "search-option__label" }, opt[this.dataName])))))))));
+            }, onBlur: () => { setTimeout(() => this.open = false, 150); this.onBlur.emit(); } }), this.showClear && this.textInput && (h("button", { key: '55e8653e330b06d488c6d65f6a8ffe6465a24289', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, h("dropi-icon", { key: '0c154c2a95119caefe84bd9cfc40860d4b722137', name: "Close-small", width: "16px", height: "16px", color: "Gray-Gray-400" })))), showDropdown && (h("div", { key: 'a4b4691ff29a427755f19c4bc4932f2634736701', class: `search-dropdown search-dropdown--${this.position}`, style: { '--dropdown-height': `${this.heightOverlay}px` } }, this.filtered.length === 0 ? (h("div", { class: "search-no-results" }, "Sin resultados")) : (this.filtered.map((opt, i) => (h("div", { class: { 'search-option': true, 'search-option--selected': this.isSelected(opt) }, key: i, onMouseDown: (e) => { e.preventDefault(); this.selectOption(opt); } }, this.multipleSelectModel && h("dropi-checkbox", { checked: this.isSelected(opt) }), h("span", { class: "search-option__label" }, opt[this.dataName])))))))));
     }
     static get watchers() { return {
         "dataToSearch": [{