@dropi/ui 0.1.18 → 0.1.20

package/dist/dropi-ui/p-e4b7e15f.entry.js

@@ -0,0 +1 @@
+import{r as a,c as t,h as e}from"./p-Tbza12Gt.js";const r=class{constructor(e){a(this,e),this.dropiTabChange=t(this,"dropiTabChange",7)}tabs=[];activeTab=0;showIcon=!1;dropiTabChange;parsedTabs=[];tabsChanged(a){this.parsedTabs="string"==typeof a?JSON.parse(a):a??[]}componentWillLoad(){this.tabsChanged(this.tabs)}handleClick(a){a.disabled||(this.activeTab=a.id,this.dropiTabChange.emit(a))}render(){return e("div",{key:"9db1e2f4fdd15fc4ea4407d83fe33c562270acec",class:"tabs-container",role:"tablist"},this.parsedTabs.map((a=>{const t=a.id===this.activeTab;return e("div",{role:"tab","aria-selected":String(t),class:{"tab-item":!0,"tab-item--active":t&&!a.disabled,"tab-item--disabled":!!a.disabled},onClick:()=>this.handleClick(a)},e("span",{class:"tab-label-row"},e("span",{class:"tab-label"},a.label),null!=a.counter&&e("span",{class:{"tab-counter":!0,"tab-counter--active":t}},a.counter)),this.showIcon&&(a.completed?e("dropi-icon",{name:"Check-circle",width:"12px",height:"12px",color:"Success-Success-500"}):e("span",{class:"tab-status-dot"})))})))}static get watchers(){return{tabs:[{tabsChanged:0}]}}};r.style=":host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.tabs-container{display:flex;flex-wrap:nowrap;overflow-x:auto;width:100%;height:52px;scrollbar-width:none}.tabs-container::-webkit-scrollbar{width:0;height:0}.tab-item{padding:var(--Size-4,16px) var(--Size-5,20px);background:var(--Neutral-White,#fff);border-bottom:2px solid var(--Gray-Gray-100,#e6eaf2);cursor:pointer;display:flex;gap:16px;align-items:center;white-space:nowrap;flex-shrink:0;transition:border-color 0.15s ease;user-select:none}.tab-item:hover:not(.tab-item--disabled):not(.tab-item--active){border-color:var(--Gray-Gray-300,#a3abbf)}.tab-item--active{border-bottom:2px solid var(--Primary-Primary-500,#f49a3d)}.tab-item--disabled{background:rgba(223,228,237,0.22);cursor:not-allowed;opacity:0.7;pointer-events:none}.tab-label-row{display:flex;align-items:center;gap:8px}.tab-label{font-size:var(--font-size-m,14px);font-weight:var(--font-weight-bold,700);color:var(--Gray-Gray-400,#858ea6);line-height:20px}.tab-item--active .tab-label{color:var(--Gray-Gray-600,#475066)}.tab-item--disabled .tab-label{font-weight:300;color:var(--Gray-Gray-300,#a3abbf)}.tab-counter{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:20px;font-size:var(--font-size-xs,10px);font-weight:var(--font-weight-medium,500);background:var(--Gray-Gray-100,#e6eaf2);color:var(--Gray-Gray-500,#69738c)}.tab-counter--active{background:var(--Primary-Primary-100,#fde8d0);color:var(--Primary-Primary-500,#f49a3d)}.tab-status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--Primary-Primary-500, #f49a3d);flex-shrink:0}";export{r as dropi_tabs}

package/dist/dropi-ui/{p-b0d3442e.entry.js → p-e7f4ed25.entry.js}

@@ -1 +1 @@
-import{r as e,h as i}from"./p-Twbb5MNM.js";const s=class{constructor(i){e(this,i)}variant="text";width="100%";height="16px";borderRadius="";lines=1;getRadius(){return this.borderRadius?this.borderRadius:"circle"===this.variant?"50%":"text"===this.variant?"4px":"var(--Border-1, 4px)"}render(){return"text"===this.variant&&this.lines>1?i("div",{class:"skeleton-lines"},Array.from({length:this.lines}).map(((e,s)=>i("div",{class:"skeleton",style:{width:s===this.lines-1?"70%":this.width,height:this.height,borderRadius:this.getRadius()}})))):i("div",{class:"skeleton",style:{width:this.width,height:this.height,borderRadius:this.getRadius()}})}};s.style=":host{display:block}*,*::before,*::after{box-sizing:border-box}.skeleton-lines{display:flex;flex-direction:column;gap:8px}.skeleton{background:linear-gradient(     90deg,     var(--Gray-Gray-100, #e6eaf2) 25%,     var(--Gray-Gray-50, #f7f8fa) 50%,     var(--Gray-Gray-100, #e6eaf2) 75%   );background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}";export{s as dropi_skeleton}
+import{r as e,h as i}from"./p-Tbza12Gt.js";const s=class{constructor(i){e(this,i)}variant="text";width="100%";height="16px";borderRadius="";lines=1;getRadius(){return this.borderRadius?this.borderRadius:"circle"===this.variant?"50%":"text"===this.variant?"4px":"var(--Border-1, 4px)"}render(){return"text"===this.variant&&this.lines>1?i("div",{class:"skeleton-lines"},Array.from({length:this.lines}).map(((e,s)=>i("div",{class:"skeleton",style:{width:s===this.lines-1?"70%":this.width,height:this.height,borderRadius:this.getRadius()}})))):i("div",{class:"skeleton",style:{width:this.width,height:this.height,borderRadius:this.getRadius()}})}};s.style=":host{display:block}*,*::before,*::after{box-sizing:border-box}.skeleton-lines{display:flex;flex-direction:column;gap:8px}.skeleton{background:linear-gradient(     90deg,     var(--Gray-Gray-100, #e6eaf2) 25%,     var(--Gray-Gray-50, #f7f8fa) 50%,     var(--Gray-Gray-100, #e6eaf2) 75%   );background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}";export{s as dropi_skeleton}

