@dropi/ui 0.1.37 → 0.1.42

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

@@ -1,14 +1,14 @@
 'use strict';
 
-var index = require('./index-C8kwDvpf.js');
+var index = require('./index-CEWSDq65.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}}`;
 
 const DropiCarousel = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.pageChange = index.createEvent(this, "pageChange", 7);
-        this.onPage = index.createEvent(this, "onPage", 7);
+        this.dropiPageChange = index.createEvent(this, "dropiPageChange");
+        this.dropiPage = index.createEvent(this, "dropiPage");
     }
     get el() { return index.getElement(this); }
     /** Items to display (Array of URLs or objects) */
@@ -35,8 +35,8 @@ const DropiCarousel = class {
     totalPages = 0;
     itemsContainer;
     timer;
-    pageChange;
-    onPage;
+    dropiPageChange;
+    dropiPage;
     handleValue(val) {
         this.parsedValue = typeof val === 'string' ? JSON.parse(val) : (val || []);
         this.updateTotalPages();
@@ -108,7 +108,7 @@ const DropiCarousel = class {
             this.internalPage = (this.internalPage + 1) % this.totalPages;
             this.page = this.internalPage;
             this.updateTransform();
-            this.pageChange.emit(this.internalPage);
+            this.dropiPageChange.emit(this.internalPage);
             setTimeout(() => (this.isAnimating = false), 500);
         }
     };
@@ -120,7 +120,7 @@ const DropiCarousel = class {
             this.internalPage = (this.internalPage - 1 + this.totalPages) % this.totalPages;
             this.page = this.internalPage;
             this.updateTransform();
-            this.pageChange.emit(this.internalPage);
+            this.dropiPageChange.emit(this.internalPage);
             setTimeout(() => (this.isAnimating = false), 500);
         }
     };
