create-nativecore 0.1.0 → 0.2.0

package/template/src/components/core/nc-dropdown.ts

@@ -0,0 +1,178 @@
+/**
+ * NcDropdown Component
+ *
+ * A generic trigger + floating-panel component. The trigger is whatever
+ * is in slot[name="trigger"]; the content panel is the default slot.
+ *
+ * Attributes:
+ *   - open: boolean — visible state
+ *   - placement: 'bottom-start'|'bottom-end'|'bottom'|'top-start'|'top-end'|'top' (default: 'bottom-start')
+ *   - close-on-select: boolean — close when a [data-value] child is clicked (default: true)
+ *   - disabled: boolean
+ *   - offset: number — gap in px between trigger and panel (default: 6)
+ *   - width: string — CSS width of panel (default: 'auto'; use 'trigger' to match trigger width)
+ *
+ * Events:
+ *   - open:   CustomEvent
+ *   - close:  CustomEvent
+ *   - select: CustomEvent<{ value: string; label: string }> — when a [data-value] child is clicked
+ *
+ * Usage:
+ *   <nc-dropdown>
+ *     <nc-button slot="trigger">Options</nc-button>
+ *     <nc-menu>
+ *       <nc-menu-item data-value="edit">Edit</nc-menu-item>
+ *       <nc-menu-item data-value="delete">Delete</nc-menu-item>
+ *     </nc-menu>
+ *   </nc-dropdown>
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+
+export class NcDropdown extends Component {
+    static useShadowDOM = true;
+
+    static get observedAttributes() {
+        return ['open', 'placement', 'close-on-select', 'disabled', 'offset', 'width'];
+    }
+
+    private _outsideClick: ((e: MouseEvent) => void) | null = null;
+
+    template() {
+        const open = this.hasAttribute('open');
+        const placement = this.getAttribute('placement') || 'bottom-start';
+
+        // Derive alignment classes from placement string
+        const [vSide, hAlign] = placement.split('-') as [string, string | undefined];
+        const above = vSide === 'top';
+
+        return `
+            <style>
+                :host { display: inline-flex; position: relative; vertical-align: middle; }
+
+                .trigger-slot {
+                    display: contents;
+                }
+
+                .panel {
+                    position: absolute;
+                    ${above ? 'bottom: calc(100% + var(--dropdown-offset, 6px));' : 'top: calc(100% + var(--dropdown-offset, 6px));'}
+                    ${!hAlign || hAlign === 'start' ? 'left: 0;' : hAlign === 'end' ? 'right: 0;' : 'left: 50%; transform: translateX(-50%);'}
+                    z-index: 600;
+                    background: var(--nc-bg);
+                    border: 1px solid var(--nc-border);
+                    border-radius: var(--nc-radius-md, 8px);
+                    box-shadow: var(--nc-shadow-lg);
+                    min-width: 160px;
+                    overflow: hidden;
+                    opacity: ${open ? '1' : '0'};
+                    pointer-events: ${open ? 'auto' : 'none'};
+                    transform-origin: ${above ? 'bottom' : 'top'} ${!hAlign || hAlign === 'start' ? 'left' : hAlign === 'end' ? 'right' : 'center'};
+                    transform: ${open
+                        ? (!hAlign || hAlign !== 'center' ? 'none' : 'translateX(-50%)')
+                        : (!hAlign || hAlign !== 'center'
+                            ? `scale(0.97) translateY(${above ? '4px' : '-4px'})`
+                            : `translateX(-50%) scale(0.97) translateY(${above ? '4px' : '-4px'})`)};
+                    transition: opacity var(--nc-transition-fast), transform var(--nc-transition-fast);
+                }
+            </style>
+            <span class="trigger-slot">
+                <slot name="trigger"></slot>
+            </span>
+            <div class="panel" role="menu" aria-hidden="${!open}">
+                <slot></slot>
+            </div>
+        `;
+    }
+
+    onMount() {
+        this._bindEvents();
+    }
+
+    private _bindEvents() {
+        // Toggle on trigger click
+        const triggerSlot = this.shadowRoot!.querySelector<HTMLSlotElement>('slot[name="trigger"]')!;
+        triggerSlot.addEventListener('slotchange', () => this._hookTrigger());
+        this._hookTrigger();
+
+        // Close on outside click
+        this._outsideClick = (e: MouseEvent) => {
+            if (!this.contains(e.target as Node) && !this.shadowRoot!.contains(e.target as Node)) {
+                this._setOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', this._outsideClick);
+
+        // Close on Escape
+        document.addEventListener('keydown', (e: KeyboardEvent) => {
+            if (e.key === 'Escape' && this.hasAttribute('open')) this._setOpen(false);
+        });
+
+        // Select via [data-value] children in light DOM
+        this.addEventListener('click', (e: Event) => {
+            const target = (e.target as HTMLElement).closest<HTMLElement>('[data-value]');
+            if (!target) return;
+            const value = target.dataset.value ?? '';
+            const label = target.textContent?.trim() ?? '';
+            this.dispatchEvent(new CustomEvent('select', {
+                bubbles: true, composed: true,
+                detail: { value, label }
+            }));
+            if (this.getAttribute('close-on-select') !== 'false') {
+                this._setOpen(false);
+            }
+        });
+    }
+
+    private _hookTrigger() {
+        const slot = this.shadowRoot!.querySelector<HTMLSlotElement>('slot[name="trigger"]')!;
+        const nodes = slot.assignedElements();
+        nodes.forEach(node => {
+            (node as HTMLElement).addEventListener('click', (e: Event) => {
+                e.stopPropagation();
+                if (!this.hasAttribute('disabled')) this._setOpen(!this.hasAttribute('open'));
+            });
+        });
+    }
+
+    private _setOpen(open: boolean) {
+        if (open) {
+            this.setAttribute('open', '');
+        } else {
+            this.removeAttribute('open');
+        }
+    }
+
+    onUnmount() {
+        if (this._outsideClick) document.removeEventListener('mousedown', this._outsideClick);
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue === newValue) return;
+        if (name === 'open' && this._mounted) {
+            const open = this.hasAttribute('open');
+            const panel = this.$<HTMLElement>('.panel');
+            if (panel) {
+                const placement = this.getAttribute('placement') || 'bottom-start';
+                const [vSide, hAlign] = placement.split('-') as [string, string | undefined];
+                const above = vSide === 'top';
+                const center = hAlign === 'center';
+                panel.style.opacity = open ? '1' : '0';
+                panel.style.pointerEvents = open ? 'auto' : 'none';
+                panel.style.transform = open
+                    ? (center ? 'translateX(-50%)' : 'none')
+                    : (center
+                        ? `translateX(-50%) scale(0.97) translateY(${above ? '4px' : '-4px'})`
+                        : `scale(0.97) translateY(${above ? '4px' : '-4px'})`);
+                panel.setAttribute('aria-hidden', String(!open));
+            }
+            this.dispatchEvent(new CustomEvent(open ? 'open' : 'close', {
+                bubbles: true, composed: true
+            }));
+            return;
+        }
+        if (this._mounted) { this.render(); this._bindEvents(); }
+    }
+}
+
+defineComponent('nc-dropdown', NcDropdown);

package/template/src/components/core/nc-empty-state.ts

@@ -0,0 +1,134 @@
+/**
+ * NcEmptyState Component — empty state illustration + heading + action
+ *
+ * Attributes:
+ *   title        — main heading text
+ *   description  — secondary description text
+ *   icon         — preset icon name: 'inbox'|'search'|'folder'|'data'|'error'|'lock'|'custom'
+ *                  Use 'custom' and the icon slot for your own SVG.
+ *   size         — 'sm'|'md'(default)|'lg'
+ *   variant      — 'default'|'bordered'|'filled'
+ *
+ * Slots:
+ *   icon    — custom illustration/icon (use with icon="custom")
+ *   title   — overrides title attribute
+ *   description — overrides description attribute
+ *   actions — buttons / links below the description
+ *
+ * Usage:
+ *   <nc-empty-state title="No results found" description="Try adjusting your search." icon="search">
+ *     <div slot="actions">
+ *       <nc-button>Clear filters</nc-button>
+ *     </div>
+ *   </nc-empty-state>
+ */
+import { Component, defineComponent } from '@core/component.js';
+
+const ICONS: Record<string, string> = {
+    inbox: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+        <rect x="8" y="16" width="48" height="36" rx="4" stroke="currentColor" stroke-width="2.5"/>
+        <polyline points="8,30 26,42 38,42 56,30" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/>
+        <line x1="20" y1="24" x2="44" y2="24" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity=".5"/>
+        <line x1="20" y1="30" x2="32" y2="30" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity=".5"/>
+    </svg>`,
+    search: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+        <circle cx="27" cy="27" r="17" stroke="currentColor" stroke-width="2.5"/>
+        <line x1="39" y1="39" x2="56" y2="56" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
+        <line x1="21" y1="27" x2="33" y2="27" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity=".5"/>
+        <line x1="27" y1="21" x2="27" y2="33" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity=".5"/>
+    </svg>`,
+    folder: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+        <path d="M8 20a4 4 0 0 1 4-4h12l6 6h22a4 4 0 0 1 4 4v18a4 4 0 0 1-4 4H12a4 4 0 0 1-4-4V20z"
+              stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/>
+        <line x1="24" y1="38" x2="40" y2="38" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity=".5"/>
+    </svg>`,
+    data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+        <ellipse cx="32" cy="18" rx="20" ry="8" stroke="currentColor" stroke-width="2.5"/>
+        <path d="M12 18v10c0 4.4 9 8 20 8s20-3.6 20-8V18" stroke="currentColor" stroke-width="2.5"/>
+        <path d="M12 28v10c0 4.4 9 8 20 8s20-3.6 20-8V28" stroke="currentColor" stroke-width="2.5"/>
+    </svg>`,
+    error: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+        <circle cx="32" cy="32" r="24" stroke="currentColor" stroke-width="2.5"/>
+        <line x1="32" y1="20" x2="32" y2="36" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
+        <circle cx="32" cy="44" r="2.5" fill="currentColor"/>
+    </svg>`,
+    lock: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+        <rect x="14" y="28" width="36" height="26" rx="4" stroke="currentColor" stroke-width="2.5"/>
+        <path d="M20 28V20a12 12 0 0 1 24 0v8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
+        <circle cx="32" cy="41" r="4" stroke="currentColor" stroke-width="2.5"/>
+        <line x1="32" y1="45" x2="32" y2="50" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
+    </svg>`,
+};
+
+export class NcEmptyState extends Component {
+    static useShadowDOM = true;
+
+    template() {
+        const title       = this.getAttribute('title') ?? '';
+        const description = this.getAttribute('description') ?? '';
+        const icon        = this.getAttribute('icon') ?? 'inbox';
+        const size        = this.getAttribute('size') ?? 'md';
+        const variant     = this.getAttribute('variant') ?? 'default';
+
+        const iconSz  = size === 'sm' ? '56px' : size === 'lg' ? '96px' : '72px';
+        const titleFs = size === 'sm' ? 'var(--nc-font-size-base)' : size === 'lg' ? 'var(--nc-font-size-xl)' : 'var(--nc-font-size-lg)';
+        const padding = size === 'sm' ? 'var(--nc-spacing-lg)' : size === 'lg' ? 'var(--nc-spacing-2xl, 48px)' : 'var(--nc-spacing-xl, 40px)';
+
+        const variantStyle =
+            variant === 'bordered' ? 'border: 1px dashed var(--nc-border); border-radius: var(--nc-radius-lg);' :
+            variant === 'filled'   ? 'background: var(--nc-bg-secondary); border-radius: var(--nc-radius-lg);' :
+            '';
+
+        const hasCustomIcon = icon === 'custom';
+        const iconHtml = hasCustomIcon ? '' : (ICONS[icon] ?? ICONS.inbox);
+
+        return `
+            <style>
+                :host { display: block; }
+                .wrap {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    text-align: center;
+                    padding: ${padding};
+                    ${variantStyle}
+                    font-family: var(--nc-font-family);
+                }
+                .icon-wrap {
+                    width: ${iconSz};
+                    height: ${iconSz};
+                    color: var(--nc-text-muted);
+                    margin-bottom: var(--nc-spacing-md);
+                    opacity: 0.6;
+                }
+                .icon-wrap svg { width: 100%; height: 100%; }
+                .title {
+                    font-size: ${titleFs};
+                    font-weight: var(--nc-font-weight-semibold);
+                    color: var(--nc-text);
+                    margin: 0 0 var(--nc-spacing-xs);
+                }
+                .desc {
+                    font-size: var(--nc-font-size-sm);
+                    color: var(--nc-text-secondary);
+                    margin: 0 0 var(--nc-spacing-md);
+                    max-width: 360px;
+                    line-height: var(--nc-line-height-relaxed, 1.7);
+                }
+                .actions { display: flex; gap: var(--nc-spacing-sm); flex-wrap: wrap; justify-content: center; }
+                slot[name="title"]::slotted(*),
+                slot[name="description"]::slotted(*) { margin: 0; }
+            </style>
+            <div class="wrap">
+                <div class="icon-wrap">
+                    ${hasCustomIcon ? '<slot name="icon"></slot>' : iconHtml}
+                </div>
+                ${title ? `<p class="title">${title}</p>` : '<slot name="title"></slot>'}
+                ${description ? `<p class="desc">${description}</p>` : '<slot name="description"></slot>'}
+                <div class="actions"><slot name="actions"></slot></div>
+            </div>
+        `;
+    }
+}
+
+defineComponent('nc-empty-state', NcEmptyState);

