@dropi/ui 0.1.37 → 0.1.42

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

@@ -9,36 +9,39 @@ export class DropiIcon {
     /** Icon name matching the id in the SVG sprite */
     name = '';
     /** Width of the icon (CSS value) */
-    width = '24px';
-    /** Height of the icon (CSS value) */
-    height = '24px';
-    /**
-     * Color of the icon. Accepts:
-     * - Hex color: `#ff0000`
-     * - CSS variable name without `--`: `Primary-Primary-500`
-     * - `currentColor` to inherit
-     */
+    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();
+    }
     componentWillLoad() {
-        // SSR Fallback: Read attributes if props are not yet synced by hydration
-        if (!this.el.style.width && !this.el.style.height) {
-            const attrW = this.el.getAttribute('width') || '24px';
-            const attrH = this.el.getAttribute('height') || '24px';
-            this.width = attrW;
-            this.height = attrH;
-        }
         this.applyColor();
+        this.applyStrokeWidth();
         this.updateHostStyles();
     }
     componentDidUpdate() {
         this.updateHostStyles();
     }
+    applyStrokeWidth() {
+        if (this.strokeWidth) {
+            this.el.style.setProperty('--icon-stroke-width', this.strokeWidth);
+        }
+    }
     updateHostStyles() {
-        this.el.style.width = this.width;
-        this.el.style.height = this.height;
+        this.el.style.width = this.iconWidth;
+        this.el.style.height = this.iconHeight;
     }
     applyColor() {
         if (!this.color)
@@ -51,7 +54,7 @@ export class DropiIcon {
         this.el.style.setProperty('--icon-fill', fill);
     }
     render() {
-        return (h("svg", { key: 'c705712bd21c4da94dcff8ce12b0c0b880681e95', width: this.width ?? '24px', height: this.height ?? '24px', class: { spin: (this.name ?? '') === 'Spinner' }, "aria-hidden": "true" }, h("use", { key: 'b02addb8203904ec059b3c92bd40b09e3c79622d', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name ?? ''}` })));
+        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 ?? ''}` })));
     }
     static get is() { return "dropi-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -87,7 +90,7 @@ export class DropiIcon {
                 "attribute": "name",
                 "defaultValue": "''"
             },
-            "width": {
+            "iconWidth": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -104,10 +107,10 @@ export class DropiIcon {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "width",
-                "defaultValue": "'24px'"
+                "attribute": "icon-width",
+                "defaultValue": "'20px'"
             },
-            "height": {
+            "iconHeight": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -119,13 +122,13 @@ export class DropiIcon {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Height of the icon (CSS value)"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "height",
-                "defaultValue": "'24px'"
+                "attribute": "icon-height",
+                "defaultValue": "'20px'"
             },
             "color": {
                 "type": "string",
@@ -139,21 +142,50 @@ export class DropiIcon {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Color of the icon. Accepts:\n- Hex color: `#ff0000`\n- CSS variable name without `--`: `Primary-Primary-500`\n- `currentColor` to inherit"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "color",
                 "defaultValue": "'currentColor'"
+            },
+            "strokeWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stroke width for icons that use strokes"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stroke-width",
+                "defaultValue": "''"
             }
         };
     }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "iconWidth",
+                "methodName": "widthChanged"
+            }, {
+                "propName": "iconHeight",
+                "methodName": "heightChanged"
+            }, {
                 "propName": "color",
                 "methodName": "colorChanged"
+            }, {
+                "propName": "strokeWidth",
+                "methodName": "strokeWidthChanged"
             }];
     }
 }

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

