@prolibu-suite/cobalt-core 0.11.6 → 0.11.7

package/dist/collection/components/co-fab/co-fab.js

@@ -37,7 +37,7 @@ export class CoFab {
         const iconSize = this.size === 'xl' ? 24 : this.size === 'l' ? 24 : this.size === 's' ? 18 : 20;
         const hasLabel = !!this.label;
         const hoverExpand = hasLabel && this.expandOnHover;
-        return (h("button", { key: 'cae304a87d9ad88c7ea2f1d2f926d018250e6128', class: {
+        return (h("button", { key: '740058822962826eaed6d9783ba012234f7343a1', class: {
                 'co-fab': true,
                 [`co-fab--${this.variant}`]: true,
                 [`co-fab--${this.size}`]: true,
@@ -45,7 +45,7 @@ export class CoFab {
                 'co-fab--hover-expand': hoverExpand,
                 'co-fab--disabled': this.disabled,
                 [`co-fab--${this.position}`]: this.position !== 'none',
-            }, type: "button", disabled: this.disabled, onClick: this.handleClick, onPointerEnter: this.handleExpandMeasure, onFocusin: this.handleExpandMeasure, "aria-label": this.ariaLabelText || this.label || this.icon }, h("co-icon", { key: 'a1384ce9899fb2cbf5f4917cca49fb41480d82f6', name: this.icon, size: iconSize }), this.label && (h("span", { key: 'c5d7370d87478218dcce73c3c1d3edbf1c5c4a01', class: "co-fab__label", ref: (el) => (this.labelEl = el) }, this.label))));
+            }, type: "button", disabled: this.disabled, onClick: this.handleClick, onPointerEnter: this.handleExpandMeasure, onFocusin: this.handleExpandMeasure, "aria-label": this.ariaLabelText || this.label || this.icon }, h("co-icon", { key: '279d46289a80b83745e82743f9b13e22a28669ba', name: this.icon, size: iconSize }), this.label && (h("span", { key: 'f91eaf3101142d390c6281c0c945016b421f995b', class: "co-fab__label", ref: (el) => (this.labelEl = el) }, this.label))));
     }
     static get is() { return "co-fab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-file-field/co-file-field.css

@@ -34,9 +34,11 @@
   cursor: default;
 }
 
+/* Tinta de estado por --co-semantic-text-*: gira con el tema (status-* es relleno, no se
+   aclara, y como texto en oscuro daba <4,5). Fallback a la primitiva hasta publicar tokens. */
 .co-field-required {
   margin-left: 2px;
-  color: var(--co-color-status-error);
+  color: var(--co-semantic-text-error, var(--co-color-status-error));
 }
 
 .co-field-required__caption {
@@ -252,8 +254,11 @@
   border-radius: var(--co-border-radius-sm);
 }
 
+/* Borde de error de CAMPO por --co-semantic-border-error: gira con el tema (status-error es
+   relleno fijo y como trazo en oscuro daba 2,94:1). En claro vale status-error (idéntico).
+   Fallback: la primitiva de hoy, hasta publicar tokens. */
 .co-file-field__row--error {
-  border-color: var(--co-semantic-status-error);
+  border-color: var(--co-semantic-border-error, var(--co-semantic-status-error));
 }
 
 .co-file-field__row--dragging {
@@ -285,7 +290,7 @@
 }
 
 .co-file-field__row--error .co-file-field__row-icon {
-  color: var(--co-semantic-status-error);
+  color: var(--co-semantic-text-error, var(--co-semantic-status-error));
 }
 
 .co-file-field__row-icon--spin {
@@ -316,7 +321,7 @@
 }
 
 .co-file-field__row-error {
-  color: var(--co-semantic-status-error);
+  color: var(--co-semantic-text-error, var(--co-semantic-status-error));
   font-size: var(--co-font-size-12);
 }
 
@@ -414,12 +419,12 @@
 
 .co-file-field--invalid .co-file-field__dropzone,
 .co-file-field--error .co-file-field__dropzone {
-  border-color: var(--co-semantic-status-error);
+  border-color: var(--co-semantic-border-error, 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);
+  color: var(--co-semantic-text-error, var(--co-semantic-status-error));
 }
 
 /* ── Horizontal layout: label left; control + helper stacked right ──

package/dist/collection/components/co-file-field/co-file-field.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { RequiredMark } from "../../utils/requiredMark";
 import { fillTemplate, getFileStrings } from "../../utils/fileI18n";
-import { fileExtension, formatBytes, isPreviewable, isVideo, previewSrc, truncateLeft, } from "./co-file-field.utils";
+import { acceptsFile, downloadViaBlob, fileExtension, formatBytes, isPreviewable, isVideo, previewSrc, truncateLeft, } from "./co-file-field.utils";
 /**
  * Host-driven file selector — renders a drop-zone + previews + a file list with
  * upload progress, but performs NO upload itself. When the user picks/drops
@@ -175,19 +175,31 @@ export class CoFileField {
         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 });
+        // acceptsFile entiende el comodín `image/*` (antes: igualdad exacta de MIME → toda imagen
+        // del explorador salía «Formato no permitido»).
+        if (!acceptsFile(this.acceptList, file)) {
+            return fillTemplate(this.strings.errInvalidFormat, { x: this.extOf(file.name) });
         }
         if (this.maxBytes && file.size > this.maxBytes) {
             return fillTemplate(this.strings.errTooLarge, { x: formatBytes(file.size) });
         }
         return null;
     }
+    /**
+     * Descarga de verdad (fetch → blob): el `download` del <a> no vale con la URL firmada
+     * cross-origin. ⌘/Ctrl/Shift/medio-click conservan el comportamiento nativo del enlace
+     * (abrir en pestaña). Si el fetch falla (CORS, red, 403) se abre la URL como antes.
+     */
+    onDownloadClick(e, item) {
+        if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || !item.url)
+            return;
+        e.preventDefault();
+        const url = item.url;
+        void downloadViaBlob(url, item.name).then((ok) => {
+            if (!ok)
+                window.open(url, '_blank', 'noopener,noreferrer');
+        });
+    }
     handleFiles(fileList) {
         if (this.disabled || this.readonly)
             return;
@@ -279,7 +291,9 @@ export class CoFileField {
         const gallery = this.previewItems();
         const images = gallery.map((it) => isVideo(it)
             ? { src: previewSrc(it), thumbnail: it.thumbnail, alt: it.name, kind: 'video', poster: it.thumbnail }
-            : { src: previewSrc(it), thumbnail: it.thumbnail, alt: it.name });
+            : // `original`: sin extensión de imagen el visor muestra la miniatura; «Abrir
+                // original» debe abrir el archivo guardado (cae a la miniatura si no decodifica).
+                { src: previewSrc(it), thumbnail: it.thumbnail, alt: it.name, original: it.url });
         const startIndex = Math.max(0, gallery.findIndex((it) => this.keyFor(it) === this.keyFor(item)));
         this.closeLightbox();
         const lb = document.createElement('co-lightbox');
@@ -363,12 +377,12 @@ export class CoFileField {
         const previews = this.previewItems();
         const canReorder = this.reorderable && this.multiple && !this.disabled && !this.readonly && items.length > 1;
         const capacity = this.capacityHint(s);
-        return (h("div", { key: 'ee6fa70ea7fd466ec315eff1b6f3d044b1c6c6d9', class: {
+        return (h("div", { key: '4a6cea48737c68e53f90a32e962660473f49ce5a', 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: '48a181a0cb1e0c53da9d61a856f3d2cc5e97d079', class: "co-file-field__labels" }, h("label", { key: '47f162d9fdad44d4c8c8f7756c901eea216b7627', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '4549d57f016e2874ea7b141d9dc83e09c38bdbf3', required: this.required })))), showDropzone && (h("div", { key: '3d16ff2e38de335e5fba78931cd6b1b009603a70', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: '3532e314c63b19208c7a7665dd025ff38585a598', class: "co-file-field__labels" }, h("label", { key: 'ae8aa6da81d6b959233218473086ecabe5ab8017', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '78d12c0e676217fd208bc03cc6a119b6fbf521e7', required: this.required })))), showDropzone && (h("div", { key: 'a6e5764aa57090d6b9383b1f8148bcba1239ff3a', 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) => {
@@ -376,7 +390,7 @@ export class CoFileField {
                     e.preventDefault();
                     this.handleBrowse();
                 }
-            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: 'e9a2c51a238455e7887e8310c02ac739ebf89e4e', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: '5a6fe016b2e26896a8b788bb1473c5434d71e85f', name: "file-arrow-up", size: 18 }), h("span", { key: 'e69793c228fef62c5c0aec07f5f038aa3e931b3b' }, this.uploadButtonText || s.uploadButton)), h("span", { key: '7343bd26d1132ac6b0b0ded57f1a2a32f228d0e8', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: 'd7b68c8723c91b80b124298e29c9165c2489f59f', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: '38318d6e86a90cc8faf6955ea480b39d242d8122', class: "co-file-field__actions", part: "actions" }, h("slot", { key: 'ad9f134cd0f01b1ed61d8d8966d5a7d40bda0812', name: "actions" })), h("input", { key: '8a3b769794a89213a1f02f0b82899e624a5578d6', 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: '8040d77615d29a691bc2087eddd7298b3922066c', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: 'e4660cdfe20c1b4669b57a4474234161bac4c812', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: '636e3e35dcb8ad263361e1b652dca23b499e5354', class: "co-file-field__previews", part: "previews" }, previews.map((item) => {
+            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: '44558c1a5d15c5aca23a7e204bcccf5e57d6b740', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: '662340ae54f1d070606c0fd8226155b0360e803e', name: "file-arrow-up", size: 18 }), h("span", { key: '752f18e7121040eb4edf571a54a9a5308825cb13' }, this.uploadButtonText || s.uploadButton)), h("span", { key: 'b92332ee8e7e658b33814b8c1ae34a4630045819', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: 'ed1f7c9093145ecbb49446b72a3d3bc99ee232e2', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: 'fd4953e9dfebf35936ae836d6f28ccdc17ccf951', class: "co-file-field__actions", part: "actions" }, h("slot", { key: 'c2e568fabd1512ecfa298c2ab281d310fbe21664', name: "actions" })), h("input", { key: '17acb79e8d066c18f7c1ac051a365d4282c852af', 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: 'a793e2b836269abaafe71fd56b07b3d54155cf75', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: '2a265874db718faf1e78f2dd46e5ff14bbfbbff2', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: 'a4ebb3fae5ad4b2b29263381f9eb5ae03a98867d', class: "co-file-field__previews", part: "previews" }, previews.map((item) => {
             const key = this.keyFor(item);
             const video = isVideo(item);
             // A video without a usable poster still gets a card — the
@@ -387,7 +401,7 @@ export class CoFileField {
                     'co-file-field__preview': true,
                     'co-file-field__preview--video': video,
                 }, part: "preview", type: "button", key: `prev-${key}`, title: item.name, "aria-label": `${video ? s.playVideo : s.openPreview}: ${item.name}`, onClick: () => this.handlePreviewOpen(item) }, showImg && (h("img", { src: video ? poster : item.thumbnail || item.url, alt: item.name, loading: "lazy", onError: () => this.handlePreviewError(item) })), video && (h("span", { class: "co-file-field__preview-play", "aria-hidden": "true" }, h("span", { class: "co-file-field__preview-play-badge" }, h("co-icon", { name: "play", size: 20, weight: "fill" })), !poster && (h("span", { class: "co-file-field__preview-ext" }, fileExtension(item).toUpperCase()))))));
-        }))), h("ul", { key: 'b67b8c43f8c02c65e780b3fa644123bf0f29d69b', class: "co-file-field__list", part: "list" }, items.map((item) => {
+        }))), h("ul", { key: '97ead2383d036b1ed2b09d6e931be2bfbcce25d2', 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: {
@@ -407,14 +421,14 @@ export class CoFileField {
                     '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("co-tooltip", { content: s.downloadFile }, h("a", { class: "co-file-field__action", href: item.url, target: "_blank", rel: "noopener noreferrer", download: item.name, tabIndex: -1, "aria-label": s.downloadFile }, h("co-icon", { name: "download", size: 18 })))), item.status === 'done' && !!item.url && (h("co-tooltip", { content: this.copiedKey === key ? s.copied : s.copyUrl }, h("button", { class: {
+                    : 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("co-tooltip", { content: s.downloadFile }, h("a", { class: "co-file-field__action", href: item.url, target: "_blank", rel: "noopener noreferrer", download: item.name, tabIndex: -1, "aria-label": s.downloadFile, onClick: (e) => this.onDownloadClick(e, item) }, h("co-icon", { name: "download", size: 18 })))), item.status === 'done' && !!item.url && (h("co-tooltip", { content: this.copiedKey === key ? s.copied : s.copyUrl }, h("button", { class: {
                     'co-file-field__action': true,
                     'co-file-field__action--copied': this.copiedKey === key,
                 }, type: "button", tabIndex: -1, "aria-label": s.copyUrl, onClick: () => this.handleCopy(item) }, h("co-icon", { name: this.copiedKey === key ? 'check' : 'copy', size: 18 })))), !this.disabled && !this.readonly && (h("co-tooltip", { content: s.removeFile }, h("button", { class: "co-file-field__action", type: "button", tabIndex: -1, "aria-label": s.removeFile, onClick: () => this.coRemove.emit(key) }, h("co-icon", { name: "trash", size: 18 }))))));
-        })))), helper && (h("div", { key: 'ff75602503a198d8598d2b35fd881c848a7b76d6', class: {
+        })))), helper && (h("div", { key: 'd4fef1bb2aa10f90ca7cd5e01bb5fed9ea917637', class: {
                 'co-file-field__helper': true,
                 'co-file-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'af79e0b999c781560c316023897aaa850b1d6ae0', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: 'b5af4dab0d3c7dc317265604159a95f3bf8d200d', class: "co-file-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '2fb9d5d28732c239bcec4b0a30dfe194367e8b5d', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '09bd101388c52a7fb8d0139c20f52f2da733543b', class: "co-file-field__helper-text" }, helper)))));
     }
     static get is() { return "co-file-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-file-field/co-file-field.utils.js

@@ -92,3 +92,60 @@ export function previewSrc(item) {
         return item.url || item.thumbnail;
     return hasImageExtension(item) ? item.url || item.thumbnail : item.thumbnail || item.url;
 }
+/** Extensiones conocidas por familia MIME: respaldo del comodín cuando el navegador no da `type`. */
+const EXTS_BY_FAMILY = { image: IMAGE_EXTS, video: VIDEO_EXTS };
+/**
+ * ¿`file` entra por la lista `accept` normalizada (sin punto, en minúscula)? Acepta extensión
+ * (`pdf`), MIME exacto (`application/pdf`) y COMODÍN de MIME (`image/*`) — el mismo vocabulario
+ * que el atributo `accept` del `<input>`. Sin el comodín, `image/*` rechazaba toda imagen que el
+ * propio picker del navegador había dejado elegir («Formato no permitido: .png»).
+ * Lista vacía = todo permitido.
+ */
+export function acceptsFile(list, file) {
+    if (!list.length)
+        return true;
+    const ext = extOf(file.name);
+    const type = (file.type || '').toLowerCase();
+    return list.some((a) => {
+        var _a;
+        if (!a.includes('/'))
+            return a === ext;
+        if (!a.endsWith('/*'))
+            return type === a;
+        const family = a.slice(0, -2);
+        // Sin MIME (algunos SO/drag de apps no lo mandan): la extensión conocida de la familia.
+        return type ? type.startsWith(`${family}/`) : !!((_a = EXTS_BY_FAMILY[family]) === null || _a === void 0 ? void 0 : _a.has(ext));
+    });
+}
+const REVOKE_DELAY_MS = 2000;
+/**
+ * Descarga `url` como archivo `name`: fetch → blob → object URL → `<a download>`. Un `<a
+ * download>` directo NO sirve con las URLs de los archivos: son firmadas y cross-origin
+ * (S3/CDN), y el navegador IGNORA `download` fuera del mismo origen — abría la imagen en otra
+ * pestaña. Devuelve `false` si no se pudo (CORS, red, 403/404 — un `!ok` no se guarda, sería el
+ * XML de error) para que el host caiga a abrir la URL. El object URL se revoca DIFERIDO: revocarlo
+ * en el mismo tick cancela el handoff de la descarga en algunos motores.
+ */
+export async function downloadViaBlob(url, name, deps = {}) {
+    const { fetchImpl = globalThis.fetch, doc = globalThis.document, urlApi = URL } = deps;
+    try {
+        const res = await fetchImpl(url);
+        if (!res.ok)
+            return false;
+        const objectUrl = urlApi.createObjectURL(await res.blob());
+        const link = doc.createElement('a');
+        link.href = objectUrl;
+        link.download = name || 'download';
+        link.rel = 'noopener noreferrer';
+        doc.body.appendChild(link);
+        link.click();
+        setTimeout(() => {
+            link.remove();
+            urlApi.revokeObjectURL(objectUrl);
+        }, REVOKE_DELAY_MS);
+        return true;
+    }
+    catch (_a) {
+        return false;
+    }
+}

package/dist/collection/components/co-file-type-tile/co-file-type-tile.js

@@ -22,7 +22,7 @@ export class CoFileTypeTile {
         const iconSize = Math.round(this.size * 0.5);
         const background = this.colorTags ? meta.tint : 'var(--co-color-gray-100)';
         const color = this.colorTags ? meta.accent : 'var(--co-color-gray-600)';
-        return (h("span", { key: 'da0b0b3e48e1847bd7c74e32bec23abc074f53a7', class: {
+        return (h("span", { key: '9c08b899dcf809c6c5dffe9eef70d277cdbdc37d', class: {
                 'co-file-type-tile': true,
                 [`co-file-type-tile--${type}`]: true,
                 'co-file-type-tile--mono': !this.colorTags,
@@ -32,7 +32,7 @@ export class CoFileTypeTile {
                 borderRadius: `${this.radius}px`,
                 background,
                 color,
-            } }, h("co-icon", { key: '70034ff2279181498ba2481fb3709cae3016901d', name: meta.icon, size: iconSize, weight: "fill" })));
+            } }, h("co-icon", { key: '0b20a29e58d1b63951cd314838f54dc98fd3c3f8', name: meta.icon, size: iconSize, weight: "fill" })));
     }
     static get is() { return "co-file-type-tile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-gradient-bar/co-gradient-bar.js

@@ -180,12 +180,12 @@ export class CoGradientBar {
         const live = this.liveStops();
         const n = live.length;
         const hasSelection = this.selected != null && this.selected >= 0 && this.selected < n;
-        return (h("div", { key: '10e1f78165d061dd08141de0a0ca885f15b7ff83', class: {
+        return (h("div", { key: 'cef89872e93311d220f59805754f472a118dfce0', class: {
                 'co-gradient-bar': true,
                 'co-gradient-bar--disabled': this.disabled,
                 'co-gradient-bar--dragging': this.dragIndex >= 0,
                 'co-gradient-bar--transparent': hasTransparentStop(live),
-            }, role: "group", "aria-label": this.label || s.barLabel, "aria-disabled": this.disabled ? 'true' : undefined }, h("div", { key: 'e591b6e6d74ee9c9f3b9992f6d12cfd360f9fa49', class: "co-gradient-bar__track", part: "track", ref: (el) => (this.trackEl = el), onClick: this.handleTrackClick }, h("div", { key: 'fd5b93939df8988a08b8ab9f1fab36cc3eb24096', class: "co-gradient-bar__fill", style: { background: gradientCss(live) } }), live.map((stop, i) => {
+            }, role: "group", "aria-label": this.label || s.barLabel, "aria-disabled": this.disabled ? 'true' : undefined }, h("div", { key: 'bdcf7544119daba7392bd8b3f14924f81ab88f7f', class: "co-gradient-bar__track", part: "track", ref: (el) => (this.trackEl = el), onClick: this.handleTrackClick }, h("div", { key: 'ac58517f315ca19e37a6e590950397935e643be0', class: "co-gradient-bar__fill", style: { background: gradientCss(live) } }), live.map((stop, i) => {
             const selected = i === this.selected;
             // Roving tabindex: una sola parada de tab (la seleccionada, o la primera).
             const tabbable = hasSelection ? selected : i === 0;

package/dist/collection/components/co-helper-text/co-helper-text.css

@@ -20,18 +20,20 @@
   color: var(--co-semantic-text-muted);
 }
 
+/* Tinta de estado por --co-semantic-text-*: gira con el tema (status-* es relleno, no se
+   aclara, y como texto en oscuro daba <4,5). Fallback a la primitiva hasta publicar tokens. */
 .co-helper-text--error {
-  color: var(--co-semantic-status-error);
+  color: var(--co-semantic-text-error, var(--co-semantic-status-error));
 }
 
 .co-helper-text--success {
-  color: var(--co-semantic-status-success);
+  color: var(--co-semantic-text-success, var(--co-semantic-status-success));
 }
 
 .co-helper-text--warning {
-  color: var(--co-semantic-status-warning);
+  color: var(--co-semantic-text-warning, var(--co-semantic-status-warning));
 }
 
 .co-helper-text--info {
-  color: var(--co-semantic-status-info);
+  color: var(--co-semantic-text-info, var(--co-semantic-status-info));
 }

package/dist/collection/components/co-helper-text/co-helper-text.js

@@ -17,10 +17,10 @@ export class CoHelperText {
         };
     }
     render() {
-        return (h("div", { key: '12a67e485fed5d931c4325a0139d3ae7669b8de4', class: {
+        return (h("div", { key: '019ae80dcb000fb5179c645ac7ac9f218d290c53', class: {
                 'co-helper-text': true,
                 [`co-helper-text--${this.status}`]: true,
-            }, part: "helper-text" }, h("co-icon", { key: '5bdb8635fa1654a9e10176c9818ba4197fc252e8', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: 'c2f165cc0226ea1d799c62d0929d6acbf5cc1b98', class: "co-helper-text__message" }, h("slot", { key: 'd8315ea3ea6c002f83f1d936f9a3521831593b3d' }, this.message))));
+            }, part: "helper-text" }, h("co-icon", { key: '430a1f6c560ae70ae68e5ef427cb2af79960b114', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: '10b37550ab4818649debdaf87bce951948db154a', class: "co-helper-text__message" }, h("slot", { key: 'ea2433ffdf06655e3a0f2bfa8e4313e485b6d2a4' }, this.message))));
     }
     static get is() { return "co-helper-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -35,12 +35,12 @@ export class CoIcon {
         this.svgContent = await loadSvg(this.name, this.weight);
     }
     render() {
-        return (h(Host, { key: 'e6f8302d22e1fbeac4e82d199b9214063c7b2313', "aria-hidden": "true", style: {
+        return (h(Host, { key: '571cfcec3bd5dbc68b0d773278d243163441334b', "aria-hidden": "true", style: {
                 display: 'inline-flex',
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 flexShrink: '0',
-            } }, h("span", { key: '7967a0787112955036f6f88231a2a635e647e218', part: "svg", innerHTML: this.svgContent })));
+            } }, h("span", { key: 'fe079b6aa1813517cd27b88ba5855f57f260de94', part: "svg", innerHTML: this.svgContent })));
     }
     static get is() { return "co-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-icon-button/co-icon-button.css

@@ -99,11 +99,13 @@
 
 /* ─── SURFACE · DARK (on-dark theming) ──────────────────────── */
 /* Placed after the variants so it wins on icon color; opt-in via surface="dark" */
+/* Tinta de `--co-surface-dark-ink` (fallback: blanco) — misma regla que co-button: la fija
+   a on-primary una barra cuyo fondo gira con el tema (co-action-bar). */
 .co-icon-button--dark {
-  color: var(--co-icon-button-color, var(--co-color-base-blanco, #fff));
+  color: var(--co-icon-button-color, var(--co-surface-dark-ink, var(--co-color-base-blanco, #fff)));
 }
 .co-icon-button--dark.co-icon-button--ghost:hover:not(:disabled) {
-  background: var(--co-color-opacity-blanco-16, rgba(255, 255, 255, 0.16));
+  background: color-mix(in srgb, var(--co-surface-dark-ink, var(--co-color-base-blanco, #fff)) 16%, transparent);
 }
 
 /* ─── SELECTED (transversal: gana sobre cualquier variant/surface) ───── */
@@ -247,7 +249,7 @@
 /* surface="dark": el token de foco es negro-50 en tema claro y sobre una navbar
    oscura no contrasta. Misma salida que co-button para su variante on-dark. */
 .co-icon-button--dark:focus-visible {
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--co-color-base-blanco, #fff) 45%, transparent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--co-surface-dark-ink, var(--co-color-base-blanco, #fff)) 45%, transparent);
 }
 
 /* Feedback de presión: squish instantáneo; el release usa la transición base. */

package/dist/collection/components/co-icon-button/co-icon-button.js

@@ -97,7 +97,7 @@ export class CoIconButton {
         const usesSlot = !this.icon;
         const style = usesSlot
             ? Object.assign(Object.assign({}, (boxStyle !== null && boxStyle !== void 0 ? boxStyle : {})), { '--co-icon-button-glyph-size': `${resolvedIconSize}px` }) : boxStyle;
-        return (h("button", { key: 'd04a7878b984d9613603801b0b18285d02e71f7e', class: {
+        return (h("button", { key: 'c83227eb38cf7d3573e5490c7dff2130402e8a09', class: {
                 'co-icon-button': true,
                 [`co-icon-button--${this.variant}`]: true,
                 [`co-icon-button--${this.shape}`]: true,
@@ -108,7 +108,7 @@ export class CoIconButton {
                 'co-icon-button--disabled': this.disabled,
             }, style: style, disabled: this.disabled, "aria-label": this.label || (this.toggled && this.toggleIcon ? this.toggleIcon : this.icon), "aria-pressed": this.selected ? 'true' : undefined, part: "button" }, this.icon && this.toggleIcon ? (h("span", { class: { 'co-icon-button__swap': true, 'co-icon-button__swap--toggled': this.toggled }, "aria-hidden": "true" }, h("co-icon", { name: this.icon, weight: this.iconWeight, size: resolvedIconSize }), h("co-icon", { name: this.toggleIcon, weight: this.iconWeight, size: resolvedIconSize }))) : this.icon ? (h("co-icon", { name: this.icon, weight: this.iconWeight, size: resolvedIconSize })) : (
         // Sin `icon`: el consumidor proyecta su propio glifo (ver @slot).
-        h("slot", null)), this.caret && h("co-icon", { key: 'db59eb79e6609b237ed3a642f5c44f2a046a4efe', class: "co-icon-button__caret", name: "caret-down", size: 8 })));
+        h("slot", null)), this.caret && h("co-icon", { key: 'a70e77a1b2c2db11dfa0a0e0f5629c3ea2829754', class: "co-icon-button__caret", name: "caret-down", size: 8 })));
     }
     static get is() { return "co-icon-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -259,11 +259,14 @@
 }
 
 /* ---- Integrated action button (Botón variant) ---- */
+/* Padding SIMÉTRICO, el mismo escalón que `co-button` square s (8/12) y que el lateral del
+   campo: con 8px del lado del ícono y 12 del otro, el ícono quedaba pegado al borde y el
+   botón se leía descentrado (2026-09-30). El lateral sigue a la talla del input (abajo). */
 .co-input__action {
   display: flex;
   align-items: center;
   gap: var(--co-spacing-sm);
-  padding: var(--co-spacing-sm2) var(--co-spacing-md) var(--co-spacing-sm2) var(--co-spacing-sm2);
+  padding: var(--co-spacing-sm2) var(--co-spacing-md);
   background: var(--co-semantic-surface-primary);
   color: var(--co-semantic-on-primary);
   border: none;
@@ -300,6 +303,19 @@
   align-items: center;
 }
 
+/* Lateral proporcional a la talla (el alto ya lo da la fila, que estira el botón al campo). */
+.co-input--s .co-input__action {
+  padding-inline: var(--co-spacing-sm2);
+}
+
+.co-input--sm .co-input__action {
+  padding-inline: var(--co-spacing-sm2);
+}
+
+.co-input--lg .co-input__action {
+  padding-inline: var(--co-spacing-lg);
+}
+
 /* ---- Helper text ---- */
 .co-input__helper {
   display: flex;
@@ -369,24 +385,29 @@
   align-items: center;
 }
 
-.co-input--success .co-input__status-icon { color: var(--co-semantic-status-success); }
-.co-input--error .co-input__status-icon   { color: var(--co-semantic-status-error); }
-.co-input--warning .co-input__status-icon { color: var(--co-color-status-review); }
-.co-input--info .co-input__status-icon    { color: var(--co-semantic-status-info); }
+/* Tinta de estado por --co-semantic-text-*: gira con el tema (status-* es relleno, no se
+   aclara, y como texto en oscuro daba <4,5). Fallback a la primitiva hasta publicar tokens. */
+.co-input--success .co-input__status-icon { color: var(--co-semantic-text-success, var(--co-semantic-status-success)); }
+.co-input--error .co-input__status-icon   { color: var(--co-semantic-text-error, var(--co-semantic-status-error)); }
+.co-input--warning .co-input__status-icon { color: var(--co-semantic-text-warning, var(--co-color-status-review)); }
+.co-input--info .co-input__status-icon    { color: var(--co-semantic-text-info, var(--co-semantic-status-info)); }
 
 /* Error */
+/* Borde de error de CAMPO por --co-semantic-border-error: gira con el tema (status-error es
+   relleno fijo y como trazo en oscuro daba 2,94:1). En claro vale status-error (idéntico); el
+   halo sale de color-mix 12% (= el rgba(170, 46, 27, .12) de antes). Fallback: la primitiva de hoy. */
 .co-input--error .co-input__field {
-  border-color: var(--co-semantic-status-error);
+  border-color: var(--co-semantic-border-error, var(--co-semantic-status-error));
 }
 
 .co-input--error.co-input--focused .co-input__field {
-  border-color: var(--co-semantic-status-error);
-  box-shadow: 0 0 0 2px rgba(170, 46, 27, 0.12);
+  border-color: var(--co-semantic-border-error, var(--co-semantic-status-error));
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--co-semantic-border-error, var(--co-semantic-status-error)) 12%, transparent);
 }
 
 .co-input__helper--error .co-input__helper-icon,
 .co-input__helper--error .co-input__helper-text {
-  color: var(--co-semantic-status-error);
+  color: var(--co-semantic-text-error, var(--co-semantic-status-error));
 }
 
 /* Shake de validación (receta tdev): keyframe multi-segmento con easing POR STOP.
@@ -434,7 +455,7 @@
 
 .co-input__helper--success .co-input__helper-icon,
 .co-input__helper--success .co-input__helper-text {
-  color: var(--co-semantic-status-success);
+  color: var(--co-semantic-text-success, var(--co-semantic-status-success));
 }
 
 /* Warning — Figma uses estatus/en-revisión/in-review (#85571f) */
@@ -449,7 +470,7 @@
 
 .co-input__helper--warning .co-input__helper-icon,
 .co-input__helper--warning .co-input__helper-text {
-  color: var(--co-color-status-review);
+  color: var(--co-semantic-text-warning, var(--co-color-status-review));
 }
 
 /* Info */
@@ -464,12 +485,13 @@
 
 .co-input__helper--info .co-input__helper-icon,
 .co-input__helper--info .co-input__helper-text {
-  color: var(--co-semantic-status-info);
+  color: var(--co-semantic-text-info, var(--co-semantic-status-info));
 }
 
+/* Asterisco de requerido: tinta --co-semantic-text-error (gira con el tema). */
 .co-field-required {
   margin-left: 2px;
-  color: var(--co-color-status-error);
+  color: var(--co-semantic-text-error, var(--co-color-status-error));
 }
 
 .co-field-required__caption {
@@ -497,7 +519,9 @@
    ============================================================ */
 
 .co-input--fill .co-input__field {
-  background: var(--co-color-gray-100, #f6f6f6);
+  /* surface-control = gray-100 en claro; gira en oscuro (con la primitiva el texto, en
+     text-default, quedaba blanco sobre la píldora clara). */
+  background: var(--co-semantic-surface-control, #f6f6f6);
   border: none;
   box-shadow: none;
   border-radius: 10px;
@@ -521,22 +545,24 @@
   letter-spacing: var(--co-font-letter-spacing-body);
 }
 
+/* Placeholder, lupa y X en text-muted: gray-400 (= text-disabled) daba 2,6 sobre la píldora y no
+   son controles deshabilitados (auditoría 2026-09-27, §5). */
 .co-input--fill .co-input__native::placeholder {
-  color: var(--co-color-gray-400, #a0a0a0);
+  color: var(--co-semantic-text-muted, #888888);
 }
 
-/* Search glyph — gray-400 */
+/* Search glyph */
 .co-input--fill .co-input__icon {
-  color: var(--co-color-gray-400, #a0a0a0);
+  color: var(--co-semantic-text-muted, #888888);
 }
 
-/* Plain-x clear — gray-400, darkens on hover */
+/* Plain-x clear — darkens on hover (text-secondary = gray-600 en claro; gira en oscuro) */
 .co-input--fill .co-input__clear {
-  color: var(--co-color-gray-400, #a0a0a0);
+  color: var(--co-semantic-text-muted, #888888);
 }
 
 .co-input--fill .co-input__clear:hover {
-  color: var(--co-color-gray-600, #585858);
+  color: var(--co-semantic-text-secondary, #585858);
 }
 
 /* No focus ring in pill mode — the design is a flat gray pill */
@@ -627,11 +653,12 @@
   color: var(--co-semantic-text-muted);
 }
 
-/* xs: el prefijo hereda 12px/400 gray-600 (Figma) */
+/* xs: el prefijo hereda 12px/400 gray-600 (Figma) — por text-secondary, que es gray-600 en claro y
+   gira en oscuro. */
 .co-input--xs .co-input__input-wrapper ::slotted([slot="prefix"]) {
   font-size: var(--co-font-size-12);
   font-weight: 400;
-  color: var(--co-color-gray-600, #585858);
+  color: var(--co-semantic-text-secondary, #585858);
 }
 
 /* ---- --co-input-suffix-color: color configurable del slot suffix ----

package/dist/collection/components/co-json-field/co-json-field.css

@@ -36,9 +36,11 @@
   cursor: default;
 }
 
+/* Tinta de estado por --co-semantic-text-*: gira con el tema (status-* es relleno, no se
+   aclara, y como texto en oscuro daba <4,5). Fallback a la primitiva hasta publicar tokens. */
 .co-field-required {
   margin-left: 2px;
-  color: var(--co-color-status-error);
+  color: var(--co-semantic-text-error, var(--co-color-status-error));
 }
 
 .co-field-required__caption {
@@ -146,20 +148,23 @@
 }
 
 /* ---- Invalid / error (internal JSON parse OR external status) ---- */
+/* Borde de error de CAMPO por --co-semantic-border-error: gira con el tema (status-error es
+   relleno fijo y como trazo en oscuro daba 2,94:1). En claro vale status-error (idéntico); el
+   halo sale de color-mix 12% (= el rgba(170, 46, 27, .12) de antes). Fallback: la primitiva de hoy. */
 .co-json-field--invalid .co-json-field__field,
 .co-json-field--error .co-json-field__field {
-  border-color: var(--co-semantic-status-error);
+  border-color: var(--co-semantic-border-error, var(--co-semantic-status-error));
 }
 
 .co-json-field--invalid.co-json-field--focused .co-json-field__field,
 .co-json-field--error.co-json-field--focused .co-json-field__field {
-  border-color: var(--co-semantic-status-error);
-  box-shadow: 0 0 0 2px rgba(170, 46, 27, 0.12);
+  border-color: var(--co-semantic-border-error, var(--co-semantic-status-error));
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--co-semantic-border-error, var(--co-semantic-status-error)) 12%, transparent);
 }
 
 .co-json-field__helper--error .co-json-field__helper-icon,
 .co-json-field__helper--error .co-json-field__helper-text {
-  color: var(--co-semantic-status-error);
+  color: var(--co-semantic-text-error, var(--co-semantic-status-error));
 }
 
 /* ── Horizontal layout: label left; control + helper stacked right ──

package/dist/collection/components/co-json-field/co-json-field.js

@@ -104,17 +104,17 @@ export class CoJsonField {
     render() {
         const helper = this.internalInvalid ? this.invalidMessage : this.helperText;
         const statusClass = this.status !== 'default' ? `co-json-field--${this.status}` : '';
-        return (h("div", { key: '116c07e036c670e20dd461a907a3bc46e0120b74', class: {
+        return (h("div", { key: '3488016fe7b45678a0925275fd240b29107733e4', class: {
                 'co-json-field': true,
                 'co-json-field--disabled': this.disabled,
                 'co-json-field--focused': this.hasFocus,
                 'co-json-field--invalid': this.isInvalid,
                 [`co-json-field--${this.size}`]: true,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, this.label && (h("div", { key: 'aecaf5025db4a5fe4030e513b57df1b98121b62e', class: "co-json-field__labels" }, h("label", { key: '2f23f19d1fa5cd9f324c67a6fe93ac3d5df98c66', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'cf1dad000ccfd9de7598c2891413f2564d5e3f6e', required: this.required })))), h("div", { key: '0c43c4df775b1a854f10db5a0531d5e0817a916c', class: "co-json-field__field", part: "field" }, h("textarea", { key: 'f9472a1dbc02388214d0c51277dcc838289e2b79', class: "co-json-field__native", rows: this.rows, spellcheck: false, autocomplete: "off", value: this.draft, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'JSON' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), this.name && h("input", { key: '6c365c240716d857fc026e4c58c08c59722b95f9', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: 'e97c531fbd3a1c3dbec67d0de3f90ba632fe64cb', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: '46cac96bd27c532528d00ed9178dcd52c76b1fce', class: "co-json-field__labels" }, h("label", { key: '7ea63ec78e2c9637c5be2c9737f62e612473d567', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'e0a6da86cfde978e7e1ae6bfd1a834967b6bb829', required: this.required })))), h("div", { key: '78e11d6f221bfe35bab6299be7c1f7c97bc3a05a', class: "co-json-field__field", part: "field" }, h("textarea", { key: '70eda7639839b0f83c85db5a6d40da2a0eb07ebf', class: "co-json-field__native", rows: this.rows, spellcheck: false, autocomplete: "off", value: this.draft, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'JSON' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), this.name && h("input", { key: '6f0517a5284ac3eea2c6788cb0c64c630e6527d3', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: 'ff13e6ce9172d5c45230e0bc1d3231a232db1214', class: {
                 'co-json-field__helper': true,
                 'co-json-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'ae9751723abb04b19127d93a4fd798f5e03e8b90', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: '8d44b589ba7d923476e7fd94f572d04452585977', class: "co-json-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '2db231d921b67b6c6ff7fd058e6903f6ffd99977', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: 'af3dc5badb989c19bfaf960a09a63efff2f59308', class: "co-json-field__helper-text" }, helper)))));
     }
     static get is() { return "co-json-field"; }
     static get encapsulation() { return "shadow"; }