@dropi/ui 0.1.45 → 0.1.46

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

@@ -14,6 +14,8 @@ export class DropiIcon {
     color = 'currentColor';
     /** Stroke width for icons that use strokes */
     strokeWidth = '';
+    /** URL to the SVG sprite file. Defaults to dropi-lib-icons path in node_modules. */
+    spritePath = '/node_modules/dropi-lib-icons/dist/sprite.svg';
     widthChanged() {
         this.updateHostStyles();
     }
@@ -54,7 +56,7 @@ export class DropiIcon {
         this.el.style.setProperty('--icon-fill', fill);
     }
     render() {
-        return (h("svg", { key: '99f511720c6654b3f97490c966061520ee17d27f', width: this.iconWidth, height: this.iconHeight, class: { spin: (this.name ?? '') === 'Spinner' }, "aria-hidden": "true" }, h("use", { key: '04792170d8c23b3606249d051f8cc903bd5d1211', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name ?? ''}` })));
+        return (h("svg", { key: 'c994616a46f7f1b85c572c5b4a6c48144396fb8a', width: this.iconWidth, height: this.iconHeight, class: { spin: (this.name ?? '') === 'Spinner' }, "aria-hidden": "true" }, h("use", { key: '623109aad17765228e4fb5b4e7c8846e123dbfc9', href: `${this.spritePath}#${(this.name ?? '').toLowerCase()}` })));
     }
     static get is() { return "dropi-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -169,6 +171,26 @@ export class DropiIcon {
                 "reflect": false,
                 "attribute": "stroke-width",
                 "defaultValue": "''"
+            },
+            "spritePath": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL to the SVG sprite file. Defaults to dropi-lib-icons path in node_modules."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sprite-path",
+                "defaultValue": "'/node_modules/dropi-lib-icons/dist/sprite.svg'"
             }
         };
     }

package/dist/collection/components/dropi-ilustration-icon/dropi-ilustration-icon.js

@@ -16,11 +16,15 @@ export class DropiIlustrationIcon {
     stateInsignia = 'verified';
     /** Show insignia as tag with label (for product cards) */
     tagProduct = false;
-    insigniaIcons = {
-        verified: 'assets/icons/ilustration/verified-new.svg',
-        premium: 'assets/icons/ilustration/premium-new.svg',
-        exclusive: 'assets/icons/ilustration/exclusive.svg',
-    };
+    /** Base path for illustration assets. Override if assets are served from a different location. */
+    basePath = '/node_modules/@dropi/ui/assets/icons/ilustration';
+    get insigniaIcons() {
+        return {
+            verified: `${this.basePath}/verified-new.svg`,
+            premium: `${this.basePath}/premium-new.svg`,
+            exclusive: `${this.basePath}/exclusive.svg`,
+        };
+    }
     getIconName(state) {
         const map = {
             success: 'Check-circle',
@@ -31,7 +35,7 @@ export class DropiIlustrationIcon {
         return map[state] || 'Comment-round_info';
     }
     render() {
-        return (h("div", { key: 'd7fa7fce7346d3496ae99c580dee9de5fea934b8', class: "dropi-ilustration" }, this.type === 'dropi' && (h("figure", { key: 'faa5686e775ac3a373037b6e1f9bf32076cfb495', class: "dropi-ilustration__image" }, h("img", { key: '209017a72b774b3e14c8e34f7e3bface75ba592b', src: `assets/icons/ilustration/${(!this.state || String(this.state) === 'undefined' || String(this.state) === 'null') ? 'default' : this.state}.svg`, alt: this.state ?? 'default', onError: (e) => { e.target.src = 'assets/icons/ilustration/default.svg'; } }))), this.type === 'mb' && (h("figure", { key: '75c82f5356c427d4ed35db3e9697d232e7f1b132', class: `dropi-ilustration__image-mb ${this.state}` }, ['success', 'error', 'info', 'warning'].includes(this.state) && (h("dropi-icon", { key: '86a371bef276d6c945959405d39cea3a8dcecde3', name: this.getIconName(this.state), iconWidth: "24px", iconHeight: "24px", color: "Neutral-White" })))), this.type === 'insignia' && (h("figure", { key: 'c1bef5162ba49d8493a1c8d6b16d886543215046', class: this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia' }, h("img", { key: '8d1313457cda0f356f278f095b42d75d960a1c27', src: this.insigniaIcons[this.stateInsignia], alt: this.stateInsignia }), this.tagProduct && (h("p", { key: '303cce4a3a632e9e36f8c7e6d186b56cec9c5ed6', class: `tag tag--${this.stateInsignia}` }, h("span", { key: '3c2b051198e41dcfc2944aa7b1f869ba30e56c2a', class: "Caption-S" }, this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1))))))));
+        return (h("div", { key: '452266c0500ed2426ae0b0d7552a735c0022500b', class: "dropi-ilustration" }, this.type === 'dropi' && (h("figure", { key: '4ac1e8e482b5b80df9dceaa93630308b52d5db0d', class: "dropi-ilustration__image" }, h("img", { key: '019a5c80798fc898a08ce851ab69b381d784e3f9', src: `${this.basePath}/${(!this.state || String(this.state) === 'undefined' || String(this.state) === 'null') ? 'default' : this.state}.svg`, alt: this.state ?? 'default', onError: (e) => { e.target.src = `${this.basePath}/default.svg`; } }))), this.type === 'mb' && (h("figure", { key: 'e7416f766fe3c0d633379bd9172ecfbb4b7f2a43', class: `dropi-ilustration__image-mb ${this.state}` }, ['success', 'error', 'info', 'warning'].includes(this.state) && (h("dropi-icon", { key: 'c0fdd2564c0c0f821987cb13a519837a71afddbc', name: this.getIconName(this.state), iconWidth: "24px", iconHeight: "24px", color: "Neutral-White" })))), this.type === 'insignia' && (h("figure", { key: '8f1f4ace45532d06dbc38d34b3e1e32317d542b7', class: this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia' }, h("img", { key: '0d114a0b12bb3d31c222a34b09a47bd6a42e1dba', src: this.insigniaIcons[this.stateInsignia], alt: this.stateInsignia, onError: (e) => { e.target.src = `${this.basePath}/default.svg`; } }), this.tagProduct && (h("p", { key: 'd1ef34a4fd92ee7b97a5a224d9a21b9e54976989', class: `tag tag--${this.stateInsignia}` }, h("span", { key: '72ea7cef3bbc86f6330abb9c4f34c89e62ac3417', class: "Caption-S" }, this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1))))))));
     }
     static get is() { return "dropi-ilustration-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -56,7 +60,7 @@ export class DropiIlustrationIcon {
                     "references": {
                         "IlustrationType": {
                             "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-ilustration-icon/dropi-ilustration-icon.tsx",
+                            "path": "/Users/20kdropi/Documents/Dropi/ui-dropi/src/components/dropi-ilustration-icon/dropi-ilustration-icon.tsx",
                             "id": "src/components/dropi-ilustration-icon/dropi-ilustration-icon.tsx::IlustrationType"
                         }
                     }
@@ -82,7 +86,7 @@ export class DropiIlustrationIcon {
                     "references": {
                         "IlustrationState": {
                             "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-ilustration-icon/dropi-ilustration-icon.tsx",
+                            "path": "/Users/20kdropi/Documents/Dropi/ui-dropi/src/components/dropi-ilustration-icon/dropi-ilustration-icon.tsx",
                             "id": "src/components/dropi-ilustration-icon/dropi-ilustration-icon.tsx::IlustrationState"
                         }
                     }
@@ -108,7 +112,7 @@ export class DropiIlustrationIcon {
                     "references": {
                         "InsigniaState": {
                             "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-ilustration-icon/dropi-ilustration-icon.tsx",
+                            "path": "/Users/20kdropi/Documents/Dropi/ui-dropi/src/components/dropi-ilustration-icon/dropi-ilustration-icon.tsx",
                             "id": "src/components/dropi-ilustration-icon/dropi-ilustration-icon.tsx::InsigniaState"
                         }
                     }
@@ -144,6 +148,26 @@ export class DropiIlustrationIcon {
                 "reflect": false,
                 "attribute": "tag-product",
                 "defaultValue": "false"
+            },
+            "basePath": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Base path for illustration assets. Override if assets are served from a different location."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "base-path",
+                "defaultValue": "'/node_modules/@dropi/ui/assets/icons/ilustration'"
             }
         };
     }

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

@@ -18,9 +18,9 @@ export class DropiInput {
     internals;
     // ── Identification ──────────────────────────────────────────
     /** Input id. Defaults to label label. */
-    inputId = '';
+    inputId;
     /** Name attribute for native form submission */
-    name = '';
+    name;
     // ── Content ─────────────────────────────────────────────────
     /** Floating or fixed label text */
     label = '';
@@ -54,6 +54,8 @@ export class DropiInput {
     allowDecimals = false;
     /** Only allow letter characters */
     isLettersOnly = false;
+    /** HTML autocomplete attribute value */
+    autocomplete = 'on';
     // ── Icon ────────────────────────────────────────────────────
     /** Icon name shown inside the input (only visible when value is not empty) */
     icon = '';
@@ -210,7 +212,7 @@ export class DropiInput {
     }
     // ── Computed ─────────────────────────────────────────────────
     get resolvedId() {
-        return this.inputId || this.label;
+        return this.inputId || this.name;
     }
     get inputType() {
         if (this.passwordInput)
@@ -231,14 +233,14 @@ export class DropiInput {
     render() {
         const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
         const showIconInline = !!this.icon;
-        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: {
+        return (h("div", { key: 'a16b56b6be24372be1fc0a16e65d13bfea3dcf0f', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("label", { key: '0030ccbc829d16aa17a954624933106752f972bc', class: "input-label Body-S-Regular", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: 'f1476695b9778aa767e121f5d5ace0e36b4fb9a0', class: "asterisk" }, " *"))), h("div", { key: '1e3dee560139338f206dd4c94fa52e1c248e6da6', class: "form-group" }, h("div", { key: '7c1a2754de046eac9c39a005495fa391a7b7b02e', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: 'e2ba6416f090d563206e3d98e9f3ab76f197df20', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (h("dropi-icon", { key: 'bf2b58fa9cf0d3dbb470fb3bb4466545d4bc6a75', 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: '51a1de81d4200c79f46b61afef165fdad0ebb061', 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: '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: {
+            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, autoComplete: this.autocomplete, "data-cy": undefined, onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: '38b78f85551b8c9f6dee1c85e48fa67149f58e29', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: 'd23e87d325e6c051c04a0eb0671a53d8cec05b41', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: '84e228278687d583ffa056c4540da63356aeaa1f', class: "form-control-helper" }, this.isInvalid && h("dropi-icon", { key: 'f26a6e681a262c2f348412e4bf9055e417e76261', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '9e0376883c4727d84aec3f4c7da7d76196639740', class: {
                 'disabled-helper': this.disabled,
                 'invalid-color': this.isInvalid,
             } }, this.textHelper)))))));
@@ -266,7 +268,7 @@ export class DropiInput {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -275,8 +277,7 @@ export class DropiInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "input-id",
-                "defaultValue": "''"
+                "attribute": "input-id"
             },
             "name": {
                 "type": "string",
@@ -286,7 +287,7 @@ export class DropiInput {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -295,8 +296,7 @@ export class DropiInput {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "name",
-                "defaultValue": "''"
+                "attribute": "name"
             },
             "label": {
                 "type": "string",
@@ -466,7 +466,7 @@ export class DropiInput {
                     "references": {
                         "InputMode": {
                             "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-input/dropi-input.tsx",
+                            "path": "/Users/20kdropi/Documents/Dropi/ui-dropi/src/components/dropi-input/dropi-input.tsx",
                             "id": "src/components/dropi-input/dropi-input.tsx::InputMode"
                         }
                     }
@@ -603,6 +603,26 @@ export class DropiInput {
                 "attribute": "is-letters-only",
                 "defaultValue": "false"
             },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML autocomplete attribute value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete",
+                "defaultValue": "'on'"
+            },
             "icon": {
                 "type": "string",
                 "mutable": true,

package/dist/collection/components/dropi-languages-selector/dropi-languages-selector.js

@@ -70,7 +70,7 @@ export class DropiLanguagesSelector {
                     "references": {
                         "LanguageOption": {
                             "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-languages-selector/dropi-languages-selector.tsx",
+                            "path": "/Users/20kdropi/Documents/Dropi/ui-dropi/src/components/dropi-languages-selector/dropi-languages-selector.tsx",
                             "id": "src/components/dropi-languages-selector/dropi-languages-selector.tsx::LanguageOption"
                         }
                     }
@@ -96,7 +96,7 @@ export class DropiLanguagesSelector {
                     "references": {
                         "LanguageOption": {
                             "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-languages-selector/dropi-languages-selector.tsx",
+                            "path": "/Users/20kdropi/Documents/Dropi/ui-dropi/src/components/dropi-languages-selector/dropi-languages-selector.tsx",
                             "id": "src/components/dropi-languages-selector/dropi-languages-selector.tsx::LanguageOption"
                         }
                     }
@@ -139,7 +139,7 @@ export class DropiLanguagesSelector {
                     "references": {
                         "LanguageOption": {
                             "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-languages-selector/dropi-languages-selector.tsx",
+                            "path": "/Users/20kdropi/Documents/Dropi/ui-dropi/src/components/dropi-languages-selector/dropi-languages-selector.tsx",
                             "id": "src/components/dropi-languages-selector/dropi-languages-selector.tsx::LanguageOption"
                         }
                     }

package/dist/collection/components/dropi-lottie-loader/dropi-lottie-loader.js

@@ -7,7 +7,7 @@ export class DropiLottieLoader {
     /** Show or hide the loader */
     visible = true;
     /** Path to the Lottie JSON animation file */
-    loadingAnimation = '/assets/lottie-files/loading.json';
+    loadingAnimation = '/node_modules/@dropi/ui/assets/lottie-files/loading.json';
     /** Title shown below the animation */
     title = 'Cargando...';
     /** Descriptive message below the title */
@@ -69,7 +69,7 @@ export class DropiLottieLoader {
                 "setter": false,
                 "reflect": false,
                 "attribute": "loading-animation",
-                "defaultValue": "'/assets/lottie-files/loading.json'"
+                "defaultValue": "'/node_modules/@dropi/ui/assets/lottie-files/loading.json'"
             },
             "title": {
                 "type": "string",

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

@@ -393,7 +393,7 @@ export class DropiModal {
                     "references": {
                         "ModalPosition": {
                             "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-modal/dropi-modal.tsx",
+                            "path": "/Users/20kdropi/Documents/Dropi/ui-dropi/src/components/dropi-modal/dropi-modal.tsx",
                             "id": "src/components/dropi-modal/dropi-modal.tsx::ModalPosition"
                         }
                     }
@@ -419,7 +419,7 @@ export class DropiModal {
                     "references": {
                         "ModalSize": {
                             "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-modal/dropi-modal.tsx",
+                            "path": "/Users/20kdropi/Documents/Dropi/ui-dropi/src/components/dropi-modal/dropi-modal.tsx",
                             "id": "src/components/dropi-modal/dropi-modal.tsx::ModalSize"
                         }
                     }

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

@@ -7,7 +7,7 @@ const RESEND_SECONDS = 30;
 export class DropiOtpSendCode {
     internals;
     /** Name for native form submission */
-    name = '';
+    name;
     /** Delivery method label */
     engine = 'email';
     /** Contact info (email/phone to show in label) */
@@ -100,14 +100,14 @@ export class DropiOtpSendCode {
     }
     render() {
         const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
-        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) => {
+        return (h("div", { key: '4b70278cd5f1347de31781294a8eaf5dbd15d198', class: "otp" }, this.showLabelContact && (h("p", { key: '1f41c8a8047e0c7471610db63913ab958efb91f3', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: 'cdb2df082b7acdb3c8745a4da2fedc85e71e8c02' }, " ", this.labelContact))), h("div", { key: 'a518675aee7d22a0c0aef4f2d388e060fa1cea15', 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: '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")))));
+            }, 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: 'f48f697b79999c9dcf579e569741e21f60429874', class: "otp__error" }, this.errorMessage)), h("div", { key: 'da82a76a7cfb4d63cff43a82e133f5212a246076', 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"; }
@@ -132,7 +132,7 @@ export class DropiOtpSendCode {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -141,8 +141,7 @@ export class DropiOtpSendCode {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "name",
-                "defaultValue": "''"
+                "attribute": "name"
             },
             "engine": {
                 "type": "string",

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

@@ -102,7 +102,7 @@ export class DropiPhoneInput {
     el;
     internals;
     /** Name for native form submission */
-    name = '';
+    name;
     /** Initial country dial code (e.g. "57") — matches Angular 'CodArea' setter */
     codArea = '57';
     /** Phone number value — matches Angular 'ngModelPhone' */
@@ -183,10 +183,10 @@ export class DropiPhoneInput {
     render() {
         const country = this.selectedCountry;
         const isInvalid = this.isValidPhone === false;
-        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: () => {
+        return (h("div", { key: 'f4351d5ad9347f82477b8cd040813fc86c60931b', class: "phone-wrap" }, h("div", { key: 'afd0b33fb70a0e8eb0c0c58eb7225381ed914ba1', class: "phone-input-container" }, h("div", { key: '4bbda7332124649c042627e5b67e309197b617f6', class: "custom-select" }, h("button", { key: 'fbb426107a317a8f8cb6e4a33ca79a927d6e7bb1', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
                 if (!this.disabledInput)
                     this.open = !this.open;
-            } }, 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) }))));
+            } }, h("span", { key: '73374218245871d06d2993dac1d07e7a60914df7', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, h("img", { key: '669e38e92d5c75651a881fc8b311368ed617a236', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), h("dropi-icon", { key: '190bea3ae97a702ee35368798c1f4c24c1331027', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), h("ul", { key: 'ef757ddf26a6c14c989642186559957623d0e1d1', 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: '93099e0b90757d28aa51811a30cc5d8a44a940ee', 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"; }
@@ -211,7 +211,7 @@ export class DropiPhoneInput {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -220,8 +220,7 @@ export class DropiPhoneInput {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "name",
-                "defaultValue": "''"
+                "attribute": "name"
             },
             "codArea": {
                 "type": "string",

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

@@ -8,9 +8,9 @@ export class DropiRadioButton {
     /** Label text displayed next to the radio */
     label = '';
     /** Input name (for grouping radio buttons) */
-    name = 'name';
+    name;
     /** Input id */
-    id = 'radioButton';
+    inputId;
     /** Whether this radio is selected */
     checked = false;
     /**
@@ -35,7 +35,7 @@ export class DropiRadioButton {
         this.dropiChange.emit(e);
     }
     render() {
-        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)));
+        return (h("div", { key: '8833a6c8d423df47ceb667ff5c7fd940669c95ed', class: "dropi-radio-button" }, h("label", { key: 'a21414208a7a4cc89ba8aad7a34f638d25c511a3', htmlFor: this.inputId }, h("input", { key: '4fc7d6ee1cfa0e1c522808b9c09af3d12c885caa', 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"; }
@@ -80,7 +80,7 @@ export class DropiRadioButton {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -89,10 +89,9 @@ export class DropiRadioButton {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "name",
-                "defaultValue": "'name'"
+                "attribute": "name"
             },
-            "id": {
+            "inputId": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -100,7 +99,7 @@ export class DropiRadioButton {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -109,8 +108,7 @@ export class DropiRadioButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "id",
-                "defaultValue": "'radioButton'"
+                "attribute": "input-id"
             },
             "checked": {
                 "type": "boolean",

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

@@ -66,7 +66,7 @@ export class DropiRadioSelectionList {
                     "references": {
                         "RadioOption": {
                             "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-radio-selection-list/dropi-radio-selection-list.tsx",
+                            "path": "/Users/20kdropi/Documents/Dropi/ui-dropi/src/components/dropi-radio-selection-list/dropi-radio-selection-list.tsx",
                             "id": "src/components/dropi-radio-selection-list/dropi-radio-selection-list.tsx::RadioOption"
                         }
                     }
@@ -243,7 +243,7 @@ export class DropiRadioSelectionList {
                     "references": {
                         "RadioOption": {
                             "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-radio-selection-list/dropi-radio-selection-list.tsx",
+                            "path": "/Users/20kdropi/Documents/Dropi/ui-dropi/src/components/dropi-radio-selection-list/dropi-radio-selection-list.tsx",
                             "id": "src/components/dropi-radio-selection-list/dropi-radio-selection-list.tsx::RadioOption"
                         }
                     }

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

@@ -102,7 +102,7 @@ export class DropiSearch {
         return (h("div", { key: '594b15b4b31044f4a02376dc773ea36da893d773', class: "search-wrap" }, this.label && h("label", { key: '297a989441ad892715b09421f9a53618851c1b52', class: "search-label" }, this.label), h("div", { key: '6bbaf4ea5c1bc6ff831626117fccde647e68ba19', class: `search-input-row search-input-row--${this.type}` }, this.showIcon && h("dropi-icon", { key: 'e94c3a3895a14e950a018023d5d7a281a230abae', class: "search-icon", name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("input", { key: '820bf2f4c9ecaf9907aceaaa08bd3fa309606e90', class: "search-input", type: this.typeInput, placeholder: this.placeholder, value: this.textInput, maxLength: this.maxLength, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => {
                 if (this.parsedOptions.length)
                     this.open = true;
-            }, onBlur: () => { setTimeout(() => this.open = false, 150); this.dropiBlur.emit(); } }), this.showClear && this.textInput && (h("button", { key: 'e2fd7c3d5fee45a83f030589f58d4fee9f3af69c', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, h("dropi-icon", { key: 'a530b0adb83d76b205cd2b22792f14229950836e', name: "Close-small", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), showDropdown && (h("div", { key: '8c062d43dccb41c84b2a599ed6d1a5e049a75b65', class: `search-dropdown search-dropdown--${this.position}`, style: { '--dropdown-height': `${this.heightOverlay}px` } }, this.filtered.length === 0 ? (h("div", { class: "search-no-results" }, "Sin resultados")) : (this.filtered.map((opt, i) => (h("div", { class: { 'search-option': true, 'search-option--selected': this.isSelected(opt) }, key: i, onMouseDown: (e) => { e.preventDefault(); this.selectOption(opt); } }, this.multipleSelectModel && h("dropi-checkbox", { checked: this.isSelected(opt) }), h("span", { class: "search-option__label" }, opt[this.dataName])))))))));
+            }, onBlur: () => { setTimeout(() => this.open = false, 150); this.dropiBlur.emit(); } }), this.showClear && this.textInput && (h("button", { key: 'e2fd7c3d5fee45a83f030589f58d4fee9f3af69c', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, h("dropi-icon", { key: 'a530b0adb83d76b205cd2b22792f14229950836e', name: "Close-small", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), showDropdown && (h("div", { key: '8c062d43dccb41c84b2a599ed6d1a5e049a75b65', class: `search-dropdown search-dropdown--${this.position}`, style: { '--dropdown-height': `${this.heightOverlay}px` } }, this.filtered.length === 0 ? (h("div", { class: "search-no-results" }, "Sin resultados")) : (this.filtered.map((opt, i) => (h("div", { class: { 'search-option': true, 'search-option--selected': this.isSelected(opt) }, key: i, onMouseDown: (e) => { e.preventDefault(); this.selectOption(opt); } }, this.multipleSelectModel && h("dropi-checkbox", { name: "_search-option", checked: this.isSelected(opt) }), h("span", { class: "search-option__label" }, opt[this.dataName])))))))));
     }
     static get is() { return "dropi-search"; }
     static get encapsulation() { return "shadow"; }
@@ -266,7 +266,7 @@ export class DropiSearch {
                     "references": {
                         "SearchOption": {
                             "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-search/dropi-search.tsx",
+                            "path": "/Users/20kdropi/Documents/Dropi/ui-dropi/src/components/dropi-search/dropi-search.tsx",
                             "id": "src/components/dropi-search/dropi-search.tsx::SearchOption"
                         }
                     }
@@ -392,7 +392,7 @@ export class DropiSearch {
                     "references": {
                         "SearchOption": {
                             "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-search/dropi-search.tsx",
+                            "path": "/Users/20kdropi/Documents/Dropi/ui-dropi/src/components/dropi-search/dropi-search.tsx",
                             "id": "src/components/dropi-search/dropi-search.tsx::SearchOption"
                         }
                     }
@@ -510,7 +510,7 @@ export class DropiSearch {
                     "references": {
                         "SearchOption": {
                             "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-search/dropi-search.tsx",
+                            "path": "/Users/20kdropi/Documents/Dropi/ui-dropi/src/components/dropi-search/dropi-search.tsx",
                             "id": "src/components/dropi-search/dropi-search.tsx::SearchOption"
                         }
                     }

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

@@ -31,7 +31,7 @@ export class DropiSelect {
     placeholder = 'Select';
     /** Array of SelectOption or SelectOptionGroup */
     options = [];
-    name = '';
+    name;
     disabled = false;
     hasError = false;
     errorText = '';
@@ -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: '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()));
+        return (h("div", { key: '20803118f557ef32390fe4f93b425b5ae4ab3361', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: '3b29f4a8cda550090ea8723c559aea748ec267d0', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: '27d14ce3a05627bf1cf3c246ca4a378bc7d1199d', class: "asterisk" }, " *"))), h("div", { key: 'c70121fef59345ea40ce3f0a201d05f50e262290', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: '56abe7b0c88a5b15add9b045b01f880dfd24efb0', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (h("div", { key: 'a362acb377004855c36e53b4dd82b40c414df807', class: "select-helper" }, h("span", { key: 'e84ef13d9bd942817816c6b4f74ca670d31feda1' }, this.textHelper))), this.hasError && this.errorText && (h("div", { key: 'a1d8e7153719ba99a30676d9522e612f711d1265', class: "select-helper-error" }, h("dropi-icon", { key: 'bc3a92ce1aa494bbf7c57e0ce4e922d9c957a560', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '30632fb569a019d6fa1d684d83fe9eadfc8031a5' }, this.errorText))), this.renderDropdown()));
     }
     static get is() { return "dropi-select"; }
     static get encapsulation() { return "shadow"; }
@@ -483,7 +483,7 @@ export class DropiSelect {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -492,8 +492,7 @@ export class DropiSelect {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "name",
-                "defaultValue": "''"
+                "attribute": "name"
             },
             "disabled": {
                 "type": "boolean",

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

@@ -86,7 +86,7 @@ export class DropiSidebar {
                     "references": {
                         "SidebarProperties": {
                             "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-sidebar/dropi-sidebar.tsx",
+                            "path": "/Users/20kdropi/Documents/Dropi/ui-dropi/src/components/dropi-sidebar/dropi-sidebar.tsx",
                             "id": "src/components/dropi-sidebar/dropi-sidebar.tsx::SidebarProperties"
                         }
                     }
@@ -127,7 +127,7 @@ export class DropiSidebar {
                     "references": {
                         "SidebarProperties": {
                             "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-sidebar/dropi-sidebar.tsx",
+                            "path": "/Users/20kdropi/Documents/Dropi/ui-dropi/src/components/dropi-sidebar/dropi-sidebar.tsx",
                             "id": "src/components/dropi-sidebar/dropi-sidebar.tsx::SidebarProperties"
                         }
                     }