package/dist/dropi-ui/p-f1d69b15.entry.js

@@ -0,0 +1 @@
+import{r,c as a,h as e}from"./p-Tbza12Gt.js";const t={success:"Check-circle",error:"Warning-circle",warning:"Warning-triangle",info:"Info"},i={success:"Success-Success-500",error:"Error-Error-500",warning:"Warning-Warning-500",info:"Info-Info-500"},o=class{constructor(e){r(this,e),this.dropiClose=a(this,"dropiClose",7),this.dropiButtonClick=a(this,"dropiButtonClick",7),this.dropiLinkClick=a(this,"dropiLinkClick",7)}message="";type="default";state="info";dismissable=!1;showButton=!1;buttonText="";anchorText="";anchorUrl="";showAlert=!0;dropiClose;dropiButtonClick;dropiLinkClick;render(){return this.showAlert?e("div",{class:{alert:!0,[`alert--${this.type}`]:!0,[`alert--${this.state}`]:!0}},"flag"!==this.type&&e("div",{class:"alert__icon"},e("dropi-icon",{name:t[this.state],width:"18px",height:"18px",color:i[this.state]})),e("div",{class:"alert__body"},e("span",{class:"alert__message"},this.message),this.anchorText&&e("a",{class:"alert__link",href:this.anchorUrl||"#",onClick:r=>{r.preventDefault(),this.dropiLinkClick.emit()}},this.anchorText)),e("div",{class:"alert__actions"},this.showButton&&this.buttonText&&"flag"!==this.type&&e("button",{class:"alert__btn",onClick:()=>this.dropiButtonClick.emit()},this.buttonText),this.dismissable&&e("button",{class:"alert__close",onClick:()=>{this.showAlert=!1,this.dropiClose.emit()},"aria-label":"Cerrar"},e("dropi-icon",{name:"Close-small",width:"18px",height:"18px",color:"Gray-Gray-500"})))):null}};o.style=":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:12px;font-weight:400}.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:14px;color:var(--Gray-600, #475066);font-weight:500;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, #fff)}.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}";export{o as dropi_alert}

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

