@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

package/dist/esm/co-fab.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-B0lqrhFo.js';
+import { r as registerInstance, c as createEvent, h } from './index-CYsftTKf.js';
 
 const coFabCss = () => `:host{display:inline-flex;font-family:var(--co-font-family-primary);line-height:1}.co-fab{display:inline-flex;align-items:center;justify-content:center;gap:var(--co-spacing-sm2);border:none;border-radius:var(--co-border-radius-full);cursor:pointer;font-family:inherit;font-weight:500;white-space:nowrap;box-sizing:border-box;transition:background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;box-shadow:0 4px 12px rgba(31, 28, 27, 0.15)}.co-fab--l{width:56px;height:56px;font-size:var(--co-font-size-16)}.co-fab--m{width:48px;height:48px;font-size:var(--co-font-size-14)}.co-fab--s{width:40px;height:40px;font-size:var(--co-font-size-14)}.co-fab--extended{width:auto;border-radius:var(--co-border-radius-lg)}.co-fab--extended.co-fab--l{padding:0 var(--co-spacing-xl)}.co-fab--extended.co-fab--m{padding:0 var(--co-spacing-lg)}.co-fab--extended.co-fab--s{padding:0 var(--co-spacing-md)}.co-fab--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary)}.co-fab--primary:hover:not(:disabled){box-shadow:0 6px 20px rgba(31, 28, 27, 0.2);transform:translateY(-1px)}.co-fab--secondary{background:var(--co-semantic-surface-secondary);color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-subtle)}.co-fab--secondary:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-fab--stroke{background:transparent;color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-default)}.co-fab--stroke:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-fab:active:not(:disabled){transform:translateY(0) scale(0.96)}.co-fab--disabled{opacity:0.4;cursor:not-allowed;box-shadow:none}.co-fab--bottom-right{position:fixed;bottom:24px;right:24px;z-index:1000}.co-fab--bottom-left{position:fixed;bottom:24px;left:24px;z-index:1000}.co-fab--top-right{position:fixed;top:24px;right:24px;z-index:1000}.co-fab--top-left{position:fixed;top:24px;left:24px;z-index:1000}.co-fab__label{line-height:1}`;
 
@@ -20,14 +20,14 @@ const CoFab = class {
     render() {
         const iconSize = this.size === 'l' ? 24 : this.size === 's' ? 18 : 20;
         const isExtended = !!this.label;
-        return (h("button", { key: 'd013eaa32fce0e86c428695f172cec6a268452cc', class: {
+        return (h("button", { key: '4e5be05c3e525fa2de4930300f562d2da993cd60', class: {
                 'co-fab': true,
                 [`co-fab--${this.variant}`]: true,
                 [`co-fab--${this.size}`]: true,
                 'co-fab--extended': isExtended,
                 'co-fab--disabled': this.disabled,
                 [`co-fab--${this.position}`]: this.position !== 'none',
-            }, type: "button", disabled: this.disabled, onClick: this.handleClick, "aria-label": this.label || this.icon }, h("co-icon", { key: '1fa1468cf3a1087a4bc4facc8a29553fe1073812', name: this.icon, size: iconSize }), this.label && h("span", { key: '0c2417e1af3a944dc13a879f39e4d0dd1d1f5e41', class: "co-fab__label" }, this.label)));
+            }, type: "button", disabled: this.disabled, onClick: this.handleClick, "aria-label": this.label || this.icon }, h("co-icon", { key: 'a827e3c5bfc7fdd162c8618443eb6696a4659709', name: this.icon, size: iconSize }), this.label && h("span", { key: '879b3be3bc35fc7b2eeeebc9263e2d9a10e3f5ba', class: "co-fab__label" }, this.label)));
     }
 };
 CoFab.style = coFabCss();

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

