@dropi/ui 0.1.41 → 0.1.43

package/dist/collection/components/dropi-otp-send-code/dropi-otp-send-code.js

@@ -1,9 +1,8 @@
 import { h } from "@stencil/core";
-const OTP_LENGTH = 6;
 const RESEND_SECONDS = 30;
 /**
  * @component dropi-otp-send-code
- * 6-digit OTP input with countdown timer and resend capability.
+ * OTP input with configurable length, countdown timer and resend capability.
  */
 export class DropiOtpSendCode {
     /** Delivery method label */
@@ -14,19 +13,30 @@ export class DropiOtpSendCode {
     showLabelContact = false;
     /** Error message to display */
     errorMessage = '';
-    digits = Array(OTP_LENGTH).fill('');
-    digitStates = Array(OTP_LENGTH).fill('idle');
+    /** Number of digits for the OTP */
+    digitsCount = 6;
+    digits = [];
+    digitStates = [];
     countdown = RESEND_SECONDS;
     canResend = false;
     error = false;
     inputs = [];
     timer;
-    /** Emitted when all 6 digits are entered. */
+    handleDigitsCountChange(newValue) {
+        this.digits = Array(newValue).fill('');
+        this.digitStates = Array(newValue).fill('idle');
+        this.inputs = [];
+    }
+    /** Emitted when all digits are entered. */
     codeCompleted;
-    /** Emitted when all 6 digits are entered (alternative event). */
+    /** Emitted when all digits are entered (alternative event). */
     codeAccepted;
     /** Emitted when resend is requested */
     dropiResend;
+    componentWillLoad() {
+        this.digits = Array(this.digitsCount).fill('');
+        this.digitStates = Array(this.digitsCount).fill('idle');
+    }
     componentDidLoad() { this.startCountdown(); }
     disconnectedCallback() { clearInterval(this.timer); }
     startCountdown() {
@@ -43,13 +53,13 @@ export class DropiOtpSendCode {
     }
     handleInput(e, index) {
         const val = e.target.value.replace(/\D/g, '').slice(-1);
-        const newDigits = [...(this.digits ?? Array(OTP_LENGTH).fill(''))];
+        const newDigits = [...this.digits];
         newDigits[index] = val;
         this.digits = newDigits;
-        const newStates = [...(this.digitStates ?? Array(OTP_LENGTH).fill('idle'))];
+        const newStates = [...this.digitStates];
         newStates[index] = val ? 'filled' : 'idle';
         this.digitStates = newStates;
-        if (val && index < OTP_LENGTH - 1)
+        if (val && index < this.digitsCount - 1)
             this.inputs[index + 1]?.focus();
         if (newDigits.every(d => d !== '')) {
             const finalCode = newDigits.join('');
@@ -58,18 +68,18 @@ export class DropiOtpSendCode {
         }
     }
     handleKeyDown(e, index) {
-        if (e.key === 'Backspace' && !(this.digits ?? [])[index] && index > 0) {
+        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('');
+        const text = e.clipboardData?.getData('text')?.replace(/\D/g, '').slice(0, this.digitsCount) || '';
+        const newDigits = Array(this.digitsCount).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();
+        this.inputs[Math.min(text.length, this.digitsCount - 1)]?.focus();
         if (newDigits.every(d => d !== '')) {
             const finalCode = newDigits.join('');
             this.codeCompleted.emit(finalCode);
@@ -78,14 +88,14 @@ export class DropiOtpSendCode {
     }
     render() {
         const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
-        return (h("div", { key: '09eb961c43257d0a2a852ec05bafa7c050d9e4ec', class: "otp" }, this.showLabelContact && (h("p", { key: '46b215b5343892c5bca4d5aab6590e8da791fc9d', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: '0c0871dbb99ad85a15275be1ed7f698cf9e4a808' }, " ", this.labelContact))), h("div", { key: 'd11d2c4f094a82240b3bde49039ff2e2d027f5d5', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, Array.from({ length: OTP_LENGTH }, (_, i) => (h("input", { key: i, ref: (el) => {
+        return (h("div", { key: 'c9c6c3387cec2371049c547d87742563268bf28d', class: "otp" }, this.showLabelContact && (h("p", { key: 'c3f36c62d7502eff8f86ef8202c3dfc65d846ba1', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: '25c05d8f0773bf6f2af83f6154ac76638499e4d7' }, " ", this.labelContact))), h("div", { key: '3ca2687723735b3eb6ada997f622a4a50c2d7ee9', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, this.digits.map((_, 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--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: 'a9156a4da398eeeec8128a012978e8e2c5f7eef4', class: "otp__error" }, this.errorMessage)), h("div", { key: '9c685306ba97d19907b92bbf6c203f0473a809fb', 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: 'ddcdd5dacc533b73e6353c2670f762168c2803d3', class: "otp__error" }, this.errorMessage)), h("div", { key: 'a21650c43d7a62f9e187bd9f4eb307d275ff37be', 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")))));
     }
     static get is() { return "dropi-otp-send-code"; }
     static get encapsulation() { return "shadow"; }
@@ -180,6 +190,26 @@ export class DropiOtpSendCode {
                 "reflect": false,
                 "attribute": "error-message",
                 "defaultValue": "''"
+            },
+            "digitsCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of digits for the OTP"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "digits-count",
+                "defaultValue": "6"
             }
         };
     }
@@ -201,7 +231,7 @@ export class DropiOtpSendCode {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when all 6 digits are entered."
+                    "text": "Emitted when all digits are entered."
                 },
                 "complexType": {
                     "original": "string",
@@ -216,7 +246,7 @@ export class DropiOtpSendCode {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when all 6 digits are entered (alternative event)."
+                    "text": "Emitted when all digits are entered (alternative event)."
                 },
                 "complexType": {
                     "original": "string",
@@ -240,4 +270,10 @@ export class DropiOtpSendCode {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "digitsCount",
+                "methodName": "handleDigitsCountChange"
+            }];
+    }
 }

package/dist/collection/components/dropi-paginator/dropi-paginator.js

@@ -17,7 +17,7 @@ export class DropiPaginator {
     /** Hide "Anterior"/"Siguiente" text labels, show only arrows */
     noLabels = false;
     /** Emitted when page changes. e.detail = new page number */
-    pageChange;
+    dropiPageChange;
     get pageNumbers() {
         const total = this.totalPages;
         const cur = this.currentPage;
@@ -48,15 +48,15 @@ export class DropiPaginator {
         if (this.disabled || p < 1 || p > this.totalPages || p === this.currentPage)
             return;
         this.currentPage = p;
-        this.pageChange.emit(this.currentPage);
+        this.dropiPageChange.emit(this.currentPage);
     }
     render() {
         const pages = this.pageNumbers;
         const isFirst = this.currentPage <= 1;
         const isLast = this.currentPage >= this.totalPages;
-        return (h("div", { key: 'b601f88e4f971f885835d81fe876303fe97027c7', class: "paginator" }, h("div", { key: '988ffb7ed122d4a666af4525bc85159d8d36538a', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: '920a1a407782bde436fb6560caeb39848e9c7e28', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '249d4f2fc0a7ba2d790e3cf1c7a36a8d853a8cfe', name: "Arrow-double-small-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: '7b3cbe1cbd33db77fe540b5e179ed759e2d515e9', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, h("dropi-icon", { key: '4f162e4df1573f5b6df40477099c3dc50347b738', name: "Dropdown-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: 'a569b225a577e3dfb41466247be33846254ba1f6', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
+        return (h("div", { key: 'af6614df5a241ef536b6723d30bde12c8a6f474f', class: "paginator" }, h("div", { key: '8b5405baa717a36042fc03ca2e68370799c01ff7', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: 'c340304b29d658ef9eaa8105a91540660c829048', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '3adfc1508cbcedbb91f99e467db2270c40a4ac83', name: "Arrow-double-small-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: '5936642c4b9e5b72546229996fbc72fe973e6f5f', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, h("dropi-icon", { key: 'c9f7eb1c0c27a738ee31e859617964fc75e514cc', name: "Dropdown-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: '5d448a9a6536c90c56fafd700e7c5998a85d6fdf', 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.currentPage }, onClick: () => this.goTo(p), "aria-current": p === this.currentPage ? 'page' : undefined, disabled: this.disabled }, p)), !isLast && (h("button", { key: 'ad51ec2f21741cf89e0e692cca2057c8cacea9f3', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage + 1), "aria-label": "Siguiente", disabled: this.disabled }, !this.noLabels && h("span", { key: '3eb463a7749ef9f419613c07975a87073df29ecf', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: 'a6ece1855840a3ada48de22151bab4a43fd1972e', name: "Dropdown-Right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: '4ac9168aba1221ad17a08f7463cc2f065ea1ce6f', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '9e3618334ec1d476ea59ea00a600499f47a45a9a', name: "Arrow-double-small-right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))))));
+            : h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.currentPage }, onClick: () => this.goTo(p), "aria-current": p === this.currentPage ? 'page' : undefined, disabled: this.disabled }, p)), !isLast && (h("button", { key: '1a43d8dde37cdbc40527eb1c66bc5001a64cf59f', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage + 1), "aria-label": "Siguiente", disabled: this.disabled }, !this.noLabels && h("span", { key: 'f76ccd791d02b25d78c509341b73e1c1bca0b986', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: '822a3a7e4ac651e00c469b565e300a7efcc5614b', name: "Dropdown-Right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: '2b4f7435f9083ab9c4d9ce81be5c259eda830e4a', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '63ab5568c44ed3cbda917842defe4dc4254bb3f1', name: "Arrow-double-small-right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))))));
     }
     static get is() { return "dropi-paginator"; }
     static get encapsulation() { return "shadow"; }
@@ -196,8 +196,8 @@ export class DropiPaginator {
     }
     static get events() {
         return [{
-                "method": "pageChange",
-                "name": "pageChange",
+                "method": "dropiPageChange",
+                "name": "dropiPageChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/dropi-phone-input/dropi-phone-input.css

@@ -130,7 +130,7 @@ input[type='number'] {
   border: 1px solid transparent;
   border-radius: var(--Border-2, 8px);
   overflow-y: scroll;
-  z-index: 100;
+  z-index: var(--dropi-z-index-overlay, 11000);
 }
 
 /* Scrollbar */

package/dist/collection/components/dropi-phone-input/dropi-phone-input.js

@@ -125,13 +125,13 @@ export class DropiPhoneInput {
     selectProperties = null;
     open = false;
     /** Emitted when country dial code changes — matches Angular 'ngModelChangeCod' */
-    ngModelChangeCod;
+    dropiCodChange;
     /** Emitted when phone number changes — matches Angular 'ngModelChangePhone' */
-    ngModelChangePhone;
+    dropiPhoneChange;
     /** Emitted on field verification — matches Angular 'verifiedField' */
-    verifiedField;
+    dropiVerify;
     /** Emitted when country selection changes — matches Angular 'onChangeSelect' */
-    onChangeSelect;
+    dropiChangeSelect;
     codAreaChanged() {
         this.ngModelPhone = '';
     }
@@ -153,14 +153,14 @@ export class DropiPhoneInput {
     selectCountry(c) {
         this.codArea = c.code;
         this.open = false;
-        this.ngModelChangeCod.emit(c.code);
-        this.onChangeSelect.emit(c);
+        this.dropiCodChange.emit(c.code);
+        this.dropiChangeSelect.emit(c);
     }
     handleInput(e) {
         const raw = e.target.value.replace(/\D/g, '');
         this.ngModelPhone = raw.slice(0, this.selectedCountry.maxLength);
         e.target.value = this.ngModelPhone;
-        this.ngModelChangePhone.emit(this.ngModelPhone);
+        this.dropiPhoneChange.emit(this.ngModelPhone);
     }
     handleWindowClick(ev) {
         const path = ev.composedPath();
@@ -171,10 +171,10 @@ export class DropiPhoneInput {
     render() {
         const country = this.selectedCountry;
         const isInvalid = this.isValidPhone === false;
-        return (h("div", { key: 'e4a9468971ff90e3e1c2cf6944a8475451843428', class: "phone-wrap" }, h("div", { key: 'dabdccaf0453e98afb3db78ee6b6f83a66615baa', class: "phone-input-container" }, h("div", { key: '6481136b782da271fe47c19cfd359398bf632f35', class: "custom-select" }, h("button", { key: 'd314c0e2c74724eff20eae8f34241caf1fc2448c', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
+        return (h("div", { key: 'a377fcfcfdb239d79f319f0e058f5d54cbcfac02', class: "phone-wrap" }, h("div", { key: '83719d2b76b491f1f7a9f3e202eb61c61abb2c31', class: "phone-input-container" }, h("div", { key: 'c92ff5d9f260b80ad4e7b8f7e290b7b4e1f595f0', class: "custom-select" }, h("button", { key: '35c56642c1828d86b7f211face2845dc79878fd4', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
                 if (!this.disabledInput)
                     this.open = !this.open;
-            } }, h("span", { key: 'c8b2aa7801a5c633c70010e7eeb2d5d9f3fb6b37', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, h("img", { key: 'c2a6583a02b029cee578b9c931f185f7d4102e3f', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), h("dropi-icon", { key: '26e6e575c9072c008060560f03fcaba942ae5157', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), h("ul", { key: 'ad2d7688f2de26aa1c8ac080819203c7f5839764', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (h("li", null, h("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, h("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), h("input", { key: '399968a68860688b9e91084dc5530aa5464ef5f1', id: "phone-input", type: "tel", inputmode: "numeric", class: { 'form-control': true, 'is-invalid': isInvalid }, placeholder: this.phoneNumberPlaceholder, value: this.ngModelPhone, disabled: this.disabledInput, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) }))));
+            } }, h("span", { key: 'e39cdac451df1c9a47c6552e7f133cb7662cae7f', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, h("img", { key: '620c8efc2695ee26fed0c2bcd7f6132af05cdbed', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), h("dropi-icon", { key: 'cf57cc1ef06e12b0112fdbbb063fb8f045c17e39', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), h("ul", { key: '1009d2e4212267bbfaf4aa26c0c2152606a8d092', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (h("li", null, h("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, h("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), h("input", { key: '87be58fc820c63741b076b04d807b7410e292344', id: "phone-input", type: "tel", inputmode: "numeric", class: { 'form-control': true, 'is-invalid': isInvalid }, placeholder: this.phoneNumberPlaceholder, value: this.ngModelPhone, disabled: this.disabledInput, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) }))));
     }
     static get is() { return "dropi-phone-input"; }
     static get encapsulation() { return "shadow"; }
@@ -359,8 +359,8 @@ export class DropiPhoneInput {
     }
     static get events() {
         return [{
-                "method": "ngModelChangeCod",
-                "name": "ngModelChangeCod",
+                "method": "dropiCodChange",
+                "name": "dropiCodChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -374,8 +374,8 @@ export class DropiPhoneInput {
                     "references": {}
                 }
             }, {
-                "method": "ngModelChangePhone",
-                "name": "ngModelChangePhone",
+                "method": "dropiPhoneChange",
+                "name": "dropiPhoneChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -389,8 +389,8 @@ export class DropiPhoneInput {
                     "references": {}
                 }
             }, {
-                "method": "verifiedField",
-                "name": "verifiedField",
+                "method": "dropiVerify",
+                "name": "dropiVerify",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -404,8 +404,8 @@ export class DropiPhoneInput {
                     "references": {}
                 }
             }, {
-                "method": "onChangeSelect",
-                "name": "onChangeSelect",
+                "method": "dropiChangeSelect",
+                "name": "dropiChangeSelect",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/dropi-progress-bar/dropi-progress-bar.css

@@ -0,0 +1,35 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.progress-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.progress-header {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.progress-value {
+  font-size: var(--font-size-xs, 12px);
+  color: var(--Gray-Gray-600, #475066);
+  font-weight: 500;
+}
+
+.progress-track {
+  width: 100%;
+  border-radius: 999px;
+  overflow: hidden;
+  position: relative;
+}
+
+.progress-fill {
+  height: 100%;
+  border-radius: 999px;
+  transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
+}

package/dist/collection/components/dropi-progress-bar/dropi-progress-bar.js

@@ -0,0 +1,168 @@
+import { h } from "@stencil/core";
+export class DropiProgressBar {
+    /** The progress value (0-100) */
+    value = 0;
+    /** The color scheme of the progress bar */
+    severity = 'primary';
+    /** Height of the progress bar */
+    height = '8px';
+    /** Whether to show the value as text */
+    showValue = false;
+    /** Background color of the track (optional, defaults to gray-100) */
+    trackColor = 'var(--Gray-Gray-100, #F7F8FA)';
+    /** Custom color for the progress fill (overrides severity) */
+    color = '';
+    render() {
+        const fillStyle = {
+            width: `${Math.min(100, Math.max(0, this.value))}%`,
+            backgroundColor: this.color || `var(--${this.getSeverityVariable()}, #50A5F1)`,
+        };
+        return (h("div", { key: 'f68b88240ebc188f1f0378424b8d1617c2e7440e', class: "progress-container" }, this.showValue && (h("div", { key: 'f8116e4eb824031d4bd1ac9d694e2bd3bca1ed6d', class: "progress-header" }, h("span", { key: '892813f8e0a028ce286c00edd0489d489dd271c4', class: "progress-value" }, this.value, "%"))), h("div", { key: '2e740487a59df1ec7def96565a9ee64d53b773b8', class: "progress-track", style: { height: this.height, backgroundColor: this.trackColor } }, h("div", { key: '4f6fd1c436563cacac31e385d84c4a21945f6e10', class: "progress-fill", style: fillStyle }))));
+    }
+    getSeverityVariable() {
+        switch (this.severity) {
+            case 'success': return 'Success-Success-500';
+            case 'warning': return 'Warning-Warning-500';
+            case 'error': return 'Error-Error-500';
+            case 'info': return 'Info-Info-500';
+            case 'neutral': return 'Gray-Gray-400';
+            default: return 'Primary-Primary-500';
+        }
+    }
+    static get is() { return "dropi-progress-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-progress-bar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-progress-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The progress value (0-100)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "severity": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral'",
+                    "resolved": "\"error\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The color scheme of the progress bar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "severity",
+                "defaultValue": "'primary'"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height of the progress bar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "'8px'"
+            },
+            "showValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the value as text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-value",
+                "defaultValue": "false"
+            },
+            "trackColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color of the track (optional, defaults to gray-100)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "track-color",
+                "defaultValue": "'var(--Gray-Gray-100, #F7F8FA)'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom color for the progress fill (overrides severity)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "''"
+            }
+        };
+    }
+}

package/dist/collection/components/dropi-radio-button/dropi-radio-button.js

@@ -18,17 +18,17 @@ export class DropiRadioButton {
      */
     resetTrigger = false;
     /** Emitted when the radio is selected */
-    onChange;
+    dropiChange;
     onResetTrigger(val) {
         if (val)
             this.checked = false;
     }
     handleChange(e) {
         this.checked = e.target.checked;
-        this.onChange.emit(e);
+        this.dropiChange.emit(e);
     }
     render() {
-        return (h("div", { key: '86430f601f7ddb6144682c0356938886217eb2ae', class: "dropi-radio-button" }, h("label", { key: '653fa8d5c33fc64ab44174e6d0fe35c6fd992be7', htmlFor: this.id }, h("input", { key: 'd99eae69867b0a09b6585a18dfaa52da353c5bd2', id: this.id, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
+        return (h("div", { key: '9f4c4f3be63c0aa0bcd1c48dacb97cec903db98d', class: "dropi-radio-button" }, h("label", { key: 'c29bd1ccc6c468b57fdcb4dd6c15cf541255cb71', htmlFor: this.id }, h("input", { key: '19533ffd5e5eb1b43d7e0f42971aa81652c8c926', id: this.id, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
     }
     static get is() { return "dropi-radio-button"; }
     static get encapsulation() { return "shadow"; }
@@ -149,8 +149,8 @@ export class DropiRadioButton {
     }
     static get events() {
         return [{
-                "method": "onChange",
-                "name": "onChange",
+                "method": "dropiChange",
+                "name": "dropiChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/dropi-radio-selection-list/dropi-radio-selection-list.js

@@ -21,9 +21,9 @@ export class DropiRadioSelectionList {
     filterText = '';
     parsedOptions = [];
     /** Emitted on selection change. e.detail = selected option id */
-    valueChange;
+    dropiChange;
     /** Emitted on search — matches Angular 'onSearch' */
-    onSearch;
+    dropiSearch;
     optionsChanged(val) {
         this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
     }
@@ -35,12 +35,12 @@ export class DropiRadioSelectionList {
         return this.parsedOptions.filter(o => o.name?.toLowerCase().includes(q));
     }
     render() {
-        return (h("div", { key: '7fdbf3d20a030a78ab4f48e7dba8333a34b1017b', class: "rsl" }, this.showFilter && (h("div", { key: '12e2abb8f8ed76c6b3231f28b63c842ba3c3c326', class: "rsl__search" }, h("dropi-icon", { key: '0d3e759696ceefdc997fadec75cc73f281caafd0', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("input", { key: 'd5605975ebfda35d7abb0e69fe0a2baa929faddb', class: "rsl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
+        return (h("div", { key: '296bdc955d13b8163ca954f6d399543343e7e121', class: "rsl" }, this.showFilter && (h("div", { key: '4cdd3764411f389d2b6ce1145f5b6759bb20fc7b', class: "rsl__search" }, h("dropi-icon", { key: '81af80a3dddb6176625b6ba575b084501741cd81', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("input", { key: 'aa0e762f4403431225375f95c792af8596529588', class: "rsl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
                 this.filterText = e.target.value;
-                this.onSearch.emit({ searchValue: this.filterText, filteredOptions: this.filtered });
-            } }))), h("div", { key: '25dae74884621ce4f27f214de94c9ddb0fa1799f', class: "rsl__list" }, this.filtered.map(opt => {
+                this.dropiSearch.emit({ searchValue: this.filterText, filteredOptions: this.filtered });
+            } }))), h("div", { key: 'd153875a1c09957b74648f61f70320968ea6cd40', 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.valueChange.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), (isSelected || this.alwaysShowDescription) && opt.description && (h("span", { class: "rsl__desc" }, opt.description)))));
+            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), (isSelected || this.alwaysShowDescription) && opt.description && (h("span", { class: "rsl__desc" }, opt.description)))));
         }))));
     }
     static get is() { return "dropi-radio-selection-list"; }
@@ -213,8 +213,8 @@ export class DropiRadioSelectionList {
     }
     static get events() {
         return [{
-                "method": "valueChange",
-                "name": "valueChange",
+                "method": "dropiChange",
+                "name": "dropiChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -228,8 +228,8 @@ export class DropiRadioSelectionList {
                     "references": {}
                 }
             }, {
-                "method": "onSearch",
-                "name": "onSearch",
+                "method": "dropiSearch",
+                "name": "dropiSearch",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/dropi-read-more/dropi-read-more.js

@@ -28,7 +28,7 @@ export class DropiReadMore {
     }
     render() {
         const showToggle = this.needsTruncation && (this.expanded ? this.showSeeLess : true);
-        return (h("div", { key: '125c5f1d75c1e06f02d9898f375626bb75a67cd8', class: "read-more" }, h("p", { key: '4a4450a3468e7fe7297fdae98d370f8cd77b8553', class: "read-more__text", style: this.textStyle ? this.textStyle : undefined }, this.displayText, showToggle && (h("button", { key: 'cfe58b2781b908d9a0a802b4bd68cedf8dea827e', class: "read-more__toggle", style: this.buttonStyle ? this.buttonStyle : undefined, onClick: () => this.expanded = !this.expanded }, this.expanded ? ' Ver menos' : '... Ver más')))));
+        return (h("div", { key: '6accf9aa0a6f7377c7de6e8cbcb9e2a7ee99573a', class: "read-more" }, h("p", { key: '96e5493df8b065008f9bc45cea1ba768eabfc0a2', class: "read-more__text", style: this.textStyle ? this.textStyle : undefined }, this.displayText, showToggle && (h("button", { key: '195d962715c5c618701c3e86df618289915e3a9b', class: "read-more__toggle", style: this.buttonStyle ? this.buttonStyle : undefined, onClick: () => this.expanded = !this.expanded }, this.expanded ? ' Ver menos' : '... Ver más')))));
     }
     static get is() { return "dropi-read-more"; }
     static get encapsulation() { return "shadow"; }