@@ -1,11 +1,11 @@
-import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.js';
+import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
 
 const dropiAccordionCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.accordion{border:1px solid var(--Gray-Gray-100,#e6eaf2);border-radius:var(--Border-2,8px);background:var(--Neutral-White,#fff);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,14px);font-weight:var(--font-weight-bold,700);color:var(--Gray-Gray-700,#32394d);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}`;
 
 const DropiAccordion = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiToggle = createEvent(this, "dropiToggle");
+        this.dropiToggle = createEvent(this, "dropiToggle", 7);
     }
     /** Title shown in the header button */
     header = '';
@@ -38,7 +38,7 @@ const DropiAccordion = class {
         setTimeout(() => this.updateHeight(this.open), 0);
     }
     render() {
-        return (h("div", { key: '4da35da859fc9fdb7c874c026ef1178c93b7bfd5', class: { 'accordion': true, 'accordion--open': this.open, 'accordion--disabled': this.disabled } }, h("button", { key: '77af39a3e990b23b5e185fa99176dadce219a911', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, h("span", { key: 'cda6c545f4d8342a5e9604245b102defe88be227', class: "accordion-header-left" }, this.preIcon && h("dropi-icon", { key: 'b73a39adc40193ae93b235ad5a4169a6ec4caa16', name: this.preIcon, width: "20px", height: "20px", color: "Gray-Gray-600" }), h("span", { key: 'd7c4543d5c5580ce421deeca47752c850918efd2', class: "accordion-title" }, this.header)), h("span", { key: '9e8884a62c4f9a20e6e15ee69499990db9ded865', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, h("dropi-icon", { key: 'a4eb14dc1f0ac9c45865e8ee69cf698e1a5c50a7', name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))), h("div", { key: 'a23b40bb950b86dafca96851319aee3c8bb6656e', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, h("div", { key: 'bf69ecafa7d59d776d38c55df10fa25d84d2152a', class: "accordion-content" }, h("slot", { key: 'bcb928fd4551e65b9e286770979e2e67ff9fb1aa' })))));
+        return (h("div", { key: '833499ceed32f31227940efdea0250074a26dad4', class: { 'accordion': true, 'accordion--open': this.open, 'accordion--disabled': this.disabled } }, h("button", { key: '067856e0af05669e75197e0e38b4e165166e2125', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, h("span", { key: 'ee22e3b4251cad0c03143d7fd512f6b43b25080c', class: "accordion-header-left" }, this.preIcon && h("dropi-icon", { key: '935d87ddcd347ffb910c8093c164c768ddc85cad', name: this.preIcon, width: "20px", height: "20px", color: "Gray-Gray-600" }), h("span", { key: '88d229607eca9d6d538c620dab8040d6ebbc304f', class: "accordion-title" }, this.header)), h("span", { key: '5d29cc7263bb56c5da1455f57ef3000e375489c8', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, h("dropi-icon", { key: 'c179d4d5db7fb988d9b6f41430d27e93ad36e7e4', name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))), h("div", { key: '60052ec92c3659b1ab87358ec264d38faf2ed389', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, h("div", { key: '3565ad511fcfa017bb264a2829ee54ee6d0d7d96', class: "accordion-content" }, h("slot", { key: '1c2c4cab25bcbdf15cdd2ed699710f09dcbbbb74' })))));
     }
     static get watchers() { return {
         "open": [{

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

@@ -0,0 +1,70 @@
+import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+
+const dropiAlertModalCss = () => `:host{display:contents}.body-alert{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-3, 12px);padding:0;overflow:hidden;width:100%;text-align:center !important}.lottie-img{display:flex;align-items:center;justify-content:center;min-height:100px;width:120px;margin-top:-8px;margin-bottom:var(--Size-2, 8px)}.lottie-img--loading{min-height:160px;width:100%}.content-alert{text-align:center;width:100%}.content-alert h2{color:var(--Gray-Gray-700, #32394d);font-size:var(--Size-5, 24px);font-weight:700;margin:0 0 var(--Size-2, 8px);text-align:center !important}.content-alert p{color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 14px);margin:0;text-align:center !important;overflow-wrap:anywhere;max-height:100px;overflow:auto}.actions{display:flex;gap:12px;width:100%;margin-top:var(--Size-4, 16px)}.actions dropi-button{flex:1;display:flex}@media (max-width: 768px){.actions{flex-direction:column}}`;
+
+const DropiAlertModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiPrimary = createEvent(this, "dropiPrimary", 7);
+        this.dropiSecondary = createEvent(this, "dropiSecondary", 7);
+        this.dropiHide = createEvent(this, "dropiHide", 7);
+    }
+    /** Controls visibility */
+    visible = false;
+    /** Modal type — determines Lottie animation */
+    type = 'question';
+    /** Bold title */
+    alertTitle = '';
+    /** Body message */
+    message = '';
+    /** Primary button label */
+    primaryButton = 'Aceptar';
+    /** Secondary button label (hidden if empty) */
+    secondaryButton = '';
+    /** Show loading state with loading.json Lottie */
+    loading = false;
+    /** Show close icon in header */
+    closable = false;
+    /** Hide action buttons */
+    displayButtons = true;
+    /** Loading title */
+    loadingTitle = 'Cargando';
+    /** Loading message */
+    loadingMessage = 'Por favor espera un momento';
+    /** Emitted when primary button is clicked */
+    dropiPrimary;
+    /** Emitted when secondary button is clicked */
+    dropiSecondary;
+    /** Emitted when modal is hidden */
+    dropiHide;
+    lottieMap = {
+        question: '/assets/lottie-files/question.json',
+        warning: '/assets/lottie-files/warning.json',
+        success: '/assets/lottie-files/success.json',
+        error: '/assets/lottie-files/failure.json',
+        loading: '/assets/lottie-files/loading.json',
+    };
+    async show() { this.visible = true; }
+    async hide() { this.visible = false; }
+    handlePrimary() {
+        this.dropiPrimary.emit();
+        this.visible = false;
+    }
+    handleSecondary() {
+        this.dropiSecondary.emit();
+        this.visible = false;
+    }
+    onModalHide() {
+        this.visible = false;
+        this.dropiHide.emit();
+    }
+    render() {
+        const lottieKey = this.loading ? 'loading' : this.type;
+        const lottieSize = this.loading ? '300px' : '120px';
+        console.log('[DropiAlertModal] type:', this.type, 'lottieKey:', lottieKey, 'src:', this.lottieMap[lottieKey]);
+        return (h("dropi-modal", { key: '4038a17b3572d834f6eb015ad1ece188735d5f74', visible: this.visible, showHeader: this.closable, showCloseIcon: this.closable, dismissable: false, closeOnEscape: false, size: "s", onDropiHide: () => this.onModalHide() }, h("div", { key: '89a8709256c27102bde8ac25a387dc90f3f61ed4', class: `body-alert${this.loading ? ' is-loading' : ''}` }, this.lottieMap[lottieKey] && (h("div", { key: '5bf98eb48cd930bfa8fe4b94077753031830de6b', class: `lottie-img${this.loading ? ' lottie-img--loading' : ''}` }, h("dotlottie-player", { key: lottieKey, src: this.lottieMap[lottieKey], background: "transparent", speed: "1", style: { width: lottieSize, height: 'auto' }, loop: true, autoplay: true }))), h("div", { key: 'a2c9cd8f737ea3584a6706b0e92270893b592870', class: "content-alert" }, h("h2", { key: '2cd2e5567910995c62eeb64e60c13ed40fdd14a1' }, this.loading ? this.loadingTitle : this.alertTitle), h("p", { key: 'c6baa31f8f6bbbeb2b1f514e3584d61a50616096' }, this.loading ? this.loadingMessage : this.message)), !this.loading && this.displayButtons && (h("div", { key: '7bc16afdb60ea6549fa5dff250a0146141a5715d', class: "actions" }, this.secondaryButton && (h("dropi-button", { key: '8b289d9bf39622340ad2cae9ab21457a948c4843', text: this.secondaryButton, severity: "secondary", onDropiClick: () => this.handleSecondary(), fullWidth: true })), h("dropi-button", { key: 'f87a1a80be2e72b26ddeac81d5f7638f40ddd8f7', text: this.primaryButton, severity: "primary", onDropiClick: () => this.handlePrimary(), fullWidth: true }))))));
+    }
+};
+DropiAlertModal.style = dropiAlertModalCss();
+
+export { DropiAlertModal as dropi_alert_modal };

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

@@ -0,0 +1,56 @@
+import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.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:12px;font-weight:400}.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:14px;color:var(--Gray-600, #475066);font-weight:500;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, #fff)}.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',
+    error: 'Warning-circle',
+    warning: 'Warning-triangle',
+    info: 'Info',
+};
+const STATE_COLORS = {
+    success: 'Success-Success-500',
+    error: 'Error-Error-500',
+    warning: 'Warning-Warning-500',
+    info: 'Info-Info-500',
+};
+const DropiAlert = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiClose = createEvent(this, "dropiClose", 7);
+        this.dropiButtonClick = createEvent(this, "dropiButtonClick", 7);
+        this.dropiLinkClick = createEvent(this, "dropiLinkClick", 7);
+    }
+    /** Alert message text (supports plain text) */
+    message = '';
+    /** Layout type: default (inline) | flag (accented left border) */
+    type = 'default';
+    /** Semantic state */
+    state = 'info';
+    /** Show the × close button */
+    dismissable = false;
+    /** Show action button */
+    showButton = false;
+    /** Action button label */
+    buttonText = '';
+    /** Anchor/link label */
+    anchorText = '';
+    /** Anchor href */
+    anchorUrl = '';
+    /** Whether the alert is visible */
+    showAlert = true;
+    /** Emitted when the alert is dismissed */
+    dropiClose;
+    /** Emitted when the action button is clicked */
+    dropiButtonClick;
+    /** Emitted when the anchor link is clicked */
+    dropiLinkClick;
+    render() {
+        if (!this.showAlert)
+            return null;
+        return (h("div", { class: { 'alert': true, [`alert--${this.type}`]: true, [`alert--${this.state}`]: true } }, this.type !== 'flag' && (h("div", { class: "alert__icon" }, h("dropi-icon", { name: STATE_ICONS[this.state], width: "18px", height: "18px", color: STATE_COLORS[this.state] }))), h("div", { class: "alert__body" }, h("span", { class: "alert__message" }, this.message), this.anchorText && (h("a", { class: "alert__link", href: this.anchorUrl || '#', onClick: (e) => { e.preventDefault(); this.dropiLinkClick.emit(); } }, this.anchorText))), h("div", { class: "alert__actions" }, this.showButton && this.buttonText && this.type !== 'flag' && (h("button", { class: "alert__btn", onClick: () => this.dropiButtonClick.emit() }, this.buttonText)), this.dismissable && (h("button", { class: "alert__close", onClick: () => { this.showAlert = false; this.dropiClose.emit(); }, "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-small", width: "18px", height: "18px", color: "Gray-Gray-500" }))))));
+    }
+};
+DropiAlert.style = dropiAlertCss();
+
+export { DropiAlert as dropi_alert };

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

@@ -0,0 +1,29 @@
+import { r as registerInstance, h } from './index-Tbza12Gt.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}`;
+
+const FALLBACK = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9IiNlNmVhZjIiLz48Y2lyY2xlIGN4PSIxOCIgY3k9IjE0IiByPSI2IiBmaWxsPSIjODU4ZWE2Ii8+PHBhdGggZD0iTTYgMzJjMC04IDI0LTggMjQgMCIgZmlsbD0iIzg1OGVhNiIvPjwvc3ZnPg==`;
+const DropiAvatars = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Image URL */
+    image = '';
+    /** Alt text for the image */
+    alt = 'avatar';
+    /** Size/context variant */
+    type = 'users';
+    /** Initials to show when no image (max 2 chars) */
+    initials = '';
+    handleError(e) {
+        e.target.src = FALLBACK;
+    }
+    render() {
+        const displayInitials = this.initials?.slice(0, 2).toUpperCase();
+        const showInitials = !this.image && displayInitials;
+        return (h("figure", { key: '207390b678faada7a5c276b23246573b04c0416c', class: { 'avatar': true, [`avatar--${this.type}`]: true } }, showInitials ? (h("div", { class: "avatar__initials" }, displayInitials)) : (h("img", { src: this.image || FALLBACK, alt: this.alt, onError: (e) => this.handleError(e) }))));
+    }
+};
+DropiAvatars.style = dropiAvatarsCss();
+
+export { DropiAvatars as dropi_avatars };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-Twbb5MNM.js';
+import { r as registerInstance, h } from './index-Tbza12Gt.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:500;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)}`;
 
@@ -27,7 +27,7 @@ const DropiBadge = class {
         return null;
     }
     render() {
-        return (h("div", { key: 'b66590d82d7dd760badcfb76c72eb3d589073721', class: `tag-state ${this.state}` }, this.renderIcon(), h("p", { key: '82ae7072f3ac6d96ed02db8289f0f98f070a882d' }, this.stateText[this.state])));
+        return (h("div", { key: '5fe86b98326a2bc1b6916421ff51204fe307e7b7', class: `tag-state ${this.state}` }, this.renderIcon(), h("p", { key: '887a979f44c1128a3e78f01be2f20750aab9b276' }, this.stateText[this.state])));
     }
 };
 DropiBadge.style = dropiBadgeCss();

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

@@ -0,0 +1,45 @@
+import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.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)}`;
+
+const DropiBannerExternal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiBannerClick = createEvent(this, "dropiBannerClick", 7);
+        this.dropiBannerClose = createEvent(this, "dropiBannerClose", 7);
+    }
+    /** Image URL to display */
+    imageUrl = '';
+    /** Optional click-through URL */
+    link = '';
+    /** Alt text for the image */
+    alt = '';
+    /** Background color behind the image */
+    backgroundColor = 'transparent';
+    closed = false;
+    /** Emitted when the banner is clicked (only when no link is set) */
+    dropiBannerClick;
+    /** Emitted when the close button is clicked */
+    dropiBannerClose;
+    handleClick(e) {
+        if (!this.link) {
+            e.preventDefault();
+            this.dropiBannerClick.emit();
+        }
+    }
+    closeBanner(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.closed = true;
+        this.dropiBannerClose.emit();
+    }
+    render() {
+        if (this.closed || !this.imageUrl)
+            return null;
+        const inner = (h("div", { class: "inner" }, h("img", { src: this.imageUrl, alt: this.alt, loading: "lazy" }), h("button", { class: "close-btn", "aria-label": "Cerrar banner", onClick: (e) => this.closeBanner(e) }, h("dropi-icon", { name: "Close-small", width: "20px", height: "20px", color: "Gray-Gray-600" }))));
+        return (h("div", { class: "dropi-banner-external", style: { background: this.backgroundColor } }, this.link ? (h("a", { href: this.link, target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.handleClick(e) }, inner)) : (h("div", { class: "click-wrapper", onClick: (e) => this.handleClick(e) }, inner))));
+    }
+};
+DropiBannerExternal.style = dropiBannerExternalCss();
+
+export { DropiBannerExternal as dropi_banner_external };

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

@@ -0,0 +1,46 @@
+import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.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)}`;
+
+const DropiBreadcrumb = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiNavigate = createEvent(this, "dropiNavigate", 7);
+    }
+    /** Breadcrumb items (array or JSON string). Last item is rendered as current. */
+    items = [];
+    /** Home link href */
+    homeRoute = '/';
+    /** dropi-icon name for home */
+    homeIconName = 'Home';
+    /** Whether the last item is also clickable */
+    lastItemClickable = false;
+    /** Emitted when any item or home is clicked. Detail is the item or homeRoute string. */
+    dropiNavigate;
+    get parsedItems() {
+        if (typeof this.items === 'string') {
+            try {
+                return JSON.parse(this.items);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.items;
+    }
+    render() {
+        const items = this.parsedItems;
+        return (h("nav", { key: '03396956a168feaa860265e9962d9c5cbca8b23f', class: "breadcrumb", "aria-label": "Breadcrumb" }, h("div", { key: '88e05f4ea225b26a9686bc9f1a01e8e3710806dc', class: "crumb-list" }, h("div", { key: '54e0dfc3bbef05a3041d187cd9ec0536f69c34e3', class: "crumb-home" }, h("a", { key: '31c971efc13b5122ff2775ee2f79b25c06a01b0f', href: this.homeRoute, class: "home-link", "aria-label": "Inicio", onClick: (e) => { e.preventDefault(); this.dropiNavigate.emit(this.homeRoute); } }, h("dropi-icon", { key: '8a436c3d254884e4479713a9c6981929bb91df55', name: this.homeIconName, width: "16px", color: "Gray-Gray-500" })), items.length > 0 && (h("dropi-icon", { key: 'f57beceaa6dab5ed00a2c1c38ff43ea6bce040f5', 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 (h("div", { class: "crumb", key: idx }, (!isLast || this.lastItemClickable) ? (h("a", { class: `crumb-link Body-S-Regular${item.disabled ? ' disabled' : ''}`, href: href, onClick: (e) => {
+                    e.preventDefault();
+                    if (!item.disabled)
+                        this.dropiNavigate.emit(item);
+                } }, item.label)) : (h("span", { class: "current Body-S-Regular", "aria-current": "page" }, item.label)), !isLast && (h("dropi-icon", { name: "Dropdown-Right", width: "16px", height: "16px", color: "Gray-Gray-500" }))));
+        }))));
+    }
+};
+DropiBreadcrumb.style = dropiBreadcrumbCss();
+
+export { DropiBreadcrumb as dropi_breadcrumb };

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

@@ -1,11 +1,11 @@
-import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.js';
+import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
 
-const dropiButtonCss = () => `:host{display:inline-block}:host([full-width]){display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.btn{all:unset;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:center;gap:var(--Size-1, 4px);border-radius:var(--Border-2, 8px);font-weight:700;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(--Size-3, 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, #fff)}.btn.primary.default:hover{background:var(--Primary-Primary-600, #e58017)}.btn.primary.success{background:var(--Success-Success-500, #0abb87);color:var(--Neutral-White, #fff)}.btn.primary.success:hover{background:var(--Success-Success-600, #09aa7b)}.btn.primary.info{background:var(--Info-Info-500, #50a5f1);color:var(--Neutral-White, #fff)}.btn.primary.info:hover{background:var(--Info-Info-600, #4996db)}.btn.primary.error{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #fff)}.btn.primary.error:hover{background:var(--Error-Error-600, #de6061)}.btn.primary.warning{background:var(--Warning-Warning-500, #f1b44c);color:var(--Neutral-White, #fff)}.btn.primary.warning:hover{background:var(--Warning-Warning-600, #dba445)}.btn.primary.legacy{background:var(--Secondary-Secondary-500, #008dbf);color:var(--Neutral-White, #fff)}.btn.primary.legacy:hover{background:var(--Secondary-Secondary-600, #007199)}.btn.primary.disabled.default{background:var(--Primary-Primary-300, #f2bc85);color:var(--Neutral-White, #fff)}.btn.primary.disabled.success{background:var(--Success-Success-300, #5bd1af);color:var(--Neutral-White, #fff)}.btn.primary.disabled.info{background:var(--Info-Info-300, #8ac3f6);color:var(--Neutral-White, #fff)}.btn.primary.disabled.error{background:var(--Error-Error-300, #f89b9c);color:var(--Neutral-White, #fff)}.btn.primary.disabled.warning{background:var(--Warning-Warning-300, #f6cd87);color:var(--Neutral-White, #fff)}.btn.primary.disabled.legacy{background:var(--Secondary-Secondary-300, #62bad9);color:var(--Neutral-White, #fff)}.btn.secondary{background:var(--Neutral-White, #fff);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:400;font-size:14px;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)}}`;
+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:700;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(--Size-3, 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, #fff)}.btn.primary.default:hover{background:var(--Primary-Primary-600, #e58017)}.btn.primary.success{background:var(--Success-Success-500, #0abb87);color:var(--Neutral-White, #fff)}.btn.primary.success:hover{background:var(--Success-Success-600, #09aa7b)}.btn.primary.info{background:var(--Info-Info-500, #50a5f1);color:var(--Neutral-White, #fff)}.btn.primary.info:hover{background:var(--Info-Info-600, #4996db)}.btn.primary.error{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #fff)}.btn.primary.error:hover{background:var(--Error-Error-600, #de6061)}.btn.primary.warning{background:var(--Warning-Warning-500, #f1b44c);color:var(--Neutral-White, #fff)}.btn.primary.warning:hover{background:var(--Warning-Warning-600, #dba445)}.btn.primary.legacy{background:var(--Secondary-Secondary-500, #008dbf);color:var(--Neutral-White, #fff)}.btn.primary.legacy:hover{background:var(--Secondary-Secondary-600, #007199)}.btn.primary.disabled.default{background:var(--Primary-Primary-300, #f2bc85);color:var(--Neutral-White, #fff)}.btn.primary.disabled.success{background:var(--Success-Success-300, #5bd1af);color:var(--Neutral-White, #fff)}.btn.primary.disabled.info{background:var(--Info-Info-300, #8ac3f6);color:var(--Neutral-White, #fff)}.btn.primary.disabled.error{background:var(--Error-Error-300, #f89b9c);color:var(--Neutral-White, #fff)}.btn.primary.disabled.warning{background:var(--Warning-Warning-300, #f6cd87);color:var(--Neutral-White, #fff)}.btn.primary.disabled.legacy{background:var(--Secondary-Secondary-300, #62bad9);color:var(--Neutral-White, #fff)}.btn.secondary{background:var(--Neutral-White, #fff);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:400;font-size:14px;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)}}`;
 
 const DropiButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiClick = createEvent(this, "dropiClick");
+        this.dropiClick = createEvent(this, "dropiClick", 7);
     }
     /** Visual color palette */
     type = 'default';
@@ -15,6 +15,8 @@ const DropiButton = class {
     size = 'normal';
     /** Button state */
     state = 'default';
+    /** Full width button */
+    fullWidth = false;
     /** Icon name to show before the text */
     preIcon = '';
     /** Icon name to show after the text */
@@ -64,14 +66,14 @@ const DropiButton = class {
         const hasText = this.text !== '';
         const showPostIcon = this.postIcon !== '' || this.type === 'dropdown';
         const dropdownIcon = this.type === 'dropdown' ? 'Dropdown-down' : this.postIcon;
-        return (h("button", { key: '6cde7f2616d1cff9e3304481f2a0c38aabc34192', class: {
+        return (h("button", { key: 'e924f56cb86a87ee8a314cfc5c278042a4d0a87d', class: {
                 btn: true,
                 'without-text': !hasText,
                 [this.severity]: true,
                 [this.type]: true,
                 [this.size]: true,
                 [this.state]: true,
-            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '769cea8fce2947552462aa2cbbb09d64df952c76', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && h("span", { key: 'f66ad80283d54f643cf37ea702145127b90d4ce4', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: '4fd9c7d7d029c3316bc0492576cda0cca74fa460', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: '3280c56a28ea40016d35e186b9997635b8ba881b' })));
+            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '6d42026da19f7bf2fc6186659b8afc48748544f1', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && h("span", { key: 'c71ee430fec84cd24d261dc12973ad0b472cc71c', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: 'ff3890de446e5b48c88a980f01cce4e7b9764b24', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: '3ee6aacd17a004664ad4bcf89219a8e2dc865343' })));
     }
 };
 DropiButton.style = dropiButtonCss();

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

@@ -0,0 +1,43 @@
+import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.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-size:var(--font-size-s, 12px)}.default-card{border:none}.is-checked{background:var(--Primary-Primary-50, #fff8f0);border:1px solid var(--Primary-Primary-500, #f49a3d)}`;
+
+const DropiCardCheckbox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiChange = createEvent(this, "dropiChange", 7);
+    }
+    /** Visual type: 'default' = no border, 'with-card' = bordered card */
+    type = 'default';
+    /** Whether the checkbox is checked */
+    checked = false;
+    /** Main title */
+    cardTitle = '';
+    /** Optional description below title */
+    description = '';
+    /** Optional extra info shown on the right */
+    extraInfo = '';
+    /** Optional extra info description shown below extraInfo */
+    extraInfoDescription = '';
+    /** Disables interaction */
+    disabled = false;
+    /** Emitted with the new checked state when clicked */
+    dropiChange;
+    handleClick() {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.dropiChange.emit(this.checked);
+    }
+    render() {
+        return (h("div", { key: '9c647faab478d2817593315051b1f02d0334756d', class: {
+                'container-card-check': true,
+                'default-card': this.type === 'default',
+                'is-checked': this.checked && this.type === 'with-card',
+                'disabled': this.disabled,
+            }, onClick: () => this.handleClick() }, h("dropi-checkbox", { key: '31db5cd31da290692d6aa77e0129b7e4361c23aa', checked: this.checked, disabled: this.disabled }), h("div", { key: '4b5c8eeadd255a79344d634d84e3ff93fafa34b4', class: "container-text" }, h("div", { key: '30a03f764294e0b4ca8a2bf4fd1badc08d0dc7e9', class: "title-check" }, this.cardTitle), this.description && h("div", { key: '751b4fac066b17c903e56a0aa5ef16b0d4151944', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (h("div", { key: '6b7eec457d42169ac87d1042b65b1bebdd436a5e', class: "extra-info" }, this.extraInfo && h("div", { key: '07e1cfa079668255343570498e0ad0dc0351effb' }, this.extraInfo), this.extraInfoDescription && h("h4", { key: '3a8277e2749b9cbdaf7d5d11086c7f2ac11dc39c' }, this.extraInfoDescription)))));
+    }
+};
+DropiCardCheckbox.style = dropiCardCheckboxCss();
+
+export { DropiCardCheckbox as dropi_card_checkbox };

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

@@ -0,0 +1,57 @@
+import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+
+const dropiCardProductCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.card{display:flex;flex-direction:column;border:1px solid var(--Gray-Gray-100, #eceef4);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);overflow:hidden;cursor:pointer;transition:box-shadow 0.2s, transform 0.2s}.card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.1);transform:translateY(-2px)}.card__image-wrap{position:relative;width:100%;aspect-ratio:1;background:var(--Gray-Gray-50, #f7f8fa);overflow:hidden}.card__image{width:100%;height:100%;object-fit:cover}.card__image-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.card__badge{position:absolute;top:var(--Size-2, 8px);left:var(--Size-2, 8px);padding:2px 8px;border-radius:100px;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700)}.card__badge--default{background:var(--Gray-Gray-100, #eceef4);color:var(--Gray-Gray-700, #32394d)}.card__badge--success{background:var(--Success-Success-100, #d4f5de);color:var(--Success-Success-700, #0f7b2e)}.card__badge--warning{background:var(--Warning-Warning-100, #fef3cd);color:var(--Warning-Warning-700, #856404)}.card__badge--error{background:var(--Error-Error-100, #fde8e8);color:var(--Error-Error-700, #9b1c1c)}.card__badge--info{background:var(--Info-Info-100, #dbeafe);color:var(--Info-Info-700, #1d4ed8)}.card__fav{position:absolute;top:var(--Size-2, 8px);right:var(--Size-2, 8px);background:var(--Neutral-White, #fff);border:none;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,0.12);transition:transform 0.15s}.card__fav:hover{transform:scale(1.1)}.card__fav--active{background:var(--Error-Error-50, #fef2f2)}.card__body{flex:1;padding:var(--Size-3, 12px);display:flex;flex-direction:column;gap:4px}.card__category{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6);text-transform:uppercase;letter-spacing:0.5px}.card__name{margin:0;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1a2033);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card__price{margin:4px 0 0;font-size:var(--font-size-m, 14px);font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d)}.card__price-currency{font-size:var(--font-size-xs, 10px);margin-right:2px}.card__supplier{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card__no-stock{margin:4px 0 0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b)}.card__footer{padding:var(--Size-2, 8px) var(--Size-3, 12px) var(--Size-3, 12px)}.card__add-btn{width:100%;height:36px;display:flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #fff);border:none;border-radius:var(--Border-2, 8px);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);font-family:inherit;cursor:pointer;transition:background 0.15s}.card__add-btn:hover:not(:disabled){background:var(--Primary-Primary-600, #e08526)}.card__add-btn:disabled{background:var(--Gray-Gray-200, #c3c9d9);cursor:not-allowed}`;
+
+const DropiCardProduct = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiCardClick = createEvent(this, "dropiCardClick", 7);
+        this.dropiToggleFavorite = createEvent(this, "dropiToggleFavorite", 7);
+        this.dropiAddProduct = createEvent(this, "dropiAddProduct", 7);
+    }
+    /** Product image URL */
+    image = '';
+    /** Product name */
+    productName = '';
+    /** Product price */
+    price = 0;
+    /** Price currency symbol */
+    currency = '$';
+    /** Supplier / store name */
+    supplier = '';
+    /** Category label */
+    category = '';
+    /** Show favorite button */
+    showFavorite = true;
+    /** Is marked as favorite */
+    isFavorite = false;
+    /** Show "Add to store" button */
+    showAddButton = true;
+    /** Badge text (e.g. "Nuevo", "Oferta") */
+    badge = '';
+    /** Badge color variant */
+    badgeType = 'default';
+    /** Stock availability */
+    inStock = true;
+    /** Emitted when card is clicked */
+    dropiCardClick;
+    /** Emitted when favorite toggled */
+    dropiToggleFavorite;
+    /** Emitted when "Add" button clicked */
+    dropiAddProduct;
+    formatPrice(val) {
+        return val.toLocaleString('es-CO');
+    }
+    render() {
+        return (h("div", { key: '98684e3d5fac7968633bcd62b46dba6f0e0f5d64', class: "card", onClick: () => this.dropiCardClick.emit() }, h("div", { key: '848cf4ef786584e5b02a99249df3cfa48c41d428', class: "card__image-wrap" }, this.image
+            ? h("img", { class: "card__image", src: this.image, alt: this.productName, loading: "lazy" })
+            : h("div", { class: "card__image-placeholder" }, h("dropi-icon", { name: "Image", width: "32px", height: "32px", color: "Gray-Gray-300" })), this.badge && (h("span", { key: '7238c35891b35a0bb12a774817542323bcd33e99', class: `card__badge card__badge--${this.badgeType}` }, this.badge)), this.showFavorite && (h("button", { key: '647c8569997ff8ba96ca0d4d19a12570fb353d93', class: { 'card__fav': true, 'card__fav--active': this.isFavorite }, onClick: (e) => {
+                e.stopPropagation();
+                this.isFavorite = !this.isFavorite;
+                this.dropiToggleFavorite.emit(this.isFavorite);
+            }, "aria-label": "Favorito" }, h("dropi-icon", { key: 'a9d654e3bdc5816f2c58537cb07c486a61021fcd', name: this.isFavorite ? 'Heart-filled' : 'Heart', width: "16px", height: "16px", color: this.isFavorite ? 'Error-Error-500' : 'Gray-Gray-400' })))), h("div", { key: 'c553168c5926dafb582210b680571eb9b4ae72ea', class: "card__body" }, this.category && h("span", { key: '6cee8941275bc0461c9d06b0c5bf2f0a75f14f0b', class: "card__category" }, this.category), h("p", { key: 'd4577a94b9a7b7b8b9c275987369dc56e4a0c2b4', class: "card__name" }, this.productName), h("p", { key: '2ead66bd7ce7a7f15285b8099cfea7de8d4f6d1a', class: "card__price" }, h("span", { key: '90e317dc5bdad1cbe6199ef9abd13cf6468a439b', class: "card__price-currency" }, this.currency), this.formatPrice(this.price)), this.supplier && (h("p", { key: 'f70fc28afbc468d7eca3683afbc193ec47c275f4', class: "card__supplier" }, this.supplier)), !this.inStock && (h("p", { key: '37d9911367a0e0504e661e52eee69f4628572bb1', class: "card__no-stock" }, "Sin stock disponible"))), this.showAddButton && (h("div", { key: 'eef0213d00268319b6fa9901ced750d2f06735ed', class: "card__footer" }, h("button", { key: 'f026718a0146fdea94dbcda40614354be80fa932', class: "card__add-btn", disabled: !this.inStock, onClick: (e) => { e.stopPropagation(); this.dropiAddProduct.emit(); } }, h("dropi-icon", { key: 'dc3ff5553e60df93a3eb93bab43be874f8d6582d', name: "Plus", width: "14px", height: "14px", color: "Neutral-White" }), "Agregar")))));
+    }
+};
+DropiCardProduct.style = dropiCardProductCss();
+
+export { DropiCardProduct as dropi_card_product };

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

@@ -0,0 +1,36 @@
+import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.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, #fff);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, #1a2033)}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}`;
+
+const DropiCardSection = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiChange = createEvent(this, "dropiChange", 7);
+        this.dropiClick = createEvent(this, "dropiClick", 7);
+    }
+    /** Section title */
+    sectionTitle = '';
+    /** Section description */
+    description = '';
+    /** Control type on the right */
+    typeElement = 'switch';
+    /** Title size variant */
+    type = 'medium';
+    /** Switch checked state */
+    isChecked = false;
+    /** Emitted when switch changes. e.detail = new boolean value */
+    dropiChange;
+    /** Emitted when dropdown icon is clicked */
+    dropiClick;
+    render() {
+        return (h("div", { key: 'f2653804e3d325fb6859d5cc096c893c8fb08ed8', class: "card-section" }, h("div", { key: '25fb5e34a9abcdc6a2761adf7053256cb431304d', class: "card-section__text" }, this.type === 'important'
+            ? h("h5", { class: "card-section__title card-section__title--important" }, this.sectionTitle)
+            : h("h6", { class: "card-section__title" }, this.sectionTitle), this.description && h("p", { key: 'fbfb5509a685f39053aa787b57df7c9f2ba1b6eb', class: "card-section__desc" }, this.description)), h("div", { key: 'f5e6a3d27b08cd6d8be791d9d8bb007c2859d9d2', class: "card-section__control" }, this.typeElement === 'switch' ? (h("dropi-switch", { isChecked: this.isChecked, onDropiChange: (e) => {
+                this.isChecked = e.detail;
+                this.dropiChange.emit(e.detail);
+            } })) : (h("button", { class: "card-section__dropdown-btn", onClick: () => this.dropiClick.emit(), "aria-label": "Expandir" }, h("dropi-icon", { name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))))));
+    }
+};
+DropiCardSection.style = dropiCardSectionCss();
+
+export { DropiCardSection as dropi_card_section };