@@ -0,0 +1,496 @@
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CYsftTKf.js';
+import { R as RequiredMark } from './requiredMark-CEbXKHcU.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:color-mix(in srgb, var(--co-semantic-surface-hover) 55%, transparent);-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));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}@supports not (background: color-mix(in srgb, red, transparent)){.co-file-field__dropzone{background:var(--co-semantic-surface-hover)}}`;
+
+const CoFileField = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coFilesSelected = createEvent(this, "coFilesSelected", 3);
+        this.coRemove = createEvent(this, "coRemove", 3);
+        this.coClear = createEvent(this, "coClear", 3);
+        this.coReorder = createEvent(this, "coReorder", 3);
+        this.coCopy = createEvent(this, "coCopy", 3);
+        this.coPreviewOpen = 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 (h("div", { key: 'a4bc53a3deccc7ef04de56356583a8fbcbe39649', class: {
+                'co-file-field': true,
+                'co-file-field--disabled': this.disabled,
+                'co-file-field--invalid': this.isInvalid,
+                [statusClass]: !!statusClass,
+            }, part: "wrapper" }, this.label && (h("div", { key: '4d4c418ff76f72ac7b491dc5173078ebcecdfbb7', class: "co-file-field__labels" }, h("label", { key: 'afe9d0d47d50178270a4a4a7f9a90af4f8472958', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'e4879bd87853fcbb0552d9e6835fb3934916c29f', required: this.required })))), showDropzone && (h("div", { key: 'f60920fe11c3d1020ffb6043f20f3a82e6905cb2', 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 }, h("button", { key: 'f9152f578e99a926a3b81996917f2a592b8d14cd', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: '93a116c81906b5daaac81feb6d671d942d085bd8', name: "file-arrow-up", size: 18 }), h("span", { key: 'fb09b9218d6185d116d75368591b6b7e2be399b6' }, this.uploadButtonText || s.uploadButton)), h("span", { key: 'd4287e8a0070536125f09dfdd73925476a6cebcf', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: '5626df4c28f2f5c4967abeb839db53a39bc547d8', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: '40ec0e991be663ffe5f55618ed97de44221e9780', class: "co-file-field__actions", part: "actions" }, h("slot", { key: '2037922c65407155a051533050bab4bbaa908633', name: "actions" })), h("input", { key: '74e2fd73161811ef41eec79786598f3bc86075d8', 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 && (h("div", { key: 'cff78c1550847e20bcfe5b24fd6d14a5e80033d9', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: 'fa99dad43c4982f14bc330598d27d99d44e6516c', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: '83cc2ebec6af1b1baa66a74eb620c82a8eff5569', class: "co-file-field__previews", part: "previews" }, previews.map((item) => (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) }, h("img", { src: item.thumbnail || item.url, alt: item.name, loading: "lazy", onError: () => this.handlePreviewError(item) })))))), h("ul", { key: 'acc3232ccadc13f72a84cc4e3dd2281499a583b7', class: "co-file-field__list", part: "list" }, items.map((item) => {
+            const key = this.keyFor(item);
+            const draggable = canReorder && item.status === 'done';
+            return (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 ? (h("span", { class: "co-file-field__drag-handle", part: "drag-handle", title: s.dragToReorder, onMouseDown: () => (this.armedKey = key) }, h("co-icon", { name: "list", size: 18 }))) : (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',
+                } })), h("div", { class: "co-file-field__row-body" }, h("span", { class: "co-file-field__row-name", title: item.name }, truncateLeft(item.name)), item.status === 'uploading' && (h("div", { class: "co-file-field__progress" }, h("div", { class: "co-file-field__progress-bar", style: typeof item.progress === 'number'
+                    ? { width: `${item.progress}%` }
+                    : undefined }))), item.status === 'error' && item.error && (h("span", { class: "co-file-field__row-error" }, item.error))), item.size != null && (h("span", { class: "co-file-field__row-size" }, formatBytes(item.size))), item.status === 'done' && !!item.url && (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) }, h("co-icon", { name: this.copiedKey === key ? 'check' : 'copy', size: 18 }))), !this.disabled && !this.readonly && (h("button", { class: "co-file-field__action", type: "button", tabIndex: -1, title: s.removeFile, "aria-label": s.removeFile, onClick: () => this.coRemove.emit(key) }, h("co-icon", { name: "trash", size: 18 })))));
+        })))), helper && (h("div", { key: 'ef2efaa2264b229e372679c00a554a88fed804a0', class: {
+                'co-file-field__helper': true,
+                'co-file-field__helper--error': this.isInvalid,
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '7b9ddbcc88296ddb30cf6fe3d651afba544ef991', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '1090e1cd4508413ebda4ed649df1852be46f5fb5', class: "co-file-field__helper-text" }, helper)))));
+    }
+    get el() { return getElement(this); }
+};
+CoFileField.style = coFileFieldCss();
+
+export { CoFileField as co_file_field };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-B0lqrhFo.js';
+import { r as registerInstance, h } from './index-CYsftTKf.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)}`;
 
