@dropi/ui 0.1.21 → 0.1.22

package/dist/cjs/dropi-accordion-item.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-077kM98l.js');
+var index = require('./index-C8kwDvpf.js');
 
 const dropiAccordionItemCss = () => `:host{display:block;border-bottom:1px solid var(--Gray-Gray-100)}.accordion-header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px;background:white;border:none;cursor:pointer;text-align:left}.accordion-header-left{display:flex;align-items:center;gap:8px}.accordion-title{font-size:var(--font-size-m);font-weight:var(--font-weight-semibold);color:var(--Gray-Gray-700)}.accordion-chevron{transition:transform 0.3s ease}.accordion-chevron--open{transform:rotate(180deg)}.accordion-body{overflow:hidden;transition:max-height 0.3s ease-out}.accordion-content{padding:0 16px 16px 16px}`;
 
@@ -41,7 +41,7 @@ const DropiAccordionItem = class {
         setTimeout(() => this.updateHeight(this.open), 0);
     }
     render() {
-        return (index.h("div", { key: '33564d4efbb73ae0b3ec0195ebf0afed6b2a6cc0', class: { 'accordion-item': true, 'accordion-item--open': this.open, 'accordion-item--disabled': this.disabled } }, index.h("button", { key: '9a7e7cc044027c4d427a712c5ed352991ef622b7', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, index.h("span", { key: '17ffa01872142ab9a959104f884ce5cedada33c2', class: "accordion-header-left" }, this.preIcon && index.h("dropi-icon", { key: '8b02d875239d9ebaa42060e5dc1f4f8c6cfd3081', name: this.preIcon, width: "20px", height: "20px", color: "Gray-Gray-600" }), index.h("span", { key: 'effa37d569bfcbc10774ff2a4a7787868cf83937', class: "accordion-title" }, this.sectionTitle)), index.h("span", { key: '743aa0db06415f8b763099b53d234474c82cb8e6', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, index.h("dropi-icon", { key: '2d66c4087eddaf3f139a063eadcd8b0fb668045d', name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))), index.h("div", { key: '4621aafe6d4592830cdaa32672de357c026a0b14', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, index.h("div", { key: '826b3ad470c9444ae2378e266332959f0f9f3529', class: "accordion-content" }, index.h("slot", { key: '8982c5506ecd1ed3ee44190096848ccbf9638b95' })))));
+        return (index.h("div", { key: '43f4ce6c38338a90a3b866a449f14e48b478e738', class: { 'accordion-item': true, 'accordion-item--open': this.open, 'accordion-item--disabled': this.disabled } }, index.h("button", { key: 'b5150a903bf75b82ffea9707e5906dc17f0bcd1c', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, index.h("span", { key: '53f5c6a4e5a9d02412145395112368ddea9af746', class: "accordion-header-left" }, this.preIcon && index.h("dropi-icon", { key: '5fea3e2916fe5dfb6c1435f08c3b63aca4656523', name: this.preIcon, width: "20px", height: "20px", color: "Gray-Gray-600" }), index.h("span", { key: '3ad504dcf5d8b4f05d11a0e951a81b79428de3ec', class: "accordion-title" }, this.sectionTitle)), index.h("span", { key: 'bd44cf2fe9989fc80badb6e46a33a9d699c90f49', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, index.h("dropi-icon", { key: '7a4b261df5ffd4c6276e4cccc6bc5e8f8e43a717', name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))), index.h("div", { key: 'cb8789f49d4c83e33f2c366b90220b79b5619502', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, index.h("div", { key: '72d302242a40c9aa60a941814ac311a540b319f6', class: "accordion-content" }, index.h("slot", { key: 'b5a4a42f0d366f1f0409f719a52d5af11d77e3c3' })))));
     }
     static get watchers() { return {
         "open": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-077kM98l.js');
+var index = require('./index-C8kwDvpf.js');
 
 const dropiAccordionCss = () => `:host{display:block;width:100%;margin-bottom:-1px}*,*::before,*::after{box-sizing:border-box}.accordion{border-top:1px solid var(--Gray-Gray-100,#e6eaf2);border-bottom:1px solid var(--Gray-Gray-100,#e6eaf2);overflow:hidden}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--Size-4,16px) var(--Size-5,20px);background:transparent;border:none;cursor:pointer;gap:12px;text-align:left}.accordion-header:disabled{cursor:not-allowed;opacity:0.5}.accordion--open .accordion-header{border-bottom:1px solid var(--Gray-Gray-100,#e6eaf2)}.accordion-header-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.accordion-title{font-size:var(--font-size-m, 16px);font-weight:var(--font-weight-bold,700);color:var(--Gray-Gray-600, #475066);line-height:1.4}.accordion-chevron{display:flex;align-items:center;flex-shrink:0;transition:transform 0.22s ease}.accordion-chevron--open{transform:rotate(180deg)}.accordion-body{max-height:0;overflow:hidden;transition:max-height 0.28s ease}.accordion-content{padding:0 var(--Size-5,20px) var(--Size-4,16px);color:var(--Gray-Gray-600,#475066);font-size:var(--font-size-s,12px);line-height:1.6}`;
 
@@ -11,7 +11,7 @@ const DropiAccordion = class {
     /** Allows multiple sections to be open at the same time. If false, only one section can be open. */
     multiple = false;
     render() {
-        return (index.h("div", { key: 'b4d44bde9b982a2e11cc074600f9de9424592fde', class: "accordion-container" }, index.h("slot", { key: '631732f3726d81dac4d188542180a1286c69258b' })));
+        return (index.h("div", { key: '15575b05adec26235378bb459cdf158bdabe2852', class: "accordion-container" }, index.h("slot", { key: 'e5411aee85b69e50c777657b0cb2aa7d04d09fa4' })));
     }
 };
 DropiAccordion.style = dropiAccordionCss();

package/dist/cjs/dropi-alert-legacy.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-077kM98l.js');
+var index = require('./index-C8kwDvpf.js');
 
 const dropiAlertLegacyCss = () => `:host{display:block;margin:10px 0}.alert-legacy{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-radius:var(--Border-2);font-size:var(--font-size-s)}.alert-legacy--success{background:var(--Success-Success-50);color:var(--Success-Success-700);border:1px solid var(--Success-Success-200)}.alert-legacy--error{background:var(--Error-Error-50);color:var(--Error-Error-700);border:1px solid var(--Error-Error-200)}.alert-legacy--warning{background:var(--Warning-Warning-50);color:var(--Warning-Warning-700);border:1px solid var(--Warning-Warning-200)}.alert-legacy--info{background:var(--Info-Info-50);color:var(--Info-Info-700);border:1px solid var(--Info-Info-200)}.alert-legacy__close{background:transparent;border:none;font-size:20px;cursor:pointer;color:currentColor;opacity:0.6}.alert-legacy__close:hover{opacity:1}`;
 

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-077kM98l.js');
+var index = require('./index-C8kwDvpf.js');
 
-const dropiAlertModalCss = () => `:host{display:contents}.body-alert{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-3);width:100%;flex:1;overflow:hidden;padding-bottom:var(--Size-2)}.lottie-img{width:120px;height:120px;overflow:hidden;flex-shrink:0;align-self:center;margin-top:-8px;margin-bottom:var(--Size-2)}.lottie-img lottie-player{display:block;width:120px;height:120px}.lottie-img--loading{width:100%;height:120px;overflow:hidden;display:flex;align-items:center;justify-content:center}.lottie-img--loading lottie-player{width:300px;height:auto;flex-shrink:0}.content-alert{text-align:center;width:100%;display:flex;flex-direction:column;align-items:center}.content-alert h2{color:var(--Gray-Gray-800);font-size:19px;font-weight:var(--font-weight-semibold);margin:0}.content-alert p{color:var(--Gray-Gray-500);font-size:var(--font-size-s);margin-bottom:var(--Size-2);overflow-wrap:anywhere;max-height:100px;overflow:auto}.actions{display:flex;gap:var(--Size-3);width:100%}.actions dropi-button{flex:1;display:flex;justify-content:center}@media (max-width: 768px){.actions{flex-direction:column}.actions dropi-button{width:100%}}`;
+const dropiAlertModalCss = () => `:host{display:contents}.body-alert{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-3);width:100%;flex:1;overflow:visible;padding-bottom:var(--Size-2)}.lottie-img{width:120px;height:120px;overflow:hidden;flex-shrink:0;align-self:center;margin-top:-8px;margin-bottom:var(--Size-2)}.lottie-img lottie-player{display:block;width:120px;height:120px}.lottie-img--loading{width:100%;height:120px;overflow:hidden;display:flex;align-items:center;justify-content:center}.lottie-img--loading lottie-player{width:300px;height:auto;flex-shrink:0}.content-alert{text-align:center;width:100%;display:flex;flex-direction:column;align-items:center}.content-alert h2{color:var(--Gray-Gray-800);font-size:19px;font-weight:var(--font-weight-semibold);margin:0}.content-alert p{color:var(--Gray-Gray-500);font-size:var(--font-size-s);margin-bottom:var(--Size-2);overflow-wrap:anywhere;max-height:100px;overflow:auto}.custom-content{width:100%;text-align:left;margin-top:var(--Size-2);display:flex;flex-direction:column;gap:var(--Size-3)}.actions{display:flex;gap:var(--Size-3);width:100%}.actions dropi-button{flex:1;display:flex;justify-content:center}@media (max-width: 768px){.actions{flex-direction:column}.actions dropi-button{width:100%}}`;
 
 const DropiAlertModal = class {
     constructor(hostRef) {
@@ -115,7 +115,7 @@ const DropiAlertModal = class {
     render() {
         const lottieKey = this.loading ? 'loading' : this.type;
         const isLottieLoading = lottieKey === 'loading';
-        return (index.h("dropi-modal", { key: '42c41a88060c1039af7f85d518d93e9f5e0e8489', visible: this.visible, showHeader: this.closable, showCloseIcon: this.closable, dismissable: false, closeOnEscape: false, showFooter: false, size: "s", onOnHide: () => this.onModalHide() }, index.h("div", { key: 'e62b897c0b6f8c3bee4f3992e003cb88577708f3', class: "body-alert" }, this.lottieMap[lottieKey] && (index.h("div", { key: '0c1551477bcb926dc610f63a08542f3b8fc71a0d', class: `lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}` }, index.h("lottie-player", { key: lottieKey, src: this.lottieMap[lottieKey], background: "transparent", speed: "1", loop: true, autoplay: true }))), index.h("div", { key: 'b03602610b8ff78b4a7d5e0fcaf4e541d9e7ece6', class: "content-alert" }, index.h("h2", { key: 'c50ea63352df03d49ce0811a97ca02f031e654c9' }, this.loading ? this.loadingTitle : this.tittle), index.h("p", { key: '3f699157283cb48eb3948afede7291d965ae7066' }, this.loading ? this.loadingMessage : this.message)), !this.loading && this.displayButtons && (index.h("div", { key: '7d7c4282a726d82117b13ec23db36dd72b1327d5', class: "actions" }, this.secondaryButton && index.h("dropi-button", { key: '1a766fac9daded57f9b8a38ff3f5d43c7217210d', text: this.secondaryButton, severity: "secondary", onClick: () => this.handleSecondary(), fullWidth: true }), index.h("dropi-button", { key: '8c1053db7b35be9c5ceecd9c50a179f99efa9798', text: this.primaryButton, severity: "primary", onClick: () => this.handlePrimary(), fullWidth: true }))))));
+        return (index.h("dropi-modal", { key: '8581cbc944d42889228cb21fa27bf4e8b3bf1e16', visible: this.visible, showHeader: this.closable, showCloseIcon: this.closable, dismissable: false, closeOnEscape: false, showFooter: false, size: "s", onOnHide: () => this.onModalHide() }, index.h("div", { key: '7208cbe742dab77bcee14150998aff5647fd41af', class: "body-alert" }, this.lottieMap[lottieKey] && (index.h("div", { key: '3b4d36963f8d6547556eee704823c8e34805b8d8', class: `lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}` }, index.h("lottie-player", { key: lottieKey, src: this.lottieMap[lottieKey], background: "transparent", speed: "1", loop: true, autoplay: true }))), index.h("div", { key: 'dc52f3daec2eaf7ff9f1d51c90c67bcfaafe370f', class: "content-alert" }, index.h("h2", { key: '685df4cb76145cf6e965dd94e5f3fe60f828100c' }, this.loading ? this.loadingTitle : this.tittle), index.h("p", { key: 'f9e5b699816236148bc00c5046c6cc67eb86ae01' }, this.loading ? this.loadingMessage : this.message)), index.h("div", { key: '2e9280865cad761bea5cdd88b972734c11ab7737', class: "custom-content" }, index.h("slot", { key: '4fd36baa1455e7793a1e5291b52448707e3aa448' })), !this.loading && this.displayButtons && (index.h("div", { key: '451bd3d90ec780499d9956a8a57a0d1461406fa9', class: "actions" }, this.secondaryButton && index.h("dropi-button", { key: 'b60c30cc92cc080c01e1bf337a5e4b78f561be81', text: this.secondaryButton, severity: "secondary", onClick: () => this.handleSecondary(), fullWidth: true }), index.h("dropi-button", { key: '2b8696a02b253d289a1baef2116cffe436346717', text: this.primaryButton, severity: "primary", onClick: () => this.handlePrimary(), fullWidth: true }))))));
     }
     static get watchers() { return {
         "params": [{

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-077kM98l.js');
+var index = require('./index-C8kwDvpf.js');
 
-const dropiAlertCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.alert{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-3, 12px);border-radius:var(--Border-2, 8px);border:1px solid transparent;width:100%;animation:fadeIn 0.3s ease-in-out}@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.alert--success{background:var(--Success-Success-50, #e7f8f3);border-color:var(--Success-Success-500, #0abb87)}.alert--error{background:var(--Error-Error-50, #fef0f0);border-color:var(--Error-Error-500, #f46a6b)}.alert--warning{background:var(--Warning-Warning-50, #fef8ed);border-color:var(--Warning-Warning-500, #f1b44c)}.alert--info{background:var(--Info-Info-50, #eef6fe);border-color:var(--Info-Info-500, #50a5f1)}.alert--flag{padding:var(--Size-1, 4px) var(--Size-2, 8px);border-radius:var(--Border-1, 4px);border:none !important;justify-content:center}.alert--flag .alert__body{justify-content:center;text-align:center}.alert--flag .alert__message{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular)}.alert__icon{display:flex;align-items:center;flex-shrink:0;padding-top:1px}.alert__body{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--Size-1, 4px)}.alert__message{font-size:var(--font-size-s);color:var(--Gray-600, #475066);font-weight:var(--font-weight-medium);line-height:1.5}.alert__link{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d);text-decoration:underline;cursor:pointer}.alert__actions{display:flex;align-items:center;gap:var(--Size-2, 8px);flex-shrink:0}.alert__btn{height:28px;padding:0 var(--Size-3, 12px);border-radius:var(--Border-2, 8px);border:1px solid var(--Primary-Primary-500, #f49a3d);background:transparent;color:var(--Primary-Primary-500, #f49a3d);font-size:var(--font-size-xs, 10px);font-family:inherit;font-weight:var(--font-weight-bold, 700);cursor:pointer;transition:background 0.15s, color 0.15s}.alert__btn:hover{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff)}.alert__close{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;opacity:0.6;transition:opacity 0.15s}.alert__close:hover{opacity:1}`;
+const dropiAlertCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.alert{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-3, 12px);border-radius:var(--Border-2, 8px);border:1px solid transparent;width:100%}.alert--success{background:var(--Success-Success-50, #e7f8f3);border-color:var(--Success-Success-500, #0abb87)}.alert--error{background:var(--Error-Error-50, #fef0f0);border-color:var(--Error-Error-500, #f46a6b)}.alert--warning{background:var(--Warning-Warning-50, #fef8ed);border-color:var(--Warning-Warning-500, #f1b44c)}.alert--info{background:var(--Info-Info-50, #eef6fe);border-color:var(--Info-Info-500, #50a5f1)}.alert--flag{padding:var(--Size-1, 4px) var(--Size-2, 8px);border-radius:var(--Border-1, 4px);border:none !important;justify-content:center}.alert--flag .alert__body{justify-content:center;text-align:center}.alert--flag .alert__message{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular)}.alert__icon{display:flex;align-items:center;flex-shrink:0;padding-top:1px}.alert__body{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--Size-1, 4px)}.alert__message{font-size:var(--font-size-s);color:var(--Gray-600, #475066);font-weight:var(--font-weight-medium);line-height:1.5}.alert__link{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d);text-decoration:underline;cursor:pointer}.alert__actions{display:flex;align-items:center;gap:var(--Size-2, 8px);flex-shrink:0}.alert__btn{height:28px;padding:0 var(--Size-3, 12px);border-radius:var(--Border-2, 8px);border:1px solid var(--Primary-Primary-500, #f49a3d);background:transparent;color:var(--Primary-Primary-500, #f49a3d);font-size:var(--font-size-xs, 10px);font-family:inherit;font-weight:var(--font-weight-bold, 700);cursor:pointer;transition:background 0.15s, color 0.15s}.alert__btn:hover{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff)}.alert__close{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;opacity:0.6;transition:opacity 0.15s}.alert__close:hover{opacity:1}`;
 
 const STATE_ICONS = {
     success: 'Check-circle',

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-077kM98l.js');
+var index = require('./index-C8kwDvpf.js');
 
 const dropiAvatarsCss = () => `:host{display:inline-block}.avatar{margin:0;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;flex-shrink:0}.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.avatar--users,.avatar--transport,.avatar--payment{width:35px;height:35px}.avatar--supplier{width:70px;height:70px}.avatar--counter{width:33px;height:33px}.avatar__initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background-color:var(--Primary-Primary-100, #fde9d0);color:var(--Primary-Primary-600, #d4872e);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);text-transform:uppercase;letter-spacing:0.5px}`;
 
@@ -23,7 +23,7 @@ const DropiAvatars = class {
     render() {
         const displayInitials = this.initials?.slice(0, 2).toUpperCase();
         const showInitials = !this.image && displayInitials;
-        return (index.h("figure", { key: '207390b678faada7a5c276b23246573b04c0416c', class: { 'avatar': true, [`avatar--${this.type}`]: true } }, showInitials ? (index.h("div", { class: "avatar__initials" }, displayInitials)) : (index.h("img", { src: this.image || FALLBACK, alt: this.alt, onError: (e) => this.handleError(e) }))));
+        return (index.h("figure", { key: 'db9310b5c789b079fc0f9043a619bd22f9a60151', class: { 'avatar': true, [`avatar--${this.type}`]: true } }, showInitials ? (index.h("div", { class: "avatar__initials" }, displayInitials)) : (index.h("img", { src: this.image || FALLBACK, alt: this.alt, onError: (e) => this.handleError(e) }))));
     }
 };
 DropiAvatars.style = dropiAvatarsCss();

package/dist/cjs/dropi-badge-legacy.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-077kM98l.js');
+var index = require('./index-C8kwDvpf.js');
 
 const dropiBadgeLegacyCss = () => `:host{display:inline-block}.badge-legacy{display:flex;align-items:center;justify-content:center;padding:2px 6px;border-radius:10px;font-size:11px;font-weight:600}.badge-legacy--primary{background:var(--Primary-Primary-50);color:var(--Primary-Primary-500)}.badge-legacy--secondary{background:var(--Gray-Gray-100);color:var(--Gray-Gray-600)}.badge-legacy--tertiary{background:var(--Success-Success-50);color:var(--Success-Success-500)}`;
 
@@ -18,7 +18,7 @@ const DropiBadgeLegacy = class {
     count = 0;
     render() {
         const isCounter = this.type === 'counter';
-        return (index.h("div", { key: 'a450ec95a77df2cc01184b6eb8d935ba8f802e3d', class: {
+        return (index.h("div", { key: 'f3d7bf7be848acee4077acef4f8e2ab4cfd99d83', class: {
                 'badge-legacy': true,
                 [`badge-legacy--${this.variant}`]: true,
                 [`badge-legacy--${this.type}`]: true

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-077kM98l.js');
+var index = require('./index-C8kwDvpf.js');
 
 const dropiBadgeCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.tag-state{border-radius:12px;padding:2px 10px;display:flex;align-items:center;gap:4px}.tag-state svg{width:13px}.tag-state p{font-size:13px;font-weight:var(--font-weight-medium);line-height:20px;margin:0;padding:0}.tag-state.active{background:var(--Success-Success-50, #e7f8f3);color:var(--Success-Success-500, #0abb87)}.tag-state.pending{color:var(--Orange-orange-500, #f49a3d);background:var(--Orange-orange-50, #fef5ec)}.tag-state.canceled,.tag-state.frozen{color:var(--Gray-Gray-500, #69738c);background:var(--Gray-Gray-50, #f7f8fa)}`;
 
@@ -29,7 +29,7 @@ const DropiBadge = class {
         return null;
     }
     render() {
-        return (index.h("div", { key: '1b353257990bcb7f0869ef86e5ac1dd945d253d5', class: `tag-state ${this.state}` }, this.renderIcon(), index.h("p", { key: '841b7abd4ff7519874f63b99d0ed8f452e621e63' }, this.stateText[this.state])));
+        return (index.h("div", { key: 'b4cae2eac2f963a641ca23e27b33899469b2b370', class: `tag-state ${this.state}` }, this.renderIcon(), index.h("p", { key: '64a2504a1844f2cb9397878ca305aa183b0609a5' }, this.stateText[this.state])));
     }
 };
 DropiBadge.style = dropiBadgeCss();

package/dist/cjs/dropi-banner-external.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-077kM98l.js');
+var index = require('./index-C8kwDvpf.js');
 
 const dropiBannerExternalCss = () => `:host{display:block;width:100%}.dropi-banner-external{display:block;width:100%;position:relative;margin-bottom:16px;border-radius:var(--Border-2, 8px)}.dropi-banner-external a{display:block;text-decoration:none}.click-wrapper{cursor:pointer}.inner{position:relative;display:block}.inner img{display:block;width:100%;height:auto;border-radius:var(--Border-2, 8px);max-width:1220px;margin:auto}.close-btn{position:absolute;top:4px;right:4px;background:rgba(255, 255, 255, 0.8);border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background 0.15s ease}.close-btn:hover{background:rgba(255, 255, 255, 1)}`;
 
@@ -25,6 +25,16 @@ const DropiBannerExternal = class {
     /** Countries list to show (matches Angular `viewOnlyCountries`) */
     viewOnlyCountries = [];
     closed = false;
+    get el() { return index.getElement(this); }
+    componentWillLoad() {
+        if (!this.imageUrl) {
+            this.imageUrl =
+                this.el.getAttribute('imageUrl') ||
+                    this.el.getAttribute('image-url') ||
+                    this.el.getAttribute('imageurl') ||
+                    '';
+        }
+    }
     /** Emitted when the banner is clicked (only when no link is set) */
     bannerClick;
     /** Emitted with false when the close button is clicked (matches Angular `isVisible`) */
@@ -44,7 +54,7 @@ const DropiBannerExternal = class {
     render() {
         if (this.closed || !this.imageUrl)
             return null;
-        const inner = (index.h("div", { class: "inner" }, index.h("img", { src: this.imageUrl, alt: this.alt, loading: "lazy" }), index.h("button", { class: "close-btn", "aria-label": "Cerrar banner", onClick: (e) => this.closeBanner(e) }, index.h("dropi-icon", { name: "Close-small", width: "20px", height: "20px", color: "Gray-Gray-600" }))));
+        const inner = (index.h("div", { class: "inner" }, index.h("img", { src: this.imageUrl, alt: this.alt }), index.h("button", { class: "close-btn", "aria-label": "Cerrar banner", onClick: (e) => this.closeBanner(e) }, index.h("dropi-icon", { name: "Close-small", width: "20px", height: "20px", color: "Gray-Gray-600" }))));
         return (index.h("div", { class: "dropi-banner-external", style: { background: this.backgroundColor } }, this.link ? (index.h("a", { href: this.link, target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.handleClick(e) }, inner)) : (index.h("div", { class: "click-wrapper", onClick: (e) => this.handleClick(e) }, inner))));
     }
 };

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-077kM98l.js');
+var index = require('./index-C8kwDvpf.js');
 
 const dropiBreadcrumbCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.breadcrumb{margin:0}.crumb-list{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.crumb-home{display:flex;padding-right:4px;align-items:center;gap:4px}.home-link{display:inline-flex;align-items:center;color:var(--Gray-Gray-500, #69738c);text-decoration:none;transition:color 0.2s ease}.home-link:hover{color:var(--Gray-Gray-700, #32394d)}.crumb{display:flex;padding:0 4px;align-items:center;gap:8px}.crumb-link{color:var(--Gray-Gray-500, #69738c);text-align:center;cursor:pointer;text-decoration:none;transition:color 0.2s ease;font-size:var(--font-size-s, 12px)}.crumb-link:hover{color:var(--Gray-Gray-700, #32394d);text-decoration:underline}.crumb-link.disabled{pointer-events:none;color:var(--Gray-Gray-300, #a1a8b8);cursor:not-allowed;text-decoration:none}.current{color:var(--Gray-Gray-700, #32394d);cursor:default;font-size:var(--font-size-s, 12px)}`;
 
@@ -32,7 +32,7 @@ const DropiBreadcrumb = class {
     }
     render() {
         const items = this.parsedItems;
-        return (index.h("nav", { key: '03396956a168feaa860265e9962d9c5cbca8b23f', class: "breadcrumb", "aria-label": "Breadcrumb" }, index.h("div", { key: '88e05f4ea225b26a9686bc9f1a01e8e3710806dc', class: "crumb-list" }, index.h("div", { key: '54e0dfc3bbef05a3041d187cd9ec0536f69c34e3', class: "crumb-home" }, index.h("a", { key: '31c971efc13b5122ff2775ee2f79b25c06a01b0f', href: this.homeRoute, class: "home-link", "aria-label": "Inicio", onClick: (e) => { e.preventDefault(); this.dropiNavigate.emit(this.homeRoute); } }, index.h("dropi-icon", { key: '8a436c3d254884e4479713a9c6981929bb91df55', name: this.homeIconName, width: "16px", color: "Gray-Gray-500" })), items.length > 0 && (index.h("dropi-icon", { key: 'f57beceaa6dab5ed00a2c1c38ff43ea6bce040f5', name: "Dropdown-Right", width: "16px", color: "Gray-Gray-500" }))), items.map((item, idx) => {
+        return (index.h("nav", { key: 'c4546d7a0c7852e01f685176b5365f1e0082ad24', class: "breadcrumb", "aria-label": "Breadcrumb" }, index.h("div", { key: '924ab634ae4e71f6bd39a67b4b3889cdca20234d', class: "crumb-list" }, index.h("div", { key: 'e7b1b285bdd497a028a041ada1eb8b34f77384b0', class: "crumb-home" }, index.h("a", { key: '9e288d5f5761daed20b35dbf056c7de9c2e7b8e3', href: this.homeRoute, class: "home-link", "aria-label": "Inicio", onClick: (e) => { e.preventDefault(); this.dropiNavigate.emit(this.homeRoute); } }, index.h("dropi-icon", { key: '15210c5feb41fc5a8dd37f52eba1e5a211834f84', name: this.homeIconName, width: "16px", color: "Gray-Gray-500" })), items.length > 0 && (index.h("dropi-icon", { key: '5acd21133859ec42b078fd323f82b7bc13c7b359', name: "Dropdown-Right", width: "16px", color: "Gray-Gray-500" }))), items.map((item, idx) => {
             const isLast = idx === items.length - 1;
             const href = item.url || item.routerLink || '#';
             return (index.h("div", { class: "crumb", key: idx }, (!isLast || this.lastItemClickable) ? (index.h("a", { class: `crumb-link Body-S-Regular${item.disabled ? ' disabled' : ''}`, href: href, onClick: (e) => {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-077kM98l.js');
+var index = require('./index-C8kwDvpf.js');
 
 const dropiButtonCss = () => `:host{display:inline-block}:host([full-width]){display:flex;width:100%}:host([full-width]) .btn{width:100%}*,*::before,*::after{box-sizing:border-box}.btn{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);border-radius:var(--Border-2, 8px);font-weight:var(--font-weight-bold);min-width:33px;line-height:110%;cursor:pointer;white-space:nowrap;transition:background 0.25s ease,     color 0.25s ease,     border-color 0.25s ease,     transform 0.25s ease}.btn:active{transition:transform 0.01s ease-out;transform:scale(0.98)}.btn:hover:not(:active){transform:scale(1.01)}.btn.without-text{gap:0}.btn.large{padding:var(--Size-4, 16px);font-size:var(--Size-4, 16px);height:48px}.btn.normal{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);height:40px}.btn.small{padding:var(--Size-2, 8px);font-size:var(--font-size-s, 12px);height:29px}.btn.disabled,.btn.loading{cursor:not-allowed;pointer-events:none}.btn.primary.default{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff)}.btn.primary.default:hover{background:var(--Primary-Primary-600, #e58017)}.btn.primary.success{background:var(--Success-Success-500, #0abb87);color:var(--Neutral-White, #ffffff)}.btn.primary.success:hover{background:var(--Success-Success-600, #09aa7b)}.btn.primary.info{background:var(--Info-Info-500, #50a5f1);color:var(--Neutral-White, #ffffff)}.btn.primary.info:hover{background:var(--Info-Info-600, #4996db)}.btn.primary.error{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #ffffff)}.btn.primary.error:hover{background:var(--Error-Error-600, #de6061)}.btn.primary.warning{background:var(--Warning-Warning-500, #f1b44c);color:var(--Neutral-White, #ffffff)}.btn.primary.warning:hover{background:var(--Warning-Warning-600, #dba445)}.btn.primary.legacy{background:var(--Secondary-Secondary-500, #008dbf);color:var(--Neutral-White, #ffffff)}.btn.primary.legacy:hover{background:var(--Secondary-Secondary-600, #007199)}.btn.primary.disabled.default{background:var(--Primary-Primary-300, #f2bc85);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.success{background:var(--Success-Success-300, #5bd1af);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.info{background:var(--Info-Info-300, #8ac3f6);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.error{background:var(--Error-Error-300, #f89b9c);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.warning{background:var(--Warning-Warning-300, #f6cd87);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.legacy{background:var(--Secondary-Secondary-300, #62bad9);color:var(--Neutral-White, #ffffff)}.btn.secondary{background:var(--Neutral-White, #ffffff);border:1px solid}.btn.secondary.default{border-color:var(--Primary-Primary-500, #f49a3d);color:var(--Primary-Primary-500, #f49a3d)}.btn.secondary.default:hover{color:var(--Primary-Primary-600, #e58017);border-color:var(--Primary-Primary-600, #e58017)}.btn.secondary.success{border-color:var(--Success-Success-500, #0abb87);color:var(--Success-Success-500, #0abb87)}.btn.secondary.success:hover{color:var(--Success-Success-600, #09aa7b);border-color:var(--Success-Success-600, #09aa7b)}.btn.secondary.info{border-color:var(--Info-Info-500, #50a5f1);color:var(--Info-Info-500, #50a5f1)}.btn.secondary.info:hover{color:var(--Info-Info-600, #4996db);border-color:var(--Info-Info-600, #4996db)}.btn.secondary.error{border-color:var(--Error-Error-500, #f46a6b);color:var(--Error-Error-500, #f46a6b)}.btn.secondary.error:hover{color:var(--Error-Error-600, #de6061);border-color:var(--Error-Error-600, #de6061)}.btn.secondary.warning{border-color:var(--Warning-Warning-500, #f1b44c);color:var(--Warning-Warning-500, #f1b44c)}.btn.secondary.warning:hover{color:var(--Warning-Warning-600, #dba445);border-color:var(--Warning-Warning-600, #dba445)}.btn.secondary.legacy{border-color:var(--Secondary-Secondary-500, #008dbf);color:var(--Secondary-Secondary-500, #008dbf)}.btn.secondary.legacy:hover{color:var(--Secondary-Secondary-600, #007199);border-color:var(--Secondary-Secondary-600, #007199)}.btn.secondary.disabled.default{border-color:var(--Primary-Primary-300, #f2bc85);color:var(--Primary-Primary-300, #f2bc85)}.btn.secondary.disabled.success{border-color:var(--Success-Success-300, #5bd1af);color:var(--Success-Success-300, #5bd1af)}.btn.secondary.disabled.info{border-color:var(--Info-Info-300, #8ac3f6);color:var(--Info-Info-300, #8ac3f6)}.btn.secondary.disabled.error{border-color:var(--Error-Error-300, #f89b9c);color:var(--Error-Error-300, #f89b9c)}.btn.secondary.disabled.warning{border-color:var(--Warning-Warning-300, #f6cd87);color:var(--Warning-Warning-300, #f6cd87)}.btn.secondary.disabled.legacy{border-color:var(--Secondary-Secondary-300, #62bad9);color:var(--Secondary-Secondary-300, #62bad9)}.btn.tertiary{background:none;border:none}.btn.tertiary.default,.btn.tertiary.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-500, #69738c)}.btn.tertiary.default:hover,.btn.tertiary.legacy:hover{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.btn.tertiary.success{color:var(--Success-Success-500, #0abb87)}.btn.tertiary.success:hover{background:var(--Success-Success-50, #e7f8f3)}.btn.tertiary.info{color:var(--Info-Info-500, #50a5f1)}.btn.tertiary.info:hover{background:var(--Info-Info-50, #eef6fe)}.btn.tertiary.error{color:var(--Error-Error-500, #f46a6b)}.btn.tertiary.error:hover{background:var(--Error-Error-50, #fef0f0)}.btn.tertiary.warning{color:var(--Warning-Warning-500, #f1b44c)}.btn.tertiary.warning:hover{background:var(--Warning-Warning-50, #fef8ed)}.btn.tertiary.dropdown{color:var(--Gray-Gray-500, #69738c);font-weight:var(--font-weight-regular);font-size:var(--font-size-s);background:transparent}.btn.tertiary.disabled.default,.btn.tertiary.disabled.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6)}.btn.tertiary.disabled.success{color:var(--Success-Success-300, #5bd1af)}.btn.tertiary.disabled.info{color:var(--Info-Info-300, #8ac3f6)}.btn.tertiary.disabled.error{color:var(--Error-Error-300, #f89b9c)}.btn.tertiary.disabled.warning{color:var(--Warning-Warning-300, #f6cd87)}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
 
@@ -71,7 +71,7 @@ const DropiButton = class {
         const hasText = this.text !== '';
         const showPostIcon = this.postIcon !== '' || this.type === 'dropdown';
         const dropdownIcon = this.type === 'dropdown' ? 'Dropdown-down' : this.postIcon;
-        return (index.h("button", { key: '4df67bd28e77c9a14fb33f3131b60ac508ca1937', class: {
+        return (index.h("button", { key: 'd21aeb2274c317795bb0daad6d30c2bc9f3ede9f', class: {
                 btn: true,
                 'without-text': !hasText,
                 [this.severity]: true,
@@ -79,7 +79,7 @@ const DropiButton = class {
                 [this.size]: true,
                 [this.state]: true,
                 'full-width': this.fullWidth,
-            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (index.h("dropi-icon", { key: '7a54bf7ebfad24786109a17af928bfc43ccc7db4', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && index.h("span", { key: 'ffb3b062d93c3a7090d971538d23c309f915b749', class: "text" }, this.text), showPostIcon && (index.h("dropi-icon", { key: '16127c78c5b4a3372ba89b24bc9b067e2d035cd1', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), index.h("slot", { key: 'a65ee231501ad83a059eb5988e96e1dcd18c5706' })));
+            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (index.h("dropi-icon", { key: '6711ece5a9c871db989e6bc4572c0d0ebfa7f899', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && index.h("span", { key: '9fc49de08b5672c6e2dae9b3cea9587d451fac0d', class: "text" }, this.text), showPostIcon && (index.h("dropi-icon", { key: '1ce254e23b16fb7013469fb3e2d71fe70dba5a9d', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), index.h("slot", { key: '72857295b27aa6ef6981276d68497f33958a584c' })));
     }
 };
 DropiButton.style = dropiButtonCss();

package/dist/cjs/dropi-card-checkbox.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-077kM98l.js');
+var index = require('./index-C8kwDvpf.js');
 
 const dropiCardCheckboxCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.container-card-check{padding:var(--Size-4, 16px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Size-2, 8px);width:100%;display:flex;align-items:center;gap:var(--Size-3, 12px);cursor:pointer;height:66px;overflow:hidden;transition:background 0.15s ease, border-color 0.15s ease}.container-card-check.disabled{border-radius:var(--Border-2, 8px);border:1px solid var(--Gray-Gray-100, #e6eaf2);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:default}.container-card-check.disabled .title-check,.container-card-check.disabled .description-text,.container-card-check.disabled .extra-info{color:var(--Gray-Gray-400, #858ea6)}.container-text{width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:start;overflow:hidden}.title-check{color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-m, 14px);font-weight:var(--font-weight-regular, 400);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.description-text{color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);margin-top:var(--Size-1, 4px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.extra-info{display:flex;justify-content:space-between;align-items:center;flex-direction:column;gap:4px;flex-shrink:0;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.extra-info h4{margin:0;font-weight:var(--font-weight-semibold);color:inherit;line-height:inherit}.default-card{border:none}.is-checked{background:var(--Primary-Primary-50, #fff8f0);border:1px solid var(--Primary-Primary-500, #f49a3d)}`;
 
@@ -35,12 +35,12 @@ const DropiCardCheckbox = class {
         this.onChange.emit(this.isChecked);
     }
     render() {
-        return (index.h("div", { key: 'b6e9f4e5855a03b04102fd2206c4d478d49e4753', class: {
+        return (index.h("div", { key: '238a146e7500efbc01d83a8494ee577fbb600729', class: {
                 'container-card-check': true,
                 'default-card': this.type === 'default',
                 'is-checked': this.isChecked && this.type === 'with card',
                 'disabled': this.disabled,
-            }, onClick: () => this.handleClick() }, index.h("dropi-checkbox", { key: '45af833a92b8441b79e2679a8f584f74e6b0c458', checked: this.isChecked, disabled: this.disabled }), index.h("div", { key: 'b0678976e2f52eef02fa5cb71ae6db284b26212d', class: "container-text" }, index.h("div", { key: 'd5bc253eb3262223d1e9ba31b2193cd3c1d11abe', class: "title-check" }, this.title), this.description && index.h("div", { key: '5555ff237e6c80552dafa079de1b6901e3e672a5', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (index.h("div", { key: '675a7b4a1195d2a452f3be11d4ae1553f7b19b4b', class: "extra-info" }, this.extraInfo && index.h("div", { key: '33e7cec0ccc2c1c5f8afe61a54463382b11343b4' }, this.extraInfo), this.extraInfoDescription && index.h("h4", { key: 'f5d61a5ff4706d4bcb2cd7f818e06cff8787ac6d' }, this.extraInfoDescription)))));
+            }, onClick: () => this.handleClick() }, index.h("dropi-checkbox", { key: '405d834de33790be58fba7e50b0e579889f04394', checked: this.isChecked, disabled: this.disabled }), index.h("div", { key: '49659771de9ca8ee8c2fa9fbe828a1d94fbd3c9e', class: "container-text" }, index.h("div", { key: '7d39435ef56cd61605e9d9b69d6917e3ec8470fa', class: "title-check" }, this.title), this.description && index.h("div", { key: '00a7723401979d7a9d926ce939eb09430ddb7372', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (index.h("div", { key: '4d1c9e49f6e397f0433827960167ff88bcd669db', class: "extra-info" }, this.extraInfo && index.h("div", { key: 'b9da8514c2013cd6cab9cf6005dad8d3ae30b930' }, this.extraInfo), this.extraInfoDescription && index.h("h4", { key: 'ac2fcbc6359ea173911f181b2a145de59af10c9d' }, this.extraInfoDescription)))));
     }
 };
 DropiCardCheckbox.style = dropiCardCheckboxCss();

package/dist/cjs/dropi-card-product.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-077kM98l.js');
+var index = require('./index-C8kwDvpf.js');
 
 const dropiCardProductCss = () => `:host{display:block;font-family:'Inter', sans-serif}*,*::before,*::after{box-sizing:border-box}.dropi-card-product{position:relative;background:#ffffff;border-radius:8px;overflow:hidden;transition:all 0.2s ease-in-out;cursor:pointer;display:flex;flex-direction:column;height:100%;box-sizing:border-box;width:100%;max-width:450px;box-shadow:none}.product-image-container{padding:4px;flex-shrink:0}.product-image{position:relative;width:100%;aspect-ratio:1;border-radius:8px;border:1px solid #c3c9d9;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:#f8f9fa}.product-image img{width:100%;height:100%;object-fit:cover;border-radius:8px}.product-image img.error-img{object-fit:contain}.favorite-button{position:absolute;bottom:5px;right:6px;border-radius:8px;padding:12px;cursor:pointer;transition:all 0.2s ease-in-out;z-index:2;display:flex;align-items:center;justify-content:center;width:42px;height:40px;background:#ffffff;border:1px solid #858ea6}.favorite-button.favorite-active{background:var(--Primary-Primary-500, #f49a3d);border:1px solid var(--Primary-Primary-500, #f49a3d)}.product-info{position:relative;padding:8px;display:flex;flex-direction:column;gap:4px;flex:1;justify-content:space-between}.supplier-insignia{position:absolute;top:-24px;left:0px}.product-header{display:flex;justify-content:space-between;align-items:center;width:100%;height:26px}.category{color:#69738c;font-family:'Inter', sans-serif;font-size:12px;font-weight:400;line-height:1.5;flex:1}.stock-info{display:flex;align-items:center;gap:2px;font-family:'Inter', sans-serif;font-size:12px;font-weight:400;line-height:1.5}.stock-label{color:#69738c}.stock-value{font-weight:500}.product-name{color:#32394d;font-family:'Inter', sans-serif;font-size:16px;font-weight:500;line-height:1.5;margin:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.supplier-info{font-family:'Inter', sans-serif;font-size:12px;line-height:1.2}.supplier-label{color:#69738c;font-weight:400}.supplier-name{color:#50a5f1;font-weight:400;margin-left:4px;cursor:pointer}.price-container{display:flex;gap:8px;margin-top:4px}.price-item{flex:1;display:flex;flex-direction:column}.price-label{color:#69738c;font-family:'Inter', sans-serif;font-size:12px;font-weight:400;line-height:1.5;height:18px;min-width:max-content}.price-value{color:#32394d;font-family:'Inter', sans-serif;font-size:14px;font-weight:700;line-height:1.1;margin-top:2px}.separator{height:1px;background:#e6eaf2;margin:0;flex-shrink:0}.action-button{background:#ffffff;border:none;border-top:1px solid #e6eaf2;padding:12px;cursor:pointer;transition:all 0.2s ease-in-out;display:flex;align-items:center;justify-content:center;gap:8px;height:40px;flex-shrink:0}.action-button--disabled{opacity:0.3;cursor:not-allowed}.button-text{font-family:'Inter', sans-serif;font-size:14px;font-weight:700;line-height:1.1;color:#f49a3d;text-align:center;white-space:nowrap}`;
 
@@ -45,6 +45,8 @@ const DropiCardProduct = class {
     /** Emitted when supplier name clicked */
     dropiSupplierClick;
     formatPrice(val) {
+        if (val == null)
+            return '0';
         return val.toLocaleString('es-CO');
     }
     get inStock() {
@@ -58,17 +60,17 @@ const DropiCardProduct = class {
         return 'var(--Success-Success-500, #0abb87)';
     }
     render() {
-        return (index.h("div", { key: '37c48cc67a7f0c7469a68052c90a2818535dce69', class: "dropi-card-product", onClick: () => this.onProductClick.emit() }, index.h("div", { key: '83404d72af41a88fd2abea553559b057b6fff12d', class: "product-image-container" }, index.h("div", { key: 'c1d5044b0bd09051e1901e897160fa47d2ded209', class: "product-image" }, index.h("img", { key: 'a70907ebb8bcd3a165e395a241fc60942f48c144', src: this.image || '', alt: this.productName, onError: (e) => {
+        return (index.h("div", { key: '42990ea883dcd6cc72e1f62771f7b9554c36bdba', class: "dropi-card-product", onClick: () => this.onProductClick.emit() }, index.h("div", { key: '59295427ddc350ec3c70d7d1bd4803ffa6bf26b0', class: "product-image-container" }, index.h("div", { key: '9d10e18f2eadf16f0c0b1b7cb7860d08f2ca778f', class: "product-image" }, index.h("img", { key: '19f7af8eddcbea880d32ef30603d55bfe9337f17', src: this.image || '', alt: this.productName, onError: (e) => {
                 e.target.src = './assets/utils/no-image.jpg';
-            }, class: !this.image ? 'error-img' : '' }), this.showFavorite && (index.h("button", { key: '24c395c652a3d0dbb18258a8975ac79eeb6154fd', class: { 'favorite-button': true, 'favorite-active': this.isFavorite }, onClick: (e) => {
+            }, class: !this.image ? 'error-img' : '' }), this.showFavorite && (index.h("button", { key: 'a6e13eea7c211fd772fe5ee7c13c7d475d54986c', class: { 'favorite-button': true, 'favorite-active': this.isFavorite }, onClick: (e) => {
                 e.stopPropagation();
                 this.isFavorite = !this.isFavorite;
                 this.changeFavorite.emit(this.isFavorite);
-            }, "aria-label": "Favorito" }, index.h("dropi-icon", { key: 'b196e405c3046dbbb973f77e8f5c76a170154d6f', name: this.isFavorite ? 'Heart-solid' : 'Heart', width: "18px", height: "18px", color: this.isFavorite ? '#fff' : '#858ea6' }))))), index.h("div", { key: 'cb9d81caa32ad134093637426507a55462d25b5f', class: "product-info" }, this.supplierCategory && (index.h("dropi-ilustration-icon", { key: '4f642dfa0e8621094a7ab58710e592133b43cea2', class: "supplier-insignia", type: "insignia", stateInsignia: this.supplierCategory, tagProduct: true })), index.h("div", { key: '269a000490bf2c0eab9a0bc4f8371ed91c5b84d3', class: "product-header" }, this.category && (index.h("span", { key: 'af027a19e03a9ddb95c0901f01081a1a42d856f1', class: "category" }, this.category)), index.h("div", { key: '26d7d97df6ce9f3fadeb8e84e5a8b9cda0450e7f', class: "stock-info" }, index.h("span", { key: 'ef9c7537b9b2185c455189b3c1a4999f409501ba', class: "stock-label" }, "Stock:"), index.h("span", { key: '89fe2fe123967c57c769953d18e24015288a3d56', class: "stock-value", style: { color: this.getStockColor() } }, this.stock === 0 ? 'Agotado' : this.stock))), index.h("h3", { key: '79b5046ab7ea3adeca8066dcc2f174cfed3f92f3', class: "product-name" }, this.productName), this.supplier && (index.h("div", { key: 'a1ff7e3fcf77ad8f4c979d266aae712aff4c18b2', class: "supplier-info" }, index.h("span", { key: 'be92e4ddd9d0de947307bd4bfd474ae31c6f2f7c', class: "supplier-label" }, "Proveedor:"), index.h("span", { key: '7180d51dd2f1ecb3726aa24793184a140778afe6', class: "supplier-name", onClick: (e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); } }, this.supplier))), index.h("div", { key: '86733596ad100c5510a347cbf73ca9e03590322b', class: "price-container" }, index.h("div", { key: 'c2d919ae1b106b27fdaf649a531e96167a00b787', class: "price-item" }, index.h("span", { key: '337611bf6f02199c99645299469e5a9d4a6428a9', class: "price-label" }, "Precio proveedor"), index.h("span", { key: '1c63de1e288c7fb30067908c37dd8451f302672e', class: "price-value" }, this.currency, " ", this.formatPrice(this.salePrice))), index.h("div", { key: 'b23b70d40afc0afca19d86b754d6476b65a22e73', class: "price-item" }, index.h("span", { key: '3b15127ac5c07361e6ba23107f845b835ac35406', class: "price-label" }, "Precio sugerido"), index.h("span", { key: '14eb8d5cdb5f6152a0a82c1428d21eebb81a6744', class: "price-value" }, this.currency, " ", this.formatPrice(this.suggestedPrice))))), index.h("div", { key: 'e13e6135234a25b927018265e9570ecbf2fb71dc', class: "separator" }), this.showAddButton && (index.h("div", { key: 'c1b70f77fda95df876436b9cf326d470eb250bd9', class: { 'action-button': true, 'action-button--disabled': !this.inStock }, onClick: (e) => {
+            }, "aria-label": "Favorito" }, index.h("dropi-icon", { key: '0020aaa1beffedd0243c62f616dfeb6428ec63e5', name: this.isFavorite ? 'Heart-solid' : 'Heart', width: "18px", height: "18px", color: this.isFavorite ? '#fff' : '#858ea6' }))))), index.h("div", { key: '390a04f46d8394deb0591969a04525f3687509a0', class: "product-info" }, this.supplierCategory && (index.h("dropi-ilustration-icon", { key: '7fa320fcc36f6d4929197a2d88e59deb76d34ab0', class: "supplier-insignia", type: "insignia", stateInsignia: this.supplierCategory, tagProduct: true })), index.h("div", { key: '67e922b0afc44b3f376db3b20a33d7cc0ae8e987', class: "product-header" }, this.category && (index.h("span", { key: '421f39afc07922579610fe57abdfa37b4fa68586', class: "category" }, this.category)), index.h("div", { key: 'e4ad1d38535bd876298efb6d819d3355ac6b7446', class: "stock-info" }, index.h("span", { key: '5dbdabc282dbfaee4adec81668d38a909e04227d', class: "stock-label" }, "Stock:"), index.h("span", { key: 'f14a47956953779f4527404930b4a988ac5c5737', class: "stock-value", style: { color: this.getStockColor() } }, this.stock === 0 ? 'Agotado' : this.stock))), index.h("h3", { key: '4403e622316112df4075fafbbbbc17151d2e1b39', class: "product-name" }, this.productName), this.supplier && (index.h("div", { key: '28554238023a313e1698847a5faccd17e9bbd750', class: "supplier-info" }, index.h("span", { key: 'e34245925f659f232050ad835cf83690b112d7d0', class: "supplier-label" }, "Proveedor:"), index.h("span", { key: 'cabf8743951095acf0c05dd6e48ee74140984773', class: "supplier-name", onClick: (e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); } }, this.supplier))), index.h("div", { key: '193982dc4aea14f337f64c9156d97f7c23d02db7', class: "price-container" }, index.h("div", { key: 'f2925c29fe4d5f9be2f92c501b92351e9a4f60e0', class: "price-item" }, index.h("span", { key: 'd0a8f99140d6ced64e19a69a2f198ba861cca017', class: "price-label" }, "Precio proveedor"), index.h("span", { key: '6fa5b8b5cd1f6d6e7b2551bdceedf65e3cb0029d', class: "price-value" }, this.currency, " ", this.formatPrice(this.salePrice))), index.h("div", { key: '0a37ead7f660608ed6303c97893fdd9156b5bfad', class: "price-item" }, index.h("span", { key: '8bb33b1b418fdbb79c31ed69ddfa2598f6450efd', class: "price-label" }, "Precio sugerido"), index.h("span", { key: '2df4c30b299190461f0032a66cc8d281ce9c9dab', class: "price-value" }, this.currency, " ", this.formatPrice(this.suggestedPrice))))), index.h("div", { key: '91a8306e386ac8d0422a02d3b4bac2d96ba7bebc', class: "separator" }), this.showAddButton && (index.h("div", { key: '69fd0267e5388770f5067a23d4ddf2636867b030', class: { 'action-button': true, 'action-button--disabled': !this.inStock }, onClick: (e) => {
                 e.stopPropagation();
                 if (this.inStock)
                     this.dropiAddProduct.emit();
-            } }, index.h("dropi-icon", { key: 'f54207e6e1ebab2d2b0877af65b6353e02264ee4', name: "Shopping-cart-arrow-rigth", width: "20px", height: "20px", color: "#f49a3d" }), index.h("span", { key: 'e274c0343cdd202fa4e73e4d0843fe11d53aec6c', class: "button-text" }, "Enviar a cliente")))));
+            } }, index.h("dropi-icon", { key: '6e9a7333778b5a4e75bca612f7900909e9b52c80', name: "Shopping-cart-arrow-rigth", width: "20px", height: "20px", color: "#f49a3d" }), index.h("span", { key: '1f3eb20049a94cb74bef8c89f8773a831667dc7b', class: "button-text" }, "Enviar a cliente")))));
     }
 };
 DropiCardProduct.style = dropiCardProductCss();

package/dist/cjs/dropi-card-section.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-077kM98l.js');
+var index = require('./index-C8kwDvpf.js');
 
 const dropiCardSectionCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.card-section{display:flex;align-items:center;justify-content:space-between;gap:var(--Size-4, 16px);padding:var(--Size-3, 12px) var(--Size-4, 16px);background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-100, #e6eaf2);border-radius:var(--Border-2, 8px)}.card-section__text{flex:1}.card-section__title{margin:0 0 4px;font-family:inherit;font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1f2433)}h5.card-section__title{font-size:var(--font-size-m, 14px)}h6.card-section__title{font-size:var(--font-size-s, 12px)}.card-section__desc{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c)}.card-section__control{flex-shrink:0}.card-section__dropdown-btn{display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer}`;
 
@@ -25,9 +25,9 @@ const DropiCardSection = class {
     /** Emitted when dropdown icon is clicked */
     onClick;
     render() {
-        return (index.h("div", { key: 'f0afbda9991af5b381a65dd5e620ca3d8e50791f', class: "card-section" }, index.h("div", { key: 'bb0a62ec9840a762ea3be5c342adbc431f26ba7e', class: "card-section__text" }, this.type === 'important'
+        return (index.h("div", { key: 'aa7548c223bf3238b7af10e52821e3ffd19fefca', class: "card-section" }, index.h("div", { key: '6b0ed1e7f7c282b0f67277567a2fa1ffbab9d04e', class: "card-section__text" }, this.type === 'important'
             ? index.h("h5", { class: "card-section__title card-section__title--important" }, this.title)
-            : index.h("h6", { class: "card-section__title" }, this.title), this.description && index.h("p", { key: 'd8ae14dfb52783a44c1f9edac1c9c388422f58e7', class: "card-section__desc" }, this.description)), index.h("div", { key: '927e20c496006fa26fcbc533faa3b55b890008dd', class: "card-section__control" }, this.typeElement === 'switch' ? (index.h("dropi-switch", { isChecked: this.isChecked, onOnChange: (e) => {
+            : index.h("h6", { class: "card-section__title" }, this.title), this.description && index.h("p", { key: 'f0c83d631d541d95c19e4a246634da56413a3de9', class: "card-section__desc" }, this.description)), index.h("div", { key: '976d78401ab26872df88115ae0f0449bcd2faae9', class: "card-section__control" }, this.typeElement === 'switch' ? (index.h("dropi-switch", { isChecked: this.isChecked, onOnChange: (e) => {
                 this.isChecked = e.detail;
                 this.onChange.emit(e.detail);
             } })) : (index.h("button", { class: "card-section__dropdown-btn", onClick: () => this.onClick.emit(), "aria-label": "Expandir" }, index.h("dropi-icon", { name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))))));

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-077kM98l.js');
+var index = require('./index-C8kwDvpf.js');
 
 const dropiCarouselCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.dropi-carousel-container{display:flex;flex-direction:column;position:relative;width:100%;max-width:100%;overflow:hidden;padding:0 var(--Size-4)}.dropi-carousel-content{display:flex;align-items:center;position:relative;padding:1rem 0;width:100%}.dropi-carousel-items-content{overflow:hidden;flex:1;padding:0;width:100%;max-width:100%}.dropi-carousel-items-container{display:flex;padding-bottom:var(--Size-3);will-change:transform}.dropi-carousel-item{flex:0 0 auto;padding:0 0.5rem;box-sizing:border-box}.dropi-carousel-item>*{width:100%;box-sizing:border-box;display:block}.dropi-carousel-nav{display:flex;width:40px;height:40px;justify-content:center;align-items:center;cursor:pointer;transition:all 0.2s;flex-shrink:0;z-index:1;border-radius:var(--Border-5);background:var(--Neutral-White, #fff);box-shadow:var(--Shadow-medium);border:none;appearance:none;padding:0}.dropi-carousel-nav:hover{background:var(--Gray-Gray-50)}.dropi-carousel-nav:disabled{opacity:0.4;cursor:not-allowed;box-shadow:none}.dropi-carousel-prev{margin-right:1rem}.dropi-carousel-next{margin-left:1rem}.dropi-carousel-indicators{display:flex;justify-content:center;gap:0.5rem;list-style:none;padding:1rem 0 0 0;margin:0}.dropi-carousel-indicators li{cursor:pointer}.dropi-carousel-indicators li button{width:1rem;height:1rem;border-radius:50%;border:1px solid var(--Gray-Gray-100, #eceef4);background:var(--Neutral-White, #fff);cursor:pointer;transition:all 0.2s;padding:0}.dropi-carousel-indicators li.active button{background:var(--Primary-Primary-500);border-color:var(--Primary-Primary-500)}.dropi-carousel-indicators li:hover button{background:var(--Gray-Gray-200)}.vertical .dropi-carousel-content{flex-direction:column}.vertical .dropi-carousel-items-container{flex-direction:column}.vertical .dropi-carousel-prev{margin:0 0 1rem 0}.vertical .dropi-carousel-next{margin:1rem 0 0 0}@media (max-width: 768px){.dropi-carousel-container{padding:0}.dropi-carousel-item{padding:0 0.25rem}}`;
 
@@ -47,6 +47,11 @@ const DropiCarousel = class {
         this.updateTransform();
     }
     componentWillLoad() {
+        if (!this.value || (Array.isArray(this.value) && this.value.length === 0)) {
+            const attrValue = this.el.getAttribute('value');
+            if (attrValue)
+                this.value = attrValue;
+        }
         this.handleValue(this.value);
         this.internalPage = this.page;
     }
@@ -132,7 +137,7 @@ const DropiCarousel = class {
         if (!items.length)
             return null;
         const itemFlexBasis = `${100 / this.numVisible}%`;
-        return (index.h("div", { class: { 'dropi-carousel-container': true, 'vertical': this.orientation === 'vertical' } }, index.h("div", { class: "dropi-carousel-content" }, this.showNavigators && items.length > this.numVisible && (index.h("button", { class: "dropi-carousel-nav dropi-carousel-prev", disabled: !this.circular && this.internalPage === 0, onClick: (e) => this.navBackward(e), "aria-label": "Anterior" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, index.h("path", { d: "M14.659 17.5a.833.833 0 0 1-.589-.244l-4.43-4.431a.833.833 0 0 1 0-1.178l4.43-4.431a.834.834 0 0 1 1.179 1.178L11.42 12.25l3.83 3.829a.833.833 0 0 1-.59 1.421Z", fill: "#475066" })))), index.h("div", { class: "dropi-carousel-items-content" }, index.h("div", { class: "dropi-carousel-items-container", ref: (el) => (this.itemsContainer = el), style: { transition: this.isAnimating ? 'transform 0.5s ease' : 'none' } }, items.map((item, i) => (index.h("div", { class: "dropi-carousel-item", style: { flex: `0 0 ${itemFlexBasis}` } }, typeof item === 'string' ? (index.h("img", { src: item, alt: `Slide ${i + 1}`, loading: "lazy" })) : (index.h("slot", { name: `item-${i}` }))))))), this.showNavigators && items.length > this.numVisible && (index.h("button", { class: "dropi-carousel-nav dropi-carousel-next", disabled: !this.circular && this.internalPage >= this.totalPages - 1, onClick: (e) => this.navForward(e), "aria-label": "Siguiente" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, index.h("path", { d: "M9.341 17.5a.833.833 0 0 0 .589-.244l4.43-4.431a.833.833 0 0 0 0-1.178l-4.43-4.431a.834.834 0 0 0-1.179 1.178l3.83 3.829-3.83 3.829a.833.833 0 0 0 .59 1.421Z", fill: "#475066" }))))), this.showIndicators && this.totalPages > 1 && (index.h("ul", { class: "dropi-carousel-indicators" }, Array.from({ length: this.totalPages }).map((_, i) => (index.h("li", { class: { active: i === this.internalPage }, onClick: () => this.onDotClick(i) }, index.h("button", { type: "button", "aria-label": `Página ${i + 1}` }))))))));
+        return (index.h("div", { class: { 'dropi-carousel-container': true, 'vertical': this.orientation === 'vertical' } }, index.h("div", { class: "dropi-carousel-content" }, this.showNavigators && items.length > this.numVisible && (index.h("button", { class: "dropi-carousel-nav dropi-carousel-prev", disabled: !this.circular && this.internalPage === 0, onClick: (e) => this.navBackward(e), "aria-label": "Anterior" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, index.h("path", { d: "M14.659 17.5a.833.833 0 0 1-.589-.244l-4.43-4.431a.833.833 0 0 1 0-1.178l4.43-4.431a.834.834 0 0 1 1.179 1.178L11.42 12.25l3.83 3.829a.833.833 0 0 1-.59 1.421Z", fill: "#475066" })))), index.h("div", { class: "dropi-carousel-items-content" }, index.h("div", { class: "dropi-carousel-items-container", ref: (el) => (this.itemsContainer = el), style: { transition: this.isAnimating ? 'transform 0.5s ease' : 'none' } }, items.map((item, i) => (index.h("div", { class: "dropi-carousel-item", style: { flex: `0 0 ${itemFlexBasis}` } }, typeof item === 'string' ? (index.h("img", { src: item, alt: `Slide ${i + 1}` })) : (index.h("slot", { name: `item-${i}` }))))))), this.showNavigators && items.length > this.numVisible && (index.h("button", { class: "dropi-carousel-nav dropi-carousel-next", disabled: !this.circular && this.internalPage >= this.totalPages - 1, onClick: (e) => this.navForward(e), "aria-label": "Siguiente" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, index.h("path", { d: "M9.341 17.5a.833.833 0 0 0 .589-.244l4.43-4.431a.833.833 0 0 0 0-1.178l-4.43-4.431a.834.834 0 0 0-1.179 1.178l3.83 3.829-3.83 3.829a.833.833 0 0 0 .59 1.421Z", fill: "#475066" }))))), this.showIndicators && this.totalPages > 1 && (index.h("ul", { class: "dropi-carousel-indicators" }, Array.from({ length: this.totalPages }).map((_, i) => (index.h("li", { class: { active: i === this.internalPage }, onClick: () => this.onDotClick(i) }, index.h("button", { type: "button", "aria-label": `Página ${i + 1}` }))))))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-077kM98l.js');
+var index = require('./index-C8kwDvpf.js');
 
 const dropiCheckboxSelectionListCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.csl__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)}.csl__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}.csl__clear{display:flex;background:none;border:none;padding:0;cursor:pointer}.csl__list{display:flex;flex-direction:column}.csl__item{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;border-radius:var(--Border-1, 4px);transition:background 0.15s}.csl__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.csl__icon{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0}.csl__label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);flex:1}.csl__empty{padding:var(--Size-4, 16px);text-align:center;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-400, #858ea6)}`;
 
@@ -54,10 +54,10 @@ const DropiCheckboxSelectionList = class {
     }
     render() {
         const items = this.filtered;
-        return (index.h("div", { key: 'd2375e280c0cf0f6d46430bd027a8d03b32cd433', class: "csl" }, this.showFilter && (index.h("div", { key: 'efbc85d0c1b331c25ffa95c26336fef280633eef', class: "csl__search" }, index.h("dropi-icon", { key: '2b428c87384af4d54cc081d63a1c78d480c006ee', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), index.h("input", { key: '3f8808e55a6dd9873e385b7046a56cc1121b77f7', class: "csl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
+        return (index.h("div", { key: 'a86957a361ddab935966496e85da0474d6c7618a', class: "csl" }, this.showFilter && (index.h("div", { key: 'c6e6d3c7386a788c0e3141ac77b78b597020e43d', class: "csl__search" }, index.h("dropi-icon", { key: '02b8bbc778c1811f65f4cd07bfd0618a0c647573', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), index.h("input", { key: '935768e39f732099837e2d3dc4791ab2f7f31273', class: "csl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
                 this.filterText = e.target.value;
                 this.onSearch.emit(this.filterText);
-            } }), this.filterText && (index.h("button", { key: '8460836fc527444f3f5a302f4b1856a1192882e2', class: "csl__clear", onClick: () => { this.filterText = ''; this.onSearch.emit(''); } }, index.h("dropi-icon", { key: '442b9249d97adca6b8fbaf066bee3b0f2a0217e7', name: "Close-small", width: "14px", height: "14px", color: "Gray-Gray-400" }))))), index.h("div", { key: 'e1599fca9f98199f7bb0671bcb7f71bddcd0c9df', class: "csl__list" }, items.length === 0 && this.showNotFound ? (index.h("div", { class: "csl__empty" }, this.notFoundMessage)) : (items.map(opt => {
+            } }), this.filterText && (index.h("button", { key: 'b93947ffd70113fc80e425dd0da04cce04ad3f27', class: "csl__clear", onClick: () => { this.filterText = ''; this.onSearch.emit(''); } }, index.h("dropi-icon", { key: 'b2e152f7276a914fc03664dabdb3574a2cbeb2c6', name: "Close-small", width: "14px", height: "14px", color: "Gray-Gray-400" }))))), index.h("div", { key: '6010ffc9d6ff60dc444da1274609f2b15f69d4a8', class: "csl__list" }, items.length === 0 && this.showNotFound ? (index.h("div", { class: "csl__empty" }, this.notFoundMessage)) : (items.map(opt => {
             const checked = this.selected.includes(opt.id);
             return (index.h("div", { class: "csl__item", key: opt.id, onClick: () => this.toggle(opt.id) }, index.h("dropi-checkbox", { checked: checked }), opt.icon && index.h("img", { class: "csl__icon", src: opt.icon, alt: opt.label }), index.h("span", { class: "csl__label" }, opt.label)));
         })))));

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-077kM98l.js');
+var index = require('./index-C8kwDvpf.js');
 
 const dropiCheckboxCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.container-dropi-checkbox{display:inline-block}.check{width:20px;height:20px;border-radius:var(--Border-1, 4px);cursor:pointer;transition:background-color 0.3s ease-in-out,     border-style 0.3s ease-in-out}.noCheck{border-style:solid;border-width:2px;border-color:var(--Gray-Gray-200, #c3c9d9);display:flex;justify-content:center;align-items:center}.noCheck svg{visibility:hidden}.isCheck{display:flex;background-color:var(--Primary-Primary-500, #f49a3d);justify-content:center;align-items:center}.disabled{background-color:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-100, #e6eaf2);cursor:not-allowed}`;
 
@@ -22,12 +22,12 @@ const DropiCheckbox = class {
         this.onChange.emit(this.checked);
     }
     render() {
-        return (index.h("div", { key: '2bf224c57c9b0b48d3d2a28f2cf52713b532110f', class: "container-dropi-checkbox", onClick: () => this.changeState() }, index.h("div", { key: '7dfbc936f1a6e641a3e18c9ffc769e8a25fd9328', class: {
+        return (index.h("div", { key: 'fdc1c54733617c0dab1ae11050d90650dc3eba91', class: "container-dropi-checkbox", onClick: () => this.changeState() }, index.h("div", { key: '6329c1a53e8b9f85ea26ca01afb920583570e85f', class: {
                 check: true,
                 isCheck: this.checked,
                 noCheck: !this.checked,
                 disabled: this.disabled,
-            } }, index.h("svg", { key: '647d2f6b000569906812f1bddbcc69198a2774cc', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, index.h("path", { key: '3bbf796769463ebad1e7710beadc0433816ce189', d: "M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z", fill: "#FFFFFF" })))));
+            } }, index.h("svg", { key: '50b1ebd160e1ee6b28ef23651f1e12afc9406f8a', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, index.h("path", { key: '518070eaa2902d4cdc5e905f8a80d06b3d044f3d', d: "M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z", fill: "#FFFFFF" })))));
     }
     static get formAssociated() { return true; }
 };

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-077kM98l.js');
+var index = require('./index-C8kwDvpf.js');
 
 const dropiChipsCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);height:24px;padding:0 var(--Size-2, 8px);border-radius:var(--Border-2, 8px);font-size:var(--font-size-xs, 10px);font-family:inherit;width:fit-content;max-width:200px}.chip--filters{background:var(--Primary-Primary-50, #fff5eb);border:1px solid var(--Primary-Primary-200, #fbd4a3);color:var(--Primary-Primary-600, #d4872e)}.chip--fill{background:var(--Gray-Gray-100, #e6eaf2);border:1px solid transparent;color:var(--Gray-Gray-700, #32394d)}.chip__avatar{width:16px;height:16px;border-radius:50%;object-fit:cover;flex-shrink:0}.chip__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.chip__close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:none;padding:0;cursor:pointer;color:inherit;opacity:0.7;transition:opacity 0.15s}.chip__close:hover{opacity:1}`;
 
@@ -22,7 +22,7 @@ const DropiChips = class {
     /** Emitted when the close icon is clicked */
     onClose;
     render() {
-        return (index.h("div", { key: '1efcba7f06d54e0f8953330a83d946362e8283a2', class: { 'chip': true, [`chip--${this.customStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (index.h("img", { key: '8b5b984cbd85afc86a23907b6cfb0a26b59c029c', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (index.h("dropi-icon", { key: '8e5c4ca10f94e012421d88b715aa2f49c6261c52', class: "chip__pre-icon", name: this.icon, width: "14px", height: "14px", color: "currentColor" })), index.h("span", { key: 'caf36314e2bd2704d7ef11e9b75ce5e5def1c2d4', class: "chip__text" }, index.h("slot", { key: 'de0b015d547872891baefcca9c9cd5c07893e844' })), this.showIcon && (index.h("button", { key: 'd9998ff121304a99b772e5af04006f90db1c2958', class: "chip__close", onClick: () => this.onClose.emit(), "aria-label": "Eliminar" }, index.h("dropi-icon", { key: '08491f358bec0380a8ff4ee95bd2d823922a0c68', name: "Cross-circle", width: "14px", height: "14px", color: "currentColor" })))));
+        return (index.h("div", { key: '1d2faf302cc3eb832d55f46f98a7817fb616e4e1', class: { 'chip': true, [`chip--${this.customStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (index.h("img", { key: '3014d189c71a8d3bc23f11caf1181285c6b1b0ed', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (index.h("dropi-icon", { key: '42c60e26f35e08582045833049d140c3aceaa11d', class: "chip__pre-icon", name: this.icon, width: "14px", height: "14px", color: "currentColor" })), index.h("span", { key: '474a4adfc086e20b2007f1b423f53b29454546be', class: "chip__text" }, index.h("slot", { key: '3c3460ffc17a54b8446b63f7b7c7a76162bb5838' })), this.showIcon && (index.h("button", { key: '6da5b10c81f203dcd204c0fa93babbcab8aaba16', class: "chip__close", onClick: () => this.onClose.emit(), "aria-label": "Eliminar" }, index.h("dropi-icon", { key: '14ef2e91ede7847830b0e491fd844f9efa637f9a', name: "Cross-circle", width: "14px", height: "14px", color: "currentColor" })))));
     }
 };
 DropiChips.style = dropiChipsCss();

package/dist/cjs/dropi-city-selector.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-077kM98l.js');
+var index = require('./index-C8kwDvpf.js');
 
 const dropiCitySelectorCss = () => `:host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.city-selector{position:relative;width:100%}.selector-trigger{width:100%;min-height:44px;padding:6px 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;text-align:left;font-family:inherit;transition:border-color 0.15s}.selector-trigger:hover:not(:disabled){border-color:var(--Gray-Gray-300, #a3abbf)}.selector-trigger:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.city-selector--disabled .selector-trigger{background:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-100, #e6eaf2);cursor:not-allowed;opacity:0.6}.chips-area{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-height:26px;align-items:center}.placeholder{color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 14px)}.chip{display:inline-flex;align-items:center;gap:4px;background:var(--Primary-Primary-50, #fff8f0);border:1px solid var(--Primary-Primary-200, #fcd5a8);border-radius:var(--Border-1, 4px);padding:2px 6px;font-size:var(--font-size-xs, 12px);color:var(--Primary-Primary-700, #b85c00)}.chip-remove{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);box-shadow:0 8px 24px rgba(0, 0, 0, 0.10);z-index:200;overflow:hidden}.search-wrap{padding:10px 12px;border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2)}.search-field{position:relative;display:flex;align-items:center}.search-input{width:100%;height:36px;padding:0 36px 0 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);font-size:var(--font-size-s, 14px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:var(--Gray-Gray-50, #f7f8fa);outline:none;transition:border-color 0.15s}.search-input:focus{border-color:var(--Info-Info-500, #50a5f1);background:var(--Neutral-White, #ffffff)}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-icon{position:absolute;right:10px;display:flex;align-items:center;pointer-events:none}.options-list{max-height:280px;overflow-y:auto;background:var(--Neutral-White, #ffffff)}.options-list::-webkit-scrollbar{width:6px}.options-list::-webkit-scrollbar-track{background:transparent}.options-list::-webkit-scrollbar-thumb{background:var(--Gray-Gray-200, #c3c9d9);border-radius:4px}.group-label{padding:14px 16px 8px;font-size:var(--font-size-m, 16px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1f2433);background:var(--Neutral-White, #ffffff)}.city-option{padding:10px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;font-size:var(--font-size-s, 14px);color:var(--Gray-Gray-700, #32394d);background:var(--Neutral-White, #ffffff);transition:background 0.1s;user-select:none}.city-option:hover{background:var(--Gray-Gray-50, #f7f8fa)}.city-option--selected .city-label{color:var(--Gray-Gray-800, #1f2433);font-weight:var(--font-weight-medium, 500)}.checkbox{width:22px;height:22px;border:1.5px solid var(--Gray-Gray-300, #c3c9d9);border-radius:var(--Border-1, 6px);background:var(--Neutral-White, #ffffff);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color 0.15s, background 0.15s}.checkbox--checked{border-color:var(--Primary-Primary-500, #f49a3d);background:var(--Primary-Primary-500, #f49a3d)}.city-label{flex:1}.no-results{padding:20px 16px;text-align:center;color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 14px)}`;
 
@@ -30,9 +30,17 @@ const DropiCitySelector = class {
         }
     }
     optionsChanged(val) {
+        if (val == null) {
+            this.parsedOptions = [];
+            return;
+        }
         this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : val;
     }
     selectedChanged(val) {
+        if (val == null) {
+            this.selected = [];
+            return;
+        }
         this.selected = typeof val === 'string' ? JSON.parse(val) : [...val];
     }
     componentWillLoad() {
@@ -77,7 +85,7 @@ const DropiCitySelector = class {
     }
     render() {
         const groups = this.filtered;
-        return (index.h("div", { key: 'af6acd88ea001105c036726bed11e0caa6012f10', class: { 'city-selector': true, 'city-selector--disabled': this.disabled } }, index.h("button", { key: '4a5c368ddea3f43ef9ef42dc68f28b47b642aadb', type: "button", class: "selector-trigger", disabled: this.disabled, onClick: () => this.toggle(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, index.h("div", { key: '769288d6567d2f6d453b81198e3ab456c5042443', class: "chips-area" }, this.selected.length === 0 && (index.h("span", { key: '152b570fd02028d8e1788ced03d56f3853dd98d4', class: "placeholder" }, this.placeholder)), this.selected.map(val => (index.h("span", { class: "chip", key: String(val) }, this.getLabel(val), index.h("button", { type: "button", class: "chip-remove", "aria-label": "Quitar", onClick: (e) => this.removeCity(val, e) }, index.h("dropi-icon", { name: "Close-small", width: "10px", height: "10px", color: "Primary-Primary-500" })))))), index.h("dropi-icon", { key: '806ec368945b587fcb9125ca3a262ff2c6f9247c', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', width: "16px", height: "16px", color: "Gray-Gray-500" })), this.isOpen && (index.h("div", { key: '1249ca520defb5fd21d5c5da098c93c3e66bebd3', class: "dropdown", role: "listbox" }, index.h("div", { key: '244a7a22db381014da6672e310f2d21a9cf39a63', class: "search-wrap" }, index.h("div", { key: '871a48407ec66d7e9e95a9ab32ff8d74842a4e6e', class: "search-field" }, index.h("input", { key: '20d5543bae44e70fc4fd61470cae413f29c17687', class: "search-input", type: "text", placeholder: "Buscar...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; }, autoComplete: "off" }), index.h("span", { key: '44bde8e0ddb6cbade01e4743c9d111fa7c65aa94', class: "search-icon" }, index.h("dropi-icon", { key: 'c577e87fd8ffd3d4d444541840a139430c96e503', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" })))), index.h("div", { key: 'c7abe328e26838d49465d3b2767a2b90806e0e05', class: "options-list" }, groups.length === 0 && (index.h("div", { key: '1f583667dda2e6540254b3155029c97647cb58fb', class: "no-results" }, "Sin resultados")), groups.map(group => (index.h("div", { key: group.value, class: "group" }, index.h("div", { class: "group-label" }, group.label), group.items.map(city => {
+        return (index.h("div", { key: '5b1e27677c34d0dc85dc9c8544e4b0ba9a66216b', class: { 'city-selector': true, 'city-selector--disabled': this.disabled } }, index.h("button", { key: 'e359c1baff0a255cd396ee35836430486bc67cd3', type: "button", class: "selector-trigger", disabled: this.disabled, onClick: () => this.toggle(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, index.h("div", { key: '082246999f826e8cfe1b2d09fd801a5d7db7e1b2', class: "chips-area" }, this.selected.length === 0 && (index.h("span", { key: '90453c84cae3561412f795ec1ffc01923cd87040', class: "placeholder" }, this.placeholder)), this.selected.map(val => (index.h("span", { class: "chip", key: String(val) }, this.getLabel(val), index.h("button", { type: "button", class: "chip-remove", "aria-label": "Quitar", onClick: (e) => this.removeCity(val, e) }, index.h("dropi-icon", { name: "Close-small", width: "10px", height: "10px", color: "Primary-Primary-500" })))))), index.h("dropi-icon", { key: '27f05e3fcf08bdb4e83ee52f7bba02a5c87f2d3e', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', width: "16px", height: "16px", color: "Gray-Gray-500" })), this.isOpen && (index.h("div", { key: '2fd2d164c186d9d4d1f6664e531449373dfce023', class: "dropdown", role: "listbox" }, index.h("div", { key: 'e6fb9fc7938296d696598e2984167cec5d693b07', class: "search-wrap" }, index.h("div", { key: '9a56582e19bf264065bb11e9bccdf3179e56fb7b', class: "search-field" }, index.h("input", { key: '9228debd9abc4e2a884006bd45046e8e5b3cce25', class: "search-input", type: "text", placeholder: "Buscar...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; }, autoComplete: "off" }), index.h("span", { key: '609751d699dc6227347ec565ff14c3f35fa9a6cf', class: "search-icon" }, index.h("dropi-icon", { key: 'fcacc7c73eeb3f2dc27f83f9dfcbe2476b85136e', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" })))), index.h("div", { key: 'c71c2b0303f37169ee221387aeec6ceea499b8e1', class: "options-list" }, groups.length === 0 && (index.h("div", { key: 'a5525ef28be665b337658032318507ae01f69a0d', class: "no-results" }, "Sin resultados")), groups.map(group => (index.h("div", { key: group.value, class: "group" }, index.h("div", { class: "group-label" }, group.label), group.items.map(city => {
             const isSelected = this.selected.includes(city.value);
             return (index.h("div", { key: String(city.value), class: { 'city-option': true, 'city-option--selected': isSelected }, onClick: (e) => this.toggleCity(city.value, e), role: "option", "aria-selected": isSelected }, index.h("span", { class: { 'checkbox': true, 'checkbox--checked': isSelected } }, isSelected && (index.h("dropi-icon", { name: "Check", width: "10px", height: "10px", color: "Neutral-White" }))), index.h("span", { class: "city-label" }, city.label)));
         })))))))));