@dropi/ui 0.1.17 → 0.1.19

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.js';
 
-const dropiInputCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.fixed-label-container{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:8px}.input-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);text-align:left}.asterisk{color:var(--Error-Error-500, #f46a6b)}.form-group{position:relative;width:100%}.input-container{position:relative}.icon-input{position:absolute;top:10px;left:5px;z-index:1}.icon-input-password{position:absolute;top:10px;right:13px;cursor:pointer;z-index:1}.form-control{box-sizing:border-box;width:100%;padding:var(--Size-2, 8px);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);transition:border-color 0.3s ease-in-out;height:40px;outline:none;appearance:none;text-align:left}.form-control::placeholder{color:transparent;transition:color 0.2s ease-in-out}.form-control:focus::placeholder,.fixed-label-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.padding-icon{padding-left:28px}.text-password{-webkit-text-security:disc;text-security:disc}label.label-bottom{position:absolute;font-weight:var(--font-weight-regular, 400);top:10px;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);left:10px;transition:all 0.2s ease-in-out;pointer-events:none;overflow:hidden;width:90%;white-space:nowrap}.form-control:focus+label.label-bottom,.form-control:not(:placeholder-shown)+label.label-bottom{top:-22px;left:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);width:unset}.form-control:disabled+label.label-bottom{color:var(--Gray-Gray-400, #858ea6)}.form-control-helper{display:flex;position:absolute;top:100%;left:0;gap:4px;align-items:center;margin-top:4px}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}`;
+const dropiInputCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.fixed-label-container{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:8px}.input-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);text-align:left}.asterisk{color:var(--Error-Error-500, #f46a6b)}.form-group{position:relative;width:100%}.input-container{position:relative}.icon-input{position:absolute;top:10px;left:5px;z-index:1}.icon-input-password{position:absolute;top:10px;right:13px;cursor:pointer;z-index:1}.form-control{box-sizing:border-box;width:100%;padding:var(--Size-2, 8px);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);transition:border-color 0.3s ease-in-out;height:40px;outline:none;appearance:none;text-align:left}.form-control::placeholder{color:transparent;transition:color 0.2s ease-in-out}.form-control:focus::placeholder,.fixed-label-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.padding-icon{padding-left:28px}.input-container--has-icon label.label-bottom{left:28px}.input-container--has-icon .form-control:focus+label.label-bottom,.input-container--has-icon .form-control:not(:placeholder-shown)+label.label-bottom{left:0}.text-password{-webkit-text-security:disc;text-security:disc}label.label-bottom{position:absolute;font-weight:var(--font-weight-regular, 400);top:10px;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);left:10px;transition:all 0.2s ease-in-out;pointer-events:none;overflow:hidden;width:90%;white-space:nowrap}.form-control:focus+label.label-bottom,.form-control:not(:placeholder-shown)+label.label-bottom{top:-22px;left:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);width:unset}.form-control:disabled+label.label-bottom{color:var(--Gray-Gray-400, #858ea6)}.form-control-helper{display:flex;position:absolute;top:100%;left:0;gap:4px;align-items:center;margin-top:4px}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}`;
 
 const DropiInput = class {
     constructor(hostRef) {
@@ -103,7 +103,7 @@ const DropiInput = class {
         this.dropiInput.emit(val);
     }
     handleKeyDown(e) {
-        if (this.onlyNumbers && !this.isAllowedNumberKey(e)) {
+        if ((this.onlyNumbers || this.moneyFormat || this.thousandSeparator) && !this.isAllowedNumberKey(e)) {
             e.preventDefault();
         }
         if (this.onlyLetters && !this.isAllowedLetterKey(e)) {
@@ -180,15 +180,15 @@ const DropiInput = class {
     // ── Render ───────────────────────────────────────────────────
     render() {
         const showAsterisk = this.required && this.showAsterisk && !this.disabled;
-        const showIconInline = !!this.icon && !!this.value;
-        return (h("div", { key: '4ea9c2118e6452345a2a92eedc807e6d94019784', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: 'b8c1269e9d583becd9614f6f3c28f6a2b536f18f', class: "input-label Body-S-Regular" }, this.label, showAsterisk && h("span", { key: '945665772caab1a1c95f1a054dea1b8dd88287a3', class: "asterisk" }, " *"))), h("div", { key: 'f550584dde83c907429255d9a98b8a59ff322cbb', class: "form-group" }, h("div", { key: '6cc46f5822e62d59bb211e7d9eb7909ab2b833c9', class: "input-container" }, showIconInline && (h("dropi-icon", { key: 'c860e808ae7cd805aa9c430d52743f7eab0aaeba', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" })), this.passwordInput && (h("dropi-icon", { key: 'ba571d4d14ec2a911a8b0bd4cdc7a8481aebe746', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: 'aad18a94d94c9600236bac7c23e38b1c1c41f06a', id: this.resolvedId, class: {
+        const showIconInline = !!this.icon;
+        return (h("div", { key: '444e873dc4175e75a5c85814499e28afb3f80b37', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: 'a501500f872b87ad701f5c18e0e3b532005c3fcb', class: "input-label Body-S-Regular" }, this.label, showAsterisk && h("span", { key: '1ca3afb47b67cfb61cd8bceb8657c9f061462064', class: "asterisk" }, " *"))), h("div", { key: 'eb31110de652f6db7c5fdd747046280b0e81e2b6', class: "form-group" }, h("div", { key: 'b0bb2cac1e8d7f20d927437e4ba6327e333d1fdb', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: '604a369b358b1c95a19cc23dd4bc4f9c77e4b050', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" })), this.passwordInput && (h("dropi-icon", { key: 'b1b3b979d172ada0c3fe616f795c7cd5b2bf45cb', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: 'b5488711765a12b6e9fea7b0f8d5a23ae95de925', id: this.resolvedId, class: {
                 'form-control': true,
                 'form-control-valid': !this.isInvalid && this.touched && !!this.value,
                 'form-control-invalid': this.isInvalid,
                 'padding-icon': showIconInline,
                 'text-password': this.passwordInput && !this.showPassword,
                 'fixed-label-input': this.fixedLabel,
-            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxlength, inputMode: this.inputMode, "data-cy": undefined, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: '8ba7ea50525aa8990662d45829ba732094c41f80', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showAsterisk && h("span", { key: '3916d3de6392da62b8086920cd2fce3b96238416', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: '83e17f7d0cdb503b86fd035775e1cb45d9f41709', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: '4e034348270853f8a3aafbbbb938a5974076aebd', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), h("span", { key: '7832f200ccc6f6273d65012b9e642c313399a277', class: {
+            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxlength, inputMode: this.inputMode, "data-cy": undefined, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: 'f3008d901c41e6f362977e1232e7597733c4288e', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showAsterisk && h("span", { key: '1b982a1630f88557380df2f22c0c27bcceebbdc6', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: '30382a8e7beb0a14bb06f8fd25dae3da5371efd3', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: 'a1ef2b7a9a659301cc22c19d5e5f65bd7a595a2c', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), h("span", { key: '289250769c59d1ddde821395a9e97368404ca1ab', class: {
                 'disabled-helper': this.disabled,
                 'invalid-color': this.isInvalid,
             } }, this.helperText)))))));

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

@@ -0,0 +1,25 @@
+import { r as registerInstance, h } from './index-Twbb5MNM.js';
+
+const dropiLogoCss = () => `:host{display:inline-block}.dropi-logo{margin:0;padding:0;display:flex;align-items:center;justify-content:center}.dropi-logo img{display:block;object-fit:contain}.dropi-logo--large img{width:256px;height:84px}.dropi-logo--small img{width:86px;height:81px}`;
+
+const FALLBACK_SVG = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgNDAiPjx0ZXh0IHk9IjMwIiBmb250LXNpemU9IjI0IiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZmlsbD0iI2Y0OWEzZCI+ZHJvcGk8L3RleHQ+PC9zdmc+`;
+const DropiLogo = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Logo image URL */
+    urlLogo = '';
+    /** Size variant */
+    size = 'large';
+    /** Theme (reserved for future use) */
+    theme = 'light';
+    handleError(e) {
+        e.target.src = FALLBACK_SVG;
+    }
+    render() {
+        return (h("figure", { key: '6b3335e9c4e8d799106f3c2080822d35d74bb16d', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, h("img", { key: 'e54ff2f0d1fb1f0f4eea4c46aae7a39f69268217', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", loading: "lazy", onError: (e) => this.handleError(e) })));
+    }
+};
+DropiLogo.style = dropiLogoCss();
+
+export { DropiLogo as dropi_logo };

package/dist/esm/dropi-lottie-loader.entry.js

@@ -0,0 +1,25 @@
+import { r as registerInstance, h } from './index-Twbb5MNM.js';
+
+const dropiLottieLoaderCss = () => `:host{display:block}.loader-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255, 255, 255, 0.85);z-index:9999}.loader-container{display:flex;flex-direction:column;align-items:center;gap:var(--Size-4, 16px)}.lottie-animation{display:flex;align-items:center;justify-content:center;width:200px;height:200px}.loader-text{display:flex;flex-direction:column;align-items:center;gap:var(--Size-2, 8px);text-align:center}.loader-title{margin:0;font-size:var(--font-size-m, 14px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d)}.loader-message{margin:0;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-500, #69738c)}`;
+
+const DropiLottieLoader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Show or hide the loader */
+    visible = false;
+    /** Path to the Lottie JSON animation file */
+    loadingAnimation = '';
+    /** Title shown below the animation */
+    loaderTitle = '';
+    /** Descriptive message below the title */
+    message = '';
+    render() {
+        if (!this.visible)
+            return null;
+        return (h("div", { class: "loader-overlay" }, h("div", { class: "loader-container" }, this.loadingAnimation && (h("div", { class: "lottie-animation", innerHTML: `<lottie-player src="${this.loadingAnimation}" background="transparent" speed="1" style="width:200px;height:200px" loop autoplay></lottie-player>` })), (this.loaderTitle || this.message) && (h("div", { class: "loader-text" }, this.loaderTitle && h("h3", { class: "loader-title" }, this.loaderTitle), this.message && h("p", { class: "loader-message" }, this.message))))));
+    }
+};
+DropiLottieLoader.style = dropiLottieLoaderCss();
+
+export { DropiLottieLoader as dropi_lottie_loader };

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

@@ -0,0 +1,90 @@
+import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.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 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");
+    }
+    /** Delivery method label */
+    engine = 'email';
+    /** Contact info (email/phone to show in label) */
+    labelContact = '';
+    /** Show contact label */
+    showLabelContact = true;
+    /** Error message to display */
+    errorMessage = '';
+    digits = Array(OTP_LENGTH).fill('');
+    digitStates = Array(OTP_LENGTH).fill('idle');
+    countdown = RESEND_SECONDS;
+    canResend = false;
+    error = false;
+    inputs = [];
+    timer;
+    /** Emitted when all 6 digits are entered. e.detail = the complete code string */
+    dropiCodeCompleted;
+    /** Emitted when resend is requested */
+    dropiResend;
+    componentDidLoad() { this.startCountdown(); }
+    disconnectedCallback() { clearInterval(this.timer); }
+    startCountdown() {
+        this.countdown = RESEND_SECONDS;
+        this.canResend = false;
+        clearInterval(this.timer);
+        this.timer = setInterval(() => {
+            this.countdown--;
+            if (this.countdown <= 0) {
+                clearInterval(this.timer);
+                this.canResend = true;
+            }
+        }, 1000);
+    }
+    handleInput(e, index) {
+        const val = e.target.value.replace(/\D/g, '').slice(-1);
+        const newDigits = [...this.digits];
+        newDigits[index] = val;
+        this.digits = newDigits;
+        const newStates = [...this.digitStates];
+        newStates[index] = val ? 'filled' : 'idle';
+        this.digitStates = newStates;
+        if (val && index < OTP_LENGTH - 1)
+            this.inputs[index + 1]?.focus();
+        if (newDigits.every(d => d !== '')) {
+            this.dropiCodeCompleted.emit(newDigits.join(''));
+        }
+    }
+    handleKeyDown(e, index) {
+        if (e.key === 'Backspace' && !this.digits[index] && index > 0) {
+            this.inputs[index - 1]?.focus();
+        }
+    }
+    handlePaste(e) {
+        e.preventDefault();
+        const text = e.clipboardData?.getData('text')?.replace(/\D/g, '').slice(0, OTP_LENGTH) || '';
+        const newDigits = Array(OTP_LENGTH).fill('');
+        text.split('').forEach((c, i) => { newDigits[i] = c; });
+        this.digits = newDigits;
+        this.digitStates = newDigits.map(d => d ? 'filled' : 'idle');
+        this.inputs[Math.min(text.length, OTP_LENGTH - 1)]?.focus();
+        if (newDigits.every(d => d !== ''))
+            this.dropiCodeCompleted.emit(newDigits.join(''));
+    }
+    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) => {
+                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")))));
+    }
+};
+DropiOtpSendCode.style = dropiOtpSendCodeCss();
+
+export { DropiOtpSendCode as dropi_otp_send_code };

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.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{min-width:32px;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;display:flex;align-items:center;justify-content:center;transition:background 0.15s ease, border-color 0.15s ease}.paginator-btn:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-300, #a3abbf)}.paginator-btn:disabled{opacity:0.4;cursor:not-allowed}.paginator-btn--active{background:var(--Primary-Primary-500, #f49a3d);border-color: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);border-color:var(--Primary-Primary-500, #f49a3d)}.paginator-btn--arrow{border-color:transparent;background:transparent}.paginator-btn--arrow:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-100, #e6eaf2)}.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 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) {
@@ -15,6 +15,8 @@ const DropiPaginator = class {
     page = 1;
     /** Max page buttons to show at once */
     maxPages = 5;
+    /** Hide "Anterior"/"Siguiente" text labels, show only arrows */
+    noLabels = false;
     /** Whether to show the items-per-page selector */
     showPageSizeSelector = false;
     /** Options for items per page */
@@ -72,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: '3fbb545d6ff0b345da7698e51bfdee51a13de49e', class: "paginator" }, this.showPageSizeSelector && (h("div", { key: '7ae643988a60f2016dce24b53bb9f5ac13414cf0', class: "paginator-size" }, h("span", { key: 'fee6db32b0d13e6c455174f1c57fb35401e65c10', class: "paginator-size-label" }, "Por p\u00E1gina:"), h("select", { key: '0e37733de81c70ac274c8e89af65f0f94115ecb5', 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: 'fb70589d0fd3d8072190099fe187359439707dc1', class: "paginator-pages" }, h("button", { key: '6348dda14005ed8dcd3e96d788715bbd5a9d432e', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, disabled: isFirst, onClick: () => this.goTo(this.page - 1), "aria-label": "Anterior" }, h("dropi-icon", { key: '2b2c17304b3c246a660b71f5ab5feedfb93ba044', name: "Dropdown-left", width: "16px", height: "16px", color: isFirst ? 'Gray-Gray-300' : 'Gray-Gray-600' })), pages.map((p, i) => p === '...'
+        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 === '...'
             ? 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)), h("button", { key: 'fea38306411fd4a73f35231ff632d8846301dd5f', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, disabled: isLast, onClick: () => this.goTo(this.page + 1), "aria-label": "Siguiente" }, h("dropi-icon", { key: 'f7ed587cb578ef0b9872f290cdc17eebe2f9efeb', name: "Dropdown-Right", width: "16px", height: "16px", color: isLast ? 'Gray-Gray-300' : '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: '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" }))))));
     }
     static get watchers() { return {
         "pageSizeOptions": [{

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

@@ -31,7 +31,7 @@ const DropiRadioButton = class {
         this.dropiChange.emit(e);
     }
     render() {
-        return (h("div", { key: 'fd1153aa79130eeb865c0289b7e323bdf2459a8c', class: "dropi-radio-button" }, h("label", { key: 'b4fbe10ac36213905779f0976e2e80b549323a52', htmlFor: this.inputId }, h("input", { key: '8f9b74ed53912bdff637b879a50faf4d83b7d62b', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
+        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)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

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

@@ -0,0 +1,54 @@
+import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.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");
+    }
+    /** Options array or JSON string */
+    options = [];
+    /** Selected option id */
+    selectedOption = '';
+    /** Show search box */
+    showFilter = false;
+    /** Search placeholder */
+    filterPlaceholder = 'Buscar...';
+    /** Show description below name */
+    typeLayout = 'default';
+    filterText = '';
+    parsedOptions = [];
+    /** Emitted on selection change. e.detail = selected option id */
+    dropiChange;
+    /** Emitted on search. e.detail = search text */
+    dropiSearch;
+    optionsChanged(val) {
+        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    componentWillLoad() { this.optionsChanged(this.options); }
+    get filtered() {
+        if (!this.filterText)
+            return this.parsedOptions;
+        const q = this.filterText.toLowerCase();
+        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) => {
+                this.filterText = e.target.value;
+                this.dropiSearch.emit(this.filterText);
+            } }))), h("div", { key: '6ad89bc1840bc512bb7c78839186092d7fc73d3b', 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)))));
+        }))));
+    }
+    static get watchers() { return {
+        "options": [{
+                "optionsChanged": 0
+            }]
+    }; }
+};
+DropiRadioSelectionList.style = dropiRadioSelectionListCss();
+
+export { DropiRadioSelectionList as dropi_radio_selection_list };

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

@@ -0,0 +1,34 @@
+import { r as registerInstance, h } from './index-Twbb5MNM.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)}`;
+
+const DropiReadMore = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Full text to display */
+    text = '';
+    /** Maximum number of words before truncating */
+    maxWords = 20;
+    /** Allow collapsing back after expanding */
+    showSeeLess = true;
+    expanded = false;
+    get words() {
+        return (this.text || '').split(/\s+/).filter(Boolean);
+    }
+    get needsTruncation() {
+        return this.words.length > this.maxWords;
+    }
+    get displayText() {
+        if (!this.needsTruncation || this.expanded)
+            return this.text;
+        return this.words.slice(0, this.maxWords).join(' ') + '…';
+    }
+    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'))));
+    }
+};
+DropiReadMore.style = dropiReadMoreCss();
+
+export { DropiReadMore as dropi_read_more };

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

@@ -0,0 +1,108 @@
+import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.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");
+    }
+    /** Placeholder text */
+    placeholder = 'Buscar...';
+    /** Controlled input value */
+    value = '';
+    /** Max character length */
+    maxlength;
+    /** Show clear (×) button when input has text */
+    showClear = true;
+    /** Data source to filter. Pass as array or JSON string */
+    options = [];
+    /** Property name to display and search */
+    labelKey = 'name';
+    /** Allow multiple selection */
+    multiSelect = false;
+    /** Max height of dropdown (CSS value) */
+    dropdownHeight = '240px';
+    /** Label shown above the input */
+    label = '';
+    open = false;
+    selected = [];
+    parsedOptions = [];
+    /** Emitted on input change. e.detail = current text */
+    dropiInput;
+    /** Emitted on blur */
+    dropiBlur;
+    /** Emitted when Enter is pressed. e.detail = current text */
+    dropiKeyEnter;
+    /** Emitted when clear button clicked */
+    dropiClear;
+    /** Emitted when selection changes. e.detail = selected items */
+    dropiChange;
+    optionsChanged(val) {
+        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    componentWillLoad() {
+        this.optionsChanged(this.options);
+    }
+    get filtered() {
+        if (!this.value)
+            return this.parsedOptions;
+        const q = this.value.toLowerCase();
+        return this.parsedOptions.filter(o => String(o[this.labelKey] ?? '').toLowerCase().includes(q));
+    }
+    handleInput(e) {
+        this.value = e.target.value;
+        this.open = this.parsedOptions.length > 0;
+        this.dropiInput.emit(this.value);
+    }
+    handleKeyDown(e) {
+        if (e.key === 'Enter')
+            this.dropiKeyEnter.emit(this.value);
+        if (e.key === 'Escape')
+            this.open = false;
+    }
+    handleClear() {
+        this.value = '';
+        this.open = false;
+        this.dropiClear.emit();
+        this.dropiInput.emit('');
+    }
+    isSelected(opt) {
+        return this.selected.some(s => s[this.labelKey] === opt[this.labelKey]);
+    }
+    selectOption(opt) {
+        if (this.multiSelect) {
+            if (this.isSelected(opt)) {
+                this.selected = this.selected.filter(s => s[this.labelKey] !== opt[this.labelKey]);
+            }
+            else {
+                this.selected = [...this.selected, opt];
+            }
+        }
+        else {
+            this.value = opt[this.labelKey] ?? '';
+            this.selected = [opt];
+            this.open = false;
+        }
+        this.dropiChange.emit(this.selected);
+    }
+    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: () => {
+                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])))))))));
+    }
+    static get watchers() { return {
+        "options": [{
+                "optionsChanged": 0
+            }]
+    }; }
+};
+DropiSearch.style = dropiSearchCss();
+
+export { DropiSearch as dropi_search };

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