@@ -25,13 +25,13 @@ export class DropiIlustrationIcon {
         const map = {
             success: 'Check-circle',
             error: 'Cross-circle',
-            info: 'Info',
-            warning: 'Info',
+            info: 'Comment-round_info',
+            warning: 'Comment-round_info',
         };
-        return map[state] || 'Info';
+        return map[state] || 'Comment-round_info';
     }
     render() {
-        return (h("div", { key: '2f956eddb214de168aae134374512600867e77a8', class: "dropi-ilustration" }, this.type === 'dropi' && (h("figure", { key: '3d05624542d51f64cb6402fb958f039bc943afb7', class: "dropi-ilustration__image" }, h("img", { key: '6fb383b378d989f675433c46710e246dc193f26b', 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: 'f66957ddbba9506d041ab1b2e8877872b25bdbf3', class: `dropi-ilustration__image-mb ${this.state}` }, ['success', 'error', 'info', 'warning'].includes(this.state) && (h("dropi-icon", { key: '2844c2707906bcba57835c1e7652c52769b504fe', name: this.getIconName(this.state), width: "24px", height: "24px", color: "Neutral-White" })))), this.type === 'insignia' && (h("figure", { key: '4c091e2f415d252ae3cdaa7b62b1e4788192ae6c', class: this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia' }, h("img", { key: 'dc9e11b8ecf525dbfd0c8c147a64e12350c2b6d5', src: this.insigniaIcons[this.stateInsignia], alt: this.stateInsignia }), this.tagProduct && (h("p", { key: '0fa7f6fdd1bb9075d1ef2a09a6701b0b464a746b', class: `tag tag--${this.stateInsignia}` }, h("span", { key: 'dae1336fefa32471ebbc78f1bcdd0c9b1c89dcba', class: "Caption-S" }, this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1))))))));
+        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))))))));
     }
     static get is() { return "dropi-ilustration-icon"; }
     static get encapsulation() { return "shadow"; }

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: '111d908339df1d3fba74cb8737f3c72e2254e2f0', class: "miniature" }, this.label && h("span", { key: '007ecc8149b6778eac7dd80a978a088f686001eb', class: "miniature__label" }, this.label), h("div", { key: '95c18d71f5c753bd2610915b62632aca7fbd4d16', 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", width: "16px", height: "16px", color: "Neutral-White" }))))))));
+        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" }))))))));
     }
     static get is() { return "dropi-image-miniature"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,7 +39,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-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" })))))));
+        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", iconWidth: "24px", iconHeight: "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", iconWidth: "18px", iconHeight: "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", iconWidth: "18px", iconHeight: "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.css

@@ -42,17 +42,25 @@
 /* ── Icons ─────────────────────────────────────────────────── */
 .icon-input {
   position: absolute;
-  top: 10px;
-  left: 5px;
+  top: 50%;
+  left: 12px;
+  transform: translateY(-50%);
   z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .icon-input-password {
   position: absolute;
-  top: 10px;
+  top: 50%;
   right: 13px;
+  transform: translateY(-50%);
   cursor: pointer;
   z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 /* ── Base input ─────────────────────────────────────────────── */
@@ -106,12 +114,12 @@
 }
 
 .padding-icon {
-  padding-left: 28px;
+  padding-left: 40px;
 }
 
 /* When icon is always visible, shift the floating label right to avoid overlap */
 .input-container--has-icon label.label-bottom {
-  left: 28px;
+  left: 40px;
 }
 
 /* When focused or has value, float up to left: 0 regardless */

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

@@ -18,7 +18,7 @@ export class DropiInput {
     internals;
     // ── Identification ──────────────────────────────────────────
     /** Input id. Defaults to label label. */
-    id = '';
+    inputId = '';
     /** Name attribute for native form submission */
     name = '';
     // ── Content ─────────────────────────────────────────────────
@@ -81,18 +81,20 @@ export class DropiInput {
     touched = false;
     // ── Events ──────────────────────────────────────────────────
     /** Emitted on every keystroke with the current value */
-    onInput;
+    dropiInput;
     /** Emitted on blur with the final value */
-    onChange;
+    dropiChange;
     /** Emitted on focus */
-    onFocus;
+    dropiFocus;
     /** Emitted on blur */
-    onBlur;
+    dropiBlur;
     inputPropertiesChanged(val) {
         if (!val)
             return;
         if (val.id !== undefined)
-            this.id = val.id;
+            this.inputId = val.id;
+        if (val.inputId !== undefined)
+            this.inputId = val.inputId;
         if (val.label !== undefined)
             this.label = val.label;
         if (val.placeholder !== undefined)
@@ -148,7 +150,7 @@ export class DropiInput {
             val = this.formatThousands(val, this.isMoneyInput);
         this.value = val;
         this.internals.setFormValue(val);
-        this.onInput.emit(val);
+        this.dropiInput.emit(val);
     }
     handleKeyDown(e) {
         if ((this.isNumericInput || this.isMoneyInput || this.isThousandSeparator) && !this.isAllowedNumberKey(e)) {
@@ -159,12 +161,12 @@ export class DropiInput {
         }
     }
     handleFocus() {
-        this.onFocus.emit();
+        this.dropiFocus.emit();
     }
     handleBlur() {
         this.touched = true;
-        this.onChange.emit(this.value);
-        this.onBlur.emit();
+        this.dropiChange.emit(this.value);
+        this.dropiBlur.emit();
     }
     togglePassword() {
         if (this.disabled)
@@ -208,7 +210,7 @@ export class DropiInput {
     }
     // ── Computed ─────────────────────────────────────────────────
     get resolvedId() {
-        return this.id || this.label;
+        return this.inputId || this.label;
     }
     get inputType() {
         if (this.passwordInput)
@@ -229,14 +231,14 @@ export class DropiInput {
     render() {
         const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
         const showIconInline = !!this.icon;
-        return (h("div", { key: 'cc38b113d77982ba53665a6c8ccbf39a393da696', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: '06bb6b6df585f859dc7a903fac4ed3f9f6c31077', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && h("span", { key: '6e87d6717a312d7497c2cf438aec7a692b974dda', class: "asterisk" }, " *"))), h("div", { key: '2eb67324cb06e04ee9fc5507a319a2eda8b5e410', class: "form-group" }, h("div", { key: '9d8d6f8df83c33782fd61810267e433fdab452d9', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && h("dropi-icon", { key: '370070a0e75a929438cb564698ee10c866e944a9', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" }), this.passwordInput && (h("dropi-icon", { key: '675958939e32a94060993515f9b9a58513ec2adc', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: 'd2ac98c43f9863ea8153dc66dd3fe347a7c28473', id: this.resolvedId, class: {
+        return (h("div", { key: '36a33fdb7048e3ba43dae3c2d3d71c9f69643cac', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: '699adfe37d662ed328cd13fdad428e857b70f01d', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && h("span", { key: 'b2d6f4757cdb50eacfb7879e4a878e30adf5235d', class: "asterisk" }, " *"))), h("div", { key: 'dc080fc5d0ab12f0eadf7e1bb30cae5539f76640', class: "form-group" }, h("div", { key: 'cf228d5e4c7e0a04735d38ba239a2b989f5247ca', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: '049e396ea1f2f11625de73bc074c0e0aecea96ab', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (h("dropi-icon", { key: '544316f6e7a284acf65d3a2b7fb3a2654c80d95b', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' }, color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: '6d23ac748d0768d6eea0eb347bde7b13d8f20321', id: this.resolvedId, class: {
                 '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: '45eb57801e7d199532215ba069af8ba01714a46f', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: '5d4d83ce2575d60567a4a947d643a89f760cb3bd', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: 'b78fdac5f0c46b827c9dd2895d43a5e1724058d8', class: "form-control-helper" }, this.isInvalid && h("dropi-icon", { key: 'f037c95230fe0fa57540a1b74a26c14e56e555e4', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: 'fc48f7418c36f7ded7a999e446323ca8adb2b590', 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: '8f26c9430cbc1c6b55286d62c2a350724dd0101f', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: '95d953c160cf22457b0e1d6265b8137a24d4092b', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: 'ad3d4b5230fd32e97c661c64deadf97830caa550', class: "form-control-helper" }, this.isInvalid && h("dropi-icon", { key: '7c28120d1cc46ccd288948b1d2d9e5cc24521af7', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '40eb1eedd2a204975aed61fcd24ccadd26d8aaef', class: {
                 'disabled-helper': this.disabled,
                 'invalid-color': this.isInvalid,
             } }, this.textHelper)))))));
@@ -256,7 +258,7 @@ export class DropiInput {
     }
     static get properties() {
         return {
-            "id": {
+            "inputId": {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
@@ -273,7 +275,7 @@ export class DropiInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "id",
+                "attribute": "input-id",
                 "defaultValue": "''"
             },
             "name": {
@@ -731,8 +733,8 @@ export class DropiInput {
     }
     static get events() {
         return [{
-                "method": "onInput",
-                "name": "onInput",
+                "method": "dropiInput",
+                "name": "dropiInput",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -746,8 +748,8 @@ export class DropiInput {
                     "references": {}
                 }
             }, {
-                "method": "onChange",
-                "name": "onChange",
+                "method": "dropiChange",
+                "name": "dropiChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -761,8 +763,8 @@ export class DropiInput {
                     "references": {}
                 }
             }, {
-                "method": "onFocus",
-                "name": "onFocus",
+                "method": "dropiFocus",
+                "name": "dropiFocus",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -776,8 +778,8 @@ export class DropiInput {
                     "references": {}
                 }
             }, {
-                "method": "onBlur",
-                "name": "onBlur",
+                "method": "dropiBlur",
+                "name": "dropiBlur",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

@@ -13,7 +13,7 @@ export class DropiLanguagesSelector {
     languages = [];
     /** Currently selected language (LanguageOption or JSON string) */
     selectedLang = null;
-    languageChange;
+    dropiLanguageChange;
     isOpen = false;
     parsedLanguages = [];
     currentLang = null;
@@ -40,12 +40,12 @@ export class DropiLanguagesSelector {
     select(lang) {
         this.currentLang = lang;
         this.isOpen = false;
-        this.languageChange.emit(lang);
+        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)))))));
+        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", iconWidth: "16px", iconHeight: "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"; }
@@ -124,8 +124,8 @@ export class DropiLanguagesSelector {
     }
     static get events() {
         return [{
-                "method": "languageChange",
-                "name": "languageChange",
+                "method": "dropiLanguageChange",
+                "name": "dropiLanguageChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

@@ -25,7 +25,7 @@ export class DropiLogo {
         e.target.src = FALLBACK_SVG;
     }
     render() {
-        return (h("figure", { key: '479af3da2dc04c7d6e79b99494fce0fb5419af4d', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, h("img", { key: '6b78e7004f4b1dd782e4c17dae7b264fff483875', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", onError: (e) => this.handleError(e) })));
+        return (h("figure", { key: '2a5ed49bd2ac8592db5b06256ff4e911e26ee6fd', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, h("img", { key: 'f0f63e2e5ceb30c24eac3f7f5a3446858b632f90', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", onError: (e) => this.handleError(e) })));
     }
     static get is() { return "dropi-logo"; }
     static get encapsulation() { return "shadow"; }

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

@@ -171,10 +171,10 @@ export class DropiMediaPlayer {
             }, onMouseMove: () => this.onMouseMove(), onMouseLeave: () => this.onMouseLeave() }, h("div", { class: "dropi-media-player__blur-bg", style: { backgroundImage: `url(${this.poster})` } }), h("div", { class: "dropi-media-player__blur-overlay" }), h("video", { class: "dropi-media-player__video", ref: (el) => this.mediaEl = el, src: this.src, poster: this.poster, onClick: () => this.togglePlay(), onPlay: () => { this.playing = true; this.startHideControlsTimer(); this.dropiPlay.emit(true); }, onPause: () => { this.playing = false; this.showControls = true; clearTimeout(this.controlsTimeout); this.dropiPlay.emit(false); }, onEnded: () => { this.playing = false; this.showControls = true; this.dropiEnded.emit(); }, onTimeUpdate: () => this.handleTimeUpdate(), onLoadedMetaData: () => this.handleLoadedMetadata() }), h("div", { class: {
                 'dropi-media-player__center-play': true,
                 'dropi-media-player__center-play--hidden': this.playing && !this.showControls
-            }, style: { width: `${this.playButtonSize}px`, height: `${this.playButtonSize}px` }, onClick: (e) => { e.stopPropagation(); this.togglePlay(); } }, this.playing ? (h("svg", { width: `${this.playIconSize}px`, height: `${this.playIconSize}px`, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", style: { color: '#ffffff' } }, h("rect", { x: "6.5", y: "4", width: "3.5", height: "16", rx: "1.75" }), h("rect", { x: "14", y: "4", width: "3.5", height: "16", rx: "1.75" }))) : (h("dropi-icon", { name: "Play", color: "Neutral-White", width: `${this.playIconSize}px`, height: `${this.playIconSize}px` }))), h("div", { class: {
+            }, style: { width: `${this.playButtonSize}px`, height: `${this.playButtonSize}px` }, onClick: (e) => { e.stopPropagation(); this.togglePlay(); } }, this.playing ? (h("svg", { width: `${this.playIconSize}px`, height: `${this.playIconSize}px`, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", style: { color: '#ffffff' } }, h("rect", { x: "6.5", y: "4", width: "3.5", height: "16", rx: "1.75" }), h("rect", { x: "14", y: "4", width: "3.5", height: "16", rx: "1.75" }))) : (h("dropi-icon", { name: "Play", color: "Neutral-White", iconWidth: `${this.playIconSize}px`, iconHeight: `${this.playIconSize}px` }))), h("div", { class: {
                 'dropi-media-player__controls-bar': true,
                 'dropi-media-player__controls-bar--hidden': !this.showControls
-            }, onClick: (e) => e.stopPropagation() }, h("span", { class: "dropi-media-player__timestamp" }, this.currentTimeStr, " / ", this.durationStr), h("div", { class: "dropi-media-player__progress", onClick: (e) => { e.stopPropagation(); this.handleSeek(e); } }, h("div", { class: "dropi-media-player__progress-track" }, h("div", { class: "dropi-media-player__progress-fill", style: { width: `${this.progress}%` } }), h("div", { class: "dropi-media-player__progress-thumb", style: { left: `${this.progress}%` } }))), h("div", { class: "dropi-media-player__actions" }, h("div", { class: "dropi-media-player__speed-control", onClick: (e) => e.stopPropagation() }, this.showSpeedMenu && (h("div", { class: "dropi-media-player__speed-menu" }, this.speeds.map(s => (h("button", { type: "button", class: { 'dropi-media-player__speed-option': true, 'dropi-media-player__speed-option--active': this.speed === s }, onClick: (e) => { e.stopPropagation(); this.selectSpeed(s); } }, "x", s))))), h("button", { class: "dropi-media-player__btn dropi-media-player__btn--speed", onClick: (e) => { e.stopPropagation(); this.toggleSpeedMenu(); }, type: "button" }, "x", this.speed)), h("button", { class: "dropi-media-player__btn", onClick: (e) => { e.stopPropagation(); this.toggleFullscreen(); }, type: "button" }, h("dropi-icon", { name: this.isFullscreen ? 'Compress' : 'Expand', color: "Neutral-White", width: "20px", height: "20px" })), h("div", { class: "dropi-media-player__volume-control", onClick: (e) => e.stopPropagation() }, this.showVolumeSlider && (h("div", { class: "dropi-media-player__volume-popup" }, h("input", { type: "range", class: "dropi-media-player__volume-slider", min: "0", max: "1", step: "0.01", value: this.muted ? 0 : this.volume, style: { background: this.volumeGradient }, onInput: (e) => this.handleVolume(e) }))), h("button", { class: "dropi-media-player__btn", onClick: (e) => { e.stopPropagation(); this.toggleVolume(); }, type: "button" }, h("dropi-icon", { name: this.volumeIcon, color: "Neutral-White", width: "20px", height: "20px" })))))));
+            }, onClick: (e) => e.stopPropagation() }, h("span", { class: "dropi-media-player__timestamp" }, this.currentTimeStr, " / ", this.durationStr), h("div", { class: "dropi-media-player__progress", onClick: (e) => { e.stopPropagation(); this.handleSeek(e); } }, h("div", { class: "dropi-media-player__progress-track" }, h("div", { class: "dropi-media-player__progress-fill", style: { width: `${this.progress}%` } }), h("div", { class: "dropi-media-player__progress-thumb", style: { left: `${this.progress}%` } }))), h("div", { class: "dropi-media-player__actions" }, h("div", { class: "dropi-media-player__speed-control", onClick: (e) => e.stopPropagation() }, this.showSpeedMenu && (h("div", { class: "dropi-media-player__speed-menu" }, this.speeds.map(s => (h("button", { type: "button", class: { 'dropi-media-player__speed-option': true, 'dropi-media-player__speed-option--active': this.speed === s }, onClick: (e) => { e.stopPropagation(); this.selectSpeed(s); } }, "x", s))))), h("button", { class: "dropi-media-player__btn dropi-media-player__btn--speed", onClick: (e) => { e.stopPropagation(); this.toggleSpeedMenu(); }, type: "button" }, "x", this.speed)), h("button", { class: "dropi-media-player__btn", onClick: (e) => { e.stopPropagation(); this.toggleFullscreen(); }, type: "button" }, h("dropi-icon", { name: this.isFullscreen ? 'Compress' : 'Expand', color: "Neutral-White", iconWidth: "20px", iconHeight: "20px" })), h("div", { class: "dropi-media-player__volume-control", onClick: (e) => e.stopPropagation() }, this.showVolumeSlider && (h("div", { class: "dropi-media-player__volume-popup" }, h("input", { type: "range", class: "dropi-media-player__volume-slider", min: "0", max: "1", step: "0.01", value: this.muted ? 0 : this.volume, style: { background: this.volumeGradient }, onInput: (e) => this.handleVolume(e) }))), h("button", { class: "dropi-media-player__btn", onClick: (e) => { e.stopPropagation(); this.toggleVolume(); }, type: "button" }, h("dropi-icon", { name: this.volumeIcon, color: "Neutral-White", iconWidth: "20px", iconHeight: "20px" })))))));
     }
     static get is() { return "dropi-media-player"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,10 +5,11 @@
   position: fixed; inset: 0;
   display: flex; align-items: center; justify-content: center;
   pointer-events: none; opacity: 0;
-  transition: opacity 0.18s ease; z-index: 1100;
+  transition: opacity 0.18s ease; z-index: 9999;
+  visibility: hidden;
 }
-.modal-root--open { opacity: 1; pointer-events: auto; }
-.modal-root--closing { opacity: 1; pointer-events: none; }
+.modal-root--open { opacity: 1; pointer-events: auto; visibility: visible; }
+.modal-root--closing { opacity: 1; pointer-events: none; visibility: visible; }
 
 .modal-mask {
   position: absolute; inset: 0;
@@ -53,6 +54,8 @@
   align-items: flex-start; 
   gap: var(--Size-1, 4px); 
   width: 100%;
+  margin-top: auto;
+  flex-shrink: 0;
 }
 .modal-footer:empty { display: none; }
 
@@ -72,12 +75,14 @@
 }
 
 .modal-panel.size-m .modal-footer,
-.modal-panel.size-s .modal-footer { 
-  justify-content: center; 
+.modal-panel.size-s .modal-footer,
+.modal-panel.size-xs .modal-footer { 
+  justify-content: flex-end; 
 }
 
 .modal-panel.size-m .modal-footer ::slotted(.button-container),
-.modal-panel.size-s .modal-footer ::slotted(.button-container) { 
+.modal-panel.size-s .modal-footer ::slotted(.button-container),
+.modal-panel.size-xs .modal-footer ::slotted(.button-container) { 
   min-width: unset !important;
   width: 100%;
 }
@@ -94,6 +99,7 @@
 .modal-panel.size-l { width: 1137px; max-width: 1137px; max-height: 754px; }
 .modal-panel.size-m { max-width: 550px; width: 550px; }
 .modal-panel.size-s { width: 454px; }
+.modal-panel.size-xs { width: 320px; padding: 24px; gap: 16px; }
 
 .modal-root--right { align-items: stretch; justify-content: flex-end; }
 .modal-root--right .modal-panel { height: 100vh; max-height: 100vh; border-radius: 0; gap: 0; opacity: 1; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.4,0,0.2,1); }