huibo-ui 0.3.0

package/dist/collection/components/Upload/Upload.js

@@ -0,0 +1,504 @@
+import { h } from "@stencil/core";
+export class Upload {
+    /** 上传地址。设置后启用自动上传；未设置时文件以 ready 状态抛出，由消费方自行上传 */
+    action;
+    /** 多选 */
+    multiple = false;
+    /** 接受的文件类型 */
+    accept;
+    /** 是否禁用 */
+    disabled = false;
+    /** 最大上传数量 */
+    limit;
+    /** 是否拖拽上传 */
+    drag = false;
+    /** 上传字段名 */
+    name = 'file';
+    /** 额外的请求头 */
+    headers;
+    /** 额外的表单数据 */
+    data;
+    /** 是否携带凭证（cookie） */
+    withCredentials = false;
+    /** 上传前钩子，返回 false / Promise<false> 则取消上传 */
+    beforeUpload;
+    fileList = [];
+    isDragover = false;
+    hbChange;
+    hbSuccess;
+    hbError;
+    inputRef;
+    handleClick = () => {
+        if (!this.disabled)
+            this.inputRef?.click();
+    };
+    handleChange = (e) => {
+        const target = e.target;
+        if (target.files)
+            this.handleFiles(target.files);
+        target.value = '';
+    };
+    handleFiles = async (files) => {
+        for (let i = 0; i < files.length; i++) {
+            if (this.limit && this.fileList.length >= this.limit)
+                break;
+            const file = files[i];
+            if (this.beforeUpload) {
+                try {
+                    const ok = await this.beforeUpload(file);
+                    if (!ok)
+                        continue;
+                }
+                catch {
+                    continue;
+                }
+            }
+            const uf = {
+                name: file.name,
+                size: file.size,
+                type: file.type,
+                status: this.action ? 'uploading' : 'ready',
+                progress: 0,
+            };
+            this.fileList = [...this.fileList, uf];
+            this.hbChange.emit(this.fileList);
+            if (this.action) {
+                this.realUpload(file, uf);
+            }
+        }
+    };
+    /** 真实上传：FormData + XHR，带进度回调 */
+    realUpload = (file, uf) => {
+        const xhr = new XMLHttpRequest();
+        const formData = new FormData();
+        formData.append(this.name, file);
+        if (this.data) {
+            Object.entries(this.data).forEach(([k, v]) => formData.append(k, v));
+        }
+        xhr.upload.onprogress = (e) => {
+            if (e.lengthComputable) {
+                uf.progress = Math.round((e.loaded / e.total) * 100);
+                this.fileList = [...this.fileList];
+            }
+        };
+        xhr.onload = () => {
+            if (xhr.status >= 200 && xhr.status < 300) {
+                uf.status = 'success';
+                uf.response = this.parseResponse(xhr.response);
+                this.fileList = [...this.fileList];
+                this.hbSuccess.emit(uf);
+            }
+            else {
+                uf.status = 'error';
+                this.fileList = [...this.fileList];
+                this.hbError.emit(uf);
+            }
+        };
+        xhr.onerror = () => {
+            uf.status = 'error';
+            this.fileList = [...this.fileList];
+            this.hbError.emit(uf);
+        };
+        xhr.open('POST', this.action, true);
+        xhr.withCredentials = this.withCredentials;
+        if (this.headers) {
+            Object.entries(this.headers).forEach(([k, v]) => xhr.setRequestHeader(k, v));
+        }
+        xhr.send(formData);
+    };
+    parseResponse(raw) {
+        if (typeof raw !== 'string')
+            return raw;
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return raw;
+        }
+    }
+    handleRemove = (index) => {
+        const next = [...this.fileList];
+        next.splice(index, 1);
+        this.fileList = next;
+        this.hbChange.emit(next);
+    };
+    handleDrop = (e) => {
+        e.preventDefault();
+        this.isDragover = false;
+        if (e.dataTransfer?.files)
+            this.handleFiles(e.dataTransfer.files);
+    };
+    handleDragOver = (e) => {
+        e.preventDefault();
+        this.isDragover = true;
+    };
+    handleDragLeave = () => {
+        this.isDragover = false;
+    };
+    formatSize(bytes) {
+        if (bytes < 1024)
+            return bytes + ' B';
+        if (bytes < 1024 * 1024)
+            return (bytes / 1024).toFixed(1) + ' KB';
+        return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+    }
+    renderStatus(file) {
+        if (file.status === 'uploading') {
+            return h("span", { class: "hb-upload__item-progress" }, typeof file.progress === 'number' ? `${file.progress}%` : '');
+        }
+        if (file.status === 'success')
+            return h("span", { class: "hb-upload__item-status hb-upload__item-status--success" }, "\u2713");
+        if (file.status === 'error')
+            return h("span", { class: "hb-upload__item-status hb-upload__item-status--error" }, "\u2715");
+        return null;
+    }
+    render() {
+        return (h("div", { key: 'a83f9b8d0fd3a0cc618ff33bea2fd35d96b32071', class: "hb-upload" }, h("div", { key: '42f8ae299086ace94524529980d2acdff0abeb16', class: {
+                'hb-upload__trigger': true,
+                'hb-upload__trigger--drag': this.drag,
+                'hb-upload__trigger--dragover': this.isDragover,
+                'hb-upload__trigger--disabled': this.disabled,
+            }, onClick: this.handleClick, onDrop: this.drag ? this.handleDrop : undefined, onDragOver: this.drag ? this.handleDragOver : undefined, onDragLeave: this.drag ? this.handleDragLeave : undefined }, this.drag ? h("span", null, "\u5C06\u6587\u4EF6\u62D6\u5230\u6B64\u5904\uFF0C\u6216\u70B9\u51FB\u4E0A\u4F20") : h("slot", null, h("button", { type: "button", class: "hb-upload__btn" }, "\u70B9\u51FB\u4E0A\u4F20"))), h("input", { key: '65a98112cda506b0244451b6ca7b00a200306e00', type: "file", ref: (el) => {
+                this.inputRef = el;
+            }, multiple: this.multiple, accept: this.accept, disabled: this.disabled, style: { display: 'none' }, onChange: this.handleChange }), this.fileList.length > 0 && (h("ul", { key: 'e8f768dc92d273dc81a7a62f08eefd1c3f185251', class: "hb-upload__list" }, this.fileList.map((file, i) => (h("li", { class: { 'hb-upload__item': true, [`hb-upload__item--${file.status}`]: true } }, h("span", { class: "hb-upload__item-name" }, file.name), h("span", { class: "hb-upload__item-size" }, this.formatSize(file.size)), this.renderStatus(file), h("span", { class: "hb-upload__item-remove", onClick: () => this.handleRemove(i) }, "\u00D7"))))))));
+    }
+    static get is() { return "hb-upload"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["upload.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["upload.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "action": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u4E0A\u4F20\u5730\u5740\u3002\u8BBE\u7F6E\u540E\u542F\u7528\u81EA\u52A8\u4E0A\u4F20\uFF1B\u672A\u8BBE\u7F6E\u65F6\u6587\u4EF6\u4EE5 ready \u72B6\u6001\u629B\u51FA\uFF0C\u7531\u6D88\u8D39\u65B9\u81EA\u884C\u4E0A\u4F20"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "action",
+                "reflect": false
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u591A\u9009"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "multiple",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "accept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u63A5\u53D7\u7684\u6587\u4EF6\u7C7B\u578B"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "accept",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u7981\u7528"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "limit": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6700\u5927\u4E0A\u4F20\u6570\u91CF"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "limit",
+                "reflect": false
+            },
+            "drag": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u62D6\u62FD\u4E0A\u4F20"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "drag",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u4E0A\u4F20\u5B57\u6BB5\u540D"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "'file'"
+            },
+            "headers": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, string>",
+                    "resolved": "{ [x: string]: string; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u989D\u5916\u7684\u8BF7\u6C42\u5934"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, string>",
+                    "resolved": "{ [x: string]: string; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u989D\u5916\u7684\u8868\u5355\u6570\u636E"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "withCredentials": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u643A\u5E26\u51ED\u8BC1\uFF08cookie\uFF09"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "with-credentials",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "beforeUpload": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(file: File) => boolean | Promise<boolean>",
+                    "resolved": "(file: File) => boolean | Promise<boolean>",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        },
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u4E0A\u4F20\u524D\u94A9\u5B50\uFF0C\u8FD4\u56DE false / Promise<false> \u5219\u53D6\u6D88\u4E0A\u4F20"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "fileList": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "UploadFile[]",
+                    "resolved": "UploadFile[]",
+                    "references": {
+                        "UploadFile": {
+                            "location": "local",
+                            "path": "/Users/vscoderwhy/Desktop/product/web-common/huibo-ui/src/components/Upload/Upload.tsx",
+                            "id": "src/components/Upload/Upload.tsx::UploadFile"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isDragover": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hbChange",
+                "name": "hbChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "UploadFile[]",
+                    "resolved": "UploadFile[]",
+                    "references": {
+                        "UploadFile": {
+                            "location": "local",
+                            "path": "/Users/vscoderwhy/Desktop/product/web-common/huibo-ui/src/components/Upload/Upload.tsx",
+                            "id": "src/components/Upload/Upload.tsx::UploadFile"
+                        }
+                    }
+                }
+            }, {
+                "method": "hbSuccess",
+                "name": "hbSuccess",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "UploadFile",
+                    "resolved": "UploadFile",
+                    "references": {
+                        "UploadFile": {
+                            "location": "local",
+                            "path": "/Users/vscoderwhy/Desktop/product/web-common/huibo-ui/src/components/Upload/Upload.tsx",
+                            "id": "src/components/Upload/Upload.tsx::UploadFile"
+                        }
+                    }
+                }
+            }, {
+                "method": "hbError",
+                "name": "hbError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "UploadFile",
+                    "resolved": "UploadFile",
+                    "references": {
+                        "UploadFile": {
+                            "location": "local",
+                            "path": "/Users/vscoderwhy/Desktop/product/web-common/huibo-ui/src/components/Upload/Upload.tsx",
+                            "id": "src/components/Upload/Upload.tsx::UploadFile"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=Upload.js.map

package/dist/collection/components/Upload/Upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Upload.js","sourceRoot":"","sources":["../../../src/components/Upload/Upload.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\nexport interface UploadFile {\n  name: string;\n  size: number;\n  type: string;\n  url?: string;\n  status: 'ready' | 'uploading' | 'success' | 'error';\n  /** 上传进度（0-100），仅 uploading 阶段有意义 */\n  progress?: number;\n  /** 服务端响应体（成功时） */\n  response?: any;\n}\n\n@Component({ tag: 'hb-upload', styleUrl: 'upload.css', shadow: true })\nexport class Upload {\n  /** 上传地址。设置后启用自动上传；未设置时文件以 ready 状态抛出，由消费方自行上传 */\n  @Prop() action?: string;\n\n  /** 多选 */\n  @Prop() multiple: boolean = false;\n\n  /** 接受的文件类型 */\n  @Prop() accept?: string;\n\n  /** 是否禁用 */\n  @Prop() disabled: boolean = false;\n\n  /** 最大上传数量 */\n  @Prop() limit?: number;\n\n  /** 是否拖拽上传 */\n  @Prop() drag: boolean = false;\n\n  /** 上传字段名 */\n  @Prop() name: string = 'file';\n\n  /** 额外的请求头 */\n  @Prop() headers?: Record<string, string>;\n\n  /** 额外的表单数据 */\n  @Prop() data?: Record<string, string>;\n\n  /** 是否携带凭证（cookie） */\n  @Prop() withCredentials: boolean = false;\n\n  /** 上传前钩子，返回 false / Promise<false> 则取消上传 */\n  @Prop() beforeUpload?: (file: File) => boolean | Promise<boolean>;\n\n  @Prop({ mutable: true }) fileList: UploadFile[] = [];\n\n  @State() isDragover: boolean = false;\n\n  @Event() hbChange: EventEmitter<UploadFile[]>;\n  @Event() hbSuccess: EventEmitter<UploadFile>;\n  @Event() hbError: EventEmitter<UploadFile>;\n\n  private inputRef?: HTMLInputElement;\n\n  private handleClick = () => {\n    if (!this.disabled) this.inputRef?.click();\n  };\n\n  private handleChange = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    if (target.files) this.handleFiles(target.files);\n    target.value = '';\n  };\n\n  private handleFiles = async (files: FileList) => {\n    for (let i = 0; i < files.length; i++) {\n      if (this.limit && this.fileList.length >= this.limit) break;\n      const file = files[i];\n\n      if (this.beforeUpload) {\n        try {\n          const ok = await this.beforeUpload(file);\n          if (!ok) continue;\n        } catch {\n          continue;\n        }\n      }\n\n      const uf: UploadFile = {\n        name: file.name,\n        size: file.size,\n        type: file.type,\n        status: this.action ? 'uploading' : 'ready',\n        progress: 0,\n      };\n      this.fileList = [...this.fileList, uf];\n      this.hbChange.emit(this.fileList);\n\n      if (this.action) {\n        this.realUpload(file, uf);\n      }\n    }\n  };\n\n  /** 真实上传：FormData + XHR，带进度回调 */\n  private realUpload = (file: File, uf: UploadFile) => {\n    const xhr = new XMLHttpRequest();\n    const formData = new FormData();\n    formData.append(this.name, file);\n    if (this.data) {\n      Object.entries(this.data).forEach(([k, v]) => formData.append(k, v));\n    }\n\n    xhr.upload.onprogress = (e) => {\n      if (e.lengthComputable) {\n        uf.progress = Math.round((e.loaded / e.total) * 100);\n        this.fileList = [...this.fileList];\n      }\n    };\n\n    xhr.onload = () => {\n      if (xhr.status >= 200 && xhr.status < 300) {\n        uf.status = 'success';\n        uf.response = this.parseResponse(xhr.response);\n        this.fileList = [...this.fileList];\n        this.hbSuccess.emit(uf);\n      } else {\n        uf.status = 'error';\n        this.fileList = [...this.fileList];\n        this.hbError.emit(uf);\n      }\n    };\n\n    xhr.onerror = () => {\n      uf.status = 'error';\n      this.fileList = [...this.fileList];\n      this.hbError.emit(uf);\n    };\n\n    xhr.open('POST', this.action as string, true);\n    xhr.withCredentials = this.withCredentials;\n    if (this.headers) {\n      Object.entries(this.headers).forEach(([k, v]) => xhr.setRequestHeader(k, v));\n    }\n    xhr.send(formData);\n  };\n\n  private parseResponse(raw: any): any {\n    if (typeof raw !== 'string') return raw;\n    try {\n      return JSON.parse(raw);\n    } catch {\n      return raw;\n    }\n  }\n\n  private handleRemove = (index: number) => {\n    const next = [...this.fileList];\n    next.splice(index, 1);\n    this.fileList = next;\n    this.hbChange.emit(next);\n  };\n\n  private handleDrop = (e: DragEvent) => {\n    e.preventDefault();\n    this.isDragover = false;\n    if (e.dataTransfer?.files) this.handleFiles(e.dataTransfer.files);\n  };\n\n  private handleDragOver = (e: DragEvent) => {\n    e.preventDefault();\n    this.isDragover = true;\n  };\n\n  private handleDragLeave = () => {\n    this.isDragover = false;\n  };\n\n  private formatSize(bytes: number): string {\n    if (bytes < 1024) return bytes + ' B';\n    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';\n    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';\n  }\n\n  private renderStatus(file: UploadFile) {\n    if (file.status === 'uploading') {\n      return <span class=\"hb-upload__item-progress\">{typeof file.progress === 'number' ? `${file.progress}%` : ''}</span>;\n    }\n    if (file.status === 'success') return <span class=\"hb-upload__item-status hb-upload__item-status--success\">✓</span>;\n    if (file.status === 'error') return <span class=\"hb-upload__item-status hb-upload__item-status--error\">✕</span>;\n    return null;\n  }\n\n  render() {\n    return (\n      <div class=\"hb-upload\">\n        <div\n          class={{\n            'hb-upload__trigger': true,\n            'hb-upload__trigger--drag': this.drag,\n            'hb-upload__trigger--dragover': this.isDragover,\n            'hb-upload__trigger--disabled': this.disabled,\n          }}\n          onClick={this.handleClick}\n          onDrop={this.drag ? this.handleDrop : undefined}\n          onDragOver={this.drag ? this.handleDragOver : undefined}\n          onDragLeave={this.drag ? this.handleDragLeave : undefined}\n        >\n          {this.drag ? <span>将文件拖到此处，或点击上传</span> : <slot><button type=\"button\" class=\"hb-upload__btn\">点击上传</button></slot>}\n        </div>\n        <input\n          type=\"file\"\n          ref={(el: any) => {\n            this.inputRef = el;\n          }}\n          multiple={this.multiple}\n          accept={this.accept}\n          disabled={this.disabled}\n          style={{ display: 'none' }}\n          onChange={this.handleChange}\n        />\n        {this.fileList.length > 0 && (\n          <ul class=\"hb-upload__list\">\n            {this.fileList.map((file, i) => (\n              <li class={{ 'hb-upload__item': true, [`hb-upload__item--${file.status}`]: true }}>\n                <span class=\"hb-upload__item-name\">{file.name}</span>\n                <span class=\"hb-upload__item-size\">{this.formatSize(file.size)}</span>\n                {this.renderStatus(file)}\n                <span class=\"hb-upload__item-remove\" onClick={() => this.handleRemove(i)}>×</span>\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/Upload/upload.css

@@ -0,0 +1,16 @@
+:host { display: block; }
+.hb-upload__trigger--drag { border: 1px dashed var(--hb-color-border); border-radius: var(--hb-border-radius-base); padding: var(--hb-spacing-xl); text-align: center; cursor: pointer; color: var(--hb-color-text-secondary); transition: border-color 0.3s; }
+.hb-upload__trigger--drag:hover, .hb-upload__trigger--dragover { border-color: var(--hb-color-primary); color: var(--hb-color-primary); }
+.hb-upload__trigger--disabled { opacity: 0.5; cursor: not-allowed; }
+.hb-upload__btn { padding: var(--hb-spacing-xs) var(--hb-spacing-md); border: 1px solid var(--hb-color-border); border-radius: var(--hb-border-radius-sm); background: var(--hb-color-bg); cursor: pointer; font-size: var(--hb-font-size-sm); }
+.hb-upload__btn:hover { border-color: var(--hb-color-primary); color: var(--hb-color-primary); }
+.hb-upload__list { list-style: none; margin: var(--hb-spacing-sm) 0 0; padding: 0; }
+.hb-upload__item { display: flex; align-items: center; gap: var(--hb-spacing-xs); padding: var(--hb-spacing-xs) 0; font-size: var(--hb-font-size-sm); border-bottom: 1px solid var(--hb-color-border-secondary); }
+.hb-upload__item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hb-upload__item-size { color: var(--hb-color-text-secondary); font-size: var(--hb-font-size-xs); }
+.hb-upload__item-status { font-size: 12px; }
+.hb-upload__item--success .hb-upload__item-status { color: var(--hb-color-success); }
+.hb-upload__item--error .hb-upload__item-status { color: var(--hb-color-danger); }
+.hb-upload__item-remove { cursor: pointer; color: var(--hb-color-text-secondary); font-size: 16px; }
+.hb-upload__item-remove:hover { color: var(--hb-color-danger); }
+.hb-upload__item-progress { font-size: var(--hb-font-size-xs); color: var(--hb-color-primary); min-width: 34px; text-align: right; }