@dropi/ui 0.1.45 → 0.1.48

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

@@ -7,7 +7,7 @@ import { h } from "@stencil/core";
 export class DropiCheckbox {
     internals;
     /** Name for native form submission */
-    name = '';
+    name;
     /** Whether the checkbox is checked */
     checked = false;
     /** Whether the checkbox is disabled */
@@ -27,12 +27,12 @@ export class DropiCheckbox {
         this.dropiChange.emit(this.checked);
     }
     render() {
-        return (h("div", { key: '27fec5f03a48c19652c8ae01173dcbb6e3514693', class: "container-dropi-checkbox", onClick: () => this.changeState() }, h("div", { key: '243d07e4444c0dc149ff137258f9ddd58428c438', class: {
+        return (h("div", { key: '091a0802423ae37f0473938259313d97a460645e', class: "container-dropi-checkbox", onClick: () => this.changeState() }, h("div", { key: 'bf5c681b5285a6469e7652422010b3559ac057db', class: {
                 check: true,
                 isCheck: this.checked,
                 noCheck: !this.checked,
                 disabled: this.disabled,
-            } }, h("svg", { key: '7a1fd9c7b3fa575ec263fe5ad48fbc0294a79980', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'e77e5cd40c71e542a045934641509e41a7cd4899', d: "M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z", fill: "#FFFFFF" })))));
+            } }, h("svg", { key: 'be7eecf60b8f45fa6ebaa7c43d6a2087c79f02d0', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '6eda9ca377ab8480479f3f2ad880895dd9b54b9d', d: "M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z", fill: "#FFFFFF" })))));
     }
     static get is() { return "dropi-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -57,7 +57,7 @@ export class DropiCheckbox {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -66,8 +66,7 @@ export class DropiCheckbox {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "name",
-                "defaultValue": "''"
+                "attribute": "name"
             },
             "checked": {
                 "type": "boolean",

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

@@ -53,7 +53,7 @@ export class DropiCheckboxSelectionList {
                 this.dropiSearch.emit(this.filterText);
             } }), this.filterText && (h("button", { key: 'a560cab7ce53e57e036696194054286aa1dd6fd9', class: "csl__clear", onClick: () => { this.filterText = ''; this.dropiSearch.emit(''); } }, h("dropi-icon", { key: 'f1ae7e38fcb954761edb02bb32af139fb5eea610', name: "Close-small", iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-400" }))))), h("div", { key: 'e93dfccc8215e96640ebe8c69f33f0bff5f655f2', class: "csl__list" }, items.length === 0 && this.showNotFound ? (h("div", { class: "csl__empty" }, this.notFoundMessage)) : (items.map(opt => {
             const checked = this.selected.includes(opt.id);
-            return (h("div", { class: "csl__item", key: opt.id, onClick: () => this.toggle(opt.id) }, h("dropi-checkbox", { checked: checked }), opt.icon && h("img", { class: "csl__icon", src: opt.icon, alt: opt.label }), h("span", { class: "csl__label" }, opt.label)));
+            return (h("div", { class: "csl__item", key: opt.id, onClick: () => this.toggle(opt.id) }, h("dropi-checkbox", { name: "_csl-option", checked: checked }), opt.icon && h("img", { class: "csl__icon", src: opt.icon, alt: opt.label }), h("span", { class: "csl__label" }, opt.label)));
         })))));
     }
     static get is() { return "dropi-checkbox-selection-list"; }
