atomicuilibrary 0.0.1 → 0.1.3

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

@@ -22,10 +22,11 @@ export class FileUpload {
     showPreview = true;
     /** Disabled */
     disabled = false;
-    /** Variant: 'dropzone' | 'button' | 'compact' | 'sideload' */
+    /** Variant: 'dropzone' | 'button' | 'compact' | 'inline' | 'sideload' */
     variant = 'dropzone';
-    /** Icon emoji or text */
-    uploadIcon = '📁';
+    /** Custom upload icon: pass a lucide icon name (e.g. "file-plus") or any emoji/text.
+     *  Defaults to the upload-cloud lucide icon when left empty. */
+    uploadIcon = '';
     /** RTL support */
     rtl = false;
     /** Capture attribute for mobile camera */
@@ -36,12 +37,16 @@ export class FileUpload {
     fileNamePattern = '';
     /** Show manual validate button */
     showValidateButton = false;
-    /** Show manual upload button */
+    /** Show manual upload button — overrides auto-upload when true */
     showUploadButton = false;
-    /** Automatically trigger upload when files are selected */
+    /** When true (default), upload begins immediately after files are selected.
+     *  When false, files stay in "Ready" state until the user clicks the Upload button inside the queue dialog. */
     autoUpload = true;
     /** Automatically emit completion event and hide list when all files succeed */
     autoCloseOnSuccess = false;
+    /** Allow the user to select an entire folder instead of individual files.
+     *  Sets webkitdirectory on the hidden input. Implicitly enables multiple. */
+    directory = false;
     /** Integrated header title (for sideload variant) */
     headerTitle = '';
     isDragging = false;
@@ -49,6 +54,10 @@ export class FileUpload {
     errors = [];
     /** Overall component state: 'idle' | 'validating' | 'uploading' | 'success' | 'error' */
     componentStatus = 'idle';
+    /** Whether the queue management dialog is visible */
+    isQueueOpen = false;
+    /** Index of the file currently shown in the preview dialog (-1 = closed) */
+    previewFileIndex = -1;
     uploadIntervals = {};
     fileSelect;
     fileRemove;
@@ -112,6 +121,8 @@ export class FileUpload {
         this.files = [];
         this.errors = [];
         this.componentStatus = 'idle';
+        this.isQueueOpen = false;
+        this.previewFileIndex = -1;
     }
     formatSize(bytes) {
         if (bytes < 1024)
@@ -198,6 +209,15 @@ export class FileUpload {
         if (fileNameError) {
             validationErrors.push(fileNameError);
         }
+        // Empty file check — must come before size-range checks
+        if (file.size === 0) {
+            validationErrors.push({
+                fileName: file.name,
+                message: `${file.name} is empty (0 KB) and cannot be uploaded`,
+                rule: 'empty-file',
+            });
+            return validationErrors; // skip further size checks on an empty file
+        }
         if (this.minSize > 0 && file.size < this.minSize) {
             validationErrors.push({
                 fileName: file.name,
@@ -255,11 +275,6 @@ export class FileUpload {
                 uf.errorMessage = `Duplicate detected: "${file.name}"`;
                 validationErrors.push({ fileName: file.name, message: uf.errorMessage, rule: 'duplicate-file' });
             }
-            if (file.size === 0) {
-                uf.status = 'error';
-                uf.errorMessage = 'File is empty (0 bytes)';
-                validationErrors.push({ fileName: file.name, message: uf.errorMessage, rule: 'empty-file' });
-            }
             const fileErrors = this.validateFile(file);
             if (fileErrors.length > 0 && uf.status !== 'error') {
                 uf.status = 'error';
@@ -277,6 +292,9 @@ export class FileUpload {
         });
         this.errors = validationErrors.map(error => error.message);
         this.files = [...this.files, ...newFiles];
+        // Auto-open the queue dialog whenever files are added
+        if (newFiles.length > 0 && this.variant !== 'sideload')
+            this.isQueueOpen = true;
         if (this.autoUpload) {
             newFiles.filter(f => f.status === 'pending').forEach(f => this.startSimulation(f.name));
         }
@@ -356,47 +374,128 @@ export class FileUpload {
             delete this.uploadIntervals[removed.name];
         }
         this.files = this.files.filter((_, i) => i !== idx);
+        // Remove validation errors that mention this file's name
+        this.errors = this.errors.filter(e => !e.includes(removed.name));
+        // Clear max-files warnings when we're now under the limit
+        if (this.files.length < this.maxFiles) {
+            this.errors = this.errors.filter(e => !e.includes('more file') && !e.includes('upload up to'));
+        }
+        // If no files left, clear all remaining errors
+        if (this.files.length === 0) {
+            this.errors = [];
+        }
         this.fileRemove.emit(removed.name);
         this.fileSelect.emit(this.files);
     };
-    getIcon(type) {
-        if (type.startsWith('image/'))
-            return '🖼️';
-        if (type === 'application/pdf')
-            return '📄';
-        if (type.includes('word'))
-            return '📝';
-        if (type.includes('sheet') || type.includes('excel'))
-            return '📊';
-        if (type.includes('zip') || type.includes('rar'))
-            return '🗜️';
-        return '📎';
+    getFileIconStyles(type) {
+        const t = (type || '').toLowerCase();
+        if (t.startsWith('image/')) {
+            return { icon: 'image', bg: 'rgba(168, 85, 247, 0.08)', color: 'rgb(168, 85, 247)' };
+        }
+        if (t === 'application/pdf' || t.includes('pdf') || t.includes('word') || t.includes('document')) {
+            return { icon: 'file-text', bg: 'rgba(59, 130, 246, 0.08)', color: 'rgb(59, 130, 246)' };
+        }
+        if (t.includes('sheet') || t.includes('excel') || t.includes('csv') || t.includes('spreadsheet')) {
+            return { icon: 'file-spreadsheet', bg: 'rgba(16, 185, 129, 0.08)', color: 'rgb(16, 185, 129)' };
+        }
+        if (t.includes('zip') || t.includes('rar') || t.includes('tar') || t.includes('compressed') || t.includes('7z')) {
+            return { icon: 'archive', bg: 'rgba(245, 158, 11, 0.08)', color: 'rgb(245, 158, 11)' };
+        }
+        if (t.startsWith('audio/')) {
+            return { icon: 'music', bg: 'rgba(236, 72, 153, 0.08)', color: 'rgb(236, 72, 153)' };
+        }
+        if (t.startsWith('video/')) {
+            return { icon: 'video', bg: 'rgba(239, 68, 68, 0.08)', color: 'rgb(239, 68, 68)' };
+        }
+        return { icon: 'file', bg: 'rgba(107, 114, 128, 0.08)', color: 'rgb(107, 114, 128)' };
+    }
+    /** Renders the zone/trigger icon — lucide icon name, emoji text, or default upload-cloud */
+    renderUploadZoneIcon(size = '40px') {
+        if (!this.uploadIcon) {
+            // Default: use lucide upload-cloud icon
+            return h("ui-icon", { name: "upload-cloud", library: "lucide", size: size, color: "var(--color-primary, #10b981)" });
+        }
+        // Heuristic: if no spaces and only a-z/0-9/- it's a lucide icon name
+        if (/^[a-z0-9-]+$/.test(this.uploadIcon)) {
+            return h("ui-icon", { name: this.uploadIcon, library: "lucide", size: size, color: "var(--color-primary, #10b981)" });
+        }
+        // Otherwise render as emoji/text
+        return h("span", { class: "fu-upload-icon-text" }, this.uploadIcon);
+    }
+    /** Renders the reusable file-row used in both the queue dialog and sideload list */
+    renderFileRow(f, idx, isUploading) {
+        const progress = f.progress || 0;
+        const status = f.status;
+        const { icon, bg, color } = this.getFileIconStyles(f.type);
+        const renderedIcon = status === 'error' ? 'alert-triangle' : icon;
+        const renderedBg = status === 'error' ? 'rgba(239, 68, 68, 0.08)' : bg;
+        const renderedColor = status === 'error' ? 'rgb(239, 68, 68)' : color;
+        return (h("div", { class: { 'fu-file-item': true, [`is-${status}`]: true, 'is-clickable': true }, key: f.name + idx, onClick: () => { this.previewFileIndex = idx; }, title: "Click to preview" }, h("div", { class: "fu-file-icon-wrapper", style: { backgroundColor: renderedBg } }, h("ui-icon", { name: renderedIcon, library: "lucide", size: "20px", color: renderedColor })), h("div", { class: "fu-file-info" }, h("div", { class: "fu-file-name-row" }, h("span", { class: "fu-file-name", title: f.name }, f.name), h("span", { class: "fu-file-status" }, status === 'success' && h("span", { class: "fu-status-badge is-success" }, h("ui-icon", { name: "check", library: "lucide", size: "12px", color: "#10b981" }), h("span", null, "Done")), status === 'uploading' && h("span", { class: "fu-status-badge is-uploading" }, h("span", { class: "fu-spinner-dot" }), h("span", null, Math.round(progress), "%")), status === 'pending' && h("span", { class: "fu-status-badge is-pending" }, h("span", null, "Ready")), status === 'validating' && h("span", { class: "fu-status-badge is-validating" }, h("span", null, "Validating\u00E2\u20AC\u00A6")), status === 'error' && h("span", { class: "fu-status-badge is-error" }, h("span", null, "Failed")))), h("div", { class: "fu-file-meta" }, h("span", { class: "fu-file-size" }, this.formatSize(f.size)), status === 'error' && f.errorMessage && (h("span", { class: "fu-file-error-msg" }, h("ui-icon", { name: "alert-circle", library: "lucide", size: "12px", color: "currentColor" }), h("span", null, f.errorMessage)))), status === 'uploading' && (h("div", { class: "fu-progress-bar" }, h("div", { class: "fu-progress-fill", style: { width: `${progress}%` } })))), h("ui-button", { variant: "ghost", size: "xxs", iconOnly: true, class: "fu-remove", onClick: (e) => { e.stopPropagation(); this.removeFile(idx); }, ariaLabel: "Remove", icon: "x", iconLibrary: "lucide", iconSize: "16px", disabled: isUploading && status === 'uploading' })));
+    }
+    /** Queue management dialog — shown for all non-sideload variants */
+    /** Queue management dialog - shown for all non-sideload variants */
+    renderQueueDialog() {
+        if (!this.isQueueOpen || this.variant === 'sideload')
+            return null;
+        const hasFiles = this.files.length > 0;
+        const isUploading = this.componentStatus === 'uploading';
+        const isValidating = this.componentStatus === 'validating';
+        const validCount = this.files.filter(f => f.status !== 'error').length;
+        const readyCount = this.files.filter(f => f.status === 'pending').length;
+        const doneCount = this.files.filter(f => f.status === 'success').length;
+        const pendingCount = this.files.filter(f => f.status === 'pending' || f.status === 'uploading').length;
+        const failedCount = this.files.filter(f => f.status === 'error').length;
+        const hasErrors = failedCount > 0;
+        const allSuccess = hasFiles && this.files.every(f => f.status === 'success');
+        const canAdd = !this.disabled && this.files.length < this.maxFiles;
+        const isManual = !this.autoUpload || this.showUploadButton;
+        const showUploadBtn = isManual && !allSuccess;
+        const closeQueue = () => {
+            this.isQueueOpen = false;
+            // Drop successfully uploaded files — they're done; keep pending/uploading/error
+            this.files = this.files.filter(f => f.status !== 'success');
+            if (this.files.length === 0) {
+                this.componentStatus = 'idle';
+                this.errors = [];
+                this.previewFileIndex = -1;
+            }
+        };
+        return (h("div", { class: "fu-queue-backdrop", onClick: closeQueue }, h("div", { class: { 'fu-queue-dialog': true, 'fu-queue-dialog--manual': isManual }, onClick: (e) => e.stopPropagation(), role: "dialog", "aria-modal": "true", "aria-label": "Upload Queue" }, h("div", { class: "fu-queue-header" }, h("div", { class: "fu-queue-title" }, h("ui-icon", { name: "upload-cloud", library: "lucide", size: "18px", color: "var(--color-primary, #10b981)" }), h("span", null, "Upload Queue"), h("span", { class: "fu-queue-count-pill" }, this.files.length, " file", this.files.length !== 1 ? 's' : '')), h("div", { class: "fu-queue-header-right" }, h("span", { class: `fu-upload-mode-badge ${isManual ? 'is-manual' : 'is-auto'}` }, h("ui-icon", { name: isManual ? 'hand' : 'zap', library: "lucide", size: "11px", color: "currentColor" }), isManual ? 'Manual upload' : 'Auto upload'), h("ui-button", { variant: "ghost", size: "sm", iconOnly: true, icon: "x", iconLibrary: "lucide", onClick: closeQueue, ariaLabel: "Close dialog" }))), isManual && readyCount > 0 && !isUploading && !allSuccess && (h("div", { class: "fu-queue-manual-banner" }, h("ui-icon", { name: "mouse-pointer-click", library: "lucide", size: "14px", color: "#6366f1" }), h("span", null, readyCount, " file", readyCount !== 1 ? 's' : '', " ready \u2014 click ", h("strong", null, "Upload"), " when ready."))), this.errors.length > 0 && (h("div", { class: "fu-queue-errors" }, this.errors.map(e => (h("div", { class: "fu-queue-error-item" }, h("ui-icon", { name: "alert-triangle", library: "lucide", size: "14px", color: "#ef4444" }), h("span", null, e)))))), hasFiles && (h("div", { class: "fu-queue-summary" }, doneCount > 0 && h("span", { class: "fu-queue-summary-stat" }, h("span", { class: "fu-qs-dot success" }), doneCount, " done"), pendingCount > 0 && h("span", { class: "fu-queue-summary-stat" }, h("span", { class: "fu-qs-dot pending" }), pendingCount, " pending"), hasErrors && h("span", { class: "fu-queue-summary-stat" }, h("span", { class: "fu-qs-dot error" }), failedCount, " failed"), this.autoUpload && isUploading && (h("span", { class: "fu-queue-summary-stat is-auto" }, h("span", { class: "fu-spinner-dot" }), " Uploading...")), allSuccess && (h("span", { class: "fu-queue-summary-stat is-complete" }, h("ui-icon", { name: "check-circle", library: "lucide", size: "13px", color: "#10b981" }), " All done")))), h("div", { class: "fu-queue-list" }, !hasFiles && (h("div", { class: "fu-queue-empty" }, h("ui-icon", { name: "inbox", library: "lucide", size: "32px", color: "var(--text-muted, #9ca3af)" }), h("span", null, "No files in queue"))), this.files.map((f, idx) => this.renderFileRow(f, idx, isUploading))), h("div", { class: "fu-queue-footer" }, h("div", { class: "fu-queue-footer-left" }, canAdd && (h("ui-button", { variant: "ghost", size: "sm", label: "Add more", icon: "plus", iconLibrary: "lucide", disabled: isUploading, onClick: () => this.inputRef?.click() })), hasErrors && (h("ui-button", { variant: "ghost", size: "sm", label: "Remove failed", icon: "trash-2", iconLibrary: "lucide", onClick: () => this.removeInvalidFiles() }))), h("div", { class: "fu-queue-footer-right" }, !isUploading && !allSuccess && (h("ui-button", { variant: "outline", size: "sm", label: "Cancel all", onClick: () => this.clear() })), this.showValidateButton && (h("ui-button", { variant: "outline", size: "sm", label: "Validate", loading: isValidating, disabled: isUploading || !hasFiles, onClick: () => this.validate() })), showUploadBtn && (h("ui-button", { variant: "primary", size: "sm", label: isUploading ? 'Uploading...' : `Upload ${readyCount > 0 ? readyCount : validCount} file${(readyCount || validCount) !== 1 ? 's' : ''}`, icon: isUploading ? 'loader' : 'upload', iconLibrary: "lucide", loading: isUploading, disabled: isValidating || validCount === 0, onClick: () => this.upload() })), allSuccess && (h("ui-button", { variant: "primary", size: "sm", icon: "check", iconLibrary: "lucide", label: "Done", onClick: closeQueue })))))));
+    }
+    renderPreviewDialog() {
+        const idx = this.previewFileIndex;
+        if (idx < 0 || idx >= this.files.length)
+            return null;
+        const f = this.files[idx];
+        const progress = f.progress || 0;
+        const status = f.status;
+        const isUploading = status === 'uploading';
+        const isImage = f.type?.startsWith('image/') && !!f.dataUrl;
+        const { icon, bg, color } = this.getFileIconStyles(f.type);
+        const renderedIcon = status === 'error' ? 'alert-triangle' : icon;
+        const renderedBg = status === 'error' ? 'rgba(239, 68, 68, 0.08)' : bg;
+        const renderedColor = status === 'error' ? 'rgb(239, 68, 68)' : color;
+        const close = () => { this.previewFileIndex = -1; };
+        return (h("div", { class: "fu-dialog-backdrop", onClick: close }, h("div", { class: "fu-dialog", onClick: (e) => e.stopPropagation(), role: "dialog", "aria-modal": "true", "aria-label": `File details: ${f.name}` }, h("div", { class: "fu-dialog-header" }, h("div", { class: "fu-dialog-title" }, h("ui-icon", { name: "file-search", library: "lucide", size: "18px", color: "var(--color-primary, #10b981)" }), h("span", null, "File Details")), h("ui-button", { variant: "ghost", size: "sm", iconOnly: true, icon: "x", iconLibrary: "lucide", onClick: close, ariaLabel: "Close" })), h("div", { class: "fu-dialog-preview" }, isImage
+            ? h("img", { class: "fu-dialog-image", src: f.dataUrl, alt: f.name })
+            : h("div", { class: "fu-dialog-file-icon", style: { backgroundColor: renderedBg } }, h("ui-icon", { name: renderedIcon, library: "lucide", size: "48px", color: renderedColor }))), h("div", { class: "fu-dialog-info" }, h("div", { class: "fu-dialog-name", title: f.name }, f.name), h("div", { class: "fu-dialog-meta" }, h("span", { class: "fu-dialog-meta-item" }, h("ui-icon", { name: "hard-drive", library: "lucide", size: "13px", color: "currentColor" }), this.formatSize(f.size)), h("span", { class: "fu-dialog-meta-item" }, h("ui-icon", { name: "tag", library: "lucide", size: "13px", color: "currentColor" }), f.type || 'Unknown type')), h("div", { class: "fu-dialog-status-row" }, status === 'success' && h("span", { class: "fu-dialog-badge is-success" }, h("ui-icon", { name: "check-circle", library: "lucide", size: "14px", color: "currentColor" }), "Uploaded successfully"), status === 'uploading' && h("span", { class: "fu-dialog-badge is-uploading" }, h("span", { class: "fu-spinner-dot" }), "Uploading\u00E2\u20AC\u00A6 ", Math.round(progress), "%"), status === 'pending' && h("span", { class: "fu-dialog-badge is-pending" }, h("ui-icon", { name: "clock", library: "lucide", size: "14px", color: "currentColor" }), "Ready to upload"), status === 'error' && h("span", { class: "fu-dialog-badge is-error" }, h("ui-icon", { name: "alert-circle", library: "lucide", size: "14px", color: "currentColor" }), f.errorMessage || 'Upload failed'), status === 'validating' && h("span", { class: "fu-dialog-badge is-validating" }, h("span", { class: "fu-spinner-dot" }), "Validating\u00E2\u20AC\u00A6")), (status === 'uploading' || status === 'success') && (h("div", { class: "fu-dialog-progress" }, h("div", { class: "fu-dialog-progress-fill", style: { width: `${progress}%` } })))), h("div", { class: "fu-dialog-footer" }, h("ui-button", { variant: "ghost", size: "sm", label: "Remove file", icon: "trash-2", iconLibrary: "lucide", disabled: isUploading, onClick: () => { this.removeFile(idx); close(); } }), h("div", { style: { flex: '1' } }), h("ui-button", { variant: "ghost", size: "sm", iconOnly: true, icon: "chevron-left", iconLibrary: "lucide", disabled: idx === 0, ariaLabel: "Previous file", onClick: () => { this.previewFileIndex = idx - 1; } }), h("span", { class: "fu-dialog-nav-count" }, idx + 1, " / ", this.files.length), h("ui-button", { variant: "ghost", size: "sm", iconOnly: true, icon: "chevron-right", iconLibrary: "lucide", disabled: idx === this.files.length - 1, ariaLabel: "Next file", onClick: () => { this.previewFileIndex = idx + 1; } }), h("ui-button", { variant: "primary", size: "sm", label: "Close", onClick: close })))));
     }
     render() {
         const canAdd = !this.disabled && this.files.length < this.maxFiles;
         const hasFiles = this.files.length > 0;
         const isUploading = this.componentStatus === 'uploading';
-        const isValidating = this.componentStatus === 'validating';
         const validFilesCount = this.files.filter(f => f.status !== 'error').length;
-        const hasErrors = this.files.some(f => f.status === 'error');
-        return (h(Host, { key: 'e023a6d860e04cbad81a073a3d921b4670644ea1', dir: this.rtl ? 'rtl' : 'ltr', onPaste: this.handlePaste, class: { 'is-sideload': this.variant === 'sideload' } }, this.variant === 'sideload' && (h("div", { key: 'f0a9154a2d0fd3574b659674cf76f3a12f058d57', class: "fu-sideload-header" }, h("div", { key: '83d0168bac94abaa64b8e97026c97fd8d2423ae3', class: "fu-header-title-row" }, h("ui-icon", { key: '8387010b6ef439d6de023eb97eb18fc38d9aa06d', name: "upload-cloud", library: "lucide", size: "24px", color: "var(--color-primary, #10b981)" }), h("h2", { key: 'a31a8e98afedd667a99090de154ee41565e7d6ca' }, this.headerTitle || 'Sideload Firmware'), h("ui-button", { key: 'b6253491fe52f40256bc7160c5d7f127f56618f3', variant: "ghost", size: "md", iconOnly: true, icon: "x", iconLibrary: "lucide", class: "fu-close-dialog" })), h("div", { key: 'b1628a83b975aaf63a78fb4827eda5b723d7559e', class: { 'fu-sideload-zone': true, 'is-dragging': this.isDragging }, onDragOver: (e) => { e.preventDefault(); this.isDragging = true; }, onDragLeave: () => (this.isDragging = false), onDrop: this.handleDrop, onClick: () => canAdd && this.inputRef?.click() }, h("ui-icon", { key: '438322e56615a49d5b59ce048a53baa70a378bbd', name: "upload", library: "lucide", size: "20px", color: "var(--color-primary, #10b981)" }), h("span", { key: '55635c6bdee2d0f6cdb76f6c631e43af00119c29' }, "Drop more files or ", h("strong", { key: '38a4347b3acc9f226d8807513a13e896cc3988ab', class: "fu-browse-pill" }, "Browse"))))), this.label && this.variant !== 'sideload' && h("label", { key: '8d7e1ab4892d62a638a0ac2a7ed3de49ea4db3a7', class: "fu-label" }, this.label), this.variant === 'dropzone' && (h("div", { key: 'e3db150b83ca3874088a4f0ab4ff721d1eb8599a', class: { 'fu-zone': true, 'fu-dragging': this.isDragging, 'fu-disabled': this.disabled }, onDragOver: (e) => { e.preventDefault(); this.isDragging = true; }, onDragLeave: () => (this.isDragging = false), onDrop: this.handleDrop, onClick: () => canAdd && this.inputRef?.click() }, h("div", { key: 'c067ae850850024015757974c5e881b1fc52cdd0', class: "fu-zone-icon" }, this.uploadIcon), h("div", { key: 'a438cded36e799c246e29bd636bc79c833246d2e', class: "fu-zone-title" }, "Drag & drop files here"), h("div", { key: '952dd6afce21218fa9a3b9c1f7cb1a2854ab9f21', class: "fu-zone-sub" }, "or ", h("span", { key: '5946db023c7713f63ff402082de612cfe27d79e1', class: "fu-zone-browse" }, "browse files")), h("div", { key: '0b63680de4b4c3d99a985747efd1bdf2733b8c1a', class: "fu-zone-limit" }, this.accept && h("span", { key: '5c75daa15408bec904c57ee6f7e4af4ba09f56b7' }, "Accepts: ", this.accept), h("span", { key: '34488fd0e8064650fcbc50672d9f4b40b56c3252' }, "Max ", this.formatSize(this.maxSize), " \u00B7 Up to ", this.maxFiles, " files")))), (this.variant === 'button' || this.variant === 'compact') && (h("div", { key: '805a97dbff1ac3911e20d25d9feb5dc0e0254d90', class: "fu-trigger-row" }, this.variant === 'button' && (h("ui-button", { key: '54b3624ef218f5c5c8d62a4c5dc88fe24ddc9a27', variant: "primary", onClick: () => canAdd && this.inputRef?.click(), disabled: this.disabled || isUploading, label: this.label || 'Select Files', icon: this.uploadIcon })), this.variant === 'compact' && (h("div", { key: '3ebbfb44da248d985e86f48759772545de916d5d', class: { 'fu-compact': true, 'fu-disabled': this.disabled }, onClick: () => canAdd && this.inputRef?.click() }, h("span", { key: '39e88c85f57b10cec99d7c677689cd0402b8b5b0', class: "fu-compact-icon" }, this.uploadIcon), h("span", { key: '41e011e8f46008ef0e803fcfe7bbecc55e7ddd98', class: "fu-compact-text" }, this.label || 'Choose file'), h("span", { key: '5f2c96e19c6ab3d715ffbd9d33fd49c507cda31b', class: "fu-compact-count" }, this.files.length, " / ", this.maxFiles))), (this.showValidateButton || this.showUploadButton) && (h("div", { key: '494128b8db00f33ab9d602b78c2c17c9374ddf0a', class: "fu-actions" }, this.showValidateButton && (h("ui-button", { key: '470be75a0b9a69b8557f749c615f60848b045f7f', variant: "outline", size: "md", loading: isValidating, disabled: isUploading || this.disabled || !hasFiles, onClick: () => this.validate(), label: "Validate" })), this.showUploadButton && (h("ui-button", { key: '14cea3a0039fe06e5a6eff5baf4ce1ffcee724ad', variant: "primary", size: "md", loading: isUploading, disabled: isValidating || this.disabled || !hasFiles, onClick: () => this.upload(), label: "Upload All", icon: "upload", iconLibrary: "lucide" })))))), this.variant === 'dropzone' && (this.showValidateButton || this.showUploadButton) && (h("div", { key: 'aba1a4dc3bfffe9b2613719ce2ae876e10bd9aca', class: "fu-dropzone-actions" }, h("span", { key: 'f6bddf09dfb74057ee74aff7e82a38a999973e9c', class: "fu-status-text" }, hasFiles ? `${this.files.length} file(s) selected` : 'No files selected'), h("div", { key: 'e050caeb8ba45b9d2d0adeddf659b5a53abddf89', class: "fu-button-group" }, this.showValidateButton && (h("ui-button", { key: '95b6ea727bbe7cad4a3ba6f10e1b3777393b4ca4', variant: "ghost", size: "md", loading: isValidating, disabled: isUploading || !hasFiles, onClick: () => this.validate(), label: "Validate Files" })), this.showUploadButton && (h("ui-button", { key: '3d92daaa1f7d0bb85e1bf016fb53aa0f771c4510', variant: "primary", size: "md", loading: isUploading, disabled: isValidating || !hasFiles, onClick: () => this.upload(), label: "Start Upload" }))))), h("input", { key: '33eaf23068f5a8042b7e44ef8564f22860693395', ref: el => (this.inputRef = el), type: "file", class: "fu-input-hidden", accept: this.accept, multiple: this.multiple, capture: this.capture === true ? 'environment' : (this.capture || undefined), onChange: this.handleFileInput }), this.errors.length > 0 && this.variant !== 'sideload' && (h("div", { key: '7c206fe6b3cd098262a1061e9abf88909c443fb2', class: "fu-errors" }, this.errors.map(e => h("div", { class: "fu-error" }, "\u26A0 ", e)))), this.showPreview && hasFiles && (h("div", { key: '36884700bc547826dfbfa32556a59e56ea0c9ff1', class: { 'fu-file-list': true, 'is-sideload-list': this.variant === 'sideload' } }, this.variant !== 'sideload' && h("div", { key: '634011f23cba7105437851f7e969e98ee1e46c09', class: "fu-list-header" }, "QUEUED FILES"), this.files.map((f, idx) => {
-            const progress = f.progress || 0;
-            const status = f.status;
-            const statusLabels = {
-                pending: 'Ready',
-                validating: 'Validating...',
-                uploading: 'Uploading...',
-                success: 'Complete',
-                error: 'Failed'
-            };
-            const itemIcon = status === 'error' ? 'alert-triangle' : (status === 'success' ? 'check-circle' : 'info');
-            const iconColor = status === 'error' ? '#f59e0b' : (status === 'success' ? '#10b981' : '#3b82f6');
-            return (h("div", { class: { 'fu-file-item': true, [`is-${status}`]: true }, key: f.name + idx }, this.variant === 'sideload'
-                ? h("ui-icon", { class: "fu-sideload-item-icon", name: itemIcon, library: "lucide", size: "24px", color: iconColor })
-                : (f.type.startsWith('image/') && f.dataUrl
-                    ? h("img", { class: "fu-thumb", src: f.dataUrl, alt: f.name })
-                    : h("span", { class: "fu-file-icon" }, this.getIcon(f.type))), h("div", { class: "fu-file-info" }, h("div", { class: "fu-file-name-row" }, h("span", { class: "fu-file-name" }, f.name), h("span", { class: "fu-file-status" }, this.variant !== 'sideload' && h("span", { class: "fu-status-label" }, statusLabels[status]), status === 'success' && h("ui-icon", { name: "check", library: "lucide", size: "14px", color: "#10b981" }), status === 'error' && this.variant !== 'sideload' && h("ui-icon", { name: "alert-circle", library: "lucide", size: "14px", color: "#ef4444" }), status === 'uploading' && h("span", { class: "fu-file-percent" }, Math.round(progress), "%"))), h("div", { class: "fu-file-meta" }, h("span", { class: "fu-file-size" }, this.formatSize(f.size)), f.errorMessage && h("span", { class: "fu-item-error-msg" }, " \u00B7 ", f.errorMessage)), (status === 'uploading' || status === 'success') && (h("div", { class: "fu-progress-bar" }, h("div", { class: "fu-progress-fill", style: { width: `${progress}%` } })))), h("ui-button", { variant: "ghost", size: "xxs", iconOnly: true, class: "fu-remove", onClick: (e) => { e.stopPropagation(); this.removeFile(idx); }, ariaLabel: "Remove", icon: "x-circle", iconLibrary: "lucide", iconSize: "18px", disabled: isUploading && status === 'uploading' })));
-        }))), this.variant === 'sideload' && (h("div", { key: 'ef71906dbefd987da6f7cf54dacb41528d8e7d4b', class: "fu-sideload-footer" }, h("div", { key: 'e5ce897412814293206de68572bce9fe93478fff', class: "fu-footer-actions-left" }, hasErrors && (h("ui-button", { key: '40c336eb57ba23767800511d7f8a5525c3bb3a0f', variant: "ghost", size: "md", label: "Clean Queue", onClick: () => this.removeInvalidFiles(), icon: "trash-2", iconLibrary: "lucide" }))), h("div", { key: '31c7983a14455d24158aa3c7bb69b490f995968e', class: "fu-footer-actions-right" }, h("ui-button", { key: 'd9723f7193044a178473437cad30d2074d41b6b4', variant: "outline", label: "Cancel", onClick: () => this.clear() }), h("ui-button", { key: '532aae5a83893629ee5d8186904286393183f5e7', variant: "primary", label: `Upload ${validFilesCount} files`, disabled: validFilesCount === 0 || isUploading, loading: isUploading, onClick: () => this.upload(), icon: "upload", iconLibrary: "lucide" })))), this.helperText && this.variant !== 'sideload' && h("div", { key: '6bd4941a135fbf542f3d9ca275847660424695d9', class: "fu-helper" }, this.helperText)));
+        return (h(Host, { key: 'd3152c915742132400c8c4bb67d9e3b89d54b632', dir: this.rtl ? 'rtl' : 'ltr', onPaste: this.handlePaste, class: { 'is-sideload': this.variant === 'sideload' } }, this.variant === 'sideload' && (h("div", { key: 'dd3fe148a8860b4b9b1ef9e47358bdd46dd64a21', class: "fu-sideload-header" }, h("div", { key: '0f170379a0ea0c797a6c05819af167de7c2dafed', class: "fu-header-title-row" }, h("ui-icon", { key: '6b0b71f7e01651f33efaf6a2a3421367b71b47cc', name: "upload-cloud", library: "lucide", size: "24px", color: "var(--color-primary, #10b981)" }), h("h2", { key: 'a4330e9cb9973cdb61ed42f65dc5a374c371d8f2' }, this.headerTitle || 'Sideload Firmware'), h("ui-button", { key: '2dd90814fbaa9f636c1a0f24f126ab9b31583d66', variant: "ghost", size: "md", iconOnly: true, icon: "x", iconLibrary: "lucide", class: "fu-close-dialog" })), h("div", { key: '234c9679585087721a30df197ae8c0f3739b5c94', class: { 'fu-sideload-zone': true, 'is-dragging': this.isDragging }, onDragOver: (e) => { e.preventDefault(); this.isDragging = true; }, onDragLeave: () => (this.isDragging = false), onDrop: this.handleDrop, onClick: () => canAdd && this.inputRef?.click() }, h("ui-icon", { key: '303cf7a91a182a42aa288519ba933854ffe63b94', name: "upload", library: "lucide", size: "20px", color: "var(--color-primary, #10b981)" }), h("span", { key: 'd3c193b6e528ff43ce0f4ebd7959cfb0ae78b220' }, "Drop more files or ", h("strong", { key: '373cba75237e24b8b6a4e384129cf9543d5cf30e', class: "fu-browse-pill" }, "Browse"))))), this.variant === 'sideload' && hasFiles && (h("div", { key: 'e6b1e6370a769387ec8b75954e34847f93e37e05', class: "fu-file-list is-sideload-list" }, this.files.map((f, idx) => this.renderFileRow(f, idx, isUploading)))), this.variant === 'sideload' && (h("div", { key: 'f4d122874935aeff0dfee060c91d6299234cee5e', class: "fu-sideload-footer" }, h("div", { key: '4e98b7d2bf5fa02766414def762e070d378eb98e', class: "fu-footer-actions-left" }, this.files.some(f => f.status === 'error') && (h("ui-button", { key: 'a2cf99cb5992794930f97f559918a1ad02d05288', variant: "ghost", size: "md", label: "Clean Queue", icon: "trash-2", iconLibrary: "lucide", onClick: () => this.removeInvalidFiles() }))), h("div", { key: '5425b0d9c59a85e6113ab43ca1c03757bc78845b', class: "fu-footer-actions-right" }, h("ui-button", { key: 'c0ef12d4bd32b4eede664130f1cc662abbf1e83f', variant: "outline", label: "Cancel", onClick: () => this.clear() }), h("ui-button", { key: '293aac09dfda74ea69b8d8ea1082ad25786ca62f', variant: "primary", label: `Upload ${validFilesCount} files`, disabled: validFilesCount === 0 || isUploading, loading: isUploading, onClick: () => this.upload(), icon: "upload", iconLibrary: "lucide" })))), this.variant !== 'sideload' && (h("div", { key: 'ad83c062093c5992ca2f02e1b5bd11483e43f1fd' }, this.label && h("label", { key: '9b807a8af85d1fc282375a47d565b1a52d31e207', class: "fu-label" }, this.label), this.variant === 'dropzone' && (h("div", { key: '376d617761e2d03b3fbed7a0fa27da05a6acd1f7', class: { 'fu-zone': true, 'fu-dragging': this.isDragging, 'fu-disabled': this.disabled, 'fu-zone-has-files': hasFiles }, onDragOver: (e) => { e.preventDefault(); this.isDragging = true; }, onDragLeave: () => (this.isDragging = false), onDrop: this.handleDrop, onClick: () => canAdd && this.inputRef?.click() }, h("div", { key: '7df435796b000ddc2af9590115ecd96d8c365bcc', class: "fu-zone-icon" }, this.renderUploadZoneIcon('40px')), h("div", { key: '9cd1d88570d13b1535286a5133aa673eb56473d8', class: "fu-zone-title" }, "Drag & drop files here"), h("div", { key: '82adc9f84981437ed9d1f619ad9f5b52be0a645b', class: "fu-zone-sub" }, "or ", h("span", { key: '0f1f65b55b58aca3eec0d8b3667c9ebeffdc29d3', class: "fu-zone-browse" }, "browse files")), h("div", { key: 'b9a9021442ec5bc8e3309a51cadd2af5cb193c08', class: "fu-zone-limit" }, this.accept && h("span", { key: '12217ab2c6ce5955f966ab627740aabf114484c8' }, "Accepts: ", this.accept), h("span", { key: '5ffd8530aed30321eff0c8e01c6104e2626e0476' }, "Max ", this.formatSize(this.maxSize), " \u00B7 Up to ", this.maxFiles, " files")), hasFiles && (h("div", { key: '4d155a2c4b6516743b7ee38d2ddcc5c20d3c1089', class: "fu-zone-queue-badge", onClick: (e) => { e.stopPropagation(); this.isQueueOpen = true; } }, h("ui-icon", { key: '4e9d11d3444c799a6c54efbe8c3ef894be451809', name: "layers", library: "lucide", size: "14px", color: "#10b981" }), h("span", { key: '8e52407087416f63933efb6288be0e8899f06391' }, this.files.length, " file", this.files.length !== 1 ? 's' : '', " queued"), h("span", { key: '374fbd52cbe323bea13a0749af95050030891dc4', class: "fu-zone-queue-view" }, "View Queue \u2192"))))), (this.variant === 'button' || this.variant === 'compact' || this.variant === 'inline') && (h("div", { key: 'c7b031b7b628d8972fd72ab903e5324f7946fc8c', class: "fu-trigger-row" }, this.variant === 'button' && (h("ui-button", { key: '25a4cdca35f3c1047683825991c36335fbc0166d', variant: "primary", onClick: () => canAdd && this.inputRef?.click(), disabled: this.disabled || isUploading, label: this.label || 'Select Files', icon: this.uploadIcon || 'upload-cloud', iconLibrary: "lucide" })), this.variant === 'compact' && (h("div", { key: '9eb1ef83a2814e814730e42c175b612cdc4f2cd8', class: { 'fu-compact': true, 'fu-disabled': this.disabled }, onClick: () => canAdd && this.inputRef?.click() }, h("span", { key: 'a68573fcfc5a820a46c9b8c832ffd4ceec155651', class: "fu-compact-icon" }, this.renderUploadZoneIcon('18px')), h("span", { key: '5f8c2a40cbceb3f6f10bbb4481284836e476975e', class: "fu-compact-text" }, this.label || 'Choose file'), h("span", { key: 'ae53043e7f6dbc27bc42bde8e2bf9d7870591718', class: "fu-compact-count" }, this.files.length, " / ", this.maxFiles))), this.variant === 'inline' && (h("button", { key: '49e94c27db6aa2b0a9eb56150abed00769a45ba2', class: { 'fu-inline-trigger': true, 'fu-inline-disabled': this.disabled, 'fu-inline-active': hasFiles }, disabled: this.disabled, onClick: () => canAdd && this.inputRef?.click(), type: "button", title: this.label || 'Upload files' }, h("span", { key: '148d06eb63c8df50ba268c5165fd12fb525c238e', class: "fu-inline-icon" }, this.renderUploadZoneIcon('16px')), h("span", { key: 'ba271f05d6d8e0b3c9419bc1e7bd367e0f7adf0d', class: "fu-inline-label" }, this.label || 'Upload files'), hasFiles && (h("span", { key: 'd7ad2159e8e33facc99edc0926d46939c2864fb4', class: "fu-inline-badge", onClick: (e) => { e.stopPropagation(); this.isQueueOpen = true; } }, this.files.length)))), hasFiles && this.variant !== 'inline' && (h("button", { key: 'bd4a50a142bac3d136c0de7221ce15fe078628fd', class: "fu-view-queue-btn", onClick: () => { this.isQueueOpen = true; } }, h("ui-icon", { key: '71083c82786b219595cf9d8b5738848da048c0b9', name: "layers", library: "lucide", size: "14px", color: "currentColor" }), this.files.length, " file", this.files.length !== 1 ? 's' : '', " queued")))), this.helperText && h("div", { key: 'ecc66b684f1e28a0f886faeee45b274b613f36a5', class: "fu-helper" }, this.helperText))), h("input", { key: '3e50fac523ae8a776f4468782a079d8a4206ac45', ref: el => {
+                this.inputRef = el;
+                if (el) {
+                    if (this.directory) {
+                        el.setAttribute('webkitdirectory', '');
+                    }
+                    else {
+                        el.removeAttribute('webkitdirectory');
+                    }
+                }
+            }, type: "file", class: "fu-input-hidden", accept: this.accept, multiple: this.multiple || this.directory, capture: this.capture === true ? 'environment' : (this.capture || undefined), onChange: this.handleFileInput }), this.renderQueueDialog(), this.renderPreviewDialog()));
     }
     static get is() { return "ui-file-upload"; }
     static get encapsulation() { return "shadow"; }
@@ -596,15 +695,15 @@ export class FileUpload {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'dropzone' | 'button' | 'compact' | 'sideload'",
-                    "resolved": "\"button\" | \"compact\" | \"dropzone\" | \"sideload\"",
+                    "original": "'dropzone' | 'button' | 'compact' | 'inline' | 'sideload'",
+                    "resolved": "\"button\" | \"compact\" | \"dropzone\" | \"inline\" | \"sideload\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Variant: 'dropzone' | 'button' | 'compact' | 'sideload'"
+                    "text": "Variant: 'dropzone' | 'button' | 'compact' | 'inline' | 'sideload'"
                 },
                 "getter": false,
                 "setter": false,
@@ -624,13 +723,13 @@ export class FileUpload {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Icon emoji or text"
+                    "text": "Custom upload icon: pass a lucide icon name (e.g. \"file-plus\") or any emoji/text.\r\nDefaults to the upload-cloud lucide icon when left empty."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "upload-icon",
-                "defaultValue": "'\uD83D\uDCC1'"
+                "defaultValue": "''"
             },
             "rtl": {
                 "type": "boolean",
@@ -744,7 +843,7 @@ export class FileUpload {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Show manual upload button"
+                    "text": "Show manual upload button \u2014 overrides auto-upload when true"
                 },
                 "getter": false,
                 "setter": false,
@@ -764,7 +863,7 @@ export class FileUpload {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Automatically trigger upload when files are selected"
+                    "text": "When true (default), upload begins immediately after files are selected.\r\nWhen false, files stay in \"Ready\" state until the user clicks the Upload button inside the queue dialog."
                 },
                 "getter": false,
                 "setter": false,
@@ -792,6 +891,26 @@ export class FileUpload {
                 "attribute": "auto-close-on-success",
                 "defaultValue": "false"
             },
+            "directory": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow the user to select an entire folder instead of individual files.\r\nSets webkitdirectory on the hidden input. Implicitly enables multiple."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "directory",
+                "defaultValue": "false"
+            },
             "headerTitle": {
                 "type": "string",
                 "mutable": false,
@@ -819,7 +938,9 @@ export class FileUpload {
             "isDragging": {},
             "files": {},
             "errors": {},
-            "componentStatus": {}
+            "componentStatus": {},
+            "isQueueOpen": {},
+            "previewFileIndex": {}
         };
     }
     static get events() {

package/dist/collection/components/horizontal-nav/horizontal-nav.css

@@ -140,8 +140,8 @@
 }
 
 .horizontal-nav.variant-default .nav-item.active {
-  background-color: #eff6ff;
-  color: #3b82f6;
+  background-color: var(--color-primary-subtle, rgba(59, 130, 246, 0.1));
+  color: var(--color-primary, #3b82f6);
 }
 
 /* Variants - Pills */
@@ -155,8 +155,8 @@
 }
 
 .horizontal-nav.variant-pills .nav-item.active {
-  background-color: #3b82f6;
-  color: white;
+  background-color: var(--color-primary, #3b82f6);
+  color: var(--text-inverse, white);
 }
 
 /* Variants - Underline */
@@ -193,11 +193,11 @@
 }
 
 .horizontal-nav.variant-underline .nav-item.active {
-  color: #3b82f6;
+  color: var(--color-primary, #3b82f6);
 }
 
 .horizontal-nav.variant-underline .nav-item.active::after {
-  background-color: #3b82f6;
+  background-color: var(--color-primary, #3b82f6);
 }
 
 /* Variants - Segmented */
@@ -350,8 +350,8 @@
 }
 
 .horizontal-nav.display-list .nav-item.active {
-  background-color: #eff6ff;
-  border-left: 3px solid #3b82f6;
+  background-color: var(--color-primary-subtle, rgba(59, 130, 246, 0.1));
+  border-left: 3px solid var(--color-primary, #3b82f6);
   padding-left: 13px;
 }
 
@@ -362,7 +362,7 @@
 }
 
 .horizontal-nav.display-list.variant-pills .nav-item.active {
-  background-color: #eff6ff;
+  background-color: var(--color-primary-subtle, rgba(59, 130, 246, 0.1));
 }
 
 .horizontal-nav.display-list.size-sm .nav-item {

package/dist/collection/components/horizontal-nav/horizontal-nav.js

@@ -143,7 +143,7 @@ export class HorizontalNav {
                     "references": {
                         "HorizontalNavItem": {
                             "location": "local",
-                            "path": "P:/Repository/stenciljs/atomicUILibrary/src/components/horizontal-nav/horizontal-nav.tsx",
+                            "path": "C:/Naveen/PersonalRepo/atomicUILibrary/library/src/components/horizontal-nav/horizontal-nav.tsx",
                             "id": "src/components/horizontal-nav/horizontal-nav.tsx::HorizontalNavItem"
                         }
                     }
@@ -365,7 +365,7 @@ export class HorizontalNav {
                     "references": {
                         "HorizontalNavItem": {
                             "location": "local",
-                            "path": "P:/Repository/stenciljs/atomicUILibrary/src/components/horizontal-nav/horizontal-nav.tsx",
+                            "path": "C:/Naveen/PersonalRepo/atomicUILibrary/library/src/components/horizontal-nav/horizontal-nav.tsx",
                             "id": "src/components/horizontal-nav/horizontal-nav.tsx::HorizontalNavItem"
                         }
                     }

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

@@ -289,7 +289,7 @@ export class Icon {
         const accessibilityAttrs = this.label
             ? { role: 'img', 'aria-label': this.label }
             : { 'aria-hidden': 'true' };
-        return (h(Host, { key: '5a6bf9c51b3f46ec61428d94b6b230c5ec25527d', style: containerStyle, ...accessibilityAttrs }, h("div", { key: '531c468608680f4d9a5d543f0b1088ffeb75f4dc', class: `icon-container ${this.spin ? 'fa-spin' : ''}` }, (this.loading || this.isFetching)
+        return (h(Host, { key: '11a1cf7893d75e1732568ebbb3df40176c06dda6', style: containerStyle, ...accessibilityAttrs }, h("div", { key: '46e5027b067072e5b30ba7a18185e357bfddd072', class: `icon-container ${this.spin ? 'fa-spin' : ''}` }, (this.loading || this.isFetching)
             ? h("ui-loader", { size: "0.8em", color: "currentColor", type: "spinner" })
             : this.renderIconContent(lib, parsedSize))));
     }

package/dist/collection/components/input/input.css

@@ -455,6 +455,8 @@
   --ui-input-addon-bg: var(--bg-secondary, #0f172a);
   --ui-input-addon-border: var(--border-subtle, #334155);
   --ui-input-addon-color: var(--label-subtitle-color, #c2c2c2);
+  --ui-input-soft-bg: rgba(255, 255, 255, 0.05) !important;
+  --ui-input-filled-bg: rgba(255, 255, 255, 0.08) !important;
 }
 
 :host-context([data-theme=violet]) {
@@ -848,6 +850,13 @@
   cursor: default;
   color: var(--text-secondary, #374151);
 }
+.input-field[type=number] {
+  -moz-appearance: textfield;
+}
+.input-field[type=number]::-webkit-outer-spin-button, .input-field[type=number]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
 
 :host(.variant-outlined) .input-container {
   border: 1px solid var(--ui-input-border);