@prolibu-suite/cobalt-core 0.11.5 → 0.11.7

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,7 @@
 import { h } from "@stencil/core";
 import { langFromLocale } from "../../utils/dateI18n";
 import { getLightboxStrings } from "../../utils/lightboxI18n";
+import { openMediaInTab } from "./openInTab";
 const MIN_SCALE = 1;
 const MAX_SCALE = 8;
 const WHEEL_FACTOR = 1.15;
@@ -189,10 +190,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 +497,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: '189314e8e6be6a3b908d2c4387e0561162a1b96e', 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: 'ee52518418ac4e58cd9bcece7bc3391cb0e9742f', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: 'c9e214561c3d2b7b773f82888a9147aab7d120df', class: "co-lightbox__caption", title: img.alt }, img.alt), !video && (h("div", { key: '911216d5873a1462303f1ed5b59c14d72b7328c4', class: "co-lightbox__zoom" }, h("button", { key: '9344807bbac6aefc47824b866a4225206b859323', 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: '736c42fc97c09d76cf0aa8e0763ba56eb1ecd394', name: "minus", size: 16 })), h("button", { key: 'e115084b8e4941bd0f476b248c3cc88f096c55f2', 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: 'd5955ce9dcf15f0768a1f012a11acec012805811', 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: '64126b83b5ee1a510e4787c17a77b5bfb65db721', name: "plus", size: 16 })))), h("button", { key: '1798ea6aba9c8ce425317258b076874134de4724', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: 'a4ef44fe626c33b1b0eb11d38afe034ca5a13a8f', name: "arrow-square-out", size: 16 })), h("button", { key: 'c68fbb1498dcfe177d8255647c39b5db83a66f7c', 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: 'b62c1dd5fa4fba5a57b4c804e31494e5da48f0af', name: "x", size: 16 })))), img && (h("div", { key: '80d34170f27f6a0177747e797e10646dcfca0bed', 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 +507,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: '4ef78cd047f1e8b2efb669aefbee51b73e4c5c3b', 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: '834bd12a0dead46df44e291197f5d3b79f619932', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: '0252acb36e360dedd1fe8ac8cba74ab5895476c1', 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: '53521495d2bd6ac11004cedd96fd7351135115a7', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: 'fae75527e79964a30745accf565b33be3b466ba6', 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"
             }];

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

@@ -16,12 +16,12 @@ export class CoNavbar {
         this.rounded = false;
     }
     render() {
-        return (h("div", { key: '68c78b33434a32372eef9763b0c11c9a185f6ef8', class: {
+        return (h("div", { key: '3573a493f29f3a1b4b4d95b23f221e842b41cea6', class: {
                 'co-navbar': true,
                 [`co-navbar--${this.variant}`]: true,
                 [`co-navbar--${this.size}`]: true,
                 'co-navbar--rounded': this.rounded,
-            }, part: "navbar", role: "toolbar" }, h("slot", { key: 'a9d05ff60065f85dc24e941478a18fa40466143f' })));
+            }, part: "navbar", role: "toolbar" }, h("slot", { key: 'e4f46072826161cf3e8525e0dced7f0050b42d1b' })));
     }
     static get is() { return "co-navbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -80,7 +80,10 @@
   border-color: transparent;
 }
 
-.co-number-field--error .co-number-field__row { border-color: var(--co-semantic-status-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).
+   Fallback: la primitiva de hoy, hasta publicar tokens. */
+.co-number-field--error .co-number-field__row { border-color: var(--co-semantic-border-error, var(--co-semantic-status-error)); }
 .co-number-field--success .co-number-field__row { border-color: var(--co-semantic-status-success); }
 .co-number-field--warning .co-number-field__row { border-color: var(--co-color-status-review); }
 .co-number-field--info .co-number-field__row { border-color: var(--co-semantic-status-info); }
@@ -231,17 +234,19 @@
   line-height: 1;
 }
 
+/* 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-number-field__helper--error .co-number-field__helper-icon,
-.co-number-field__helper--error .co-number-field__helper-text { color: var(--co-semantic-status-error); }
+.co-number-field__helper--error .co-number-field__helper-text { color: var(--co-semantic-text-error, var(--co-semantic-status-error)); }
 
 .co-number-field__helper--success .co-number-field__helper-icon,
-.co-number-field__helper--success .co-number-field__helper-text { color: var(--co-semantic-status-success); }
+.co-number-field__helper--success .co-number-field__helper-text { color: var(--co-semantic-text-success, var(--co-semantic-status-success)); }
 
 .co-number-field__helper--warning .co-number-field__helper-icon,
-.co-number-field__helper--warning .co-number-field__helper-text { color: var(--co-color-status-review); }
+.co-number-field__helper--warning .co-number-field__helper-text { color: var(--co-semantic-text-warning, var(--co-color-status-review)); }
 
 .co-number-field__helper--info .co-number-field__helper-icon,
-.co-number-field__helper--info .co-number-field__helper-text { color: var(--co-semantic-status-info); }
+.co-number-field__helper--info .co-number-field__helper-text { color: var(--co-semantic-text-info, var(--co-semantic-status-info)); }
 
 /* ── Horizontal layout: label left; control + helper stacked right ──
    Set --co-field-label-width on a container to align labels across fields. */
@@ -269,9 +274,10 @@
   min-width: 0;
 }
 
