@prolibu-suite/cobalt-core 0.10.4 → 0.11.0

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

@@ -0,0 +1,291 @@
+import { h } from "@stencil/core";
+import { getKbdStrings } from "../../utils/kbdI18n";
+/** Ícono Phosphor por modificador en mac. */
+const MAC_ICON_BY_MODIFIER = {
+    mod: 'command',
+    cmd: 'command',
+    shift: 'arrow-fat-up',
+    alt: 'option',
+    ctrl: 'control',
+};
+/** Ícono del modo `chord` (diseño: ícono 12 en celda de 12, en ambas tallas). */
+const CHORD_ICON_SIZE = 12;
+function isModifierToken(token) {
+    return token === 'mod' || token === 'cmd' || token === 'shift' || token === 'alt' || token === 'ctrl';
+}
+/** Núcleo puro: separa "shift+1" en ["shift", "1"]. Sin tocar el DOM/store. */
+function parseKeyTokens(keys) {
+    return keys
+        .split('+')
+        .map((token) => token.trim().toLowerCase())
+        .filter(Boolean);
+}
+/**
+ * Etiqueta textual de un modificador — se usa para el aria-label siempre, y
+ * como contenido visible en `win` (en `mac` el visible es el ícono, ver
+ * `MAC_ICON_BY_MODIFIER`). Difieren por plataforma:
+ * - `mod` = el modificador "de plataforma": "Cmd" en mac, `kbdI18n` "Ctrl"
+ *   en win (el editor trata Ctrl como meta en Windows/Linux).
+ * - `cmd` = la tecla Cmd literal: "Cmd" en mac, `kbdI18n` "Win" en win (no
+ *   hay tecla Cmd en Windows; la física análoga es Win).
+ */
+function modifierLabel(token, platform, strings) {
+    if (platform === 'mac') {
+        switch (token) {
+            case 'mod':
+            case 'cmd':
+                return 'Cmd';
+            case 'shift':
+                return 'Shift';
+            case 'alt':
+                return 'Option';
+            case 'ctrl':
+                return 'Control';
+        }
+    }
+    switch (token) {
+        case 'mod':
+            return strings.ctrl;
+        case 'cmd':
+            return strings.win;
+        case 'shift':
+            return strings.shift;
+        case 'alt':
+            return strings.alt;
+        case 'ctrl':
+            return strings.ctrl;
+    }
+}
+/** Detecta Mac por `navigator.platform`/`userAgent` — usado cuando `platform="auto"`.
+ *  jsdom no completa `navigator.platform` en los tests: sin señal de Mac se
+ *  cae a `win` (fallback explícito, no un bug). */
+function detectsMacPlatform() {
+    if (typeof navigator === 'undefined')
+        return false;
+    const platform = navigator.platform || '';
+    const userAgent = navigator.userAgent || '';
+    return /Mac/i.test(platform) || /Mac/i.test(userAgent);
+}
+/**
+ * co-kbd — grupo de teclas de un atajo (p.ej. "shift+1", "mod+0", "v").
+ * Modificadores como ícono Phosphor en mac, como etiqueta i18n en win;
+ * teclas sueltas como texto en mayúscula. Con `chord`, toda la combinación
+ * va en UN solo chip (sin separadores).
+ *
+ * Usage:
+ *   <co-kbd keys="mod+0" />
+ *   <co-kbd keys="v" surface="dark" size="xs" />
+ *   <co-kbd keys="mod+0" chord />
+ */
+export class CoKbd {
+    constructor() {
+        /** Combinación de teclas separadas por "+", p.ej. "shift+1", "mod+0", "v". */
+        this.keys = '';
+        /**
+         * Plataforma para resolver el render de los modificadores:
+         * `mac` → íconos Phosphor (⌘⇧⌥⌃); `win` → etiquetas de texto (`kbdI18n`).
+         * `auto` detecta por `navigator.platform`/`userAgent`; sin señal de Mac
+         * (p.ej. jsdom en tests) cae a `win`.
+         */
+        this.platform = 'auto';
+        /** Superficie donde se apoya: `light` → fondo gray-100 (texto oscuro);
+         *  `dark` → blanco-16 (texto blanco) — pensado para pills oscuras, p.ej.
+         *  `co-tooltip` variant="label". */
+        this.surface = 'light';
+        /** Tamaño de cada tecla: `sm` 30×18 (con ícono 12px) · `xs` 16×16 (solo texto/1 char). */
+        this.size = 'sm';
+        /**
+         * Modo acorde: toda la combinación en UN solo chip (`part="key"`; 30×18 en
+         * `sm`, 16 de alto en `xs`), sin separadores "+" — cada token va en una
+         * celda (`part="cell"`) de 12 de alto: ícono Phosphor de 12px en una celda
+         * de 12×12 fija (modificadores en mac); texto en una celda que crece con su
+         * contenido, mínimo 12 (modificadores en win, teclas sueltas). El chip
+         * ensancha con las celdas. `role="group"` y `aria-label` no cambian. Sin
+         * `chord`, el modo de siempre: un chip por tecla + separadores.
+         */
+        this.chord = false;
+    }
+    resolvePlatform() {
+        if (this.platform === 'mac')
+            return 'mac';
+        if (this.platform === 'win')
+            return 'win';
+        return detectsMacPlatform() ? 'mac' : 'win';
+    }
+    render() {
+        const tokens = parseKeyTokens(this.keys);
+        const platform = this.resolvePlatform();
+        const strings = getKbdStrings(this.locale);
+        const iconSize = this.size === 'sm' ? 12 : 10;
+        const ariaLabel = tokens
+            .map((token) => (isModifierToken(token) ? modifierLabel(token, platform, strings) : token.toUpperCase()))
+            .join(' + ');
+        /** Un token se ve como ícono solo si es modificador Y la plataforma es
+         *  mac; todo lo demás (modificadores en win, teclas sueltas) es texto. */
+        const rendersAsIcon = (token) => isModifierToken(token) && platform === 'mac';
+        /** Contenido visible de un token: ícono (mac) o texto (win) para los
+         *  modificadores; la tecla suelta siempre en mayúscula. */
+        const renderToken = (token, size) => rendersAsIcon(token) ? (h("co-icon", { name: MAC_ICON_BY_MODIFIER[token], size: size })) : isModifierToken(token) ? (modifierLabel(token, platform, strings)) : (token.toUpperCase());
+        const keyNodes = [];
+        if (this.chord) {
+            // Un solo chip, sin "+". La celda con ÍCONO es 12×12 fija; la de TEXTO
+            // ("Ctrl"/"Shift" en win, "Esc"/"F1" en cualquier plataforma) crece con
+            // su contenido — con 12px fijos desbordaba y pisaba al token siguiente
+            // (fix round 1).
+            keyNodes.push(h("kbd", { class: "co-kbd__key co-kbd__key--chord", part: "key", key: "chord" }, tokens.map((token, index) => (h("span", { class: {
+                    'co-kbd__cell': true,
+                    'co-kbd__cell--icon': rendersAsIcon(token),
+                    'co-kbd__cell--text': !rendersAsIcon(token),
+                }, part: "cell", key: `cell-${index}` }, renderToken(token, CHORD_ICON_SIZE))))));
+        }
+        else {
+            tokens.forEach((token, index) => {
+                if (index > 0) {
+                    keyNodes.push(h("span", { class: "co-kbd__sep", part: "sep", key: `sep-${index}` }, "+"));
+                }
+                keyNodes.push(h("kbd", { class: "co-kbd__key", part: "key", key: `key-${index}` }, renderToken(token, iconSize)));
+            });
+        }
+        return (h("span", { key: '7a99812a76e02cf357694da3bbea990118c8fff5', class: {
+                'co-kbd': true,
+                [`co-kbd--${this.size}`]: true,
+                [`co-kbd--${this.surface}`]: true,
+                'co-kbd--chord': this.chord,
+            }, role: "group", "aria-label": ariaLabel, part: "group" }, keyNodes));
+    }
+    static get is() { return "co-kbd"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-kbd.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-kbd.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "keys": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Combinaci\u00F3n de teclas separadas por \"+\", p.ej. \"shift+1\", \"mod+0\", \"v\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "keys",
+                "defaultValue": "''"
+            },
+            "platform": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'auto' | 'mac' | 'win'",
+                    "resolved": "\"auto\" | \"mac\" | \"win\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Plataforma para resolver el render de los modificadores:\n`mac` \u2192 \u00EDconos Phosphor (\u2318\u21E7\u2325\u2303); `win` \u2192 etiquetas de texto (`kbdI18n`).\n`auto` detecta por `navigator.platform`/`userAgent`; sin se\u00F1al de Mac\n(p.ej. jsdom en tests) cae a `win`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "platform",
+                "defaultValue": "'auto'"
+            },
+            "surface": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Superficie donde se apoya: `light` \u2192 fondo gray-100 (texto oscuro);\n`dark` \u2192 blanco-16 (texto blanco) \u2014 pensado para pills oscuras, p.ej.\n`co-tooltip` variant=\"label\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "surface",
+                "defaultValue": "'light'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'xs'",
+                    "resolved": "\"sm\" | \"xs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tama\u00F1o de cada tecla: `sm` 30\u00D718 (con \u00EDcono 12px) \u00B7 `xs` 16\u00D716 (solo texto/1 char)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'sm'"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Locale BCP-47 (p.ej. \"es-CO\") para las etiquetas de texto en `win`. Sin\nlocale expl\u00EDcito, `kbdI18n` resuelve a 'en'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale"
+            },
+            "chord": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Modo acorde: toda la combinaci\u00F3n en UN solo chip (`part=\"key\"`; 30\u00D718 en\n`sm`, 16 de alto en `xs`), sin separadores \"+\" \u2014 cada token va en una\ncelda (`part=\"cell\"`) de 12 de alto: \u00EDcono Phosphor de 12px en una celda\nde 12\u00D712 fija (modificadores en mac); texto en una celda que crece con su\ncontenido, m\u00EDnimo 12 (modificadores en win, teclas sueltas). El chip\nensancha con las celdas. `role=\"group\"` y `aria-label` no cambian. Sin\n`chord`, el modo de siempre: un chip por tecla + separadores."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "chord",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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

