@prolibu-suite/cobalt-core 0.11.6 → 0.11.8

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"; }

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

@@ -153,7 +153,7 @@ export class CoKbd {
                 keyNodes.push(h("kbd", { class: "co-kbd__key", part: "key", key: `key-${index}` }, renderToken(token, iconSize)));
             });
         }
-        return (h("span", { key: 'd2b28cba40938051dd4488ceb0e06391e9e4b31d', class: {
+        return (h("span", { key: '539eee42201f514049f1a879f1cab901af375b79', class: {
                 'co-kbd': true,
                 [`co-kbd--${this.size}`]: true,
                 [`co-kbd--${this.surface}`]: true,

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

@@ -1,6 +1,8 @@
 import { h } from "@stencil/core";
 import { langFromLocale } from "../../utils/dateI18n";
 import { getLightboxStrings } from "../../utils/lightboxI18n";
+import { openMediaInTab } from "./openInTab";
+import { isPopoverOpen } from "../../utils/popoverApi";
 const MIN_SCALE = 1;
 const MAX_SCALE = 8;
 const WHEEL_FACTOR = 1.15;
@@ -59,12 +61,12 @@ export class CoLightbox {
             if (this.open) {
                 clearTimeout(this.demoteTimer);
                 try {
-                    if (!root.matches(':popover-open'))
+                    if (!isPopoverOpen(root))
                         root.showPopover();
                 }
                 catch ( /* not connected yet — the ref call retries */_a) { /* not connected yet — the ref call retries */ }
             }
-            else if (root.matches(':popover-open')) {
+            else if (isPopoverOpen(root)) {
                 // Let the opacity fade-out run before display:none kicks in.
                 clearTimeout(this.demoteTimer);
                 this.demoteTimer = setTimeout(() => {
@@ -189,10 +191,10 @@ export class CoLightbox {
             this.dragging = false;
             (_a = this.imgEl) === null || _a === void 0 ? void 0 : _a.releasePointerCapture(e.pointerId);
         };
+        /** Pestaña con el medio pintado en un <img>/<video> propio: navegar a la URL
+         *  descargaba el archivo cuando el servidor no lo sirve como imagen. */
         this.openOriginal = () => {
-            const img = this.parsedImages[this.index];
-            if (img === null || img === void 0 ? void 0 : img.src)
-                window.open(img.src, '_blank', 'noopener');
+            openMediaInTab(this.parsedImages[this.index]);
         };
         this.stop = (e) => e.stopPropagation();
     }
@@ -496,7 +498,7 @@ export class CoLightbox {
         const counter = s.counter
             .replace('{i}', String(this.index + 1))
             .replace('{n}', String(imgs.length));
-        return (h("div", { key: 'e6c6c55d90c2a0b83d142cf88f158b87c4d2e02a', class: { 'co-lightbox': true, 'co-lightbox--open': this.open }, part: "overlay", role: "dialog", "aria-modal": "true", "aria-label": img === null || img === void 0 ? void 0 : img.alt, popover: "manual", ref: this.syncTopLayer, onClick: this.requestClose }, img && (h("div", { key: 'f488f9a4ceb012d3db6549d555988001782af07b', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: 'fb57cbc8fb5ff4be44c77cbad70eba9f5fc20ebb', class: "co-lightbox__caption", title: img.alt }, img.alt), !video && (h("div", { key: 'c7928efd810878d4f7ea261558691759fcd9854c', class: "co-lightbox__zoom" }, h("button", { key: '65f92f021c1ba3feca3aa6fe18cd3feee54a5ef3', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomOut, title: s.zoomOut, onClick: () => this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '2079736e31b26e8f5acef8613f91a3bf98ca02c2', name: "minus", size: 16 })), h("button", { key: '31e7e1257b07f7232788a1a399bcb681f2685807', class: "co-lightbox__btn co-lightbox__zoom-value", type: "button", "aria-label": s.zoomReset, title: s.zoomReset, onClick: () => this.resetView() }, Math.round(this.scale * 100), "%"), h("button", { key: '0b7093aa5e7065db71419eef348422732f644b1a', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomIn, title: s.zoomIn, onClick: () => this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: 'f0e782492b2d902af14de1d3cfbc83d9b202e78c', name: "plus", size: 16 })))), h("button", { key: 'b0e78378c3ba4270d951f269fdf04fa60601efb5', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: 'dad0c979349c6c6a6b20962609d09a7c3bde55dc', name: "arrow-square-out", size: 16 })), h("button", { key: '209e8ad1ab624b30f8917a3731c2562724ac7f88', class: "co-lightbox__btn", part: "close", type: "button", "aria-label": s.close, title: s.close, ref: (el) => (this.closeBtnEl = el), onClick: this.requestClose }, h("co-icon", { key: '72c135d4b3a88ea4c87b162bc5a5651b488049b2', name: "x", size: 16 })))), img && (h("div", { key: 'af781758e0da002fc011c5a93461d7c93752a093', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: video ? undefined : this.handleWheel }, video ? (h("co-video", { class: "co-lightbox__video", part: "video",
+        return (h("div", { key: '0e6491fbe0eb9515df66d167abb555ee00d68a07', class: { 'co-lightbox': true, 'co-lightbox--open': this.open }, part: "overlay", role: "dialog", "aria-modal": "true", "aria-label": img === null || img === void 0 ? void 0 : img.alt, popover: "manual", ref: this.syncTopLayer, onClick: this.requestClose }, img && (h("div", { key: '799faaab6bb3504d723732d47618d2489ff9eae4', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: 'a9fe7f715cb0b76c4c411514ab872f45022be9ed', class: "co-lightbox__caption", title: img.alt }, img.alt), !video && (h("div", { key: '9e0df923dd41bfaa5ed3ba28538e170529a19823', class: "co-lightbox__zoom" }, h("button", { key: 'c56a015724fe92be890e6d2681e552c303c02b0a', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomOut, title: s.zoomOut, onClick: () => this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '6b84a1dac161507d4084fba067aa1d2b4bfea5ea', name: "minus", size: 16 })), h("button", { key: '0e4747500888c3bb7a35dbe490d936de053f1a0c', class: "co-lightbox__btn co-lightbox__zoom-value", type: "button", "aria-label": s.zoomReset, title: s.zoomReset, onClick: () => this.resetView() }, Math.round(this.scale * 100), "%"), h("button", { key: '52d89aa312e2eacf96072dd1f4b14f04a5966e81', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomIn, title: s.zoomIn, onClick: () => this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: 'a32b55340d8027b57595c097d992de88b5cd8799', name: "plus", size: 16 })))), h("button", { key: 'f138d46223ac0db43b3ce037f323bb5f226260a9', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: 'e39089e43b1178eb20bce0647c7b3f19e0c58110', name: "arrow-square-out", size: 16 })), h("button", { key: 'c52ebe7347d11c0c1416978002cc2b67ffc94a25', class: "co-lightbox__btn", part: "close", type: "button", "aria-label": s.close, title: s.close, ref: (el) => (this.closeBtnEl = el), onClick: this.requestClose }, h("co-icon", { key: 'bb3e0aac0dfa10c8b5de5cb54bd7601a8ae66dec', name: "x", size: 16 })))), img && (h("div", { key: '3597bd31e1b65efbb2c02cb55dbacf0ec43d7639', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: video ? undefined : this.handleWheel }, video ? (h("co-video", { class: "co-lightbox__video", part: "video",
             /* Keyed per slide: a fresh player is the only way to be sure
                poster, error state and playback all start clean. */
             key: `video-${this.index}`, ref: this.mountPlayer, src: img.src, poster: img.poster || '', aspectRatio: "auto", rounded: "none",
@@ -506,13 +508,13 @@ export class CoLightbox {
                 'co-lightbox__img': true,
                 'co-lightbox__img--zoomed': this.scale > MIN_SCALE,
                 'co-lightbox__img--dragging': this.dragging,
-            }, part: "image", ref: (el) => (this.imgEl = el), src: img.src, alt: img.alt || '', draggable: false, style: { transform: `translate(${this.tx}px, ${this.ty}px) scale(${this.scale})` }, onClick: this.stop, onDblClick: this.handleDblClick, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp })))), img && multi && (h("button", { key: '014622508d9f057d3063dbafefb79d9db7d182d6', class: "co-lightbox__nav co-lightbox__nav--prev", part: "prev", type: "button", "aria-label": s.prevImage, title: s.prevImage, onClick: (e) => {
+            }, part: "image", ref: (el) => (this.imgEl = el), src: img.src, alt: img.alt || '', draggable: false, style: { transform: `translate(${this.tx}px, ${this.ty}px) scale(${this.scale})` }, onClick: this.stop, onDblClick: this.handleDblClick, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp })))), img && multi && (h("button", { key: '5185685a016df10825bd2ddd4479c074ab88b9e4', class: "co-lightbox__nav co-lightbox__nav--prev", part: "prev", type: "button", "aria-label": s.prevImage, title: s.prevImage, onClick: (e) => {
                 e.stopPropagation();
                 this.goTo(-1);
-            } }, h("co-icon", { key: '8751f7fd41bc9ff145d1f41b18bc1fc719f4791e', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: '1fae0772a594c9354db4d0aace04b6741cf7ae1b', class: "co-lightbox__nav co-lightbox__nav--next", part: "next", type: "button", "aria-label": s.nextImage, title: s.nextImage, onClick: (e) => {
+            } }, h("co-icon", { key: 'ff3d9a5e57dc9e74ef29c9ee8696040f46a295f2', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: '33eaec6709a4f22490ff56c93a32de332c6adc65', class: "co-lightbox__nav co-lightbox__nav--next", part: "next", type: "button", "aria-label": s.nextImage, title: s.nextImage, onClick: (e) => {
                 e.stopPropagation();
                 this.goTo(1);
-            } }, h("co-icon", { key: '7823ad091764d26ed79e460c0288b97dec1260bb', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: '3aa1f701ddf4c433c48790550071bc0c4e87dbc9', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
+            } }, h("co-icon", { key: '1631e46b4d05c2f1495842adb2a6e524dc67b47d', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: 'cf751691f9dffb1325c9a5183b1cca2c01bd28c4', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
     }
     static get is() { return "co-lightbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-lightbox/openInTab.js

@@ -0,0 +1,63 @@
+/**
+ * «Abrir original» del visor: abre una pestaña y MUESTRA el medio dentro de un
+ * `<img>`/`<video>` propio, en vez de navegar a la URL del archivo.
+ *
+ * Navegar directo dependía de cómo el servidor sirve el archivo: guardado sin
+ * tipo (`application/octet-stream`, típico de un nombre sin extensión) o con
+ * `Content-Disposition: attachment`, el navegador lo DESCARGA en vez de
+ * mostrarlo — «a veces abre, a veces descarga». Un `<img>` detecta el tipo por
+ * el contenido e ignora la disposición, así que siempre se ve.
+ *
+ * `original` (el archivo guardado) gana sobre `src` (a veces solo la miniatura);
+ * si el original no es decodificable como imagen (un PDF con miniatura), cae a
+ * `src` una vez. La pestaña nace en `about:blank` (mismo origen, por eso se
+ * puede escribir) y se le corta `opener` enseguida: el contenido se arma con
+ * APIs del DOM, nunca con un string de HTML.
+ *
+ * @returns false si no hay qué abrir o el navegador bloqueó la pestaña.
+ */
+export function openMediaInTab(item, open = defaultOpen) {
+    const primary = (item === null || item === void 0 ? void 0 : item.original) || (item === null || item === void 0 ? void 0 : item.src);
+    if (!item || !primary)
+        return false;
+    const win = open('', '_blank');
+    if (!win)
+        return false;
+    try {
+        win.opener = null;
+    }
+    catch (_a) {
+        /* opener de solo lectura en algún navegador: seguimos, el contenido es nuestro */
+    }
+    renderViewer(win.document, item, primary);
+    return true;
+}
+function renderViewer(doc, item, primary) {
+    var _a;
+    doc.title = item.alt || '';
+    if (!doc.body)
+        return;
+    // Sin hojas de estilo en about:blank: colores de SISTEMA (Canvas) con esquema
+    // oscuro, no hex — el fondo neutro de un visor de imagen.
+    doc.body.style.cssText =
+        'margin:0;min-height:100vh;display:grid;place-items:center;color-scheme:dark;background:Canvas;color:CanvasText';
+    const video = item.kind === 'video';
+    const media = doc.createElement(video ? 'video' : 'img');
+    media.style.cssText = 'max-width:100vw;max-height:100vh;object-fit:contain';
+    media.setAttribute('src', primary);
+    if (video) {
+        media.setAttribute('controls', '');
+        if (item.poster)
+            media.setAttribute('poster', item.poster);
+    }
+    else {
+        media.setAttribute('alt', item.alt || '');
+        if (item.src && item.src !== primary) {
+            (_a = media.addEventListener) === null || _a === void 0 ? void 0 : _a.call(media, 'error', () => media.setAttribute('src', item.src), { once: true });
+        }
+    }
+    doc.body.appendChild(media);
+}
+function defaultOpen(url, target) {
+    return window.open(url, target);
+}

package/dist/collection/components/co-list-footer/co-list-footer.js

@@ -20,7 +20,7 @@ export class CoListFooter {
         this.handleSecondary = () => this.coSecondary.emit();
     }
     render() {
-        return (h("div", { key: '61546eeb0e5103393b4cd92f5621dc7be8850dc8', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (h("button", { key: '1cd3d7d6fd76363ce833ad67d89763e208d24c17', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && h("co-icon", { key: '4a7d628520bfb739de5b007fef48e64fe248ad2f', name: this.secondaryIcon, size: 16 }), h("span", { key: '7e8e2f8397c0b265e66a429da7218bdc2644c3bc' }, this.secondaryLabel))), this.primaryLabel && (h("button", { key: 'ed329dc5b328487ad4da2d737fcb82860c5e21a0', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && h("co-icon", { key: '8eb46e472523447eda9e6034aae5ea7ddd747946', name: this.primaryIcon, size: 16 }), h("span", { key: '102b70dbf80bd01085b77324e9504d582c48d5a1' }, this.primaryLabel))), h("slot", { key: '676f9c2b6d3f26ebdface52181dcaf9717c69240' })));
+        return (h("div", { key: 'f227ef139bd7ed9b2c7eefebe9a7194c75694596', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (h("button", { key: '459553f0b7c9d20b3536c7f28c6b655f09f7d448', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && h("co-icon", { key: '40905e01acf2347e07940e5ec893974d159139a0', name: this.secondaryIcon, size: 16 }), h("span", { key: '5caa7cbd563e8c38ecbf3242a124d83f6e5b3829' }, this.secondaryLabel))), this.primaryLabel && (h("button", { key: '09e2b1a1e6a6adbbdbdbf0b7c6779f32e20d8dcf', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && h("co-icon", { key: '328b81742184a712e160c2fb5c4e3bf9e0f7761b', name: this.primaryIcon, size: 16 }), h("span", { key: '8c77b5bfa44685fe9dfd845a71c0f9184c7eec65' }, this.primaryLabel))), h("slot", { key: 'c314355a70087a7135b2d70f3fa3c3e1c5e70545' })));
     }
     static get is() { return "co-list-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-list-item/co-list-item.js

@@ -73,21 +73,21 @@ export class CoListItem {
         requestAnimationFrame(this.measureTruncation);
     }
     render() {
-        return (h("div", { key: 'b00bba3c362b7fded6dbb54a3a77204fd6f12f06', class: {
+        return (h("div", { key: 'a6c32a19bfad00a58ee718c6b11b7ea6e6222ffb', class: {
                 'co-list-item': true,
                 'co-list-item--selected': this.selected,
                 'co-list-item--disabled': this.disabled,
                 'co-list-item--dense': this.dense,
                 'co-list-item--has-description': !!this.description,
-            }, part: "item", role: "option", tabindex: this.disabled ? -1 : 0, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '12df4e650ce79eb1a1081cbaa8d8a0df472bd60f', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: '6d0b024a833e411784c6c1aec18d2e170657bff5', name: this.icon, size: 18 }), h("slot", { key: '6d920565296d083b5ebd1683452b54cb18d7cc02', name: "prefix" })), h("div", { key: '9f1ee9f1a8d09ede38cdf56fe6f34bb389d3a008', class: "co-list-item__content" }, this.label && (h("co-tooltip", { key: '320ce0919f79ed00a189c19c890cdd31ec8f4fad', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, h("span", { key: 'c735e984ef6b50d4b075829e496282123463b20a', class: "co-list-item__label", ref: (el) => {
+            }, part: "item", role: "option", tabindex: this.disabled ? -1 : 0, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '35148e2d084823aae32c843d2e208abeba6a5663', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: 'e23961cd6206752f13d4330f993f4bf529f479fc', name: this.icon, size: 18 }), h("slot", { key: 'e8ade00ebb148ac3d78a78de713fdbdc58158ecd', name: "prefix" })), h("div", { key: 'b8a49675857105a7680a074eb33f0b620f2d4e44', class: "co-list-item__content" }, this.label && (h("co-tooltip", { key: 'fbe492a5506bea83b43c79cf556379dd0c6b73ea', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, h("span", { key: 'c1d5ba3dec85c410881044124bdd3668ded0c564', class: "co-list-item__label", ref: (el) => {
                 this.labelEl = el;
                 if (el && this.ro)
                     this.ro.observe(el);
-            } }, this.label))), this.description && (h("co-tooltip", { key: '729e862dc61a4c342e850b4453916bc3c477bdd2', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, h("span", { key: 'b593f33d3b0122ab535a94c7ce259add9069323c', class: "co-list-item__description", ref: (el) => {
+            } }, this.label))), this.description && (h("co-tooltip", { key: '08d220de3fe6bcd4b6d550ca0b61ab049a263957', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, h("span", { key: '8e83073268550e77f38011fabc2a1bd716f8bd15', class: "co-list-item__description", ref: (el) => {
                 this.descEl = el;
                 if (el && this.ro)
                     this.ro.observe(el);
-            } }, this.description))), h("slot", { key: '55c7bc86e9aea170a37862642531d01203071e0a' })), h("span", { key: 'bef781667653254040abbfbdc518ce6086c17248', class: "co-list-item__suffix" }, h("slot", { key: '349cde2b81c10eb9e9c425b96808ad6bcb86d527', name: "suffix" }))));
+            } }, this.description))), h("slot", { key: '1dfafc14b3fbf0853968b768c6c26f830c5ec124' })), h("span", { key: '6805f9644de89d654d26036a40e4b407292c6ea6', class: "co-list-item__suffix" }, h("slot", { key: '7da172a7a0dda9707b8d08fdc522aef2e79ddbc0', name: "suffix" }))));
     }
     static get is() { return "co-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-media-thumb/co-media-thumb.js

@@ -30,13 +30,13 @@ export class CoMediaThumb {
     }
     render() {
         var _a;
-        return (h("div", { key: '715a75c2d9bf586503838952ce1db8ba0a3b74ea', class: {
+        return (h("div", { key: '9700fd32e12db56cf8f0fc7cb81cc56a5aa6d65d', class: {
                 'co-media-thumb': true,
                 'co-media-thumb--video': this.video,
             }, part: "thumb", style: {
                 height: this.toCss(this.height),
                 borderRadius: `${this.radius}px`,
-            } }, this.src ? (h("img", { class: "co-media-thumb__img", src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : '', part: "img" })) : (h("slot", null)), this.video && (h("div", { key: '8a6e21bb26be30746d05a00b5fffca7c6992abd1', class: "co-media-thumb__scrim", part: "scrim" }, h("div", { key: '67bf73c8a6a14581b47809efac7e1d4b2628324d', class: "co-media-thumb__play", part: "play" }, h("svg", { key: 'a0f530d26561a4e7256d5f5ee20e6a7d91d8f6e0', class: "co-media-thumb__play-icon", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", "aria-hidden": "true" }, h("path", { key: '86ef92454cdcca6096cd3dc435833138c46e2e39', d: "M2 2l12 7-12 7z", fill: "var(--co-color-base-negro, #1f1c1b)" })))))));
+            } }, this.src ? (h("img", { class: "co-media-thumb__img", src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : '', part: "img" })) : (h("slot", null)), this.video && (h("div", { key: 'ad75fbbb3f3086655e6e4eea20d61088c075c892', class: "co-media-thumb__scrim", part: "scrim" }, h("div", { key: '7d5d63d5228b2c724ec2fd59680256f24fc68a00', class: "co-media-thumb__play", part: "play" }, h("svg", { key: '5b669727dc75fc95c63444e0875928a6197c40ec', class: "co-media-thumb__play-icon", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", "aria-hidden": "true" }, h("path", { key: 'f17ffe84152c1af2277832b0977f21dacc1f1bc7', d: "M2 2l12 7-12 7z", fill: "var(--co-color-base-negro, #1f1c1b)" })))))));
     }
     static get is() { return "co-media-thumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -86,6 +86,13 @@
   --co-menu-item-color: var(--co-semantic-text-inverse);
   --co-menu-item-hover-bg: var(--co-color-opacity-blanco-16, rgba(255, 255, 255, 0.16));
   --co-menu-item-selected-bg: transparent;
+  /* Submenú: su panel vive en el shadow del ítem disparador y sus filas son
+     hijas de ese ítem, así que heredan el texto claro de arriba. El panel
+     también tiene que ser oscuro (si no: texto blanco sobre panel blanco, el
+     submenú se ve vacío), y sus separadores con el mismo color que los del
+     panel raíz. */
+  --co-menu-submenu-bg: var(--co-semantic-surface-primary);
+  --co-menu-divider-color: var(--co-color-opacity-blanco-16, rgba(255, 255, 255, 0.16));
 }
 
 :host([surface='dark']) ::slotted(co-menu-divider) {

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

@@ -163,14 +163,14 @@ export class CoMenu {
         (_b = (_a = items[next]) === null || _a === void 0 ? void 0 : _a.focusItem) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
     render() {
-        return (h("co-popover", { key: '66b0e90463829343152d2a9bdb821e19e70fa4d4', placement: this.placement, offset: this.offset, open: this.open, anchor: this.anchor, shift: this.shift,
+        return (h("co-popover", { key: '41f0d2432b04182a1d0021510b27ee8ed902fe7a', placement: this.placement, offset: this.offset, open: this.open, anchor: this.anchor, shift: this.shift,
             // `co-menu` SIEMPRE pinta su propio chrome (`.co-menu`: fondo +
             // shadow-lg + anillo, o el panel sólido de `surface="dark"`) — el
             // `co-popover` interno tiene que ir SIEMPRE bare, sin condición, para
             // no sumarle un fondo/borde/sombra propios detrás (antes de esto el
             // panel del menú tenía doble
             // chrome SIEMPRE, no solo en un caso opcional).
-            bare: true, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose, onCoPlacement: this.handlePlacement }, h("slot", { key: 'b78bcba7bc9542a82c78c1b8026bd4aa56629667', name: "trigger", slot: "trigger" }), h("div", { key: '0515763cb0b89320d4831befe1b6d984029ce309', class: "co-menu", role: "menu", style: this.width ? { width: this.width, minWidth: this.width } : undefined }, h("slot", { key: 'baf72944333c4e912fe0a0aa58d8affb8e923a3e' }))));
+            bare: true, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose, onCoPlacement: this.handlePlacement }, h("slot", { key: 'a45e0b41289cfecd6bdb47eb31620136e3e037c7', name: "trigger", slot: "trigger" }), h("div", { key: 'c085991353c461adbed052de7d657f2082da5432', class: "co-menu", role: "menu", style: this.width ? { width: this.width, minWidth: this.width } : undefined }, h("slot", { key: 'c839a7ac6c8ea39336a552e4f5165aab5a8d5682' }))));
     }
     static get is() { return "co-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-menu-divider/co-menu-divider.js

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class CoMenuDivider {
     render() {
-        return h("hr", { key: '08a30fe0fba8fbbab4a6fce1bc92c700aa767b2d', class: "co-menu-divider", role: "separator" });
+        return h("hr", { key: 'dda726a648ff2ee1158dcdd11cc0b27048fb2350', class: "co-menu-divider", role: "separator" });
     }
     static get is() { return "co-menu-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-menu-item/co-menu-item.css

@@ -71,7 +71,9 @@
    quedan ACÁ, antes de `--danger:hover` (misma especificidad que
    `.co-menu-item:hover`): el hover rojo de danger gana por orden (fix C-1). */
 .co-menu-item--selected {
-  background: var(--co-menu-item-selected-bg, var(--co-color-gray-100, #f6f6f6));
+  /* Fallback surface-control (= gray-100 en claro): la primitiva no giraba y en oscuro la
+     fila seleccionada quedaba casi blanca bajo texto blanco (D6). */
+  background: var(--co-menu-item-selected-bg, var(--co-semantic-surface-control, #f6f6f6));
 }
 
 .co-menu-item:hover,
@@ -90,11 +92,17 @@
   pointer-events: none;
 }
 
+/* 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-menu-item--danger {
-  color: var(--co-color-status-error, #aa2e1b);
+  color: var(--co-semantic-text-error, var(--co-color-status-error, #aa2e1b));
 }
 .co-menu-item--danger:hover {
-  background: var(--co-color-status-bg-error, #ffefef);
+  /* Superficie de estado que gira con el tema (D4): en claro = status-bg-error (el pastel de
+     siempre) con tinta status-error; en oscuro, tinte rojo oscuro con tinta rosa clara. El
+     pastel fijo era una caja rosa clara dentro del menú oscuro. */
+  background: var(--co-semantic-surface-error, var(--co-color-status-bg-error, #ffefef));
+  color: var(--co-semantic-text-error, var(--co-color-status-error, #aa2e1b));
 }
 
 .co-menu-item__icon {
@@ -170,13 +178,17 @@
 }
 
 .co-menu-item__submenu {
-  /* surface-secondary = base-blanco. NOT surface-primary (that's base-negro). */
-  background: var(--co-semantic-surface-secondary, #fff);
+  /* surface-secondary = base-blanco. NOT surface-primary (that's base-negro).
+     `--co-menu-submenu-bg`: hook que publica `co-menu surface="dark"` (ver
+     co-menu.css) para que el submenú sea oscuro como su panel raíz. Sin
+     ancestro oscuro, el panel claro de siempre. */
+  background: var(--co-menu-submenu-bg, var(--co-semantic-surface-secondary, #fff));
   border-radius: var(--co-border-radius-sm, 12px);
-  /* Match the co-menu panel: shadow-lg + 1px inset hairline ring. */
+  /* Match the co-menu panel: shadow-lg + 1px inset hairline ring. El anillo va por
+     border-subtle (= opacity-negro-8 en claro); la primitiva no se veía en oscuro. */
   box-shadow:
     var(--co-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04)),
-    inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+    inset 0 0 0 1px var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));
   padding: var(--co-menu-padding, var(--co-spacing-xs, 4px));
   min-width: 180px;
   display: flex;

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

@@ -114,6 +114,9 @@
   display: flex;
   flex-direction: column;
   background: var(--co-semantic-surface-secondary);
+  /* Tinta pareja con el fondo: el panel vive dentro del scrim de co-overlay
+     (top layer) y lo que no declara color propio no debe heredar el contexto. */
+  color: var(--co-semantic-text-default);
   /* Squircle + sombra: .co-sq-clip y .co-sq-elevation en ESTE elemento
      (partial). No redeclarar border-radius / overflow / mask / box-shadow acá.
      Radius knob: --co-modal-r. */

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { afterEventFor } from "../co-overlay/overlayAfterClose";
+import { isTopEscapeLayer, pushEscapeLayer, removeEscapeLayer } from "../co-overlay/escapeLayers";
 import { slotHasContent } from "../../utils/slotContent";
 import { clampDragOffset, dragOffsetOf, isInteractiveDragTarget, } from "../../utils/dragMove";
 /**
@@ -236,9 +237,12 @@ export class CoModal {
         return this.backdrop !== 'none' && !this.inline;
     }
     handleKeydown(e) {
-        if (!this.open || !this.closeOnEscape)
+        // Solo la capa de ARRIBA atiende Escape (escapeLayers): un modal sobre otro modal cierra
+        // solo el de encima. Sin `closeOnEscape` el modal igual es capa: la tecla no cae al
+        // drawer de abajo.
+        if (!this.open || !this.closeOnEscape || e.key !== 'Escape')
             return;
-        if (e.key === 'Escape')
+        if (isTopEscapeLayer(this))
             this.coClose.emit();
     }
     /**
@@ -251,6 +255,9 @@ export class CoModal {
      */
     async bringToFront() {
         var _a, _b, _c;
+        // Arriba en pantalla = arriba también para Escape.
+        if (this.open)
+            pushEscapeLayer(this);
         await ((_c = (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('co-overlay')) === null || _b === void 0 ? void 0 : _b.bringToFront) === null || _c === void 0 ? void 0 : _c.call(_b));
     }
     /**
@@ -260,6 +267,16 @@ export class CoModal {
      * animación de salida (un consumidor que lo deja montado y solo apaga
      * `open` lo veía saltar).
      */
+    trackEscapeLayer(open) {
+        if (open)
+            pushEscapeLayer(this);
+        else
+            removeEscapeLayer(this);
+    }
+    connectedCallback() {
+        if (this.open)
+            pushEscapeLayer(this);
+    }
     resetPositionOnOpen(open) {
         this.endDrag();
         if (!open)
@@ -268,6 +285,7 @@ export class CoModal {
         this.writeOffset({ x: 0, y: 0 });
     }
     disconnectedCallback() {
+        removeEscapeLayer(this);
         // Desmontarse en pleno gesto no debe dejar el listener colgado.
         window.removeEventListener('blur', this.handleWindowBlur);
     }
@@ -743,6 +761,9 @@ export class CoModal {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "open",
+                "methodName": "trackEscapeLayer"
+            }, {
                 "propName": "open",
                 "methodName": "resetPositionOnOpen"
             }];