@dropi/ui 0.1.19 → 0.1.20

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

@@ -0,0 +1,198 @@
+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.
+ */
+export class DropiDrawer {
+    /** Controls visibility */
+    open = false;
+    /** Side from which the drawer slides in */
+    position = 'right';
+    /** Drawer title */
+    drawerTitle = '';
+    /** Width (for left/right drawers) */
+    width = '400px';
+    /** Height (for top/bottom drawers) */
+    height = '50vh';
+    /** Close on backdrop click */
+    closeOnBackdrop = true;
+    /** Emitted when drawer closes */
+    dropiClose;
+    openChanged(val) {
+        if (typeof document !== 'undefined') {
+            document.body.style.overflow = val ? 'hidden' : '';
+        }
+    }
+    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: () => {
+                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" })))));
+    }
+    static get is() { return "dropi-drawer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-drawer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-drawer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls visibility"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right' | 'top' | 'bottom'",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Side from which the drawer slides in"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'right'"
+            },
+            "drawerTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Drawer title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "drawer-title",
+                "defaultValue": "''"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width (for left/right drawers)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'400px'"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height (for top/bottom drawers)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "'50vh'"
+            },
+            "closeOnBackdrop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Close on backdrop click"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-backdrop",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiClose",
+                "name": "dropiClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when drawer closes"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "openChanged"
+            }];
+    }
+}

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

