@dropi/ui 0.1.20 → 0.1.21

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

@@ -2,38 +2,61 @@ import { h } from "@stencil/core";
 /**
  * @component dropi-drawer
  * Slide-in panel from any side of the screen with backdrop.
- * Supports header title, close button, and slotted content/footer.
+ * Matches dropi-core_front implementation with size and headless support.
  */
 export class DropiDrawer {
+    drawerTitle = '';
+    /** Controls visibility (alias of open for Angular parity) */
+    drawerIsOpen = false;
     /** Controls visibility */
     open = false;
     /** Side from which the drawer slides in */
     position = 'right';
-    /** Drawer title */
-    drawerTitle = '';
-    /** Width (for left/right drawers) */
+    /** Preset size (overrides width when set): 'm' | 'l' | 'xl' | 'xxl' */
+    size = '';
+    /** Custom width for left/right drawers (used when size is not set) */
     width = '400px';
-    /** Height (for top/bottom drawers) */
+    /** Custom height for top/bottom drawers */
     height = '50vh';
+    /** Hide the header (headless mode) */
+    headless = false;
     /** Close on backdrop click */
     closeOnBackdrop = true;
     /** Emitted when drawer closes */
     dropiClose;
     openChanged(val) {
+        this.open = val;
+        this.drawerIsOpen = val;
         if (typeof document !== 'undefined') {
             document.body.style.overflow = val ? 'hidden' : '';
         }
     }
+    componentWillLoad() {
+        if (this.drawerIsOpen)
+            this.open = true;
+        if (this.open)
+            this.drawerIsOpen = true;
+    }
     close() {
         this.open = false;
         this.dropiClose.emit();
     }
     render() {
         const isHorizontal = this.position === 'left' || this.position === 'right';
-        return (h("div", { key: '49b9f893c2c05018301b67234142d4ad2e38a511', class: { 'drawer-host': true, 'drawer-host--open': this.open } }, h("div", { key: '4a2263c0ffe74bdb53e1ff4992d3b04f39a55856', class: "drawer-backdrop", onClick: () => {
+        // Clase de tamaño según prop size
+        const sizeClass = this.size ? `drawer-panel--size-${this.size}` : '';
+        // Estilo inline solo cuando no hay size preset
+        const panelStyle = {};
+        if (!this.size) {
+            if (isHorizontal)
+                panelStyle['width'] = this.width;
+            else
+                panelStyle['height'] = this.height;
+        }
+        return (h("div", { key: '2236d22981ab82b57de3d442194403d5d79ce1c8', class: { 'drawer-host': true, 'drawer-host--open': this.open } }, h("div", { key: 'c0132eefbe379fab8c6dc2fb084acf0390fc8d7a', class: "drawer-backdrop", onClick: () => {
                 if (this.closeOnBackdrop)
                     this.close();
-            } }), h("div", { key: 'd2cf49005f3b8a970361fdd725d9903b212abd37', class: `drawer-panel drawer-panel--${this.position}`, style: isHorizontal ? { width: this.width } : { height: this.height }, role: "dialog", "aria-modal": "true" }, h("div", { key: '4f04806b747df0e079e01a27ba307f1625679a08', class: "drawer-header" }, h("span", { key: '211b77262547ac3b45e97966e6cc6b18dbf92b39', class: "drawer-header__title" }, this.drawerTitle), h("button", { key: '1a18631b15de75687cab1e21869c8948461716d7', class: "drawer-header__close", onClick: () => this.close(), "aria-label": "Cerrar" }, h("dropi-icon", { key: '94c49ce2bc26e65be60d0bb7fb0d05c3e4d260e6', name: "Close-small", width: "20px", height: "20px", color: "Gray-Gray-600" }))), h("div", { key: '900cafee62e4dd5b4e6dd89aec680bd19bb44bd8', class: "drawer-body" }, h("slot", { key: 'ef7d81f315b0aaea94bd68048d133a8026685a66' })), h("div", { key: 'd4e6058b84c1fe015b66c540bb1951666bafb35e', class: "drawer-footer" }, h("slot", { key: 'e66380715a41bc41310ff4b3241e868c5e2609b1', name: "footer" })))));
+            } }), h("div", { key: '111dbff06af3627ef8e9c593b2fb8598da636009', class: `drawer-panel drawer-panel--${this.position}${sizeClass ? ' ' + sizeClass : ''}`, style: panelStyle, role: "dialog", "aria-modal": "true" }, h("div", { key: '41e891fe77ba69f3e5f3a450da6e4017f0764b59', class: { 'drawer-header': true, 'drawer-header--headless': this.headless } }, h("h3", { key: '10212f728327670142b23949eb2698e4937d7c27', class: "drawer-header__title" }, this.drawerTitle), h("button", { key: '0736447705965fb9222edeb993d85c5e1d567476', class: "drawer-header__close", onClick: () => this.close(), "aria-label": "Cerrar" }, h("dropi-icon", { key: '1d8d27869bd79c5095f56f85b56127673e89d509', name: "Close-small", width: "32px", height: "32px", color: "Gray-Gray-400" }))), h("div", { key: '398f9a7e3e5dd1bf861ca7b14961a0d1a217a229', class: "drawer-body" }, h("slot", { key: '2555a218f61c56c017ae1ed2ea1f34048d5e5b51' })), h("div", { key: '88e430bdcba47e50760051e0310788336f11a8c1', class: "drawer-footer" }, h("slot", { key: '2de19e6270c61ba5a43d39707db6ea669d9037d1', name: "footer" })))));
     }
     static get is() { return "dropi-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -49,6 +72,46 @@ export class DropiDrawer {
     }
     static get properties() {
         return {
+            "drawerTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "drawer-title",
+                "defaultValue": "''"
+            },
+            "drawerIsOpen": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls visibility (alias of open for Angular parity)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "drawer-is-open",
+                "defaultValue": "false"
+            },
             "open": {
                 "type": "boolean",
                 "mutable": true,
@@ -89,24 +152,24 @@ export class DropiDrawer {
                 "attribute": "position",
                 "defaultValue": "'right'"
             },
-            "drawerTitle": {
+            "size": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "'m' | 'l' | 'xl' | 'xxl' | ''",
+                    "resolved": "\"\" | \"l\" | \"m\" | \"xl\" | \"xxl\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Drawer title"
+                    "text": "Preset size (overrides width when set): 'm' | 'l' | 'xl' | 'xxl'"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "drawer-title",
+                "attribute": "size",
                 "defaultValue": "''"
             },
             "width": {
@@ -121,7 +184,7 @@ export class DropiDrawer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Width (for left/right drawers)"
+                    "text": "Custom width for left/right drawers (used when size is not set)"
                 },
                 "getter": false,
                 "setter": false,
@@ -141,7 +204,7 @@ export class DropiDrawer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Height (for top/bottom drawers)"
+                    "text": "Custom height for top/bottom drawers"
                 },
                 "getter": false,
                 "setter": false,
@@ -149,6 +212,26 @@ export class DropiDrawer {
                 "attribute": "height",
                 "defaultValue": "'50vh'"
             },
+            "headless": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide the header (headless mode)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "headless",
+                "defaultValue": "false"
+            },
             "closeOnBackdrop": {
                 "type": "boolean",
                 "mutable": false,
@@ -193,6 +276,9 @@ export class DropiDrawer {
         return [{
                 "propName": "open",
                 "methodName": "openChanged"
+            }, {
+                "propName": "drawerIsOpen",
+                "methodName": "openChanged"
             }];
     }
 }

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