@@ -129,7 +129,7 @@ const DropiCarousel = class {
         this.internalPage = index;
         this.page = this.internalPage;
         this.updateTransform();
-        this.pageChange.emit(this.internalPage);
+        this.dropiPageChange.emit(this.internalPage);
         setTimeout(() => (this.isAnimating = false), 500);
     }
     render() {

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

@@ -1,14 +1,14 @@
 'use strict';
 
-var index = require('./index-C8kwDvpf.js');
+var index = require('./index-CEWSDq65.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)}`;
 
 const DropiCheckboxSelectionList = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.checkedValues = index.createEvent(this, "checkedValues", 7);
-        this.onSearch = index.createEvent(this, "onSearch", 7);
+        this.dropiCheckedValues = index.createEvent(this, "dropiCheckedValues");
+        this.dropiSearch = index.createEvent(this, "dropiSearch");
     }
     /** Options array or JSON string */
     options = [];
@@ -28,9 +28,9 @@ const DropiCheckboxSelectionList = class {
     selected = [];
     parsedOptions = [];
     /** Emitted when selection changes — matches Angular 'checkedValues' */
-    checkedValues;
+    dropiCheckedValues;
     /** Emitted on search — matches Angular 'onSearch' */
-    onSearch;
+    dropiSearch;
     optionsChanged(val) {
         this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
     }
@@ -50,14 +50,14 @@ const DropiCheckboxSelectionList = class {
         else {
             this.selected = this.selected.includes(id) ? [] : [id];
         }
-        this.checkedValues.emit(this.selected);
+        this.dropiCheckedValues.emit(this.selected);
     }
     render() {
         const items = this.filtered;
-        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) => {
+        return (index.h("div", { key: '95774833547807d6001525158bf199883661b649', class: "csl" }, this.showFilter && (index.h("div", { key: '13f6bfd33150cdf138e90b93fc8121dfcc311050', class: "csl__search" }, index.h("dropi-icon", { key: '4edf5c21eeac0aa442e58845621b7715d8484c1b', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), index.h("input", { key: '40071d0c189c7fd1f1bf8090ebe1d64ce9605602', 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: '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 => {
+                this.dropiSearch.emit(this.filterText);
+            } }), this.filterText && (index.h("button", { key: 'a560cab7ce53e57e036696194054286aa1dd6fd9', class: "csl__clear", onClick: () => { this.filterText = ''; this.dropiSearch.emit(''); } }, index.h("dropi-icon", { key: 'f1ae7e38fcb954761edb02bb32af139fb5eea610', name: "Close-small", iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-400" }))))), index.h("div", { key: 'e93dfccc8215e96640ebe8c69f33f0bff5f655f2', 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,33 +1,33 @@
 'use strict';
 
-var index = require('./index-C8kwDvpf.js');
+var index = require('./index-CEWSDq65.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}`;
 
 const DropiCheckbox = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.onChange = index.createEvent(this, "onChange", 7);
+        this.dropiChange = index.createEvent(this, "dropiChange");
     }
     /** Whether the checkbox is checked */
     checked = false;
     /** Whether the checkbox is disabled */
     disabled = false;
     /** Emitted when the checked state changes */
-    onChange;
+    dropiChange;
     changeState() {
         if (this.disabled)
             return;
         this.checked = !this.checked;
-        this.onChange.emit(this.checked);
+        this.dropiChange.emit(this.checked);
     }
     render() {
-        return (index.h("div", { key: 'fdc1c54733617c0dab1ae11050d90650dc3eba91', class: "container-dropi-checkbox", onClick: () => this.changeState() }, index.h("div", { key: '6329c1a53e8b9f85ea26ca01afb920583570e85f', class: {
+        return (index.h("div", { key: '071505574decbf6b138256f73affe101c01080ef', class: "container-dropi-checkbox", onClick: () => this.changeState() }, index.h("div", { key: '03e7ec24a87e22c4a5fe1d94cc4ca1fe349d6e6f', class: {
                 check: true,
                 isCheck: this.checked,
                 noCheck: !this.checked,
                 disabled: this.disabled,
-            } }, 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" })))));
+            } }, index.h("svg", { key: 'c56f01268919995cc7aac0173edf44a01a62e13e', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, index.h("path", { key: '575f863c9e82e862ea7049bf633b0d86ba374bb2', 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,13 +1,13 @@
 'use strict';
 
-var index = require('./index-C8kwDvpf.js');
+var index = require('./index-CEWSDq65.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}`;
 
 const DropiChips = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.onClose = index.createEvent(this, "onClose", 7);
+        this.dropiClose = index.createEvent(this, "dropiClose");
     }
     /** Visual style (named customStyle to avoid conflict with HTMLElement.style) */
     customStyle = 'fill';
@@ -20,9 +20,9 @@ const DropiChips = class {
     /** Icon name (when type = 'icon') */
     icon = '';
     /** Emitted when the close icon is clicked */
-    onClose;
+    dropiClose;
     render() {
-        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" })))));
+        return (index.h("div", { key: '394a3ff5219535e9f4e1d6c9fbb320c32f1ce2e7', class: { 'chip': true, [`chip--${this.customStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (index.h("img", { key: 'c7ea7ce319e2ab0a179f7b0b61ad9fe39be7c1ec', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (index.h("dropi-icon", { key: '67e2edfbe37af83868a665cf65a85ecc27b7cfb5', class: "chip__pre-icon", name: this.icon, iconWidth: "14px", iconHeight: "14px", color: "currentColor" })), index.h("span", { key: '1916b1796d69cf6742177b8f4013315323bdf16f', class: "chip__text" }, index.h("slot", { key: '167e1b230b1c4406ba3f40ba7783966c6b523c96' })), this.showIcon && (index.h("button", { key: '118d46db1615e9ed14485500b5a754407c361139', class: "chip__close", onClick: () => this.dropiClose.emit(), "aria-label": "Eliminar" }, index.h("dropi-icon", { key: '1639e4ae068d0361512469d2915b392101b2b923', name: "Cross-circle", iconWidth: "14px", iconHeight: "14px", color: "currentColor" })))));
     }
 };
 DropiChips.style = dropiChipsCss();

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

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-C8kwDvpf.js');
+var index = require('./index-CEWSDq65.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)}`;
 
 const DropiCitySelector = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.selectedCitiesChange = index.createEvent(this, "selectedCitiesChange", 7);
+        this.selectedCitiesChange = index.createEvent(this, "selectedCitiesChange");
     }
     /** Grouped city options (array or JSON string) */
     options = [];
@@ -85,9 +85,9 @@ const DropiCitySelector = class {
     }
     render() {
         const groups = this.filtered;
-        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 => {
+        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", iconWidth: "10px", iconHeight: "10px", color: "Primary-Primary-500" })))))), index.h("dropi-icon", { key: 'f99675449127fb19fdea950db057d8c14ca62644', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-500" })), this.isOpen && (index.h("div", { key: '2a14a55016c19128fde45359f4b29b6f04f9b035', class: "dropdown", role: "listbox" }, index.h("div", { key: '1321152ed7b0d3f50b04c7f28b05f1523c41cce4', class: "search-wrap" }, index.h("div", { key: '7c94a7506d44cd89b83e5782cce16319f266f82c', class: "search-field" }, index.h("input", { key: '5f40db9a8df0adc09776b4adcfe03a4a6d1d1467', class: "search-input", type: "text", placeholder: "Buscar...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; }, autoComplete: "off" }), index.h("span", { key: '3140903ef4355b970c8f348e4f55d43f852e247d', class: "search-icon" }, index.h("dropi-icon", { key: 'b59235b0d7a685000033d2a294fbce246d0ba4c2', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), index.h("div", { key: 'bfd40e336b402bd92ec212466cf89e1cffb0d4be', class: "options-list" }, groups.length === 0 && (index.h("div", { key: '9fce9b4df1ffb122278480f0ab60255ea0c795ec', 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)));
+            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", iconWidth: "10px", iconHeight: "10px", color: "Neutral-White" }))), index.h("span", { class: "city-label" }, city.label)));
         })))))))));
     }
     static get watchers() { return {

package/dist/cjs/dropi-color-picker.cjs.entry.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-C8kwDvpf.js');
+var index = require('./index-CEWSDq65.js');
 
 const dropiColorPickerCss = () => `:host{display:block}.general-container{position:relative;width:fit-content}.main-input-container{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:var(--Size-3);position:relative;width:fit-content}.main-input-container .overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;cursor:pointer}.line-color-preview{width:40px;height:40px;border-radius:50%;border:1px solid var(--Gray-Gray-200);display:flex;justify-content:center;align-items:center;padding:5px}.line-color-preview .color-preview{width:100%;height:100%;border-radius:50%;border:1px solid var(--Gray-Gray-200)}.position-right{top:0;left:250px}.position-left{top:0;right:200px}.position-top{bottom:55px}.position-bottom{top:55px}.position-bottom::before{transform:rotate(90deg);left:50%;top:-15px}.position-right::before{left:-6px;top:10px}.position-top::before{transform:rotate(270deg);left:50%;bottom:-15px}.position-left::before{transform:rotate(180deg);right:-9px}.color-picker-container::before{content:'';position:absolute;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid var(--Neutral-White);z-index:1}.color-picker-container{width:280px;padding:var(--Size-4);background:var(--Neutral-White);border-radius:var(--Size-2);box-shadow:var(--Shadow-large);position:absolute;z-index:100;transform-origin:top left;opacity:0;transition:transform 0.2s ease-out,     opacity 0.2s ease-out;pointer-events:none}.color-picker-container .main-color-canvas-container{position:relative;margin-bottom:var(--Size-4);border:1px solid var(--Gray-Gray-200);border-radius:var(--Size-1);display:flex;justify-self:center;align-items:center}.color-picker-container .main-color-canvas-container canvas{display:block;border-radius:var(--Size-1)}.color-picker-container .main-color-canvas-container .color-selector-pointer{position:absolute;width:var(--Size-3);height:var(--Size-3);border:2px solid var(--Neutral-White);border-radius:50%;transform:translate(-6px, -6px);pointer-events:none}.color-picker-container .slider-container{display:flex;flex-direction:column;gap:var(--Size-3)}.color-picker-container .slider-container .slider-group{display:flex;flex-direction:column;gap:var(--Size-1)}.color-picker-container .slider-container .slider-group label{font-size:var(--font-size-xs);color:var(--Gray-Gray-500);font-weight:var(--font-weight-bold)}.color-picker-container .slider-container .slider-group .hue-slider-container,.color-picker-container .slider-container .slider-group .opacity-slider-container{position:relative;height:var(--Size-3);border-radius:var(--Size-4);overflow:hidden}.color-picker-container .slider-container .slider-group .hue-slider-container canvas,.color-picker-container .slider-container .slider-group .opacity-slider-container canvas{display:block;width:100%;height:100%}.color-picker-container .slider-container .slider-group .hue-slider-container .slider-pointer,.color-picker-container .slider-container .slider-group .opacity-slider-container .slider-pointer{position:absolute;top:0;height:var(--Size-3);width:var(--Size-3);background:transparent;border:2px solid var(--Neutral-White);border-radius:50%;pointer-events:none}.color-picker-container.show{transform:scale(1);opacity:1;pointer-events:auto}.color-info .color-label{font-size:var(--font-size-xs);color:var(--Gray-Gray-500);font-weight:var(--font-weight-bold);text-transform:uppercase;margin-bottom:var(--Size-2)}.color-info .color-input{border:1px solid var(--Gray-Gray-200, #ddd);border-radius:var(--Size-1);padding:6px 8px;font-size:var(--font-size-s);width:100%;font-family:monospace;text-transform:uppercase;background-color:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-800, #1f2433);outline:none}`;
 
 const DropiColorPicker = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.colorChange = index.createEvent(this, "colorChange", 7);
+        this.colorChange = index.createEvent(this, "colorChange");
     }
     get el() { return index.getElement(this); }
     currentColor = '#ffffff';
@@ -303,10 +303,10 @@ const DropiColorPicker = class {
         }
     }
     render() {
-        return (index.h("div", { key: '2ee2bd6abd837388d8169961f6b1024da228b453', class: "general-container" }, index.h("div", { key: '15416c1a844daf774dda53f1c08bbe6b15435b64', class: "main-input-container" }, index.h("div", { key: 'e08aacd3ebb059a8467cf6f597d2b3bb3419e286', class: "overlay", onClick: () => this.showEditor() }), index.h("div", { key: 'dda8addee7afb351fb1f6c18dda516d29259220d', class: "line-color-preview" }, index.h("div", { key: 'b242eac802dc0c1d0a9965fb6fc9b6f010408ae2', class: "color-preview", style: { background: this.currentColor } })), index.h("div", { key: '8dddc6632dddae52cc58d964ee50cae1e6460b12', class: "color-info" }, index.h("input", { key: '7181e30bddae8005260d285653425cd5cad2386e', type: "text", class: "color-input", value: this.currentColor, maxLength: 9, readOnly: true }))), index.h("div", { key: '0ad3b547299fc1a4ccab9ddb7efebd7962fd7855', class: `color-picker-container position-${this.position} ${this.showEdit ? 'show' : ''}` }, index.h("div", { key: 'c49847d5a6ca7a90f27889afe26f6c30c1959676', class: "main-color-canvas-container" }, index.h("canvas", { key: '44531a25415492782d70d070aacf17797f9e3818', ref: (el) => this.colorCanvas = el, width: 256, height: 150, onMouseDown: (e) => this.onColorMouseDown(e) }), index.h("div", { key: '325bc14afacafa6dddd0a9bc837c6448ff803bd8', class: "color-selector-pointer", style: {
+        return (index.h("div", { key: '18ea41f637e46cb88d57cb2bc513f5e6e3ef9617', class: "general-container" }, index.h("div", { key: '653748e883bc4deaf05739ced8e516f857a7a26b', class: "main-input-container" }, index.h("div", { key: 'b8a4e60b25d6017c3987fa4ea3420c78e3400db0', class: "overlay", onClick: () => this.showEditor() }), index.h("div", { key: 'e22f4b3e95f099e2444a46ee560fefb9f6556b65', class: "line-color-preview" }, index.h("div", { key: 'cf513dbb5ee9652a6d20aad0608508cae3e000af', class: "color-preview", style: { background: this.currentColor } })), index.h("div", { key: '025b264ae8aca0fca79f662c58250eea43ccf0e7', class: "color-info" }, index.h("input", { key: '60a379b53bd0cf0bb1f80d5e1bd5b4c4038686f9', type: "text", class: "color-input", value: this.currentColor, maxLength: 9, readOnly: true }))), index.h("div", { key: '06e15b97ba156a9aa9dec9f60f2b24c924c0ac53', class: `color-picker-container position-${this.position} ${this.showEdit ? 'show' : ''}` }, index.h("div", { key: 'ea9df13cdf62ae1378b600dc7689df61bec5fc9b', class: "main-color-canvas-container" }, index.h("canvas", { key: '5d73426ccfcccca44102300588472fe5e54744f9', ref: (el) => this.colorCanvas = el, width: 256, height: 150, onMouseDown: (e) => this.onColorMouseDown(e) }), index.h("div", { key: 'e710e7f8c1558ad20dcfb0f03c98969d9aee5e91', class: "color-selector-pointer", style: {
                 left: `${(this.saturation / 100) * 256}px`,
                 top: `${((100 - this.currentVal) / 100) * 150}px`
-            } })), index.h("div", { key: 'ab6d2a987b4c317fa218e70a1602ea829505fe0a', class: "slider-container" }, index.h("div", { key: 'fe9ae897de10c04322653870cb9e5b79f61a2b86', class: "slider-group" }, index.h("div", { key: 'f39f1935c0410509f6ecbf69b718730201d70be7', class: "hue-slider-container" }, index.h("canvas", { key: '6a08c8dd36f3c9d70aa0f0438006bc4efa4df401', ref: (el) => this.hueCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onHueMouseDown(e) }), index.h("div", { key: 'a91a4f4469e3152b24bf1e7dfd3d4738eb17f661', class: "slider-pointer", style: { left: `${(this.hue / 360) * 234}px` } }))), index.h("div", { key: '2a45b1e24dcb447e515d8dbfac2ecd4032661af8', class: "slider-group" }, index.h("div", { key: 'ec945cd912ecf046ca16e7520bae48d3e998f8fd', class: "opacity-slider-container" }, index.h("canvas", { key: 'f181f9a8b16274d94377f3dd300c3bff231088df', ref: (el) => this.opacityCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onOpacityMouseDown(e) }), index.h("div", { key: '2e246b9e62991569c60024ac4f8b1ae32543e03e', class: "slider-pointer", style: { left: `${(this.opacity / 100) * 234}px` } }))), index.h("div", { key: 'c8c539dda06f8ce70b4c669a32e56cb693132f49', class: "color-info" }, index.h("div", { key: '5939e97e1331e57a5837e868ea6088b069e3c3eb', class: "color-label" }, "HEX"), index.h("input", { key: '321cebcb041223d4cb6c072f310720edcdb2391c', type: "text", class: "color-input", value: this.color, onInput: (e) => this.onHexInputChange(e), maxLength: 9 }))))));
+            } })), index.h("div", { key: '239c7986572fade46b913629bbd374ec6f15e6fb', class: "slider-container" }, index.h("div", { key: '35c4231f321c42fa95f362da5bf211daf1671c79', class: "slider-group" }, index.h("div", { key: '20be2dc7eff210e31ab3215da10473a23db921f1', class: "hue-slider-container" }, index.h("canvas", { key: '0795238e2a59747c4bfbd3437a2a2fd9396dc9e2', ref: (el) => this.hueCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onHueMouseDown(e) }), index.h("div", { key: '17296210ecef2a958a46f23971a04da61d59402e', class: "slider-pointer", style: { left: `${(this.hue / 360) * 234}px` } }))), index.h("div", { key: 'af7504663561d0e811ae7ef163cce80cfa256187', class: "slider-group" }, index.h("div", { key: '7f3f01cfb0e4ca93403dad15787ab8acd7c1cd82', class: "opacity-slider-container" }, index.h("canvas", { key: '9bac8eca65bfba529748eb9788fc749b87115ca6', ref: (el) => this.opacityCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onOpacityMouseDown(e) }), index.h("div", { key: '34166bf45efd6f4148395ede39680164662f8a33', class: "slider-pointer", style: { left: `${(this.opacity / 100) * 234}px` } }))), index.h("div", { key: 'b43c40db224a560adb19fd91a8790efe11719ff9', class: "color-info" }, index.h("div", { key: 'aad6ef925f30835b5d8f51d23f872560bcb62360', class: "color-label" }, "HEX"), index.h("input", { key: 'bdb5fd6ca689251a7c566f32bc6c308873117b2c', type: "text", class: "color-input", value: this.color, onInput: (e) => this.onHexInputChange(e), maxLength: 9 }))))));
     }
     static get watchers() { return {
         "value": [{

package/dist/cjs/dropi-country-flags.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C8kwDvpf.js');
+var index = require('./index-CEWSDq65.js');
 
 const dropiCountryFlagsCss = () => `:host{display:inline-flex}.flag{max-width:40px;max-height:40px;margin:0;display:flex;align-items:center;justify-content:center}.flag img{width:100%;height:100%;object-fit:cover}.circle{border-radius:50%;overflow:hidden}.rectangle{border-radius:4px;overflow:hidden;max-width:32px !important;max-height:24px !important}`;
 
@@ -29,7 +29,7 @@ const DropiCountryFlags = class {
             style['width'] = this.width.includes('px') ? this.width : `${this.width}px`;
         if (this.height)
             style['height'] = this.height.includes('px') ? this.height : `${this.height}px`;
-        return (index.h("figure", { key: '924adeb5372e2c02ce1c0471a162b57fc53616bd', class: `flag ${this.customStyle ?? 'flat'}` }, index.h("img", { key: '8433b69bbfc51aa5e72f8bd7166382e1d7907cfa', src: this.src, style: style, alt: `flag-${this.country}` })));
+        return (index.h("figure", { key: '451765b675d5b27dc0357a1a2b6dd338690361c8', class: `flag ${this.customStyle ?? 'flat'}` }, index.h("img", { key: 'f58a64e7d78298d328be2ba625c852a5eddc392f', src: this.src, style: style, alt: `flag-${this.country}` })));
     }
 };
 DropiCountryFlags.style = dropiCountryFlagsCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C8kwDvpf.js');
+var index = require('./index-CEWSDq65.js');
 
 const dropiCountrySelectorCss = () => `:host{display:block;width:100%;text-align:left}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}label{display:block;font-size:var(--font-size-xs, 11px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066);margin-bottom:6px}.required{color:var(--Error-Error-500, #ef4444);margin-left:2px}.select-button{width:100%;height:44px;padding:0 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 14px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.15s ease}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #3b82f6)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-button.select-completed{color:var(--Gray-Gray-700, #32394d)}.select-button.select-invalid{border-color:var(--Error-Error-500, #ef4444)}.selected-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1}.selected-option{display:flex;align-items:center;gap:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 14px)}.placeholder-text{color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 14px)}.flag-img{border-radius:var(--Border-1, 4px);width:24px;height:24px;object-fit:cover;flex-shrink:0}.select-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);z-index:200;list-style:none;padding:0;margin:0;box-shadow:0 8px 24px rgba(0, 0, 0, 0.10);overflow:hidden;transition:max-height 0.2s ease, opacity 0.2s ease}.select-dropdown.expanded{max-height:300px;opacity:1;overflow-y:auto}.select-dropdown.collapsed{max-height:0;opacity:0;pointer-events:none;border-color:transparent;box-shadow:none}.select-dropdown::-webkit-scrollbar{width:6px}.select-dropdown::-webkit-scrollbar-track{background:transparent}.select-dropdown::-webkit-scrollbar-thumb{background:var(--Gray-Gray-200, #c3c9d9);border-radius:4px}.select-dropdown::-webkit-scrollbar-thumb:hover{background:var(--Gray-Gray-300, #a3abbf)}.search-li{padding:10px 12px;position:sticky;top:0;background:var(--Neutral-White, #ffffff);z-index:1;border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2)}.search-field{position:relative;display:flex;align-items:center}.country-search{width:100%;height:36px;padding:0 36px 0 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);outline:none;font-size:var(--font-size-s, 14px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:var(--Gray-Gray-50, #f7f8fa);transition:border-color 0.15s, background 0.15s}.country-search:focus{border-color:var(--Info-Info-500, #50a5f1);background:var(--Neutral-White, #ffffff)}.country-search::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-icon{position:absolute;right:10px;display:flex;align-items:center;pointer-events:none}.option{width:100%;min-height:44px;padding:10px 16px;border:none;background:transparent;text-align:left;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 14px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:10px;transition:background 0.1s ease;white-space:nowrap}.option:hover{background:var(--Gray-Gray-50, #f7f8fa)}`;
 
@@ -98,7 +98,7 @@ const COUNTRIES = [
 const DropiCountrySelector = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.onChangeSelect = index.createEvent(this, "onChangeSelect", 7);
+        this.dropiChange = index.createEvent(this, "dropiChange");
     }
     /** Label above the select */
     label = '';
@@ -122,7 +122,7 @@ const DropiCountrySelector = class {
      */
     selectProperties = null;
     /** Emitted when a country is selected. Detail is the CountryItem. */
-    onChangeSelect;
+    dropiChange;
     isOpen = false;
     selected = null;
     get el() { return index.getElement(this); }
@@ -174,14 +174,14 @@ const DropiCountrySelector = class {
         this.isOpen = false;
         this.searchTerm = '';
         this.currentSelection = country.code;
-        this.onChangeSelect.emit(country);
+        this.dropiChange.emit(country);
     }
     render() {
-        return (index.h("div", { key: '78179f7b5e30c4eb7d5345431f476f625a60534a', class: "custom-select" }, this.label && (index.h("label", { key: '13566e714a55c3820facffab298a97fc37c97133' }, this.label, this.showObligatory && index.h("span", { key: '7772ddd762bd50da043ed030b5a3442e10de47b0', class: "required" }, "*"))), index.h("button", { key: '649759c1d921318a48fd1abf8e71977d52b6ae2d', type: "button", class: {
+        return (index.h("div", { key: '036ea5668f8ff842f69f13c9d94000ecdc96126b', class: "custom-select" }, this.label && (index.h("label", { key: '457b2a26a2e9ea425aa95a2a162f2f3e547376e3' }, this.label, this.showObligatory && index.h("span", { key: 'fc2b04e48d9372e0e5c1f593e57797558dc2e359', class: "required" }, "*"))), index.h("button", { key: '0239ee64b4859e45a9b8dcff0e175124d16cdc09', type: "button", class: {
                 'select-button': true,
                 'select-completed': !!this.selected,
                 'select-invalid': this.hasError,
-            }, disabled: this.disabled, onClick: () => this.open() }, index.h("div", { key: '79df14d64f598d312a1cd82f294edf8aa14ed32e', class: "selected-content" }, this.selected ? (index.h("span", { class: "selected-option" }, index.h("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (index.h("span", { class: "placeholder-text" }, this.placeholder))), index.h("dropi-icon", { key: 'dfa717ce51975386fab6a3af796637a27a8cb039', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', width: "20px", height: "20px", color: "Gray-Gray-500" })), index.h("ul", { key: '4f72db336c9d1bc1ce149279970cdaa4dcaa4f77', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, index.h("li", { key: '3badbda75f609e979f5edf7ad3f5783bf9cdf001', class: "search-li" }, index.h("div", { key: 'cae7ee12d3d3d40a3bb9728f4c109cd0ba513995', class: "search-field" }, index.h("input", { key: '82b7703b0531c80d51b5fb70d3e2f0b804e3089f', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } }), index.h("span", { key: '45378fac8b73b656fc8c5bb16d7f072398890508', class: "search-icon" }, index.h("dropi-icon", { key: '39c3a426407fd68367a3494c3d319bdbcf9692bb', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" })))), this.filtered.map(country => (index.h("li", { key: country.code }, index.h("button", { class: "option", type: "button", onClick: () => this.select(country) }, index.h("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name))))), this.textHelper && (index.h("div", { key: '58f747d7cfecd23d3bdc166f21c3560e642f336d', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && index.h("dropi-icon", { key: 'fb68e291bd8dcfe5955281504b3de80699fa0ff0', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), index.h("span", { key: '9d5287f387f09f2b90b41f14f05c3572a44d74a3' }, this.textHelper)))));
+            }, disabled: this.disabled, onClick: () => this.open() }, index.h("div", { key: 'dd468a1977089ada40f93e1e76f0d55349c5f80d', class: "selected-content" }, this.selected ? (index.h("span", { class: "selected-option" }, index.h("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (index.h("span", { class: "placeholder-text" }, this.placeholder))), index.h("dropi-icon", { key: '397055b90b0dab05effdcd2bc26a9839f963fa89', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), index.h("ul", { key: 'cac3fd861f38331eb4fada4f65ee897d1017cc52', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, index.h("li", { key: '0ccd958e816ff47fd53647d59f078483c7dbb3eb', class: "search-li" }, index.h("div", { key: '7ad42859a5743aa27aea9a001f1424e50cdc9f60', class: "search-field" }, index.h("input", { key: 'cb599f62e811383caeda0e329b688123f74fa571', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } }), index.h("span", { key: 'c60f6af4051d721a9c4c9b09f562f80d72a538eb', class: "search-icon" }, index.h("dropi-icon", { key: '93477b3d42c8022424ea886820db795c5dc1194a', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), this.filtered.map(country => (index.h("li", { key: country.code }, index.h("button", { class: "option", type: "button", onClick: () => this.select(country) }, index.h("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name))))), this.textHelper && (index.h("div", { key: 'e8fd998ffea654db0bac5e91b40ebd221781b12d', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && index.h("dropi-icon", { key: 'c7a334f5c2813cd0c4db5c8d36157b14ed2bdb11', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), index.h("span", { key: '04c7b006f67d6a4a3564fbe39c214f2fe9708cb4' }, this.textHelper)))));
     }
     static get watchers() { return {
         "currentSelection": [{

package/dist/cjs/dropi-date-picker-range.cjs.entry.js

@@ -1,15 +1,15 @@
 'use strict';
 
-var index = require('./index-C8kwDvpf.js');
+var index = require('./index-CEWSDq65.js');
 
 const dropiDatePickerRangeCss = () => `:host{display:block;width:100%;max-width:380px}*,*::before,*::after{box-sizing:border-box}.date-picker-range{width:100%;font-family:inherit}.label{font-size:11px;font-weight:var(--font-weight-medium);color:#7b8190;margin-bottom:8px}.inputs-row{display:flex;align-items:flex-end;gap:8px}.input-group{flex:1;display:flex;flex-direction:column;gap:4px}.input-label{font-size:var(--font-size-xs, 11px);color:var(--Gray-Gray-500, #69738c);font-weight:var(--font-weight-medium, 500)}.date-input{width:100%;height:40px;padding:0 10px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-600, #475066);font-size:13px;font-family:inherit;outline:none;cursor:pointer;transition:border-color 0.15s ease}.date-input:focus{border-color:var(--Primary-Primary-500, #f49a3d)}.separator{padding-bottom:8px;color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-m)}.shortcuts{display:flex;flex-direction:column;gap:2px;margin-top:10px;border-left:1px solid var(--Gray-Gray-100, #e6eaf2);padding-left:10px}.shortcut-btn{background:transparent;border:none;padding:4px 6px;font-size:13px;font-family:inherit;color:var(--Gray-Gray-700, #32394d);cursor:pointer;text-align:left;border-radius:5px;transition:background 0.1s ease;font-weight:var(--font-weight-regular)}.shortcut-btn:hover{background:var(--Gray-Gray-50, #f5f6f8)}.shortcut-btn.active{background:var(--Gray-Gray-50, #f5f6f8);font-weight:var(--font-weight-semibold)}.warning-box{margin-top:8px;padding:4px 8px;border:1px solid var(--Warning-Warning-400);border-radius:4px;background:var(--Warning-Warning-50)}.warning-message{color:#495057;font-size:var(--font-size-xxs);line-height:16px}@keyframes shimmer{0%{background-position:-468px 0}100%{background-position:468px 0}}.skeleton{height:40px;width:100%;min-width:180px;border-radius:6px;animation:shimmer 1s linear infinite;background:linear-gradient(to right, #f5f6f8 8%, #e3e7ef 28%, #f5f6f8 77%);background-size:800px 104px}@media screen and (max-width: 480px){.inputs-row{flex-direction:column}.separator{display:none}.shortcuts{flex-direction:row;flex-wrap:wrap;border-left:none;padding-left:0;border-top:1px solid var(--Gray-Gray-100, #e6eaf2);padding-top:8px}}`;
 
 const DropiDatePickerRange = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.startDateChange = index.createEvent(this, "startDateChange", 7);
-        this.endDateChange = index.createEvent(this, "endDateChange", 7);
-        this.dropiRangeChange = index.createEvent(this, "dropiRangeChange", 7);
+        this.startDateChange = index.createEvent(this, "startDateChange");
+        this.endDateChange = index.createEvent(this, "endDateChange");
+        this.dropiRangeChange = index.createEvent(this, "dropiRangeChange");
     }
     /** Start date (YYYY-MM-DD) */
     startDate = '';

package/dist/cjs/dropi-date-picker.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C8kwDvpf.js');
+var index = require('./index-CEWSDq65.js');
 
 const dropiDatePickerCss = () => `:host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.dp-label{display:block;font-size:var(--font-size-xxs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.dp-trigger{width:100%;height:44px;display:flex;align-items:center;gap:var(--Size-2, 8px);padding:0 var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);cursor:pointer;font-family:inherit;transition:border-color 0.2s}.dp-trigger:hover:not(:disabled){border-color:var(--Info-Info-500, #50a5f1)}.dp-trigger--disabled{background:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed;opacity:0.6}.dp-trigger__value{flex:1;text-align:left;font-size:var(--font-size-xs, 12px);color:var(--Gray-Gray-700, #32394d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dp-trigger__placeholder{color:var(--Gray-Gray-400, #858ea6)}.dp-popup{position:absolute;top:calc(100% + 8px);left:0;width:320px;background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-3, 12px);box-shadow:0 4px 16px rgba(0,0,0,0.08);z-index:300;padding:var(--Size-4, 16px)}.dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--Size-4, 16px)}.dp-nav__btn{background:none;border:none;padding:0;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;width:32px;height:32px;transition:background 0.15s}.dp-nav__btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-nav__title{font-size:var(--font-size-s, 14px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d);display:flex;gap:8px}.dp-grid{display:grid;grid-template-columns:repeat(7, 1fr);row-gap:8px;column-gap:4px}.dp-day-header{font-size:var(--font-size-s, 14px);color:var(--Gray-Gray-700, #32394d);text-align:center;padding:8px 0;font-weight:var(--font-weight-bold, 700)}.dp-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs, 12px);font-family:inherit;border:none;cursor:pointer;background:transparent;color:var(--Gray-Gray-600, #475066);width:100%;position:relative;z-index:1;padding:0}.dp-cell::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;transition:all 0.2s;z-index:-1;background:transparent}.dp-cell::before{content:"";position:absolute;top:0;bottom:0;z-index:-2;border-radius:0;background:transparent}.dp-cell:hover:not(:disabled)::after{background:var(--Gray-Gray-100, #e6eaf2)}.dp-cell--other-month{color:var(--Gray-Gray-300, #a0a9c0)}.dp-cell--today{font-weight:var(--font-weight-bold, 700)}.dp-cell--today::after{background:var(--Gray-Gray-100, #e6eaf2)}.dp-cell--selected{color:var(--Neutral-White, #ffffff);font-weight:var(--font-weight-bold, 700)}.dp-cell--selected::after{background:var(--Orange-orange-500, #f49a3d) !important}.dp-cell--range-start,.dp-cell--range-end{color:var(--Neutral-White, #ffffff);font-weight:var(--font-weight-bold, 700)}.dp-cell--range-start::after,.dp-cell--range-end::after{background:var(--Orange-orange-500, #f49a3d) !important}.dp-cell--in-range{color:var(--Orange-orange-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.dp-cell--in-range::before{left:-2px;right:-2px;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-start::before{left:50%;right:-2px;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-end::before{left:-2px;right:50%;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-start.dp-cell--range-end::before{background:transparent}.dp-cell--disabled{opacity:0.35;cursor:not-allowed}.dp-footer{display:flex;justify-content:space-between;margin-top:var(--Size-3, 12px);border-top:1px solid var(--Gray-Gray-100, #e6eaf2);padding-top:var(--Size-2, 8px)}.dp-footer__clear,.dp-footer__today{background:none;border:none;padding:4px 8px;font-size:var(--font-size-xxs, 10px);font-family:inherit;cursor:pointer;border-radius:var(--Border-1, 4px);transition:background 0.15s}.dp-footer__clear{color:var(--Gray-Gray-500, #69738c)}.dp-footer__today{color:var(--Orange-orange-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.dp-footer__clear:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-footer__today:hover{background:var(--Orange-orange-50, #fef5ec)}`;
 
@@ -12,9 +12,9 @@ const DAYS_ES = ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'];
 const DropiDatePicker = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.onChangeDate = index.createEvent(this, "onChangeDate", 7);
-        this.onClosePanel = index.createEvent(this, "onClosePanel", 7);
-        this.dropiRangeChange = index.createEvent(this, "dropiRangeChange", 7);
+        this.dropiChangeDate = index.createEvent(this, "dropiChangeDate");
+        this.dropiClosePanel = index.createEvent(this, "dropiClosePanel");
+        this.dropiRangeChange = index.createEvent(this, "dropiRangeChange");
     }
     /** Selected date (ISO string, single mode) - matches Angular 'selectedDate' */
     selectedDate = '';
@@ -49,9 +49,9 @@ const DropiDatePicker = class {
         }
     }
     /** Emitted when date selected — matches Angular 'onChangeDate' */
-    onChangeDate;
+    dropiChangeDate;
     /** Emitted when panel closes — matches Angular 'onClosePanel' */
-    onClosePanel;
+    dropiClosePanel;
     /** Emitted when range selected */
     dropiRangeChange;
     get displayValue() {
@@ -121,7 +121,7 @@ const DropiDatePicker = class {
         if (this.selectionMode !== 'range') {
             this.selectedDate = iso;
             this.open = false;
-            this.onChangeDate.emit(iso);
+            this.dropiChangeDate.emit(iso);
             return;
         }
         // Range mode
@@ -173,12 +173,12 @@ const DropiDatePicker = class {
     render() {
         const days = this.buildDays();
         const today = new Date().toISOString().slice(0, 10);
-        return (index.h("div", { key: 'ff426d80bb5bf05ca8b0c27773dee52f13cf4090', class: "dp-wrap" }, this.label && index.h("label", { key: 'fc7ebd6f14227533288b02c95933f6d4833e3f51', class: "dp-label" }, this.label), index.h("button", { key: '2fa9b1f3d2c9bfc4876724492a265ff0b29f8d23', class: {
+        return (index.h("div", { key: '0c3cb89d77d6d8e7d3f955354d6be4b7a1f507fb', class: "dp-wrap" }, this.label && index.h("label", { key: '672ad3d08337ed0df7c7e7d582ba8fe5af8d2b23', class: "dp-label" }, this.label), index.h("button", { key: '848428a5ce236b37e8e988223c9ef8bd91ea16b3', class: {
                 'dp-trigger': true,
                 'dp-trigger--disabled': this.disabled,
                 'dp-trigger--invalid': this.isInvalid,
                 'dp-trigger--loading': this.loading
-            }, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, index.h("dropi-icon", { key: '51b6fed8a232d7d22494c0bdf9f17e8c6ae0dbbe', name: "Calendar", width: "16px", height: "16px", color: "Gray-Gray-400" }), index.h("span", { key: 'ecbe872cd13efb112ef106f1dfde58cd745c124c', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), index.h("dropi-icon", { key: '6025abcf99d825dd885c9916f755c6b06e0657ed', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })), this.open && (index.h("div", { key: 'b46a2bd022bc6ec2edfdf07a8a21b010b56610a4', class: "dp-popup" }, index.h("div", { key: '8aedcc47ab11c03bf8bc3309fc92ba3f83587520', class: "dp-nav" }, index.h("button", { key: 'e5a7f2a8edc8d33e08449713a976008b83108f36', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, index.h("dropi-icon", { key: '515211fe3c12cd2e9399bd8fad7c0dd84a4de3cd', name: "Arrow-Left-2", width: "16px", height: "16px", color: "Gray-Gray-600" })), index.h("span", { key: '0d5acefc9c8418749b4065d3bc92c8fb53744557', class: "dp-nav__title" }, index.h("span", { key: 'd4b68ef6a5c2885cf7cd05e7b49e47623b8c0d00' }, MONTHS_ES[this.viewMonth]), index.h("span", { key: '8aefcf2e7e383111994c58a743706d6d19607f65' }, this.viewYear)), index.h("button", { key: 'b7524552e5b05f592633bd6e16cdcda8659aeacf', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, index.h("dropi-icon", { key: '5e14a0dafb227ba6f2e90298005401050b55a3bb', name: "Arrow-Right-2", width: "16px", height: "16px", color: "Gray-Gray-600" }))), index.h("div", { key: '37d7428dc36bdc805fb60c36126a86509f3b1188', class: "dp-grid" }, DAYS_ES.map(d => (index.h("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
+            }, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, index.h("dropi-icon", { key: 'c51b9238996ec454f64f53d4e9ede35bf494fd95', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), index.h("span", { key: 'b34ed963710695296a2986b0e790457b90a3ee60', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), index.h("dropi-icon", { key: '8cbefce39dab39a5cba941f4538f46cf97db1c06', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (index.h("div", { key: '36a5db42655b136cee1abf31bb5e206a6d118beb', class: "dp-popup" }, index.h("div", { key: '456c2778f035fae19450841baa20df5092f6dca4', class: "dp-nav" }, index.h("button", { key: '8f05a6aa4e1f4e0dda08ee9dad89f189c130eef0', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, index.h("dropi-icon", { key: '41f4e9b157e56669fa179cfed62d960ff1eadfd6', name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), index.h("span", { key: '53556f3a356e1d2b63b59d4edda40ddf5fda9e5f', class: "dp-nav__title" }, index.h("span", { key: '4bad1d735d4235b2ddaac33f3fa8f6335e753984' }, MONTHS_ES[this.viewMonth]), index.h("span", { key: 'c7af6bb7edc5dead7751c65ee024485aa2a6cf65' }, this.viewYear)), index.h("button", { key: '5ff7b70b69732c01ae7a45c7b65336982ea6eed8', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, index.h("dropi-icon", { key: '718725e17a530de4e8081c97e639342ff7fd9a96', name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), index.h("div", { key: 'd3d899342a15a9a0f2b508dbd39945831ebbad0d', class: "dp-grid" }, DAYS_ES.map(d => (index.h("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
             const isSelected = this.selectionMode !== 'range'
                 ? iso === this.selectedDate
                 : iso === this.startDate || iso === this.endDate;
@@ -200,16 +200,16 @@ const DropiDatePicker = class {
                     if (this.selectionMode === 'range' && this.startDate && !this.endDate)
                         this.hoverDate = iso;
                 }, onMouseLeave: () => this.hoverDate = '' }, day));
-        })), index.h("div", { key: '9a16f2d3aaffda303f2cf7c4d8045ad355eb3e88', class: "dp-footer" }, index.h("button", { key: '2c236322d33b4dbc37e683c328bc2c17aa1422cf', class: "dp-footer__clear", type: "button", onClick: () => {
+        })), index.h("div", { key: '84c799762393b9de0161795f20188a680490d4d8', class: "dp-footer" }, index.h("button", { key: '4696558b1be6bf8abe8461f341c129c640af46ce', class: "dp-footer__clear", type: "button", onClick: () => {
                 this.selectedDate = '';
                 this.startDate = '';
                 this.endDate = '';
                 this.open = false;
-            } }, "Limpiar"), index.h("button", { key: 'a08afb2358819fc8c15c7949dc7e4cbdf14b52fb', class: "dp-footer__today", type: "button", onClick: () => {
+            } }, "Limpiar"), index.h("button", { key: 'a87f6f92fa10829560d223835e70fd2951edc482', class: "dp-footer__today", type: "button", onClick: () => {
                 if (this.selectionMode !== 'range') {
                     this.selectedDate = today;
                     this.open = false;
-                    this.onChangeDate.emit(today);
+                    this.dropiChangeDate.emit(today);
                 }
                 else {
                     this.startDate = today;

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

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-C8kwDvpf.js');
+var index = require('./index-CEWSDq65.js');
 
 const dropiDrawerCss = () => `:host{display:contents;font-family:'Inter', sans-serif}*,*::before,*::after{box-sizing:border-box}.drawer-host{position:fixed;inset:0;z-index:1000;pointer-events:none;visibility:hidden}.drawer-host--open{pointer-events:all;visibility:visible}.drawer-backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.5);opacity:0;transition:opacity 0.25s}.drawer-host--open .drawer-backdrop{opacity:1}.drawer-panel{position:absolute;background:var(--Neutral-White, #ffffff);display:flex;flex-direction:column;transition:transform 0.25s ease;overflow:hidden;max-width:100%;min-width:auto}.drawer-panel--right{top:0;right:0;bottom:0;transform:translateX(100%);box-shadow:-4px 0 24px rgba(0, 0, 0, 0.12)}.drawer-host--open .drawer-panel--right{transform:translateX(0)}.drawer-panel--left{top:0;left:0;bottom:0;transform:translateX(-100%);box-shadow:4px 0 24px rgba(0, 0, 0, 0.12)}.drawer-host--open .drawer-panel--left{transform:translateX(0)}.drawer-panel--bottom{bottom:0;left:0;right:0;transform:translateY(100%);border-radius:var(--Border-2, 8px) var(--Border-2, 8px) 0 0;box-shadow:0 -4px 24px rgba(0, 0, 0, 0.12)}.drawer-host--open .drawer-panel--bottom{transform:translateY(0)}.drawer-panel--top{top:0;left:0;right:0;transform:translateY(-100%);border-radius:0 0 var(--Border-2, 8px) var(--Border-2, 8px);box-shadow:0 4px 24px rgba(0, 0, 0, 0.12)}.drawer-host--open .drawer-panel--top{transform:translateY(0)}.drawer-panel--size-m{width:550px}.drawer-panel--size-l{width:1137px}.drawer-panel--size-xl{width:1280px}.drawer-panel--size-xxl{width:1330px}.drawer-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);border-bottom:1px solid var(--Gray-Gray-100, #eceef4);flex-shrink:0}.drawer-header--headless{display:none}.drawer-header__title{color:var(--Gray-700, #32394d);font-family:Inter, sans-serif;font-size:24px;font-style:normal;font-weight:700;line-height:110%;margin:0}.drawer-header__close{width:var(--Size-6, 32px);height:var(--Size-6, 32px);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--Gray-400, #858ea6);border-radius:var(--Border-1, 4px);transition:background 0.15s;flex-shrink:0}.drawer-header__close:hover{background:var(--Gray-Gray-50, #f7f8fa)}.drawer-body{flex:1;overflow-y:auto;padding:var(--Size-4, 16px);display:flex;flex-direction:column}.drawer-footer{display:none}`;
 
 const DropiDrawer = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dropiClose = index.createEvent(this, "dropiClose", 7);
+        this.dropiClose = index.createEvent(this, "dropiClose");
     }
     drawerTitle = '';
     /** Controls visibility (alias of open for Angular parity) */
@@ -60,10 +60,10 @@ const DropiDrawer = class {
             else
                 panelStyle['height'] = this.height;
         }
-        return (index.h("div", { key: '7792ce8e001adf404aef387e35c5fb601f69b1e2', class: { 'drawer-host': true, 'drawer-host--open': this.open } }, index.h("div", { key: '186c33be6a7cd1e34e6d1f852219be91b24a15b9', class: "drawer-backdrop", onClick: () => {
+        return (index.h("div", { key: 'e5138752d1821a27ec3b0396cdc3d09bc15f7c73', class: { 'drawer-host': true, 'drawer-host--open': this.open } }, index.h("div", { key: 'ca7f2dff57eee0cc1d5a71486c8ce765b27c7307', class: "drawer-backdrop", onClick: () => {
                 if (this.closeOnBackdrop)
                     this.close();
-            } }), index.h("div", { key: '3a48c465707125c2de1e369e70375689fe5ff9c1', class: `drawer-panel drawer-panel--${this.position}${sizeClass ? ' ' + sizeClass : ''}`, style: panelStyle, role: "dialog", "aria-modal": "true" }, index.h("div", { key: '840bb2933bc7e2264269bbadd5d9d61649fe58fe', class: { 'drawer-header': true, 'drawer-header--headless': this.headless } }, index.h("h3", { key: 'bfd9c7db02e9db07ce32115ca6386a9840c61288', class: "drawer-header__title" }, this.drawerTitle), index.h("button", { key: '6dc350e26f74d4e3aead7697bd2f5552e49e833c', class: "drawer-header__close", onClick: () => this.close(), "aria-label": "Cerrar" }, index.h("dropi-icon", { key: 'fcc5331391009f97254db5f729c61631edc33d8c', name: "Close-small", width: "32px", height: "32px", color: "Gray-Gray-400" }))), index.h("div", { key: 'e50ae31043bde759a79fbc9b4f734e06dc6c2a3f', class: "drawer-body" }, index.h("slot", { key: 'f1f0d7314b8bd7f6fd6fdec88a818963c1d5834f' })), index.h("div", { key: 'b14833f885757bbcfa687b7b2ee1cf847301134b', class: "drawer-footer" }, index.h("slot", { key: '5cba1759160a934c3b54166914a10b1335075151', name: "footer" })))));
+            } }), index.h("div", { key: '985b7c295391fa2326ee5880bed829910c56d082', class: `drawer-panel drawer-panel--${this.position}${sizeClass ? ' ' + sizeClass : ''}`, style: panelStyle, role: "dialog", "aria-modal": "true" }, index.h("div", { key: 'be62a0009ab8c829cd20643552a66d17b8e877cf', class: { 'drawer-header': true, 'drawer-header--headless': this.headless } }, index.h("h3", { key: 'e6f6a03c224c83fe8de9a2895a07bf93b9dbdea4', class: "drawer-header__title" }, this.drawerTitle), index.h("button", { key: '66c251c8d8da1e0a0036f9bdeaeb6f09514dbfd4', class: "drawer-header__close", onClick: () => this.close(), "aria-label": "Cerrar" }, index.h("dropi-icon", { key: '150a59e552636ec623d31926fc419ec36443cc22', name: "Close-small", iconWidth: "32px", iconHeight: "32px", color: "Gray-Gray-400" }))), index.h("div", { key: '6982100fcf4e5ce4193bbff79baea9c557ad0722', class: "drawer-body" }, index.h("slot", { key: '6ae61a0451322969ddb4684b77eb5851b942dd9a' })), index.h("div", { key: '5d4df79ea4044d86edd51331a6c1cdd3a43bfc5d', class: "drawer-footer" }, index.h("slot", { key: '49de1183444123c36076e20e882952b9d802a567', name: "footer" })))));
     }
     static get watchers() { return {
         "open": [{

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

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-C8kwDvpf.js');
+var index = require('./index-CEWSDq65.js');
 
 const dropiDropdownCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.dropdown{display:flex;flex-direction:column;overflow-y:auto;max-height:var(--dropdown-height, 300px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff)}.dropdown__item{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;transition:background 0.15s;user-select:none}.dropdown__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dropdown__item--active{background:var(--Primary-Primary-50, #fff5eb)}.dropdown__avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}.dropdown__label{flex:1;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
 
 const DropiDropdown = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.modelChange = index.createEvent(this, "modelChange", 7);
+        this.modelChange = index.createEvent(this, "modelChange");
     }
     /** Options array or JSON string */
     options = [];

package/dist/cjs/dropi-empty-state.cjs.entry.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-C8kwDvpf.js');
+var index = require('./index-CEWSDq65.js');
 
 const dropiEmptyStateCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--Size-3, 12px);padding:var(--Size-6, 32px) var(--Size-5, 20px);text-align:center}.empty-state-img{max-width:200px;width:100%;height:auto;object-fit:contain;filter:brightness(0) saturate(100%) invert(73%) sepia(9%) saturate(503%) hue-rotate(187deg) brightness(91%) contrast(88%)}.empty-state-svg{width:80px;height:80px}.empty-state-placeholder{display:flex;align-items:center;justify-content:center}.empty-state-title{margin:0;font-size:var(--font-size-l, 18px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d);line-height:1.3}.empty-state-description{margin:0;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);line-height:1.6;max-width:400px}.empty-state-actions{display:flex;align-items:center;gap:var(--Size-3, 12px);flex-wrap:wrap;justify-content:center;margin-top:var(--Size-2, 8px)}`;
 
 const DropiEmptyState = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.buttonClickEvent = index.createEvent(this, "buttonClickEvent", 7);
+        this.buttonClickEvent = index.createEvent(this, "buttonClickEvent");
     }
     /** Title text (matches Angular 'title') */
     title = '';
@@ -28,7 +28,7 @@ const DropiEmptyState = class {
     /** Emitted when button is clicked — matches Angular 'buttonClickEvent' */
     buttonClickEvent;
     render() {
-        return (index.h("div", { key: '1b7c0fd20a119ae17ee09f7c68b7ae2b4e77ee98', class: "empty-state" }, index.h("div", { key: 'cb4fd9dc6a8b491359fd9cd8b6983e68f64af994', class: "empty-state-visual" }, this.imageUrl ? (index.h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (index.h("img", { class: "empty-state-img", src: `assets/icons/ilustration/${(!this.dropiIcon || String(this.dropiIcon) === 'undefined' || String(this.dropiIcon) === 'null') ? 'default' : this.dropiIcon}.svg`, alt: this.imageAlt, onError: (e) => e.target.src = 'assets/icons/ilustration/default.svg' }))), this.title && index.h("h3", { key: '14c09482953e39975c74ca454df3131e3233a712', class: "empty-state-title" }, this.title), this.description && index.h("p", { key: '5fccb02b2b21d8895c5b122aa0fb6684fc9d7611', class: "empty-state-description" }, this.description), index.h("slot", { key: '6e53d450b4dbb8cff81addd3e7fc528c599bf730' }), this.buttonText && (index.h("div", { key: '4325f23a357c43b970dce907a63f24b63b10070e', class: "empty-state-actions" }, index.h("dropi-button", { key: 'a475b2fec4e00343fa4b4fa29ac08d5564e4e21a', text: this.buttonText, preIcon: this.buttonIcon, severity: this.buttonSeverity, onClick: () => this.buttonClickEvent.emit() })))));
+        return (index.h("div", { key: '50a720a8b293a19dbabccce8f7aa0fa996e5fd63', class: "empty-state" }, index.h("div", { key: 'd13894b011225337234301bd514891d89caac3d7', class: "empty-state-visual" }, this.imageUrl ? (index.h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (index.h("img", { class: "empty-state-img", src: `assets/icons/ilustration/${(!this.dropiIcon || String(this.dropiIcon) === 'undefined' || String(this.dropiIcon) === 'null') ? 'default' : this.dropiIcon}.svg`, alt: this.imageAlt, onError: (e) => e.target.src = 'assets/icons/ilustration/default.svg' }))), this.title && index.h("h3", { key: 'eb40395b4bd3c623f27bc3290bb37427420c5e94', class: "empty-state-title" }, this.title), this.description && index.h("p", { key: 'f942c17f7a8d320bbe81dfcd45d13e56d7ea8eba', class: "empty-state-description" }, this.description), index.h("slot", { key: '513f49ffeeb77e2be1318d6d251a1bcabff2689a' }), this.buttonText && (index.h("div", { key: 'f6d9c391feee26eac44a8904e1768678bbb1604c', class: "empty-state-actions" }, index.h("dropi-button", { key: 'f9ea9563a76a80bd29b6e6aaf8405092046a62a8', text: this.buttonText, preIcon: this.buttonIcon, severity: this.buttonSeverity, onClick: () => this.buttonClickEvent.emit() })))));
     }
 };
 DropiEmptyState.style = dropiEmptyStateCss();