@@ -79,7 +79,7 @@ export class DropiCheckboxSelectionList {
                     "references": {
                         "CheckboxOption": {
                             "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-checkbox-selection-list/dropi-checkbox-selection-list.tsx",
+                            "path": "/Users/20kdropi/Documents/Dropi/ui-dropi/src/components/dropi-checkbox-selection-list/dropi-checkbox-selection-list.tsx",
                             "id": "src/components/dropi-checkbox-selection-list/dropi-checkbox-selection-list.tsx::CheckboxOption"
                         }
                     }

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

@@ -43,7 +43,7 @@ export class DropiChips {
                     "references": {
                         "ChipStyle": {
                             "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-chips/dropi-chips.tsx",
+                            "path": "/Users/20kdropi/Documents/Dropi/ui-dropi/src/components/dropi-chips/dropi-chips.tsx",
                             "id": "src/components/dropi-chips/dropi-chips.tsx::ChipStyle"
                         }
                     }
@@ -69,7 +69,7 @@ export class DropiChips {
                     "references": {
                         "ChipType": {
                             "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-chips/dropi-chips.tsx",
+                            "path": "/Users/20kdropi/Documents/Dropi/ui-dropi/src/components/dropi-chips/dropi-chips.tsx",
                             "id": "src/components/dropi-chips/dropi-chips.tsx::ChipType"
                         }
                     }

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

@@ -115,7 +115,7 @@ export class DropiCitySelector {
                     "references": {
                         "CityGroup": {
                             "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-city-selector/dropi-city-selector.tsx",
+                            "path": "/Users/20kdropi/Documents/Dropi/ui-dropi/src/components/dropi-city-selector/dropi-city-selector.tsx",
                             "id": "src/components/dropi-city-selector/dropi-city-selector.tsx::CityGroup"
                         }
                     }

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

@@ -129,7 +129,7 @@ const COUNTRIES = [
 export class DropiCountrySelector {
     internals;
     /** Name for native form submission */
-    name = '';
+    name;
     /** Label above the select */
     label = '';
     /** Placeholder when nothing is selected */
@@ -268,11 +268,11 @@ export class DropiCountrySelector {
         this.dropiChange.emit(country);
     }
     render() {
-        return (h("div", { key: '98292dbf6f84139b409cefe4690fb5ce834372c7', class: "custom-select" }, this.label && (h("label", { key: '7dd60d54e701108f7061623a89e8ff29edbb8dc6' }, this.label, this.showObligatory && h("span", { key: '971fd2a900d9ef4740a96145cadc948aab95232a', class: "required" }, "*"))), h("button", { key: '6c0067cfaf920160a4f8c05f59c34f3539540d29', type: "button", ref: (el) => { this.buttonRef = el; }, class: {
+        return (h("div", { key: '1e590f390f45a91df010db5a25139f5a5b234105', class: "custom-select" }, this.label && (h("label", { key: '073b9c7fb9c09d0addf66bce1c132632ab726b70' }, this.label, this.showObligatory && h("span", { key: '8471da6b6004c35e71d04c0d649a796391ffb703', class: "required" }, "*"))), h("button", { key: '45fdbd8ae914084fd713708947ee6b2256b78b32', type: "button", ref: (el) => { this.buttonRef = el; }, class: {
                 'select-button': true,
                 'select-completed': !!this.selected,
                 'select-invalid': this.hasError,
-            }, disabled: this.disabled, onClick: () => this.open() }, h("div", { key: 'b28c2c5b0de9b8052bb920a272b9dcc51f4eac6f', class: "selected-content" }, this.selected ? (h("span", { class: "selected-option" }, h("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (h("span", { class: "placeholder-text" }, this.placeholder))), h("dropi-icon", { key: '2ec568b0ad4efdb3a22ffceb1e85fbc6f1d483e8', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), h("ul", { key: '34f0e5772ebb21e85cb246cbb91196d128d9ca59', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, h("li", { key: '77cdf81222a7c593f1d54198e2b897468db890a5', class: "search-li" }, h("div", { key: '970723feefd04adf0b113ae63931092f58d0264a', class: "search-field" }, h("input", { key: '294868580087dc1bdb04258ad84672f3d10e7ba7', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } }), h("span", { key: '02781dc595e568865ab5ae14aeed326b71b36e10', class: "search-icon" }, h("dropi-icon", { key: '0c06d5e5f26d2a2e5ec20967a2ebb9430397f3ea', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), this.filtered.map(country => (h("li", { key: country.code }, h("button", { class: "option", type: "button", onClick: () => this.select(country) }, h("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name))))), this.textHelper && (h("div", { key: 'aae58bc17bbb6953a676818fe02da94b5a4e9f73', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && h("dropi-icon", { key: '7542ef4620499957711079c587f6cb650096f6d3', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: 'ea4c5cedd3b87444a90b4e210f7afa3a318a4832' }, this.textHelper)))));
+            }, disabled: this.disabled, onClick: () => this.open() }, h("div", { key: '75100da9fe6ca3b3e1c60d446374a1ed90ab8419', class: "selected-content" }, this.selected ? (h("span", { class: "selected-option" }, h("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (h("span", { class: "placeholder-text" }, this.placeholder))), h("dropi-icon", { key: '3d4ffee3933d05e02236f1283128cb30a876870f', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), h("ul", { key: '5ab2559993f7100c52749b57e15b42605ca503b2', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, h("li", { key: 'da243d50aa04ab24f2ac6b20dd152031458cd474', class: "search-li" }, h("div", { key: 'b27ca2961821252eed8b2917b47b5c03674f5af6', class: "search-field" }, h("input", { key: '4438520038bcf88efabf67d9e6745b51b7f089d3', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } }), h("span", { key: 'd8753c452b5054e23213b94e83884f5297862abc', class: "search-icon" }, h("dropi-icon", { key: '3fac8e38cf990990a91a8dfda4701796237e8c44', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), this.filtered.map(country => (h("li", { key: country.code }, h("button", { class: "option", type: "button", onClick: () => this.select(country) }, h("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name))))), this.textHelper && (h("div", { key: '68bd0e375e7f31e1927a8179070e832d4fe20c94', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && h("dropi-icon", { key: '6328385caf1f3518c9fa0da9f30469d12c0940ef', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '704ee063a80566aed85849c2649c399796069e86' }, this.textHelper)))));
     }
     static get is() { return "dropi-country-selector"; }
     static get encapsulation() { return "shadow"; }
@@ -297,7 +297,7 @@ export class DropiCountrySelector {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -306,8 +306,7 @@ export class DropiCountrySelector {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "name",
-                "defaultValue": "''"
+                "attribute": "name"
             },
             "label": {
                 "type": "string",
@@ -534,7 +533,7 @@ export class DropiCountrySelector {
                     "references": {
                         "CountryItem": {
                             "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-country-selector/dropi-country-selector.tsx",
+                            "path": "/Users/20kdropi/Documents/Dropi/ui-dropi/src/components/dropi-country-selector/dropi-country-selector.tsx",
                             "id": "src/components/dropi-country-selector/dropi-country-selector.tsx::CountryItem"
                         }
                     }

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

@@ -12,7 +12,7 @@ const DAYS_ES = ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'];
 export class DropiDatePicker {
     internals;
     /** Name for native form submission */
-    name = '';
+    name;
     /** Selected date (ISO string, single mode) - matches Angular 'selectedDate' */
     selectedDate = '';
     /** Range start date (ISO string, range mode) */
@@ -184,12 +184,12 @@ export class DropiDatePicker {
     render() {
         const days = this.buildDays();
         const today = new Date().toISOString().slice(0, 10);
-        return (h("div", { key: '97a96b56b0e8ae551f747bad4a3459a1f4945411', class: "dp-wrap" }, this.label && h("label", { key: 'a1792032ab9ae2dbe574f50b7a537df687eae40c', class: "dp-label" }, this.label), h("button", { key: '4237c2b988f1e9fbaa77dc2a989964216e3fe902', class: {
+        return (h("div", { key: 'd2f6248ff409e53e916e266ab5d23136e9da76d0', class: "dp-wrap" }, this.label && h("label", { key: 'ba51f4091f18437e4449c05378def5b099883acd', class: "dp-label" }, this.label), h("button", { key: '88eb474ca75c9b62996765bdb4816a8cfc14bb8e', 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: '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 }) => {
+            }, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, h("dropi-icon", { key: '1044cef59317f88cc472d2a466a6937a0c4d58f7', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("span", { key: '6a7c5687cd06b9b2f42c256bc03ff0f412ca5573', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), h("dropi-icon", { key: '4be1fc67ed6f9ffb5a5d936e3e8d8330bb91fb0b', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (h("div", { key: '5ad107e256d62a46b57e4bd1bebead70ecc8e46c', class: "dp-popup" }, h("div", { key: 'e3d51afbd24df88867777e43c9bd63dd41c3f542', class: "dp-nav" }, h("button", { key: '8819f79389c1d50ec639f719228aab88be4d0335', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, h("dropi-icon", { key: 'a17004ad24ce40590474d91227a826f46edf50ba', name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), h("span", { key: 'e91c8a46b963a1e7f0d01c56610c2e4bb6fa3d39', class: "dp-nav__title" }, h("span", { key: '214a575cbd83e8c3bafe64ffbd93e914119b09aa' }, MONTHS_ES[this.viewMonth]), h("span", { key: '1f71a83e7110bf8a91f7b5e14e0400b09ba28e1a' }, this.viewYear)), h("button", { key: '21dbc0fdaabc423bd864bfb33ba314b72ca62d48', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, h("dropi-icon", { key: 'f248e65855555878afdbda7d1ba9a802d9eae4d5', name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), h("div", { key: '4fb29792028bf2132ea78a105c7694cf3806ff05', 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;
@@ -211,12 +211,12 @@ export class DropiDatePicker {
                     if (this.selectionMode === 'range' && this.startDate && !this.endDate)
                         this.hoverDate = iso;
                 }, onMouseLeave: () => this.hoverDate = '' }, day));
-        })), h("div", { key: '594f280cb269c32ac3a129401e13b710af1a7c7e', class: "dp-footer" }, h("button", { key: '6028ef84bc17f0d1bb0fd587a991698a8fc69338', class: "dp-footer__clear", type: "button", onClick: () => {
+        })), h("div", { key: '9c670c5ad5a6115b628d5a7bd3a2422c7631e237', class: "dp-footer" }, h("button", { key: 'f939595cde989ea0bd462a3d94c6333b5220d1ee', class: "dp-footer__clear", type: "button", onClick: () => {
                 this.selectedDate = '';
                 this.startDate = '';
                 this.endDate = '';
                 this.open = false;
-            } }, "Limpiar"), h("button", { key: 'ab01840a18d657621205d4fba69cc53feb474d11', class: "dp-footer__today", type: "button", onClick: () => {
+            } }, "Limpiar"), h("button", { key: '87b88413962d73229f0cac5a15918b9cd7aebea3', class: "dp-footer__today", type: "button", onClick: () => {
                 if (this.selectionMode !== 'range') {
                     this.selectedDate = today;
                     this.open = false;
@@ -251,7 +251,7 @@ export class DropiDatePicker {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -260,8 +260,7 @@ export class DropiDatePicker {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "name",
-                "defaultValue": "''"
+                "attribute": "name"
             },
             "selectedDate": {
                 "type": "string",

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

@@ -308,7 +308,7 @@ export class DropiDatePickerRange {
                     "references": {
                         "DateRange": {
                             "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-date-picker-range/dropi-date-picker-range.tsx",
+                            "path": "/Users/20kdropi/Documents/Dropi/ui-dropi/src/components/dropi-date-picker-range/dropi-date-picker-range.tsx",
                             "id": "src/components/dropi-date-picker-range/dropi-date-picker-range.tsx::DateRange"
                         }
                     }

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

@@ -47,7 +47,7 @@ export class DropiDropdown {
         return (h("div", { key: '274caba83e2f697257e3803b85517a31d4f0aea8', class: containerClass, style: { '--custom-height': customHeight } }, this.parsedOptions.map((opt, i) => {
             const label = opt[this.valueModel] ?? String(opt);
             const active = !!opt.checked || this.isSelected(opt);
-            return (h("div", { class: "content-dropdown", key: i }, h("div", { class: { 'container-check-dropdown': true, 'active-option': active }, onClick: () => this.toggleOption(opt) }, this.parameters.type === 'checkbox' && (h("dropi-checkbox", { checked: active })), this.parameters.iconCurrier && (h("dropi-avatars", { image: opt[this.valueModel], type: "transport" })), this.parameters.icon && (h("dropi-avatars", { image: opt.image, type: "transport" })), h("span", { class: "Body-M-Regular" }, label))));
+            return (h("div", { class: "content-dropdown", key: i }, h("div", { class: { 'container-check-dropdown': true, 'active-option': active }, onClick: () => this.toggleOption(opt) }, this.parameters.type === 'checkbox' && (h("dropi-checkbox", { name: "_dropdown-option", checked: active })), this.parameters.iconCurrier && (h("dropi-avatars", { image: opt[this.valueModel], type: "transport" })), this.parameters.icon && (h("dropi-avatars", { image: opt.image, type: "transport" })), h("span", { class: "Body-M-Regular" }, label))));
         })));
     }
     static get is() { return "dropi-dropdown"; }
@@ -73,7 +73,7 @@ export class DropiDropdown {
                     "references": {
                         "DropdownOption": {
                             "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-dropdown/dropi-dropdown.tsx",
+                            "path": "/Users/20kdropi/Documents/Dropi/ui-dropi/src/components/dropi-dropdown/dropi-dropdown.tsx",
                             "id": "src/components/dropi-dropdown/dropi-dropdown.tsx::DropdownOption"
                         }
                     }
@@ -193,7 +193,7 @@ export class DropiDropdown {
                     "references": {
                         "DropdownOption": {
                             "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-dropdown/dropi-dropdown.tsx",
+                            "path": "/Users/20kdropi/Documents/Dropi/ui-dropi/src/components/dropi-dropdown/dropi-dropdown.tsx",
                             "id": "src/components/dropi-dropdown/dropi-dropdown.tsx::DropdownOption"
                         }
                     }

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

@@ -1,37 +1,27 @@
-import { h } from "@stencil/core";
-/**
- * @component dropi-icon
- * Renders an SVG icon from the Dropi sprite sheet.
- * The sprite must be available at `assets/icons/sprite.svg`.
- */
+import { h, Host } from "@stencil/core";
+import { ICON_MAP } from "../../utils/icon-map.generated";
 export class DropiIcon {
     el;
-    /** Icon name matching the id in the SVG sprite */
+    /** Icon name (case-insensitive, matches dropi-lib-icons sprite ids) */
     name = '';
-    /** Width of the icon (CSS value) */
     iconWidth = '20px';
     iconHeight = '20px';
     color = 'currentColor';
-    /** Stroke width for icons that use strokes */
     strokeWidth = '';
-    widthChanged() {
-        this.updateHostStyles();
-    }
-    heightChanged() {
-        this.updateHostStyles();
-    }
-    colorChanged() {
-        this.applyColor();
-    }
-    strokeWidthChanged() {
-        this.applyStrokeWidth();
-    }
+    svgGroupRef;
+    currentPaths = '';
+    sizeChanged() { this.updateHostStyles(); }
+    colorChanged() { this.applyColor(); }
+    strokeWidthChanged() { this.applyStrokeWidth(); }
     componentWillLoad() {
         this.applyColor();
         this.applyStrokeWidth();
         this.updateHostStyles();
     }
-    componentDidUpdate() {
+    componentDidRender() {
+        if (this.svgGroupRef) {
+            this.svgGroupRef.innerHTML = this.currentPaths;
+        }
         this.updateHostStyles();
     }
     applyStrokeWidth() {
@@ -46,15 +36,20 @@ export class DropiIcon {
     applyColor() {
         if (!this.color)
             return;
-        const fill = this.color.startsWith('#')
+        const fill = this.color.startsWith('#') || this.color === 'currentColor'
             ? this.color
-            : this.color === 'currentColor'
-                ? 'currentColor'
-                : `var(--${this.color})`;
+            : `var(--${this.color})`;
         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 ?? ''}` })));
+        const key = (this.name ?? '').toLowerCase();
+        const icon = ICON_MAP[key];
+        if (!icon) {
+            this.currentPaths = '';
+            return h("svg", { width: this.iconWidth, height: this.iconHeight, "aria-hidden": "true" });
+        }
+        this.currentPaths = icon.paths;
+        return (h(Host, null, h("svg", { viewBox: icon.viewBox, width: this.iconWidth, height: this.iconHeight, class: { spin: key === 'spinner' }, "aria-hidden": "true" }, h("g", { ref: (el) => { this.svgGroupRef = el; } }))));
     }
     static get is() { return "dropi-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -82,7 +77,7 @@ export class DropiIcon {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Icon name matching the id in the SVG sprite"
+                    "text": "Icon name (case-insensitive, matches dropi-lib-icons sprite ids)"
                 },
                 "getter": false,
                 "setter": false,
@@ -102,7 +97,7 @@ export class DropiIcon {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Width of the icon (CSS value)"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -162,7 +157,7 @@ export class DropiIcon {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Stroke width for icons that use strokes"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -176,10 +171,10 @@ export class DropiIcon {
     static get watchers() {
         return [{
                 "propName": "iconWidth",
-                "methodName": "widthChanged"
+                "methodName": "sizeChanged"
             }, {
                 "propName": "iconHeight",
-                "methodName": "heightChanged"
+                "methodName": "sizeChanged"
             }, {
                 "propName": "color",
                 "methodName": "colorChanged"

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-image-miniature/dropi-image-miniature.js

@@ -31,7 +31,7 @@ export class DropiImageMiniature {
     }
     render() {
         const imgs = this.parsedImages;
-        return (h("div", { key: 'aefd44eab41f586a8a5bf4bbc1675b6c9cc67124', class: "miniature" }, this.label && h("span", { key: 'f61ea53ad1dfa354a93781877e0f02c120e0f445', class: "miniature__label" }, this.label), h("div", { key: 'fbde49689bed4e93c63cab97e787e6d877a7fcb2', class: "miniature__grid" }, imgs.map((src, i) => (h("div", { class: "miniature__item", style: { width: this.width, height: this.height }, key: i, onClick: () => this.dropiImageClick.emit({ images: imgs, index: i }) }, h("img", { src: src, alt: `imagen ${i + 1}`, loading: "lazy", onError: (e) => this.handleError(e) }), h("div", { class: "miniature__zoom" }, h("dropi-icon", { name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Neutral-White" }))))))));
+        return (h("div", { key: '6e69ee9e8e277d35757b8f1fc84e93202bc76cba', class: "miniature" }, this.label && h("span", { key: '4a529ee9d6be76148b744c7cb187596329aff763', class: "miniature__label" }, this.label), h("div", { key: 'e191bb3044a5d1e3f79d0b1273f686e5055d18c1', class: "miniature__grid" }, imgs.map((src, i) => (h("div", { class: "miniature__item", style: { width: this.width, height: this.height }, key: i, onClick: () => this.dropiImageClick.emit({ images: imgs, index: i }) }, h("img", { src: src, alt: `imagen ${i + 1}`, loading: "lazy", onError: (e) => this.handleError(e) }), h("div", { class: "miniature__zoom" }, h("dropi-icon", { name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Neutral-White" }))))))));
     }
     static get is() { return "dropi-image-miniature"; }
     static get encapsulation() { return "shadow"; }

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,