@dropi/ui 0.1.51 → 0.1.53

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

@@ -100,14 +100,14 @@ export class DropiOtpSendCode {
     }
     render() {
         const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
-        return (h("div", { key: '4fdb8eb4d4932b6509798a50ee474c56fb001fa8', class: "otp" }, this.showLabelContact && (h("p", { key: '2f95e7f0138ce067e3da3c0822d8277e7fccc357', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: '23508736c6cfdf095f2b9192ff3d566e98e715c7' }, " ", this.labelContact))), h("div", { key: '8c01d71b208ae557f9ffba7b76d60c049bdde9ce', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, this.digits.map((_, i) => (h("input", { key: i, ref: (el) => {
+        return (h("div", { key: '68d01986b43ee262c6df66d1160df32313c76edf', class: "otp" }, this.showLabelContact && (h("p", { key: '83138a2f4716552cce108c228b99c1e7fc532036', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: '8de893e9ea835b3459b8be78414d337436f908de' }, " ", this.labelContact))), h("div", { key: 'a50f5e2ae1733ec1df704578d6264b8e86a08f5b', 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--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: '8215ecbdc651a3c79a8841c5620bd7e8c5c8228e', class: "otp__error" }, this.errorMessage)), h("div", { key: 'c1a81e44295abb3b373936a5c276aea4497cf2e9', 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: '315b68b30120ab315f106eed441b9a61550d7833', class: "otp__error" }, this.errorMessage)), h("div", { key: 'b07d47236824b631193b9a90c083ea5d170d135b', 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"; }

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

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
 }
 
@@ -27,7 +28,7 @@
   background: transparent;
   color: var(--Gray-Gray-600, #475066);
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -97,7 +98,7 @@
   background: var(--Neutral-White, #ffffff);
   color: var(--Gray-Gray-600, #475066);
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   cursor: pointer;
   outline: none;
 }

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

@@ -54,9 +54,9 @@ export class DropiPaginator {
         const pages = this.pageNumbers;
         const isFirst = this.currentPage <= 1;
         const isLast = this.currentPage >= this.totalPages;
-        return (h("div", { key: '6b39ba2ff5168182a36c59e521e46e12a32ebe85', class: "paginator" }, h("div", { key: '9bc76ef25f10290b575ce047bb5f093e6698a670', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: '25def90ed595b4c56cd1481ecf1cc2ed2cc1aeb9', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '505c131c240d7af5b5860802a69be6b8971b0ab3', name: "Arrow-double-small-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: '090d9b536a0b80d12ac1a48bf9519b34d4b6bc9a', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, h("dropi-icon", { key: 'aec79c1b98329c1302478d8fe738586a8587dca0', name: "Dropdown-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: 'bc9416a0cfee88e4739c11a3ddbc0c4a244cc21d', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
+        return (h("div", { key: 'e72ebe722f06549a3000d89597b8835d93ed7be1', class: "paginator" }, h("div", { key: '5e6fc47b3bc6fc4a94bf0770f405e1ea73eb411d', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: '7ee39bcd8506638c6b392b48e63cd0f0a3f671f7', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '857739a713620c191f8106565a2d9e8ac51df3fe', name: "Arrow-double-small-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: '8052d9499ed78c264390c875e73e7f18d5e2e888', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, h("dropi-icon", { key: '243eeba594d2029bc47bc651244d9b1664f7041c', name: "Dropdown-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: '0beca41b97528db889db9265c0779cb842132e38', 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: 'fb1f077bd49fdceb052c3d1613d58078f2202ba9', 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: 'fe05545abd3c8d72a897c5a68e76347bbe39625b', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: '17063d4d03213cbf38b1ff2c79187ec07ba0c8b3', name: "Dropdown-Right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: 'b4d0df3505ad5a1c5c0899a7a13aa9f8b79db511', 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: 'd0db6c56e6a8dcbf441038b4391b004083a6f708', 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: '5a318c012b3da12ed6cf7e3b9548b5e5c93a4abd', 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: '1eb25a3ddf80cbf32e4beae87d66a516b7f1304d', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: '98f4c308b02777a28349e3d873c486ea24a66ea5', name: "Dropdown-Right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: 'dabccdd09218037c302a051bdca26aefebb4e015', 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: '7a6872706fba9456b57c6d55778c456de1cf179d', name: "Arrow-double-small-right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))))));
     }
     static get is() { return "dropi-paginator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
-:host { display: block; width: 100%; position: relative; font-family: 'Inter', sans-serif; }
+:host { display: block; width: 100%; position: relative; font-family: var(--font-family-01, 'Inter', sans-serif); }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 *, *::before, *::after { box-sizing: border-box; }
 
 /* Ocultar spin buttons en inputs numéricos */
@@ -41,7 +42,7 @@ input[type='number'] {
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
   border-radius: 5px;
   font-size: 14px;
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   transition: border-color 0.3s ease-in-out;
   height: 40px;
   padding: 0 12px;
@@ -85,7 +86,7 @@ input[type='number'] {
   background: var(--Neutral-White, #ffffff);
   color: var(--Gray-Gray-500, #69738c);
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -176,7 +177,7 @@ input[type='number'] {
   text-align: left;
   color: var(--Gray-Gray-600, #475066);
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   cursor: pointer;
   display: flex;
   align-items: center;

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

@@ -183,10 +183,10 @@ export class DropiPhoneInput {
     render() {
         const country = this.selectedCountry;
         const isInvalid = this.isValidPhone === false;
-        return (h("div", { key: 'c15336990cd554166dcfec74bbf577074a7fe870', class: "phone-wrap" }, h("div", { key: '7136d327befe46db5b9fd79075526d4a327532ff', class: "phone-input-container" }, h("div", { key: '2348818f20cc26941dd06730d75c95497eb73468', class: "custom-select" }, h("button", { key: '37a0289468cc49b914d31a056d94c1caafc4431d', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
+        return (h("div", { key: '8baf494cc8b0c7925414a5c6b518bed906c6c9af', class: "phone-wrap" }, h("div", { key: '8676178ee71fc85eaab623dea92760f0ae661c77', class: "phone-input-container" }, h("div", { key: 'b4037828a850187c7c01df69c46704ca38ab9399', class: "custom-select" }, h("button", { key: '796f0d20cffc0c821012245fe49a9c04b2d07f85', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
                 if (!this.disabledInput)
                     this.open = !this.open;
-            } }, h("span", { key: '59368b25a2afa0a3e7fbb930483239680a867651', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, h("img", { key: 'd472729d11380a54182927000703c224104f9213', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), h("dropi-icon", { key: '9c73aea42e3f30793505277032c892b3947a90be', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), h("ul", { key: 'b3238ad80a85356fbd95a482c3ffa0cf3ecb810f', 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: '3f0c3ef4f01b13f9f033b5205fe5ab019a923781', 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: '67d2755de630b936763fa2610a0e7ba4650476c4', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, h("img", { key: '576ea15412ad8106e9674bb53dd9b71f86654b48', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), h("dropi-icon", { key: '1db0802eb57a6359b2482bc8f24b39957c6cca09', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), h("ul", { key: 'cf7a36e39eda8d049c0f9576f52e24e0c88173f3', 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: '813f274452998d7d329adac1b21c796b61a26a9b', 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"; }

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

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
   width: 100%;
 }

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

@@ -17,7 +17,7 @@ export class DropiProgressBar {
             width: `${Math.min(100, Math.max(0, this.value))}%`,
             backgroundColor: this.color || `var(--${this.getSeverityVariable()}, #50A5F1)`,
         };
-        return (h("div", { key: '7093e06299ccb8365d07fa1bc20838254b08957e', class: "progress-container" }, this.showValue && (h("div", { key: 'f32dcb2d2c4dcfcdba5661dc7b66c1f36d4bb66c', class: "progress-header" }, h("span", { key: '5d556cff4beb0af77c28fd934757512a3470b83d', class: "progress-value" }, this.value, "%"))), h("div", { key: '35666669d0206354d2d3e797bf553b767bfb63d5', class: "progress-track", style: { height: this.height, backgroundColor: this.trackColor } }, h("div", { key: '037d4d7cacc0834b8d79d1fee8c6e9ba3edfc3f5', class: "progress-fill", style: fillStyle }))));
+        return (h("div", { key: 'ff6b55a3f0aaf2eb6f5310d06acf9cfa0f3a2b12', class: "progress-container" }, this.showValue && (h("div", { key: 'f34f6818580f08c0308a4d75ac4c6cfef6d992a6', class: "progress-header" }, h("span", { key: 'daa2e09a6698da3dc3ad207ff6a6cd1882de66cc', class: "progress-value" }, this.value, "%"))), h("div", { key: 'dbe1cf7f8330446dd2a2e7b8c3b049b7c0f816eb', class: "progress-track", style: { height: this.height, backgroundColor: this.trackColor } }, h("div", { key: 'ce7a0598e201918aa4e925a97c7426c048fd00b9', class: "progress-fill", style: fillStyle }))));
     }
     getSeverityVariable() {
         switch (this.severity) {

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

@@ -3,6 +3,7 @@
 }
 
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 
 .dropi-radio-button {
   display: flex;

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

@@ -35,7 +35,7 @@ export class DropiRadioButton {
         this.dropiChange.emit(e);
     }
     render() {
-        return (h("div", { key: 'e42d178a92a815c22b197aec5d962a19f60a4f6f', class: "dropi-radio-button" }, h("label", { key: '0beae39fb6860265332c1ed12d38bc97c78b22c1', htmlFor: this.inputId }, h("input", { key: '4ddb55ecb50c030ed7d4a8795246a9d57f95f0da', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
+        return (h("div", { key: 'f5a4cfda3991106a02821a499452294509fea514', class: "dropi-radio-button" }, h("label", { key: '8f28e2d4a0da03bd1b0ef2d8a92b1ed9b2b66c26', htmlFor: this.inputId }, h("input", { key: 'ddd006fafd64e071a1431dd3fb827f06a9c8d92d', id: this.inputId, 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"; }

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

@@ -1,4 +1,5 @@
 :host { display: block; width: 100%; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 *, *::before, *::after { box-sizing: border-box; }
 
 .rsl__search {
@@ -16,7 +17,7 @@
   border: none;
   outline: none;
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   color: var(--Gray-Gray-700, #32394d);
   background: transparent;
 }

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

@@ -1,11 +1,12 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
 }
 
 .read-more__text {
   margin: 0;
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   color: var(--Gray-Gray-800, #1f2433);
   line-height: 1.5;
 }
@@ -14,7 +15,7 @@
   all: unset;
   display: inline;
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   font-weight: var(--font-weight-bold, 700);
   color: var(--Gray-Gray-600);
   cursor: pointer;

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: '27f1da08ef634213771942cf956edb42f543cbbd', class: "read-more" }, h("p", { key: '0f8090c4776296e1d7c9073fe5445b5f1d195464', class: "read-more__text", style: this.textStyle ? this.textStyle : undefined }, this.displayText, showToggle && (h("button", { key: 'b2cc2616cd93dbc4b6025854ab9e4250d699f8fe', 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: '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')))));
     }
     static get is() { return "dropi-read-more"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-search/dropi-search.css

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
   width: 100%;
   position: relative;
@@ -36,7 +37,7 @@
   border-radius: var(--Border-2, 8px);
   background: var(--Neutral-White, #ffffff);
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   color: var(--Gray-Gray-700, #32394d);
   outline: none;
   transition: border-color 0.2s;

package/dist/collection/components/dropi-select/dropi-select.css

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
   width: 100%;
   text-align: left;
@@ -51,7 +52,7 @@
   background: var(--Neutral-White, #ffffff);
   color: var(--Gray-Gray-500, #69738c);
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -148,7 +149,7 @@
   text-align: left;
   color: var(--Gray-Gray-600, #475066);
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -211,7 +212,7 @@
   border: none;
   outline: none;
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   color: var(--Gray-Gray-700, #32394d);
   background: transparent;
 }

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

@@ -387,7 +387,7 @@ export class DropiSelect {
         ]), !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: 'cd22a44efb11820180aec0cc36aa0e7949712e78', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: 'f2b2c09818cf292828d6d6ce6d3e5c9e86508495', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: 'e84b30735dff4ccb40f8931835bf51e3bab6ff11', class: "asterisk" }, " *"))), h("div", { key: '048a25a502b2f7550d298d22439c46589ada08fe', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: '849b92a26294622e602fe2ff6bf2db89e22be4f4', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (h("div", { key: '8b9ac9ea4b494fb830237362f5b9db6b606df765', class: "select-helper" }, h("span", { key: '74fa19eee858b116f81d41ae1a3deb00beaf103e' }, this.textHelper))), this.hasError && this.errorText && (h("div", { key: '34a015639d80fb8df598f67129f84c34b737ecf4', class: "select-helper-error" }, h("dropi-icon", { key: 'ebcbcadc5c72d35f0a35bc975dda0995b2a493a1', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: 'f473e766279e0c784251251d6c59fbd92107a7e8' }, this.errorText))), this.renderDropdown()));
+        return (h("div", { key: 'b11bfc98a7d37846afaad6b171f564b5cb72620a', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: 'bda1ed87b6ed257c1f8148464199f241d3f5d5f9', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: '81e9fd26856228c8ec59271bae8f3788f22fc2ee', class: "asterisk" }, " *"))), h("div", { key: 'a8feb6ffde967418ad5655e24b3b2ac260541508', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: '43c9e38a90c6f072f540f6e6af3315e26ce2b2e0', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (h("div", { key: '73c290608f1feeca8a78d391c63ff76cbdfc41a7', class: "select-helper" }, h("span", { key: 'b64e35c437f9791e790e4d2155deae02cdeb684f' }, this.textHelper))), this.hasError && this.errorText && (h("div", { key: '4e7126e5f6f64a6134928e9aa1901e2d795a9246', class: "select-helper-error" }, h("dropi-icon", { key: '36019fb1921f710113fb10e99eb16fa46a6306dc', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '99783b102c6d345404ef8d9dfb0325c682c8f87b' }, this.errorText))), this.renderDropdown()));
     }
     static get is() { return "dropi-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-sidebar/dropi-sidebar.css

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: block;
 }
 

package/dist/collection/components/dropi-simple-stepper/dropi-simple-stepper.css

@@ -4,6 +4,7 @@
 }
 
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 
 .stepper {
   display: flex;

package/dist/collection/components/dropi-skeleton/dropi-skeleton.css

@@ -3,6 +3,7 @@
 }
 
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 
 .skeleton-lines {
   display: flex;

package/dist/collection/components/dropi-steps/dropi-steps.css

@@ -4,6 +4,7 @@
 }
 
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01); }
 
 .stepper {
   display: flex;
@@ -17,59 +18,59 @@
   flex-direction: column;
   align-items: center;
   flex: 1;
-  position: relative;
 }
 
-/* ── Circle row (circle + connecting line) ──────────────── */
+/* ── Circle row: [left-line][circle][right-line] ────────── */
 .stepper__circle-wrap {
   display: flex;
   align-items: center;
   width: 100%;
-  position: relative;
+}
+
+.stepper__line {
+  flex: 1;
+  height: 2px;
+  background: var(--Gray-Gray-200);
+  transition: background 0.2s;
+}
+
+.stepper__line--done {
+  background: var(--Primary-Primary-500);
+}
+
+.stepper__line--invisible {
+  background: transparent;
 }
 
 .stepper__circle {
-  width: 28px;
-  height: 28px;
+  width: 24px;
+  height: 24px;
   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);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-bold);
   flex-shrink: 0;
-  z-index: 1;
   transition: background 0.2s, border-color 0.2s;
 }
 
 .stepper__circle--pending {
-  background: var(--Neutral-White, #ffffff);
-  border: 2px solid var(--Gray-Gray-200, #c3c9d9);
-  color: var(--Gray-Gray-400, #858ea6);
+  background: var(--Neutral-White);
+  border: 2px solid var(--Gray-Gray-200);
+  color: var(--Gray-Gray-400);
 }
 
 .stepper__circle--focus {
-  background: var(--Neutral-White, #ffffff);
-  border: 2px solid var(--Primary-Primary-500, #f49a3d);
-  color: var(--Primary-Primary-500, #f49a3d);
+  background: var(--Neutral-White);
+  border: 2px solid var(--Primary-Primary-500);
+  color: var(--Primary-Primary-500);
 }
 
 .stepper__circle--completed {
-  background: var(--Primary-Primary-500, #f49a3d);
-  border: 2px solid var(--Primary-Primary-500, #f49a3d);
-  color: var(--Neutral-White, #ffffff);
-}
-
-/* ── Connecting line ────────────────────────────────────── */
-.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);
+  background: var(--Primary-Primary-500);
+  border: 2px solid var(--Primary-Primary-500);
+  color: var(--Neutral-White);
 }
 
 /* ── Labels ─────────────────────────────────────────────── */
@@ -78,18 +79,34 @@
   flex-direction: column;
   align-items: center;
   gap: 2px;
-  margin-top: var(--Size-2, 8px);
+  margin-top: var(--Size-2);
   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);
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-semibold);
+  color: var(--Gray-Gray-400);
 }
 
 .stepper__desc {
-  font-size: var(--font-size-xs, 10px);
-  color: var(--Gray-Gray-500, #69738c);
+  font-size: var(--font-size-xs);
+  color: var(--Gray-Gray-400);
+}
+
+.stepper__step--focus .stepper__title {
+  color: var(--Gray-Gray-700);
+  font-weight: var(--font-weight-bold);
+}
+.stepper__step--focus .stepper__desc {
+  color: var(--Gray-Gray-500);
+}
+
+.stepper__step--completed .stepper__title {
+  color: var(--Gray-Gray-600);
+  font-weight: var(--font-weight-semibold);
+}
+.stepper__step--completed .stepper__desc {
+  color: var(--Gray-Gray-500);
 }

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

@@ -38,8 +38,18 @@ export class DropiSteps {
         return (h("div", { key: '35c28210675370e76f16e2525fdf785b6205ec78', class: "stepper" }, steps.map((step) => {
             const state = this.stepState(step);
             const label = labels[step - 1];
+            const isFirst = 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", iconWidth: "12px", iconHeight: "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)))));
+            const prevState = step > 1 ? this.stepState(step - 1) : null;
+            return (h("div", { class: { 'stepper__step': true, [`stepper__step--${state}`]: true }, key: step }, h("div", { class: "stepper__circle-wrap" }, h("div", { class: {
+                    'stepper__line': true,
+                    'stepper__line--done': prevState === 'completed',
+                    'stepper__line--invisible': isFirst,
+                } }), h("div", { class: { 'stepper__circle': true, [`stepper__circle--${state}`]: true } }, state === 'completed' ? (h("dropi-icon", { name: "Check", iconWidth: "12px", iconHeight: "12px", color: "Neutral-White" })) : (this.showNumberOfStep ? h("span", null, step) : null)), h("div", { class: {
+                    'stepper__line': true,
+                    'stepper__line--done': state === 'completed' || state === 'focus',
+                    'stepper__line--invisible': isLast,
+                } })), label && (h("div", { class: "stepper__label" }, label.title && h("span", { class: "stepper__title" }, label.title), label.description && h("span", { class: "stepper__desc" }, label.description)))));
         })));
     }
     static get is() { return "dropi-steps"; }

package/dist/collection/components/dropi-switch/dropi-switch.css

@@ -3,6 +3,7 @@
 }
 
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 
 .toggle-switch {
   position: relative;

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

@@ -25,7 +25,7 @@ export class DropiSwitch {
         this.dropiChange.emit(this.isChecked);
     }
     render() {
-        return (h("label", { key: 'bfe479e64d61f2ffcd76db084c4504842bbb6421', class: "toggle-switch" }, h("input", { key: 'add18063655620fd12d43e0c02b48775b81e9ffa', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: '8b6c30839589d9354cf309905e9d0863e8354578', class: "slider" })));
+        return (h("label", { key: 'fe429645c1b3032a273c3dd45e450cc3cdfaa4ae', class: "toggle-switch" }, h("input", { key: '8e73bdbe0b14b8e889804f5d35616c0cfa52b025', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: '245aae98ce063331246fda2c729134112a199114', class: "slider" })));
     }
     static get is() { return "dropi-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-table/dropi-table.css

@@ -1,4 +1,5 @@
-:host { display: block; width: 100%; min-width: 0; }
+:host { display: block; font-family: var(--font-family-01, 'Inter', sans-serif); width: 100%; min-width: 0; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 *, *::before, *::after { box-sizing: border-box; }
 
 /* ── Contenedor principal ─────────────────────────────────────────── */

package/dist/collection/components/dropi-tabs/dropi-tabs.css

@@ -1,4 +1,5 @@
-:host { display: block; width: 100%; }
+:host { display: block; font-family: var(--font-family-01, 'Inter', sans-serif); width: 100%; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 *, *::before, *::after { box-sizing: border-box; }
 
 .tabs-container {

package/dist/collection/components/dropi-tag/dropi-tag.css

@@ -3,6 +3,7 @@
 }
 
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 
 .container-chips {
   display: flex;

package/dist/collection/components/dropi-tag-type-product/dropi-tag-type-product.css

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: inline-block;
 }
 

package/dist/collection/components/dropi-tag-type-product/dropi-tag-type-product.js

@@ -7,7 +7,7 @@ export class DropiTagTypeProduct {
     /** Label text. Default: VARIABLE */
     label = 'VARIABLE';
     render() {
-        return h("div", { key: '89083374c365448b4862687559ce311e258ee031', class: "type-variation" }, this.label);
+        return h("div", { key: 'ae1cd50cd3e82180704ae4f5406b4dc13ffbd12c', class: "type-variation" }, this.label);
     }
     static get is() { return "dropi-tag-type-product"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-text-area/dropi-text-area.css

@@ -1,4 +1,5 @@
 :host {
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -39,7 +40,7 @@ textarea.form-control {
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
   border-radius: var(--Border-2, 8px);
   font-size: var(--font-size-s, 12px);
-  font-family: inherit;
+  font-family: var(--font-family-01, 'Inter', sans-serif);
   color: var(--Gray-Gray-700, #32394d);
   background: var(--Neutral-White, #ffffff);
   transition: border-color 0.3s ease-in-out;

package/dist/collection/components/dropi-time-line/dropi-time-line.css

@@ -3,6 +3,7 @@
 }
 
 *, *::before, *::after { box-sizing: border-box; }
+button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
 
 .timeline {
   display: flex;