@dropi/ui 0.1.19 → 0.1.20

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

@@ -0,0 +1,50 @@
+import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+
+const dropiNavbarCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.navbar{display:flex;align-items:center;height:56px;padding:0 var(--Size-4, 16px);background:var(--Neutral-White, #fff);border-bottom:1px solid var(--Gray-Gray-100, #eceef4);gap:var(--Size-4, 16px);position:relative}.navbar__left{display:flex;align-items:center;gap:var(--Size-2, 8px);flex-shrink:0}.navbar__menu-btn{background:none;border:none;padding:6px;cursor:pointer;border-radius:var(--Border-1, 4px);display:flex;align-items:center;transition:background 0.15s}.navbar__menu-btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__logo{height:28px;object-fit:contain}.navbar__items{flex:1;list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:var(--Size-1, 4px)}.navbar__item{display:flex;align-items:center;gap:var(--Size-1, 4px);padding:6px var(--Size-3, 12px);background:none;border:none;border-radius:var(--Border-1, 4px);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-600, #475066);cursor:pointer;transition:background 0.15s, color 0.15s;white-space:nowrap}.navbar__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__item--active{background:var(--Primary-Primary-50, #fff5eb);color:var(--Primary-Primary-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.navbar__badge{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #fff);font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 4px}.navbar__right{display:flex;align-items:center;gap:var(--Size-2, 8px);flex-shrink:0}.navbar__icon-btn{position:relative;background:none;border:none;padding:6px;cursor:pointer;border-radius:var(--Border-1, 4px);display:flex;align-items:center;transition:background 0.15s}.navbar__icon-btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__notif-badge{position:absolute;top:2px;right:2px;background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #fff);font-size:9px;font-weight:700;min-width:14px;height:14px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 3px}.navbar__user-btn{display:flex;align-items:center;gap:var(--Size-1, 4px);background:none;border:none;padding:4px 8px;border-radius:var(--Border-1, 4px);cursor:pointer;transition:background 0.15s;font-family:inherit}.navbar__user-btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}.navbar__avatar-placeholder{width:28px;height:28px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #fff);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700)}.navbar__user-name{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
+
+const DropiNavbar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiNavItemClick = createEvent(this, "dropiNavItemClick", 7);
+        this.dropiNotificationsClick = createEvent(this, "dropiNotificationsClick", 7);
+        this.dropiUserClick = createEvent(this, "dropiUserClick", 7);
+        this.dropiMenuToggle = createEvent(this, "dropiMenuToggle", 7);
+    }
+    /** Logo URL */
+    logoUrl = '';
+    /** Logo alt */
+    logoAlt = 'Logo';
+    /** Navigation items (array or JSON string) */
+    items = [];
+    /** Active item ID */
+    activeId = '';
+    /** User name */
+    userName = '';
+    /** User avatar URL */
+    userAvatar = '';
+    /** Notification count (0 = no badge) */
+    notifications = 0;
+    /** Show menu toggle (mobile) */
+    showMenuToggle = true;
+    /** Emitted when a nav item is clicked. e.detail = item id */
+    dropiNavItemClick;
+    /** Emitted when notification bell is clicked */
+    dropiNotificationsClick;
+    /** Emitted when avatar/user is clicked */
+    dropiUserClick;
+    /** Emitted when mobile menu toggle clicked */
+    dropiMenuToggle;
+    get parsedItems() {
+        const val = this.items;
+        return typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    render() {
+        const items = this.parsedItems;
+        return (h("nav", { key: '014281e03d0d6d2619add2319c3df90a5b6246a5', class: "navbar" }, h("div", { key: '4c1ac832042995edbe98e03d9ffd722879d7667c', class: "navbar__left" }, this.showMenuToggle && (h("button", { key: 'b244829263b1fa8f10365be75f8e6a86780b23bb', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, h("dropi-icon", { key: '082a2ec0c22c31d0e50c6c4268deb91db91a4a0a', name: "Menu", width: "20px", height: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (h("img", { key: 'bb999a5b53a2e667715b8b8152e68f567bf6735d', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt }))), items.length > 0 && (h("ul", { key: '0d8fc800d7e8eb42ba7971c323dcd7366c564c6f', class: "navbar__items" }, items.map(item => (h("li", null, h("button", { class: { 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }, onClick: () => this.dropiNavItemClick.emit(item.id), type: "button" }, item.icon && h("dropi-icon", { name: item.icon, width: "16px", height: "16px", color: item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600' }), h("span", null, item.label), item.badge != null && String(item.badge) !== '0' && (h("span", { class: "navbar__badge" }, item.badge)))))))), h("div", { key: 'ce34e9989a27f875880cc674f68cd1348ba830ea', class: "navbar__right" }, h("button", { key: '8786409d275d115e363d4675d51d33a004881287', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, h("dropi-icon", { key: '6d8475c54109cf3535464029d906779a1ef5613d', name: "Bell", width: "20px", height: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (h("span", { key: 'f38458c5cf0e805cf7bc20ca6d9c2f59570c2813', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), h("button", { key: 'aa82799088ef91868967988a48b51d5426175733', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
+            ? h("img", { class: "navbar__avatar", src: this.userAvatar, alt: this.userName })
+            : h("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && h("span", { key: '512bb7945572d2a2c117d8fa27d82d1d53b78120', class: "navbar__user-name" }, this.userName), h("dropi-icon", { key: 'feac223f33239f1b1d2add2139aef3408a73de44', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })))));
+    }
+};
+DropiNavbar.style = dropiNavbarCss();
+
+export { DropiNavbar as dropi_navbar };

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

@@ -1,14 +1,14 @@
-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 dropiOtpSendCodeCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.otp{display:flex;flex-direction:column;align-items:center;gap:var(--Size-4, 16px)}.otp__label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066);text-align:center;margin:0}.otp__inputs{display:flex;gap:var(--Size-2, 8px)}.otp__digit{width:48px;height:56px;border:2px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);text-align:center;font-size:var(--font-size-xl, 20px);font-weight:var(--font-weight-bold, 700);font-family:inherit;color:var(--Gray-Gray-800, #1a2033);outline:none;transition:border-color 0.15s;background:var(--Neutral-White, #fff)}.otp__digit:focus{border-color:var(--Info-Info-500, #50a5f1)}.otp__digit--filled{border-color:var(--Success-Success-500, #34c55a);color:var(--Success-Success-500, #34c55a)}.otp__digit--error{border-color:var(--Error-Error-500, #f46a6b)}.otp__error{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b);text-align:center}.otp__resend{text-align:center}.otp__countdown{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6)}.otp__resend-btn{background:none;border:none;padding:0;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d);cursor:pointer;text-decoration:underline}`;
+const dropiOtpSendCodeCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.otp{display:flex;flex-direction:column;align-items:center;gap:var(--Size-4, 16px)}.otp__label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066);text-align:center;margin:0}.otp__inputs{display:flex;gap:var(--Size-4, 16px)}.otp__digit{width:56px;height:56px;border:1.5px solid var(--Gray-Gray-200, #d3d7de);border-radius:var(--Border-2, 8px);text-align:center;font-size:22px;font-weight:var(--font-weight-bold, 700);font-family:inherit;color:var(--Gray-Gray-800, #495057);outline:none;transition:border-color 0.15s ease;background:var(--Neutral-White, #fff)}.otp__digit:focus{border:2px solid var(--Primary-Primary-500, #f49a3d)}.otp__digit--filled{border:1px solid var(--Success-Success-500, #0abb87);color:var(--Neutral-Neutral-900, #0e111a)}.otp__digit--error{border:1px solid var(--Error-Error-500, #f46a6b)}.otp__error{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b);text-align:center}.otp__resend{text-align:center}.otp__countdown{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6)}.otp__resend-btn{background:none;border:none;padding:0;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d);cursor:pointer;text-decoration:underline}`;
 
 const OTP_LENGTH = 6;
 const RESEND_SECONDS = 30;
 const DropiOtpSendCode = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiCodeCompleted = createEvent(this, "dropiCodeCompleted");
-        this.dropiResend = createEvent(this, "dropiResend");
+        this.dropiCodeCompleted = createEvent(this, "dropiCodeCompleted", 7);
+        this.dropiResend = createEvent(this, "dropiResend", 7);
     }
     /** Delivery method label */
     engine = 'email';
@@ -75,14 +75,14 @@ const DropiOtpSendCode = class {
     }
     render() {
         const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
-        return (h("div", { key: '9c8e1efcdb61bd8f6988826b769240354d42339e', class: "otp" }, this.showLabelContact && (h("p", { key: 'dd8ccef18ed569371c1bba5fc2a39a43b6daf1b9', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: 'a3fc70430e66b153cf12ed2c0240f2fb00ec4a47' }, " ", this.labelContact))), h("div", { key: '450a3a7923a363c1ebbbbd06ca1cc291eba3281c', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, Array.from({ length: OTP_LENGTH }, (_, i) => (h("input", { key: i, ref: (el) => {
+        return (h("div", { key: '385270734b7b0d6be9e4c8fb4767feae951eef2a', class: "otp" }, this.showLabelContact && (h("p", { key: '6b837aa51683c913c14f001781b037dfc802c3f7', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: 'ea75ddf873d4380e100477ac4e939a4e2e1b2ef3' }, " ", this.labelContact))), h("div", { key: 'ecdd5b47d1acbee3a6d5a67bbe189471d1af234c', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, Array.from({ length: OTP_LENGTH }, (_, i) => (h("input", { key: i, ref: (el) => {
                 if (el)
                     this.inputs[i] = el;
             }, class: {
                 'otp__digit': true,
                 'otp__digit--filled': this.digitStates[i] === 'filled',
                 'otp__digit--error': this.error,
-            }, type: "text", inputMode: "numeric", maxLength: 1, value: this.digits[i], onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (h("p", { key: '4c6f9131d4a5b197dea318d6309540823b4cdfeb', class: "otp__error" }, this.errorMessage)), h("div", { key: 'a6a32b9ee19bc1b0394d5c14fbc44ddf73536630', class: "otp__resend" }, this.canResend ? (h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
+            }, type: "text", inputMode: "numeric", maxLength: 1, value: this.digits[i], onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (h("p", { key: '99bb12e401d9b7758ae6996c9f1b156f49ada55e', class: "otp__error" }, this.errorMessage)), h("div", { key: '61e80ca8a938025ad49c453255a23b3b44880e7e', class: "otp__resend" }, this.canResend ? (h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
     }
 };
 DropiOtpSendCode.style = dropiOtpSendCodeCss();

package/dist/esm/dropi-paginator.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 dropiPaginatorCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.paginator{display:flex;align-items:center;justify-content:flex-end;gap:var(--Size-4, 16px);flex-wrap:wrap}.paginator-pages{display:flex;align-items:center;gap:var(--Size-1, 4px)}.paginator-btn{width:32px;height:32px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s ease}.paginator-btn:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.paginator-btn:disabled{opacity:0.4;cursor:not-allowed}.paginator-btn--active{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #fff);font-weight:var(--font-weight-bold, 700)}.paginator-btn--active:hover{background:var(--Primary-Primary-500, #f49a3d)}.paginator-btn--arrow{width:auto;padding:0 var(--Size-2, 8px);border-radius:var(--Border-1, 4px);gap:4px}.paginator-btn--arrow:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.paginator-label{font-size:var(--font-size-s, 12px);color:inherit}.paginator-ellipsis{color:var(--Gray-Gray-400, #858ea6);padding:0 4px;font-size:var(--font-size-s, 12px);display:flex;align-items:center}.paginator-size{display:flex;align-items:center;gap:var(--Size-2, 8px)}.paginator-size-label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c)}.paginator-size-select{height:32px;padding:0 var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-1, 4px);background:var(--Neutral-White, #fff);color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;outline:none}`;
 
 const DropiPaginator = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiPageChange = createEvent(this, "dropiPageChange");
+        this.dropiPageChange = createEvent(this, "dropiPageChange", 7);
     }
     /** Total number of items */
     total = 0;
@@ -74,9 +74,9 @@ const DropiPaginator = class {
         const pages = this.pageNumbers;
         const isFirst = this.page <= 1;
         const isLast = this.page >= this.totalPages;
-        return (h("div", { key: '7a2b5b626be626d66d33cb7857d9243440559587', class: "paginator" }, this.showPageSizeSelector && (h("div", { key: 'e113aee78c554393e41ad1e2ec94daa24c65043e', class: "paginator-size" }, h("span", { key: 'ee5124c3b99a5d80b309df9d41daaf5c530a1313', class: "paginator-size-label" }, "Por p\u00E1gina:"), h("select", { key: '8c58fd97f11866a2467e4412be2cc18252d55d79', class: "paginator-size-select", onChange: (e) => this.onPageSizeChange(e) }, this.parsedOptions.map(opt => (h("option", { value: opt, selected: opt === this.pageSize }, opt)))))), h("div", { key: 'd727c882a91240cc9d777156c7b6cd2fac01ca67', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: '7efb966e0f8a6e8270ec8fda44551072acb46152', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina" }, h("dropi-icon", { key: 'ac59bf489afc4622101bdeaa2b1eb9d8628041d4', name: "Arrow-double-small-left", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: '0347c7803eed753d73fd0260330853995e74e734', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.page - 1), "aria-label": "Anterior" }, h("dropi-icon", { key: '7097ac1ba68a1953c686022ea73f812437cc96cd', name: "Dropdown-left", width: "16px", height: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: '786be5b0f0116c35c2685356607695e8f22328e0', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
+        return (h("div", { key: '23b6e4c63f01a484e61cea9fb6188382848cf675', class: "paginator" }, this.showPageSizeSelector && (h("div", { key: '0cfb3aea09339b51e65b2314b1da9915b384c92a', class: "paginator-size" }, h("span", { key: 'bef7700fdd17d4aaa5d800ad117f90b34e56381a', class: "paginator-size-label" }, "Por p\u00E1gina:"), h("select", { key: 'c25162f2ce42bbc00125a28d707e72fc214b4864', class: "paginator-size-select", onChange: (e) => this.onPageSizeChange(e) }, this.parsedOptions.map(opt => (h("option", { value: opt, selected: opt === this.pageSize }, opt)))))), h("div", { key: 'f8fd71442442725779786ea3f2334cccf82d237f', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: '899e629c0922baa0b71646912e4eed6e6c44536b', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina" }, h("dropi-icon", { key: '0e847019e80d9e6c8d448b904691518a87a3afff', name: "Arrow-double-small-left", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: '606e96d5e1495c17ac86d66d560116574f2aa962', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.page - 1), "aria-label": "Anterior" }, h("dropi-icon", { key: '695bbfc36e42040c530b4338c9118d9b1da4c1ea', name: "Dropdown-left", width: "16px", height: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: 'c3bc6d3c292f07b782aba6672715163d50907d93', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
             ? h("span", { class: "paginator-ellipsis", key: `e${i}` }, "\u2026")
-            : h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.page }, onClick: () => this.goTo(p), "aria-current": p === this.page ? 'page' : undefined }, p)), !isLast && (h("button", { key: 'e462ff2d53d1b1361e813701fb549505e0eada30', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.page + 1), "aria-label": "Siguiente" }, !this.noLabels && h("span", { key: '1d40fa0b8b69c72c3e7eed4cd4732f009508e052', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: 'efcc1414a52a3946f38e2b7790bcbed2fce42328', name: "Dropdown-Right", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: 'ad08274cb7d624d141ee7c1599fb5662e5715aca', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina" }, h("dropi-icon", { key: '579969aa3a6c0bc538a2d68fc399e017a836136d', name: "Arrow-double-small-right", width: "16px", height: "16px", color: "Gray-Gray-600" }))))));
+            : h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.page }, onClick: () => this.goTo(p), "aria-current": p === this.page ? 'page' : undefined }, p)), !isLast && (h("button", { key: '83b89c14ca3fc63679839a4bcb3b416412ebcb01', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.page + 1), "aria-label": "Siguiente" }, !this.noLabels && h("span", { key: 'e896eb8dd2bbabd932014a100a138af89fdfd2f4', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: '2f9ba001d0ca94f8330b910a6dd952d940c622c8', name: "Dropdown-Right", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: '6531b71b3767ae872464605bad8ce8e1a5d609d1', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina" }, h("dropi-icon", { key: '9411fdbec9291cf3a3418152efc6ce951e6c4006', name: "Arrow-double-small-right", width: "16px", height: "16px", color: "Gray-Gray-600" }))))));
     }
     static get watchers() { return {
         "pageSizeOptions": [{

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

@@ -0,0 +1,82 @@
+import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+
+const dropiPhoneInputCss = () => `:host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.phone-label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.phone-row{display:flex;align-items:center;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);height:40px;overflow:hidden;transition:border-color 0.2s}.phone-row:focus-within{border-color:var(--Info-Info-500, #50a5f1)}.phone-row--error{border-color:var(--Error-Error-500, #f46a6b)}.phone-row--disabled{background:var(--Gray-Gray-50, #f7f8fa);opacity:0.6;pointer-events:none}.phone-selector{display:flex;align-items:center;gap:4px;padding:0 var(--Size-2, 8px);background:none;border:none;cursor:pointer;height:100%;flex-shrink:0}.phone-selector:disabled{cursor:default}.phone-selector__flag{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1a2033);letter-spacing:0.5px}.phone-selector__dial{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.phone-divider{width:1px;height:20px;background:var(--Gray-Gray-200, #c3c9d9);flex-shrink:0}.phone-input{flex:1;height:100%;padding:0 var(--Size-2, 8px);border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.phone-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.phone-error{margin:4px 0 0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b)}.phone-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--Neutral-White, #fff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);box-shadow:0 4px 16px rgba(0,0,0,0.08);z-index:200;max-height:240px;overflow-y:auto}.phone-dropdown__search-wrap{padding:var(--Size-2, 8px);border-bottom:1px solid var(--Gray-Gray-100, #eceef4);position:sticky;top:0;background:var(--Neutral-White, #fff)}.phone-dropdown__search{width:100%;height:32px;padding:0 var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-1, 4px);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);outline:none}.phone-dropdown__search:focus{border-color:var(--Info-Info-500, #50a5f1)}.phone-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}.phone-dropdown__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.phone-dropdown__item--active{background:var(--Primary-Primary-50, #fff5eb)}.phone-dropdown__code{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1a2033);width:28px;flex-shrink:0}.phone-dropdown__name{flex:1;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.phone-dropdown__dial{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6);flex-shrink:0}.phone-dropdown__empty{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-400, #858ea6);text-align:center}`;
+
+const COUNTRIES = [
+    { name: 'Colombia', code: 'CO', dial: '+57', maxLength: 10 },
+    { name: 'Ecuador', code: 'EC', dial: '+593', maxLength: 9 },
+    { name: 'México', code: 'MX', dial: '+52', maxLength: 10 },
+    { name: 'Perú', code: 'PE', dial: '+51', maxLength: 9 },
+    { name: 'Chile', code: 'CL', dial: '+56', maxLength: 9 },
+    { name: 'Argentina', code: 'AR', dial: '+54', maxLength: 10 },
+    { name: 'Venezuela', code: 'VE', dial: '+58', maxLength: 10 },
+    { name: 'Brasil', code: 'BR', dial: '+55', maxLength: 11 },
+    { name: 'Estados Unidos', code: 'US', dial: '+1', maxLength: 10 },
+    { name: 'España', code: 'ES', dial: '+34', maxLength: 9 },
+];
+const DropiPhoneInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiCodeChange = createEvent(this, "dropiCodeChange", 7);
+        this.dropiPhoneChange = createEvent(this, "dropiPhoneChange", 7);
+    }
+    /** Initial country dial code (e.g. "+57") */
+    codArea = '+57';
+    /** Phone number value */
+    value = '';
+    /** Input placeholder */
+    placeholder = 'Número de teléfono';
+    /** Disabled state */
+    disabled = false;
+    /** Show error state */
+    isValid = true;
+    /** Error message */
+    errorMessage = 'Número inválido';
+    /** Label */
+    label = '';
+    open = false;
+    search = '';
+    /** Emitted when country dial code changes. e.detail = dial code string */
+    dropiCodeChange;
+    /** Emitted when phone number changes. e.detail = phone number string */
+    dropiPhoneChange;
+    codAreaChanged() {
+        this.value = '';
+    }
+    get selectedCountry() {
+        return COUNTRIES.find(c => c.dial === this.codArea) ?? COUNTRIES[0];
+    }
+    get filtered() {
+        if (!this.search)
+            return COUNTRIES;
+        const q = this.search.toLowerCase();
+        return COUNTRIES.filter(c => c.name.toLowerCase().includes(q) || c.dial.includes(q));
+    }
+    selectCountry(c) {
+        this.codArea = c.dial;
+        this.open = false;
+        this.search = '';
+        this.dropiCodeChange.emit(c.dial);
+    }
+    handleInput(e) {
+        const raw = e.target.value.replace(/\D/g, '');
+        this.value = raw.slice(0, this.selectedCountry.maxLength);
+        e.target.value = this.value;
+        this.dropiPhoneChange.emit(this.value);
+    }
+    render() {
+        const country = this.selectedCountry;
+        return (h("div", { key: '8a22ead8fdf5d8916dd6d5376600ded1528f23e3', class: "phone-wrap" }, this.label && h("label", { key: '5d531f606de5691eeb608a3a32b71bd1b7925ae1', class: "phone-label" }, this.label), h("div", { key: '97d858e4dd57114e63bb460970ea5e0a22e3a4a7', class: { 'phone-row': true, 'phone-row--error': !this.isValid, 'phone-row--disabled': this.disabled } }, h("button", { key: '2f18bc35a7698d9c5f24dad68458ff27161c1b9d', type: "button", class: "phone-selector", disabled: this.disabled, onClick: () => {
+                if (!this.disabled)
+                    this.open = !this.open;
+            }, "aria-haspopup": "listbox", "aria-expanded": this.open }, h("span", { key: 'e0e5c9c22eab18335ce75ba273bf98934ad2fec0', class: "phone-selector__flag" }, country.code), h("span", { key: '9494233c07ed5f5fe6f6ad71f1f9d4c2b94be249', class: "phone-selector__dial" }, country.dial), h("dropi-icon", { key: '721e47d92b5dc9f973a5ce08b383a87371fdb736', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })), h("div", { key: '93183e161f42b12cd42daa488c49318b2c378351', class: "phone-divider" }), h("input", { key: 'd9b4254f760cf967b2e0ca27946968d2cfc0ca86', class: "phone-input", type: "tel", inputmode: "numeric", placeholder: this.placeholder, value: this.value, disabled: this.disabled, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) })), !this.isValid && (h("p", { key: '62a89722bdab5c9b3a67c444543679acfc91f4e9', class: "phone-error" }, this.errorMessage)), this.open && (h("div", { key: 'd51d4d3a43eb6d823dd9039d534f97e6a456b343', class: "phone-dropdown" }, h("div", { key: 'd3f5912e02d62fdbec2b8a859b49c80b94047a2c', class: "phone-dropdown__search-wrap" }, h("input", { key: '2349669feca48b0760277a4288420f2680eb41c4', class: "phone-dropdown__search", type: "text", placeholder: "Buscar pa\u00EDs...", value: this.search, onInput: (e) => this.search = e.target.value })), this.filtered.length === 0 ? (h("div", { class: "phone-dropdown__empty" }, "Sin resultados")) : (this.filtered.map(c => (h("div", { class: { 'phone-dropdown__item': true, 'phone-dropdown__item--active': c.dial === this.codArea }, onMouseDown: (e) => { e.preventDefault(); this.selectCountry(c); } }, h("span", { class: "phone-dropdown__code" }, c.code), h("span", { class: "phone-dropdown__name" }, c.name), h("span", { class: "phone-dropdown__dial" }, c.dial)))))))));
+    }
+    static get watchers() { return {
+        "codArea": [{
+                "codAreaChanged": 0
+            }]
+    }; }
+};
+DropiPhoneInput.style = dropiPhoneInputCss();
+
+export { DropiPhoneInput as dropi_phone_input };

package/dist/esm/dropi-radio-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 dropiRadioButtonCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.dropi-radio-button{display:flex;align-items:center;justify-content:flex-start;gap:20px}label{display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);line-height:1.5}input[type='radio']{appearance:none;-webkit-appearance:none;width:20px;height:20px;min-width:20px;border:2px solid var(--Gray-Gray-200, #c3c9d9);border-radius:50%;background-color:transparent;position:relative;cursor:pointer;outline:none;flex-shrink:0;align-self:center;vertical-align:middle;margin:0}input[type='radio']::before{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;background-color:var(--Primary-Primary-400, #f7b46f);border-radius:50%;display:none}input[type='radio']:checked{border:2px solid var(--Primary-Primary-500, #f49a3d)}input[type='radio']:checked::before{display:block}`;
 
 const DropiRadioButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiChange = createEvent(this, "dropiChange");
+        this.dropiChange = createEvent(this, "dropiChange", 7);
     }
     /** Label text displayed next to the radio */
     label = '';
@@ -31,7 +31,7 @@ const DropiRadioButton = class {
         this.dropiChange.emit(e);
     }
     render() {
-        return (h("div", { key: 'd1f58dca9ddeacc153cfd1808fdc19d8c830e738', class: "dropi-radio-button" }, h("label", { key: '569169ec20f9d8fe69abe1869aed04f80f569fe8', htmlFor: this.inputId }, h("input", { key: '47f93ccdeedb805ec79e3f349aefb1b5e818437d', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
+        return (h("div", { key: '50ae300b1dc5972c7c8979f7711edd5f59109653', class: "dropi-radio-button" }, h("label", { key: 'c91a4ee63c63fe9ae437f344fa1b249db227a4cb', htmlFor: this.inputId }, h("input", { key: 'ad993a1748315909539f512c09176713693a99d9', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/esm/dropi-radio-selection-list.entry.js

@@ -1,12 +1,12 @@
-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 dropiRadioSelectionListCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.rsl__search{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);margin-bottom:var(--Size-2, 8px)}.rsl__search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.rsl__list{display:flex;flex-direction:column;gap:var(--Size-2, 8px)}.rsl__item{display:flex;align-items:flex-start;gap:var(--Size-3, 12px);padding:var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);cursor:pointer;transition:border-color 0.15s, background 0.15s}.rsl__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.rsl__item--selected{border-color:var(--Primary-Primary-500, #f49a3d);background:var(--Primary-Primary-50, #fff5eb)}.rsl__radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--Gray-Gray-300, #a3abbf);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;transition:border-color 0.15s}.rsl__radio--checked{border-color:var(--Primary-Primary-500, #f49a3d)}.rsl__radio-dot{width:8px;height:8px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.rsl__content{display:flex;flex-direction:column;gap:2px}.rsl__name{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d)}.rsl__desc{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c)}`;
 
 const DropiRadioSelectionList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiChange = createEvent(this, "dropiChange");
-        this.dropiSearch = createEvent(this, "dropiSearch");
+        this.dropiChange = createEvent(this, "dropiChange", 7);
+        this.dropiSearch = createEvent(this, "dropiSearch", 7);
     }
     /** Options array or JSON string */
     options = [];
@@ -35,10 +35,10 @@ const DropiRadioSelectionList = class {
         return this.parsedOptions.filter(o => o.name?.toLowerCase().includes(q));
     }
     render() {
-        return (h("div", { key: '211875c5fad7a56c67628e888d6d2d497d0c8e8b', class: "rsl" }, this.showFilter && (h("div", { key: '324adac3e9c8f3a9e93d7da82144395bdb619345', class: "rsl__search" }, h("dropi-icon", { key: 'fb6dd199750ffb508f75404faa4a3014350aa52a', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: 'f2121473bdfe6b98441f12f2751a9d954468110b', class: "rsl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
+        return (h("div", { key: '162776e2e2c09a26761b276a078d526308d205fd', class: "rsl" }, this.showFilter && (h("div", { key: 'ea0d6f907ff1ff79ce672b0cbb75572f48d6c44b', class: "rsl__search" }, h("dropi-icon", { key: 'c7dc88e18883942492f778f53932fd99cbd1a9bc', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: '07ea27e2502f8aeaedb24ab4cfdb42c1573f6125', class: "rsl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
                 this.filterText = e.target.value;
                 this.dropiSearch.emit(this.filterText);
-            } }))), h("div", { key: '6ad89bc1840bc512bb7c78839186092d7fc73d3b', class: "rsl__list" }, this.filtered.map(opt => {
+            } }))), h("div", { key: '95a4463b79a0795c8c0e7a30047f4ccd5f1d656d', class: "rsl__list" }, this.filtered.map(opt => {
             const isSelected = opt.id === this.selectedOption;
             return (h("div", { class: { 'rsl__item': true, 'rsl__item--selected': isSelected }, key: opt.id, onClick: () => { this.selectedOption = opt.id; this.dropiChange.emit(opt.id); } }, h("div", { class: { 'rsl__radio': true, 'rsl__radio--checked': isSelected } }, isSelected && h("div", { class: "rsl__radio-dot" })), h("div", { class: "rsl__content" }, h("span", { class: "rsl__name" }, opt.name), this.typeLayout === 'description' && opt.description && (h("span", { class: "rsl__desc" }, opt.description)))));
         }))));

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-Twbb5MNM.js';
+import { r as registerInstance, h } from './index-Tbza12Gt.js';
 
 const dropiReadMoreCss = () => `:host{display:block}.read-more__text{margin:0 0 4px;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-800, #1a2033);line-height:1.5}.read-more__toggle{background:none;border:none;padding:0;margin:0;font-size:var(--font-size-s, 12px);font-family:inherit;font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d);cursor:pointer;text-decoration:underline}.read-more__toggle:hover{color:var(--Primary-Primary-600, #d4872e)}`;
 
@@ -26,7 +26,7 @@ const DropiReadMore = class {
     }
     render() {
         const showToggle = this.needsTruncation && (this.expanded ? this.showSeeLess : true);
-        return (h("div", { key: 'c1f9429714adae91cbc8431ef890304091415618', class: "read-more" }, h("p", { key: 'f17394eeeec531bdc2d77e3ad853cfb5079864bc', class: "read-more__text" }, this.displayText), showToggle && (h("button", { key: 'c5a1febc2557c2d96114edb10479048ab3af10b8', class: "read-more__toggle", onClick: () => this.expanded = !this.expanded }, this.expanded ? 'Ver menos' : 'Ver más'))));
+        return (h("div", { key: '82c3554cc4488391be3b70c5e3bbb5a38a957ec8', class: "read-more" }, h("p", { key: '48287caef84486c77d8e8f36080c59c32c90cd00', class: "read-more__text" }, this.displayText), showToggle && (h("button", { key: 'b808d8cf10d65381e16cdda460db8ceb4d8467c0', class: "read-more__toggle", onClick: () => this.expanded = !this.expanded }, this.expanded ? 'Ver menos' : 'Ver más'))));
     }
 };
 DropiReadMore.style = dropiReadMoreCss();

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

@@ -1,15 +1,15 @@
-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 dropiSearchCss = () => `:host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.search-label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.search-input-row{position:relative;display:flex;align-items:center;width:100%}.search-icon{position:absolute;left:10px;pointer-events:none;z-index:1}.search-input{width:100%;height:40px;padding:0 36px 0 34px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);outline:none;transition:border-color 0.2s}.search-input:focus{border-color:var(--Info-Info-500, #50a5f1)}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-clear{position:absolute;right:10px;display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer;z-index:1}.search-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:var(--dropdown-height, 240px);overflow-y:auto;background:var(--Neutral-White, #fff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);box-shadow:0 4px 16px rgba(0, 0, 0, 0.08);z-index:100}.search-option{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;transition:background 0.15s;user-select:none}.search-option:hover{background:var(--Gray-Gray-50, #f7f8fa)}.search-option--selected{background:var(--Primary-Primary-50, #fff5eb)}.search-option__label{flex:1;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-no-results{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-400, #858ea6);text-align:center}`;
 
 const DropiSearch = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiInput = createEvent(this, "dropiInput");
-        this.dropiBlur = createEvent(this, "dropiBlur");
-        this.dropiKeyEnter = createEvent(this, "dropiKeyEnter");
-        this.dropiClear = createEvent(this, "dropiClear");
-        this.dropiChange = createEvent(this, "dropiChange");
+        this.dropiInput = createEvent(this, "dropiInput", 7);
+        this.dropiBlur = createEvent(this, "dropiBlur", 7);
+        this.dropiKeyEnter = createEvent(this, "dropiKeyEnter", 7);
+        this.dropiClear = createEvent(this, "dropiClear", 7);
+        this.dropiChange = createEvent(this, "dropiChange", 7);
     }
     /** Placeholder text */
     placeholder = 'Buscar...';
@@ -92,10 +92,10 @@ const DropiSearch = class {
     }
     render() {
         const showDropdown = this.open && this.parsedOptions.length > 0;
-        return (h("div", { key: '279addf53afde1573747ffaf657a13160eeb3743', class: "search-wrap" }, this.label && h("label", { key: '1f85892d998de1e9086ea6d8d077ace4d92ec6bd', class: "search-label" }, this.label), h("div", { key: 'af9a3592bb880598d6aa9790a2929d813a268b83', class: "search-input-row" }, h("dropi-icon", { key: '02bfc0bb9319e7918dcd9e24ebe5bd8d4c23df24', class: "search-icon", name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: '62faea9197d2f376d0befe0c740865386877474a', class: "search-input", type: "text", placeholder: this.placeholder, value: this.value, maxLength: this.maxlength, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => {
+        return (h("div", { key: 'f7b5b5256a42dc534286dd02248b419fddd74d39', class: "search-wrap" }, this.label && h("label", { key: '721b09602381aad6f1f72acdc1029556222144c8', class: "search-label" }, this.label), h("div", { key: 'a6c9cff477367a5a6e3653ddd2ae56066acc9236', class: "search-input-row" }, h("dropi-icon", { key: '95a51114f701aa87c258e620ccd60e2282830554', class: "search-icon", name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: 'fc0f13786b69d08a1fa71accf5316ca98d6e3823', class: "search-input", type: "text", placeholder: this.placeholder, value: this.value, maxLength: this.maxlength, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => {
                 if (this.parsedOptions.length)
                     this.open = true;
-            }, onBlur: () => { setTimeout(() => this.open = false, 150); this.dropiBlur.emit(); } }), this.showClear && this.value && (h("button", { key: '9ca3eb1c01aa527768fe0b34d60f2e8e4637fd20', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, h("dropi-icon", { key: '4dbd5f3d1226b6925a832fc4651e5c3610f33575', name: "Close-small", width: "16px", height: "16px", color: "Gray-Gray-400" })))), showDropdown && (h("div", { key: '0f60b572e94cd5d9c4ef0595a2345314ea2622eb', class: "search-dropdown", style: { '--dropdown-height': this.dropdownHeight } }, this.filtered.length === 0 ? (h("div", { class: "search-no-results" }, "Sin resultados")) : (this.filtered.map((opt, i) => (h("div", { class: { 'search-option': true, 'search-option--selected': this.isSelected(opt) }, key: i, onMouseDown: (e) => { e.preventDefault(); this.selectOption(opt); } }, this.multiSelect && h("dropi-checkbox", { checked: this.isSelected(opt) }), h("span", { class: "search-option__label" }, opt[this.labelKey])))))))));
+            }, onBlur: () => { setTimeout(() => this.open = false, 150); this.dropiBlur.emit(); } }), this.showClear && this.value && (h("button", { key: 'e16e8746a1800927966aec5268c73bf8c4c10275', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, h("dropi-icon", { key: '691106cf972751b909d1a0a467268098e3ff02e8', name: "Close-small", width: "16px", height: "16px", color: "Gray-Gray-400" })))), showDropdown && (h("div", { key: '41f2d2f38dbe9d5fb1c48e1b960888fb8cc5738b', class: "search-dropdown", style: { '--dropdown-height': this.dropdownHeight } }, this.filtered.length === 0 ? (h("div", { class: "search-no-results" }, "Sin resultados")) : (this.filtered.map((opt, i) => (h("div", { class: { 'search-option': true, 'search-option--selected': this.isSelected(opt) }, key: i, onMouseDown: (e) => { e.preventDefault(); this.selectOption(opt); } }, this.multiSelect && h("dropi-checkbox", { checked: this.isSelected(opt) }), h("span", { class: "search-option__label" }, opt[this.labelKey])))))))));
     }
     static get watchers() { return {
         "options": [{

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

@@ -1,15 +1,15 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Twbb5MNM.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Tbza12Gt.js';
 
 const dropiSelectCss = () => `:host{display:block;width:100%;text-align:left}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}.custom-select label{display:block;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.disabled-label{color:var(--Gray-Gray-400, #858ea6) !important}.asterisk{color:var(--Error-Error-500, #f46a6b)}.dropdown-container{display:flex;align-items:center;gap:4px}.left-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-m, 14px);white-space:nowrap}.select-button{box-sizing:border-box;width:100%;height:40px;padding:0 0.75rem;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.2s ease;gap:8px}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-completed{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.select-button-error{border-color:var(--Error-Error-500, #f46a6b) !important}.no-border{border:none !important;color:var(--Gray-Gray-600, #475066);padding:var(--Size-4, 16px);background-color:transparent !important;gap:var(--Size-2, 8px)}.no-border:disabled{background-color:transparent !important}.button-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1;min-width:0}.elipsis{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-dropdown-overlay{position:fixed;max-height:250px;overflow-y:auto;list-style:none;padding:var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);margin:0;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);box-shadow:0px 8px 24px rgba(0, 0, 0, 0.12);z-index:9999;animation:dropdown-open 120ms ease-out}@keyframes dropdown-open{from{opacity:0;transform:scaleY(0.95);transform-origin:top}to{opacity:1;transform:scaleY(1);transform-origin:top}}.option{box-sizing:border-box;width:100%;min-height:40px;border-radius:var(--Border-2, 8px);padding:var(--Size-3, 12px) var(--Size-4, 16px);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:var(--Size-2, 8px);transition:background 0.15s ease}.option:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.option:disabled,.disabled-option{opacity:0.5;cursor:not-allowed}.option.selected-option:not(.option-radio){background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-group-title{padding:var(--Size-3, 12px) var(--Size-4, 16px);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);color:var(--Gray-Gray-500, #69738c);list-style:none}.option-group{padding-left:var(--Size-6, 32px)}.sticky-search{position:sticky;top:calc(-1 * var(--Size-4, 16px));background:var(--Neutral-White, #fff);z-index:10;margin:calc(-1 * var(--Size-4, 16px)) calc(-1 * var(--Size-4, 16px)) 0;padding:var(--Size-2, 8px) var(--Size-4, 16px);border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2);list-style:none}.search-wrapper{display:flex;align-items:center;gap:8px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);padding:6px 10px;background:var(--Neutral-White, #fff)}.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}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-clear{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.multi-checkbox{width:18px;height:18px;min-width:18px;border-radius:var(--Border-1, 4px);border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s, border-color 0.15s}.multi-checkbox.checked{background:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d)}.option-radio{display:flex;align-items:center;gap:12px}.option-radio.selected-option{border-radius:var(--Border-2, 8px);background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-radio.selected-option .option-second-label{color:var(--Primary-Primary-500, #f49a3d)}.radio{width:20px;height:20px;min-width:20px;border-radius:50%;border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0}.radio.selected{border-color:var(--Primary-Primary-500, #f49a3d)}.circle{width:12px;height:12px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.labels-container{display:flex;justify-content:space-between;width:100%;min-width:0}.option-image{width:24px;height:24px;border-radius:60px;object-fit:cover;flex-shrink:0}.small-image{width:20px;height:20px}.option-image-fallback{width:24px;height:24px;border-radius:60px;background:var(--Primary-Primary-500, #f49a3d);color:white;font-size:13px;font-weight:bold;display:flex;justify-content:center;align-items:center;flex-shrink:0}.small-image.option-image-fallback{width:20px;height:20px}.option-second-label{color:var(--Gray-Gray-700, #32394d);font-weight:700;white-space:nowrap}.flag-placeholder{font-size:11px;font-weight:600;color:var(--Gray-Gray-500, #69738c);flex-shrink:0}.select-helper,.select-helper-error{display:flex;gap:var(--Size-1, 4px);align-items:center;margin-top:var(--Size-1, 4px)}.select-helper span{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.select-helper-error span{color:var(--Error-Error-500, #f46a6b);font-size:var(--font-size-xs, 10px)}.no-results{padding:var(--Size-3, 12px) var(--Size-4, 16px);color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 12px);list-style:none;text-align:center}`;
 
 const DropiSelect = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiChange = createEvent(this, "dropiChange");
-        this.dropiClear = createEvent(this, "dropiClear");
-        this.dropiSearch = createEvent(this, "dropiSearch");
-        this.dropiScrollEnd = createEvent(this, "dropiScrollEnd");
-        this.dropiKeyEnter = createEvent(this, "dropiKeyEnter");
+        this.dropiChange = createEvent(this, "dropiChange", 7);
+        this.dropiClear = createEvent(this, "dropiClear", 7);
+        this.dropiSearch = createEvent(this, "dropiSearch", 7);
+        this.dropiScrollEnd = createEvent(this, "dropiScrollEnd", 7);
+        this.dropiKeyEnter = createEvent(this, "dropiKeyEnter", 7);
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -313,7 +313,7 @@ const DropiSelect = class {
         ]), !this.isGrouped && this.filteredOptions.map(opt => this.renderOption(opt)), this.filteredOptions.length === 0 && (h("li", { class: "no-results" }, "Sin resultados"))));
     }
     render() {
-        return (h("div", { key: '276daabfaed1bf21977f4dfee1c5da3aefed63ba', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: '59a04e375f10bf2f9f85f17aaa47fe7b169f98d3', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: 'e801bfc29322e1e389b0d838a38b04168cb5a6b3', class: "asterisk" }, " *"))), h("div", { key: '190fdc37fc2b7464aea841514fb3ab7f71ef0d04', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: '41c952f237f08af7d499d82fb49b9230fccfed99', class: "left-label" }, this.label)), this.renderTrigger()), this.helperText && !this.invalid && (h("div", { key: 'f87a7f09f8c0cb3f4768e4c18604dc626a8769a7', class: "select-helper" }, h("span", { key: 'fc967f18d637b2469997ec67d252e0f28c66ec7d' }, this.helperText))), this.invalid && this.errorText && (h("div", { key: '3b59c1c81921f5a5890d464c4d9072ef09965232', class: "select-helper-error" }, h("dropi-icon", { key: '83d0975b4e606ec11e1f8f1a43ec8407d0b22c0e', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: 'ab365dad523b9069006d12942b169477b26a242e' }, this.errorText))), this.renderDropdown()));
+        return (h("div", { key: '65b15f83612bdb8b11eb321b2c92321b4c621862', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: '10688d90de470bdc4cdd70c21fd62cc820475c9b', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: 'c8c7e5d8fcc9e029bfd944b4a061289affe39c58', class: "asterisk" }, " *"))), h("div", { key: '6a5d1230282ec67dcaed51d9ecda4570f155a895', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: '83842d69f63c2738cc3bd7b0fbb1232cb4bc7adf', class: "left-label" }, this.label)), this.renderTrigger()), this.helperText && !this.invalid && (h("div", { key: 'a3c1b7552bac043d3d32bfe703f44961bf95df3d', class: "select-helper" }, h("span", { key: '060c5a578be91210aec96d8bdb08eddd9446ea41' }, this.helperText))), this.invalid && this.errorText && (h("div", { key: '97c6348abd628bb5def8b3a2a667e90f7f27d951', class: "select-helper-error" }, h("dropi-icon", { key: '08ab2f0397605bfe0c82ef5ba8ae4b623f98bdb3', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: '97e1d844b586c2da1518bc9a7c0b69aa856515e7' }, this.errorText))), this.renderDropdown()));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

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

@@ -0,0 +1,65 @@
+import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+
+const dropiSidebarCss = () => `:host{display:block;height:100%}*,*::before,*::after{box-sizing:border-box}.sidebar{display:flex;flex-direction:column;height:100%;background:var(--Neutral-White, #fff);border-right:1px solid var(--Gray-Gray-100, #eceef4);transition:width 0.25s ease;overflow:hidden;flex-shrink:0}.sidebar__logo-wrap{display:flex;align-items:center;justify-content:center;padding:var(--Size-4, 16px) var(--Size-3, 12px);border-bottom:1px solid var(--Gray-Gray-100, #eceef4)}.sidebar__logo{height:28px;object-fit:contain;max-width:100%}.sidebar__toggle{align-self:flex-end;margin:var(--Size-2, 8px);background:none;border:1px solid var(--Gray-Gray-100, #eceef4);border-radius:var(--Border-1, 4px);width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.15s;flex-shrink:0}.sidebar__toggle:hover{background:var(--Gray-Gray-50, #f7f8fa)}.sidebar__nav{flex:1;overflow-y:auto;padding:var(--Size-2, 8px) 0}.sidebar__list,.sidebar__sub{list-style:none;margin:0;padding:0}.sidebar__item{width:100%;display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);background:none;border:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-600, #475066);cursor:pointer;text-align:left;transition:background 0.15s, color 0.15s;white-space:nowrap;overflow:hidden}.sidebar__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.sidebar__item--active{background:var(--Primary-Primary-50, #fff5eb);color:var(--Primary-Primary-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.sidebar__item--depth1{font-size:var(--font-size-xs, 10px)}.sidebar__item-label{flex:1;overflow:hidden;text-overflow:ellipsis}.sidebar__badge{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #fff);font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 4px;flex-shrink:0}.sidebar__sub{padding-left:0}.sidebar__footer{padding:var(--Size-3, 12px);border-top:1px solid var(--Gray-Gray-100, #eceef4);flex-shrink:0}.sidebar__footer:empty{display:none}.sidebar--collapsed .sidebar__item{justify-content:center;padding:var(--Size-2, 8px)}`;
+
+const DropiSidebar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiSidebarItemClick = createEvent(this, "dropiSidebarItemClick", 7);
+        this.dropiCollapse = createEvent(this, "dropiCollapse", 7);
+    }
+    /** Navigation items (array or JSON string) */
+    items = [];
+    /** Active item ID */
+    activeId = '';
+    /** Collapsed state (icon-only) */
+    collapsed = false;
+    /** Show collapse toggle button */
+    showToggle = true;
+    /** Logo URL (shown at top) */
+    logoUrl = '';
+    /** Sidebar width when expanded */
+    width = '240px';
+    expandedIds = new Set();
+    /** Emitted when an item is clicked. e.detail = item id */
+    dropiSidebarItemClick;
+    /** Emitted when collapse state changes. e.detail = collapsed */
+    dropiCollapse;
+    get parsedItems() {
+        const val = this.items;
+        return typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    toggleExpand(id) {
+        if (this.expandedIds.has(id))
+            this.expandedIds.delete(id);
+        else
+            this.expandedIds.add(id);
+        // Force re-render
+        this.expandedIds = new Set(this.expandedIds);
+    }
+    renderItem(item, depth = 0) {
+        const hasChildren = item.children && item.children.length > 0;
+        const isExpanded = this.expandedIds.has(item.id);
+        const isActive = item.id === this.activeId;
+        return (h("li", null, h("button", { class: {
+                'sidebar__item': true,
+                'sidebar__item--active': isActive,
+                'sidebar__item--depth1': depth === 1,
+            }, style: { paddingLeft: depth > 0 ? `${12 + depth * 12}px` : undefined }, onClick: () => {
+                if (hasChildren)
+                    this.toggleExpand(item.id);
+                else
+                    this.dropiSidebarItemClick.emit(item.id);
+            }, type: "button", title: this.collapsed ? item.label : undefined }, item.icon && (h("dropi-icon", { name: item.icon, width: "18px", height: "18px", color: isActive ? 'Primary-Primary-500' : 'Gray-Gray-600' })), !this.collapsed && (h("span", { class: "sidebar__item-label" }, item.label)), !this.collapsed && item.badge != null && String(item.badge) !== '0' && (h("span", { class: "sidebar__badge" }, item.badge)), !this.collapsed && hasChildren && (h("dropi-icon", { name: isExpanded ? 'Arrow-Up-2' : 'Arrow-Down-2', width: "12px", height: "12px", color: "Gray-Gray-400" }))), hasChildren && isExpanded && !this.collapsed && (h("ul", { class: "sidebar__sub" }, item.children.map(child => this.renderItem(child, depth + 1))))));
+    }
+    render() {
+        const items = this.parsedItems;
+        return (h("aside", { key: '97c46e8c84a9e389fb67b34364321c35b0c5ebf2', class: { 'sidebar': true, 'sidebar--collapsed': this.collapsed }, style: { width: this.collapsed ? '56px' : this.width } }, this.logoUrl && (h("div", { key: '211e43514bcdd6b613aa1001ef630e5b9629091a', class: "sidebar__logo-wrap" }, h("img", { key: 'ce6b7a3b9ce26f4caa1eafd4821f5a2fa70e4dda', class: "sidebar__logo", src: this.logoUrl, alt: "Logo" }))), this.showToggle && (h("button", { key: 'ba66d7664b76ecdea519f9d128e998331106da8f', class: "sidebar__toggle", onClick: () => {
+                this.collapsed = !this.collapsed;
+                this.dropiCollapse.emit(this.collapsed);
+            }, "aria-label": this.collapsed ? 'Expandir' : 'Colapsar', type: "button" }, h("dropi-icon", { key: '3a362cb657dfa881523ae29c1e677e6cc16afb61', name: this.collapsed ? 'Arrow-Right-2' : 'Arrow-Left-2', width: "16px", height: "16px", color: "Gray-Gray-400" }))), h("nav", { key: '02152d2e92f7802daa1192bd9d00d21c13619de4', class: "sidebar__nav" }, h("ul", { key: '9e90a7d2d25a63885713b881c6d091528027ec57', class: "sidebar__list" }, items.map(item => this.renderItem(item)))), h("div", { key: 'b70d89a324de1b56e022ec66b52ecb2b01031d34', class: "sidebar__footer" }, h("slot", { key: '6ead0e515e6a59194cd3495bd691ae9acdb0dd05', name: "footer" }))));
+    }
+};
+DropiSidebar.style = dropiSidebarCss();
+
+export { DropiSidebar as dropi_sidebar };

package/dist/esm/dropi-simple-stepper.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 dropiSimpleStepperCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.stepper{display:flex;align-items:flex-start;width:100%}.stepper__item{display:flex;flex-direction:column;align-items:center;flex:1}.stepper__circle-row{display:flex;align-items:center;width:100%}.stepper__circle{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s, border-color 0.2s}.stepper__circle--pending{background:var(--Gray-Gray-100, #e6eaf2);border:2px solid var(--Gray-Gray-200, #c3c9d9)}.stepper__circle--active{background:var(--Primary-Primary-500, #f49a3d);border:2px solid var(--Primary-Primary-500, #f49a3d)}.stepper__circle--completed{background:var(--Primary-Primary-500, #f49a3d);border:2px solid var(--Primary-Primary-500, #f49a3d)}.stepper__dot{width:8px;height:8px;border-radius:50%;background:var(--Neutral-White, #fff);display:block}.stepper__circle--pending .stepper__dot{background:var(--Gray-Gray-400, #858ea6)}.stepper__number{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);color:var(--Neutral-White, #fff)}.stepper__circle--pending .stepper__number{color:var(--Gray-Gray-500, #69738c)}.stepper__line{flex:1;height:2px;background:var(--Gray-Gray-200, #c3c9d9);transition:background 0.2s}.stepper__line--done{background:var(--Primary-Primary-500, #f49a3d)}.stepper__label{margin-top:6px;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);text-align:center}`;
 
@@ -30,7 +30,7 @@ const DropiSimpleStepper = class {
     render() {
         const labels = this.parsedLabels;
         const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);
-        return (h("div", { key: 'fc845e4030b4a41c636bc93b969ec561a8e152a5', class: "stepper" }, steps.map((step, i) => {
+        return (h("div", { key: '9991a928ba08a7720d8ded5aea01b3bc77372e71', class: "stepper" }, steps.map((step, i) => {
             const isCompleted = step < this.currentStep;
             const isActive = step === this.currentStep;
             const isLast = i === steps.length - 1;

package/dist/esm/dropi-skeleton.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 dropiSkeletonCss = () => `: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}}`;
 

package/dist/esm/dropi-steps.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 dropiStepsCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.stepper{display:flex;align-items:flex-start;width:100%}.stepper__step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative}.stepper__circle-wrap{display:flex;align-items:center;width:100%;position:relative}.stepper__circle{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);flex-shrink:0;z-index:1;transition:background 0.2s, border-color 0.2s}.stepper__circle--pending{background:var(--Neutral-White, #fff);border:2px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6)}.stepper__circle--focus{background:var(--Neutral-White, #fff);border:2px solid var(--Primary-Primary-500, #f49a3d);color:var(--Primary-Primary-500, #f49a3d)}.stepper__circle--completed{background:var(--Primary-Primary-500, #f49a3d);border:2px solid var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #fff)}.stepper__line{flex:1;height:2px;background:var(--Gray-Gray-200, #c3c9d9);transition:background 0.2s}.stepper__line--done{background:var(--Primary-Primary-500, #f49a3d)}.stepper__label{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:var(--Size-2, 8px);text-align:center;padding:0 4px}.stepper__title{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d)}.stepper__desc{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c)}`;
 
@@ -35,7 +35,7 @@ const DropiSteps = class {
     render() {
         const labels = this.parsedLabels;
         const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);
-        return (h("div", { key: '446597aa40fdfd1c5e5274a89d3cc45a98003da9', class: "stepper" }, steps.map((step) => {
+        return (h("div", { key: '95573c2ac185f7fc63fa804a03873499ba296e5c', class: "stepper" }, steps.map((step) => {
             const state = this.stepState(step);
             const label = labels[step - 1];
             const isLast = step === this.stepsCount;

package/dist/esm/dropi-switch.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 dropiSwitchCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.toggle-switch{position:relative;display:inline-block;width:40px;height:21px;margin-bottom:0;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--Gray-Gray-200, #c3c9d9);transition:0.4s;border-radius:34px}.slider::before{position:absolute;content:'';height:17px;width:17px;left:3px;bottom:2px;background-color:var(--Neutral-White, #ffffff);transition:0.4s;border-radius:50%}input:checked+.slider{background-color:var(--Primary-Primary-500, #f49a3d)}input:checked+.slider::before{transform:translateX(17px)}:host([disabled]) .toggle-switch{cursor:not-allowed;opacity:0.5}`;
 
 const DropiSwitch = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiChange = createEvent(this, "dropiChange");
+        this.dropiChange = createEvent(this, "dropiChange", 7);
     }
     /** Whether the switch is on */
     isChecked = false;
@@ -19,7 +19,7 @@ const DropiSwitch = class {
         this.dropiChange.emit(this.isChecked);
     }
     render() {
-        return (h("label", { key: 'd756605f85a24fdbf8714824921b17e618bde921', class: "toggle-switch" }, h("input", { key: '8d774e122778bd286269552ebabac1c04aa894c4', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: 'ff8d52dec5653e82fa965bca0ddd19ecb49cdad3', class: "slider" })));
+        return (h("label", { key: 'f02520c1b71af187ddfb766e4bac4e16482bb5cc', class: "toggle-switch" }, h("input", { key: '13b41ec9b7f69512be6d556f1946a3506d9557a3', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: '0bb19ad9767c1e7c5956ef834228a6a2406c225c', class: "slider" })));
     }
     static get formAssociated() { return true; }
 };