@@ -36,7 +36,7 @@ export class DropiDropdown {
         this.dropiChange.emit(this.selected);
     }
     render() {
-        return (h("div", { key: 'e9b2fe1b667a4d83c0d142ff9ba8187d848f606d', class: "dropdown", style: { '--dropdown-height': this.height } }, this.parsedOptions.map((opt, i) => {
+        return (h("div", { key: '7c8505a82b836b58ea73603249ed2143b0692fc2', class: "dropdown", style: { '--dropdown-height': this.height } }, this.parsedOptions.map((opt, i) => {
             const label = opt[this.valueModel] ?? String(opt);
             const imgUrl = this.imageModel ? opt[this.imageModel] : '';
             const active = this.isSelected(opt);

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

@@ -19,6 +19,7 @@
   width: 100%;
   height: auto;
   object-fit: contain;
+  filter: brightness(0) saturate(100%) invert(73%) sepia(9%) saturate(503%) hue-rotate(187deg) brightness(91%) contrast(88%);
 }
 
 .empty-state-svg {

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

@@ -14,14 +14,18 @@ export class DropiEmptyState {
     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;
     render() {
-        return (h("div", { key: '7c393f2a56387d573162068576809a6f6a975a34', class: "empty-state" }, this.imageUrl ? (h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (h("div", { class: "empty-state-placeholder" }, h("svg", { viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "empty-state-svg" }, h("rect", { width: "80", height: "80", rx: "40", fill: "var(--Gray-Gray-100, #e6eaf2)" }), h("path", { d: "M40 20C29 20 20 29 20 40s9 20 20 20 20-9 20-20S51 20 40 20zm0 36c-8.8 0-16-7.2-16-16S31.2 24 40 24s16 7.2 16 16-7.2 16-16 16zm-1-28h2v12h-2zm0 14h2v2h-2z", fill: "var(--Gray-Gray-400, #858ea6)" })))), this.header && h("h3", { key: 'd1fbe8d995e295cb4a72064745e7b521b35bbad6', class: "empty-state-title" }, this.header), this.description && h("p", { key: '948e6bcb6e07fab09261e6f68d658bf1faf17c8e', class: "empty-state-description" }, this.description), h("slot", { key: '8663d0a1e2df4ee914a25a0bda27e5f2ee41a941' }), (this.actionLabel || this.secondaryLabel) && (h("div", { key: 'af582b6316e8ebf2700589b55deef1fe8fbf08f2', class: "empty-state-actions" }, this.secondaryLabel && (h("dropi-button", { key: '1e69d9a9143708157a20dba1179498bd01203af2', text: this.secondaryLabel, severity: "secondary", onDropiClick: () => this.dropiSecondaryAction.emit() })), this.actionLabel && (h("dropi-button", { key: '3850ddf4716b2732bb21ee9fa731e90022b2ecd2', text: this.actionLabel, severity: "primary", onDropiClick: () => this.dropiAction.emit() }))))));
+        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() }))))));
     }
     static get is() { return "dropi-empty-state"; }
     static get encapsulation() { return "shadow"; }
@@ -137,6 +141,26 @@ export class DropiEmptyState {
                 "attribute": "action-label",
                 "defaultValue": "''"
             },
+            "iconState": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "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": "State of the illustration (default, loading, sorry, love, success, error)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-state",
+                "defaultValue": "'default'"
+            },
             "secondaryLabel": {
                 "type": "string",
                 "mutable": false,
@@ -156,6 +180,26 @@ export class DropiEmptyState {
                 "reflect": false,
                 "attribute": "secondary-label",
                 "defaultValue": "''"
+            },
+            "actionSeverity": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'tertiary'",
+                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Severity for the action buttons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action-severity",
+                "defaultValue": "'tertiary'"
             }
         };
     }

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

@@ -14,7 +14,7 @@ export class DropiFavoriteButton {
         this.dropiToggleFavorite.emit(this.isFavorite);
     }
     render() {
-        return (h("button", { key: '3920b723683dc337ebe5aedc473414c9ed27a593', 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: '60748aaafd0a183e175fd84c5d44313a0254ed5e', 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: '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' })));
     }
     static get is() { return "dropi-favorite-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-file-upload/dropi-file-upload.css

@@ -0,0 +1,66 @@
+:host { display: block; width: 100%; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.upload-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Size-1, 4px);
+}
+
+.upload-label {
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-600, #475066);
+}
+
+.upload-zone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--Size-2, 8px);
+  padding: var(--Size-6, 32px) var(--Size-4, 16px);
+  border: 2px dashed var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  background: var(--Neutral-White, #fff);
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s;
+  text-align: center;
+}
+
+.upload-zone:hover:not(.upload-zone--disabled) {
+  border-color: var(--Primary-Primary-500, #f49a3d);
+  background: var(--Primary-Primary-50, #fff5eb);
+}
+
+.upload-zone--dragging {
+  border-color: var(--Primary-Primary-500, #f49a3d);
+  background: var(--Primary-Primary-50, #fff5eb);
+}
+
+.upload-zone--disabled {
+  background: var(--Gray-Gray-50, #f7f8fa);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.upload-zone__text {
+  margin: 0;
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-700, #32394d);
+}
+
+.upload-zone__hint {
+  margin: 0;
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-400, #858ea6);
+}
+
+.upload-hidden {
+  display: none;
+}
+
+.upload-error {
+  margin: 0;
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Error-Error-500, #f46a6b);
+}

package/dist/collection/components/dropi-file-upload/dropi-file-upload.js

@@ -0,0 +1,257 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-file-upload
+ * Drag-and-drop file upload zone with file type/size validation.
+ * Emits selected files as UploadedFile objects.
+ */
+export class DropiFileUpload {
+    /** Accepted MIME types (comma-separated, e.g. "image/*,application/pdf") */
+    accept = '';
+    /** Allow multiple file selection */
+    multiple = false;
+    /** Max file size in MB */
+    maxSizeMb = 10;
+    /** Disabled state */
+    disabled = false;
+    /** Label text above zone */
+    label = '';
+    /** Helper text inside drop zone */
+    helperText = 'Arrastra o haz clic para subir un archivo';
+    dragging = false;
+    errors = [];
+    inputRef;
+    /** Emitted with array of UploadedFile when files are selected/dropped */
+    dropiFilesSelected;
+    /** Emitted when a file fails validation. e.detail = error message */
+    dropiFileError;
+    async readFiles(fileList) {
+        const errs = [];
+        const valid = [];
+        for (let i = 0; i < fileList.length; i++) {
+            const file = fileList[i];
+            if (this.maxSizeMb && file.size > this.maxSizeMb * 1024 * 1024) {
+                const msg = `"${file.name}" supera el tamaño máximo de ${this.maxSizeMb} MB`;
+                errs.push(msg);
+                this.dropiFileError.emit(msg);
+                continue;
+            }
+            const dataUrl = await new Promise((resolve) => {
+                const reader = new FileReader();
+                reader.onload = () => resolve(reader.result);
+                reader.readAsDataURL(file);
+            });
+            valid.push({ name: file.name, size: file.size, type: file.type, dataUrl });
+        }
+        this.errors = errs;
+        if (valid.length)
+            this.dropiFilesSelected.emit(valid);
+    }
+    handleDrop(e) {
+        e.preventDefault();
+        this.dragging = false;
+        if (this.disabled || !e.dataTransfer?.files.length)
+            return;
+        this.readFiles(e.dataTransfer.files);
+    }
+    handleInputChange(e) {
+        const input = e.target;
+        if (input.files?.length)
+            this.readFiles(input.files);
+        input.value = '';
+    }
+    render() {
+        return (h("div", { key: '5498c6aa5d81a5265bf4e954e7674f4db8c5c538', class: "upload-wrap" }, this.label && h("label", { key: '94cd8bcaf7dba51e9d7861412d6a509841518367', class: "upload-label" }, this.label), h("div", { key: 'c3b5417103abab569b8a883967d567a4ec6ab483', class: {
+                'upload-zone': true,
+                'upload-zone--dragging': this.dragging,
+                'upload-zone--disabled': this.disabled,
+            }, onClick: () => {
+                if (!this.disabled)
+                    this.inputRef.click();
+            }, onDragOver: (e) => {
+                e.preventDefault();
+                if (!this.disabled)
+                    this.dragging = true;
+            }, onDragLeave: () => this.dragging = false, onDrop: (e) => this.handleDrop(e) }, h("dropi-icon", { key: '436802ec23dc677807ecac36947cd58f9d253e4d', name: "Upload", width: "32px", height: "32px", color: "Primary-Primary-500" }), h("p", { key: 'c80ed3536466ae22dcd96fabf353a736515e5bab', class: "upload-zone__text" }, this.helperText), this.maxSizeMb && (h("p", { key: '26defe6cece9a9ba6e9d7e2a1913a65607a20036', class: "upload-zone__hint" }, "Tama\u00F1o m\u00E1ximo: ", this.maxSizeMb, " MB")), h("input", { key: '00f7657bfc1646f01dfbc0339df6ed9f04a71ab0', ref: (el) => this.inputRef = el, type: "file", accept: this.accept, multiple: this.multiple, class: "upload-hidden", onChange: (e) => this.handleInputChange(e) })), this.errors.map(err => (h("p", { class: "upload-error" }, err)))));
+    }
+    static get is() { return "dropi-file-upload"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-file-upload.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-file-upload.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "accept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accepted MIME types (comma-separated, e.g. \"image/*,application/pdf\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accept",
+                "defaultValue": "''"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow multiple file selection"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "maxSizeMb": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max file size in MB"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-size-mb",
+                "defaultValue": "10"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text above zone"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text inside drop zone"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text",
+                "defaultValue": "'Arrastra o haz clic para subir un archivo'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "dragging": {},
+            "errors": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiFilesSelected",
+                "name": "dropiFilesSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted with array of UploadedFile when files are selected/dropped"
+                },
+                "complexType": {
+                    "original": "UploadedFile[]",
+                    "resolved": "UploadedFile[]",
+                    "references": {
+                        "UploadedFile": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-file-upload/dropi-file-upload.tsx",
+                            "id": "src/components/dropi-file-upload/dropi-file-upload.tsx::UploadedFile"
+                        }
+                    }
+                }
+            }, {
+                "method": "dropiFileError",
+                "name": "dropiFileError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a file fails validation. e.detail = error message"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}