@@ -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: '0062ad3d0ca25d9126dff2f8130c9159a6b356f6', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: 'ad5db5fa4fe19ee2200ab65fd1f3fcdf65bd851f', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: '27e474c585d345168d01e156acf8fdaa9c70dbfc', class: "asterisk" }, " *"))), h("div", { key: '2cc4da6a0109022a7bdb21b4b7410cf1ea2a6c01', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: 'c60838f5ce7a250bb36164a989b68c93973aa661', class: "left-label" }, this.label)), this.renderTrigger()), this.helperText && !this.invalid && (h("div", { key: 'a30c3cb4f8abf4b820c1e1d73005547398c8ff12', class: "select-helper" }, h("span", { key: '239dffdcdc8bceca6c21b0160a78078acf96eb09' }, this.helperText))), this.invalid && this.errorText && (h("div", { key: '76fced13295c9dff83389920caf128430c2fd35c', class: "select-helper-error" }, h("dropi-icon", { key: 'f1c5798ee5f504387ba80a4ddeca817a6416b770', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: '84a93d1b293b2abe0027316c6fd9824410f20efd' }, this.errorText))), this.renderDropdown()));
+        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()));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/esm/dropi-simple-stepper.entry.js

@@ -0,0 +1,49 @@
+import { r as registerInstance, h } from './index-Twbb5MNM.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}`;
+
+const DropiSimpleStepper = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Total steps */
+    stepsCount = 3;
+    /** Circle content: 'point' (dot) | 'number' */
+    typeStep = 'number';
+    /** Current active step (1-based) */
+    currentStep = 1;
+    /** Labels shown below each step. Pass as JSON string or array */
+    labelStepper = [];
+    /** Flow mode (visual only) */
+    flowMode = 'Sequential';
+    get parsedLabels() {
+        if (typeof this.labelStepper === 'string') {
+            try {
+                return JSON.parse(this.labelStepper);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.labelStepper || [];
+    }
+    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) => {
+            const isCompleted = step < this.currentStep;
+            const isActive = step === this.currentStep;
+            const isLast = i === steps.length - 1;
+            const label = labels[i];
+            return (h("div", { class: "stepper__item", key: step }, h("div", { class: "stepper__circle-row" }, h("div", { class: {
+                    'stepper__circle': true,
+                    'stepper__circle--active': isActive,
+                    'stepper__circle--completed': isCompleted,
+                    'stepper__circle--pending': !isActive && !isCompleted,
+                } }, this.typeStep === 'point' ? (h("span", { class: "stepper__dot" })) : (h("span", { class: "stepper__number" }, step))), !isLast && h("div", { class: { 'stepper__line': true, 'stepper__line--done': isCompleted } })), label && h("span", { class: "stepper__label" }, label)));
+        })));
+    }
+};
+DropiSimpleStepper.style = dropiSimpleStepperCss();
+
+export { DropiSimpleStepper as dropi_simple_stepper };

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