@@ -12,7 +12,7 @@
   max-height: var(--dropdown-height, 300px);
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
   border-radius: var(--Border-2, 8px);
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
 }
 
 .dropdown__item {

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

@@ -7,16 +7,22 @@ import { h } from "@stencil/core";
 export class DropiDropdown {
     /** Options array or JSON string */
     options = [];
-    /** Property name to display as the option label */
+    /** Property name for the label */
     valueModel = 'name';
-    /** Property name to use as the option image/avatar URL */
-    imageModel = '';
-    /** Max height of the list container (CSS value) */
-    height = '300px';
+    /** Height of the dropdown (CSS value) */
+    height = '';
+    /** Whether the dropdown is inside a select component */
+    isInSelect = false;
+    /** Configuration parameters for the dropdown items */
+    parameters = {
+        type: 'checkbox',
+        icon: '',
+        iconCurrier: false,
+    };
     selected = [];
     parsedOptions = [];
-    /** Emitted when selection changes. e.detail = selected items array */
-    dropiChange;
+    /** Emitted when selection changes — matches Angular 'modelChange' */
+    modelChange;
     optionsChanged(val) {
         this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
     }
@@ -33,14 +39,15 @@ export class DropiDropdown {
         else {
             this.selected = [...this.selected, opt];
         }
-        this.dropiChange.emit(this.selected);
+        this.modelChange.emit(this.selected);
     }
     render() {
-        return (h("div", { key: '7c8505a82b836b58ea73603249ed2143b0692fc2', class: "dropdown", style: { '--dropdown-height': this.height } }, this.parsedOptions.map((opt, i) => {
+        const containerClass = this.isInSelect ? 'container-dropi-dropdown-select' : 'container-dropi-dropdown';
+        const customHeight = this.height || '388px';
+        return (h("div", { key: 'c8f5eab8347e089f92ff494ebacf9c3d92e86493', class: containerClass, style: { '--custom-height': customHeight } }, this.parsedOptions.map((opt, i) => {
             const label = opt[this.valueModel] ?? String(opt);
-            const imgUrl = this.imageModel ? opt[this.imageModel] : '';
-            const active = this.isSelected(opt);
-            return (h("div", { class: { 'dropdown__item': true, 'dropdown__item--active': active }, key: i, onClick: () => this.toggleOption(opt) }, h("dropi-checkbox", { checked: active }), imgUrl && (h("img", { class: "dropdown__avatar", src: imgUrl, alt: label })), h("span", { class: "dropdown__label" }, label)));
+            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))));
         })));
     }
     static get is() { return "dropi-dropdown"; }
@@ -95,7 +102,7 @@ export class DropiDropdown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Property name to display as the option label"
+                    "text": "Property name for the label"
                 },
                 "getter": false,
                 "setter": false,
@@ -103,7 +110,7 @@ export class DropiDropdown {
                 "attribute": "value-model",
                 "defaultValue": "'name'"
             },
-            "imageModel": {
+            "height": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -115,33 +122,51 @@ export class DropiDropdown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Property name to use as the option image/avatar URL"
+                    "text": "Height of the dropdown (CSS value)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "image-model",
+                "attribute": "height",
                 "defaultValue": "''"
             },
-            "height": {
-                "type": "string",
+            "isInSelect": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Max height of the list container (CSS value)"
+                    "text": "Whether the dropdown is inside a select component"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "height",
-                "defaultValue": "'300px'"
+                "attribute": "is-in-select",
+                "defaultValue": "false"
+            },
+            "parameters": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{\n    type: 'checkbox';\n    icon: string;\n    iconCurrier: boolean;\n  }",
+                    "resolved": "{ type: \"checkbox\"; icon: string; iconCurrier: boolean; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Configuration parameters for the dropdown items"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{\n    type: 'checkbox',\n    icon: '',\n    iconCurrier: false,\n  }"
             }
         };
     }
