@prolibu-suite/cobalt-core 0.11.6 → 0.11.8

package/dist/collection/components/co-radio-group/co-radio-group.js

@@ -224,7 +224,7 @@ export class CoRadioGroup {
                     "references": {
                         "RadioOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-radio-group/co-radio-group.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-radio-group/co-radio-group.tsx",
                             "id": "src/components/co-radio-group/co-radio-group.tsx::RadioOption"
                         }
                     }

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

@@ -85,14 +85,16 @@
   line-height: 1;
 }
 
+/* Tinta de estado por --co-semantic-text-*: gira con el tema (status-* es relleno, no se
+   aclara, y como texto en oscuro daba <4,5). Fallback a la primitiva hasta publicar tokens. */
 .co-rating__helper--error .co-rating__helper-icon,
-.co-rating__helper--error .co-rating__helper-text { color: var(--co-semantic-status-error); }
+.co-rating__helper--error .co-rating__helper-text { color: var(--co-semantic-text-error, var(--co-semantic-status-error)); }
 
 .co-rating__helper--success .co-rating__helper-icon,
-.co-rating__helper--success .co-rating__helper-text { color: var(--co-semantic-status-success); }
+.co-rating__helper--success .co-rating__helper-text { color: var(--co-semantic-text-success, var(--co-semantic-status-success)); }
 
 .co-rating__helper--warning .co-rating__helper-icon,
-.co-rating__helper--warning .co-rating__helper-text { color: var(--co-color-status-review); }
+.co-rating__helper--warning .co-rating__helper-text { color: var(--co-semantic-text-warning, var(--co-color-status-review)); }
 
 .co-rating__helper--info .co-rating__helper-icon,
-.co-rating__helper--info .co-rating__helper-text { color: var(--co-semantic-status-info); }
+.co-rating__helper--info .co-rating__helper-text { color: var(--co-semantic-text-info, var(--co-semantic-status-info)); }

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