@@ -0,0 +1,48 @@
+import { r as registerInstance, h } from './index-Twbb5MNM.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)}`;
+
+const DropiSteps = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Total number of steps */
+    stepsCount = 3;
+    /** Show step number inside the circle */
+    showNumberOfStep = true;
+    /** Active/current step index (1-based) */
+    currentStep = 1;
+    /** Labels for each step. Pass as JSON string or array */
+    stepLabels = [];
+    get parsedLabels() {
+        if (typeof this.stepLabels === 'string') {
+            try {
+                return JSON.parse(this.stepLabels);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.stepLabels || [];
+    }
+    stepState(index) {
+        if (index < this.currentStep)
+            return 'completed';
+        if (index === this.currentStep)
+            return 'focus';
+        return 'pending';
+    }
+    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) => {
+            const state = this.stepState(step);
+            const label = labels[step - 1];
+            const isLast = step === this.stepsCount;
+            return (h("div", { class: "stepper__step", key: step }, h("div", { class: "stepper__circle-wrap" }, h("div", { class: { 'stepper__circle': true, [`stepper__circle--${state}`]: true } }, state === 'completed' ? (h("dropi-icon", { name: "Check", width: "12px", height: "12px", color: "Neutral-White" })) : (this.showNumberOfStep ? h("span", null, step) : null)), !isLast && h("div", { class: { 'stepper__line': true, 'stepper__line--done': state === 'completed' } })), label && (h("div", { class: "stepper__label" }, label.title && h("span", { class: "stepper__title" }, label.title), label.description && h("span", { class: "stepper__desc" }, label.description)))));
+        })));
+    }
+};
+DropiSteps.style = dropiStepsCss();
+
+export { DropiSteps as dropi_steps };

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