@@ -153,14 +178,14 @@ export class DropiDropdown {
     }
     static get events() {
         return [{
-                "method": "dropiChange",
-                "name": "dropiChange",
+                "method": "modelChange",
+                "name": "modelChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when selection changes. e.detail = selected items array"
+                    "text": "Emitted when selection changes \u2014 matches Angular 'modelChange'"
                 },
                 "complexType": {
                     "original": "DropdownOption[]",

package/dist/collection/components/dropi-empty-state/dropi-empty-state.js

@@ -4,28 +4,26 @@ import { h } from "@stencil/core";
  * Empty state illustration with title, description and optional action button.
  */
 export class DropiEmptyState {
-    /** Title text */
-    header = '';
+    /** Title text (matches Angular 'title') */
+    title = '';
     /** Description text */
     description = '';
     /** URL of the illustration image */
     imageUrl = '';
     /** Alt text for the image */
     imageAlt = 'Sin resultados';
-    /** Primary action button label (empty = hidden) */
-    actionLabel = '';
-    /** State of the illustration (default, loading, sorry, love, success, error) */
-    iconState = 'default';
-    /** Secondary action button label (empty = hidden) */
-    secondaryLabel = '';
-    /** Severity for the action buttons */
-    actionSeverity = 'tertiary';
-    /** Emitted when primary action button is clicked */
-    dropiAction;
-    /** Emitted when secondary action button is clicked */
-    dropiSecondaryAction;
+    /** Primary action button label (empty = hidden) — matches Angular 'buttonText' */
+    buttonText = '';
+    /** Icon name for button — matches Angular 'buttonIcon' */
+    buttonIcon = '';
+    /** State of the illustration (default, loading, sorry, love, success, error) — matches Angular 'dropiIcon' */
+    dropiIcon = 'default';
+    /** Severity for the action button — matches Angular 'buttonSeverity' */
+    buttonSeverity = 'tertiary';
+    /** Emitted when button is clicked — matches Angular 'buttonClickEvent' */
+    buttonClickEvent;
     render() {
-        return (h("div", { key: 'a4aec0618cd8a0900c4d5e82528a86d30c027669', class: "empty-state" }, h("div", { key: '80565c251e85146d824c640cbce4602d509311bb', class: "empty-state-visual" }, this.imageUrl ? (h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (h("img", { class: "empty-state-img", src: `assets/icons/ilustration/${this.iconState}.svg`, alt: this.imageAlt, onError: (e) => e.target.src = 'assets/icons/ilustration/default.svg' }))), this.header && h("h3", { key: '9cd0fc5aac1aeb089f1ef4c46291c9ad5d630d9c', class: "empty-state-title" }, this.header), this.description && h("p", { key: '4f2fd55693d6376a7d782a8df5d71c33fa8ea523', class: "empty-state-description" }, this.description), h("slot", { key: 'a48aa738f9f9a3a2c1f62d86e36010f2eb6c9b06' }), (this.actionLabel || this.secondaryLabel) && (h("div", { key: 'dd2978b2422d1382461eaba5c92eba37817ddb61', class: "empty-state-actions" }, this.secondaryLabel && (h("dropi-button", { key: 'b2d76dd6da170d8af85384ffbe800a4789ea96d9', text: this.secondaryLabel, severity: "secondary", onDropiClick: () => this.dropiSecondaryAction.emit() })), this.actionLabel && (h("dropi-button", { key: '68efcbb4c4069302839501c74affc6d43f7d4c6b', text: this.actionLabel, severity: this.actionSeverity, onDropiClick: () => this.dropiAction.emit() }))))));
+        return (h("div", { key: '504b4ac16374bc3d54ab02a0729d867508dee0ba', class: "empty-state" }, h("div", { key: '11cbef9d7a1d57bffa68ef4d055c29453c9d050b', class: "empty-state-visual" }, this.imageUrl ? (h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (h("img", { class: "empty-state-img", src: `assets/icons/ilustration/${this.dropiIcon}.svg`, alt: this.imageAlt, onError: (e) => e.target.src = 'assets/icons/ilustration/default.svg' }))), this.title && h("h3", { key: '398a1e5958e1008875391053a82f77db586aaad8', class: "empty-state-title" }, this.title), this.description && h("p", { key: 'a51b76390add2ffbfcdf5288a1daf8a872c1bfc0', class: "empty-state-description" }, this.description), h("slot", { key: '1024f4efdc69ed513384b8b0082bb9915673e724' }), this.buttonText && (h("div", { key: '6706d58d3380e7c6668c8b465d19249cd24cd7f8', class: "empty-state-actions" }, h("dropi-button", { key: '4440e6ca851d27b84cab67ee24466be0a89e8e9e', text: this.buttonText, preIcon: this.buttonIcon, severity: this.buttonSeverity, onClick: () => this.buttonClickEvent.emit() })))));
     }
     static get is() { return "dropi-empty-state"; }
     static get encapsulation() { return "shadow"; }
@@ -41,7 +39,7 @@ export class DropiEmptyState {
     }
     static get properties() {
         return {
-            "header": {
+            "title": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -53,12 +51,12 @@ export class DropiEmptyState {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Title text"
+                    "text": "Title text (matches Angular 'title')"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "header",
+                "attribute": "title",
                 "defaultValue": "''"
             },
             "description": {
@@ -121,7 +119,7 @@ export class DropiEmptyState {
                 "attribute": "image-alt",
                 "defaultValue": "'Sin resultados'"
             },
-            "actionLabel": {
+            "buttonText": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -133,55 +131,55 @@ export class DropiEmptyState {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Primary action button label (empty = hidden)"
+                    "text": "Primary action button label (empty = hidden) \u2014 matches Angular 'buttonText'"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "action-label",
+                "attribute": "button-text",
                 "defaultValue": "''"
             },
-            "iconState": {
+            "buttonIcon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'loading' | 'sorry' | 'love' | 'success' | 'error' | 'warning' | 'info'",
-                    "resolved": "\"default\" | \"error\" | \"info\" | \"loading\" | \"love\" | \"sorry\" | \"success\" | \"warning\"",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "State of the illustration (default, loading, sorry, love, success, error)"
+                    "text": "Icon name for button \u2014 matches Angular 'buttonIcon'"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "icon-state",
-                "defaultValue": "'default'"
+                "attribute": "button-icon",
+                "defaultValue": "''"
             },
-            "secondaryLabel": {
+            "dropiIcon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "'default' | 'loading' | 'sorry' | 'love' | 'success' | 'error' | 'warning' | 'info'",
+                    "resolved": "\"default\" | \"error\" | \"info\" | \"loading\" | \"love\" | \"sorry\" | \"success\" | \"warning\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Secondary action button label (empty = hidden)"
+                    "text": "State of the illustration (default, loading, sorry, love, success, error) \u2014 matches Angular 'dropiIcon'"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "secondary-label",
-                "defaultValue": "''"
+                "attribute": "dropi-icon",
+                "defaultValue": "'default'"
             },
-            "actionSeverity": {
+            "buttonSeverity": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -193,41 +191,26 @@ export class DropiEmptyState {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Severity for the action buttons"
+                    "text": "Severity for the action button \u2014 matches Angular 'buttonSeverity'"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "action-severity",
+                "attribute": "button-severity",
                 "defaultValue": "'tertiary'"
             }
         };
     }
     static get events() {
         return [{
-                "method": "dropiAction",
-                "name": "dropiAction",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when primary action button is clicked"
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "dropiSecondaryAction",
-                "name": "dropiSecondaryAction",
+                "method": "buttonClickEvent",
+                "name": "buttonClickEvent",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when secondary action button is clicked"
+                    "text": "Emitted when button is clicked \u2014 matches Angular 'buttonClickEvent'"
                 },
                 "complexType": {
                     "original": "void",

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

@@ -7,14 +7,14 @@ export class DropiFavoriteButton {
     /** Whether the item is currently marked as favorite */
     isFavorite = false;
     /** Emitted when toggled. e.detail = new favorite state */
-    dropiToggleFavorite;
+    toggleFavorite;
     hovered = false;
     toggle() {
         this.isFavorite = !this.isFavorite;
-        this.dropiToggleFavorite.emit(this.isFavorite);
+        this.toggleFavorite.emit(this.isFavorite);
     }
     render() {
-        return (h("button", { key: '1911efe67d8e0ab2f7531e01a844880054fdf693', class: { 'fav-btn': true, 'fav-btn--active': this.isFavorite }, onClick: () => this.toggle(), onMouseEnter: () => this.hovered = true, onMouseLeave: () => this.hovered = false, "aria-label": this.isFavorite ? 'Quitar de favoritos' : 'Agregar a favoritos', "aria-pressed": String(this.isFavorite) }, h("dropi-icon", { key: 'be817f295f9e3e36ca86027f487781f07ae1561d', name: this.isFavorite || this.hovered ? 'Heart-solid' : 'Heart', width: "19px", height: "19px", color: this.isFavorite || this.hovered ? 'Primary-Primary-500' : 'Gray-Gray-800' })));
+        return (h("button", { key: '21002e383cadf61f37b072cdfeca50f9957d520e', class: { 'fav-btn': true, 'fav-btn--active': this.isFavorite }, onClick: () => this.toggle(), onMouseEnter: () => this.hovered = true, onMouseLeave: () => this.hovered = false, "aria-label": this.isFavorite ? 'Quitar de favoritos' : 'Agregar a favoritos', "aria-pressed": String(this.isFavorite) }, h("dropi-icon", { key: '5eab1ea853bc5d4b47543bfd2bdf4d45c949a47a', name: this.isFavorite || this.hovered ? 'Heart-solid' : 'Heart', width: "19px", height: "19px", color: this.isFavorite || this.hovered ? 'Primary-Primary-500' : 'Gray-Gray-800' })));
     }
     static get is() { return "dropi-favorite-button"; }
     static get encapsulation() { return "shadow"; }
@@ -59,8 +59,8 @@ export class DropiFavoriteButton {
     }
     static get events() {
         return [{
-                "method": "dropiToggleFavorite",
-                "name": "dropiToggleFavorite",
+                "method": "toggleFavorite",
+                "name": "toggleFavorite",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,