@@ -48,16 +48,16 @@ export class CoRating {
         const iconSize = this.size === 'large' ? 28 : 20;
         const active = this.hoverValue || this.value;
         const stars = Array.from({ length: this.max }, (_, i) => i + 1);
-        return (h("div", { key: '007e7bf1aef33b6890f98e1fdac362aa3f578802', class: {
+        return (h("div", { key: 'd100ef9f45fab43561f8d6786f19543b9c3b95ba', class: {
                 'co-rating': true,
                 'co-rating--disabled': this.disabled,
                 'co-rating--readonly': this.readOnly,
                 [`co-rating--${this.size}`]: true,
-            } }, this.label && h("label", { key: 'ebc8a44655b6f975d792546762d3fe1e4ccf2958', class: "co-rating__label" }, this.label), h("div", { key: 'eba75b8e98a075531afff4fe5781a63119206d7b', class: "co-rating__stars", onMouseLeave: this.handleMouseLeave }, stars.map(star => (h("button", { class: {
+            } }, this.label && h("label", { key: '4943fe6704fb1e2456378c988bcb60c5a9376c59', class: "co-rating__label" }, this.label), h("div", { key: 'fa5b3ff7a54490ee5bc513a31978c21daf49bd52', class: "co-rating__stars", onMouseLeave: this.handleMouseLeave }, stars.map(star => (h("button", { class: {
                 'co-rating__star': true,
                 'co-rating__star--active': star <= active,
                 'co-rating__star--hover': this.hoverValue > 0 && star <= this.hoverValue,
-            }, type: "button", tabIndex: this.disabled || this.readOnly ? -1 : 0, disabled: this.disabled, onClick: () => this.handleClick(star), onMouseEnter: () => this.handleMouseEnter(star), "aria-label": `${star} of ${this.max}` }, h("co-icon", { name: this.icon, size: iconSize, weight: star <= active ? 'fill' : 'regular' }))))), this.helperText && (h("div", { key: '571bff4884aa6695e2edcb1ae42baae1d57eb3a0', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '73cfba25f9b28ea6a6dc7b48c6f2009ac4024779', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), h("span", { key: '4029c8c33d6a967c063a886eca3043b22ecc9a2d', class: "co-rating__helper-text" }, this.helperText)))));
+            }, type: "button", tabIndex: this.disabled || this.readOnly ? -1 : 0, disabled: this.disabled, onClick: () => this.handleClick(star), onMouseEnter: () => this.handleMouseEnter(star), "aria-label": `${star} of ${this.max}` }, h("co-icon", { name: this.icon, size: iconSize, weight: star <= active ? 'fill' : 'regular' }))))), this.helperText && (h("div", { key: 'b1aaa3ce09b9454204655a648ccd6f84836c011c', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'ef3a4c165a52e568cee28d0ffcbb9aca2d7ff4cf', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), h("span", { key: '15ad0f44daaa0fa73a678155f014fa768da6217a', class: "co-rating__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-rating"; }
     static get encapsulation() { return "shadow"; }

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

@@ -137,7 +137,10 @@
   cursor: not-allowed;
 }
 
-.co-ref-field--error { border-color: var(--co-semantic-status-error); }
+/* Borde de error de CAMPO por --co-semantic-border-error: gira con el tema (status-error es
+   relleno fijo y como trazo en oscuro daba 2,94:1). En claro vale status-error (idéntico).
+   Fallback: la primitiva de hoy, hasta publicar tokens. */
+.co-ref-field--error { border-color: var(--co-semantic-border-error, var(--co-semantic-status-error)); }
 .co-ref-field--success { border-color: var(--co-semantic-status-success); }
 .co-ref-field--warning { border-color: var(--co-color-status-review); }
 
@@ -335,7 +338,9 @@
      dot-only chips) defines the height, so the chip never exceeds the field's
      inner content area and the trigger height stays constant. */
   padding: 0 var(--co-spacing-sm2);
-  background: var(--co-color-gray-100);
+  /* surface-control = gray-100 en claro y gira en oscuro: con la primitiva, la etiqueta
+     (text-default, blanca en oscuro) quedaba blanco sobre blanco (2026-09-27). */
+  background: var(--co-semantic-surface-control);
   border-radius: var(--co-border-radius-full);
   line-height: 1;
   /* Cap at 160px, but never wider than the chips wrapper: in a narrow field
@@ -420,7 +425,7 @@
   border: none;
   background: transparent;
   cursor: pointer;
-  color: var(--co-color-gray-500);
+  color: var(--co-semantic-text-muted);
   transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
   flex-shrink: 0;
 }
@@ -429,13 +434,40 @@
   color: var(--co-semantic-text-default);
 }
 
+/* `editable` + `multiple`: lápiz al inicio de cada chip (paridad V1), mismo trato que la ✕. */
+.co-ref-field__chip-edit {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--co-semantic-text-muted);
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
+  flex-shrink: 0;
+}
+
+.co-ref-field__chip-edit:hover {
+  color: var(--co-semantic-text-default);
+}
+
+.co-ref-field__chip--fill .co-ref-field__chip-edit {
+  color: inherit;
+  opacity: 0.72;
+}
+
+.co-ref-field__chip--fill .co-ref-field__chip-edit:hover {
+  opacity: 1;
+}
+
 .co-ref-field__chip-overflow {
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: var(--co-spacing-xs) var(--co-spacing-sm);
-  background: var(--co-color-opacity-negro-8);
+  background: var(--co-semantic-surface-hover);
   border-radius: var(--co-border-radius-full);
   font-size: var(--co-font-size-12);
   font-weight: 600;
@@ -536,9 +568,11 @@
   color: var(--co-semantic-text-muted);
 }
 
-.co-ref-field__helper--error { color: var(--co-semantic-status-error); }
-.co-ref-field__helper--success { color: var(--co-semantic-status-success); }
-.co-ref-field__helper--warning { color: var(--co-color-status-review); }
+/* Tinta de estado por --co-semantic-text-*: gira con el tema (status-* es relleno, no se
+   aclara, y como texto en oscuro daba <4,5). Fallback a la primitiva hasta publicar tokens. */
+.co-ref-field__helper--error { color: var(--co-semantic-text-error, var(--co-semantic-status-error)); }
+.co-ref-field__helper--success { color: var(--co-semantic-text-success, var(--co-semantic-status-success)); }
+.co-ref-field__helper--warning { color: var(--co-semantic-text-warning, var(--co-color-status-review)); }
 
 /* ── Horizontal layout: label left; control + helper stacked right ──
    Set --co-field-label-width on a container to align labels across fields. */
@@ -566,9 +600,10 @@
   min-width: 0;
 }
 
+/* Asterisco de requerido: tinta --co-semantic-text-error (gira con el tema). */
 .co-field-required {
   margin-left: 2px;
-  color: var(--co-color-status-error);
+  color: var(--co-semantic-text-error, var(--co-color-status-error));
 }
 
 .co-field-required__caption {

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

@@ -31,8 +31,8 @@ export class CoRefField {
         this.disabled = false;
         /** Muestra la × que vacía la selección cuando hay valor (default `true`); emite `coClear`. */
         this.clearable = true;
-        /** Shows a pencil button on the single-value trigger that emits
-         *  `coEditSelected` with the selected record id. The host owns policy
+        /** Shows a pencil button on the single-value trigger (and on each chip when
+         *  `multiple`) that emits `coEditSelected` with that record's id. The host owns policy
          *  (permissions, what opens) — the component only paints and emits. */
         this.editable = false;
         /** Accessible name / tooltip for the edit button. */
@@ -240,6 +240,11 @@ export class CoRefField {
             if (selected)
                 this.coEditSelected.emit(selected._id);
         };
+        this.handleEditChip = (id, e) => {
+            // Sin abrir el panel: el chip vive dentro del trigger clicable.
+            e.stopPropagation();
+            this.coEditSelected.emit(id);
+        };
         this.handleRemoveChip = (id, e) => {
             var _a;
             e.stopPropagation();
@@ -427,7 +432,9 @@ export class CoRefField {
         var _a;
         const active = document.activeElement;
         if (active === this.el || this.el.contains(active)) {
-            (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+            // Sin scroll: si el panel se cerró porque el campo salió de la vista de su scroller
+            // (co-popover), devolverle el foco llevaba al usuario de vuelta arriba del formulario.
+            (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
         }
     }
     /** Selección desde un panel proyectado (slot `panel`): mismo contrato que un
@@ -506,7 +513,7 @@ export class CoRefField {
                     'co-ref-field__chip--fill-light': fill && isLightColor(item.color),
                     'co-ref-field__chip--clipped': !fixed && i >= visibleCount,
                     [`co-ref-field__chip--${this.normalizedSize}`]: true,
-                }, style: fill ? { backgroundColor: item.color } : undefined, onRemove: (e) => this.handleRemoveChip(item._id, e) }, item.image || item.avatar ? (this.renderItemAvatar(item)) : item.color && !fill ? (h("span", { class: "co-ref-field__chip-dot", style: { backgroundColor: item.color } })) : null));
+                }, style: fill ? { backgroundColor: item.color } : undefined, onRemove: (e) => this.handleRemoveChip(item._id, e), onEdit: this.editable && !this.disabled ? (e) => this.handleEditChip(item._id, e) : undefined, editLabel: this.editLabel }, item.image || item.avatar ? (this.renderItemAvatar(item)) : item.color && !fill ? (h("span", { class: "co-ref-field__chip-dot", style: { backgroundColor: item.color } })) : null));
         })), overflow > 0 && h("span", { class: "co-ref-field__chip-overflow" }, "+", overflow)));
     }
     /** Botones del footer. `slotted`: dentro de la co-option-list van por su
@@ -533,7 +540,7 @@ export class CoRefField {
     }
     // ── Main render ────────────────────────────────────────────
     render() {
-        return (h("div", { key: 'a3aef08c94e307af533bd47f40d0a4a92fe27d24', class: "co-ref-field" }, (this.label || this.secondaryLabel) && (h("div", { key: '77b6b86ec8180be67198551fdb85c005ff839e1d', class: "co-ref-field__labels" }, this.label && (h("label", { key: '19e162c60bff7a5e65744e21027ebf817bea2574', class: "co-ref-field__label" }, this.labelIcon && (h("co-icon", { key: '966f91705e5f5969361f86f9ef1ef613f458c610', class: "co-ref-field__label-icon", name: this.labelIcon, size: 16 })), this.label, h(RequiredMark, { key: 'b40e66babe9ebc1a812d429ec44711867817a35e', required: this.required }))), this.secondaryLabel && (h("span", { key: '59e005803c24da33bf561e861464128d6a19b0d5', class: "co-ref-field__secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: 'b436e6ba857fd059dd15df3c83e9e321eceda17e', open: this.isOpen, placement: "bottom-start", matchWidth: !this.panelWidth, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'c13bb059934db87074ece6e42fb9913f69e4b81c', slot: "trigger" }, this.renderTrigger()), this.isOpen && this.renderPanel()), this.helperText && (h("div", { key: 'e58d1a42f44382f1c1be244d69a89851f32aad85', class: `co-ref-field__helper co-ref-field__helper--${this.status}` }, this.status !== 'default' && (h("co-icon", { key: '95544a78586c34901e3480f9c9b9c0f872362c12', name: this.status === 'error' ? 'warning-circle' : this.status === 'success' ? 'check-circle' : 'info', size: 14 })), h("span", { key: 'e536f2971bd27a87c5785ba7e950c29bd22bfeda' }, this.helperText)))));
+        return (h("div", { key: 'fad34cd2f0ec9272285f3e6a9f97000b96d18e6d', class: "co-ref-field" }, (this.label || this.secondaryLabel) && (h("div", { key: '9f58fb3ad9dbf3d367641ab8f6346a74b377d42a', class: "co-ref-field__labels" }, this.label && (h("label", { key: '7960d2be8de225ef03283aac808c667c505884dd', class: "co-ref-field__label" }, this.labelIcon && (h("co-icon", { key: '5171afeb59ca8cf75ccf4a18b0390d23972a73a9', class: "co-ref-field__label-icon", name: this.labelIcon, size: 16 })), this.label, h(RequiredMark, { key: '88eb7972e30150185ef563eecce2fb57f97a1eb3', required: this.required }))), this.secondaryLabel && (h("span", { key: '8751906f899790cead37c9e28d5015e1fa58a801', class: "co-ref-field__secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: 'b7953165b080b55ef0d95cad89849b30e2c27bfe', open: this.isOpen, placement: "bottom-start", matchWidth: !this.panelWidth, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '07d22fe2182afa3899abb14845fbf0069cbd8b6f', slot: "trigger" }, this.renderTrigger()), this.isOpen && this.renderPanel()), this.helperText && (h("div", { key: '8842f7aecf18c770ceee88c368f3b50803178a6a', class: `co-ref-field__helper co-ref-field__helper--${this.status}` }, this.status !== 'default' && (h("co-icon", { key: '88925d75dad7a8853febedeeab60d5a83914396e', name: this.status === 'error' ? 'warning-circle' : this.status === 'success' ? 'check-circle' : 'info', size: 14 })), h("span", { key: '14577358ff94a20cb6ba9d91ab64388e48501632' }, this.helperText)))));
     }
     static get is() { return "co-ref-field"; }
     static get encapsulation() { return "shadow"; }
@@ -698,7 +705,7 @@ export class CoRefField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Shows a pencil button on the single-value trigger that emits\n`coEditSelected` with the selected record id. The host owns policy\n(permissions, what opens) \u2014 the component only paints and emits."
+                    "text": "Shows a pencil button on the single-value trigger (and on each chip when\n`multiple`) that emits `coEditSelected` with that record's id. The host owns policy\n(permissions, what opens) \u2014 the component only paints and emits."
                 },
                 "getter": false,
                 "setter": false,
@@ -1349,7 +1356,7 @@ export class CoRefField {
                     "references": {
                         "RefFieldOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-ref-field/co-ref-field.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-ref-field/co-ref-field.tsx",
                             "id": "src/components/co-ref-field/co-ref-field.tsx::RefFieldOption"
                         }
                     }
@@ -1490,7 +1497,7 @@ export class CoRefField {
                     "references": {
                         "RefFieldOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-ref-field/co-ref-field.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-ref-field/co-ref-field.tsx",
                             "id": "src/components/co-ref-field/co-ref-field.tsx::RefFieldOption"
                         }
                     }
@@ -1511,7 +1518,7 @@ export class CoRefField {
                     "references": {
                         "RefFieldOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-ref-field/co-ref-field.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-ref-field/co-ref-field.tsx",
                             "id": "src/components/co-ref-field/co-ref-field.tsx::RefFieldOption"
                         }
                     }
@@ -1550,7 +1557,7 @@ export class CoRefField {
                         },
                         "RefFieldOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-ref-field/co-ref-field.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-ref-field/co-ref-field.tsx",
                             "id": "src/components/co-ref-field/co-ref-field.tsx::RefFieldOption"
                         }
                     },

package/dist/collection/components/co-rich-text-editor/co-rich-text-editor.css

@@ -78,8 +78,11 @@ co-rich-text-editor {
   box-shadow: 0 0 0 3px var(--co-semantic-border-focus-ring, rgba(37, 99, 235, 0.15));
 }
 
+/* Borde de error de CAMPO por --co-semantic-border-error: gira con el tema (status-error es
+   relleno fijo y como trazo en oscuro daba 2,94:1). En claro vale status-error (idéntico).
+   Fallback: la primitiva de hoy, hasta publicar tokens. */
 .co-rich-text-editor--error .co-rich-text-editor__frame {
-  border-color: var(--co-color-status-error);
+  border-color: var(--co-semantic-border-error, var(--co-color-status-error));
 }
 .co-rich-text-editor--success .co-rich-text-editor__frame {
   border-color: var(--co-color-status-success);
@@ -433,8 +436,10 @@ co-rich-text-editor {
   color: var(--co-semantic-text-secondary);
   font-size: var(--co-font-size-12, 12px);
 }
-.co-rich-text-editor__helper--error { color: var(--co-color-status-error); }
-.co-rich-text-editor__helper--success { color: var(--co-color-status-success); }
+/* Tinta de estado por --co-semantic-text-*: gira con el tema (status-* es relleno, no se
+   aclara, y como texto en oscuro daba <4,5). Fallback a la primitiva hasta publicar tokens. */
+.co-rich-text-editor__helper--error { color: var(--co-semantic-text-error, var(--co-color-status-error)); }
+.co-rich-text-editor__helper--success { color: var(--co-semantic-text-success, var(--co-color-status-success)); }
 
 .co-rich-text-editor__count {
   margin-left: auto;
@@ -1042,7 +1047,7 @@ co-rich-text-editor {
 }
 
 .co-rte-bubble__overflow-item--danger {
-  color: var(--co-color-status-error, #aa2e1b);
+  color: var(--co-semantic-text-error, var(--co-color-status-error, #aa2e1b));
 }
 .co-rte-bubble__overflow-item--danger:hover {
   background: rgba(170, 46, 27, 0.06);
@@ -1384,3 +1389,20 @@ co-rich-text-editor {
   outline: none !important;
 }
 
+
+/* Marca de requerido: la misma de todos los campos co-* (utils/requiredMark). */
+.co-field-required {
+  margin-left: 2px;
+  color: var(--co-semantic-text-error, var(--co-color-status-error));
+}
+
+.co-field-required__caption {
+  margin-left: 4px;
+  color: var(--co-semantic-text-muted);
+  font-size: var(--co-font-size-12);
+  font-weight: 400;
+}
+
+.co-field-required__caption::before {
+  content: var(--co-field-required-text, ' (required)');
+}

package/dist/collection/components/co-rich-text-editor/co-rich-text-editor.js

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import * as RichText from "@prolibu-suite/cobalt-rich-text";
 import { getRichTextStrings } from "../../utils/richTextI18n";
 import { applyExternalValue, buildOutput, EchoGuard, parseEditorValue, parseFeatures, syncImageLayouts, syncToolbarEditor } from "../../utils/rich-text-host";
+import { RequiredMark } from "../../utils/requiredMark";
 /**
  * Rich text editor backed by Tiptap v3.
  *
@@ -85,6 +86,16 @@ export class CoRichTextEditor {
         this.applyingExternal = false;
         this.rt = RichText;
         this.imgLayoutVisible = false;
+        /** `componentDidLoad` ya corrió: desde acá un `connectedCallback` es una RE-conexión. */
+        this.loaded = false;
+        this.onToolbarMousedown = () => {
+            this.closeBubbleDropdowns();
+        };
+        this.onToolbarPopoverChange = (e) => {
+            var _a;
+            const open = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.open;
+            this.suppressBubble(!!open);
+        };
         this.handleUpdate = (editor) => {
             this.refreshCharCount();
             if (this.applyingExternal)
@@ -119,20 +130,38 @@ export class CoRichTextEditor {
             }, 100);
         };
     }
+    connectedCallback() {
+        // El host volvió al documento DESPUÉS de un teardown (estuvo fuera más de un
+        // tick). `componentDidLoad` no vuelve a correr: sin esto el editor quedaba
+        // muerto y `getEditorInstance()` devolvía null.
+        if (this.loaded && !this.editor)
+            this.mountEditor();
+    }
     async componentDidLoad() {
+        this.mountEditor();
+        this.loaded = true;
+    }
+    /** Crea el editor Tiptap sobre `contentEl`. Corre en la carga y al reconectar. */
+    mountEditor() {
         var _a, _b;
         if (!this.contentEl)
             return;
+        const remount = this.loaded;
         // Create bubble element imperatively so Stencil VDOM cannot interfere
         // with BubbleMenu's DOM management (it calls element.remove/appendChild).
         const showToolbar = this.resolvedToolbar !== 'none' && !this.readonly && !this.disabled;
         if (showToolbar) {
             this.bubbleEl = this.createBubbleElement();
         }
+        // Al recrear, la instantánea del teardown (lo tipeado, que el padre puede no
+        // haber devuelto por `value`) gana; un `value` nuevo mientras tanto la borra.
+        const fromValue = this.detachedContent === undefined;
+        const content = fromValue ? parseEditorValue(this.value) : this.detachedContent;
+        this.detachedContent = undefined;
         this.editor = this.rt.createEditor({
             preset: this.preset,
             element: this.contentEl,
-            content: parseEditorValue(this.value),
+            content,
             editable: !this.disabled && !this.readonly,
             placeholder: this.placeholder,
             maxLength: this.maxLength,
@@ -172,32 +201,47 @@ export class CoRichTextEditor {
             this.updateImageLayoutBar();
         });
         // Clicking the toolbar closes bubble popups (link form, panels, etc.)
+        // Handlers con referencia estable: al recrear el editor, el mismo
+        // addEventListener sobre el mismo toolbar es un no-op (no se duplican).
         if (this.bubbleEl && this.toolbarEl) {
-            this.toolbarEl.addEventListener('mousedown', () => {
-                this.closeBubbleDropdowns();
-            });
+            this.toolbarEl.addEventListener('mousedown', this.onToolbarMousedown);
             // Hide the selection bubble while a toolbar dropdown/popover is open so
             // the two never overlap in the same space (the bubble lives inside the
             // content area, right where toolbar dropdowns expand into).
-            this.toolbarEl.addEventListener('coPopoverChange', (e) => {
-                var _a;
-                const open = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.open;
-                this.suppressBubble(!!open);
-            });
+            this.toolbarEl.addEventListener('coPopoverChange', this.onToolbarPopoverChange);
         }
-        this.echo.seed((_b = this.value) !== null && _b !== void 0 ? _b : null);
+        // Recreado desde la instantánea: el guard anti-eco conserva el último output
+        // emitido (re-sembrarlo con `value` haría que un eco tardío del padre
+        // re-aplicara el contenido). Desde `value` (carga o valor nuevo), se siembra.
+        if (fromValue)
+            this.echo.seed((_b = this.value) !== null && _b !== void 0 ? _b : null);
         this.ready = true;
         this.refreshCharCount();
         this.syncToolbar();
         this.coReady.emit();
-        if (this.autofocus)
+        if (this.autofocus && !remount)
             this.editor.commands.focus();
         // Tag every image container with its layout mode so the CSS rules apply.
         // Runs even without the layout toolbar (readonly/disabled viewers).
         requestAnimationFrame(() => this.syncImageLayouts());
     }
     disconnectedCallback() {
-        var _a, _b, _c, _d;
+        // Un MOVIMIENTO del host (quitar + insertar en el mismo tick: el drawer que
+        // pasa de plano a split mueve el scrollport) también dispara este callback.
+        // Destruir en el acto dejaba el editor muerto. El teardown se difiere un
+        // microtask y solo corre si el host sigue fuera del documento; si volvió
+        // más tarde, `connectedCallback` lo recrea.
+        queueMicrotask(() => {
+            // Sin `window` el realm ya se desmontó (fin del entorno de pruebas): no hay nada que
+            // liberar y el `destroy()` de Tiptap reventaría leyendo `window`.
+            if (typeof window === 'undefined')
+                return;
+            if (!this.el.isConnected)
+                this.teardownEditor();
+        });
+    }
+    teardownEditor() {
+        var _a, _b, _c;
         clearTimeout(this.blurTimeout);
         clearTimeout(this.bubbleLockTimer);
         (_a = this.bubbleStyleObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
@@ -207,10 +251,17 @@ export class CoRichTextEditor {
             document.removeEventListener('mouseup', this.bubbleDragEndHandler);
         if (this.bubbleOutsideClickHandler)
             document.removeEventListener('click', this.bubbleOutsideClickHandler, true);
-        (_b = this.editor) === null || _b === void 0 ? void 0 : _b.destroy();
+        if (this.editor) {
+            // Instantánea de lo tipeado para recrear igual si el host vuelve.
+            this.detachedContent = this.editor.isEmpty ? null : this.editor.getJSON();
+            this.editor.destroy();
+        }
         this.editor = undefined;
-        (_c = this.bubbleEl) === null || _c === void 0 ? void 0 : _c.remove();
-        (_d = this.imgLayoutEl) === null || _d === void 0 ? void 0 : _d.remove();
+        (_b = this.bubbleEl) === null || _b === void 0 ? void 0 : _b.remove();
+        this.bubbleEl = undefined;
+        (_c = this.imgLayoutEl) === null || _c === void 0 ? void 0 : _c.remove();
+        this.imgLayoutEl = undefined;
+        this.imgLayoutVisible = false;
     }
     componentDidRender() {
         this.syncToolbar();
@@ -224,7 +275,13 @@ export class CoRichTextEditor {
         }
     }
     onValueChange(next) {
-        if (!this.editor || this.applyingExternal)
+        // Sin editor tras un teardown: el valor nuevo gana sobre la instantánea al recrear.
+        if (!this.editor) {
+            if (this.loaded)
+                this.detachedContent = undefined;
+            return;
+        }
+        if (this.applyingExternal)
             return;
         const incoming = next !== null && next !== void 0 ? next : null;
         // El padre suele devolver nuestro propio output (JSON o HTML): re-aplicarlo
@@ -2007,11 +2064,11 @@ export class CoRichTextEditor {
         const showToolbar = this.resolvedToolbar !== 'none' && !this.readonly && !this.disabled;
         const showCount = this.showCharacterCount || this.maxLength != null;
         const bottom = this.toolbarPosition === 'bottom';
-        const toolbar = showToolbar && (h("co-rich-text-toolbar", { key: '6bcb6ab2d8023c96062ce4aa64ef6450357c22e7', class: "co-rich-text-editor__toolbar", part: "toolbar", variant: this.resolvedToolbar, position: this.toolbarPosition, disabled: this.disabled || this.readonly, locale: this.locale, attachmentsEnabled: this.attachmentsEnabled, attachmentAccept: this.attachmentAccept, onCoAttachmentsSelected: (e) => {
+        const toolbar = showToolbar && (h("co-rich-text-toolbar", { key: '7b2112db75bb679695e9bb58385d193e90d3678b', class: "co-rich-text-editor__toolbar", part: "toolbar", variant: this.resolvedToolbar, position: this.toolbarPosition, disabled: this.disabled || this.readonly, locale: this.locale, attachmentsEnabled: this.attachmentsEnabled, attachmentAccept: this.attachmentAccept, onCoAttachmentsSelected: (e) => {
                 e.stopPropagation();
                 this.coAttachmentsSelected.emit(e.detail);
             }, ref: (el) => (this.toolbarEl = el) }));
-        return (h("div", { key: 'acb670aca986206aa8cae2960a9ace5723d5b710', class: {
+        return (h("div", { key: '8b848da977b08aa7f3466fa14403155ddc1c1d66', class: {
                 'co-rich-text-editor': true,
                 'co-rich-text-editor--focused': this.hasFocus,
                 'co-rich-text-editor--disabled': this.disabled,
@@ -2020,7 +2077,7 @@ export class CoRichTextEditor {
                 [`co-rich-text-editor--${this.status}`]: this.status !== 'default',
                 'co-rich-text-editor--flat': this.variant === 'flat',
                 'co-rich-text-editor--toolbar-bottom': bottom,
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '0bbda76dde378f9f9dc49593409036efa0306982', class: "co-rich-text-editor__labels" }, this.label && h("label", { key: '328d770182eeba4010337e32359f6e1f96c32e54', class: "co-rich-text-editor__label", part: "label" }, this.label), this.secondaryLabel && (h("span", { key: 'd8b3ac25a32189686226b9fe6da311f6672ca331', class: "co-rich-text-editor__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'ed9d88e6e62a3defe9f302d252eb7f8dd33d4a0a', class: "co-rich-text-editor__frame" }, !bottom && toolbar, h("div", { key: '96625d0fbbc619e7a7f7812c83d1e86df8086da4', class: "co-rich-text-editor__box" }, h("div", { key: '77ce10f2902b9e758c18dabd5e91c5544c0cdd54', class: "co-rte-content", part: "content", role: "textbox", "aria-multiline": "true", "aria-label": this.label, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.status === 'error' ? 'true' : undefined, ref: (el) => (this.contentEl = el) })), h("slot", { key: '6c2fbaa3625889c4bb6a493be037f4c64b60fece', name: "content-end" }), bottom && (h("div", { key: 'eda6a58e138c36dc412a84aa995dfcbfd6d7e93f', class: "co-rich-text-editor__toolbar-row", part: "toolbar-row" }, toolbar, h("slot", { key: 'f8b01d2d2b27851d474bb174e4e42b45efd96758', name: "toolbar-end" })))), h("div", { key: 'fdffcf44d4d181d30cc6f48e073e3a18c18f48ca', class: "co-rich-text-editor__footer" }, this.helperText && (h("div", { key: '52ab70e42dad525b1fc1c4c27bdb98bedaf5cd90', class: `co-rich-text-editor__helper co-rich-text-editor__helper--${this.status}`, part: "helper" }, h("co-icon", { key: 'c7e79a0292c51c9cf7927eb504401be5fd68b767', name: this.helperIcon, size: 14 }), h("span", { key: '4a09b04c257f3cd605f9b753d12c118312cb65fc' }, this.helperText))), showCount && (h("span", { key: '7c25580b095af4d0ef11e77d13b07cedbf3e61c4', class: "co-rich-text-editor__count", ref: (el) => (this.charCountEl = el) }, this.charCount, this.maxLength != null ? ` / ${this.maxLength}` : '')))));
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: 'f35d59f312dabcd2b384e958a45bb7ac4a33f7bb', class: "co-rich-text-editor__labels" }, this.label && h("label", { key: 'e7b2d47de7356e4a89fabf925255dbf0d25fc8e9', class: "co-rich-text-editor__label", part: "label" }, this.label, h(RequiredMark, { key: 'f56500b0382d9d12c7f78b4448aab7cc748271be', required: this.required })), this.secondaryLabel && (h("span", { key: 'e305aecd4fee9963221210ac076791f456aad91c', class: "co-rich-text-editor__secondary-label" }, this.secondaryLabel)))), h("div", { key: '284ff5c06606efef9a06de80478acc57868229eb', class: "co-rich-text-editor__frame" }, !bottom && toolbar, h("div", { key: '145b244c505ae5374bd847855978da02baa878cc', class: "co-rich-text-editor__box" }, h("div", { key: 'c5f02991df3e712a3e6a0163415a75c5e91e4384', class: "co-rte-content", part: "content", role: "textbox", "aria-multiline": "true", "aria-label": this.label, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.status === 'error' ? 'true' : undefined, ref: (el) => (this.contentEl = el) })), h("slot", { key: '060e3e5bcda76b403357ada26950c9f50a71076e', name: "content-end" }), bottom && (h("div", { key: '2ec4329cfc09714a78caab5ca774f08af2984729', class: "co-rich-text-editor__toolbar-row", part: "toolbar-row" }, toolbar, h("slot", { key: '806f94a2d924df1b33d5fcf5d28279b093f69845', name: "toolbar-end" })))), h("div", { key: '8fcb92d7f3404c7458f95fc578fbb579ecb4b5e7', class: "co-rich-text-editor__footer" }, this.helperText && (h("div", { key: 'b1b664ceb090e940cadc3aa782eb074e6517146a', class: `co-rich-text-editor__helper co-rich-text-editor__helper--${this.status}`, part: "helper" }, h("co-icon", { key: 'a8db33f94d1aec0bc62bd9ee709d4cff914fc51c', name: this.helperIcon, size: 14 }), h("span", { key: 'be99a15b919ea82668da83854735b80eaf03ebf7' }, this.helperText))), showCount && (h("span", { key: 'dfde31e7c4f62fc9cf9fc3654f5eb6a2377dcf9a', class: "co-rich-text-editor__count", ref: (el) => (this.charCountEl = el) }, this.charCount, this.maxLength != null ? ` / ${this.maxLength}` : '')))));
     }
     static get is() { return "co-rich-text-editor"; }
     static get originalStyleUrls() {
@@ -2671,7 +2728,7 @@ export class CoRichTextEditor {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted once the editor is mounted and ready."
+                    "text": "Emitted once the editor is mounted and ready. Se RE-emite si el editor se\nrecrea al reconectar el host tras un teardown: quien guarde la instancia de\n`getEditorInstance()` debe volver a pedirla en cada `coReady`."
                 },
                 "complexType": {
                     "original": "void",

package/dist/collection/components/co-rich-text-toolbar/co-rich-text-toolbar.css

@@ -227,8 +227,10 @@
   color: #fff;
 }
 
+/* Tinta de estado por --co-semantic-text-*: gira con el tema (status-* es relleno, no se
+   aclara, y como texto en oscuro daba <4,5). Fallback a la primitiva hasta publicar tokens. */
 .co-rich-text-toolbar__popover-btn--danger {
-  color: var(--co-color-status-error, #aa2e1b);
+  color: var(--co-semantic-text-error, var(--co-color-status-error, #aa2e1b));
   border-color: var(--co-color-status-error, #aa2e1b);
 }
 

package/dist/collection/components/co-rich-text-toolbar/co-rich-text-toolbar.js

@@ -1,6 +1,15 @@
 import { h } from "@stencil/core";
 import { toolbarItems, COLOR_PALETTE, TABLE_CONTEXT_ITEMS } from "@prolibu-suite/cobalt-rich-text";
 import { getRichTextStrings } from "../../utils/richTextI18n";
+import { panelShiftX, visibleArea } from "./panelFit";
+/** Paneles que cuelgan de un botón (ver co-rich-text-toolbar.css): los que `fitOpenPanel` encaja. */
+const PANEL_SELECTOR = [
+    '.co-rich-text-toolbar__popover',
+    '.co-rich-text-toolbar__dropdown',
+    '.co-rich-text-toolbar__color-picker',
+    '.co-rich-text-toolbar__table-picker',
+    '.co-rich-text-toolbar__listpicker',
+].join(', ');
 /**
  * Formatting toolbar for co-rich-text-editor. Receives the Tiptap editor
  * instance via the `editor` JS property, runs commands, and reflects active
@@ -384,6 +393,37 @@ export class CoRichTextToolbar {
             return;
         this.coPopoverChange.emit({ open: !!next });
     }
+    componentDidRender() {
+        this.fitOpenPanel();
+    }
+    /**
+     * Corre el panel abierto hacia la izquierda si se sale del área VISIBLE
+     * (viewport ∩ ancestros que recortan, ver panelFit.ts). Los paneles anclan a
+     * `left:0` de su botón por CSS: en una columna angosta (inspector del
+     * cotizador) el de link/listas se cortaba y el contenedor ganaba scroll-x.
+     * Se mide tras cada render con el panel abierto (su contenido cambia: menú →
+     * URL de la imagen), reseteando antes el corrimiento anterior.
+     */
+    fitOpenPanel() {
+        var _a;
+        if (!this.openPopover || typeof window === 'undefined')
+            return;
+        const panels = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(PANEL_SELECTOR);
+        if (!(panels === null || panels === void 0 ? void 0 : panels.length))
+            return;
+        const viewport = document.documentElement.clientWidth || window.innerWidth; // sin la scrollbar de la página
+        const area = visibleArea(this.el, viewport, (node) => getComputedStyle(node).overflowX);
+        panels.forEach((panel) => {
+            panel.style.translate = '';
+            const box = panel.getBoundingClientRect();
+            if (!box.width)
+                return;
+            const scale = panel.offsetWidth ? box.width / panel.offsetWidth || 1 : 1;
+            const dx = panelShiftX(box, area);
+            if (dx)
+                panel.style.translate = `${dx / scale}px 0`;
+        });
+    }
     disconnectedCallback() {
         var _a;
         (_a = this.editor) === null || _a === void 0 ? void 0 : _a.off('transaction', this.onTransaction);