@dropi/ui 0.1.42 → 0.1.44

package/dist/collection/components/dropi-date-picker/dropi-date-picker.js

@@ -10,12 +10,18 @@ const DAYS_ES = ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'];
  * Emits ISO date strings (YYYY-MM-DD).
  */
 export class DropiDatePicker {
+    internals;
+    /** Name for native form submission */
+    name = '';
     /** Selected date (ISO string, single mode) - matches Angular 'selectedDate' */
     selectedDate = '';
     /** Range start date (ISO string, range mode) */
     startDate = '';
     /** Range end date (ISO string, range mode) */
     endDate = '';
+    valueChanged() {
+        this.updateFormValue();
+    }
     /** Enable range selection - matches Angular selectionMode */
     selectionMode = 'single';
     /** Min selectable date (ISO string) */
@@ -48,6 +54,17 @@ export class DropiDatePicker {
     dropiClosePanel;
     /** Emitted when range selected */
     dropiRangeChange;
+    componentWillLoad() {
+        this.updateFormValue();
+    }
+    updateFormValue() {
+        if (this.selectionMode === 'range') {
+            this.internals.setFormValue(this.startDate && this.endDate ? `${this.startDate},${this.endDate}` : '');
+        }
+        else {
+            this.internals.setFormValue(this.selectedDate || '');
+        }
+    }
     get displayValue() {
         if (this.selectionMode === 'range') {
             if (this.startDate && this.endDate)
@@ -167,12 +184,12 @@ export class DropiDatePicker {
     render() {
         const days = this.buildDays();
         const today = new Date().toISOString().slice(0, 10);
-        return (h("div", { key: '0c3cb89d77d6d8e7d3f955354d6be4b7a1f507fb', class: "dp-wrap" }, this.label && h("label", { key: '672ad3d08337ed0df7c7e7d582ba8fe5af8d2b23', class: "dp-label" }, this.label), h("button", { key: '848428a5ce236b37e8e988223c9ef8bd91ea16b3', class: {
+        return (h("div", { key: '97a96b56b0e8ae551f747bad4a3459a1f4945411', class: "dp-wrap" }, this.label && h("label", { key: 'a1792032ab9ae2dbe574f50b7a537df687eae40c', class: "dp-label" }, this.label), h("button", { key: '4237c2b988f1e9fbaa77dc2a989964216e3fe902', class: {
                 'dp-trigger': true,
                 'dp-trigger--disabled': this.disabled,
                 'dp-trigger--invalid': this.isInvalid,
                 'dp-trigger--loading': this.loading
-            }, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, h("dropi-icon", { key: 'c51b9238996ec454f64f53d4e9ede35bf494fd95', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("span", { key: 'b34ed963710695296a2986b0e790457b90a3ee60', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), h("dropi-icon", { key: '8cbefce39dab39a5cba941f4538f46cf97db1c06', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (h("div", { key: '36a5db42655b136cee1abf31bb5e206a6d118beb', class: "dp-popup" }, h("div", { key: '456c2778f035fae19450841baa20df5092f6dca4', class: "dp-nav" }, h("button", { key: '8f05a6aa4e1f4e0dda08ee9dad89f189c130eef0', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, h("dropi-icon", { key: '41f4e9b157e56669fa179cfed62d960ff1eadfd6', name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), h("span", { key: '53556f3a356e1d2b63b59d4edda40ddf5fda9e5f', class: "dp-nav__title" }, h("span", { key: '4bad1d735d4235b2ddaac33f3fa8f6335e753984' }, MONTHS_ES[this.viewMonth]), h("span", { key: 'c7af6bb7edc5dead7751c65ee024485aa2a6cf65' }, this.viewYear)), h("button", { key: '5ff7b70b69732c01ae7a45c7b65336982ea6eed8', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, h("dropi-icon", { key: '718725e17a530de4e8081c97e639342ff7fd9a96', name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), h("div", { key: 'd3d899342a15a9a0f2b508dbd39945831ebbad0d', class: "dp-grid" }, DAYS_ES.map(d => (h("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
+            }, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, h("dropi-icon", { key: '39591fedb92b92e6507b564fc8c145711f1a21b1', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("span", { key: '305e3f81d64c01603687d53edc59e1d19ef06c3c', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), h("dropi-icon", { key: '13feb346ad7b07a7e2f208e299f62a8261a97655', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (h("div", { key: '4cdf8a69422a0b54d0f7c1a6711a683dab7d1f34', class: "dp-popup" }, h("div", { key: '0c6fb31094003c66c5b471e738dd75e7b865401f', class: "dp-nav" }, h("button", { key: '4fa24f9450cf6c5e888cea374619e14245c0c005', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, h("dropi-icon", { key: '2196f85700b252d4f83536f11ed197c083fc45ec', name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), h("span", { key: '01619de7c5218b506f75234745f3184af813a491', class: "dp-nav__title" }, h("span", { key: '8074e7deeb6c102bad7f1911739e785187783a7c' }, MONTHS_ES[this.viewMonth]), h("span", { key: '69e9c3b41361e293a843f911b5bcf4690995d2b4' }, this.viewYear)), h("button", { key: '51c0ad3da96835736170fbf94338fd70c942c3d2', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, h("dropi-icon", { key: '24eb4385639c9a71f5312f32b33b36593c2b0259', name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), h("div", { key: 'c18cecd81af38b3a6f23402501011c09b8b453d7', class: "dp-grid" }, DAYS_ES.map(d => (h("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
             const isSelected = this.selectionMode !== 'range'
                 ? iso === this.selectedDate
                 : iso === this.startDate || iso === this.endDate;
@@ -194,12 +211,12 @@ export class DropiDatePicker {
                     if (this.selectionMode === 'range' && this.startDate && !this.endDate)
                         this.hoverDate = iso;
                 }, onMouseLeave: () => this.hoverDate = '' }, day));
-        })), h("div", { key: '84c799762393b9de0161795f20188a680490d4d8', class: "dp-footer" }, h("button", { key: '4696558b1be6bf8abe8461f341c129c640af46ce', class: "dp-footer__clear", type: "button", onClick: () => {
+        })), h("div", { key: '594f280cb269c32ac3a129401e13b710af1a7c7e', class: "dp-footer" }, h("button", { key: '6028ef84bc17f0d1bb0fd587a991698a8fc69338', class: "dp-footer__clear", type: "button", onClick: () => {
                 this.selectedDate = '';
                 this.startDate = '';
                 this.endDate = '';
                 this.open = false;
-            } }, "Limpiar"), h("button", { key: 'a87f6f92fa10829560d223835e70fd2951edc482', class: "dp-footer__today", type: "button", onClick: () => {
+            } }, "Limpiar"), h("button", { key: 'ab01840a18d657621205d4fba69cc53feb474d11', class: "dp-footer__today", type: "button", onClick: () => {
                 if (this.selectionMode !== 'range') {
                     this.selectedDate = today;
                     this.open = false;
@@ -213,6 +230,7 @@ export class DropiDatePicker {
     }
     static get is() { return "dropi-date-picker"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["dropi-date-picker.css"]
@@ -225,6 +243,26 @@ export class DropiDatePicker {
     }
     static get properties() {
         return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name for native form submission"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
             "selectedDate": {
                 "type": "string",
                 "mutable": true,
@@ -504,6 +542,18 @@ export class DropiDatePicker {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "selectedDate",
+                "methodName": "valueChanged"
+            }, {
+                "propName": "startDate",
+                "methodName": "valueChanged"
+            }, {
+                "propName": "endDate",
+                "methodName": "valueChanged"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "click",
@@ -513,4 +563,5 @@ export class DropiDatePicker {
                 "passive": false
             }];
     }
+    static get attachInternalsMemberName() { return "internals"; }
 }

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

@@ -4,7 +4,7 @@
 .drawer-host {
   position: fixed;
   inset: 0;
-  z-index: 1000;
+  z-index: var(--dropi-z-index-drawer, 9999);
   pointer-events: none;
   visibility: hidden;
 }

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

@@ -151,6 +151,7 @@ export class DropiInput {
         this.value = val;
         this.internals.setFormValue(val);
         this.dropiInput.emit(val);
+        this.dropiChange.emit(val);
     }
     handleKeyDown(e) {
         if ((this.isNumericInput || this.isMoneyInput || this.isThousandSeparator) && !this.isAllowedNumberKey(e)) {
@@ -165,7 +166,6 @@ export class DropiInput {
     }
     handleBlur() {
         this.touched = true;
-        this.dropiChange.emit(this.value);
         this.dropiBlur.emit();
     }
     togglePassword() {
@@ -231,14 +231,14 @@ export class DropiInput {
     render() {
         const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
         const showIconInline = !!this.icon;
-        return (h("div", { key: '36a33fdb7048e3ba43dae3c2d3d71c9f69643cac', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: '699adfe37d662ed328cd13fdad428e857b70f01d', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && h("span", { key: 'b2d6f4757cdb50eacfb7879e4a878e30adf5235d', class: "asterisk" }, " *"))), h("div", { key: 'dc080fc5d0ab12f0eadf7e1bb30cae5539f76640', class: "form-group" }, h("div", { key: 'cf228d5e4c7e0a04735d38ba239a2b989f5247ca', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: '049e396ea1f2f11625de73bc074c0e0aecea96ab', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (h("dropi-icon", { key: '544316f6e7a284acf65d3a2b7fb3a2654c80d95b', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' }, color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: '6d23ac748d0768d6eea0eb347bde7b13d8f20321', id: this.resolvedId, class: {
+        return (h("div", { key: '6af757e1d86bfe96d471e9cbed258a50727ae190', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: 'e88bf81fd2b79933e386c2e5fa38f57d85cfe836', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && h("span", { key: 'be8ec1b0d3ef624ca22e58ae072917ad2ecc79fb', class: "asterisk" }, " *"))), h("div", { key: '4806c0d250f00bb08788d9d6aa935ca15f2aa826', class: "form-group" }, h("div", { key: 'b9fa243d299bcd165458947d6695fcc845764276', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: '92b3cf11803745784f13e908ea88992f76c74473', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (h("dropi-icon", { key: 'c7dc725d577a6d4afb7f87c8b53b16c621de9e86', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' }, color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: '8146ae1794cbe1f200bb681358c7319f10faab3c', 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: '8f26c9430cbc1c6b55286d62c2a350724dd0101f', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: '95d953c160cf22457b0e1d6265b8137a24d4092b', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: 'ad3d4b5230fd32e97c661c64deadf97830caa550', class: "form-control-helper" }, this.isInvalid && h("dropi-icon", { key: '7c28120d1cc46ccd288948b1d2d9e5cc24521af7', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '40eb1eedd2a204975aed61fcd24ccadd26d8aaef', 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: '005d15af6b50b2cb2d47ac8381a722794eb273e5', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: 'ad56df877cff3df8a801cdfcb607d9af02f7465a', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: '76e858c13a798f69b2d20ee9908f17531568dad1', class: "form-control-helper" }, this.isInvalid && h("dropi-icon", { key: '3e42ffb4db7444ebfb49cc9c6720d5a9d02b2860', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '5e970903eb51ca6b72a43bef0edf6ef149443247', class: {
                 'disabled-helper': this.disabled,
                 'invalid-color': this.isInvalid,
             } }, this.textHelper)))))));
@@ -294,7 +294,7 @@ export class DropiInput {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name",
                 "defaultValue": "''"
             },

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

@@ -5,7 +5,7 @@
   position: fixed; inset: 0;
   display: flex; align-items: center; justify-content: center;
   pointer-events: none; opacity: 0;
-  transition: opacity 0.18s ease; z-index: 9999;
+  transition: opacity 0.18s ease; z-index: var(--dropi-z-index-modal, 9999);
   visibility: hidden;
 }
 .modal-root--open { opacity: 1; pointer-events: auto; visibility: visible; }

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

@@ -5,6 +5,9 @@ const RESEND_SECONDS = 30;
  * OTP input with configurable length, countdown timer and resend capability.
  */
 export class DropiOtpSendCode {
+    internals;
+    /** Name for native form submission */
+    name = '';
     /** Delivery method label */
     engine = 'email';
     /** Contact info (email/phone to show in label) */
@@ -36,6 +39,7 @@ export class DropiOtpSendCode {
     componentWillLoad() {
         this.digits = Array(this.digitsCount).fill('');
         this.digitStates = Array(this.digitsCount).fill('idle');
+        this.internals.setFormValue('');
     }
     componentDidLoad() { this.startCountdown(); }
     disconnectedCallback() { clearInterval(this.timer); }
@@ -63,9 +67,13 @@ export class DropiOtpSendCode {
             this.inputs[index + 1]?.focus();
         if (newDigits.every(d => d !== '')) {
             const finalCode = newDigits.join('');
+            this.internals.setFormValue(finalCode);
             this.codeCompleted.emit(finalCode);
             this.codeAccepted.emit(finalCode);
         }
+        else {
+            this.internals.setFormValue(newDigits.join(''));
+        }
     }
     handleKeyDown(e, index) {
         if (e.key === 'Backspace' && !this.digits[index] && index > 0) {
@@ -82,23 +90,28 @@ export class DropiOtpSendCode {
         this.inputs[Math.min(text.length, this.digitsCount - 1)]?.focus();
         if (newDigits.every(d => d !== '')) {
             const finalCode = newDigits.join('');
+            this.internals.setFormValue(finalCode);
             this.codeCompleted.emit(finalCode);
             this.codeAccepted.emit(finalCode);
         }
+        else {
+            this.internals.setFormValue(newDigits.join(''));
+        }
     }
     render() {
         const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
-        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) => {
+        return (h("div", { key: 'ee2e6766c4b220a1a12b8734747138cf2351a0d8', class: "otp" }, this.showLabelContact && (h("p", { key: '87f34e3b13c0e16e584cc03ea8c5a35e462784b1', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: '6c9d0c73340ff8dab1730b5d6c9cc0431f3ff21c' }, " ", this.labelContact))), h("div", { key: 'd82904db02da1da5f863bb86cef65b0da166ff0c', 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: '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")))));
+            }, 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: '7629619d5b2c4e8f38e2c2bc93ab134242b8e079', class: "otp__error" }, this.errorMessage)), h("div", { key: 'ea5472d4c55f1cdc30304e9e9bcaacf303ba4501', 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"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["dropi-otp-send-code.css"]
@@ -111,6 +124,26 @@ export class DropiOtpSendCode {
     }
     static get properties() {
         return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name for native form submission"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
             "engine": {
                 "type": "string",
                 "mutable": false,
@@ -276,4 +309,5 @@ export class DropiOtpSendCode {
                 "methodName": "handleDigitsCountChange"
             }];
     }
+    static get attachInternalsMemberName() { return "internals"; }
 }

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

@@ -100,6 +100,9 @@ const COUNTRIES = [
  */
 export class DropiPhoneInput {
     el;
+    internals;
+    /** Name for native form submission */
+    name = '';
     /** Initial country dial code (e.g. "57") — matches Angular 'CodArea' setter */
     codArea = '57';
     /** Phone number value — matches Angular 'ngModelPhone' */
@@ -134,6 +137,10 @@ export class DropiPhoneInput {
     dropiChangeSelect;
     codAreaChanged() {
         this.ngModelPhone = '';
+        this.updateFormValue();
+    }
+    ngModelPhoneChanged() {
+        this.updateFormValue();
     }
     selectedOptionChanged(val) {
         if (!val)
@@ -145,6 +152,11 @@ export class DropiPhoneInput {
     componentWillLoad() {
         if (this.selectedOption)
             this.selectedOptionChanged(this.selectedOption);
+        this.updateFormValue();
+    }
+    updateFormValue() {
+        const fullValue = this.ngModelPhone ? `+${this.codArea}${this.ngModelPhone}` : '';
+        this.internals.setFormValue(fullValue);
     }
     get selectedCountry() {
         const cleanCodArea = (this.codArea ?? '57').replace('+', '');
@@ -171,13 +183,14 @@ export class DropiPhoneInput {
     render() {
         const country = this.selectedCountry;
         const isInvalid = this.isValidPhone === false;
-        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: () => {
+        return (h("div", { key: '1634a703f734cd5db7b5d7acf83f403ea07962a3', class: "phone-wrap" }, h("div", { key: 'a9ed4a17b4a01893fc22d051241dcd494fa2e66d', class: "phone-input-container" }, h("div", { key: '6a50121fbb8939eac54035a314c340137aae63d5', class: "custom-select" }, h("button", { key: '0157b468dab13e23f83b9528ec235bc61be91733', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
                 if (!this.disabledInput)
                     this.open = !this.open;
-            } }, 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) }))));
+            } }, h("span", { key: 'b174ec714c415964d09f4661f58a1a62e8c80653', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, h("img", { key: 'f4c62db877a54bd395b756926918b8ff16511a2a', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), h("dropi-icon", { key: '809f64bed4cccd911110c9e8e52752554b0d8a86', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), h("ul", { key: 'b4dea28807780b086ba15161cee3e417efb2f2a1', 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: '4e1113fedf25b9c91d2aff815d6c862a7d47d072', 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"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["dropi-phone-input.css"]
@@ -190,6 +203,26 @@ export class DropiPhoneInput {
     }
     static get properties() {
         return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name for native form submission"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
             "codArea": {
                 "type": "string",
                 "mutable": true,
@@ -425,6 +458,9 @@ export class DropiPhoneInput {
         return [{
                 "propName": "codArea",
                 "methodName": "codAreaChanged"
+            }, {
+                "propName": "ngModelPhone",
+                "methodName": "ngModelPhoneChanged"
             }, {
                 "propName": "selectedOption",
                 "methodName": "selectedOptionChanged"
@@ -439,4 +475,5 @@ export class DropiPhoneInput {
                 "passive": false
             }];
     }
+    static get attachInternalsMemberName() { return "internals"; }
 }

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

@@ -4,6 +4,7 @@ import { h } from "@stencil/core";
  * Styled radio button with label.
  */
 export class DropiRadioButton {
+    internals;
     /** Label text displayed next to the radio */
     label = '';
     /** Input name (for grouping radio buttons) */
@@ -23,12 +24,18 @@ export class DropiRadioButton {
         if (val)
             this.checked = false;
     }
+    checkedChanged(val) {
+        this.internals.setFormValue(val ? 'on' : null);
+    }
+    componentWillLoad() {
+        this.internals.setFormValue(this.checked ? 'on' : null);
+    }
     handleChange(e) {
         this.checked = e.target.checked;
         this.dropiChange.emit(e);
     }
     render() {
-        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)));
+        return (h("div", { key: 'e4b54d9bda299b9150ebf9791925e0e7c3b9fb38', class: "dropi-radio-button" }, h("label", { key: '0a4c6443668477a2cb6b2d5a3d8bc1744a0fcffd', htmlFor: this.id }, h("input", { key: '6ba6b5af4bc061664dee0b6554c769613080dbb8', 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"; }
@@ -81,7 +88,7 @@ export class DropiRadioButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name",
                 "defaultValue": "'name'"
             },
@@ -169,6 +176,10 @@ export class DropiRadioButton {
         return [{
                 "propName": "resetTrigger",
                 "methodName": "onResetTrigger"
+            }, {
+                "propName": "checked",
+                "methodName": "checkedChanged"
             }];
     }
+    static get attachInternalsMemberName() { return "internals"; }
 }

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

@@ -123,7 +123,7 @@
   border-radius: var(--Border-2, 8px);
   background: var(--Neutral-White, #ffffff);
   box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12);
-  z-index: 9999;
+  z-index: var(--dropi-z-index-overlay, 11000);
   animation: dropdown-open 120ms ease-out;
 }
 

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: '4f34c329d9993926758230f0e9ca0f8d0e57ef6e', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: '743013592658ee415d4a9e3db8ec648472a3428e', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: '56183248733eb18956664c859c8f7d4057f3fa11', class: "asterisk" }, " *"))), h("div", { key: 'c93f45456478ac5419d542512092e877a04f28b7', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: '0632779b9ba71f1fb91944b54b477999f607a3f5', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (h("div", { key: '3e57fc2b53715abb9800db573119cf77b0333d37', class: "select-helper" }, h("span", { key: 'baf3d1f0ae4d535acae2a08df8d2079996afdcff' }, this.textHelper))), this.hasError && this.errorText && (h("div", { key: '8b25aae92b9370a02fcfd81f50b98df145d3cb0e', class: "select-helper-error" }, h("dropi-icon", { key: '60643f0b7e54f8533dc9fd7dd17715aec59d851c', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '35bcdfd3c9825cbac269b1085d4c552df694f33a' }, this.errorText))), this.renderDropdown()));
+        return (h("div", { key: 'f09113a288d45bb5519503bb78c41e236913c1eb', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: 'c0b59763dc3529d7f9bb5597a2bea0d38070a07b', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: '6c8a47bdfc216231ba72420298b3bc8deeeae435', class: "asterisk" }, " *"))), h("div", { key: '8ec45010af1252effe34bb69d3f40ea277459511', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: 'b3f7f9adacd57b091baac662fc7be6fcd847c3a4', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (h("div", { key: 'a4cce833b50b2bc62cb7142da420f81c0647e97e', class: "select-helper" }, h("span", { key: 'f69375abc2f66b5b1278895b8f313adabfa0f938' }, this.textHelper))), this.hasError && this.errorText && (h("div", { key: '6681bdbb705633d393adab09a889f3f1fb6fbe8a', class: "select-helper-error" }, h("dropi-icon", { key: '09521eeef2cf2a58cb74bea5bfae8a6d58d17682', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '807820bb0a474079627bf12c20f4a034896785cd' }, this.errorText))), this.renderDropdown()));
     }
     static get is() { return "dropi-select"; }
     static get encapsulation() { return "shadow"; }
@@ -491,7 +491,7 @@ export class DropiSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name",
                 "defaultValue": "''"
             },

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

@@ -4,19 +4,28 @@ import { h } from "@stencil/core";
  * Toggle switch component. Emits dropiChange on toggle.
  */
 export class DropiSwitch {
+    internals;
+    /** Name for native form submission */
+    name = '';
     /** Whether the switch is on */
     isChecked = false;
     /** Whether the switch is disabled */
     disabled = false;
     /** Emitted when the toggle state changes */
     dropiChange;
+    checkedChanged(val) {
+        this.internals.setFormValue(val ? 'on' : null);
+    }
+    componentWillLoad() {
+        this.internals.setFormValue(this.isChecked ? 'on' : null);
+    }
     onToggleChange(event) {
         const input = event.target;
         this.isChecked = input.checked;
         this.dropiChange.emit(this.isChecked);
     }
     render() {
-        return (h("label", { key: '977f209e9d6411bf386637c1073dca0f5d1c72f3', class: "toggle-switch" }, h("input", { key: '8deef7c0c079d8d5662bd05372eb74d5cc68429f', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: '2f6dd3b87996271d0c6abddc86697791de4da9b1', class: "slider" })));
+        return (h("label", { key: 'b3321fd96a1487210a920f5494708dc2eb05f10c', class: "toggle-switch" }, h("input", { key: 'ee7cfecf443a1c839ce145ade18cc3ff15924816', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: 'c0800bd9a7f52cf666b3e475265da223b852be9a', class: "slider" })));
     }
     static get is() { return "dropi-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -33,6 +42,26 @@ export class DropiSwitch {
     }
     static get properties() {
         return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name for native form submission"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
             "isChecked": {
                 "type": "boolean",
                 "mutable": true,
@@ -93,4 +122,11 @@ export class DropiSwitch {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "isChecked",
+                "methodName": "checkedChanged"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
 }

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

@@ -80,10 +80,10 @@ export class DropiTextArea {
         this.value = val;
         this.internals.setFormValue(val);
         this.dropiInput.emit(val);
+        this.dropiChange.emit(val);
     }
     handleBlur() {
         this.touched = true;
-        this.dropiChange.emit(this.value);
         this.dropiBlur.emit();
     }
     get resolvedId() {
@@ -98,12 +98,12 @@ export class DropiTextArea {
     render() {
         const showAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
         const showHelper = this.textHelper || this.isInvalid;
-        return (h("div", { key: 'cd317dd0e813d6ce6ae659b56ddac00fa822e68e', class: "textarea-wrapper" }, this.label && (h("label", { key: '220344751b55843a6d1ee3a8188b53e8d0fc5d34', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && h("span", { key: '3ddb9f3adac61fa8990f81e16ae6334de8552849', class: "asterisk" }, " *"))), h("div", { key: '1a6d603bd7cfe7e6b37fd20c4dad6c7bc2bf0278', class: "textarea-container" }, h("textarea", { key: '3eb838fece4e03cc68be9e01eeb1e02709a926f9', id: this.resolvedId, class: {
+        return (h("div", { key: '8c25826a54d1f0bec06d8f70211d2bcd873d59a6', class: "textarea-wrapper" }, this.label && (h("label", { key: '58a578753a1248b185d2763aedf50eaaa152c791', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && h("span", { key: 'cf31923103a7594f552df4ec86885f78d0c31779', class: "asterisk" }, " *"))), h("div", { key: '6ea60b6286fd4438389cfda0580379d8fe013adc', class: "textarea-container" }, h("textarea", { key: 'fc5e495d80bfd665e55480668b9fa7ed62651984', id: this.resolvedId, class: {
                 'form-control': true,
                 'Body-M-Regular': true,
                 'form-control-valid': !this.isInvalid && this.touched && !!this.value,
                 'form-control-invalid': this.isInvalid,
-            }, rows: this.rows, placeholder: this.placeholder, maxLength: this.maxLength, minLength: this.minLength, disabled: this.disabled, required: this.required, style: { resize: this.resize }, onInput: (e) => this.handleInput(e), onFocus: () => this.dropiFocus.emit(), onBlur: () => this.handleBlur() }, this.value), this.maxLength > 0 && (h("div", { key: '49dfd2cb7fe373769a945c405e58e7716e9489f2', class: "char-counter" }, this.charCount, "/", this.maxLength))), showHelper && (h("div", { key: 'e1388e815c35baab42466029ae17914da28c9294', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: '39aebce7cca327e9c535ce918d053eb5f106f734', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" })), h("span", { key: 'ae255ca0db1e35e0069ef8b68fa901bced14ba8a', class: { 'invalid-color': this.isInvalid }, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : undefined } }, this.textHelper)))));
+            }, rows: this.rows, placeholder: this.placeholder, maxLength: this.maxLength, minLength: this.minLength, disabled: this.disabled, required: this.required, style: { resize: this.resize }, onInput: (e) => this.handleInput(e), onFocus: () => this.dropiFocus.emit(), onBlur: () => this.handleBlur() }, this.value), this.maxLength > 0 && (h("div", { key: '07c350ce7a2e56b466229450645e6faece3d284b', class: "char-counter" }, this.charCount, "/", this.maxLength))), showHelper && (h("div", { key: 'c9fbd9a21b7e26fbd9571fc524b6f706404145d3', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: '8fc6e34849f9e3175097597280a3bea9defb6bb0', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" })), h("span", { key: '68bf62627efb3de92afe54f7803e322f5a0462e4', class: { 'invalid-color': this.isInvalid }, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : undefined } }, this.textHelper)))));
     }
     static get is() { return "dropi-text-area"; }
     static get encapsulation() { return "shadow"; }
@@ -156,7 +156,7 @@ export class DropiTextArea {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name",
                 "defaultValue": "''"
             },

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

@@ -1,7 +1,7 @@
 :host { display: contents; }
 *, *::before, *::after { box-sizing: border-box; }
 
-.toast-container { position: fixed; z-index: 9999; display: flex; flex-direction: column; gap: 8px; max-width: 380px; width: 100%; pointer-events: none; }
+.toast-container { position: fixed; z-index: var(--dropi-z-index-toast, 12000); display: flex; flex-direction: column; gap: 8px; max-width: 380px; width: 100%; pointer-events: none; }
 .toast-container--top-right    { top: 80px; right: 0; padding: var(--Size-2, 8px); }
 .toast-container--top-left     { top: 80px; left: 0; padding: var(--Size-2, 8px); }
 .toast-container--bottom-right { bottom: 24px; right: 0; padding: var(--Size-2, 8px); flex-direction: column-reverse; }

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

@@ -18,7 +18,7 @@
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.2s;
-  z-index: 1000;
+  z-index: var(--dropi-z-index-overlay, 11000);
 }
 
 :host(:hover) .tooltip-simple-bubble {

package/dist/collection/components/dropi-tooltip-v2/dropi-tooltip.css

@@ -4,7 +4,7 @@
 .tooltip-wrapper { position: relative; display: inline-flex; align-items: center; justify-content: center; }
 
 .tooltip-bubble {
-  position: absolute; z-index: 9999;
+  position: absolute; z-index: var(--dropi-z-index-overlay, 11000);
   background: var(--Gray-Gray-800); color: var(--Neutral-White, #ffffff);
   font-size: var(--font-size-s,14px); line-height: 1.5;
   padding: 8px 12px; border-radius: 8px;