@dropi/ui 0.1.20 → 0.1.22

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

@@ -2,38 +2,64 @@ 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' : '';
+            if (val)
+                document.body.classList.add('dropi-modal-open');
+            else
+                document.body.classList.remove('dropi-modal-open');
         }
     }
+    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: '7792ce8e001adf404aef387e35c5fb601f69b1e2', class: { 'drawer-host': true, 'drawer-host--open': this.open } }, h("div", { key: '186c33be6a7cd1e34e6d1f852219be91b24a15b9', 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: '3a48c465707125c2de1e369e70375689fe5ff9c1', class: `drawer-panel drawer-panel--${this.position}${sizeClass ? ' ' + sizeClass : ''}`, style: panelStyle, role: "dialog", "aria-modal": "true" }, h("div", { key: '840bb2933bc7e2264269bbadd5d9d61649fe58fe', class: { 'drawer-header': true, 'drawer-header--headless': this.headless } }, h("h3", { key: 'bfd9c7db02e9db07ce32115ca6386a9840c61288', class: "drawer-header__title" }, this.drawerTitle), h("button", { key: '6dc350e26f74d4e3aead7697bd2f5552e49e833c', class: "drawer-header__close", onClick: () => this.close(), "aria-label": "Cerrar" }, h("dropi-icon", { key: 'fcc5331391009f97254db5f729c61631edc33d8c', name: "Close-small", width: "32px", height: "32px", color: "Gray-Gray-400" }))), h("div", { key: 'e50ae31043bde759a79fbc9b4f734e06dc6c2a3f', class: "drawer-body" }, h("slot", { key: 'f1f0d7314b8bd7f6fd6fdec88a818963c1d5834f' })), h("div", { key: 'b14833f885757bbcfa687b7b2ee1cf847301134b', class: "drawer-footer" }, h("slot", { key: '5cba1759160a934c3b54166914a10b1335075151', name: "footer" })))));
     }
     static get is() { return "dropi-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -49,12 +75,52 @@ 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": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "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",
+                "type": "any",
                 "mutable": true,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 },
                 "required": false,
@@ -89,24 +155,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 +187,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 +207,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 +215,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 +279,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 || []);
     }
@@ -24,7 +30,7 @@ export class DropiDropdown {
         this.optionsChanged(this.options);
     }
     isSelected(opt) {
-        return this.selected.some(s => JSON.stringify(s) === JSON.stringify(opt));
+        return (this.selected ?? []).some(s => JSON.stringify(s) === JSON.stringify(opt));
     }
     toggleOption(opt) {
         if (this.isSelected(opt)) {
@@ -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: '274caba83e2f697257e3803b85517a31d4f0aea8', 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: '1b7c0fd20a119ae17ee09f7c68b7ae2b4e77ee98', class: "empty-state" }, h("div", { key: 'cb4fd9dc6a8b491359fd9cd8b6983e68f64af994', 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 || String(this.dropiIcon) === 'undefined' || String(this.dropiIcon) === 'null') ? 'default' : this.dropiIcon}.svg`, alt: this.imageAlt, onError: (e) => e.target.src = 'assets/icons/ilustration/default.svg' }))), this.title && h("h3", { key: '14c09482953e39975c74ca454df3131e3233a712', class: "empty-state-title" }, this.title), this.description && h("p", { key: '5fccb02b2b21d8895c5b122aa0fb6684fc9d7611', class: "empty-state-description" }, this.description), h("slot", { key: '6e53d450b4dbb8cff81addd3e7fc528c599bf730' }), this.buttonText && (h("div", { key: '4325f23a357c43b970dce907a63f24b63b10070e', class: "empty-state-actions" }, h("dropi-button", { key: 'a475b2fec4e00343fa4b4fa29ac08d5564e4e21a', 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: '07acf3b1f81e69ddea79672fd4853ad575b4d2af', 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: 'fcf3cc2b3b107eb43c6a83a9d6dc6cbff7ee202f', 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,