@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

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

@@ -0,0 +1,99 @@
+/* co-kbd — grupo de teclas de un atajo (ícono Phosphor en mac, texto en win) */
+
+:host {
+  display: inline-flex;
+}
+
+.co-kbd {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--co-spacing-xxs, 2px);
+}
+
+.co-kbd__sep {
+  font-family: var(--co-font-family-primary, 'Geist', sans-serif);
+  font-size: var(--co-font-size-10, 10px);
+  line-height: 1;
+  opacity: 0.6;
+}
+
+.co-kbd__key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  font-family: var(--co-font-family-primary, 'Geist', sans-serif);
+  font-style: normal;
+  font-weight: var(--co-font-weight-medium, 500);
+  font-size: var(--co-font-size-10, 10px);
+  line-height: 1;
+  text-transform: uppercase;
+  border-radius: var(--co-border-radius-xxs, 4px);
+}
+
+/* ── Sizes (Figma: sm 30×18 con ícono 12px · xs 16×16) ──────────── */
+.co-kbd--sm .co-kbd__key {
+  min-width: 30px;
+  height: 18px;
+  padding: 0 3px;
+}
+
+.co-kbd--xs .co-kbd__key {
+  width: 16px;
+  height: 16px;
+  padding: 0;
+}
+
+/* ── Chord: toda la combinación en UN chip ─────────────────────── */
+/* Cada token en una celda de 12 de alto, sin separadores. La celda con
+   ÍCONO (`--icon`: modificador en mac) es 12×12 fija; la de TEXTO (`--text`:
+   modificadores en win — "Ctrl", "Shift" —, teclas sueltas — "0", "Esc") crece
+   con su contenido desde un mínimo de 12: con 12px fijos y sin overflow el
+   texto sobresalía a ambos lados y pisaba al token siguiente (fix round 1).
+   En `sm` el chip hereda 30×18 de `.co-kbd--sm .co-kbd__key` (min-width: se
+   ensancha con las celdas); en `xs` la tecla suelta tiene `width: 16px`
+   FIJO, que aquí se suelta (auto + min-width 16, mismo alto 16) — va DESPUÉS
+   de esa regla porque pesa lo mismo (0,2,0) y gana por orden. */
+.co-kbd__cell {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.co-kbd__cell--icon {
+  width: 12px;
+}
+
+.co-kbd__cell--text {
+  width: auto;
+  padding: 0 1px;
+}
+
+.co-kbd--xs .co-kbd__key--chord {
+  width: auto;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 2px;
+}
+
+/* ── Surfaces ───────────────────────────────────────────────────── */
+.co-kbd--light .co-kbd__key {
+  background: var(--co-semantic-surface-control, #f6f6f6);
+  color: var(--co-semantic-text-default, #1f1c1b);
+}
+.co-kbd--light .co-kbd__sep {
+  color: var(--co-semantic-text-default, #1f1c1b);
+}
+
+.co-kbd--dark .co-kbd__key {
+  background: var(--co-color-opacity-blanco-16, rgba(255, 255, 255, 0.16));
+  color: var(--co-color-base-blanco, #fff);
+}
+.co-kbd--dark .co-kbd__sep {
+  color: var(--co-color-base-blanco, #fff);
+}

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

@@ -0,0 +1,298 @@
+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 />
+ *
+ * Wrapper Vue: `CoKbd` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part group - Contenedor de la combinación (`role="group"`).
+ * @part key - Cada tecla (en `chord`, el único chip).
+ * @part sep - Separador «+» entre teclas (sin `chord`).
+ * @part cell - Cada token dentro del chip de `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: 'd2b28cba40938051dd4488ceb0e06391e9e4b31d', 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

@@ -6,6 +6,9 @@ import { h } from "@stencil/core";
  * primary/secondary actions, or the default slot for fully custom content.
  *
  * @slot - Custom footer content (rendered after the prop buttons).
+ *
+ * Wrapper Vue: `CoListFooter` de `@prolibu-suite/cobalt-vue`.
+ * @part footer - La fila del footer.
  */
 export class CoListFooter {
     constructor() {
@@ -17,7 +20,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: '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' })));
     }
     static get is() { return "co-list-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,6 +4,9 @@ import { h } from "@stencil/core";
  * @slot prefix  - Leading content (icon, checkbox, avatar)
  * @slot         - Main content (default slot)
  * @slot suffix  - Trailing content (icon, badge, action)
+ *
+ * Wrapper Vue: `CoListItem` de `@prolibu-suite/cobalt-vue`.
+ * @part item - La fila.
  */
 export class CoListItem {
     constructor() {
@@ -70,21 +73,21 @@ export class CoListItem {
         requestAnimationFrame(this.measureTruncation);
     }
     render() {
-        return (h("div", { key: '23cfee682f0e7d3a22ca793b9e6b29eb89cf8ca1', class: {
+        return (h("div", { key: 'b00bba3c362b7fded6dbb54a3a77204fd6f12f06', 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: '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) => {
                 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: '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.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: '55c7bc86e9aea170a37862642531d01203071e0a' })), h("span", { key: 'bef781667653254040abbfbdc518ce6086c17248', class: "co-list-item__suffix" }, h("slot", { key: '349cde2b81c10eb9e9c425b96808ad6bcb86d527', name: "suffix" }))));
     }
     static get is() { return "co-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,6 +3,11 @@ import { h } from "@stencil/core";
  * Three-ball Google-style loader. Inline by default; pass `overlay` to fill
  * the nearest positioned ancestor with a backdrop (drop-in replacement for
  * q-inner-loading from V1's SkLoader).
+ * Wrapper Vue: `CoLoader` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part root - Contenedor del loader (o del overlay).
+ * @part balls - Las tres esferas animadas.
+ * @part text - Texto opcional bajo las esferas.
  */
 export class CoLoader {
     constructor() {

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

@@ -5,6 +5,13 @@ import { h } from "@stencil/core";
  * slot fallback (for a type-icon box) when there is no `src`.
  *
  * @slot - Fallback content shown when `src` is not set (e.g. a type-icon box).
+ *
+ * Wrapper Vue: `CoMediaThumb` de `@prolibu-suite/cobalt-vue`.
+ *
+ * @part thumb - La caja de la vista previa.
+ * @part img - La imagen de portada.
+ * @part scrim - Velo oscuro sobre un video.
+ * @part play - Botón de play (`video`).
  */
 export class CoMediaThumb {
     constructor() {
@@ -23,13 +30,13 @@ export class CoMediaThumb {
     }
     render() {
         var _a;
-        return (h("div", { key: 'acd021eb5ebcc987eeb1528b874fdbdfa48f8b52', class: {
+        return (h("div", { key: '715a75c2d9bf586503838952ce1db8ba0a3b74ea', 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: '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)" })))))));
     }
     static get is() { return "co-media-thumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,3 +1,13 @@
+/**
+ * @prop --co-menu-padding: Padding del panel (default 4px).
+ * @prop --co-menu-gap: Separación entre filas (default 2px).
+ * @prop --co-menu-min-width: Ancho mínimo del panel (default 200px; en `surface="dark"`, auto).
+ * @prop --co-menu-border-color: Color del anillo interno del panel claro.
+ * @prop --co-menu-radius: Radio del panel (default 12px en claro, 8px en `surface="dark"`).
+ * @prop --co-menu-max-height: Alto máximo del panel (default sin tope); junto con `--co-menu-overflow: auto` hace que un menú largo scrollee.
+ * @prop --co-menu-overflow: Recorte del panel (default `visible`).
+ * @prop --co-menu-shadow: Sombra del panel con `surface="dark"` (default ninguna).
+ */
 :host {
   display: contents;
 }
@@ -21,3 +31,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`, 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));
+}