package/template/src/components/core/nc-file-upload.ts

@@ -0,0 +1,354 @@
+/**
+ * NcFileUpload Component
+ *
+ * NativeCore Framework Core Component
+ *
+ * Attributes:
+ *   - name: string — form field name
+ *   - accept: string — file types (e.g. "image/*,.pdf")
+ *   - multiple: boolean — allow multiple file selection
+ *   - disabled: boolean — disabled state
+ *   - max-size: number — max file size in MB (default: no limit)
+ *   - variant: 'default' | 'compact' (default: 'default')
+ *
+ * Events:
+ *   - change: CustomEvent<{ files: File[]; name: string }>
+ *   - error: CustomEvent<{ message: string; files: File[] }>
+ *
+ * Usage:
+ *   <nc-file-upload name="avatar" accept="image/*"></nc-file-upload>
+ *   <nc-file-upload name="docs" accept=".pdf,.docx" multiple max-size="10"></nc-file-upload>
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+
+export class NcFileUpload extends Component {
+    static useShadowDOM = true;
+
+    static attributeOptions = {
+        variant: ['default', 'compact']
+    };
+
+    static get observedAttributes() {
+        return ['name', 'accept', 'multiple', 'disabled', 'max-size', 'variant'];
+    }
+
+    private _files: File[] = [];
+    private _dragging = false;
+
+    constructor() {
+        super();
+    }
+
+    template() {
+        const disabled = this.hasAttribute('disabled');
+        const multiple = this.hasAttribute('multiple');
+        const accept = this.getAttribute('accept') || '';
+        const maxSize = this.getAttribute('max-size');
+        const variant = this.getAttribute('variant') || 'default';
+        const isCompact = variant === 'compact';
+
+        const fileList = this._files.length
+            ? this._files.map((f, i) => `
+                <div class="file-item" data-index="${i}">
+                    <span class="file-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" width="14" height="14">
+                            <path d="M9 1H4a1 1 0 00-1 1v12a1 1 0 001 1h8a1 1 0 001-1V6L9 1z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
+                            <path d="M9 1v5h5" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
+                        </svg>
+                    </span>
+                    <span class="file-name">${f.name}</span>
+                    <span class="file-size">${this._formatSize(f.size)}</span>
+                    <button class="file-remove" data-index="${i}" aria-label="Remove ${f.name}" type="button">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" width="12" height="12">
+                            <path d="M2 2l8 8M10 2l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                        </svg>
+                    </button>
+                </div>
+            `).join('')
+            : '';
+
+        return `
+            <style>
+                :host {
+                    display: block;
+                    font-family: var(--nc-font-family);
+                    width: 100%;
+                }
+
+                .drop-zone {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    gap: var(--nc-spacing-sm);
+                    border: 2px dashed var(--nc-border-dark);
+                    border-radius: var(--nc-radius-lg);
+                    padding: ${isCompact ? 'var(--nc-spacing-md) var(--nc-spacing-lg)' : 'var(--nc-spacing-2xl) var(--nc-spacing-xl)'};
+                    cursor: ${disabled ? 'not-allowed' : 'pointer'};
+                    transition: border-color var(--nc-transition-fast), background var(--nc-transition-fast);
+                    background: var(--nc-bg-secondary);
+                    opacity: ${disabled ? '0.5' : '1'};
+                    text-align: center;
+                    position: relative;
+                }
+
+                .drop-zone.dragging {
+                    border-color: var(--nc-primary);
+                    background: rgba(16, 185, 129, 0.06);
+                }
+
+                .drop-zone:hover:not(.disabled) {
+                    border-color: var(--nc-primary);
+                    background: rgba(16, 185, 129, 0.04);
+                }
+
+                .upload-icon {
+                    color: var(--nc-text-muted);
+                    flex-shrink: 0;
+                }
+
+                .drop-zone.dragging .upload-icon {
+                    color: var(--nc-primary);
+                }
+
+                .drop-label {
+                    font-size: var(--nc-font-size-base);
+                    color: var(--nc-text);
+                    font-weight: var(--nc-font-weight-medium);
+                }
+
+                .drop-sub {
+                    font-size: var(--nc-font-size-sm);
+                    color: var(--nc-text-muted);
+                }
+
+                .browse-link {
+                    color: var(--nc-primary);
+                    font-weight: var(--nc-font-weight-semibold);
+                    cursor: pointer;
+                    text-decoration: underline;
+                    text-underline-offset: 2px;
+                }
+
+                /* Hidden native input */
+                input[type="file"] {
+                    position: absolute;
+                    inset: 0;
+                    opacity: 0;
+                    cursor: ${disabled ? 'not-allowed' : 'pointer'};
+                    width: 100%;
+                    height: 100%;
+                }
+
+                /* File list */
+                .file-list {
+                    display: flex;
+                    flex-direction: column;
+                    gap: var(--nc-spacing-xs);
+                    margin-top: ${this._files.length ? 'var(--nc-spacing-sm)' : '0'};
+                }
+
+                .file-item {
+                    display: flex;
+                    align-items: center;
+                    gap: var(--nc-spacing-sm);
+                    padding: var(--nc-spacing-xs) var(--nc-spacing-sm);
+                    background: var(--nc-bg);
+                    border: 1px solid var(--nc-border);
+                    border-radius: var(--nc-radius-md);
+                    font-size: var(--nc-font-size-sm);
+                }
+
+                .file-icon {
+                    color: var(--nc-primary);
+                    flex-shrink: 0;
+                    display: flex;
+                }
+
+                .file-name {
+                    flex: 1;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    color: var(--nc-text);
+                }
+
+                .file-size {
+                    color: var(--nc-text-muted);
+                    flex-shrink: 0;
+                    font-size: var(--nc-font-size-xs);
+                }
+
+                .file-remove {
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    color: var(--nc-text-muted);
+                    display: flex;
+                    align-items: center;
+                    padding: 2px;
+                    border-radius: var(--nc-radius-sm);
+                    transition: color var(--nc-transition-fast), background var(--nc-transition-fast);
+                    flex-shrink: 0;
+                }
+
+                .file-remove:hover {
+                    color: var(--nc-danger);
+                    background: rgba(239, 68, 68, 0.08);
+                }
+
+                .accept-hint {
+                    font-size: var(--nc-font-size-xs);
+                    color: var(--nc-text-muted);
+                    margin-top: var(--nc-spacing-xs);
+                }
+            </style>
+
+            <div class="drop-zone${this._dragging ? ' dragging' : ''}${disabled ? ' disabled' : ''}">
+                <input
+                    type="file"
+                    ${accept ? `accept="${accept}"` : ''}
+                    ${multiple ? 'multiple' : ''}
+                    ${disabled ? 'disabled' : ''}
+                    name="${this.getAttribute('name') || ''}"
+                    tabindex="-1"
+                />
+
+                <span class="upload-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+                        width="${isCompact ? '20' : '32'}" height="${isCompact ? '20' : '32'}">
+                        <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                        <polyline points="17 8 12 3 7 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                        <line x1="12" y1="3" x2="12" y2="15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                    </svg>
+                </span>
+
+                ${isCompact
+                    ? `<span class="drop-label"><span class="browse-link">Browse</span> or drop files here</span>`
+                    : `<span class="drop-label">Drop files here or <span class="browse-link">browse</span></span>
+                       <span class="drop-sub">${[accept ? `Accepted: ${accept}` : '', maxSize ? `Max ${maxSize} MB` : ''].filter(Boolean).join(' &bull; ') || 'Any file type accepted'}</span>`
+                }
+            </div>
+
+            ${this._files.length ? `<div class="file-list">${fileList}</div>` : ''}
+        `;
+    }
+
+    onMount() {
+        this._bindEvents();
+    }
+
+    private _bindEvents() {
+        const sr = this.shadowRoot!;
+        const dropZone = sr.querySelector('.drop-zone')!;
+        const input = sr.querySelector<HTMLInputElement>('input[type="file"]')!;
+
+        // Native input change
+        input.addEventListener('change', () => {
+            if (input.files) this._handleFiles(Array.from(input.files));
+        });
+
+        // Drag events — update _dragging state directly on the element, re-render only needed for file list
+        dropZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            if (!this._dragging) {
+                this._dragging = true;
+                dropZone.classList.add('dragging');
+                sr.querySelector('.upload-icon')?.classList.add('dragging');
+            }
+        });
+
+        dropZone.addEventListener('dragleave', (e) => {
+            // Only clear if leaving the drop zone entirely
+            if (!(e as DragEvent).relatedTarget || !dropZone.contains((e as DragEvent).relatedTarget as Node)) {
+                this._dragging = false;
+                dropZone.classList.remove('dragging');
+            }
+        });
+
+        dropZone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            this._dragging = false;
+            dropZone.classList.remove('dragging');
+            const dt = (e as DragEvent).dataTransfer;
+            if (dt?.files) this._handleFiles(Array.from(dt.files));
+        });
+
+        // Remove file button — event delegation
+        sr.addEventListener('click', (ev) => {
+            const btn = (ev.target as HTMLElement).closest('.file-remove') as HTMLElement | null;
+            if (!btn) return;
+            const idx = Number(btn.dataset.index);
+            this._removeFile(idx);
+        });
+    }
+
+    private _handleFiles(incoming: File[]) {
+        const maxSizeAttr = this.getAttribute('max-size');
+        const maxBytes = maxSizeAttr ? Number(maxSizeAttr) * 1024 * 1024 : Infinity;
+        const accept = this.getAttribute('accept') || '';
+        const multiple = this.hasAttribute('multiple');
+
+        const oversized: File[] = [];
+        let valid = incoming.filter(f => {
+            if (f.size > maxBytes) { oversized.push(f); return false; }
+            return true;
+        });
+
+        if (accept) {
+            const patterns = accept.split(',').map(p => p.trim());
+            valid = valid.filter(f => this._matchesAccept(f, patterns));
+        }
+
+        if (oversized.length) {
+            this.dispatchEvent(new CustomEvent('error', {
+                bubbles: true, composed: true,
+                detail: {
+                    message: `${oversized.map(f => f.name).join(', ')} exceed${oversized.length === 1 ? 's' : ''} the ${maxSizeAttr} MB limit.`,
+                    files: oversized
+                }
+            }));
+        }
+
+        if (!valid.length) return;
+
+        this._files = multiple ? [...this._files, ...valid] : [valid[0]];
+        this.render();
+        this._bindEvents();
+
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true, composed: true,
+            detail: { files: this._files, name: this.getAttribute('name') || '' }
+        }));
+    }
+
+    private _removeFile(index: number) {
+        this._files.splice(index, 1);
+        this.render();
+        this._bindEvents();
+    }
+
+    private _matchesAccept(file: File, patterns: string[]): boolean {
+        return patterns.some(p => {
+            if (p.startsWith('.')) return file.name.toLowerCase().endsWith(p.toLowerCase());
+            if (p.endsWith('/*')) return file.type.startsWith(p.slice(0, -2));
+            return file.type === p;
+        });
+    }
+
+    private _formatSize(bytes: number): string {
+        if (bytes < 1024) return `${bytes} B`;
+        if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue !== newValue && this._mounted) {
+            this.render();
+            this._bindEvents();
+        }
+    }
+}
+
+defineComponent('nc-file-upload', NcFileUpload);