@prolibu-suite/cobalt-core 0.11.6 → 0.11.7

package/dist/collection/components/co-document-editor/co-document-editor.js

@@ -8,6 +8,7 @@ import { scopePageStyles } from "./page-styles";
 import { anchorCorrection, clampScale, fitScale, paperPoint, pinchScale, ZOOM_GUTTER_PX } from "./zoom";
 import { HEADER_TOOL_BOX_PX, HEADER_TOOL_ICON_PX } from "./header-tools";
 import { defaultImageWidth, IMAGE_MODE_ICON_PX, IMAGE_MODE_ICONS, imageBarPosition, layoutLeft } from "./image-bar";
+import { SIGNATURE_BAR_SIZE, signerStepRange } from "./signature-bar";
 let instanceSeq = 0;
 /**
  * Editor de documentos paginado: hoja fija, encabezado en banda, campos y
@@ -58,6 +59,8 @@ export class CoDocumentEditor {
         this.draftShowPageNumber = false;
         /** Barra de diseño de la imagen seleccionada en el cuerpo (null = no hay). Posición en px del papel. */
         this.imageBar = null;
+        /** Barra de la firma seleccionada: su firmante N, el rango del ‹ › y la posición en px del papel. */
+        this.signatureBar = null;
         /** Encabezado vigente (confirmado). La Task 16 lo cambia al confirmar la banda. */
         this.currentHeaderHtml = '';
         this.currentShowPageNumber = false;
@@ -99,6 +102,42 @@ export class CoDocumentEditor {
             if (!cur || cur.mode !== mode || cur.top !== pos.top || cur.left !== pos.left)
                 this.imageBar = { mode, top: pos.top, left: pos.left };
         };
+        /**
+         * Barra bajo la firma seleccionada (corre en cada transacción del cuerpo, como la de
+         * imagen). El recorrido del documento para el rango del ‹ › solo ocurre con una firma
+         * seleccionada como nodo: al tipear la selección es de texto y sale en el primer `if`.
+         */
+        this.updateSignatureBar = () => {
+            const ed = this.editor;
+            const sel = ed === null || ed === void 0 ? void 0 : ed.state.selection;
+            const node = sel === null || sel === void 0 ? void 0 : sel.node;
+            if (!ed || this.readonly || !node || node.type.name !== 'signatureSlot') {
+                if (this.signatureBar)
+                    this.signatureBar = null;
+                return;
+            }
+            const dom = ed.view.nodeDOM(sel.from);
+            const sheet = this.el.querySelector('.co-doc-editor__sheet');
+            if (!dom || !sheet) {
+                if (this.signatureBar)
+                    this.signatureBar = null;
+                return;
+            }
+            const others = [];
+            ed.state.doc.descendants((n, pos) => {
+                if (n.type.name === 'signatureSlot' && pos !== sel.from)
+                    others.push(n.attrs.slot);
+            });
+            const { min, max } = signerStepRange(others);
+            // px de layout (no los altera el zoom: la barra vive dentro del escenario escalado).
+            const box = RichText.layoutBox(dom, sheet);
+            const pos = imageBarPosition({ top: box.top, height: box.height, left: layoutLeft(dom, sheet), width: dom.offsetWidth }, { width: sheet.offsetWidth, height: sheet.offsetHeight }, SIGNATURE_BAR_SIZE);
+            const slot = node.attrs.slot;
+            const cur = this.signatureBar;
+            if (!cur || cur.slot !== slot || cur.min !== min || cur.max !== max || cur.top !== pos.top || cur.left !== pos.left) {
+                this.signatureBar = { slot, min, max, top: pos.top, left: pos.left };
+            }
+        };
         /** Una imagen insertada sin ancho nace acotada a la columna (V1 la abriría a 800 px). */
         this.onBodyImageLoad = (e) => {
             const img = e.target;
@@ -378,6 +417,7 @@ export class CoDocumentEditor {
         this.headerEditing = false;
         this.draftShowPageNumber = false;
         this.imageBar = null;
+        this.signatureBar = null;
     }
     componentDidLoad() {
         var _a, _b, _c;
@@ -439,12 +479,14 @@ export class CoDocumentEditor {
             this.editor.off('transaction', this.onTransaction);
             this.editor.off('blur', this.onEditorBlur);
             this.editor.off('transaction', this.updateImageBar);
+            this.editor.off('transaction', this.updateSignatureBar);
             this.editor.view.dom.removeEventListener('load', this.onBodyImageLoad, true);
             this.editor.destroy();
         }
         this.editor = undefined;
         this.pendingImageSrcs.clear();
         this.imageBar = null;
+        this.signatureBar = null;
     }
     onValueChange(next) {
         if (next === this.lastAppliedValue)
@@ -463,6 +505,7 @@ export class CoDocumentEditor {
         if (this.readonly && this.headerEditing)
             this.cancelHeader();
         this.updateImageBar();
+        this.updateSignatureBar();
     }
     onPageGeometryChange() {
         this.refreshPagination();
@@ -576,6 +619,7 @@ export class CoDocumentEditor {
         dom.setAttribute('aria-multiline', 'true');
         editor.on('transaction', this.onTransaction);
         editor.on('transaction', this.updateImageBar);
+        editor.on('transaction', this.updateSignatureBar);
         editor.on('blur', this.onEditorBlur);
         // `load` no burbujea: se escucha en captura.
         dom.addEventListener('load', this.onBodyImageLoad, true);
@@ -594,6 +638,27 @@ export class CoDocumentEditor {
         (_a = this.editor) === null || _a === void 0 ? void 0 : _a.commands.setImageLayoutMode(mode);
         this.updateImageBar();
     }
+    /**
+     * Sin `.focus()`, como `setImageMode`: con el mouse la barra no le quita el foco al editor y
+     * con el teclado el foco se queda en el botón. Los comandos dejan la firma seleccionada
+     * (la copia, al duplicar), así la barra sigue.
+     */
+    duplicateSignature() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.commands.duplicateSignatureSlot();
+        this.updateSignatureBar();
+    }
+    stepSigner(delta) {
+        var _a;
+        const bar = this.signatureBar;
+        if (!bar)
+            return;
+        const next = bar.slot + delta;
+        if (next < bar.min || next > bar.max)
+            return;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.commands.setSignatureSlot(next);
+        this.updateSignatureBar();
+    }
     /** Imágenes que entran por una transacción del usuario sin `width` (barra, pegar, soltar, subida). */
     trackInsertedImages(transaction) {
         var _a, _b, _c;
@@ -819,10 +884,25 @@ export class CoDocumentEditor {
                 this.draftShowPageNumber = !!e.detail;
             } }), h("co-tooltip", { content: s.confirmHeader }, h("co-icon-button", { icon: "check", variant: "ghost", size: "xs", boxSize: HEADER_TOOL_BOX_PX, iconSize: HEADER_TOOL_ICON_PX, label: s.confirmHeader, onClick: () => this.commitHeader(true) }))))) : (h("div", { key: "header-static", class: "co-doc-editor__header-static" }, h("div", { class: "co-doc-editor__header-html", innerHTML: this.sanitizedHeaderHtml }), this.currentShowPageNumber && h("span", { class: "co-doc-editor__page-number" }, `${s.page} 1 / ${this.pageCount}`)))));
     }