+/* 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 {

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

@@ -345,18 +345,18 @@ export class CoNumberField {
         return this.scaled && !this.isEmpty ? '%' : null;
     }
     render() {
-        return (h("div", { key: '87d77047c35e2f0b3b9a978839e5b3c99541dc2e', class: {
+        return (h("div", { key: 'c06b2895c508e45d8e936ddce619f517985637bb', class: {
                 'co-number-field': true,
                 'co-number-field--disabled': this.disabled,
                 'co-number-field--focused': this.focused,
                 [`co-number-field--${this.size}`]: true,
                 [`co-number-field--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: '22f0674035a68861fae6ce37aba4e51b10c03226', class: "co-number-field__labels" }, this.label && h("label", { key: '442ee74bed62bf7c800f231ad4992b791b85a30c', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: 'ff7517b83b8e942512dcb8c1f504eafab55cea90', required: this.required })), this.secondaryLabel && h("span", { key: '736889aae85065fb28a56131e2f7a3da9fc86a48', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: 'fd6163c7cb83073db2c19c3477447076372abb44', class: "co-number-field__row", part: "row" }, !this.hideControls && (h("button", { key: 'e1a52831b83c3255ce63c4ed48a228fe4fdb1629', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: '86e0ce9b9801e50d9bda6b18a8e1f6f96581b178', name: "minus", size: 16 }))), h("input", { key: '4bdf89e9a4958841a948b3bd6e9886898917f464', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal",
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: '2ade558c7d748eefb332f4c58f8618199bd5b7cb', class: "co-number-field__labels" }, this.label && h("label", { key: '94576cf7ef1ce2bb8a0f9606613b2e12c3e4d3d1', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: '884cb5ad7003543f1cf371fa08b592ec30f62975', required: this.required })), this.secondaryLabel && h("span", { key: 'd8e98e616c43a27e8b50341a81a6c5d4c45f83a1', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: 'aa7bddd49fc689ff512c25fa9bf375c2e65a7a69', class: "co-number-field__row", part: "row" }, !this.hideControls && (h("button", { key: '037c88c0092989da13bb7174e1609150172f95fb', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: 'bb7a68226f0cfaaaca8c62ccfafdcdca2b529469', name: "minus", size: 16 }))), h("input", { key: '9bb9e56f0f8fbc0f0c64f8b07f4fc97f0cc73198', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal",
             // Mismo guard `focused` que el @Watch: mientras el usuario edita, su
             // texto manda. Sin esto, el re-render que dispara emitValue repinta
             // el input desde el NÚMERO y se come el texto en construcción
             // ("34,640.00" pegado quedaba "34,640"; un "12." perdería el punto).
-            value: this.focused && this.inputEl ? this.inputEl.value : this.displayValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }), this.affixText && (h("span", { key: '7bc7c12c6fe2708691d9a2972f9ed3037e82a1a8', class: "co-number-field__affix", "aria-hidden": "true" }, this.affixText)), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: '2ef7c424a34a8a6cbfe8ac4cd0a5d8f0ed74e6d4', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'c428ca841c0de013cd151bd356686be43992de04', name: "x-circle", size: 16, weight: "fill" }))), h("slot", { key: 'fb127a663d3839bbb10b8232b250eaf67faab898', name: "suffix" }), !this.hideControls && (h("button", { key: '684329d2f32a58f6be2a124f0cd20986a7fc49af', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: '7ef48466e060efb314466d62216a8e00168ddbcd', name: "plus", size: 16 })))), this.helperText && (h("div", { key: '2cf6df2556160fef3c1dfd1b525991eb822cb285', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '905ad795d9714fa9ae8fc2b9d4b9f6a7bba2d2ce', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: '0c4825c4145298700de006eb3170e9ec3b52d3b7', class: "co-number-field__helper-text" }, this.helperText)))));
+            value: this.focused && this.inputEl ? this.inputEl.value : this.displayValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }), this.affixText && (h("span", { key: 'b3b43651edb493510327c18d27945679e1b4f391', class: "co-number-field__affix", "aria-hidden": "true" }, this.affixText)), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: '7055c55c7a035621f0fdcae168324a515dc419d5', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '162303056606a465ad5fc43496260cadf8b5c5b2', name: "x-circle", size: 16, weight: "fill" }))), h("slot", { key: '1fba80dd46e27d7ee89c0a7dcd32f34ac9a9a5f7', name: "suffix" }), !this.hideControls && (h("button", { key: 'c9575f0459a3c9d18239fbd636b60b9ea51b4551', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: 'b310d8a2316cb841b7c87157b9ac40d7faba1bbf', name: "plus", size: 16 })))), this.helperText && (h("div", { key: 'b933f8cdf51e44d26d58c215afe2c393a068ac1c', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '99d3fd7dbef2173da5384ad12a40f6d669bb9c49', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: 'f93dac49f3b1f6ca2ae08190f51e35f600e675e4', class: "co-number-field__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-number-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-option-list/co-option-list.css

@@ -828,9 +828,11 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   --os-padding-axis: 2px;
   --os-track-bg: transparent;
   --os-handle-border-radius: var(--co-border-radius-full, 9999px);
-  --os-handle-bg: var(--co-color-opacity-negro-16, rgba(31, 28, 27, 0.16));
-  --os-handle-bg-hover: var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25));
-  --os-handle-bg-active: var(--co-color-opacity-negro-50, rgba(31, 28, 27, 0.5));
+  /* Handle por border-* (mismo valor en claro que negro-16/25/50): la tinta negra fija era
+     invisible sobre la superficie oscura del panel. */
+  --os-handle-bg: var(--co-semantic-border-default, rgba(31, 28, 27, 0.16));
+  --os-handle-bg-hover: var(--co-semantic-border-field, rgba(31, 28, 27, 0.25));
+  --os-handle-bg-active: var(--co-semantic-border-strong, rgba(31, 28, 27, 0.5));
   --os-handle-min-size: 24px;
 }
 
