atomicuilibrary 0.1.0 → 0.1.3

package/dist/esm/ui-file-upload.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-DUsoYu9r.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Dqu2zaH1.js';
 
-const fileUploadCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;font-family:inherit}:host(.is-sideload){background:white;border-radius:24px;overflow:hidden;box-shadow:0 10px 40px rgba(0, 0, 0, 0.12);border:1px solid #e5e7eb}.fu-label{display:block;font-size:13px;font-weight:600;color:var(--text-secondary, #374151);margin-bottom:6px}.fu-sideload-header{padding:32px 32px 16px 32px}.fu-header-title-row{display:flex;align-items:center;gap:16px;margin-bottom:24px}.fu-header-title-row h2{margin:0;font-size:28px;font-weight:500;color:#111827;flex:1}.fu-close-dialog{background:#ef4444 !important;color:white !important;border-radius:8px !important;width:36px;height:36px}.fu-sideload-zone{border:2px dashed #e5e7eb;border-radius:12px;padding:16px;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;background:#fdfdfd;transition:all 0.2s}.fu-sideload-zone:hover,.fu-sideload-zone.is-dragging{border-color:#10b981;background:#f0fdf4}.fu-sideload-zone span{font-size:15px;color:#4b5563}.fu-browse-pill{background:#10b981;color:white;padding:2px 12px;border-radius:20px;font-weight:600;margin-left:4px}.fu-zone{border:2px dashed var(--border-strong, #d1d5db);border-radius:14px;padding:40px 24px;text-align:center;cursor:pointer;background:var(--bg-primary, #fafafa);transition:border-color 0.2s, background 0.2s}.fu-zone:hover:not(.fu-disabled){border-color:var(--color-primary, #10b981);background:var(--bg-primary, #eff6ff)}.fu-zone.fu-dragging{border-color:var(--color-primary, #10b981);background:var(--bg-primary, #eff6ff);box-shadow:inset 0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.2)}.fu-zone.fu-disabled{opacity:0.5;cursor:not-allowed}.fu-zone-icon{font-size:40px;margin-bottom:10px}.fu-file-list{display:flex;flex-direction:column;gap:12px;padding:16px 32px;max-height:400px;overflow-y:auto}.fu-file-list.is-sideload-list{padding:0 32px 32px 32px}.fu-file-item{display:flex;align-items:center;gap:16px;padding:14px 20px;border:1px solid #e5e7eb;border-radius:14px;background:white;transition:transform 0.2s}.fu-file-item.is-error{background:#fff1f2;border-color:#fecaca}.fu-sideload-item-icon{flex-shrink:0}.fu-file-info{flex:1;min-width:0}.fu-file-name{display:block;font-size:15px;font-weight:600;color:#1f2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fu-file-meta{font-size:13px;color:#6b7280;margin-top:2px}.fu-item-error-msg{color:#ef4444;font-weight:700;background:rgba(239, 68, 68, 0.08);padding:1px 6px;border-radius:4px}.fu-remove{color:#9ca3af !important}.fu-remove:hover{color:#ef4444 !important}.fu-sideload-footer{padding:24px 32px;background:#f9fafb;border-top:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between}.fu-footer-actions-right{display:flex;gap:12px}.fu-trigger-row{display:flex;align-items:center;gap:16px}.fu-actions{display:flex;gap:8px}.fu-progress-bar{height:6px;background:#e5e7eb;border-radius:3px;margin-top:10px;overflow:hidden}.fu-progress-fill{height:100%;background:#10b981;transition:width 0.3s ease}.fu-input-hidden{display:none}`;
+const fileUploadCss = () => `@charset "UTF-8";.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;font-family:inherit}:host(.is-sideload){background:var(--bg-primary, white);border-radius:24px;overflow:hidden;box-shadow:0 10px 40px rgba(0, 0, 0, 0.12);border:1px solid var(--border-default, #e5e7eb)}.fu-label{display:block;font-size:13px;font-weight:600;color:var(--text-secondary, #374151);margin-bottom:6px}.fu-sideload-header{padding:32px 32px 16px 32px}.fu-header-title-row{display:flex;align-items:center;gap:16px;margin-bottom:24px}.fu-header-title-row h2{margin:0;font-size:28px;font-weight:500;color:var(--text-primary, #111827);flex:1}.fu-close-dialog{background:#ef4444 !important;color:white !important;border-radius:8px !important;width:36px;height:36px}.fu-sideload-zone{border:2px dashed var(--border-strong, #e5e7eb);border-radius:12px;padding:16px;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;background:var(--bg-secondary, #fdfdfd);transition:all 0.2s}.fu-sideload-zone:hover,.fu-sideload-zone.is-dragging{border-color:var(--color-primary, #10b981);background:rgba(16, 185, 129, 0.05)}.fu-sideload-zone span{font-size:15px;color:var(--text-secondary, #4b5563)}.fu-browse-pill{background:#10b981;color:white;padding:2px 12px;border-radius:20px;font-weight:600;margin-left:4px}.fu-zone{border:2px dashed var(--border-strong, #d1d5db);border-radius:14px;padding:40px 24px;text-align:center;cursor:pointer;background:var(--bg-primary, #fafafa);transition:border-color 0.2s, background 0.2s}.fu-zone:hover:not(.fu-disabled){border-color:var(--color-primary, #10b981);background:var(--bg-primary, #eff6ff)}.fu-zone.fu-dragging{border-color:var(--color-primary, #10b981);background:var(--bg-primary, #eff6ff);box-shadow:inset 0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.2)}.fu-zone.fu-disabled{opacity:0.5;cursor:not-allowed}.fu-zone-icon{font-size:40px;margin-bottom:10px}.fu-file-list{display:flex;flex-direction:column;gap:10px;padding:16px 32px;max-height:400px;overflow-y:auto}.fu-file-list.is-sideload-list{padding:0 32px 32px 32px}.fu-file-item{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid var(--border-default, #e5e7eb);border-radius:12px;background:var(--bg-primary, white);transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.02)}.fu-file-item:hover{border-color:var(--border-strong, #d1d5db);box-shadow:0 4px 12px rgba(0, 0, 0, 0.05)}.fu-file-item.is-error{background:var(--bg-primary, #fff1f2);border-color:#fecaca}.fu-file-item.is-error:hover{border-color:var(--color-error, #ef4444)}.fu-file-item.is-success{border-color:var(--color-success, #10b981);background:var(--bg-primary, #fcfdfc)}.fu-file-item.is-success:hover{border-color:var(--color-success, #10b981)}.fu-file-icon-wrapper{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.2s}.fu-file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.fu-file-name-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.fu-file-name{font-size:14px;font-weight:500;color:var(--text-primary, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.fu-file-status{flex-shrink:0}.fu-status-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:12px;text-transform:uppercase;letter-spacing:0.05em}.fu-status-badge.is-success{background:rgba(16, 185, 129, 0.08);color:#10b981}.fu-status-badge.is-uploading{background:rgba(59, 130, 246, 0.08);color:#3b82f6}.fu-status-badge.is-pending{background:rgba(107, 114, 128, 0.08);color:#6b7280}.fu-status-badge.is-validating{background:rgba(245, 158, 11, 0.08);color:#f59e0b}.fu-status-badge.is-error{background:rgba(239, 68, 68, 0.08);color:#ef4444}.fu-spinner-dot{width:6px;height:6px;background:currentColor;border-radius:50%;animation:fu-pulse 1.2s infinite ease-in-out}@keyframes fu-pulse{0%,100%{transform:scale(0.6);opacity:0.5}50%{transform:scale(1.2);opacity:1}}.fu-file-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary, #6b7280)}.fu-file-size{font-weight:500}.fu-file-error-msg{color:#ef4444;font-weight:500;display:inline-flex;align-items:center;gap:4px;animation:fu-shake 0.3s ease-in-out}@keyframes fu-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}.fu-remove{color:#9ca3af !important;opacity:0.8;transition:all 0.2s !important}.fu-remove:hover{color:#ef4444 !important;opacity:1;transform:scale(1.05)}.fu-sideload-footer{padding:24px 32px;background:var(--bg-secondary, #f9fafb);border-top:1px solid var(--border-default, #e5e7eb);display:flex;align-items:center;justify-content:space-between}.fu-footer-actions-right{display:flex;gap:12px}.fu-trigger-row{display:flex;align-items:center;gap:16px}.fu-actions{display:flex;gap:8px}.fu-progress-bar{height:6px;background:#e5e7eb;border-radius:3px;margin-top:10px;overflow:hidden}.fu-progress-fill{height:100%;background:#10b981;transition:width 0.3s ease}.fu-input-hidden{display:none}.fu-file-item.is-clickable{cursor:pointer}.fu-file-item.is-clickable:hover{background:var(--bg-secondary, #f9fafb);border-radius:10px;box-shadow:inset 0 0 0 1.5px var(--border-default, #e5e7eb)}.fu-zone-has-files{border-color:var(--color-primary, #10b981)}.fu-zone-queue-badge{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:6px 14px;background:rgba(16, 185, 129, 0.1);border:1.5px solid rgba(16, 185, 129, 0.35);border-radius:20px;font-size:13px;font-weight:600;color:var(--color-primary-text, #047857);cursor:pointer;transition:background 0.15s, box-shadow 0.15s;z-index:1}.fu-zone-queue-badge:hover{background:rgba(16, 185, 129, 0.18);box-shadow:0 0 0 3px rgba(16, 185, 129, 0.15)}.fu-zone-queue-view{opacity:0.75;font-weight:700;margin-left:2px}.fu-view-queue-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:var(--bg-secondary, #f3f4f6);border:1.5px solid var(--border-default, #e5e7eb);border-radius:20px;font-size:13px;font-weight:600;color:var(--text-primary, #374151);cursor:pointer;transition:background 0.15s, border-color 0.15s, color 0.15s}.fu-view-queue-btn:hover{background:rgba(16, 185, 129, 0.08);border-color:var(--color-primary, #10b981);color:var(--color-primary-text, #047857)}.fu-queue-backdrop{position:fixed;inset:0;z-index:99998;background:rgba(0, 0, 0, 0.45);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;animation:fu-fade-in 0.15s ease}.fu-queue-dialog{background:var(--bg-primary, #ffffff);border-radius:20px;width:min(560px, 100vw - 32px);max-height:min(88dvh, 88vh, 680px);display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.06);overflow:clip;animation:fu-dialog-in 0.18s cubic-bezier(0.34, 1.56, 0.64, 1)}.fu-queue-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--border-default, #e5e7eb);flex-shrink:0}.fu-queue-header-right{display:flex;align-items:center;gap:8px}.fu-upload-mode-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:0.01em}.fu-upload-mode-badge.is-auto{background:rgba(16, 185, 129, 0.1);color:var(--color-primary-text, #047857);border:1px solid rgba(16, 185, 129, 0.25)}.fu-upload-mode-badge.is-manual{background:rgba(99, 102, 241, 0.1);color:#4f46e5;border:1px solid rgba(99, 102, 241, 0.25)}.fu-queue-manual-banner{display:flex;align-items:center;gap:8px;padding:10px 20px;background:rgba(99, 102, 241, 0.06);border-bottom:1px solid rgba(99, 102, 241, 0.15);font-size:13px;color:var(--text-secondary, #4b5563);flex-shrink:0}.fu-queue-manual-banner strong{color:#4f46e5;font-weight:700}.fu-queue-dialog--manual .fu-queue-footer{background:rgba(99, 102, 241, 0.03)}.fu-upload-icon-text{font-size:36px;line-height:1}.fu-inline-trigger{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 9px;background:transparent;border:1.5px solid var(--border-default, #e2e8f0);border-radius:8px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:var(--text-primary, #374151);transition:background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;position:relative;white-space:nowrap;user-select:none}.fu-inline-trigger:hover:not(.fu-inline-disabled){background:var(--bg-secondary, #f1f5f9);border-color:var(--color-primary, #10b981);color:var(--color-primary, #10b981);box-shadow:0 0 0 3px rgba(16, 185, 129, 0.1)}.fu-inline-trigger:active:not(.fu-inline-disabled){background:rgba(16, 185, 129, 0.08);box-shadow:none}.fu-inline-trigger.fu-inline-active{border-color:var(--color-primary, #10b981);color:var(--color-primary, #10b981);background:rgba(16, 185, 129, 0.05)}.fu-inline-trigger.fu-inline-disabled{opacity:0.45;cursor:not-allowed}.fu-inline-icon{display:inline-flex;align-items:center;flex-shrink:0}.fu-inline-label{line-height:1.2}.fu-inline-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:20px;background:var(--color-primary, #10b981);color:#fff;font-size:10px;font-weight:800;line-height:1;cursor:pointer;transition:background 0.15s, transform 0.15s}.fu-inline-badge:hover{background:#059669;transform:scale(1.1)}.fu-queue-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--text-primary, #111827)}.fu-queue-count-pill{padding:2px 10px;border-radius:20px;background:rgba(16, 185, 129, 0.12);color:var(--color-primary-text, #047857);font-size:12px;font-weight:700;border:1px solid rgba(16, 185, 129, 0.3)}.fu-queue-errors{padding:10px 20px;border-bottom:1px solid rgba(239, 68, 68, 0.25);background:rgba(254, 242, 242, 0.8);display:flex;flex-direction:column;gap:6px;flex-shrink:0;max-height:120px;overflow-y:auto}.fu-queue-error-item{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#ef4444}.fu-queue-summary{display:flex;align-items:center;gap:16px;padding:8px 20px;border-bottom:1px solid var(--border-default, #e5e7eb);background:var(--bg-secondary, #f9fafb);flex-shrink:0;flex-wrap:wrap}.fu-queue-summary-stat{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-secondary, #6b7280)}.fu-queue-summary-stat.is-auto{color:#3b82f6}.fu-queue-summary-stat.is-complete{color:#10b981}.fu-qs-dot{width:8px;height:8px;border-radius:50%}.fu-qs-dot.success{background:#10b981}.fu-qs-dot.pending{background:#6366f1}.fu-qs-dot.error{background:#ef4444}.fu-queue-list{flex:1;min-height:0;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:10px}.fu-queue-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:40px 0;color:var(--text-muted, #9ca3af);font-size:14px;font-weight:500}.fu-queue-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 20px 18px;border-top:1px solid var(--border-default, #e5e7eb);background:var(--bg-secondary, #f9fafb);flex-shrink:0;position:relative;z-index:1}.fu-queue-footer-left,.fu-queue-footer-right{display:flex;align-items:center;gap:8px}.fu-dialog-backdrop{position:fixed;inset:0;z-index:99999;background:rgba(0, 0, 0, 0.45);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;animation:fu-fade-in 0.15s ease}@keyframes fu-fade-in{from{opacity:0}to{opacity:1}}.fu-dialog{background:var(--bg-primary, #ffffff);border-radius:18px;width:min(480px, 100vw - 32px);max-height:min(90vh, 640px);display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.06);overflow:hidden;animation:fu-dialog-in 0.18s cubic-bezier(0.34, 1.56, 0.64, 1)}@keyframes fu-dialog-in{from{opacity:0;transform:scale(0.92) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}.fu-dialog-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border-default, #e5e7eb)}.fu-dialog-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--text-primary, #111827)}.fu-dialog-preview{background:var(--bg-secondary, #f8fafc);border-bottom:1px solid var(--border-default, #e5e7eb);display:flex;align-items:center;justify-content:center;min-height:180px;max-height:260px;overflow:hidden;padding:16px}.fu-dialog-image{max-width:100%;max-height:228px;object-fit:contain;border-radius:8px;box-shadow:0 4px 16px rgba(0, 0, 0, 0.1)}.fu-dialog-file-icon{width:96px;height:96px;border-radius:20px;display:flex;align-items:center;justify-content:center}.fu-dialog-info{padding:20px 24px 16px;display:flex;flex-direction:column;gap:10px;flex:1;overflow-y:auto}.fu-dialog-name{font-size:15px;font-weight:700;color:var(--text-primary, #111827);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fu-dialog-meta{display:flex;gap:16px;flex-wrap:wrap}.fu-dialog-meta-item{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-secondary, #6b7280);font-weight:500}.fu-dialog-status-row{display:flex}.fu-dialog-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:700}.fu-dialog-badge.is-success{background:rgba(16, 185, 129, 0.1);color:#10b981}.fu-dialog-badge.is-error{background:rgba(239, 68, 68, 0.1);color:#ef4444}.fu-dialog-badge.is-pending{background:rgba(99, 102, 241, 0.1);color:#6366f1}.fu-dialog-badge.is-uploading{background:rgba(59, 130, 246, 0.1);color:#3b82f6}.fu-dialog-badge.is-validating{background:rgba(245, 158, 11, 0.1);color:#f59e0b}.fu-dialog-progress{height:6px;background:var(--border-default, #e5e7eb);border-radius:3px;overflow:hidden;margin-top:4px}.fu-dialog-progress-fill{height:100%;background:var(--color-primary, #10b981);border-radius:3px;transition:width 0.4s ease}.fu-dialog-footer{display:flex;align-items:center;gap:8px;padding:12px 20px 16px;border-top:1px solid var(--border-default, #e5e7eb)}.fu-dialog-nav-count{font-size:12px;font-weight:600;color:var(--text-secondary, #6b7280);min-width:40px;text-align:center}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-queue-backdrop,:host-context(.dark) .fu-dialog-backdrop,:host-context([data-theme=dark]) .fu-queue-backdrop,:host-context([data-theme=dark]) .fu-dialog-backdrop,:host(.dark) .fu-queue-backdrop,:host(.dark) .fu-dialog-backdrop,:host([data-theme=dark]) .fu-queue-backdrop,:host([data-theme=dark]) .fu-dialog-backdrop{background:rgba(0, 0, 0, 0.65);backdrop-filter:blur(6px)}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-queue-dialog,:host-context(.dark) .fu-dialog,:host-context([data-theme=dark]) .fu-queue-dialog,:host-context([data-theme=dark]) .fu-dialog,:host(.dark) .fu-queue-dialog,:host(.dark) .fu-dialog,:host([data-theme=dark]) .fu-queue-dialog,:host([data-theme=dark]) .fu-dialog{background:var(--bg-primary, #1e293b);box-shadow:0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08)}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-inline-trigger,:host-context([data-theme=dark]) .fu-inline-trigger,:host(.dark) .fu-inline-trigger,:host([data-theme=dark]) .fu-inline-trigger{border-color:var(--border-default, #334155);color:var(--text-primary, #e2e8f0)}:host-context(.dark) .fu-inline-trigger:hover:not(.fu-inline-disabled),:host-context([data-theme=dark]) .fu-inline-trigger:hover:not(.fu-inline-disabled),:host(.dark) .fu-inline-trigger:hover:not(.fu-inline-disabled),:host([data-theme=dark]) .fu-inline-trigger:hover:not(.fu-inline-disabled){background:rgba(255, 255, 255, 0.06);border-color:var(--color-primary, #10b981);color:#34d399;box-shadow:0 0 0 3px rgba(16, 185, 129, 0.12)}:host-context(.dark) .fu-inline-trigger.fu-inline-active,:host-context([data-theme=dark]) .fu-inline-trigger.fu-inline-active,:host(.dark) .fu-inline-trigger.fu-inline-active,:host([data-theme=dark]) .fu-inline-trigger.fu-inline-active{border-color:#34d399;color:#34d399;background:rgba(52, 211, 153, 0.06)}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-upload-mode-badge.is-auto,:host-context([data-theme=dark]) .fu-upload-mode-badge.is-auto,:host(.dark) .fu-upload-mode-badge.is-auto,:host([data-theme=dark]) .fu-upload-mode-badge.is-auto{background:rgba(16, 185, 129, 0.15);color:#34d399;border-color:rgba(52, 211, 153, 0.3)}:host-context(.dark) .fu-upload-mode-badge.is-manual,:host-context([data-theme=dark]) .fu-upload-mode-badge.is-manual,:host(.dark) .fu-upload-mode-badge.is-manual,:host([data-theme=dark]) .fu-upload-mode-badge.is-manual{background:rgba(99, 102, 241, 0.15);color:#a5b4fc;border-color:rgba(165, 180, 252, 0.3)}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-queue-manual-banner,:host-context([data-theme=dark]) .fu-queue-manual-banner,:host(.dark) .fu-queue-manual-banner,:host([data-theme=dark]) .fu-queue-manual-banner{background:rgba(99, 102, 241, 0.08);border-bottom-color:rgba(99, 102, 241, 0.2);color:var(--text-secondary, #94a3b8)}:host-context(.dark) .fu-queue-manual-banner strong,:host-context([data-theme=dark]) .fu-queue-manual-banner strong,:host(.dark) .fu-queue-manual-banner strong,:host([data-theme=dark]) .fu-queue-manual-banner strong{color:#a5b4fc}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-queue-header,:host-context(.dark) .fu-dialog-header,:host-context([data-theme=dark]) .fu-queue-header,:host-context([data-theme=dark]) .fu-dialog-header,:host(.dark) .fu-queue-header,:host(.dark) .fu-dialog-header,:host([data-theme=dark]) .fu-queue-header,:host([data-theme=dark]) .fu-dialog-header{border-bottom-color:var(--border-default, #334155)}:host-context(.dark) .fu-queue-title,:host-context(.dark) .fu-dialog-title,:host-context([data-theme=dark]) .fu-queue-title,:host-context([data-theme=dark]) .fu-dialog-title,:host(.dark) .fu-queue-title,:host(.dark) .fu-dialog-title,:host([data-theme=dark]) .fu-queue-title,:host([data-theme=dark]) .fu-dialog-title{color:var(--text-primary, #f1f5f9)}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-queue-count-pill,:host-context([data-theme=dark]) .fu-queue-count-pill,:host(.dark) .fu-queue-count-pill,:host([data-theme=dark]) .fu-queue-count-pill{background:rgba(16, 185, 129, 0.18);color:#34d399;border-color:rgba(52, 211, 153, 0.3)}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-queue-errors,:host-context([data-theme=dark]) .fu-queue-errors,:host(.dark) .fu-queue-errors,:host([data-theme=dark]) .fu-queue-errors{background:rgba(239, 68, 68, 0.1);border-bottom-color:rgba(239, 68, 68, 0.25)}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-queue-summary,:host-context([data-theme=dark]) .fu-queue-summary,:host(.dark) .fu-queue-summary,:host([data-theme=dark]) .fu-queue-summary{background:var(--bg-secondary, #0f172a);border-bottom-color:var(--border-default, #334155)}:host-context(.dark) .fu-queue-summary-stat,:host-context([data-theme=dark]) .fu-queue-summary-stat,:host(.dark) .fu-queue-summary-stat,:host([data-theme=dark]) .fu-queue-summary-stat{color:var(--text-secondary, #94a3b8)}:host-context(.dark) .fu-queue-summary-stat.is-auto,:host-context([data-theme=dark]) .fu-queue-summary-stat.is-auto,:host(.dark) .fu-queue-summary-stat.is-auto,:host([data-theme=dark]) .fu-queue-summary-stat.is-auto{color:#93c5fd}:host-context(.dark) .fu-queue-summary-stat.is-complete,:host-context([data-theme=dark]) .fu-queue-summary-stat.is-complete,:host(.dark) .fu-queue-summary-stat.is-complete,:host([data-theme=dark]) .fu-queue-summary-stat.is-complete{color:#34d399}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-queue-list,:host-context([data-theme=dark]) .fu-queue-list,:host(.dark) .fu-queue-list,:host([data-theme=dark]) .fu-queue-list{scrollbar-color:var(--border-default, #334155) transparent;scrollbar-width:thin}:host-context(.dark) .fu-queue-empty,:host-context([data-theme=dark]) .fu-queue-empty,:host(.dark) .fu-queue-empty,:host([data-theme=dark]) .fu-queue-empty{color:var(--text-muted, #64748b)}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-file-item,:host-context([data-theme=dark]) .fu-file-item,:host(.dark) .fu-file-item,:host([data-theme=dark]) .fu-file-item{border-bottom-color:var(--border-default, #1e293b)}:host-context(.dark) .fu-file-item.is-clickable:hover,:host-context([data-theme=dark]) .fu-file-item.is-clickable:hover,:host(.dark) .fu-file-item.is-clickable:hover,:host([data-theme=dark]) .fu-file-item.is-clickable:hover{background:rgba(255, 255, 255, 0.05);box-shadow:inset 0 0 0 1.5px var(--border-default, #334155)}:host-context(.dark) .fu-file-name,:host-context([data-theme=dark]) .fu-file-name,:host(.dark) .fu-file-name,:host([data-theme=dark]) .fu-file-name{color:var(--text-primary, #f1f5f9)}:host-context(.dark) .fu-file-meta,:host-context([data-theme=dark]) .fu-file-meta,:host(.dark) .fu-file-meta,:host([data-theme=dark]) .fu-file-meta{color:var(--text-secondary, #94a3b8)}:host-context(.dark) .fu-file-error-msg,:host-context([data-theme=dark]) .fu-file-error-msg,:host(.dark) .fu-file-error-msg,:host([data-theme=dark]) .fu-file-error-msg{color:#f87171}:host-context(.dark) .fu-remove,:host-context([data-theme=dark]) .fu-remove,:host(.dark) .fu-remove,:host([data-theme=dark]) .fu-remove{color:#64748b !important}:host-context(.dark) .fu-remove:hover,:host-context([data-theme=dark]) .fu-remove:hover,:host(.dark) .fu-remove:hover,:host([data-theme=dark]) .fu-remove:hover{color:#f87171 !important}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-queue-footer,:host-context([data-theme=dark]) .fu-queue-footer,:host(.dark) .fu-queue-footer,:host([data-theme=dark]) .fu-queue-footer{background:var(--bg-secondary, #0f172a);border-top-color:var(--border-default, #334155)}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-status-badge.is-success,:host-context([data-theme=dark]) .fu-status-badge.is-success,:host(.dark) .fu-status-badge.is-success,:host([data-theme=dark]) .fu-status-badge.is-success{background:rgba(16, 185, 129, 0.15);color:#34d399}:host-context(.dark) .fu-status-badge.is-error,:host-context([data-theme=dark]) .fu-status-badge.is-error,:host(.dark) .fu-status-badge.is-error,:host([data-theme=dark]) .fu-status-badge.is-error{background:rgba(239, 68, 68, 0.15);color:#f87171}:host-context(.dark) .fu-status-badge.is-pending,:host-context([data-theme=dark]) .fu-status-badge.is-pending,:host(.dark) .fu-status-badge.is-pending,:host([data-theme=dark]) .fu-status-badge.is-pending{background:rgba(99, 102, 241, 0.15);color:#a5b4fc}:host-context(.dark) .fu-status-badge.is-uploading,:host-context([data-theme=dark]) .fu-status-badge.is-uploading,:host(.dark) .fu-status-badge.is-uploading,:host([data-theme=dark]) .fu-status-badge.is-uploading{background:rgba(59, 130, 246, 0.15);color:#93c5fd}:host-context(.dark) .fu-status-badge.is-validating,:host-context([data-theme=dark]) .fu-status-badge.is-validating,:host(.dark) .fu-status-badge.is-validating,:host([data-theme=dark]) .fu-status-badge.is-validating{background:rgba(245, 158, 11, 0.15);color:#fcd34d}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-dialog-preview,:host-context([data-theme=dark]) .fu-dialog-preview,:host(.dark) .fu-dialog-preview,:host([data-theme=dark]) .fu-dialog-preview{background:var(--bg-secondary, #0f172a);border-bottom-color:var(--border-default, #334155)}:host-context(.dark) .fu-dialog-image,:host-context([data-theme=dark]) .fu-dialog-image,:host(.dark) .fu-dialog-image,:host([data-theme=dark]) .fu-dialog-image{box-shadow:0 4px 24px rgba(0, 0, 0, 0.4)}:host-context(.dark) .fu-dialog-name,:host-context([data-theme=dark]) .fu-dialog-name,:host(.dark) .fu-dialog-name,:host([data-theme=dark]) .fu-dialog-name{color:var(--text-primary, #f1f5f9)}:host-context(.dark) .fu-dialog-meta-item,:host-context([data-theme=dark]) .fu-dialog-meta-item,:host(.dark) .fu-dialog-meta-item,:host([data-theme=dark]) .fu-dialog-meta-item{color:var(--text-secondary, #94a3b8)}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-dialog-badge.is-success,:host-context([data-theme=dark]) .fu-dialog-badge.is-success,:host(.dark) .fu-dialog-badge.is-success,:host([data-theme=dark]) .fu-dialog-badge.is-success{background:rgba(16, 185, 129, 0.15);color:#34d399}:host-context(.dark) .fu-dialog-badge.is-error,:host-context([data-theme=dark]) .fu-dialog-badge.is-error,:host(.dark) .fu-dialog-badge.is-error,:host([data-theme=dark]) .fu-dialog-badge.is-error{background:rgba(239, 68, 68, 0.15);color:#f87171}:host-context(.dark) .fu-dialog-badge.is-pending,:host-context([data-theme=dark]) .fu-dialog-badge.is-pending,:host(.dark) .fu-dialog-badge.is-pending,:host([data-theme=dark]) .fu-dialog-badge.is-pending{background:rgba(99, 102, 241, 0.15);color:#a5b4fc}:host-context(.dark) .fu-dialog-badge.is-uploading,:host-context([data-theme=dark]) .fu-dialog-badge.is-uploading,:host(.dark) .fu-dialog-badge.is-uploading,:host([data-theme=dark]) .fu-dialog-badge.is-uploading{background:rgba(59, 130, 246, 0.15);color:#93c5fd}:host-context(.dark) .fu-dialog-badge.is-validating,:host-context([data-theme=dark]) .fu-dialog-badge.is-validating,:host(.dark) .fu-dialog-badge.is-validating,:host([data-theme=dark]) .fu-dialog-badge.is-validating{background:rgba(245, 158, 11, 0.15);color:#fcd34d}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-progress-bar,:host-context(.dark) .fu-dialog-progress,:host-context([data-theme=dark]) .fu-progress-bar,:host-context([data-theme=dark]) .fu-dialog-progress,:host(.dark) .fu-progress-bar,:host(.dark) .fu-dialog-progress,:host([data-theme=dark]) .fu-progress-bar,:host([data-theme=dark]) .fu-dialog-progress{background:rgba(255, 255, 255, 0.08)}:host-context(.dark) .fu-dialog-footer,:host-context([data-theme=dark]) .fu-dialog-footer,:host(.dark) .fu-dialog-footer,:host([data-theme=dark]) .fu-dialog-footer{border-top-color:var(--border-default, #334155)}:host-context(.dark) .fu-dialog-nav-count,:host-context([data-theme=dark]) .fu-dialog-nav-count,:host(.dark) .fu-dialog-nav-count,:host([data-theme=dark]) .fu-dialog-nav-count{color:var(--text-secondary, #94a3b8)}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-zone-queue-badge,:host-context([data-theme=dark]) .fu-zone-queue-badge,:host(.dark) .fu-zone-queue-badge,:host([data-theme=dark]) .fu-zone-queue-badge{background:rgba(16, 185, 129, 0.12);border-color:rgba(52, 211, 153, 0.3);color:#34d399}:host-context(.dark) .fu-zone-queue-badge:hover,:host-context([data-theme=dark]) .fu-zone-queue-badge:hover,:host(.dark) .fu-zone-queue-badge:hover,:host([data-theme=dark]) .fu-zone-queue-badge:hover{background:rgba(16, 185, 129, 0.22)}:host-context(.dark) .fu-view-queue-btn,:host-context([data-theme=dark]) .fu-view-queue-btn,:host(.dark) .fu-view-queue-btn,:host([data-theme=dark]) .fu-view-queue-btn{background:var(--bg-secondary, #1e293b);border-color:var(--border-default, #334155);color:var(--text-primary, #f1f5f9)}:host-context(.dark) .fu-view-queue-btn:hover,:host-context([data-theme=dark]) .fu-view-queue-btn:hover,:host(.dark) .fu-view-queue-btn:hover,:host([data-theme=dark]) .fu-view-queue-btn:hover{background:rgba(16, 185, 129, 0.1);border-color:#34d399;color:#34d399}:host-context(.dark),:host-context([data-theme=dark]),:host(.dark),:host([data-theme=dark]){}:host-context(.dark) .fu-zone-has-files,:host-context([data-theme=dark]) .fu-zone-has-files,:host(.dark) .fu-zone-has-files,:host([data-theme=dark]) .fu-zone-has-files{background:rgba(16, 185, 129, 0.05)}@media (prefers-color-scheme: dark){.fu-queue-backdrop,.fu-dialog-backdrop{background:rgba(0, 0, 0, 0.65);backdrop-filter:blur(6px)}.fu-queue-dialog,.fu-dialog{background:var(--bg-primary, #1e293b);box-shadow:0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08)}.fu-inline-trigger{border-color:var(--border-default, #334155);color:var(--text-primary, #e2e8f0)}.fu-inline-trigger:hover:not(.fu-inline-disabled){background:rgba(255, 255, 255, 0.06);border-color:var(--color-primary, #10b981);color:#34d399;box-shadow:0 0 0 3px rgba(16, 185, 129, 0.12)}.fu-inline-trigger.fu-inline-active{border-color:#34d399;color:#34d399;background:rgba(52, 211, 153, 0.06)}.fu-upload-mode-badge.is-auto{background:rgba(16, 185, 129, 0.15);color:#34d399;border-color:rgba(52, 211, 153, 0.3)}.fu-upload-mode-badge.is-manual{background:rgba(99, 102, 241, 0.15);color:#a5b4fc;border-color:rgba(165, 180, 252, 0.3)}.fu-queue-manual-banner{background:rgba(99, 102, 241, 0.08);border-bottom-color:rgba(99, 102, 241, 0.2);color:var(--text-secondary, #94a3b8)}.fu-queue-manual-banner strong{color:#a5b4fc}.fu-queue-header,.fu-dialog-header{border-bottom-color:var(--border-default, #334155)}.fu-queue-title,.fu-dialog-title{color:var(--text-primary, #f1f5f9)}.fu-queue-count-pill{background:rgba(16, 185, 129, 0.18);color:#34d399;border-color:rgba(52, 211, 153, 0.3)}.fu-queue-errors{background:rgba(239, 68, 68, 0.1);border-bottom-color:rgba(239, 68, 68, 0.25)}.fu-queue-summary{background:var(--bg-secondary, #0f172a);border-bottom-color:var(--border-default, #334155)}.fu-queue-summary-stat{color:var(--text-secondary, #94a3b8)}.fu-queue-summary-stat.is-auto{color:#93c5fd}.fu-queue-summary-stat.is-complete{color:#34d399}.fu-queue-list{scrollbar-color:var(--border-default, #334155) transparent;scrollbar-width:thin}.fu-queue-empty{color:var(--text-muted, #64748b)}.fu-file-item{border-bottom-color:var(--border-default, #1e293b)}.fu-file-item.is-clickable:hover{background:rgba(255, 255, 255, 0.05);box-shadow:inset 0 0 0 1.5px var(--border-default, #334155)}.fu-file-name{color:var(--text-primary, #f1f5f9)}.fu-file-meta{color:var(--text-secondary, #94a3b8)}.fu-file-error-msg{color:#f87171}.fu-remove{color:#64748b !important}.fu-remove:hover{color:#f87171 !important}.fu-queue-footer{background:var(--bg-secondary, #0f172a);border-top-color:var(--border-default, #334155)}.fu-status-badge.is-success{background:rgba(16, 185, 129, 0.15);color:#34d399}.fu-status-badge.is-error{background:rgba(239, 68, 68, 0.15);color:#f87171}.fu-status-badge.is-pending{background:rgba(99, 102, 241, 0.15);color:#a5b4fc}.fu-status-badge.is-uploading{background:rgba(59, 130, 246, 0.15);color:#93c5fd}.fu-status-badge.is-validating{background:rgba(245, 158, 11, 0.15);color:#fcd34d}.fu-dialog-preview{background:var(--bg-secondary, #0f172a);border-bottom-color:var(--border-default, #334155)}.fu-dialog-image{box-shadow:0 4px 24px rgba(0, 0, 0, 0.4)}.fu-dialog-name{color:var(--text-primary, #f1f5f9)}.fu-dialog-meta-item{color:var(--text-secondary, #94a3b8)}.fu-dialog-badge.is-success{background:rgba(16, 185, 129, 0.15);color:#34d399}.fu-dialog-badge.is-error{background:rgba(239, 68, 68, 0.15);color:#f87171}.fu-dialog-badge.is-pending{background:rgba(99, 102, 241, 0.15);color:#a5b4fc}.fu-dialog-badge.is-uploading{background:rgba(59, 130, 246, 0.15);color:#93c5fd}.fu-dialog-badge.is-validating{background:rgba(245, 158, 11, 0.15);color:#fcd34d}.fu-progress-bar,.fu-dialog-progress{background:rgba(255, 255, 255, 0.08)}.fu-dialog-footer{border-top-color:var(--border-default, #334155)}.fu-dialog-nav-count{color:var(--text-secondary, #94a3b8)}.fu-zone-queue-badge{background:rgba(16, 185, 129, 0.12);border-color:rgba(52, 211, 153, 0.3);color:#34d399}.fu-zone-queue-badge:hover{background:rgba(16, 185, 129, 0.22)}.fu-view-queue-btn{background:var(--bg-secondary, #1e293b);border-color:var(--border-default, #334155);color:var(--text-primary, #f1f5f9)}.fu-view-queue-btn:hover{background:rgba(16, 185, 129, 0.1);border-color:#34d399;color:#34d399}.fu-zone-has-files{background:rgba(16, 185, 129, 0.05)}}`;
 
 const FileUpload = class {
     constructor(hostRef) {
@@ -34,10 +34,11 @@ const FileUpload = class {
     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 */
@@ -48,12 +49,16 @@ const FileUpload = class {
     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;
@@ -61,6 +66,10 @@ const FileUpload = class {
     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;
@@ -124,6 +133,8 @@ const FileUpload = class {
         this.files = [];
         this.errors = [];
         this.componentStatus = 'idle';
+        this.isQueueOpen = false;
+        this.previewFileIndex = -1;
     }
     formatSize(bytes) {
         if (bytes < 1024)
@@ -210,6 +221,15 @@ const FileUpload = class {
         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,
@@ -267,11 +287,6 @@ const FileUpload = class {
                 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';
@@ -289,6 +304,9 @@ const FileUpload = class {
         });
         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));
         }
@@ -368,47 +386,128 @@ const FileUpload = class {
             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()));
     }
 };
 FileUpload.style = fileUploadCss();

package/dist/esm/ui-horizontal-nav.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-DUsoYu9r.js';
+import { r as registerInstance, c as createEvent, h } from './index-Dqu2zaH1.js';
 
-const horizontalNavCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;width:100%}.horizontal-nav-container{position:relative;display:flex;align-items:center;width:100%}.horizontal-nav-container.scrollable .horizontal-nav{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.horizontal-nav-container.scrollable .horizontal-nav::-webkit-scrollbar{display:none}.horizontal-nav{display:flex;width:100%;background-color:#ffffff;border-radius:8px;padding:4px}.nav-list{display:flex;list-style:none;margin:0;padding:0;gap:4px;width:100%}.horizontal-nav.full-width .nav-list{flex:1}.horizontal-nav.full-width .nav-list-item{flex:1}.horizontal-nav.full-width .nav-item{width:100%;justify-content:center}.horizontal-nav.align-start .nav-list{justify-content:flex-start}.horizontal-nav.align-center .nav-list{justify-content:center}.horizontal-nav.align-end .nav-list{justify-content:flex-end}.horizontal-nav.align-space-between .nav-list{justify-content:space-between}.nav-list-item{display:flex}.nav-item{display:flex;align-items:center;gap:8px;padding:8px 16px;background:none;border:none;border-radius:6px;color:#64748b;text-decoration:none;font-weight:500;cursor:pointer;transition:all 0.2s ease;white-space:nowrap;font-size:14px;position:relative}.horizontal-nav.size-sm .nav-item{padding:6px 12px;font-size:12px;gap:6px}.horizontal-nav.size-md .nav-item{padding:8px 16px;font-size:14px;gap:8px}.horizontal-nav.size-lg .nav-item{padding:10px 20px;font-size:16px;gap:10px}.horizontal-nav.variant-default .nav-item:hover:not(.disabled):not(.active){background-color:#f1f5f9;color:#475569}.horizontal-nav.variant-default .nav-item.active{background-color:#eff6ff;color:#3b82f6}.horizontal-nav.variant-pills .nav-item{border-radius:20px}.horizontal-nav.variant-pills .nav-item:hover:not(.disabled):not(.active){background-color:#f1f5f9;color:#475569}.horizontal-nav.variant-pills .nav-item.active{background-color:#3b82f6;color:white}.horizontal-nav.variant-underline{background-color:transparent;border-bottom:1px solid #e2e8f0;border-radius:0;padding:0}.horizontal-nav.variant-underline .nav-item{border-radius:0;padding-bottom:12px;margin-bottom:-1px}.horizontal-nav.variant-underline .nav-item::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:transparent;transition:background-color 0.2s ease}.horizontal-nav.variant-underline .nav-item:hover:not(.disabled):not(.active){color:#475569}.horizontal-nav.variant-underline .nav-item:hover:not(.disabled):not(.active)::after{background-color:#cbd5e1}.horizontal-nav.variant-underline .nav-item.active{color:#3b82f6}.horizontal-nav.variant-underline .nav-item.active::after{background-color:#3b82f6}.horizontal-nav.variant-segmented{background-color:#f1f5f9;border-radius:8px;padding:4px}.horizontal-nav.variant-segmented .nav-item{background-color:transparent}.horizontal-nav.variant-segmented .nav-item:hover:not(.disabled):not(.active){background-color:rgba(255, 255, 255, 0.5)}.horizontal-nav.variant-segmented .nav-item.active{background-color:white;color:#1e293b;box-shadow:0 1px 3px rgba(0, 0, 0, 0.1)}.nav-item.disabled{opacity:0.4;cursor:not-allowed}.nav-item-content{display:flex;align-items:center;gap:inherit}.nav-icon{display:inline-flex;align-items:center;font-size:1.1em;line-height:1}.nav-icon svg{width:1em;height:1em;fill:currentColor}.nav-label{line-height:1}.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;background-color:#ef4444;color:white;font-size:11px;font-weight:600;border-radius:10px;line-height:1}.nav-item.active .nav-badge{background-color:#dc2626}.horizontal-nav.with-divider .nav-list-item:not(:last-child)::after{content:"";width:1px;height:20px;background-color:#e2e8f0;margin:auto 4px}.scroll-button{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;display:flex;align-items:center;justify-content:center;background-color:white;border:1px solid #e2e8f0;border-radius:50%;cursor:pointer;z-index:10;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);transition:all 0.2s ease}.scroll-button:hover{background-color:#f8fafc;border-color:#cbd5e1}.scroll-button.left{left:4px}.scroll-button.right{right:4px}.scroll-button svg{width:16px;height:16px;color:#64748b}.horizontal-nav.display-list{padding:0;background:transparent}.horizontal-nav.display-list .nav-list{flex-direction:column;gap:0}.horizontal-nav.display-list .nav-list-item{width:100%;border-bottom:1px solid #e5e7eb}.horizontal-nav.display-list .nav-list-item:last-child{border-bottom:none}.horizontal-nav.display-list .nav-item{width:100%;padding:12px 16px;border-radius:0;justify-content:flex-start;background-color:#ffffff}.horizontal-nav.display-list .nav-item:hover{background-color:#f9fafb}.horizontal-nav.display-list .nav-item.active{background-color:#eff6ff;border-left:3px solid #3b82f6;padding-left:13px}.horizontal-nav.display-list.variant-pills .nav-item,.horizontal-nav.display-list.variant-underline .nav-item,.horizontal-nav.display-list.variant-segmented .nav-item{border-radius:0}.horizontal-nav.display-list.variant-pills .nav-item.active{background-color:#eff6ff}.horizontal-nav.display-list.size-sm .nav-item{padding:8px 12px}.horizontal-nav.display-list.size-sm .nav-item.active{padding-left:9px}.horizontal-nav.display-list.size-lg .nav-item{padding:16px 20px}.horizontal-nav.display-list.size-lg .nav-item.active{padding-left:17px}@media (max-width: 640px){.horizontal-nav.size-md .nav-item{padding:6px 12px;font-size:13px}.horizontal-nav.size-lg .nav-item{padding:8px 16px;font-size:14px}}`;
+const horizontalNavCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;width:100%}.horizontal-nav-container{position:relative;display:flex;align-items:center;width:100%}.horizontal-nav-container.scrollable .horizontal-nav{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.horizontal-nav-container.scrollable .horizontal-nav::-webkit-scrollbar{display:none}.horizontal-nav{display:flex;width:100%;background-color:#ffffff;border-radius:8px;padding:4px}.nav-list{display:flex;list-style:none;margin:0;padding:0;gap:4px;width:100%}.horizontal-nav.full-width .nav-list{flex:1}.horizontal-nav.full-width .nav-list-item{flex:1}.horizontal-nav.full-width .nav-item{width:100%;justify-content:center}.horizontal-nav.align-start .nav-list{justify-content:flex-start}.horizontal-nav.align-center .nav-list{justify-content:center}.horizontal-nav.align-end .nav-list{justify-content:flex-end}.horizontal-nav.align-space-between .nav-list{justify-content:space-between}.nav-list-item{display:flex}.nav-item{display:flex;align-items:center;gap:8px;padding:8px 16px;background:none;border:none;border-radius:6px;color:#64748b;text-decoration:none;font-weight:500;cursor:pointer;transition:all 0.2s ease;white-space:nowrap;font-size:14px;position:relative}.horizontal-nav.size-sm .nav-item{padding:6px 12px;font-size:12px;gap:6px}.horizontal-nav.size-md .nav-item{padding:8px 16px;font-size:14px;gap:8px}.horizontal-nav.size-lg .nav-item{padding:10px 20px;font-size:16px;gap:10px}.horizontal-nav.variant-default .nav-item:hover:not(.disabled):not(.active){background-color:#f1f5f9;color:#475569}.horizontal-nav.variant-default .nav-item.active{background-color:var(--color-primary-subtle, rgba(59, 130, 246, 0.1));color:var(--color-primary, #3b82f6)}.horizontal-nav.variant-pills .nav-item{border-radius:20px}.horizontal-nav.variant-pills .nav-item:hover:not(.disabled):not(.active){background-color:#f1f5f9;color:#475569}.horizontal-nav.variant-pills .nav-item.active{background-color:var(--color-primary, #3b82f6);color:var(--text-inverse, white)}.horizontal-nav.variant-underline{background-color:transparent;border-bottom:1px solid #e2e8f0;border-radius:0;padding:0}.horizontal-nav.variant-underline .nav-item{border-radius:0;padding-bottom:12px;margin-bottom:-1px}.horizontal-nav.variant-underline .nav-item::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:transparent;transition:background-color 0.2s ease}.horizontal-nav.variant-underline .nav-item:hover:not(.disabled):not(.active){color:#475569}.horizontal-nav.variant-underline .nav-item:hover:not(.disabled):not(.active)::after{background-color:#cbd5e1}.horizontal-nav.variant-underline .nav-item.active{color:var(--color-primary, #3b82f6)}.horizontal-nav.variant-underline .nav-item.active::after{background-color:var(--color-primary, #3b82f6)}.horizontal-nav.variant-segmented{background-color:#f1f5f9;border-radius:8px;padding:4px}.horizontal-nav.variant-segmented .nav-item{background-color:transparent}.horizontal-nav.variant-segmented .nav-item:hover:not(.disabled):not(.active){background-color:rgba(255, 255, 255, 0.5)}.horizontal-nav.variant-segmented .nav-item.active{background-color:white;color:#1e293b;box-shadow:0 1px 3px rgba(0, 0, 0, 0.1)}.nav-item.disabled{opacity:0.4;cursor:not-allowed}.nav-item-content{display:flex;align-items:center;gap:inherit}.nav-icon{display:inline-flex;align-items:center;font-size:1.1em;line-height:1}.nav-icon svg{width:1em;height:1em;fill:currentColor}.nav-label{line-height:1}.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;background-color:#ef4444;color:white;font-size:11px;font-weight:600;border-radius:10px;line-height:1}.nav-item.active .nav-badge{background-color:#dc2626}.horizontal-nav.with-divider .nav-list-item:not(:last-child)::after{content:"";width:1px;height:20px;background-color:#e2e8f0;margin:auto 4px}.scroll-button{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;display:flex;align-items:center;justify-content:center;background-color:white;border:1px solid #e2e8f0;border-radius:50%;cursor:pointer;z-index:10;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);transition:all 0.2s ease}.scroll-button:hover{background-color:#f8fafc;border-color:#cbd5e1}.scroll-button.left{left:4px}.scroll-button.right{right:4px}.scroll-button svg{width:16px;height:16px;color:#64748b}.horizontal-nav.display-list{padding:0;background:transparent}.horizontal-nav.display-list .nav-list{flex-direction:column;gap:0}.horizontal-nav.display-list .nav-list-item{width:100%;border-bottom:1px solid #e5e7eb}.horizontal-nav.display-list .nav-list-item:last-child{border-bottom:none}.horizontal-nav.display-list .nav-item{width:100%;padding:12px 16px;border-radius:0;justify-content:flex-start;background-color:#ffffff}.horizontal-nav.display-list .nav-item:hover{background-color:#f9fafb}.horizontal-nav.display-list .nav-item.active{background-color:var(--color-primary-subtle, rgba(59, 130, 246, 0.1));border-left:3px solid var(--color-primary, #3b82f6);padding-left:13px}.horizontal-nav.display-list.variant-pills .nav-item,.horizontal-nav.display-list.variant-underline .nav-item,.horizontal-nav.display-list.variant-segmented .nav-item{border-radius:0}.horizontal-nav.display-list.variant-pills .nav-item.active{background-color:var(--color-primary-subtle, rgba(59, 130, 246, 0.1))}.horizontal-nav.display-list.size-sm .nav-item{padding:8px 12px}.horizontal-nav.display-list.size-sm .nav-item.active{padding-left:9px}.horizontal-nav.display-list.size-lg .nav-item{padding:16px 20px}.horizontal-nav.display-list.size-lg .nav-item.active{padding-left:17px}@media (max-width: 640px){.horizontal-nav.size-md .nav-item{padding:6px 12px;font-size:13px}.horizontal-nav.size-lg .nav-item{padding:8px 16px;font-size:14px}}`;
 
 const HorizontalNav = class {
     constructor(hostRef) {

package/dist/esm/ui-knob.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DUsoYu9r.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Dqu2zaH1.js';
 
 const knobCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:inline-block}.knob-wrapper{display:flex;flex-direction:column;align-items:center;gap:12px}.knob-container{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;touch-action:none;transition:transform 0.1s ease}.knob-container:hover:not(.disabled):not(.readonly){transform:scale(1.02)}.knob-container.dragging{cursor:grabbing;transform:scale(1.05)}.knob-container.disabled,.knob-container.readonly{cursor:not-allowed;opacity:0.5}.knob-svg{display:block;overflow:visible}.value-arc{filter:drop-shadow(0 2px 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.3));transition:stroke 0.2s ease}.knob-container:hover:not(.disabled):not(.readonly) .value-arc{filter:drop-shadow(0 3px 6px rgba(var(--color-primary-rgb, 59, 130, 246), 0.4))}.center-dot{filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1))}.indicator{transition:all 0.1s ease;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2))}.value-label{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:flex;align-items:baseline;gap:2px;pointer-events:none;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}.value-number{font-size:calc(var(--knob-size, 120px) * 0.2);font-weight:700;color:var(--text-primary, #1e293b);line-height:1}.value-suffix{font-size:calc(var(--knob-size, 120px) * 0.12);font-weight:600;color:var(--text-muted, #64748b);line-height:1}.min-max-labels{display:flex;justify-content:space-between;width:100%;font-size:12px;color:var(--text-muted, #64748b);font-weight:500;padding:0 8px}.min-label,.max-label{white-space:nowrap}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.8}}.knob-container.dragging .value-label{animation:pulse 0.3s ease-in-out}.knob-container:active:not(.disabled):not(.readonly){transform:scale(1.05)}.knob-container:focus-visible{outline:2px solid var(--color-primary, #10b981);outline-offset:4px;border-radius:50%}@media (max-width: 640px){.value-number{font-size:calc(var(--knob-size, 120px) * 0.18)}.value-suffix{font-size:calc(var(--knob-size, 120px) * 0.11)}.min-max-labels{font-size:11px}}`;