@@ -19,7 +19,7 @@ const DropiSwitch = class {
         this.dropiChange.emit(this.isChecked);
     }
     render() {
-        return (h("label", { key: '790db7283a976472fd3f8de502f73ece29134878', class: "toggle-switch" }, h("input", { key: '7199dcfb1a4f81eb30d7510966d56fd0111d648f', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: '2c62e927e77e58993ab44f2b4fafefcea556b71e', class: "slider" })));
+        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" })));
     }
     static get formAssociated() { return true; }
 };

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

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

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

@@ -50,7 +50,7 @@ const DropiTag = class {
         return typeof this.text === 'string' && this.text.trim().length > 0;
     }
     render() {
-        return (h("div", { key: 'd559f6c2ed27d543f018d3533d8d972bc47ceb9d', class: "container-chips" }, h("div", { key: 'd131a4626ead2d3d53d5c77875f8ebb19acc3b52', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (h("dropi-icon", { key: '54775a2ca1bd87be3293b3d6417f4a26c6da0c85', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && h("span", { key: 'bce897f4094c33fd53dc98571cae60cd456e0706' }, this.text))));
+        return (h("div", { key: '65711113151698b330e945197d0b626130dc06ef', class: "container-chips" }, h("div", { key: 'c49964c1bcdfd96f538a1782a4b564a0e73fa87e', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (h("dropi-icon", { key: 'cb1ed97b3f33c8e4171899f78a84e3572a37e462', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && h("span", { key: '92d71bb6f51dd7fa362023c230f27f9fa59744c0' }, this.text))));
     }
     static get watchers() { return {
         "type": [{