-    /** Controles flotantes sobre la hoja: la barra de diseño de la imagen seleccionada. */
+    /** Controles flotantes sobre la hoja: la barra de la imagen o de la firma seleccionada. */
     renderOverlays() {
+        if (this.readonly || this.headerEditing)
+            return null;
+        return [this.renderImageBar(), this.renderSignatureBar()];
+    }
+    renderSignatureBar() {
+        const bar = this.signatureBar;
+        if (!bar)
+            return null;
+        const s = this.s;
+        // <button> nativos (no co-icon-button): mismo marco que la barra de imagen, y el
+        // aria-label tiene que llegar al botón real (ningún co-* reenvía los aria-* del host).
+        const step = (dir, label, icon, delta, disabled) => (h("co-tooltip", { key: dir, content: label }, h("button", { type: "button", class: "co-doc-editor__sig-step", "data-dir": dir, "aria-label": label, disabled: disabled, onClick: () => this.stepSigner(delta) }, h("co-icon", { name: icon, size: IMAGE_MODE_ICON_PX, "aria-hidden": "true" }))));
+        return (h("div", { key: "signature-bar", class: "co-doc-editor__sig-bar", role: "toolbar", "aria-label": s.signatureToolsLabel, style: { top: `${bar.top}px`, left: `${bar.left}px` }, onMouseDown: (e) => e.preventDefault() }, h("button", { key: "duplicate", type: "button", class: "co-doc-editor__sig-duplicate", onClick: () => this.duplicateSignature() }, h("co-icon", { name: "copy", size: IMAGE_MODE_ICON_PX, "aria-hidden": "true" }), h("span", { class: "co-doc-editor__sig-duplicate-text" }, s.signatureDuplicate)), h("span", { key: "sep", class: "co-doc-editor__sig-sep", "aria-hidden": "true" }), step('prev', s.signaturePrevSigner, 'caret-left', -1, bar.slot <= bar.min), h("span", { key: "label", class: "co-doc-editor__sig-label", "aria-live": "polite" }, `${s.signature} ${bar.slot}`), step('next', s.signatureNextSigner, 'caret-right', 1, bar.slot >= bar.max)));
+    }
+    renderImageBar() {
         const bar = this.imageBar;
-        if (!bar || this.readonly || this.headerEditing)
+        if (!bar)
             return null;
         return (h("div", { key: "image-bar", class: "co-doc-editor__image-bar", role: "toolbar", "aria-label": this.s.imageLayoutLabel, style: { top: `${bar.top}px`, left: `${bar.left}px` }, onMouseDown: (e) => e.preventDefault() }, RichText.IMAGE_LAYOUT_MODES.map((mode) => {
             const label = this.imageModeLabel(mode);
@@ -851,8 +931,8 @@ export class CoDocumentEditor {
             width: `${page.width * this.scale}px`,
             height: this.stageHeight ? `${this.stageHeight * this.scale}px` : 'auto',
         };
-        const zoomButton = (mode, label) => (h("button", { key: 'da1c68e89c973899e18720d3cf25b861d158f7c1', type: "button", class: { 'co-doc-editor__zoom-btn': true, 'co-doc-editor__zoom-btn--active': this.zoomMode === mode }, "aria-pressed": String(this.zoomMode === mode), onClick: () => this.setZoom(mode) }, label));
-        return (h(Host, { key: '254d9df102441f867dc46eb71039df92d99ad102' }, h("div", { key: '29723bbee5dd3eae004c6df4c330e8589388636d', class: { 'co-doc-editor': true, 'co-doc-editor--readonly': this.readonly, 'co-doc-editor--loading': !this.ready }, part: "wrapper" }, h("div", { key: '9257d370d8547f08402fbaaed2d4a6aa30d94e70', class: "co-doc-editor__bar", part: "bar" }, !this.readonly && (h("co-rich-text-toolbar", { key: '8fff97e80464889cb0e6e60d8d9f69308f987e9f', class: "co-doc-editor__toolbar", part: "toolbar", variant: "document", position: "top", disabled: false, locale: this.locale, attachmentsEnabled: false, documentHeaderEnabled: this.documentHeaderEnabled, extraItems: this.parsedExtraItems, onCoAction: this.handleToolbarAction, ref: (el) => (this.toolbarEl = el) })), h("div", { key: '00ff09c93887815f84bbb9c68e9485fd64c3c0b6', class: "co-doc-editor__zoom", role: "group", "aria-label": s.zoom }, this.zoomMode === 'custom' && h("span", { key: '956f0fa4e803a0e27fa32a28116d1e397a2dc402', class: "co-doc-editor__zoom-level" }, `${Math.round(this.scale * 100)} %`), zoomButton('fit', s.zoomFit), zoomButton('actual', s.zoomActual))), h("div", { key: '4a44bc41d6a641a5f4543422bd7263f2bd962f99', class: "co-doc-editor__body" }, h("div", { key: '467491e684b9487d507861d54c37b06b752216f4', class: "co-doc-editor__canvas", part: "canvas", ref: (el) => (this.canvasEl = el) }, h("div", { key: '66653efbda8e0dffb7bc1fdb07d0be31b4f5c8a9', class: "co-doc-editor__zoom-frame", style: frameStyle }, h("div", { key: '06407fc5177c21f4edc60b900a17a8c44ef193ab', class: "co-doc-editor__stage", style: { transform: `scale(${this.scale})` }, ref: (el) => (this.stageEl = el) }, h("div", { key: '440f1ced158d76650618bc0f153c3201503550a1', class: "co-doc-editor__sheet", part: "sheet", "data-co-doc": this.instanceId, style: sheetVars }, h("style", { key: "page-styles", "data-co-doc-page-styles": "", ref: (el) => (this.styleEl = el) }), h("div", { key: "paper", class: "co-doc-editor__paper", "data-theme": "light" }, this.renderHeaderBand(), h("div", { key: "content", class: "co-doc-editor__content", ref: (el) => (this.contentEl = el) }), this.renderOverlays()))))), h("slot", { key: '1478889436471ed2707db4e361d878faf7c56f2e', name: "aside" })))));
+        const zoomButton = (mode, label) => (h("button", { key: '3364440e585cbfdfdc33580aa28001f7563f6fa6', type: "button", class: { 'co-doc-editor__zoom-btn': true, 'co-doc-editor__zoom-btn--active': this.zoomMode === mode }, "aria-pressed": String(this.zoomMode === mode), onClick: () => this.setZoom(mode) }, label));
+        return (h(Host, { key: '2cc578822013cc07eeeebd0949cbbd2bb09acbc1' }, h("div", { key: '5aebe4e657d01b03c5fdf719b87c1c4a08f121a6', class: { 'co-doc-editor': true, 'co-doc-editor--readonly': this.readonly, 'co-doc-editor--loading': !this.ready }, part: "wrapper" }, h("div", { key: '93f7d60fffd9e9e902ac25d9fa8a971e96b39ec5', class: "co-doc-editor__bar", part: "bar" }, !this.readonly && (h("co-rich-text-toolbar", { key: 'df82ee73a50e8283244afb38532803a13b4d6db9', class: "co-doc-editor__toolbar", part: "toolbar", variant: "document", position: "top", disabled: false, locale: this.locale, attachmentsEnabled: false, documentHeaderEnabled: this.documentHeaderEnabled, extraItems: this.parsedExtraItems, onCoAction: this.handleToolbarAction, ref: (el) => (this.toolbarEl = el) })), h("div", { key: 'a49cc3a01fc203b3bcf3e158ce186fefd607577e', class: "co-doc-editor__zoom", role: "group", "aria-label": s.zoom }, this.zoomMode === 'custom' && h("span", { key: '47f0c8d5c6bd3c0e51d75ad70103644def66b333', class: "co-doc-editor__zoom-level" }, `${Math.round(this.scale * 100)} %`), zoomButton('fit', s.zoomFit), zoomButton('actual', s.zoomActual))), h("div", { key: 'd28e02e78c8171b0366f7b3ec74e60cfd9f3d21b', class: "co-doc-editor__body" }, h("div", { key: '450bbf0712838a9213a08288148f5365a1d6766b', class: "co-doc-editor__canvas", part: "canvas", ref: (el) => (this.canvasEl = el) }, h("div", { key: '3585da3d1f7b0311cb036246f20340b2eb34e45d', class: "co-doc-editor__zoom-frame", style: frameStyle }, h("div", { key: 'ce70286c7205f29115d4e9049c3d43775657abfb', class: "co-doc-editor__stage", style: { transform: `scale(${this.scale})` }, ref: (el) => (this.stageEl = el) }, h("div", { key: '81c7e68d4d8593b21be0f14045965b1e7230657e', class: "co-doc-editor__sheet", part: "sheet", "data-co-doc": this.instanceId, style: sheetVars }, h("style", { key: "page-styles", "data-co-doc-page-styles": "", ref: (el) => (this.styleEl = el) }), h("div", { key: "paper", class: "co-doc-editor__paper", "data-theme": "light" }, this.renderHeaderBand(), h("div", { key: "content", class: "co-doc-editor__content", ref: (el) => (this.contentEl = el) }), this.renderOverlays()))))), h("slot", { key: '3808aa0d8bae35da687e9757ca39ffced996a795', name: "aside" })))));
     }
     static get is() { return "co-document-editor"; }
     static get originalStyleUrls() {
@@ -936,7 +1016,7 @@ export class CoDocumentEditor {
                     "references": {
                         "DocumentPageSize": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-document-editor/co-document-editor.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-document-editor/co-document-editor.tsx",
                             "id": "src/components/co-document-editor/co-document-editor.tsx::DocumentPageSize"
                         }
                     }
@@ -962,7 +1042,7 @@ export class CoDocumentEditor {
                     "references": {
                         "DocumentMargins": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-document-editor/co-document-editor.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-document-editor/co-document-editor.tsx",
                             "id": "src/components/co-document-editor/co-document-editor.tsx::DocumentMargins"
                         }
                     }
@@ -1027,7 +1107,7 @@ export class CoDocumentEditor {
                     "references": {
                         "DocumentFeatures": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-document-editor/co-document-editor.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-document-editor/co-document-editor.tsx",
                             "id": "src/components/co-document-editor/co-document-editor.tsx::DocumentFeatures"
                         }
                     }
@@ -1163,7 +1243,8 @@ export class CoDocumentEditor {
             "stageHeight": {},
             "headerEditing": {},
             "draftShowPageNumber": {},
-            "imageBar": {}
+            "imageBar": {},
+            "signatureBar": {}
         };
     }
     static get events() {
@@ -1220,7 +1301,7 @@ export class CoDocumentEditor {
                     "references": {
                         "DocumentHeaderDetail": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-document-editor/co-document-editor.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-document-editor/co-document-editor.tsx",
                             "id": "src/components/co-document-editor/co-document-editor.tsx::DocumentHeaderDetail"
                         }
                     }
@@ -1256,7 +1337,7 @@ export class CoDocumentEditor {
                     "references": {
                         "DocumentActionDetail": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-document-editor/co-document-editor.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-document-editor/co-document-editor.tsx",
                             "id": "src/components/co-document-editor/co-document-editor.tsx::DocumentActionDetail"
                         }
                     }

package/dist/collection/components/co-document-editor/signature-bar.js

@@ -0,0 +1,26 @@
+/**
+ * Barra de la firma seleccionada (2026-10-01): «Duplicar» (otra posición del MISMO
+ * firmante) y ‹ Firma N › (a qué firmante va). Como la barra de imagen, se posiciona
+ * ANTES de existir con `imageBarPosition`: sus medidas son fijas en el CSS
+ * (`.co-doc-editor__sig-*`) y la prueba las ata a estas constantes.
+ */
+/** «Duplicar» con icono y texto (cabe «Duplicate», el más largo de es/en/pt). */
+export const SIGNATURE_DUPLICATE_PX = 96;
+/** Botón ‹ / › (ancho = alto). */
+export const SIGNATURE_STEP_PX = 28;
+/** Etiqueta «Firma N» (cabe «Assinatura 12»; más largo recorta con elipsis). */
+export const SIGNATURE_LABEL_PX = 88;
+/** duplicar 96 + separador 1 + ‹ 28 + etiqueta 88 + › 28 + 4 separaciones de 2 + relleno 2 × 2 + borde 1 × 2. */
+export const SIGNATURE_BAR_SIZE = { width: 255, height: 34 };
+/**
+ * Rango del ‹ ›: de 1 a una más que la mayor de las OTRAS firmas del documento. El N de
+ * un marcador es el N-ésimo firmante, así que saltar a «Firma 7» sin 2..6 pediría firmantes
+ * que no tienen posición; un hueco que igual quede lo avisa el envío (posiciones faltantes).
+ */
+export function signerStepRange(otherSlots) {
+    let top = 0;
+    for (const n of otherSlots)
+        if (n > top)
+            top = n;
+    return { min: 1, max: top + 1 };
+}

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

@@ -97,6 +97,9 @@
   display: flex;
   flex-direction: column;
   font-family: var(--co-font-family-primary);
+  /* El aside modeless es [popover]: la UA le pone `color: CanvasText` (#000
+     también en oscuro). Contenedor de paso — la card fija su propia tinta. */
+  color: inherit;
   transition: transform var(--co-motion-duration-slow) var(--co-motion-ease-in-out);
   will-change: transform; /* se conserva (E2): capa compuesta propia para el slide */
   z-index: 1;
@@ -179,6 +182,9 @@
   display: flex;
   flex-direction: column;
   background: var(--co-semantic-surface-page);
+  /* Tinta pareja con el fondo: lo que no declara color propio no hereda el
+     del contexto (ni el CanvasText del top layer). */
+  color: var(--co-semantic-text-default);
 }
 
 /* ─── Header ──────────────────────────────────────────────── */
@@ -278,8 +284,10 @@
   scrollbar-color: transparent transparent;
 }
 
+/* Pulgar por semánticos de borde (mismo valor en claro): opacity-negro fijo
+   era un pulgar invisible sobre la card oscura. */
 .co-drawer__body:hover {
-  scrollbar-color: var(--co-color-opacity-negro-16) transparent;
+  scrollbar-color: var(--co-semantic-border-default) transparent;
 }
 
 .co-drawer__body::-webkit-scrollbar {
@@ -296,15 +304,15 @@
 }
 
 .co-drawer__body:hover::-webkit-scrollbar-thumb {
-  background: var(--co-color-opacity-negro-16);
+  background: var(--co-semantic-border-default);
 }
 
 .co-drawer__body:hover::-webkit-scrollbar-thumb:hover {
-  background: var(--co-color-opacity-negro-25);
+  background: var(--co-semantic-border-field);
 }
 
 .co-drawer__body:hover::-webkit-scrollbar-thumb:active {
-  background: var(--co-color-opacity-negro-50);
+  background: var(--co-semantic-border-strong);
 }
 
 /* ─── Footer ──────────────────────────────────────────────── */

package/dist/collection/components/co-drawer/co-drawer.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";
 /**
  * Panel lateral (derecha, izquierda o abajo) sobre un scrim, con header, pestañas,
@@ -128,9 +129,20 @@ export class CoDrawer {
         return this.heading ? 'co-drawer-heading' : undefined;
     }
     onOpenChange(next, prev) {
+        if (next)
+            pushEscapeLayer(this);
+        else
+            removeEscapeLayer(this);
         if (next && !prev)
             this.coOpen.emit();
     }
+    connectedCallback() {
+        if (this.open)
+            pushEscapeLayer(this);
+    }
+    disconnectedCallback() {
+        removeEscapeLayer(this);
+    }
     handleKey(e) {
         if (!this.open || !this.closeOnEscape || e.key !== 'Escape')
             return;
@@ -139,6 +151,10 @@ export class CoDrawer {
         // Hosts are light-DOM with reflected props, so a document query works.
         if (this.modeless && document.querySelector('co-drawer[open]:not([modeless]), co-modal[open]'))
             return;
+        // Escape en cascada: solo la capa de ARRIBA (la última abierta: otro drawer, un co-modal)
+        // atiende la tecla — el drawer de abajo no se cierra llevándose el modal con él.
+        if (!isTopEscapeLayer(this))
+            return;
         this.coClose.emit();
     }
     componentDidLoad() {

package/dist/collection/components/co-drive-card/co-drive-card.css

@@ -3,6 +3,11 @@
 }
 
 /* ─── Shared surface ─────────────────────────────────────────── */
+/* Superficie, tinta y anillos por semánticos de MISMO valor en claro (base-blanco→surface-page,
+   negro-8/25→border-subtle/field, base-negro→text-default, gray-100→surface-control,
+   gray-400→text-disabled): la tarjeta era solo clara y cambiar únicamente los anillos a border-*
+   (blancos en oscuro) los borraba sobre el blanco. Quedan fijos el chip de selección y la estrella
+   superpuesta: flotan sobre la miniatura (imagen), no sobre la superficie. */
 .co-drive-card {
   --dc-accent: var(--co-color-primary-azul, #2563eb);
   position: relative;
@@ -12,8 +17,8 @@
   cursor: pointer;
   outline: none;
   font-family: var(--co-font-family-primary);
-  background: var(--co-color-base-blanco, #fff);
-  box-shadow: inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+  background: var(--co-semantic-surface-page, #fff);
+  box-shadow: inset 0 0 0 1px var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));
 }
 
 .co-drive-card:focus-visible {
@@ -38,11 +43,12 @@
 
 .co-drive-card--folder:hover:not(.co-drive-card--selected) {
   box-shadow: var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 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));
 }
 
 .co-drive-card--folder.co-drive-card--selected {
-  background: color-mix(in srgb, var(--dc-accent) 7%, white);
+  /* El tinte se mezcla con la superficie (blanco en claro), no con blanco fijo. */
+  background: color-mix(in srgb, var(--dc-accent) 7%, var(--co-semantic-surface-page, white));
   box-shadow: inset 0 0 0 1.5px var(--dc-accent);
 }
 
@@ -53,7 +59,7 @@
   align-items: center;
   justify-content: center;
   border-radius: 11px;
-  background: color-mix(in srgb, var(--dc-accent) 12%, white);
+  background: color-mix(in srgb, var(--dc-accent) 12%, var(--co-semantic-surface-page, white));
   color: var(--dc-accent);
 }
 
@@ -80,7 +86,7 @@
   font-size: 14px;
   font-weight: 500;
   line-height: 1.3;
-  color: var(--co-color-base-negro, #1f1c1b);
+  color: var(--co-semantic-text-default, #1f1c1b);
   letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
   white-space: nowrap;
   overflow: hidden;
@@ -90,7 +96,7 @@
 .co-drive-card__meta {
   font-family: var(--co-font-family-primary);
   font-size: 12px;
-  color: var(--co-color-gray-500, #888888);
+  color: var(--co-semantic-text-muted, #888888);
   margin-top: 2px;
   letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
   white-space: nowrap;
@@ -129,11 +135,11 @@
 
 .co-drive-card--file:hover:not(.co-drive-card--selected):not(.co-drive-card--active) {
   box-shadow: var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 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));
 }
 
 .co-drive-card--file.co-drive-card--active:not(.co-drive-card--selected) {
-  box-shadow: inset 0 0 0 1.5px var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25));
+  box-shadow: inset 0 0 0 1.5px var(--co-semantic-border-field, rgba(31, 28, 27, 0.25));
 }
 
 .co-drive-card--file.co-drive-card--selected {
@@ -145,7 +151,7 @@
   display: block;
   border-radius: 10px;
   overflow: hidden;
-  background: var(--co-color-gray-100, #f6f6f6);
+  background: var(--co-semantic-surface-control, #f6f6f6);
 }
 
 .co-drive-card--comfy .co-drive-card__thumb {
@@ -174,7 +180,7 @@
 .co-drive-card__sub {
   font-family: var(--co-font-family-primary);
   font-size: 11.5px;
-  color: var(--co-color-gray-500, #888888);
+  color: var(--co-semantic-text-muted, #888888);
   margin-top: 1px;
   letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
   white-space: nowrap;
@@ -207,7 +213,7 @@
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
-  color: var(--co-color-gray-400, #a0a0a0);
+  color: var(--co-semantic-text-disabled, #a0a0a0);
   opacity: 0;
   transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }

package/dist/collection/components/co-drive-card/co-drive-card.js

@@ -87,7 +87,7 @@ export class CoDriveCard {
     }
     render() {
         const isFile = this.variant === 'file';
-        return (h("div", { key: '35d58b53bd6f000c2c0e6fb4f16cc4914bd8ece9', class: {
+        return (h("div", { key: '18b61cf2abfaa8772eccfdd6eef97b02031ecf03', class: {
                 'co-drive-card': true,
                 [`co-drive-card--${this.variant}`]: true,
                 [`co-drive-card--${this.density}`]: true,

package/dist/collection/components/co-drop-zone/co-drop-zone.js

@@ -63,7 +63,7 @@ export class CoDropZone {
         this.coDragStateChange.emit(next);
     }
     render() {
-        return (h(Host, { key: '5c7232e2bc5fe0f1cc24181d1758fcd0369c47cb', class: { 'co-drop-zone': true, 'co-drop-zone--active': this.active }, part: "host", style: { '--co-drop-zone-accent': this.accent }, onDragEnter: this.handleDragEnter, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("slot", { key: 'efdf82946b7396ddf88e7f440aa6c460cb15821b' }), this.active && (h("div", { key: '3b9a9f2e78275fbf4a4fb240beafd6725b06f36f', class: "co-drop-zone__overlay", part: "overlay" }, h("div", { key: '3a540d077413199f63904a3b8f2a82d01306927a', class: "co-drop-zone__badge", part: "badge" }, h("co-icon", { key: '224941558e33dddb16ae7d98b63f63a0f4d41c5e', name: this.icon, size: 34 })), h("span", { key: '256aa058549937ab0cf0bdc31337d22fa860da75', class: "co-drop-zone__label", part: "label" }, this.label)))));
+        return (h(Host, { key: '67d960d753b29ed1c365312dc7295df325a8a722', class: { 'co-drop-zone': true, 'co-drop-zone--active': this.active }, part: "host", style: { '--co-drop-zone-accent': this.accent }, onDragEnter: this.handleDragEnter, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("slot", { key: 'da400ae3fd805ab0e12e832445f7921a2cf9a378' }), this.active && (h("div", { key: 'a10b22b0b965668b62100f3736bd0b1f373536bf', class: "co-drop-zone__overlay", part: "overlay" }, h("div", { key: 'ea8e3f27d9c8b9717d8bd7867e756782e863eeff', class: "co-drop-zone__badge", part: "badge" }, h("co-icon", { key: '9fe0f6d884b9adab786cb641b799da67cc3551f7', name: this.icon, size: 34 })), h("span", { key: 'b413d86783086497f90afb0fbd24c10f1f7a9e7d', class: "co-drop-zone__label", part: "label" }, this.label)))));
     }
     static get is() { return "co-drop-zone"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-emoji-picker/co-emoji-picker.js

@@ -392,14 +392,14 @@ export class CoEmojiPicker {
         const stripCategories = hasRecent
             ? [RECENT_CATEGORY, ...EMOJI_CATEGORIES]
             : [...EMOJI_CATEGORIES];
-        return (h("div", { key: '3f45e20684cb31d39feabb1e9a431001153badc4', class: "co-emoji-picker", part: "panel", role: "group", "aria-label": this.label || s.pickerLabel, style: { '--co-emoji-picker-columns': String(Math.max(1, this.columns)) }, onKeyDown: this.handleKeyDown }, this.searchable && (h("div", { key: 'e7e0345d77fc03813f87c2cc119b205f2da67807', class: "co-emoji-picker__search", part: "search" }, h("co-icon", { key: '631f7a147601969961941f0f63a080e75a4ade41', name: "magnifying-glass", size: 16 }), h("input", { key: 'e216e1bf3898d4c747c247aa86df348eca1eb906', class: "co-emoji-picker__input", part: "input", type: "text", value: this.term, placeholder: this.searchPlaceholder || s.searchPlaceholder, onInput: this.handleInput, ref: (el) => (this.inputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list", "aria-controls": CoEmojiPicker.GRID_ID, "aria-activedescendant": activeCellId }), this.renderTones())), this.showCategories && (h("div", { key: '0d212f4c661651e51503e82ad2e4c81af9e89d55', class: "co-emoji-picker__categories", part: "categories", "aria-label": s.categoriesLabel }, !this.searchable && this.renderTones(), stripCategories.map((category) => {
+        return (h("div", { key: '002e48d3ddf42599235dcbb899db1402b082623b', class: "co-emoji-picker", part: "panel", role: "group", "aria-label": this.label || s.pickerLabel, style: { '--co-emoji-picker-columns': String(Math.max(1, this.columns)) }, onKeyDown: this.handleKeyDown }, this.searchable && (h("div", { key: '80b5ac6d85764a8634fad32f37b57a08c9b660ce', class: "co-emoji-picker__search", part: "search" }, h("co-icon", { key: '176b1fc29d0706ac53f0b3c6dc80baf83da8a5b3', name: "magnifying-glass", size: 16 }), h("input", { key: '80c64915e50e4f32a0fa696de34b02552a695e43', class: "co-emoji-picker__input", part: "input", type: "text", value: this.term, placeholder: this.searchPlaceholder || s.searchPlaceholder, onInput: this.handleInput, ref: (el) => (this.inputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list", "aria-controls": CoEmojiPicker.GRID_ID, "aria-activedescendant": activeCellId }), this.renderTones())), this.showCategories && (h("div", { key: '185790638cf64b8744b22dbacc290849841c14d7', class: "co-emoji-picker__categories", part: "categories", "aria-label": s.categoriesLabel }, !this.searchable && this.renderTones(), stripCategories.map((category) => {
             var _a, _b;
             const name = (_a = s.categories[category]) !== null && _a !== void 0 ? _a : category;
             return (h("button", { type: "button", key: category, class: {
                     'co-emoji-picker__category': true,
                     'co-emoji-picker__category--active': category === activeCategory,
                 }, "aria-label": name, "aria-current": category === activeCategory ? 'true' : undefined, title: name, onClick: () => this.jumpToCategory(category) }, h("co-icon", { name: (_b = EMOJI_CATEGORY_ICONS[category]) !== null && _b !== void 0 ? _b : 'circle', size: 16 })));
-        }))), h("div", { key: '9d75f1c71e8162708bff7ff3d3e8ac50d2ae8506', class: "co-emoji-picker__scroll", part: "grid", id: CoEmojiPicker.GRID_ID, role: "listbox", "aria-label": s.gridLabel, ref: (el) => (this.scrollEl = el), onScroll: this.handleScroll }, isEmpty ? (h("div", { class: "co-emoji-picker__empty" }, h("co-icon", { name: "magnifying-glass", size: 20 }), h("span", null, this.emptyMessage || s.emptyMessage))) : (this.renderRows(rows)))));
+        }))), h("div", { key: 'f630309a995d22234dc5f7acdc723586f6181499', class: "co-emoji-picker__scroll", part: "grid", id: CoEmojiPicker.GRID_ID, role: "listbox", "aria-label": s.gridLabel, ref: (el) => (this.scrollEl = el), onScroll: this.handleScroll }, isEmpty ? (h("div", { class: "co-emoji-picker__empty" }, h("co-icon", { name: "magnifying-glass", size: 20 }), h("span", null, this.emptyMessage || s.emptyMessage))) : (this.renderRows(rows)))));
     }
     static get is() { return "co-emoji-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-empty-state/co-empty-state.css

@@ -20,7 +20,9 @@
   width: 72px;
   height: 72px;
   border-radius: 50%;
-  background: var(--co-color-gray-100, #f6f6f6);
+  /* Semánticos de MISMO valor en claro (gray-100 = surface-control): la
+     primitiva no gira y dejaba un disco claro sobre la página oscura. */
+  background: var(--co-semantic-surface-control);
   color: var(--co-semantic-text-muted);
   margin-bottom: var(--co-spacing-xl);
 }
@@ -52,15 +54,17 @@
 .co-empty-state--card {
   gap: var(--co-spacing-3xl, 32px);
   padding: var(--co-spacing-5xl, 48px) var(--co-spacing-3xl, 32px);
-  background: var(--co-color-base-blanco, #fff);
-  box-shadow: inset 0 0 0 1px var(--co-color-opacity-negro-8);
+  /* base-blanco / opacity-negro-8 no giran: en oscuro era una tarjeta blanca
+     con el título en text-default (blanco). Mismo valor en claro. */
+  background: var(--co-semantic-surface-page);
+  box-shadow: inset 0 0 0 1px var(--co-semantic-border-subtle);
   border-radius: var(--co-border-radius-lg, 16px);
 }
 
 .co-empty-state--card .co-empty-state__icon {
   margin-bottom: 0;
-  background: var(--co-color-gray-100, #f6f6f6);
-  color: var(--co-color-gray-600, #585858);
+  background: var(--co-semantic-surface-control);
+  color: var(--co-semantic-text-secondary);
 }
 
 .co-empty-state--card .co-empty-state__heading {
@@ -70,7 +74,7 @@
 .co-empty-state--card .co-empty-state__description {
   margin-bottom: 0;
   line-height: 1.35;
-  color: var(--co-color-gray-600, #585858);
+  color: var(--co-semantic-text-secondary);
   max-width: 366px;
 }
 

package/dist/collection/components/co-empty-state/co-empty-state.js

@@ -15,11 +15,11 @@ export class CoEmptyState {
     render() {
         var _a;
         const iconWeight = (_a = this.iconWeight) !== null && _a !== void 0 ? _a : (this.variant === 'card' ? 'regular' : 'light');
-        return (h("div", { key: '419da2f8dee690bb65956debb4a1d9aad3319906', class: {
+        return (h("div", { key: '19132f82995eef467098bfddbc78dc65b98a9290', class: {
                 'co-empty-state': true,
                 [`co-empty-state--${this.variant}`]: true,
                 [`co-empty-state--${this.size}`]: true,
-            }, part: "empty-state" }, this.icon && (h("div", { key: '5fd70dd13d10ad6e76f4c73ed43c7a4aca9c4fa1', class: "co-empty-state__icon" }, h("co-icon", { key: '75882f8eed9f64ffbe8b1163ea9d0a7666372ab2', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (h("div", { key: '514ee7eb7b29867aa0d95088c03d6d24a1805f32', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: '2e004a9bacf1094c0c1ee5ad697862b13d05241b', class: "co-empty-state__description" }, this.description)), h("div", { key: '4e78c8ce7a8169e4afabc9fbce485f40175ee1cb', class: "co-empty-state__actions" }, h("slot", { key: '519d8af5d16b2f3382044d3ee098207b97e1bbf4' }))));
+            }, part: "empty-state" }, this.icon && (h("div", { key: 'e2e91d957055eeec9b884e089b43a351acb693c6', class: "co-empty-state__icon" }, h("co-icon", { key: '8269c9b54de522ffe7eb4ae00a9c89b003654531', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (h("div", { key: '8ee14a4ef7136581050dc0530f3024b0c3d33b97', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: '115f78cabbd7b6842f16e6c6e10725d5405a45dc', class: "co-empty-state__description" }, this.description)), h("div", { key: '7439b17467b5470671e96515161838382d6764ea', class: "co-empty-state__actions" }, h("slot", { key: 'c34c498840f451ebec7e1bb062afa499a6299cff' }))));
     }
     static get is() { return "co-empty-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-event-calendar/co-event-calendar.js

@@ -235,10 +235,10 @@ export class CoEventCalendar {
         const t = getDateStrings(this.locale);
         const views = this.viewsList;
         const a = parseISO(this.anchor);
-        return (h("div", { key: '523b25e47b0d586ead40867d0c496b6d8fd1a21b', class: "cal" }, h("div", { key: '4943440f6f492be23a23f8820b1d638a0d292902', class: "cal__toolbar", part: "toolbar" }, h("button", { key: 'a6d890434149f15ef770db851e70e4d93646571b', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), h("div", { key: 'a617c5087b9055bc4f8530eafe619cca49c0930e', class: "cal__title-group" }, h("button", { key: '1b2f1ba3972d815be76a4527711e887066a994a1', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, h("co-icon", { key: '918828dec396d69678618d40c8aeb3793c6aa620', name: "caret-left", size: 16 })), h("h2", { key: 'c099fc2e18fa07f79fe0a0e72e372e71b658c553', class: "cal__title", "aria-live": "polite" }, this.title()), h("button", { key: '52c2ad1d1a06955f892ac6d179d905270df3a967', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, h("co-icon", { key: '9b4becd4d18465a86d42491291166ccad94973d3', name: "caret-right", size: 16 }))), views.length > 1 ? (h("div", { class: "cal__views", role: "tablist" }, views.map((v) => {
+        return (h("div", { key: '832acb515b3f21d70ce662838a6e6e3698b56217', class: "cal" }, h("div", { key: 'c083f584a806fe73c967669674cd150db68d44b9', class: "cal__toolbar", part: "toolbar" }, h("button", { key: '4d9643c42858f77d10e3ae2fd6b94e3127acf1bc', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), h("div", { key: '1ef58de1d94cde443ba40fd30d3145f527a7ec4d', class: "cal__title-group" }, h("button", { key: 'ad9df38e0f8e69d44b60aa21ce3ba1606d499b24', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, h("co-icon", { key: 'c6277c1173b4b11240844c85dd83169f2b3b3061', name: "caret-left", size: 16 })), h("h2", { key: '4ad13c5721eacc1102d9c192f82f545158dbc44d', class: "cal__title", "aria-live": "polite" }, this.title()), h("button", { key: '225374ba888f99f3d70c4db5a5a7fd96e367df44', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, h("co-icon", { key: '72bb0f7e8eb4e53b071656eb2ea4e4b7dc73adf2', name: "caret-right", size: 16 }))), views.length > 1 ? (h("div", { class: "cal__views", role: "tablist" }, views.map((v) => {
             var _a;
             return (h("button", { type: "button", role: "tab", "aria-selected": this.view === v ? 'true' : 'false', class: { 'cal__view-btn': true, 'cal__view-btn--active': this.view === v }, onClick: () => this.switchView(v) }, (_a = t[v]) !== null && _a !== void 0 ? _a : v));
-        }))) : (h("span", { class: "cal__views-spacer" }))), h("div", { key: '266dc8d6f4b490559eaa648970328e0861d44ec8', class: "cal__body", part: "body" }, this.view === 'month' ? (h("co-calendar-month", { loading: this.loading, events: this.normalized, year: a.year, month: a.month, locale: this.locale, firstDayOfWeek: this.firstDayOfWeek, timeZone: this.tz, minDate: this.minDate, maxDate: this.maxDate, editable: this.editable, selectable: this.selectable, maxLanes: this.dayMaxEvents, onCoDaySelect: this.handleDaySelect, onCoEventClick: this.handleEventClick, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, onCoMoreClick: this.handleMoreClick })) : this.view === 'week' || this.view === 'day' ? (h("co-calendar-timegrid", { loading: this.loading, events: this.normalized, dates: this.visibleDates, locale: this.locale, timeZone: this.tz, editable: this.editable, selectable: this.selectable, minDate: this.minDate, maxDate: this.maxDate, onCoRangeSelect: this.handleRangeSelect, onCoEventClick: this.handleEventClick, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, defaultDurationMinutes: this.defaultDurationMinutes, allDaySlot: this.allDaySlot, minTime: this.minTime, maxTime: this.maxTime, slotMinutes: this.slotMinutes, snapMinutes: this.snapMinutes, scrollTime: this.scrollTime, nowIndicator: this.nowIndicator })) : (h("div", { class: "cal__placeholder" }, h("co-icon", { name: "calendar-dots", size: 32 }), h("p", null, `${this.view} view — coming soon`))))));
+        }))) : (h("span", { class: "cal__views-spacer" }))), h("div", { key: 'a11f0e302ec7a4f8e5c0e6958bb3de75acec43cf', class: "cal__body", part: "body" }, this.view === 'month' ? (h("co-calendar-month", { loading: this.loading, events: this.normalized, year: a.year, month: a.month, locale: this.locale, firstDayOfWeek: this.firstDayOfWeek, timeZone: this.tz, minDate: this.minDate, maxDate: this.maxDate, editable: this.editable, selectable: this.selectable, maxLanes: this.dayMaxEvents, onCoDaySelect: this.handleDaySelect, onCoEventClick: this.handleEventClick, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, onCoMoreClick: this.handleMoreClick })) : this.view === 'week' || this.view === 'day' ? (h("co-calendar-timegrid", { loading: this.loading, events: this.normalized, dates: this.visibleDates, locale: this.locale, timeZone: this.tz, editable: this.editable, selectable: this.selectable, minDate: this.minDate, maxDate: this.maxDate, onCoRangeSelect: this.handleRangeSelect, onCoEventClick: this.handleEventClick, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, defaultDurationMinutes: this.defaultDurationMinutes, allDaySlot: this.allDaySlot, minTime: this.minTime, maxTime: this.maxTime, slotMinutes: this.slotMinutes, snapMinutes: this.snapMinutes, scrollTime: this.scrollTime, nowIndicator: this.nowIndicator })) : (h("div", { class: "cal__placeholder" }, h("co-icon", { name: "calendar-dots", size: 32 }), h("p", null, `${this.view} view — coming soon`))))));
     }
     static get is() { return "co-event-calendar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-event-popover/co-event-popover.js

@@ -130,7 +130,7 @@ export class CoEventPopover {
         this.coClose.emit();
     }
     render() {
-        return (h(Host, { key: '9796ba38e83610ddb390dcab0818baf6bededc72' }, h("div", { key: 'e08bba8ebefb5206cbdd7a554e25ff9f4fcf9541', class: "pop", popover: "manual", role: "dialog", "aria-modal": "false", "aria-label": this.popoverLabel, tabIndex: -1, ref: (el) => (this.panelEl = el) }, h("div", { key: '185e30ed1640cbfb04e056d7a3433df2f5b94e06', class: "pop__actions", part: "actions" }, h("slot", { key: 'db04986cc1b63d52c5f1cc6579b5d00dbd46e476', name: "actions" })), h("div", { key: '89bbdc2a255e18d180183dbb127ce05a72ff262d', class: "pop__head" }, this.dot && h("span", { key: '6819901baff501958c8214dd7546a90a108c45f5', class: "pop__dot", style: this.color ? { background: this.color } : {} }), h("div", { key: '1111598f3ee886a0f2d9360c57278f1d71b76ddc', class: "pop__body", part: "body" }, h("slot", { key: '82c5eb8ff0e7752993d8b25b6d33a4d15d7edd25' }))))));
+        return (h(Host, { key: '5bd2501cd2a3b7163ddb91cac5b4397ea9394d6c' }, h("div", { key: '1aa203d59b6705638bdd5aa412fbb88ead2bd9f2', class: "pop", popover: "manual", role: "dialog", "aria-modal": "false", "aria-label": this.popoverLabel, tabIndex: -1, ref: (el) => (this.panelEl = el) }, h("div", { key: '3d740784adb2378dc83d8dbd1374d55ad3596ef7', class: "pop__actions", part: "actions" }, h("slot", { key: '4a79c8011bbcb610d1b650ee36b4c6875600a3fa', name: "actions" })), h("div", { key: 'b34f414b6a77c733189364037949360813e617eb', class: "pop__head" }, this.dot && h("span", { key: '498557c45c87c3e14ef838740ce76c449e94c607', class: "pop__dot", style: this.color ? { background: this.color } : {} }), h("div", { key: 'ca746458cfc81afd00ae5814ca196b71cad75449', class: "pop__body", part: "body" }, h("slot", { key: '4a851b8f4ddfd9321b2d882544adedff4dab7ade' }))))));
     }
     static get is() { return "co-event-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -117,9 +117,11 @@
 
 /* ── Variants ───────────────────────────────────────────────── */
 .co-fab--primary {
-  /* Negro sólido (pedido design 2026-07-22 — antes Negro 80% + blur, se veía
-     gris sobre fondos claros). --co-fab-bg sigue disponible como override. */
-  background: var(--co-fab-bg, var(--co-color-base-negro, #1f1c1b));
+  /* Sólido (pedido design 2026-07-22 — antes Negro 80% + blur, se veía gris sobre
+     fondos claros): la superficie INVERSA, negra en claro. En oscuro gira a blanco junto
+     con el icono (on-primary); con base-negro fijo el icono negro desaparecía (2026-09-27).
+     --co-fab-bg sigue disponible como override. */
+  background: var(--co-fab-bg, var(--co-semantic-surface-primary));
   color: var(--co-semantic-on-primary);
 }