@@ -1005,7 +1007,8 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 }
 
 .co-option-list__match {
-  color: var(--co-color-primary-azul, #2563eb);
+  /* Resaltado de coincidencia: tinta text-link, gira con el tema (azul primitivo = 3,8:1 en oscuro). */
+  color: var(--co-semantic-text-link, var(--co-color-primary-azul, #2563eb));
   font-weight: 700;
 }
 

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

@@ -781,11 +781,11 @@ export class CoOptionList {
         const selectedIds = this.selectedIds;
         const { hasMore, remaining } = deriveMore(this.parsedItems.length, this.total, this.hasMore);
         const showClear = !!this.clearOptionLabel && selectedIds.length > 0;
-        return (h("div", { key: 'ca480a23b7127ff745ee57002a71dea707e32e95', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: 'de6a96f09450c05c9194933f3e5f732e158437c7', class: "co-option-list__search", part: "search" }, h("co-icon", { key: 'f99a19e0a194d6a0bcce6d40a736197593af8fdf', name: "magnifying-glass", size: 16 }), h("input", { key: '26fabd78b4660523e25b40bc8e92740df2677244', class: "co-option-list__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.term, onInput: this.onSearchInput, ref: (el) => (this.searchInputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list" }))), h("slot", { key: '05dc7fb2d632ba58b3b960e9355b1e48a71df32c', name: "header" }), h("div", { key: 'b3edc8acf06c7f433da9584249be73d25c5f1fee', class: "co-option-list__options", part: "options", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : 'false', ref: (el) => (this.optionsEl = el), onScroll: this.onNativeScroll }, h("div", { key: '8abe9a20998f35332ee320512a433d8fb8196875', class: "co-option-list__inner" }, showClear && (h("button", { key: '9b420f4a08d94c7588657ec73102253dc3aace29', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: '5e0d86b76f5b85ee41a4534284c4e05fec4f2df1', name: "x-circle", size: 14 }), h("span", { key: 'ff554cd331978bbe2e6aaef44b590a9de66c67d5' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: '1db10de6bf8b6cda7b7ca13f5969400ab420a3e7', class: "co-option-list__loading" }, h("co-loader", { key: 'd724879c38f755067e544503c233c740f932f46e', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: '95f42f0028e6f7a1641bc45f6a294fe2ded5a29f', class: "co-option-list__empty" }, h("co-icon", { key: '1bed6dbd8c0c4e0722f6c28c2867331bba4e3879', name: "magnifying-glass", size: 20 }), h("span", { key: '7f2d01d6eed6e91ab14ace418f52167713963976' }, this.emptyMessage))), items.length > 0 && this.virtual
+        return (h("div", { key: 'c73f8d143c1f655f4d9145ef0a2a4d3219a43e49', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: 'bd5dfa8848da20fd66293acdd87568ca0e2fbebc', class: "co-option-list__search", part: "search" }, h("co-icon", { key: '0c5aeacb9fbde646862a6359f2c58a75f31a6100', name: "magnifying-glass", size: 16 }), h("input", { key: '0a573789feff4b3cd31610ee720ddfaa2b859ea4', class: "co-option-list__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.term, onInput: this.onSearchInput, ref: (el) => (this.searchInputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list" }))), h("slot", { key: '650e79a9b2ba218f7fcd324335505fda29a87b71', name: "header" }), h("div", { key: '1f2baa6b0b6b728cd0eeab5ae555847d397351ac', class: "co-option-list__options", part: "options", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : 'false', ref: (el) => (this.optionsEl = el), onScroll: this.onNativeScroll }, h("div", { key: '33f7230c30c06ef31ac83fb5febba040f0d88d6e', class: "co-option-list__inner" }, showClear && (h("button", { key: '9934486c64862d94ee8ed6e3af603710edd2a5c6', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: 'f0abd016e20d238345c0c2d40436220631a1403a', name: "x-circle", size: 14 }), h("span", { key: '9090f327d77767db03792e13bd4bfcdd4abcffcd' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: '25b13f063b888d6d95b24a2741e1ae3e070d60ab', class: "co-option-list__loading" }, h("co-loader", { key: 'dc56d924da21b4029fc81b454672a2ded44f14ef', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: '492e6902e2849a83ac0529fe922aa43814db2c40', class: "co-option-list__empty" }, h("co-icon", { key: '2c9d91ddaad0b52e0dbff654871ce147e0617f59', name: "magnifying-glass", size: 20 }), h("span", { key: '76eacb323225035d650f1ebb6e17507035d02ac4' }, this.emptyMessage))), items.length > 0 && this.virtual
             ? this.renderVirtual(items, selectedIds)
             : buildRows(items).map((row) => row.kind === 'header'
                 ? h("div", { class: "co-option-list__group", role: "presentation" }, row.label)
-                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (h("div", { key: '9fb95c0193357bf50eabc21dae3f8ca0bb2b3a9f', class: "co-option-list__loading-more" }, h("co-loader", { key: 'dddf472d61b1c14f281212b02538bd576dce09d1', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: '6d4f16d14d67b137fe37b67fe1590d209b51b800', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: '9091482eaf2228e93b3eeb893e804d5fcd8c3d44', name: "footer" })));
+                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (h("div", { key: 'e86f2a2157e84d9e9a414f6bbf3d20235bc75829', class: "co-option-list__loading-more" }, h("co-loader", { key: 'de4c472413852c7fc3e4c6fb088632c79ce518d6', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: '12616fbfb51d2c656937e22907d5152f3f7ea210', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: 'd73683805a28e15b2a126867fd7947869ee649f6', name: "footer" })));
     }
     static get is() { return "co-option-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,6 +21,9 @@
   max-width: none;
   max-height: none;
   overflow: visible;
+  /* La UA de [popover] pone `color: CanvasText` (#000 también en oscuro, sin
+     color-scheme): el scrim es un contenedor de paso, la tinta viene del host. */
+  color: inherit;
   display: flex;
   align-items: center;
   justify-content: center;

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

@@ -298,7 +298,7 @@ export class CoOverlay {
         focusables[nextIndex].focus();
     }
     render() {
-        return (h("div", { key: 'e18d7b0e3ebd4933a78a9f2d39af6058ce429105', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", popover: "manual", tabindex: this.trapFocus ? -1 : undefined, ref: (el) => (this.overlayEl = el), onPointerDown: this.handlePointerDown, onPointerUp: this.handlePointerUp, onClick: this.handleClick, onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: '2f29233d44de8a0cc3100cfa08233cdc10ebf352' })));
+        return (h("div", { key: '9d6cec0764074a33489f79fb4a554e7aa7374785', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", popover: "manual", tabindex: this.trapFocus ? -1 : undefined, ref: (el) => (this.overlayEl = el), onPointerDown: this.handlePointerDown, onPointerUp: this.handlePointerUp, onClick: this.handleClick, onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: '2f8ad7b23e72ce2f5c74b3cb67ba9ab80e88cf26' })));
     }
     static get is() { return "co-overlay"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-overlay/escapeLayers.js

@@ -0,0 +1,20 @@
+const layers = [];
+const isModeless = (layer) => layer.modeless === true;
+export function pushEscapeLayer(layer) {
+    removeEscapeLayer(layer);
+    layers.push(layer);
+}
+export function removeEscapeLayer(layer) {
+    const i = layers.indexOf(layer);
+    if (i >= 0)
+        layers.splice(i, 1);
+}
+export function isTopEscapeLayer(layer) {
+    const blocking = layers.filter((l) => !isModeless(l));
+    const pool = blocking.length ? blocking : layers;
+    return pool.length > 0 && pool[pool.length - 1] === layer;
+}
+/** Solo para tests. */
+export function resetEscapeLayers() {
+    layers.length = 0;
+}

package/dist/collection/components/co-page-header/co-page-header.js

@@ -9,7 +9,7 @@ import { h } from "@stencil/core";
  */
 export class CoPageHeader {
     render() {
-        return (h("div", { key: '18d15d7b241f92bbd121fd6547832a30f4404928', class: "co-page-header", part: "page-header" }, h("div", { key: 'cbf4427991e3b43775a1d47c95f953ef79d71c77', class: "co-page-header__left" }, this.icon && (h("span", { key: '647701102f261fc214a0a4347894ba275da1ed7d', class: "co-page-header__icon" }, h("co-icon", { key: 'd377f2f5cbfa190cb483fe4a6ff2a483f9053f7b', name: this.icon, size: 24 }))), h("span", { key: 'ccf59184d2154c89fc90ccddfffc8dfc8c07b72b', class: "co-page-header__title" }, h("slot", { key: '34dd64e79e72cb154c63b16f72c2ec58193d9988' }, this.heading))), h("div", { key: 'e2f1d119629a3b9479896cf2338625ad775b8556', class: "co-page-header__actions" }, h("slot", { key: '62ee162b3388968ee1930a2c3ab20e45b34a2d65', name: "actions" }))));
+        return (h("div", { key: '877c32ab794ec6e86ed26e7e99d7c45463a1922f', class: "co-page-header", part: "page-header" }, h("div", { key: '4e771155a4d3ae9914619ab34fbc31e5ce9246a8', class: "co-page-header__left" }, this.icon && (h("span", { key: '458833e13b51f2e076af6780f75a06c8de6e2514', class: "co-page-header__icon" }, h("co-icon", { key: 'a68d9d9ce0181f8d58e33de465d844506ea45af9', name: this.icon, size: 24 }))), h("span", { key: '9c1294e395a20433e260224ab7a33931b9d85319', class: "co-page-header__title" }, h("slot", { key: '4b7af2160fd067a7ca4ce973004a4c89249552dd' }, this.heading))), h("div", { key: '715cc529b7b80d702c2470571f9feb56ea01fa35', class: "co-page-header__actions" }, h("slot", { key: '6803b878b2e2bc939840847a394300c80be661c7', name: "actions" }))));
     }
     static get is() { return "co-page-header"; }
     static get encapsulation() { return "shadow"; }