@prolibu-suite/cobalt-core 0.1.2 → 0.2.0

package/dist/cjs/co-file-field.cjs.entry.js

@@ -0,0 +1,498 @@
+'use strict';
+
+var index = require('./index-DoFnrUVH.js');
+var requiredMark = require('./requiredMark-DA6y-4rp.js');
+
+/**
+ * Built-in UI string dictionary for co-file-field.
+ *
+ * Strategy mirrors dateI18n: the component ships es/en/pt strings keyed by the
+ * `locale` prop, with per-string prop overrides (uploadButtonText, dropText,
+ * uploadedTitle, helperText) for full host control. Templates use `{n}` (max
+ * files) and `{x}` (formatted max size) placeholders.
+ */
+const DICT = {
+    es: {
+        uploadButton: 'Cargar archivo',
+        dropHint: 'Arrastra y suelta archivos aquí',
+        helperBoth: 'Puedes subir hasta {n} archivos, cada uno hasta {x}',
+        helperFiles: 'Puedes subir hasta {n} archivos',
+        helperBytes: 'Cada archivo hasta {x}',
+        uploadedTitle: 'Archivos subidos',
+        removeFile: 'Eliminar archivo',
+        copyUrl: 'Copiar enlace',
+        copied: 'Copiado',
+        dragToReorder: 'Arrastra para reordenar',
+        openPreview: 'Abrir vista previa',
+        errInvalidFormat: 'Formato no permitido: .{x}',
+        errTooLarge: 'Archivo demasiado grande: {x}',
+        errMaxFiles: 'Puedes subir hasta {n} archivos',
+    },
+    en: {
+        uploadButton: 'Upload file',
+        dropHint: 'Drag and drop files here',
+        helperBoth: 'You can upload up to {n} files, each up to {x}',
+        helperFiles: 'You can upload up to {n} files',
+        helperBytes: 'Each file up to {x}',
+        uploadedTitle: 'Uploaded files',
+        removeFile: 'Remove file',
+        copyUrl: 'Copy link',
+        copied: 'Copied',
+        dragToReorder: 'Drag to reorder',
+        openPreview: 'Open preview',
+        errInvalidFormat: 'Invalid format: .{x}',
+        errTooLarge: 'File too large: {x}',
+        errMaxFiles: 'You can upload up to {n} files',
+    },
+    pt: {
+        uploadButton: 'Carregar arquivo',
+        dropHint: 'Arraste e solte arquivos aqui',
+        helperBoth: 'Você pode enviar até {n} arquivos, cada um até {x}',
+        helperFiles: 'Você pode enviar até {n} arquivos',
+        helperBytes: 'Cada arquivo até {x}',
+        uploadedTitle: 'Arquivos enviados',
+        removeFile: 'Remover arquivo',
+        copyUrl: 'Copiar link',
+        copied: 'Copiado',
+        dragToReorder: 'Arraste para reordenar',
+        openPreview: 'Abrir pré-visualização',
+        errInvalidFormat: 'Formato inválido: .{x}',
+        errTooLarge: 'Arquivo muito grande: {x}',
+        errMaxFiles: 'Você pode enviar até {n} arquivos',
+    },
+};
+/** Map any BCP-47 locale (e.g. "es-CO") to a supported language; fallback 'en'. */
+function langFromLocale(locale) {
+    const l = (locale || '').toLowerCase();
+    if (l.startsWith('es'))
+        return 'es';
+    if (l.startsWith('pt'))
+        return 'pt';
+    return 'en';
+}
+/** Resolve the built-in UI strings for a locale. */
+function getFileStrings(locale) {
+    return DICT[langFromLocale(locale)];
+}
+/** Fill the `{n}` / `{x}` placeholders of a template string. */
+function fillTemplate(tpl, vars) {
+    var _a, _b;
+    return tpl.replace('{n}', String((_a = vars.n) !== null && _a !== void 0 ? _a : '')).replace('{x}', (_b = vars.x) !== null && _b !== void 0 ? _b : '');
+}
+
+/** Format bytes like the Figma spec: "59.25 KB" (base 1024, up to 2 decimals). */
+function formatBytes(bytes) {
+    if (bytes == null || isNaN(bytes))
+        return '';
+    if (bytes < 1024)
+        return `${bytes} B`;
+    const fmt = (n) => n.toFixed(2).replace(/\.?0+$/, '');
+    if (bytes < 1024 * 1024)
+        return `${fmt(bytes / 1024)} KB`;
+    return `${fmt(bytes / (1024 * 1024))} MB`;
+}
+/**
+ * Left-truncate long file names ("....nshot from 2024-07-12.png"), keeping the
+ * tail where the date/extension lives — same convention as the V1 selector.
+ * The CSS rtl+ellipsis trick is avoided on purpose: bidi reorders leading
+ * digits/punctuation, and file names start with digits all the time.
+ */
+function truncateLeft(name, max = 35) {
+    if (!name || name.length <= max)
+        return name;
+    return `...${name.slice(-max)}`;
+}
+const IMAGE_EXTS = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'avif', 'bmp']);
+function hasImageExtension(item) {
+    const base = (item.name || item.url || '').split('?')[0];
+    const i = base.lastIndexOf('.');
+    return i >= 0 && IMAGE_EXTS.has(base.slice(i + 1).toLowerCase());
+}
+/** An item renders in the previews grid when it's a stored image we can show. */
+function isImage(item) {
+    if (item.status !== 'done')
+        return false;
+    const src = item.thumbnail || item.url;
+    if (!src)
+        return false;
+    if (item.thumbnail)
+        return true;
+    return hasImageExtension(item);
+}
+/**
+ * Best lightbox source: the original `url` only when it is itself an image —
+ * a PDF that entered the grid via its server-generated thumbnail must open
+ * the thumbnail (an `<img>` can't render the PDF).
+ */
+function previewSrc(item) {
+    return hasImageExtension(item) ? item.url || item.thumbnail : item.thumbnail || item.url;
+}
+
+const coFileFieldCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-file-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-file-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs)}.co-file-field__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}.co-file-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--co-spacing-md);padding:var(--co-spacing-4xl) var(--co-spacing-2xl);background:var(--co-semantic-surface-hover);border:1px dashed var(--co-semantic-border-default);border-radius:var(--co-border-radius-sm);cursor:pointer;text-align:center;transition:border-color 0.15s ease, background 0.15s ease}.co-file-field__dropzone:hover{border-color:var(--co-semantic-border-focus)}.co-file-field__dropzone--drag{border-color:var(--co-semantic-border-focus);background:var(--co-semantic-surface-hover)}.co-file-field__upload-btn{display:inline-flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-md) var(--co-spacing-xl);margin-bottom:var(--co-spacing-xs);background:var(--co-semantic-surface-secondary);color:var(--co-semantic-text-default);border:none;border-radius:var(--co-border-radius-full);box-shadow:var(--co-shadow-lg);font-family:inherit;font-size:var(--co-font-size-16);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;cursor:pointer;transition:box-shadow 0.15s ease, transform 0.15s ease}.co-file-field__upload-btn:hover{box-shadow:var(--co-shadow-xl, var(--co-shadow-lg));transform:translateY(-1px)}.co-file-field__upload-btn co-icon{display:inline-flex;flex-shrink:0}.co-file-field__dropzone-text{color:var(--co-semantic-text-default);font-size:var(--co-font-size-18);line-height:1.25}.co-file-field__dropzone-hint{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);line-height:1.25}.co-file-field__actions{display:contents}.co-file-field__input{display:none}.co-file-field__uploaded{display:flex;flex-direction:column;gap:var(--co-spacing-lg);margin-top:var(--co-spacing-sm2)}.co-file-field__uploaded-title{color:var(--co-semantic-text-default);font-size:var(--co-font-size-22);font-weight:500;letter-spacing:-0.03em;line-height:1.25}.co-file-field__previews{display:grid;grid-template-columns:repeat(auto-fill, minmax(240px, 282px));gap:var(--co-spacing-md)}.co-file-field__preview{padding:0;border:none;border-radius:var(--co-border-radius-sm);overflow:hidden;aspect-ratio:3 / 2;background:var(--co-semantic-surface-hover);cursor:pointer}.co-file-field__preview img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 0.2s ease}.co-file-field__preview:hover img{transform:scale(1.02)}.co-file-field__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-file-field__row{display:flex;align-items:center;gap:var(--co-spacing-lg);padding:var(--co-spacing-xl);background:var(--co-semantic-surface-hover);border:1px solid transparent;border-radius:var(--co-border-radius-sm)}.co-file-field__row--error{border-color:var(--co-semantic-status-error)}.co-file-field__row--dragging{opacity:0.5}.co-file-field__row--drop-target{border-color:var(--co-semantic-border-focus);background:var(--co-semantic-surface-hover)}.co-file-field__drag-handle{flex-shrink:0;display:flex;align-items:center;color:var(--co-semantic-text-secondary);cursor:grab}.co-file-field__drag-handle:active{cursor:grabbing}.co-file-field__row-icon{flex-shrink:0;color:var(--co-semantic-text-secondary);display:flex;align-items:center}.co-file-field__row--error .co-file-field__row-icon{color:var(--co-semantic-status-error)}.co-file-field__row-icon--spin{animation:co-file-spin 0.8s linear infinite}@keyframes co-file-spin{to{transform:rotate(360deg)}}.co-file-field__row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--co-spacing-xs)}.co-file-field__row-name{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-file-field__row-error{color:var(--co-semantic-status-error);font-size:var(--co-font-size-12)}.co-file-field__row-size{flex-shrink:0;color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);line-height:1;white-space:nowrap}.co-file-field__progress{position:relative;height:4px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-hover);overflow:hidden}.co-file-field__progress-bar{position:absolute;inset:0;width:40%;border-radius:var(--co-border-radius-full);background:var(--co-semantic-border-focus);transition:width 0.2s ease}.co-file-field__progress-bar:not([style]){animation:co-file-indeterminate 1.2s ease-in-out infinite}@keyframes co-file-indeterminate{0%{left:-40%}100%{left:100%}}.co-file-field__action{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-secondary);transition:color 0.15s ease}.co-file-field__action:hover{color:var(--co-semantic-text-default)}.co-file-field__action--copied,.co-file-field__action--copied:hover{color:var(--co-color-primary-verde)}.co-file-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-file-field__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-file-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);line-height:1}.co-file-field--disabled{opacity:0.6;pointer-events:none}.co-file-field--invalid .co-file-field__dropzone,.co-file-field--error .co-file-field__dropzone{border-color:var(--co-semantic-status-error)}.co-file-field__helper--error .co-file-field__helper-icon,.co-file-field__helper--error .co-file-field__helper-text{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-file-field{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-file-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-file-field__label{white-space:normal}:host([layout='horizontal']) .co-file-field>:not(.co-file-field__labels){grid-column:2;min-width:0}`;
+
+const CoFileField = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.coFilesSelected = index.createEvent(this, "coFilesSelected", 3);
+        this.coRemove = index.createEvent(this, "coRemove", 3);
+        this.coClear = index.createEvent(this, "coClear", 3);
+        this.coReorder = index.createEvent(this, "coReorder", 3);
+        this.coCopy = index.createEvent(this, "coCopy", 3);
+        this.coPreviewOpen = index.createEvent(this, "coPreviewOpen", 3);
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.multiple = false;
+        /** Max number of files (multiple mode). */
+        this.maxFiles = 100;
+        /** External validation status (e.g. from a form controller). */
+        this.status = 'default';
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
+        /** Allow drag-reordering of the uploaded list (multiple mode). */
+        this.reorderable = true;
+        /** Controlled file list, JSON array of {@link FileItem} (owned by the host). */
+        this.files = '[]';
+        this.dragOver = false;
+        this.localError = '';
+        this.copiedKey = '';
+        /** Row key armed for dragging (handle pressed). */
+        this.armedKey = '';
+        /** Row key currently being dragged. */
+        this.dragKey = '';
+        /** Row key currently hovered as drop target. */
+        this.overKey = '';
+        this.failedPreviews = new Set();
+        this.tempSeq = 0;
+        this.lastFilesStr = '';
+        this.lastParsed = [];
+        this.handleDragOver = (e) => {
+            if (this.disabled || this.readonly || this.dragKey)
+                return;
+            e.preventDefault();
+            this.dragOver = true;
+        };
+        this.handleDragLeave = (e) => {
+            // dragleave also fires when entering a child of the dropzone — ignore
+            // those so the highlight doesn't flicker during the drag.
+            const to = e.relatedTarget;
+            if (to && e.currentTarget instanceof Node && e.currentTarget.contains(to))
+                return;
+            this.dragOver = false;
+        };
+        this.handleDrop = (e) => {
+            var _a;
+            e.preventDefault();
+            this.dragOver = false;
+            if (this.dragKey)
+                return; // internal row reorder, not a file drop
+            if ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files)
+                this.handleFiles(e.dataTransfer.files);
+        };
+        this.handleBrowse = (e) => {
+            var _a;
+            if (this.disabled || this.readonly)
+                return;
+            if (e && this.fromActionsSlot(e))
+                return;
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.click();
+        };
+        this.handleInputChange = (e) => {
+            const input = e.target;
+            if (input.files)
+                this.handleFiles(input.files);
+            input.value = ''; // allow re-selecting the same file
+        };
+        // ── Reorder ───────────────────────────────────────────────────
+        this.disarmDrag = () => {
+            if (this.armedKey && !this.dragKey)
+                this.armedKey = '';
+        };
+        this.handleRowDragEnd = () => {
+            this.resetDragState();
+        };
+    }
+    connectedCallback() {
+        window.addEventListener('mouseup', this.disarmDrag);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('mouseup', this.disarmDrag);
+        clearTimeout(this.copiedTimer);
+        this.closeLightbox();
+    }
+    get parsedFiles() {
+        const raw = this.files;
+        if (typeof raw !== 'string' || !raw.trim())
+            return [];
+        if (raw === this.lastFilesStr)
+            return this.lastParsed;
+        let parsed = [];
+        try {
+            const p = JSON.parse(raw);
+            if (Array.isArray(p))
+                parsed = p;
+        }
+        catch (_a) {
+            /* not JSON */
+        }
+        this.lastFilesStr = raw;
+        this.lastParsed = parsed;
+        return parsed;
+    }
+    get strings() {
+        return getFileStrings(this.locale);
+    }
+    get acceptList() {
+        const raw = this.accept;
+        if (!raw)
+            return [];
+        let parts = [];
+        try {
+            const p = JSON.parse(raw);
+            if (Array.isArray(p))
+                parts = p.map(String);
+        }
+        catch (_a) {
+            parts = raw.split(',');
+        }
+        return parts
+            .map((s) => s.trim().toLowerCase().replace(/^\./, ''))
+            .filter((s) => s && s !== '*');
+    }
+    get isInvalid() {
+        return this.status === 'error' || !!this.localError;
+    }
+    get inputAccept() {
+        const list = this.acceptList;
+        if (!list.length)
+            return undefined;
+        return list.map((e) => (e.includes('/') ? e : `.${e}`)).join(',');
+    }
+    extOf(name) {
+        const i = name.lastIndexOf('.');
+        return i >= 0 ? name.slice(i + 1).toLowerCase() : '';
+    }
+    validate(file) {
+        const list = this.acceptList;
+        if (list.length) {
+            const ext = this.extOf(file.name);
+            const okExt = list.includes(ext);
+            const okMime = list.some((a) => a.includes('/') && file.type === a);
+            if (!okExt && !okMime)
+                return fillTemplate(this.strings.errInvalidFormat, { x: ext });
+        }
+        if (this.maxBytes && file.size > this.maxBytes) {
+            return fillTemplate(this.strings.errTooLarge, { x: formatBytes(file.size) });
+        }
+        return null;
+    }
+    handleFiles(fileList) {
+        if (this.disabled || this.readonly)
+            return;
+        this.localError = '';
+        const incoming = Array.from(fileList);
+        if (!incoming.length)
+            return;
+        const selected = this.multiple ? incoming : incoming.slice(0, 1);
+        // Capacity check (multiple only).
+        if (this.multiple) {
+            const room = this.maxFiles - this.parsedFiles.length;
+            if (room <= 0) {
+                this.localError = fillTemplate(this.strings.errMaxFiles, { n: this.maxFiles });
+                return;
+            }
+            if (selected.length > room)
+                selected.length = room;
+        }
+        const valid = [];
+        const tempIds = [];
+        for (const file of selected) {
+            const err = this.validate(file);
+            if (err) {
+                this.localError = err;
+                continue;
+            }
+            valid.push(file);
+            tempIds.push(`tmp-${Date.now()}-${this.tempSeq++}`);
+        }
+        if (valid.length)
+            this.coFilesSelected.emit({ files: valid, tempIds });
+    }
+    /** True when the event originates from the host's `actions` slot content. */
+    fromActionsSlot(e) {
+        return e
+            .composedPath()
+            .some((n) => { var _a, _b; return ((_b = (_a = n).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, 'slot')) === 'actions'; });
+    }
+    keyFor(item) {
+        var _a;
+        // Hosts normally assign id/tempId; the compound fallback keeps two
+        // same-named files apart (must stay in lock-step with form-vue's keyOf).
+        return item.id || item.tempId || `${item.name}:${(_a = item.size) !== null && _a !== void 0 ? _a : ''}`;
+    }
+    // ── Copy ──────────────────────────────────────────────────────
+    handleCopy(item) {
+        var _a;
+        const url = item.url || '';
+        if (!url)
+            return;
+        const key = this.keyFor(item);
+        this.coCopy.emit({ id: key, url });
+        if ((_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.writeText) {
+            navigator.clipboard
+                .writeText(url)
+                .then(() => {
+                this.copiedKey = key;
+                clearTimeout(this.copiedTimer);
+                this.copiedTimer = setTimeout(() => (this.copiedKey = ''), 1500);
+            })
+                .catch(() => {
+                /* clipboard blocked — coCopy already notified the host */
+            });
+        }
+    }
+    // ── Preview (in-app lightbox) ─────────────────────────────────
+    /**
+     * Opens the clicked image in a co-lightbox with the SAME gallery the
+     * previews grid shows. The lightbox is created imperatively on
+     * `document.body`: an open co-drawer keeps `transform: translateX(0)`,
+     * which would trap a `position: fixed` overlay rendered inline here.
+     */
+    handlePreviewOpen(item) {
+        const url = item.url || item.thumbnail;
+        if (!url)
+            return;
+        this.coPreviewOpen.emit({ id: this.keyFor(item), url });
+        const gallery = this.parsedFiles.filter((it) => isImage(it) && !this.failedPreviews.has(this.keyFor(it)));
+        const images = gallery.map((it) => ({
+            src: previewSrc(it),
+            thumbnail: it.thumbnail,
+            alt: it.name,
+        }));
+        const startIndex = Math.max(0, gallery.findIndex((it) => this.keyFor(it) === this.keyFor(item)));
+        this.closeLightbox();
+        const lb = document.createElement('co-lightbox');
+        lb.images = JSON.stringify(images);
+        lb.startIndex = startIndex;
+        if (this.locale)
+            lb.locale = this.locale;
+        lb.addEventListener('coClose', () => this.closeLightbox());
+        document.body.appendChild(lb);
+        this.lightboxEl = lb;
+        // Open on the next frame so the opacity transition runs.
+        requestAnimationFrame(() => {
+            lb.open = true;
+        });
+    }
+    closeLightbox() {
+        const lb = this.lightboxEl;
+        this.lightboxEl = undefined;
+        if (!lb)
+            return;
+        lb.open = false; // fade out, then drop the node
+        setTimeout(() => lb.remove(), 220);
+    }
+    handlePreviewError(item) {
+        this.failedPreviews = new Set([...this.failedPreviews, this.keyFor(item)]);
+    }
+    handleRowDragStart(e, key) {
+        if (this.armedKey !== key) {
+            e.preventDefault();
+            return;
+        }
+        this.dragKey = key;
+        if (e.dataTransfer) {
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('text/plain', key);
+        }
+    }
+    handleRowDragOver(e, key) {
+        if (!this.dragKey || this.dragKey === key)
+            return;
+        e.preventDefault();
+        if (e.dataTransfer)
+            e.dataTransfer.dropEffect = 'move';
+        this.overKey = key;
+    }
+    handleRowDrop(e, key) {
+        e.preventDefault();
+        e.stopPropagation();
+        const keys = this.parsedFiles.map((it) => this.keyFor(it));
+        const from = keys.indexOf(this.dragKey);
+        const to = keys.indexOf(key);
+        this.resetDragState();
+        if (from < 0 || to < 0 || from === to)
+            return;
+        keys.splice(to, 0, ...keys.splice(from, 1));
+        this.coReorder.emit(keys);
+    }
+    resetDragState() {
+        this.armedKey = '';
+        this.dragKey = '';
+        this.overKey = '';
+    }
+    // ── Derived text ──────────────────────────────────────────────
+    capacityHint(s) {
+        const x = this.maxBytes ? formatBytes(this.maxBytes) : '';
+        if (this.multiple && this.maxBytes)
+            return fillTemplate(s.helperBoth, { n: this.maxFiles, x });
+        if (this.multiple)
+            return fillTemplate(s.helperFiles, { n: this.maxFiles });
+        if (this.maxBytes)
+            return fillTemplate(s.helperBytes, { x });
+        return '';
+    }
+    render() {
+        const s = this.strings;
+        const items = this.parsedFiles;
+        const helper = this.localError || this.helperText;
+        const atCapacity = this.multiple && items.length >= this.maxFiles;
+        const showDropzone = !this.readonly && (this.multiple ? !atCapacity : items.length === 0);
+        const statusClass = this.status !== 'default' ? `co-file-field--${this.status}` : '';
+        const previews = items.filter((it) => isImage(it) && !this.failedPreviews.has(this.keyFor(it)));
+        const canReorder = this.reorderable && this.multiple && !this.disabled && !this.readonly && items.length > 1;
+        const capacity = this.capacityHint(s);
+        return (index.h("div", { key: 'ec349a2beeea1fb9195d9e117056270c125dce4c', class: {
+                'co-file-field': true,
+                'co-file-field--disabled': this.disabled,
+                'co-file-field--invalid': this.isInvalid,
+                [statusClass]: !!statusClass,
+            }, part: "wrapper" }, this.label && (index.h("div", { key: 'e89a935967628ef58775a1449a44b19dea35bfe4', class: "co-file-field__labels" }, index.h("label", { key: 'e24cccf041b29fc39706dacb8d3eb3c06fd8ee9d', class: "co-file-field__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { key: 'ae32e17c9411158e0f69cd508f12e56bd56ed7a4', required: this.required })))), showDropzone && (index.h("div", { key: '6216f8858dc7195dfe3999a8ac636409ef12eb3d', class: {
+                'co-file-field__dropzone': true,
+                'co-file-field__dropzone--drag': this.dragOver,
+            }, part: "dropzone", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleBrowse, onKeyDown: (e) => {
+                if ((e.key === 'Enter' || e.key === ' ') && !this.fromActionsSlot(e)) {
+                    e.preventDefault();
+                    this.handleBrowse();
+                }
+            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, index.h("button", { key: 'ee667570d661b19a8fbd43f8673fc4817c95c6db', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, index.h("co-icon", { key: '8f6663547642c9005f706e8f7289ffe58f6226c5', name: "file-arrow-up", size: 18 }), index.h("span", { key: '39e1d8c2a875b9e6249138d4b4b9ce0d2dbf4ad4' }, this.uploadButtonText || s.uploadButton)), index.h("span", { key: '2f317b69e38a99ec24d661145efbdb9d77ff2f67', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && index.h("span", { key: 'ba3c34747e83aa42e3eb0a821ed49dd4b27457b1', class: "co-file-field__dropzone-hint" }, capacity), index.h("div", { key: 'b44d49306d37ec6569ee85047b57298dbf97bf96', class: "co-file-field__actions", part: "actions" }, index.h("slot", { key: '36a17ecbc89b70cc140045ce1b2c6b251d5363e7', name: "actions" })), index.h("input", { key: '07d10d77c3673fd8f92b5eacadf342469400c1cb', ref: (el) => (this.inputEl = el), class: "co-file-field__input", type: "file", multiple: this.multiple, accept: this.inputAccept, disabled: this.disabled, onChange: this.handleInputChange, "aria-hidden": "true", tabIndex: -1 }))), items.length > 0 && (index.h("div", { key: '5fb766f14920218f0cc3cfa80256af8542dbc44e', class: "co-file-field__uploaded" }, this.multiple && (index.h("div", { key: 'a133328f198a7d7947cbfb1e77b822f70310ec1a', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (index.h("div", { key: 'cef939986d1f70d907dcb6f3f048b4fb1fe5156d', class: "co-file-field__previews", part: "previews" }, previews.map((item) => (index.h("button", { class: "co-file-field__preview", part: "preview", type: "button", key: `prev-${this.keyFor(item)}`, title: item.name, "aria-label": s.openPreview, onClick: () => this.handlePreviewOpen(item) }, index.h("img", { src: item.thumbnail || item.url, alt: item.name, loading: "lazy", onError: () => this.handlePreviewError(item) })))))), index.h("ul", { key: 'db43db11520f245328ee76de839112d7a4c766e5', class: "co-file-field__list", part: "list" }, items.map((item) => {
+            const key = this.keyFor(item);
+            const draggable = canReorder && item.status === 'done';
+            return (index.h("li", { class: {
+                    'co-file-field__row': true,
+                    [`co-file-field__row--${item.status}`]: true,
+                    'co-file-field__row--dragging': this.dragKey === key,
+                    'co-file-field__row--drop-target': this.overKey === key,
+                }, part: "row", key: key, draggable: this.armedKey === key, onDragStart: (e) => this.handleRowDragStart(e, key), onDragOver: (e) => this.handleRowDragOver(e, key), onDrop: (e) => this.handleRowDrop(e, key), onDragEnd: this.handleRowDragEnd }, draggable ? (index.h("span", { class: "co-file-field__drag-handle", part: "drag-handle", title: s.dragToReorder, onMouseDown: () => (this.armedKey = key) }, index.h("co-icon", { name: "list", size: 18 }))) : (index.h("co-icon", { name: item.status === 'error'
+                    ? 'warning-circle'
+                    : item.status === 'uploading'
+                        ? 'spinner-gap'
+                        : 'file', size: 18, class: {
+                    'co-file-field__row-icon': true,
+                    'co-file-field__row-icon--spin': item.status === 'uploading',
+                } })), index.h("div", { class: "co-file-field__row-body" }, index.h("span", { class: "co-file-field__row-name", title: item.name }, truncateLeft(item.name)), item.status === 'uploading' && (index.h("div", { class: "co-file-field__progress" }, index.h("div", { class: "co-file-field__progress-bar", style: typeof item.progress === 'number'
+                    ? { width: `${item.progress}%` }
+                    : undefined }))), item.status === 'error' && item.error && (index.h("span", { class: "co-file-field__row-error" }, item.error))), item.size != null && (index.h("span", { class: "co-file-field__row-size" }, formatBytes(item.size))), item.status === 'done' && !!item.url && (index.h("button", { class: {
+                    'co-file-field__action': true,
+                    'co-file-field__action--copied': this.copiedKey === key,
+                }, type: "button", tabIndex: -1, title: this.copiedKey === key ? s.copied : s.copyUrl, "aria-label": s.copyUrl, onClick: () => this.handleCopy(item) }, index.h("co-icon", { name: this.copiedKey === key ? 'check' : 'copy', size: 18 }))), !this.disabled && !this.readonly && (index.h("button", { class: "co-file-field__action", type: "button", tabIndex: -1, title: s.removeFile, "aria-label": s.removeFile, onClick: () => this.coRemove.emit(key) }, index.h("co-icon", { name: "trash", size: 18 })))));
+        })))), helper && (index.h("div", { key: 'ce339d27da1fd8a224bebd1a7d7ed16a3571cfec', class: {
+                'co-file-field__helper': true,
+                'co-file-field__helper--error': this.isInvalid,
+            }, part: "helper" }, this.isInvalid && (index.h("co-icon", { key: '691ff2e82d45ee55e8087dd86c4389f05ecee268', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), index.h("span", { key: '0f35c1734cbfd2bae2be1d85948fcca8ad92e5c2', class: "co-file-field__helper-text" }, helper)))));
+    }
+    get el() { return index.getElement(this); }
+};
+CoFileField.style = coFileFieldCss();
+
+exports.co_file_field = CoFileField;

package/dist/cjs/co-helper-text.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-DoFnrUVH.js');
 
 const coHelperTextCss = () => `:host{display:block}.co-helper-text{display:flex;align-items:center;gap:var(--co-spacing-xs);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12);line-height:1.4}.co-helper-text__icon{flex-shrink:0}.co-helper-text--default{color:var(--co-semantic-text-muted)}.co-helper-text--error{color:var(--co-semantic-status-error)}.co-helper-text--success{color:var(--co-semantic-status-success)}.co-helper-text--warning{color:var(--co-semantic-status-warning)}.co-helper-text--info{color:var(--co-semantic-status-info)}`;
 
@@ -18,10 +18,10 @@ const CoHelperText = class {
         };
     }
     render() {
-        return (index.h("div", { key: '7c37f65d89a2798c881edec0ea153c92cbf83f50', class: {
+        return (index.h("div", { key: '730e2f2657f5656ea6992bff86be3903615c51d1', class: {
                 'co-helper-text': true,
                 [`co-helper-text--${this.status}`]: true,
-            }, part: "helper-text" }, index.h("co-icon", { key: 'f8ccbc185bb0ba35eba8b3b6ef8b18ee71b9929a', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), index.h("span", { key: '589978fd28f922d3f62e101c8090cea005839ece', class: "co-helper-text__message" }, index.h("slot", { key: 'b59d0b6cf58c97a6ab4950b1cc7de1c1c9fe4f03' }, this.message))));
+            }, part: "helper-text" }, index.h("co-icon", { key: '8612481e2e111104047506dc8ca93980723ed6b2', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), index.h("span", { key: '9842f85b0f184f4d5e05c989535add23d4c423cc', class: "co-helper-text__message" }, index.h("slot", { key: '940cf28c1c0f5033c16970ac469029d1ebb1e5e4' }, this.message))));
     }
 };
 CoHelperText.style = coHelperTextCss();

package/dist/cjs/co-icon-button.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-DoFnrUVH.js');
 
-const coIconButtonCss = () => `:host{display:inline-flex}.co-icon-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;outline:none;padding:0;flex-shrink:0;transition:opacity 0.15s ease;box-sizing:border-box;-webkit-font-smoothing:antialiased;backdrop-filter:var(--co-icon-button-backdrop-filter, none);-webkit-backdrop-filter:var(--co-icon-button-backdrop-filter, none)}.co-icon-button--filled{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary)}.co-icon-button--outlined{background:var(--co-icon-button-bg, var(--co-semantic-surface-secondary));color:var(--co-icon-button-color, var(--co-semantic-on-secondary));border:1px solid var(--co-icon-button-border, var(--co-semantic-border-subtle))}.co-icon-button--rounded.co-icon-button--xl{width:80px;height:80px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--lg{width:64px;height:64px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--md{width:56px;height:56px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--sm{width:48px;height:48px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--xs{width:32px;height:32px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--xxs{width:24px;height:24px;border-radius:var(--co-border-radius-full)}.co-icon-button--square.co-icon-button--xl{width:80px;height:80px;border-radius:var(--co-border-radius-xl);}.co-icon-button--square.co-icon-button--lg{width:64px;height:64px;border-radius:var(--co-border-radius-lg);}.co-icon-button--square.co-icon-button--md{width:56px;height:56px;border-radius:var(--co-border-radius-lg);}.co-icon-button--square.co-icon-button--sm{width:48px;height:48px;border-radius:var(--co-border-radius-sm);}.co-icon-button--square.co-icon-button--xs{width:32px;height:32px;border-radius:var(--co-border-radius-xs);}.co-icon-button--square.co-icon-button--xxs{width:24px;height:24px;border-radius:var(--co-spacing-sm);}.co-icon-button--xl ::slotted(*){width:32px;height:32px}.co-icon-button--lg ::slotted(*){width:24px;height:24px}.co-icon-button--md ::slotted(*){width:20px;height:20px}.co-icon-button--sm ::slotted(*){width:18px;height:18px}.co-icon-button--xs ::slotted(*){width:16px;height:16px}.co-icon-button--xxs ::slotted(*){width:12px;height:12px}.co-icon-button--disabled,.co-icon-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-icon-button:hover:not(:disabled){opacity:0.88}`;
+const coIconButtonCss = () => `:host{display:inline-flex}.co-icon-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;outline:none;padding:0;flex-shrink:0;transition:opacity 0.15s ease;box-sizing:border-box;-webkit-font-smoothing:antialiased;backdrop-filter:var(--co-icon-button-backdrop-filter, none);-webkit-backdrop-filter:var(--co-icon-button-backdrop-filter, none)}.co-icon-button--filled{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary)}.co-icon-button--outlined{background:var(--co-icon-button-bg, var(--co-semantic-surface-secondary));color:var(--co-icon-button-color, var(--co-semantic-on-secondary));border:1px solid var(--co-icon-button-border, var(--co-semantic-border-subtle))}.co-icon-button--ghost{background:transparent;color:var(--co-icon-button-color, var(--co-semantic-text-default));border:none}.co-icon-button--ghost:hover:not(:disabled){background:var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.04))}.co-icon-button--rounded.co-icon-button--xl{width:80px;height:80px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--lg{width:64px;height:64px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--md{width:56px;height:56px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--sm{width:48px;height:48px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--xs{width:32px;height:32px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--xxs{width:24px;height:24px;border-radius:var(--co-border-radius-full)}.co-icon-button--square.co-icon-button--xl{width:80px;height:80px;border-radius:var(--co-border-radius-xl);}.co-icon-button--square.co-icon-button--lg{width:64px;height:64px;border-radius:var(--co-border-radius-lg);}.co-icon-button--square.co-icon-button--md{width:56px;height:56px;border-radius:var(--co-border-radius-lg);}.co-icon-button--square.co-icon-button--sm{width:48px;height:48px;border-radius:var(--co-border-radius-sm);}.co-icon-button--square.co-icon-button--xs{width:32px;height:32px;border-radius:var(--co-border-radius-xs);}.co-icon-button--square.co-icon-button--xxs{width:24px;height:24px;border-radius:var(--co-spacing-sm);}.co-icon-button--xl ::slotted(*){width:32px;height:32px}.co-icon-button--lg ::slotted(*){width:24px;height:24px}.co-icon-button--md ::slotted(*){width:20px;height:20px}.co-icon-button--sm ::slotted(*){width:18px;height:18px}.co-icon-button--xs ::slotted(*){width:16px;height:16px}.co-icon-button--xxs ::slotted(*){width:12px;height:12px}.co-icon-button--disabled,.co-icon-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-icon-button:hover:not(:disabled){opacity:0.88}`;
 
 const CoIconButton = class {
     constructor(hostRef) {
@@ -29,10 +29,10 @@ const CoIconButton = class {
     render() {
         var _a;
         const iconSizeMap = {
-            xl: 32, lg: 28, md: 24, sm: 20, xs: 16, xxs: 12,
+            xl: 32, lg: 28, md: 24, sm: 20, xs: 16, xxs: 16,
         };
         const iconSize = (_a = iconSizeMap[this.size]) !== null && _a !== void 0 ? _a : 24;
-        return (index.h("button", { key: '4a72c9edd929fee74c568a3e899ebf06df546736', class: {
+        return (index.h("button", { key: 'd21f938003cb69f4747b94566a2054e4e2af4a04', class: {
                 'co-icon-button': true,
                 [`co-icon-button--${this.variant}`]: true,
                 [`co-icon-button--${this.shape}`]: true,

package/dist/cjs/co-icon.cjs.entry.js

@@ -1,12 +1,15 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-DoFnrUVH.js');
 
 const coIconCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;color:inherit;line-height:1;flex-shrink:0}span{display:contents}svg{display:block;width:100%;height:100%;fill:currentColor}`;
 
 /** Module-level cache shared across all instances */
 const iconCache = new Map();
 const CDN_BASE = 'https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets';
+function getBasePath() {
+    return globalThis.__cobaltIconBasePath || CDN_BASE;
+}
 /**
  * File naming convention in @phosphor-icons/core:
  *   regular → "plus.svg"
@@ -20,7 +23,7 @@ async function loadSvg(name, weight) {
     if (iconCache.has(key))
         return iconCache.get(key);
     const filename = toFilename(name, weight);
-    const url = `${CDN_BASE}/${weight}/${filename}`;
+    const url = `${getBasePath()}/${weight}/${filename}`;
     try {
         const res = await fetch(url);
         if (!res.ok)
@@ -58,12 +61,12 @@ const CoIcon = class {
         this.svgContent = await loadSvg(this.name, this.weight);
     }
     render() {
-        return (index.h(index.Host, { key: '05b934c6c75b66802014bcb3365110bbd49e8267', "aria-hidden": "true", style: {
+        return (index.h(index.Host, { key: '0fad4d5acc013ca70b12384477cb5413615c23d2', "aria-hidden": "true", style: {
                 display: 'inline-flex',
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 flexShrink: '0',
-            } }, index.h("span", { key: '15ab00cbd1a8affffb54c257c1c4556a517a556b', part: "svg", innerHTML: this.svgContent })));
+            } }, index.h("span", { key: '7e5199c496bb07aade0400b61415260f5fd2ee2a', part: "svg", innerHTML: this.svgContent })));
     }
     static get watchers() { return {
         "name": [{