@@ -16,10 +16,10 @@ const CoHelperText = class {
         };
     }
     render() {
-        return (h("div", { key: '7c37f65d89a2798c881edec0ea153c92cbf83f50', class: {
+        return (h("div", { key: 'fb1894ff2656d74d2c892a6c857d98269604b04e', class: {
                 'co-helper-text': true,
                 [`co-helper-text--${this.status}`]: true,
-            }, part: "helper-text" }, h("co-icon", { key: 'f8ccbc185bb0ba35eba8b3b6ef8b18ee71b9929a', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: '589978fd28f922d3f62e101c8090cea005839ece', class: "co-helper-text__message" }, h("slot", { key: 'b59d0b6cf58c97a6ab4950b1cc7de1c1c9fe4f03' }, this.message))));
+            }, part: "helper-text" }, h("co-icon", { key: 'd56c274e9f44ae16b13a02ec262d0d14b109fc5b', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: '5e776db146922fc1271bff50b1b45245baf088b3', class: "co-helper-text__message" }, h("slot", { key: 'c3f93747e7b903296d24f60f87c9e3c29c2cb1cd' }, this.message))));
     }
 };
 CoHelperText.style = coHelperTextCss();

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-B0lqrhFo.js';
+import { r as registerInstance, h } from './index-CYsftTKf.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:1px solid transparent;outline:none;padding:0;flex-shrink:0;transition:opacity 0.15s ease, background 0.15s ease;box-sizing:border-box;-webkit-font-smoothing:antialiased;-webkit-backdrop-filter:var(--co-icon-button-backdrop-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));backdrop-filter:var(--co-icon-button-backdrop-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)))}.co-icon-button--filled{background:color-mix(in srgb, var(--co-semantic-surface-primary) 78%, transparent);color:var(--co-semantic-on-primary);border-color:color-mix(in srgb, var(--co-semantic-on-primary) 28%, transparent)}.co-icon-button--outlined{background:color-mix(in srgb, var(--co-icon-button-bg, var(--co-semantic-surface-secondary)) 55%, transparent);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;-webkit-backdrop-filter:none;backdrop-filter:none}.co-icon-button--ghost:hover:not(:disabled){background:color-mix(in srgb, var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.04)) 60%, transparent);-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate))}.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}@supports not (background: color-mix(in srgb, red, transparent)){.co-icon-button--filled{background:var(--co-semantic-surface-primary)}.co-icon-button--outlined{background:var(--co-icon-button-bg, var(--co-semantic-surface-secondary))}}`;
 
 const CoIconButton = class {
     constructor(hostRef) {
@@ -25,12 +25,12 @@ const CoIconButton = class {
         this.iconWeight = 'regular';
     }
     render() {
-        var _a;
+        var _a, _b;
         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 (h("button", { key: '4a72c9edd929fee74c568a3e899ebf06df546736', class: {
+        const iconSize = (_b = (_a = this.iconSize) !== null && _a !== void 0 ? _a : iconSizeMap[this.size]) !== null && _b !== void 0 ? _b : 24;
+        return (h("button", { key: '3e53ed7dbb6d68bfecd22f29b16bb792bcc9c565', class: {
                 'co-icon-button': true,
                 [`co-icon-button--${this.variant}`]: true,
                 [`co-icon-button--${this.shape}`]: true,