@dropi/ui 0.1.19 → 0.1.20

package/dist/collection/components/dropi-image-overlay/dropi-image-overlay.css

@@ -5,78 +5,119 @@
   inset: 0;
   background: rgba(0,0,0,0.92);
   display: flex;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
+  align-items: center;
   z-index: 9999;
-  gap: var(--Size-3, 12px);
+  animation: fade-in 0.3s ease-out;
 }
 
 .overlay__close {
   position: absolute;
-  top: var(--Size-4, 16px);
-  right: var(--Size-4, 16px);
-  background: rgba(255,255,255,0.1);
+  top: 24px;
+  right: 24px;
+  background: rgba(255, 255, 255, 0.1);
   border: none;
   border-radius: 50%;
-  width: 40px;
-  height: 40px;
+  width: 48px;
+  height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  z-index: 10010;
   transition: background 0.15s;
 }
-.overlay__close:hover { background: rgba(255,255,255,0.2); }
+.overlay__close:hover { background: rgba(255, 255, 255, 0.2); }
+
+.overlay__body {
+  display: flex;
+  width: 90%;
+  height: 80%;
+  max-width: 1200px;
+  gap: 32px;
+  align-items: center;
+}
+
+.overlay__body--single {
+  justify-content: center;
+}
 
-.overlay__main {
+/* ── Thumbnails (Left Column) ─────────────────────────── */
+.overlay__thumbs {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  height: 100%;
+  overflow-y: auto;
+  padding-right: 8px;
+  width: 100px;
+  flex-shrink: 0;
+}
+
+/* Hide scrollbar but keep functionality */
+.overlay__thumbs::-webkit-scrollbar { width: 4px; }
+.overlay__thumbs::-webkit-scrollbar-thumb { background: #475066; border-radius: 4px; }
+
+.overlay__thumb-box {
+  width: 80px;
+  height: 80px;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: border-color 0.2s;
+}
+
+.overlay__thumb-box--active {
+  border-color: var(--Primary-Primary-500, #f49a3d);
+}
+
+.overlay__thumb-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* ── Main Content (Right Area) ─────────────────────────── */
+.overlay__content {
+  flex: 1;
+  height: 100%;
   position: relative;
   display: flex;
+  justify-content: center;
   align-items: center;
-  gap: var(--Size-3, 12px);
-  max-width: 90vw;
-  max-height: 75vh;
 }
 
-.overlay__image {
-  max-width: 80vw;
-  max-height: 72vh;
+.overlay__main-image {
+  max-width: 100%;
+  max-height: 100%;
   object-fit: contain;
-  border-radius: var(--Border-2, 8px);
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+  animation: scale-up 0.3s ease-out;
 }
 
 .overlay__nav {
-  background: rgba(255,255,255,0.1);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.1);
   border: none;
   border-radius: 50%;
-  width: 44px;
-  height: 44px;
+  width: 48px;
+  height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  flex-shrink: 0;
-  transition: background 0.15s;
+  transition: background 0.2s;
+  z-index: 5;
 }
-.overlay__nav:hover { background: rgba(255,255,255,0.2); }
 
-.overlay__thumbs {
-  display: flex;
-  gap: var(--Size-2, 8px);
-  flex-wrap: wrap;
-  justify-content: center;
-  max-width: 90vw;
-}
+.overlay__nav:hover { background: rgba(255, 255, 255, 0.2); }
+.overlay__nav--prev { left: -24px; }
+.overlay__nav--next { right: -24px; }
 
-.overlay__thumb {
-  width: 56px;
-  height: 56px;
-  object-fit: cover;
-  border-radius: var(--Border-1, 4px);
-  cursor: pointer;
-  opacity: 0.5;
-  border: 2px solid transparent;
-  transition: opacity 0.15s, border-color 0.15s;
-}
-.overlay__thumb:hover { opacity: 0.8; }
-.overlay__thumb--active { opacity: 1; border-color: var(--Primary-Primary-500, #f49a3d); }
+@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes scale-up { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

package/dist/collection/components/dropi-image-overlay/dropi-image-overlay.js

@@ -38,7 +38,7 @@ export class DropiImageOverlay {
             return null;
         const imgs = this.parsedImages;
         const multi = imgs.length > 1;
-        return (h("div", { class: "overlay", onClick: () => this.close() }, h("button", { class: "overlay__close", onClick: (e) => { e.stopPropagation(); this.close(); }, "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-small", width: "24px", height: "24px", color: "Neutral-White" })), h("div", { class: "overlay__main", onClick: (e) => e.stopPropagation() }, multi && (h("button", { class: "overlay__nav overlay__nav--prev", onClick: () => this.prev(), "aria-label": "Anterior" }, h("dropi-icon", { name: "Dropdown-left", width: "24px", height: "24px", color: "Neutral-White" }))), h("img", { class: "overlay__image", src: imgs[this.current], alt: `imagen ${this.current + 1}`, onError: (e) => this.handleError(e) }), multi && (h("button", { class: "overlay__nav overlay__nav--next", onClick: () => this.next(), "aria-label": "Siguiente" }, h("dropi-icon", { name: "Dropdown-Right", width: "24px", height: "24px", color: "Neutral-White" })))), multi && (h("div", { class: "overlay__thumbs", onClick: (e) => e.stopPropagation() }, imgs.map((src, i) => (h("img", { key: i, class: { 'overlay__thumb': true, 'overlay__thumb--active': i === this.current }, src: src, alt: `miniatura ${i + 1}`, onClick: () => this.current = i, onError: (e) => this.handleError(e) })))))));
+        return (h("div", { class: "overlay", onClick: () => this.close() }, h("button", { class: "overlay__close", onClick: (e) => { e.stopPropagation(); this.close(); }, "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-large", width: "24px", height: "24px", color: "Neutral-White" })), h("div", { class: { 'overlay__body': true, 'overlay__body--single': !multi }, onClick: (e) => e.stopPropagation() }, multi && (h("div", { class: "overlay__thumbs" }, imgs.map((src, i) => (h("div", { key: i, class: { 'overlay__thumb-box': true, 'overlay__thumb-box--active': i === this.current }, onClick: () => this.current = i }, h("img", { src: src, alt: `miniatura ${i + 1}`, class: "overlay__thumb-img", onError: (e) => this.handleError(e) })))))), h("div", { class: "overlay__content" }, multi && (h("button", { class: "overlay__nav overlay__nav--prev", onClick: () => this.prev(), "aria-label": "Anterior" }, h("dropi-icon", { name: "Dropdown-left", width: "18px", height: "18px", color: "Gray-Gray-500" }))), h("img", { class: "overlay__main-image", src: imgs[this.current], alt: `imagen ${this.current + 1}`, onError: (e) => this.handleError(e) }), multi && (h("button", { class: "overlay__nav overlay__nav--next", onClick: () => this.next(), "aria-label": "Siguiente" }, h("dropi-icon", { name: "Dropdown-Right", width: "18px", height: "18px", color: "Gray-Gray-500" })))))));
     }
     static get is() { return "dropi-image-overlay"; }
     static get encapsulation() { return "shadow"; }

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

@@ -179,14 +179,14 @@ export class DropiInput {
     render() {
         const showAsterisk = this.required && this.showAsterisk && !this.disabled;
         const showIconInline = !!this.icon;
-        return (h("div", { key: '444e873dc4175e75a5c85814499e28afb3f80b37', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: 'a501500f872b87ad701f5c18e0e3b532005c3fcb', class: "input-label Body-S-Regular" }, this.label, showAsterisk && h("span", { key: '1ca3afb47b67cfb61cd8bceb8657c9f061462064', class: "asterisk" }, " *"))), h("div", { key: 'eb31110de652f6db7c5fdd747046280b0e81e2b6', class: "form-group" }, h("div", { key: 'b0bb2cac1e8d7f20d927437e4ba6327e333d1fdb', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: '604a369b358b1c95a19cc23dd4bc4f9c77e4b050', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" })), this.passwordInput && (h("dropi-icon", { key: 'b1b3b979d172ada0c3fe616f795c7cd5b2bf45cb', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: 'b5488711765a12b6e9fea7b0f8d5a23ae95de925', id: this.resolvedId, class: {
+        return (h("div", { key: '49a1b6d02f59e1c67a70a219a7f7d0fbbd2a460d', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: '326d90a0361fe5ab90adee1479439aab34c99951', class: "input-label Body-S-Regular" }, this.label, showAsterisk && h("span", { key: 'cf5677966af627addc69a2735803845b54f41a9f', class: "asterisk" }, " *"))), h("div", { key: '1f7b7c614dc424ad4b1aa1819d05573fd08b30a1', class: "form-group" }, h("div", { key: 'c2f88e7f7f2f0da585e8ac20c6373b451290dfdd', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: 'c6f7cc14c56452768e4e49092a2be7968951255b', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" })), this.passwordInput && (h("dropi-icon", { key: '5ddbd5e176b61dc46d817fa6a32d3d3c0e2cc589', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: '51a17c36e9ed49fef0d2f0ea97d4aca10e4722d6', 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: 'f3008d901c41e6f362977e1232e7597733c4288e', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showAsterisk && h("span", { key: '1b982a1630f88557380df2f22c0c27bcceebbdc6', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: '30382a8e7beb0a14bb06f8fd25dae3da5371efd3', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: 'a1ef2b7a9a659301cc22c19d5e5f65bd7a595a2c', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), h("span", { key: '289250769c59d1ddde821395a9e97368404ca1ab', class: {
+            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxlength, inputMode: this.inputMode, "data-cy": undefined, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: '9fa96019e84dd543e3e74a15e8f0681ea7bb7823', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showAsterisk && h("span", { key: '740936c43be963fc7383e3ae6eb21c9d02ffde03', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: '9381fc81799162f20df8d2df914adc4ebee5e8ed', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: 'fea3d178b9b00f87d2a266cb665fca2774ec963a', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), h("span", { key: '390caaa2dfdfb673b8d1fdd8fada2d7c2f6ba764', class: {
                 'disabled-helper': this.disabled,
                 'invalid-color': this.isInvalid,
             } }, this.helperText)))))));

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

@@ -0,0 +1,79 @@
+:host {
+  display: inline-block;
+  position: relative;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.custom-dropdown {
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+}
+
+.custom-dropdown.open dropi-icon {
+  transform: rotate(180deg);
+}
+
+.selected-option {
+  display: flex;
+  height: 38px;
+  padding: var(--Size-2, 8px) var(--Size-3, 12px);
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  border-radius: 4px;
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  background: var(--Neutral-White, #fff);
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-600, #475066);
+}
+
+.dropdown-options {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: white;
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: 6px;
+  margin-top: 4px;
+  z-index: 1000;
+  overflow-y: auto;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  padding: 0;
+  list-style: none;
+  height: 0;
+  opacity: 0;
+  visibility: hidden;
+  transition: height 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
+  max-height: 0;
+}
+
+.dropdown-options.dropdown-open {
+  max-height: 300px;
+  height: auto;
+  opacity: 1;
+  visibility: visible;
+}
+
+.dropdown-options li {
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-600, #475066);
+}
+
+.dropdown-options li:hover,
+.dropdown-options li.active {
+  background: var(--Gray-Gray-50, #f7f8fa);
+}
+
+@media screen and (max-width: 720px) {
+  .selected-option span,
+  .dropdown-options li span {
+    display: none;
+  }
+}

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

@@ -0,0 +1,154 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-languages-selector
+ * Dropdown to switch between languages, showing country flag + label.
+ *
+ * @example
+ * <dropi-languages-selector
+ *   languages='[{"code":"es","label":"Español","flag":"CO"},{"code":"en","label":"English","flag":"US"}]'
+ * ></dropi-languages-selector>
+ */
+export class DropiLanguagesSelector {
+    /** Language options (array or JSON string) */
+    languages = [];
+    /** Currently selected language (LanguageOption or JSON string) */
+    selectedLang = null;
+    dropiLanguageChange;
+    isOpen = false;
+    parsedLanguages = [];
+    currentLang = null;
+    languagesChanged(val) {
+        this.parsedLanguages = typeof val === 'string' ? JSON.parse(val) : val;
+        if (!this.currentLang && this.parsedLanguages.length > 0) {
+            this.currentLang = this.parsedLanguages[0];
+        }
+    }
+    selectedLangChanged(val) {
+        if (!val)
+            return;
+        this.currentLang = typeof val === 'string' ? JSON.parse(val) : val;
+    }
+    componentWillLoad() {
+        this.languagesChanged(this.languages);
+        if (this.selectedLang)
+            this.selectedLangChanged(this.selectedLang);
+    }
+    select(lang) {
+        this.currentLang = lang;
+        this.isOpen = false;
+        this.dropiLanguageChange.emit(lang);
+    }
+    render() {
+        if (!this.currentLang)
+            return null;
+        return (h("div", { class: `custom-dropdown${this.isOpen ? ' open' : ''}` }, h("div", { class: "selected-option", onClick: () => { this.isOpen = !this.isOpen; } }, h("dropi-country-flags", { country: this.currentLang.flag, "flag-style": "rectangle", width: "20", height: "15" }), h("span", { class: "Body-S-Regular" }, this.currentLang.label), h("dropi-icon", { name: "Caret-down", width: "16px", height: "16px", color: "Gray-Gray-500" })), h("ul", { class: `dropdown-options${this.isOpen ? ' dropdown-open' : ''}` }, this.parsedLanguages.map(lang => (h("li", { key: lang.code, class: lang.code === this.currentLang?.code ? 'active' : '', onClick: () => this.select(lang) }, h("dropi-country-flags", { country: lang.flag, "flag-style": "rectangle", width: "20", height: "15" }), h("span", { class: "Body-S-Regular" }, lang.label)))))));
+    }
+    static get is() { return "dropi-languages-selector"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-languages-selector.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-languages-selector.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "languages": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LanguageOption[] | string",
+                    "resolved": "LanguageOption[] | string",
+                    "references": {
+                        "LanguageOption": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-languages-selector/dropi-languages-selector.tsx",
+                            "id": "src/components/dropi-languages-selector/dropi-languages-selector.tsx::LanguageOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language options (array or JSON string)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "languages",
+                "defaultValue": "[]"
+            },
+            "selectedLang": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "LanguageOption | string | null",
+                    "resolved": "LanguageOption | string",
+                    "references": {
+                        "LanguageOption": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-languages-selector/dropi-languages-selector.tsx",
+                            "id": "src/components/dropi-languages-selector/dropi-languages-selector.tsx::LanguageOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected language (LanguageOption or JSON string)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-lang",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "parsedLanguages": {},
+            "currentLang": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiLanguageChange",
+                "name": "dropiLanguageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "LanguageOption",
+                    "resolved": "LanguageOption",
+                    "references": {
+                        "LanguageOption": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-languages-selector/dropi-languages-selector.tsx",
+                            "id": "src/components/dropi-languages-selector/dropi-languages-selector.tsx::LanguageOption"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "languages",
+                "methodName": "languagesChanged"
+            }, {
+                "propName": "selectedLang",
+                "methodName": "selectedLangChanged"
+            }];
+    }
+}

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-const FALLBACK_SVG = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgNDAiPjx0ZXh0IHk9IjMwIiBmb250LXNpemU9IjI0IiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZmlsbD0iI2Y0OWEzZCI+ZHJvcGk8L3RleHQ+PC9zdmc+`;
+const FALLBACK_SVG = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgNDAiPjx0ZXh0IHk9IjMwIiBmb250LXNpemU9IjI0IiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZmlsbD0iIzg1OGVhNiI+ZHJvcGk8L3RleHQ+PC9zdmc+`;
 /**
  * @component dropi-logo
  * Displays the Dropi brand logo with size variants.
@@ -15,7 +15,7 @@ export class DropiLogo {
         e.target.src = FALLBACK_SVG;
     }
     render() {
-        return (h("figure", { key: '6b3335e9c4e8d799106f3c2080822d35d74bb16d', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, h("img", { key: 'e54ff2f0d1fb1f0f4eea4c46aae7a39f69268217', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", loading: "lazy", onError: (e) => this.handleError(e) })));
+        return (h("figure", { key: '416498bbb93314e2a69a3fdba9def0f8fb4d940a', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, h("img", { key: '137ae999c9db95e87d8ee76a46b328c34f97f58e', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", loading: "lazy", onError: (e) => this.handleError(e) })));
     }
     static get is() { return "dropi-logo"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,15 +7,15 @@ export class DropiLottieLoader {
     /** Show or hide the loader */
     visible = false;
     /** Path to the Lottie JSON animation file */
-    loadingAnimation = '';
+    loadingAnimation = '/assets/lottie-files/loading.json';
     /** Title shown below the animation */
-    loaderTitle = '';
+    loaderTitle = 'Cargando...';
     /** Descriptive message below the title */
-    message = '';
+    message = 'Por favor, espere un momento';
     render() {
         if (!this.visible)
             return null;
-        return (h("div", { class: "loader-overlay" }, h("div", { class: "loader-container" }, this.loadingAnimation && (h("div", { class: "lottie-animation", innerHTML: `<lottie-player src="${this.loadingAnimation}" background="transparent" speed="1" style="width:200px;height:200px" loop autoplay></lottie-player>` })), (this.loaderTitle || this.message) && (h("div", { class: "loader-text" }, this.loaderTitle && h("h3", { class: "loader-title" }, this.loaderTitle), this.message && h("p", { class: "loader-message" }, this.message))))));
+        return (h("div", { class: "loader-overlay" }, h("div", { class: "loader-container" }, h("div", { class: "lottie-animation" }, h("lottie-player", { src: this.loadingAnimation, background: "transparent", speed: "1", style: { width: '200px', height: '200px' }, loop: true, autoplay: true })), (this.loaderTitle || this.message) && (h("div", { class: "loader-text" }, this.loaderTitle && h("h3", { class: "loader-title" }, this.loaderTitle), this.message && h("p", { class: "loader-message" }, this.message))))));
     }
     static get is() { return "dropi-lottie-loader"; }
     static get encapsulation() { return "shadow"; }
@@ -69,7 +69,7 @@ export class DropiLottieLoader {
                 "setter": false,
                 "reflect": false,
                 "attribute": "loading-animation",
-                "defaultValue": "''"
+                "defaultValue": "'/assets/lottie-files/loading.json'"
             },
             "loaderTitle": {
                 "type": "string",
@@ -89,7 +89,7 @@ export class DropiLottieLoader {
                 "setter": false,
                 "reflect": false,
                 "attribute": "loader-title",
-                "defaultValue": "''"
+                "defaultValue": "'Cargando...'"
             },
             "message": {
                 "type": "string",
@@ -109,7 +109,7 @@ export class DropiLottieLoader {
                 "setter": false,
                 "reflect": false,
                 "attribute": "message",
-                "defaultValue": "''"
+                "defaultValue": "'Por favor, espere un momento'"
             }
         };
     }

package/dist/collection/components/dropi-media-player/dropi-media-player.css

@@ -0,0 +1,127 @@
+:host { display: block; width: 100%; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.player {
+  background: var(--Gray-Gray-800, #1a2033);
+  border-radius: var(--Border-2, 8px);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Video */
+.player__video {
+  width: 100%;
+  display: block;
+  max-height: 400px;
+  object-fit: contain;
+  background: #000;
+}
+
+/* Controls */
+.player__controls {
+  padding: var(--Size-3, 12px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Size-2, 8px);
+}
+
+.player__title {
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-300, #a0a9c0);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Seek */
+.player__seek-wrap {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+}
+
+.player__time {
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-400, #858ea6);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.player__seek-track {
+  flex: 1;
+  position: relative;
+  height: 4px;
+  background: var(--Gray-Gray-600, #475066);
+  border-radius: 100px;
+}
+
+.player__seek-fill {
+  position: absolute;
+  left: 0; top: 0; bottom: 0;
+  background: var(--Primary-Primary-500, #f49a3d);
+  border-radius: 100px;
+  pointer-events: none;
+}
+
+.player__seek {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+  margin: 0;
+  accent-color: var(--Primary-Primary-500, #f49a3d);
+}
+
+/* Buttons row */
+.player__buttons {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+}
+
+.player__btn {
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  border-radius: var(--Border-1, 4px);
+  transition: background 0.15s;
+}
+.player__btn:hover { background: rgba(255,255,255,0.08); }
+
+.player__btn--play {
+  width: 36px;
+  height: 36px;
+  background: var(--Primary-Primary-500, #f49a3d);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.player__btn--play:hover { background: var(--Primary-Primary-600, #e08526); }
+
+/* Volume */
+.player__volume {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.player__volume-slider {
+  width: 60px;
+  accent-color: var(--Primary-Primary-500, #f49a3d);
+  cursor: pointer;
+}
+
+.player__spacer { flex: 1; }
+
+/* Audio-only: slightly smaller */
+.player--audio .player__controls {
+  padding: var(--Size-4, 16px);
+}