@dropi/ui 0.1.21 → 0.1.22

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

@@ -18,7 +18,11 @@ export class DropiLanguagesSelector {
     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/collection/components/dropi-logo/dropi-logo.js

@@ -5,17 +5,27 @@ const FALLBACK_SVG = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53
  * Displays the Dropi brand logo with size variants.
  */
 export class DropiLogo {
+    el;
     /** 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) })));
     }
     static get is() { return "dropi-logo"; }
     static get encapsulation() { return "shadow"; }
@@ -93,4 +103,5 @@ export class DropiLogo {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/dropi-media-player/dropi-media-player.js

@@ -28,9 +28,12 @@ export class DropiMediaPlayer {
     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/collection/components/dropi-modal/dropi-modal.js

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Build } from "@stencil/core";
 /**
  * @component dropi-modal
  * Modal/dialog with backdrop, close button, and header/content/footer slots.
@@ -41,18 +41,26 @@ export class DropiModal {
     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;
@@ -77,8 +85,8 @@ export class DropiModal {
             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() {
@@ -92,8 +100,9 @@ export class DropiModal {
         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);
@@ -114,9 +123,7 @@ export class DropiModal {
         }
     }
     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 is() { return "dropi-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -133,11 +140,11 @@ export class DropiModal {
     static get properties() {
         return {
             "visible": {
-                "type": "boolean",
+                "type": "any",
                 "mutable": true,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 },
                 "required": false,

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: '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" })))));
     }
     static get is() { return "dropi-navbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-otp-send-code/dropi-otp-send-code.js

@@ -41,10 +41,10 @@ export class DropiOtpSendCode {
     }
     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)
@@ -54,7 +54,7 @@ export class DropiOtpSendCode {
         }
     }
     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();
         }
     }
@@ -71,14 +71,14 @@ export class DropiOtpSendCode {
     }
     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")))));
     }
     static get is() { return "dropi-otp-send-code"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,9 +54,9 @@ export class DropiPaginator {
         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" }))))));
     }
     static get is() { return "dropi-paginator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -147,7 +147,7 @@ export class DropiPhoneInput {
             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) {
@@ -171,10 +171,10 @@ export class DropiPhoneInput {
     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 is() { return "dropi-phone-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-radio-button/dropi-radio-button.js

@@ -28,7 +28,7 @@ export class DropiRadioButton {
         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 is() { return "dropi-radio-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-radio-selection-list/dropi-radio-selection-list.js

@@ -35,10 +35,10 @@ export class DropiRadioSelectionList {
         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/collection/components/dropi-read-more/dropi-read-more.js

@@ -28,7 +28,7 @@ export class DropiReadMore {
     }
     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')))));
     }
     static get is() { return "dropi-read-more"; }
     static get encapsulation() { return "shadow"; }

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

@@ -99,10 +99,10 @@ export class DropiSearch {
     }
     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 is() { return "dropi-search"; }
     static get encapsulation() { return "shadow"; }

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

@@ -127,6 +127,10 @@ export class DropiSelect {
         this.applyDefaultSelection();
     }
     normalizeOptions() {
+        if (!this.options) {
+            this.options = [];
+            return;
+        }
         if (typeof this.options === 'string') {
             try {
                 this.options = JSON.parse(this.options);
@@ -355,7 +359,7 @@ export class DropiSelect {
         ]), !this.isGrouped && this.filteredOptions.map(opt => this.renderOption(opt)), this.filteredOptions.length === 0 && (h("li", { class: "no-results" }, "Sin resultados"))));
     }
     render() {
-        return (h("div", { key: 'daa9915ec481b2a7d1bb6a74abf9c5ac7f5c8abd', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: '184da51081bd5f31220670dd846c07dab8b8caea', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: '5bfe13da6e2cd1cbf151a87b6cf987d20581afbe', class: "asterisk" }, " *"))), h("div", { key: 'e5c55f5d269cd0c6fe532b18e5b12e86399504ae', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: 'b49dd08e94004da615553a6ffd85097a16357c0e', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (h("div", { key: '28d9fa19c9c5f8d4fbea5643e606cae70613dcee', class: "select-helper" }, h("span", { key: '078e8b23953a41e8cd99eab055322ceb543afeb3' }, this.textHelper))), this.hasError && this.errorText && (h("div", { key: '746c5293426a3bbe8327e349a484465a4995b135', class: "select-helper-error" }, h("dropi-icon", { key: '34d227f3e0d92c490f617d1624b5ef84c2647df5', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: 'd90c7e1fd0e8c7c40d35ec7dc9e4648d448bf559' }, this.errorText))), this.renderDropdown()));
+        return (h("div", { key: '932cad965441a784f51d6b82ffc5a100cf438fb6', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: '1c46242dcbd7862b32a36e2132bc4689b3c95aab', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: '79e2df6ae0a55c4e51ff7354486903d58bdb7d36', class: "asterisk" }, " *"))), h("div", { key: 'd4a48dcc513b5ae7171598709b0d00c3ffd7f42b', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: 'f9d8b6f87dcc8438c00ec04edabe10ebb2cceb79', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (h("div", { key: 'e8cc2e4ccb3a5919fe30411003153bfe6434b0d0', class: "select-helper" }, h("span", { key: '2fe857a4efac70882ec58835534bb22739c4fb26' }, this.textHelper))), this.hasError && this.errorText && (h("div", { key: 'e357992bf4a391052fe3a8444b24777292f71bf0', class: "select-helper-error" }, h("dropi-icon", { key: '9a32ef1f5ae2ccf18996bdc451e5de4e2c923a0a', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: '919259f76022b34162f680234a3c1cf93492666b' }, this.errorText))), this.renderDropdown()));
     }
     static get is() { return "dropi-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,7 +42,7 @@ export class DropiSidebar {
         this.onIndexChanged.emit(itemClicked);
     }
     render() {
-        return (h("div", { key: '713a17f5279e5ca1a7110fdbf189e24e199b11cf', class: "main-sidebar-container" }, this.parsedProperties.map(item => {
+        return (h("div", { key: '9f79e6370ff61c6278a8238b0dc92881832f9b8f', class: "main-sidebar-container" }, this.parsedProperties.map(item => {
             return [
                 /* Item Principal */
                 h("div", { class: {

package/dist/collection/components/dropi-simple-stepper/dropi-simple-stepper.js

@@ -30,7 +30,7 @@ export class DropiSimpleStepper {
     render() {
         const labels = this.parsedLabels;
         const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);
-        return (h("div", { key: 'e4613f72ea46ed367287005c573c80e7deac1470', class: "stepper" }, steps.map((step, i) => {
+        return (h("div", { key: 'f67f6e9404bf67700c46b987923836d5251ae1c4', class: "stepper" }, steps.map((step, i) => {
             const isCompleted = step < this.currentStep;
             const isActive = step === this.currentStep;
             const isLast = i === steps.length - 1;

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

@@ -17,7 +17,7 @@ export class DropiSkeleton {
     /** Base color of the shimmer gradient. Accepts hex (#f6f7f8) or token name (Gray-Gray-100) */
     baseColor = '#f6f7f8';
     getBackground() {
-        const color = this.baseColor.startsWith('#') ? this.baseColor : `var(--${this.baseColor})`;
+        const color = (this.baseColor ?? '#f6f7f8').startsWith('#') ? (this.baseColor ?? '#f6f7f8') : `var(--${this.baseColor})`;
         return `linear-gradient(to right, ${color} 8%, #e3e7efe7 28%, ${color} 77%)`;
     }
     getRadius() {

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

@@ -35,7 +35,7 @@ export class DropiSteps {
     render() {
         const labels = this.parsedLabels;
         const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);
-        return (h("div", { key: 'cc54b22068478a85a29603e05d618c66ec1d2218', class: "stepper" }, steps.map((step) => {
+        return (h("div", { key: '35c28210675370e76f16e2525fdf785b6205ec78', class: "stepper" }, steps.map((step) => {
             const state = this.stepState(step);
             const label = labels[step - 1];
             const isLast = step === this.stepsCount;

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

@@ -16,7 +16,7 @@ export class DropiSwitch {
         this.onChange.emit(this.isChecked);
     }
     render() {
-        return (h("label", { key: '15d604adb71cbe0c4d7e3627b8ee58380749c4df', class: "toggle-switch" }, h("input", { key: '5ff458aa0c536d88e2ee44576e7b5cbfdb15e990', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: 'a0dbc3f038af17fcea903fccd5f1e1638192c89a', class: "slider" })));
+        return (h("label", { key: 'c12214e051cfd7ca50d0df9fb3374ee9f3b72c1a', class: "toggle-switch" }, h("input", { key: '2821a935d4614447900d35028261b5c6620c104f', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: '1370a1ea4b9bb48849f9d998eac3a36ac3fa75b6', class: "slider" })));
     }
     static get is() { return "dropi-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -117,6 +117,9 @@ export class DropiTable {
         }
     }
     componentWillLoad() {
+        // SSR hydration guard: if no data props provided, preserve server-rendered DOM
+        if (this.data == null && this.rows == null && this.headers == null && this.columns == null)
+            return;
         // headers/data take precedence over columns/rows when provided
         const headersSrc = (Array.isArray(this.headers) ? this.headers : []).length
             ? this.headers : this.columns;
@@ -128,7 +131,8 @@ export class DropiTable {
         this.rowActionsChanged(this.rowActions);
     }
     get visibleColumns() {
-        return this.parsedColumns.filter(c => !this.hiddenColumns.has(c.key));
+        const hidden = this.hiddenColumns ?? new Set();
+        return (this.parsedColumns ?? []).filter(c => !hidden.has(c.key));
     }
     get filteredRows() {
         if (!this.searchTerm)
@@ -218,31 +222,34 @@ export class DropiTable {
         return h("span", { class: "table-labels" }, String(value));
     }
     render() {
+        // SSR hydration: if parsedRows not yet initialized, preserve server-rendered shadow DOM
+        if (this.parsedRows === undefined)
+            return null;
         const rows = this.pagedRows;
         const allSelected = rows.length > 0 && this.selectedKeys.size === rows.length;
         const hasActions = this.parsedRowActions.length > 0;
         const cols = this.visibleColumns;
-        return (h("div", { key: '0568597a39d8f4b111c99e38a3559c0ebabe3f7d', class: "table-container" }, (this.showSearch || this.showColumnSelector || this.title) && (h("div", { key: '6b47b6eb27cb3354fae130a642515ee4efbe96e6', class: "search-container" }, this.title && h("h3", { key: 'e88c0cfccd3008cebd479069e6ebf28135aa30dc', class: "table-title" }, this.title), h("div", { key: '9798ab26988d090edd5c14c0dc62c9d0273995cf', class: `search-actions${this.showSearch ? '' : ' only-filter'}` }, this.showSearch && (h("dropi-input", { key: 'c8871b9eae75d6fb24d4161c2e38278697d23ac0', placeholder: "Buscar", value: this.searchTerm, onOnInput: (e) => {
+        return (h("div", { class: "table-container" }, (this.showSearch || this.showColumnSelector || this.title) && (h("div", { class: "search-container" }, this.title && h("h3", { class: "table-title" }, this.title), h("div", { class: `search-actions${this.showSearch ? '' : ' only-filter'}` }, this.showSearch && (h("dropi-input", { placeholder: "Buscar", value: this.searchTerm, onOnInput: (e) => {
                 this.searchTerm = e.detail;
                 this.dropiSearch.emit(e.detail);
                 this.onSearchChange.emit(e.detail);
-            } })), this.showColumnSelector && (h("div", { key: 'dc96780a72dca620aa1ed7349f59d837a31602fc', class: "table-tools" }, h("div", { key: 'e0b71a0018af5bba4e56b51e5df98c149f547b22', class: "column-selector-container" }, h("button", { key: '3b5639c4df44eb5f15d69999dae601e639afa2e4', class: "column-selector-btn", onClick: () => this.showColumnMenu = !this.showColumnMenu }, h("dropi-icon", { key: '3c8eb5df52c0494b1080d2e5fc6cf8b219b7b56d', name: "list-table", width: "20px", height: "20px", color: "Gray-Gray-500" })), this.showColumnMenu && (h("div", { key: 'a8229fa0100fe68a4b232a06584c3de1a9a90b6f', class: "column-selector-menu" }, this.parsedColumns.map(col => (h("div", { class: "column-selector-option", onClick: () => {
+            } })), this.showColumnSelector && (h("div", { class: "table-tools" }, h("div", { class: "column-selector-container" }, h("button", { class: "column-selector-btn", onClick: () => this.showColumnMenu = !this.showColumnMenu }, h("dropi-icon", { name: "list-table", width: "20px", height: "20px", color: "Gray-Gray-500" })), this.showColumnMenu && (h("div", { class: "column-selector-menu" }, this.parsedColumns.map(col => (h("div", { class: "column-selector-option", onClick: () => {
                 const next = new Set(this.hiddenColumns);
                 if (next.has(col.key))
                     next.delete(col.key);
                 else
                     next.add(col.key);
                 this.hiddenColumns = next;
-            } }, h("dropi-checkbox", { checked: !this.hiddenColumns.has(col.key) }), h("span", null, col.label)))), h("div", { key: '6a8fa71f8540202baaa24e2facf797149efd353b', class: "column-selector-footer" }, h("div", { key: '70b646908dcd172ae459cca680b0dcc7c5663cb8', class: "column-selector-all", onClick: () => {
+            } }, h("dropi-checkbox", { checked: !this.hiddenColumns.has(col.key) }), h("span", null, col.label)))), h("div", { class: "column-selector-footer" }, h("div", { class: "column-selector-all", onClick: () => {
                 this.hiddenColumns = this.hiddenColumns.size === 0
                     ? new Set(this.parsedColumns.map(c => c.key))
                     : new Set();
-            } }, h("dropi-checkbox", { key: '295ad4f783c7a1737d7ad0e488881b37919c40f6', checked: this.hiddenColumns.size === 0 }), h("span", { key: '838ffe74c4c35363127e9e5daacc25da8cccf76d' }, "Mostrar / Ocultar todo"))))))))))), h("div", { key: '9cd8d7cc6ce997d53b3459065b5b8bef275ec5ea', class: `table-wrapper${hasActions ? ' has-sticky-actions' : ''}` }, h("table", { key: 'dd65672ad724cc2becf91099383b2892022b9f25', class: `custom-table${this.showCheckbox ? ' has-checkbox' : ''}` }, h("thead", { key: 'd509b97f349b30e08380a3d1e7470d609e854539' }, h("tr", { key: 'f5e27a7b1e191e569f2a396bcaf118e338ff36a6' }, this.showCheckbox && (h("th", { key: 'c99ac20618519207e15556b706c4872bc92edf42', class: "checkbox-header" }, h("dropi-checkbox", { key: 'affd77ad7b0fdaece95e83993d6acff582161cf5', checked: allSelected, onOnChange: (e) => this.toggleAll(e.detail) }))), cols.map(col => (h("th", { class: { sortable: !!col.sortable, 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }, style: { textAlign: col.align || 'center' }, onClick: () => this.handleSort(col) }, h("div", { class: `headers-container${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}` }, h("div", { class: `headers${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}` }, h("span", null, col.label), col.sortable && (h("div", { class: "order-icons" }, h("dropi-icon", { name: "Caret-up", width: "12px", height: "12px", color: this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200' }), h("dropi-icon", { name: "Caret-down", width: "12px", height: "12px", color: !this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200' })))))))), hasActions && h("th", { key: 'ad41355f347d7d94ea6de4ddfa4e23ebffd7a7b8', class: "actions-header actions" }, "Acciones"))), h("tbody", { key: '7f3dfbd3fd7aa0b29eb55c5a5825492a1ed0e063' }, this.loading ? (Array.from({ length: 5 }).map(() => (h("tr", { class: "table-row" }, this.showCheckbox && h("td", null, h("div", { class: "skeleton skeleton--sm" })), cols.map(() => h("td", null, h("div", { class: "skeleton" }))), hasActions && h("td", null))))) : rows.length === 0 ? (h("tr", null, h("td", { colSpan: cols.length + (this.showCheckbox ? 1 : 0) + (hasActions ? 1 : 0) }, h("div", { class: "empty-table" }, h("div", { class: "empty-message-container" }, this.emptyMessage))))) : (rows.map((row, i) => (h("tr", { class: "table-row", onClick: () => this.dropiRowClick.emit({ row, index: i }) }, this.showCheckbox && (h("td", { onClick: (e) => e.stopPropagation() }, h("dropi-checkbox", { checked: this.selectedKeys.has(i), onOnChange: () => this.toggleRow(i) }))), cols.map(col => (h("td", { class: { 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn } }, h("div", { class: "cell-content", style: { textAlign: col.align || 'center' } }, this.renderCellValue(row[col.key]))))), hasActions && (h("td", { class: "action-button actions", onClick: (e) => e.stopPropagation() }, this.parsedRowActions.length > 3 ? (h("div", { style: { display: "flex", justifyContent: "center", width: "100%" } }, h("dropi-icon", { class: "action-icon", name: "Menu-dots-vertical", width: "24px", height: "24px", color: "Gray-Gray-500", onClick: () => this.openActionRow = this.openActionRow === i ? -1 : i }), this.openActionRow === i && (h("div", { class: "actions-menu" }, this.parsedRowActions.map(action => (h("div", { class: "action-item", onClick: () => { this.openActionRow = -1; this.dropiAction.emit({ row, action }); this.actionClicked.emit({ row, action }); } }, h("dropi-icon", { name: action.icon, width: "20px", height: "20px", color: action.iconColor || 'Gray-Gray-500' }), action.label))))))) : (h("div", { class: "short-actions" }, this.parsedRowActions.map(action => (h("dropi-icon", { class: "action-icon", name: action.icon, width: "24px", height: "24px", color: action.iconColor || 'Gray-Gray-500', onClick: () => { this.dropiAction.emit({ row, action }); this.actionClicked.emit({ row, action }); } })))))))))))))), this.showPaginator && (h("div", { key: '20e2f504d995f8875e42ceedfeb3977d777044a6', class: "pagination" }, h("div", { key: '898f69b7801af32df0bdfa9a23cfc7fc5adcac84', class: "page-size-selector" }, h("label", { key: '4871de9ed4a35fa60ac2ac824c96a278ffdf7496' }, "Mostrar"), h("select", { key: '8c2cb250c724ff0914c69135c054c25c9aa857f2', onChange: (e) => {
+            } }, h("dropi-checkbox", { checked: this.hiddenColumns.size === 0 }), h("span", null, "Mostrar / Ocultar todo"))))))))))), h("div", { class: `table-wrapper${hasActions ? ' has-sticky-actions' : ''}` }, h("table", { class: `custom-table${this.showCheckbox ? ' has-checkbox' : ''}` }, h("thead", null, h("tr", null, this.showCheckbox && (h("th", { class: "checkbox-header" }, h("dropi-checkbox", { checked: allSelected, onOnChange: (e) => this.toggleAll(e.detail) }))), cols.map(col => (h("th", { class: { sortable: !!col.sortable, 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }, style: { textAlign: col.align || 'center', minWidth: col.minWidth, maxWidth: col.maxWidth }, onClick: () => this.handleSort(col) }, h("div", { class: `headers-container${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}` }, h("div", { class: `headers${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}` }, h("span", null, col.label), col.sortable && (h("div", { class: "order-icons" }, h("dropi-icon", { name: "Caret-up", width: "12px", height: "12px", color: this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200' }), h("dropi-icon", { name: "Caret-down", width: "12px", height: "12px", color: !this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200' })))))))), hasActions && h("th", { class: "actions-header actions" }, "Acciones"))), h("tbody", null, this.loading ? (Array.from({ length: 5 }).map(() => (h("tr", { class: "table-row" }, this.showCheckbox && h("td", null, h("div", { class: "skeleton skeleton--sm" })), cols.map(() => h("td", null, h("div", { class: "skeleton" }))), hasActions && h("td", null))))) : rows.length === 0 ? (h("tr", null, h("td", { colSpan: cols.length + (this.showCheckbox ? 1 : 0) + (hasActions ? 1 : 0) }, h("div", { class: "empty-table" }, h("div", { class: "empty-message-container" }, this.emptyMessage))))) : (rows.map((row, i) => (h("tr", { class: "table-row", onClick: () => this.dropiRowClick.emit({ row, index: i }) }, this.showCheckbox && (h("td", { onClick: (e) => e.stopPropagation() }, h("dropi-checkbox", { checked: this.selectedKeys.has(i), onOnChange: () => this.toggleRow(i) }))), cols.map(col => (h("td", { class: { 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }, style: { minWidth: col.minWidth, maxWidth: col.maxWidth, overflow: col.maxWidth ? 'hidden' : undefined } }, h("div", { class: "cell-content", style: { textAlign: col.align || 'center' } }, this.renderCellValue(row[col.key]))))), hasActions && (h("td", { class: "action-button actions", onClick: (e) => e.stopPropagation() }, this.parsedRowActions.length > 3 ? (h("div", { style: { display: "flex", justifyContent: "center", width: "100%" } }, h("dropi-icon", { class: "action-icon", name: "Menu-dots-vertical", width: "24px", height: "24px", color: "Gray-Gray-500", onClick: () => this.openActionRow = this.openActionRow === i ? -1 : i }), this.openActionRow === i && (h("div", { class: "actions-menu" }, this.parsedRowActions.map(action => (h("div", { class: "action-item", onClick: () => { this.openActionRow = -1; this.dropiAction.emit({ row, action }); this.actionClicked.emit({ row, action }); } }, h("dropi-icon", { name: action.icon, width: "20px", height: "20px", color: action.iconColor || 'Gray-Gray-500' }), action.label))))))) : (h("div", { class: "short-actions" }, this.parsedRowActions.map(action => (h("dropi-icon", { class: "action-icon", name: action.icon, width: "24px", height: "24px", color: action.iconColor || 'Gray-Gray-500', onClick: () => { this.dropiAction.emit({ row, action }); this.actionClicked.emit({ row, action }); } })))))))))))))), this.showPaginator && (h("div", { class: "pagination" }, h("div", { class: "page-size-selector" }, h("label", null, "Mostrar"), h("select", { onChange: (e) => {
                 this.pageSize = Number(e.target.value);
                 this.currentPage = 1;
                 this.dropiPageSizeChange.emit(this.pageSize);
                 this.onSizeChange.emit(this.pageSize);
-            } }, this.parsedPageSizes.map(s => (h("option", { value: s, selected: this.pageSize === s }, s))))), h("dropi-paginator", { key: '82a4e645ab197a52ec7985614e53fcae749e8ed4', totalPages: this.totalPages, currentPage: this.currentPage, onPageChange: (e) => {
+            } }, this.parsedPageSizes.map(s => (h("option", { value: s, selected: this.pageSize === s }, s))))), h("dropi-paginator", { totalPages: this.totalPages, currentPage: this.currentPage, onPageChange: (e) => {
                 this.currentPage = e.detail;
                 this.dropiPageChange.emit(e.detail);
                 this.onPageChange.emit(e.detail);

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

@@ -34,7 +34,7 @@ export class DropiTabs {
         this.onIndexChanged.emit(tab);
     }
     render() {
-        return (h("div", { key: '35d0e29a1b788e7895d31ed6040cd86ecc6a28b3', class: "tabs-container", role: "tablist" }, this.parsedTabs.map(tab => {
+        return (h("div", { key: '337040015b29581ebb15ac347bb62220ed0a2d4d', class: "tabs-container", role: "tablist" }, this.parsedTabs.map(tab => {
             const isActive = tab.id === this.activeTab;
             return (h("div", { role: "tab", "aria-selected": String(isActive), class: { 'tab-item': true, 'tab-item--active': isActive && !tab.disabled, 'tab-item--disabled': !!tab.disabled }, onClick: () => this.handleClick(tab) }, h("span", { class: "tab-label-row" }, h("span", { class: "tab-label" }, tab.label), tab.counter !== undefined && tab.counter !== null && (h("span", { class: { 'tab-counter': true, 'tab-counter--active': isActive } }, tab.counter))), this.showIcon && (tab.completed
                 ? h("dropi-icon", { name: "Check-circle", width: "12px", height: "12px", color: "Success-Success-500" })

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

@@ -48,7 +48,7 @@ export class DropiTag {
         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 is() { return "dropi-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -86,7 +86,7 @@ export class DropiTag {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "type",
                 "defaultValue": "'primary'"
             },
@@ -112,7 +112,7 @@ export class DropiTag {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "state",
                 "defaultValue": "'default'"
             },
@@ -152,7 +152,7 @@ export class DropiTag {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "icon",
                 "defaultValue": "''"
             },
@@ -172,7 +172,7 @@ export class DropiTag {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "text",
                 "defaultValue": "''"
             }

package/dist/collection/components/dropi-tag-type-product/dropi-tag-type-product.js

@@ -7,7 +7,7 @@ export class DropiTagTypeProduct {
     /** Label text. Default: VARIABLE */
     label = 'VARIABLE';
     render() {
-        return h("div", { key: '505c4833064fa691575e38aa16b6046bc101c7eb', class: "type-variation" }, this.label);
+        return h("div", { key: 'ae1cd50cd3e82180704ae4f5406b4dc13ffbd12c', class: "type-variation" }, this.label);
     }
     static get is() { return "dropi-tag-type-product"; }
     static get encapsulation() { return "shadow"; }