@@ -496,7 +496,7 @@ export class CoLightbox {
         const counter = s.counter
             .replace('{i}', String(this.index + 1))
             .replace('{n}', String(imgs.length));
-        return (h("div", { key: '1a3c29e98fd491c92b82ba9d9296588609cdd006', 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: 'cc9e9db83ef082deab744f259c4da63a58eb0c3b', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: 'ab3fa42e21008407f2cab377566a1793a96a8a50', class: "co-lightbox__caption", title: img.alt }, img.alt), !video && (h("div", { key: 'af8761111e7c5e0e7a838d8e69971cc2863ee9d4', class: "co-lightbox__zoom" }, h("button", { key: 'e73628b4fd25fa7c3ed9ca947fccd196e6433f84', 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: '371f4edc5141561b348ce36a8791fb81500248fa', name: "minus", size: 16 })), h("button", { key: 'e07adc772687ef65d97db5669ed235749e43c034', 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: '29ed305a4f464e38c4b4ef331dbbfc35aa6fdc95', 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: '6b56559a4dad36bee62545deb426734450f64f58', name: "plus", size: 16 })))), h("button", { key: '53099c4e3dec82cfc9087e89916154ef4a8845f6', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: 'de160ed313ba0559cd1523f9f73fad7e3b167848', name: "arrow-square-out", size: 16 })), h("button", { key: 'd1658ff7b8d0fc22f1a489c0138a16077304a165', 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: 'fcbcbbf6001e67199b6ec7b99bde5f9f24537ca0', name: "x", size: 16 })))), img && (h("div", { key: '39cef6c2bd1bf3fe9f641778b48b618a62f1b5f8', 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: '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",
             /* 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 +506,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: 'a161402e30021374f608755ea0a5dc6ccee0e99a', 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: '014622508d9f057d3063dbafefb79d9db7d182d6', 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: '649171d5330299b3ccb368bb0b434c643157c3f5', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: '5cc5d07467e1ecf9c27094947ce421c28c35472d', 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: '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) => {
                 e.stopPropagation();
                 this.goTo(1);
-            } }, h("co-icon", { key: 'd9d32607a6b4350009db5c1719987aa8afcbb007', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: 'a23f10a2c9d82c4295285feeedfbe0d9016f4db0', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
+            } }, 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))));
     }
     static get is() { return "co-lightbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,7 @@ export class CoListFooter {
         this.handleSecondary = () => this.coSecondary.emit();
     }
     render() {
-        return (h("div", { key: 'fbf4ec72aa2f6814b558d51c44592e784355751e', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (h("button", { key: '78abef0f79117263c7d30e5ce37a876d193ba5e4', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && h("co-icon", { key: 'a765ab5be51d7eb5791d3161cf5c7d3688fa0fd7', name: this.secondaryIcon, size: 16 }), h("span", { key: '0f5d57201bcd6ce40439c26916e01f1e37fcd87e' }, this.secondaryLabel))), this.primaryLabel && (h("button", { key: '27aa3b20666c9fe2a6fb7f28a9ca6e2542dd8fd7', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && h("co-icon", { key: 'bafe2ebb9cfb2cc26c682ae9b419b09a512652f8', name: this.primaryIcon, size: 16 }), h("span", { key: 'c3c9baead987beea02ead3a65d3372c5532a67b8' }, this.primaryLabel))), h("slot", { key: '7a1ce48c91cc95c320c4d680053f42555e601187' })));
+        return (h("div", { key: 'f0c91f1eb20fbbd57da3a9de3ee9596b1c726ccf', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (h("button", { key: 'c43b6137c82ab5ecb8493dcabb93a0b6e1fb8527', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && h("co-icon", { key: '4723de7f0236643d8ecee7041144c058478237b6', name: this.secondaryIcon, size: 16 }), h("span", { key: '798e8a622a2b0784849e8040501ae92f87a9fab9' }, this.secondaryLabel))), this.primaryLabel && (h("button", { key: '0ce5cdab965ede9ad2489354f31d0f0d55e3fba5', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && h("co-icon", { key: '50e5fb43c0966cb939ba3daced28916e1fe766dd', name: this.primaryIcon, size: 16 }), h("span", { key: 'd2bf250cb31ae5e7ff3595ecbb4234a493744e67' }, this.primaryLabel))), h("slot", { key: 'dd002081999ed611aef5a411e7011b804e7036ff' })));
     }
     static get is() { return "co-list-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -70,21 +70,21 @@ export class CoListItem {
         requestAnimationFrame(this.measureTruncation);
     }
     render() {
-        return (h("div", { key: '23cfee682f0e7d3a22ca793b9e6b29eb89cf8ca1', class: {
+        return (h("div", { key: '1b41a6b63153b67dc59394f292bf100ff3e32a89', 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: 'a0f3c86656e408225fdbfeb610a088f8adebfa55', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: '18be77a790afd7b83f8ad07c9af5925abed4f23b', name: this.icon, size: 18 }), h("slot", { key: '2e198e4c541e1c86c6c266cf93408e195c851428', name: "prefix" })), h("div", { key: 'cbb5768d0a7bb287dbab1e013ae5e03ff2194a1f', class: "co-list-item__content" }, this.label && (h("co-tooltip", { key: '79730131bb1a74660d6dba076b622358b7c1ee15', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, h("span", { key: '778b003dc31bc196a770a7dc6c4eebe649faf8c3', 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: '7cad6103ab3087a0c9b6156bfeb2049f796acca4', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: '7b9934bad5ec591f82b733451317a6d7e1622ff1', name: this.icon, size: 18 }), h("slot", { key: '5e5e97b0392f181f442bf6bd3915f001bd95e54c', name: "prefix" })), h("div", { key: '5a64e8895ef52a3aed341307ce36b6a83edfc602', class: "co-list-item__content" }, this.label && (h("co-tooltip", { key: 'dde0ef8d6141a123200e92f431a8478d2abaec0d', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, h("span", { key: '566e69fd926005ec57b3b2314ccc2323c77de916', 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: '56c81304ceec7039a659c1e2443a17df48bf88eb', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, h("span", { key: '5f1f870da25778bfbe801cfb769319cff71fac75', class: "co-list-item__description", ref: (el) => {
+            } }, this.label))), this.description && (h("co-tooltip", { key: '435997357a7370731d90a3e6c636aab5463cd364', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, h("span", { key: '58ca1721f60f68c3725759f2f14f15c2c4639991', class: "co-list-item__description", ref: (el) => {
                 this.descEl = el;
                 if (el && this.ro)
                     this.ro.observe(el);
-            } }, this.description))), h("slot", { key: '136ec5db83f4d2a77126d734ecac511c92b36d91' })), h("span", { key: '759b18ea3bedcb7b7b8023cb6ca1444fbacb5748', class: "co-list-item__suffix" }, h("slot", { key: 'c6519a183c1b7cdb84e4d822a5e2fa523a99ab52', name: "suffix" }))));
+            } }, this.description))), h("slot", { key: '38cff2270b737756895da1b692f42557e9396b54' })), h("span", { key: 'df206f44faabbc30306509ad7651558c976ecb10', class: "co-list-item__suffix" }, h("slot", { key: '48bfb58fc0e74ae5647425472279b92e6b1ce30d', 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

@@ -23,13 +23,13 @@ export class CoMediaThumb {
     }
     render() {
         var _a;
-        return (h("div", { key: 'acd021eb5ebcc987eeb1528b874fdbdfa48f8b52', class: {
+        return (h("div", { key: 'ce38519a6f2e10a54e70cec300f7229c28d12207', 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: 'a6ec84bed9d75673b7b917b2cb513f01545d5bf2', class: "co-media-thumb__scrim", part: "scrim" }, h("div", { key: '9ce636bf0a3d9e53eb271803fc0bbd60f4314989', class: "co-media-thumb__play", part: "play" }, h("svg", { key: '07016dfed6ee4ff793650d830f152d2555731550', class: "co-media-thumb__play-icon", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", "aria-hidden": "true" }, h("path", { key: '825b3921b94248f28b30ce91b63525fd2fda5b35', 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: '6fd5a47d1f3443cf2c7f47e24a2e70a4a6930f62', class: "co-media-thumb__scrim", part: "scrim" }, h("div", { key: 'fde9e8f4d4bf3bfa11221887a3b0edc458684b64', class: "co-media-thumb__play", part: "play" }, h("svg", { key: '99f2e4947a475348c2302a6949e8607b0c50177e', class: "co-media-thumb__play-icon", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", "aria-hidden": "true" }, h("path", { key: '8bb6cd16e6a91aab6cf331fda06fc8cc1a8e8ca9', 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

@@ -21,3 +21,63 @@
   font-size: var(--co-font-size-14, 14px);
   color: var(--co-semantic-text-default);
 }
+
+/* Task C9 — variables nuevas (aditivo, mismo default de siempre: gap 2px,
+   anillo negro-8, min-width 200px). Repetimos el selector en vez de tocar
+   la regla de arriba: misma especificidad (.co-menu), pero al ir DESPUÉS en
+   el archivo la cascada le da la última palabra solo sobre estas 3
+   propiedades puntuales — el resto de `.co-menu` queda intacto. */
+.co-menu {
+  gap: var(--co-menu-gap, 2px);
+  min-width: var(--co-menu-min-width, 200px);
+  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-menu-border-color, var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08)));
+}
+
+/* Task C1 — tres hooks más, mismo patrón aditivo que los de arriba y mismos
+   defaults de siempre (radio sm, sin tope de alto, sin recorte). El radio se
+   re-declara acá para poder pisarlo desde el consumidor SIN tocar la regla
+   original. `overflow` va detrás de SU PROPIA variable con fallback `visible`:
+   un `overflow: auto` fijo cambiaba el recorte de TODOS los `co-menu` del
+   sistema con o sin `--co-menu-max-height` (fix round 1), y el contrato de
+   estos hooks es que sin la variable nada cambie. Quien quiera un panel que
+   scrollee —el menú contextual del canvas, que es más largo que la pantalla—
+   pide las dos: `--co-menu-max-height` y `--co-menu-overflow: auto`. */
+.co-menu {
+  border-radius: var(--co-menu-radius, var(--co-border-radius-sm, 12px));
+  max-height: var(--co-menu-max-height, none);
+  overflow: var(--co-menu-overflow, visible);
+}
+
+/* surface="dark" (regla transversal): panel negro para menús de herramienta
+   (formas, plantillas de página, Lineal/Radial). Sin anillo ni sombra —
+   `:host([surface="dark"])` tiene más especificidad que `.co-menu` sola,
+   así que pisa el box-shadow de arriba entero sin depender del orden. */
+:host([surface='dark']) .co-menu {
+  background: var(--co-semantic-surface-primary);
+  color: var(--co-semantic-text-inverse);
+  /* Task C1: los mismos dos hooks que el panel claro, con el default de
+     siempre del panel oscuro (sin sombra, radio xs). El menú contextual del
+     canvas los usa para pedir el radio 12 y la sombra lg de su diseño. */
+  box-shadow: var(--co-menu-shadow, none);
+  border-radius: var(--co-menu-radius, var(--co-border-radius-xs, 8px));
+  min-width: auto;
+}
+
+/* Los `co-menu-item` (y `co-menu-divider`) hijos heredan el tema oscuro por
+   CONTEXTO: publicamos variables CSS en el elemento slotted (no en su
+   interior) — son custom properties, y ESO SÍ atraviesa el shadow boundary
+   del hijo (llegan a su propio `:host` y de ahí a su árbol interno). Cada
+   componente las lee con fallback al valor claro de siempre (ver
+   co-menu-item.css / co-menu-divider.css) — sin `surface="dark"` nada
+   cambia. */
+:host([surface='dark']) ::slotted(co-menu-item) {
+  --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;
+}
+
+:host([surface='dark']) ::slotted(co-menu-divider) {
+  --co-menu-divider-color: var(--co-color-opacity-blanco-16, rgba(255, 255, 255, 0.16));
+}