@prolibu-suite/cobalt-core 0.10.0 → 0.10.2

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

@@ -17,15 +17,15 @@ export class CoRadio {
         };
     }
     render() {
-        return (h("div", { key: '4d3635f594d87efe5dbfee2dae2c57dd359c79f8', class: {
+        return (h("div", { key: '59335ec237efb379852efc4fabcb7cbb37632a1e', class: {
                 'co-radio-row': true,
                 'co-radio-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("button", { key: '8e438682bc870404be748acba71589ab87f63dec', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, h("button", { key: 'dc726deac041e9df4cb34f60a473350426ed2cbc', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
                 'co-radio': true,
                 [`co-radio--${this.size}`]: true,
                 'co-radio--checked': this.checked,
                 'co-radio--disabled': this.disabled,
-            }, disabled: this.disabled, part: "circle" }), this.label && (h("span", { key: '17668c66e61b664e3b49a2acd230b99b2cf8409b', class: "co-radio__label", part: "label" }, this.label))));
+            }, disabled: this.disabled, part: "circle" }), this.label && (h("span", { key: 'bf2602521d20f806283884ba3ebbab4ff4ef0c70', class: "co-radio__label", part: "label" }, this.label))));
     }
     static get is() { return "co-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -219,7 +219,7 @@ export class CoRadioGroup {
                     "references": {
                         "RadioOption": {
                             "location": "local",
-                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-radio-group/co-radio-group.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-18/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.js

@@ -36,16 +36,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: '3e6bb945a46ad896a07d2588c6a4d969bce3dfcf', class: {
+        return (h("div", { key: 'a825b7cf49067c0a12ccddb81554c172d90a888f', class: {
                 'co-rating': true,
                 'co-rating--disabled': this.disabled,
                 'co-rating--readonly': this.readOnly,
                 [`co-rating--${this.size}`]: true,
-            } }, this.label && h("label", { key: 'ef9971e3314eb4f270c35b94d2a85f25b8861b68', class: "co-rating__label" }, this.label), h("div", { key: 'b1c3997ec8a3a8950e24ef97af571d5db7283b50', class: "co-rating__stars", onMouseLeave: this.handleMouseLeave }, stars.map(star => (h("button", { class: {
+            } }, this.label && h("label", { key: '354b3b676401d0265e5f64aed1b137b97a147468', class: "co-rating__label" }, this.label), h("div", { key: '29c8af2cde2482ac803e75025dc5533c7051c2ff', 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: '523e14b17fceb0f52f77cd1e9b4053fdd25dffba', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'ae894de5a6c390837c511364b5e8b7ba8a8123f1', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), h("span", { key: '23d04a20799d6b15693c7eb119922e5584031373', 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: '0fcc95b7e125f1ef57c67ed9e46d4511da5d3eaa', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'c9cb1f60e902c0b52a45225bedacd92ba08ae0b4', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), h("span", { key: '8a5479175de97fccb5947f2f8f2c87888481b104', 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

@@ -163,6 +163,46 @@
   text-overflow: ellipsis;
 }
 
+/* Valor heredado (inheritedLabel): lo que aplica por defecto con el campo
+   vacío. Se lee como contenido (text-secondary), no como hint (muted), y va
+   con un chip outlined opcional (inheritedBadgeLabel) que cabe en el trigger
+   md de 40px (22px = alto del contenido). */
+/* El host block del co-tooltip es el ítem flex: min-width:0 acá y display:block
+   en el span son lo que deja truncar (un inline dentro del trigger no trunca). */
+.co-ref-field__inherited-tip {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.co-ref-field__inherited {
+  display: block;
+  color: var(--co-semantic-text-secondary);
+  font-size: inherit;
+  font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.co-ref-field__inherited-badge {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 22px;
+  padding: 0 var(--co-spacing-sm2);
+  /* Escapes temáticos como el resto del trigger (--co-ref-field-trigger-*):
+     sobre una isla oscura en tema light, border-default (negro 16%) desaparece. */
+  border: 1px solid var(--co-ref-field-inherited-badge-border, var(--co-semantic-border-default));
+  border-radius: var(--co-border-radius-full);
+  color: var(--co-ref-field-inherited-badge-color, var(--co-semantic-text-secondary));
+  font-size: var(--co-font-size-12);
+  font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
+}
+
 .co-ref-field__caret {
   flex-shrink: 0;
   color: var(--co-semantic-text-muted);

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

@@ -79,6 +79,15 @@ export class CoRefField {
         this.triggerBadgeIcon = '';
         /** Accessible name / tooltip for the trigger badge. */
         this.triggerBadgeLabel = '';
+        /**
+         * Valor HEREDADO: texto que se pinta cuando NO hay valor, en lugar del
+         * placeholder, para mostrar lo que aplica por defecto (p. ej. el layout
+         * predeterminado del workspace en Deal.proposal.template.layout). No es un
+         * valor: `value` sigue vacío y no hay ×. Vacío = placeholder de siempre.
+         */
+        this.inheritedLabel = '';
+        /** Chip outlined junto al valor heredado (p. ej. 'Predeterminado'). Solo con inheritedLabel. */
+        this.inheritedBadgeLabel = '';
         /**
          * Shape of the leading avatar (selected value + option rows). Defaults to
          * 'circle' (people refs); use 'square' for company/workspace refs — it renders
@@ -89,11 +98,21 @@ export class CoRefField {
         this.pinnable = false;
         /** Drag-reorder de la lista del panel (forward a co-option-list). */
         this.listReorderable = false;
+        /** Tooltip del valor heredado: co-tooltip lee `disabled` en el mouseenter
+         *  (scheduleShow), así que el truncado se mide ANTES del hover — al montar /
+         *  redimensionar el span (RO propio: el de los chips hace disconnect() por
+         *  render) y al cambiar el texto — nunca en el hover mismo. */
+        this.inheritedTruncated = false;
         this.isOpen = false;
         /** How many trailing chips don't fit the trigger width (responsive mode). */
         this.overflowCount = 0;
         this.lastChipsKey = '\x00';
         this.pendingFocus = false;
+        /** El host proyecta su PROPIO panel (`<div slot="panel">`: galería, grid…)
+         *  en lugar de la co-option-list. Se detecta al ABRIR — los hijos light-DOM
+         *  ya existen y el panel se monta on-demand — y el host cierra/selecciona
+         *  vía los métodos `selectOption`/`closePanel`. El footer se conserva. */
+        this.hasPanelSlot = false;
         // ── Popover event handlers ─────────────────────────────────
         this.handlePopoverOpen = () => {
             this.isOpen = true;
@@ -101,6 +120,28 @@ export class CoRefField {
         this.handlePopoverClose = () => {
             this.isOpen = false;
         };
+        this.measureInherited = () => {
+            const el = this.inheritedEl;
+            const truncated = el ? el.scrollWidth > el.clientWidth + 1 : false;
+            if (truncated !== this.inheritedTruncated)
+                this.inheritedTruncated = truncated;
+        };
+        // Stencil llama el ref con null al desmontar (nullifyVNodeRefs): observar /
+        // des-observar en el mismo lugar. observe() dispara una notificación inicial
+        // → primera medición sin hover previo.
+        this.setInheritedEl = (el) => {
+            var _a, _b;
+            const next = el || undefined;
+            if (next === this.inheritedEl)
+                return;
+            if (this.inheritedEl)
+                (_a = this.inheritedResizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.inheritedEl);
+            this.inheritedEl = next;
+            if (next)
+                (_b = this.inheritedResizeObserver) === null || _b === void 0 ? void 0 : _b.observe(next);
+            else if (this.inheritedTruncated)
+                this.inheritedTruncated = false;
+        };
         this.handleTriggerClick = (e) => {
             if (this.disabled)
                 e.stopPropagation();
@@ -259,6 +300,11 @@ export class CoRefField {
         // Responsive chips: refit on any trigger width change (same pattern as
         // co-combobox).
         this.resizeObserver = new ResizeObserver(() => this.calcOverflow());
+        this.inheritedResizeObserver = new ResizeObserver(() => this.measureInherited());
+        // Reconexión del host: el observer es nuevo pero el span ya está montado y
+        // el ref no vuelve a llamarse (mismo elemento) → re-observar acá.
+        if (this.inheritedEl)
+            this.inheritedResizeObserver.observe(this.inheritedEl);
     }
     componentDidRender() {
         var _a, _b, _c, _d;
@@ -287,8 +333,9 @@ export class CoRefField {
         }
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.inheritedResizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     }
     /**
      * Counts how many trailing chips overflow the single-line chips wrapper
@@ -324,6 +371,7 @@ export class CoRefField {
     // ── Watchers ───────────────────────────────────────────────
     onOpenChange(isOpen) {
         if (isOpen) {
+            this.hasPanelSlot = !!this.el.querySelector(':scope > [slot="panel"]');
             this.coOpen.emit();
             // The panel is mounted on-demand: co-option-list takes its selected-first
             // snapshot in componentWillLoad on every open; we only need to focus the
@@ -338,6 +386,12 @@ export class CoRefField {
             this.restoreTriggerFocus();
         }
     }
+    // ── Valor heredado: medición del truncado (drives co-tooltip `disabled`) ──
+    onInheritedLabelChange() {
+        // El span no cambia de caja al cambiar el texto (overflow:hidden) → el RO
+        // no dispara: medir tras el render.
+        requestAnimationFrame(this.measureInherited);
+    }
     /** Devuelve el foco al trigger al cerrar el panel (Escape, selección),
      *  salvo que el cierre venga de un click-outside que ya movió el foco a
      *  otro elemento — en ese caso no robarlo. */
@@ -348,6 +402,25 @@ export class CoRefField {
             (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }
+    /** Selección desde un panel proyectado (slot `panel`): mismo contrato que un
+     *  click en la co-option-list — actualiza `value`, emite `coChange` con
+     *  `{ value, item }` y cierra en single. */
+    async selectOption(option) {
+        this.handleOptionClick(option);
+    }
+    /** Cierra el panel (Escape/Enter manejados por un panel proyectado). */
+    async closePanel() {
+        this.isOpen = false;
+    }
+    /** Abre el panel. Espejo de `closePanel` para un panel proyectado que se
+     *  cierra a sí mismo (p.ej. para mostrar un modal — un click dentro de un
+     *  co-modal cuenta como click-outside del popover) y quiere volver a abrirse
+     *  después. No-op si está disabled, igual que el trigger. */
+    async openPanel() {
+        if (this.disabled)
+            return;
+        this.isOpen = true;
+    }
     // ── Render helpers ─────────────────────────────────────────
     renderTrigger() {
         const selected = this.effectiveDisplayItems;
@@ -359,7 +432,7 @@ export class CoRefField {
                 [`co-ref-field--${this.normalizedSize}`]: true,
                 [`co-ref-field--${this.status}`]: this.status !== 'default',
                 'co-ref-field--flat': this.variant === 'flat',
-            }, role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-label": this.label || undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-controls": this.isOpen ? CoRefField.LIST_ID : undefined, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.iconLeft && (h("span", { class: "co-ref-field__icon" }, h("co-icon", { name: this.iconLeft, size: 16 }))), h("div", { class: "co-ref-field__value" }, !hasValue && h("span", { class: "co-ref-field__placeholder", part: "trigger-placeholder" }, this.placeholder), hasValue && !this.multiple && this.renderSingleValue(selected[0]), hasValue && this.multiple && this.renderMultipleValue(selected)), hasValue && this.triggerBadgeIcon && (h("span", { class: "co-ref-field__trigger-badge", part: "trigger-badge", role: "img", title: this.triggerBadgeLabel || undefined, "aria-label": this.triggerBadgeLabel || undefined }, h("co-icon", { name: this.triggerBadgeIcon, size: 11, weight: "fill" }))), hasValue && !this.multiple && this.editable && !this.disabled && (h("button", { class: "co-ref-field__edit", part: "trigger-edit", tabIndex: -1, onClick: this.handleEditClick, type: "button", title: this.editLabel || undefined, "aria-label": this.editLabel || undefined }, h("co-icon", { name: "pencil-simple", size: 14 }))), hasValue && this.clearable && !this.disabled && (h("button", { class: "co-ref-field__clear", part: "trigger-clear", tabIndex: -1, onClick: this.handleClear, type: "button" }, h("co-icon", { name: "x", size: 14 }))), h("span", { class: "co-ref-field__caret", part: "trigger-chevron" }, h("co-icon", { name: "caret-up-down", size: 16 }))));
+            }, role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-label": this.label || undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-controls": this.isOpen ? CoRefField.LIST_ID : undefined, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.iconLeft && (h("span", { class: "co-ref-field__icon" }, h("co-icon", { name: this.iconLeft, size: 16 }))), h("div", { class: "co-ref-field__value" }, !hasValue && this.inheritedLabel && (h("co-tooltip", { block: true, class: "co-ref-field__inherited-tip", content: this.inheritedLabel, placement: "top", disabled: !this.inheritedTruncated }, h("span", { class: "co-ref-field__inherited", part: "trigger-inherited", ref: this.setInheritedEl }, this.inheritedLabel))), !hasValue && !this.inheritedLabel && (h("span", { class: "co-ref-field__placeholder", part: "trigger-placeholder" }, this.placeholder)), hasValue && !this.multiple && this.renderSingleValue(selected[0]), hasValue && this.multiple && this.renderMultipleValue(selected)), !hasValue && this.inheritedLabel && this.inheritedBadgeLabel && (h("span", { class: "co-ref-field__inherited-badge", part: "trigger-inherited-badge" }, this.inheritedBadgeLabel)), hasValue && this.triggerBadgeIcon && (h("span", { class: "co-ref-field__trigger-badge", part: "trigger-badge", role: "img", title: this.triggerBadgeLabel || undefined, "aria-label": this.triggerBadgeLabel || undefined }, h("co-icon", { name: this.triggerBadgeIcon, size: 11, weight: "fill" }))), hasValue && !this.multiple && this.editable && !this.disabled && (h("button", { class: "co-ref-field__edit", part: "trigger-edit", tabIndex: -1, onClick: this.handleEditClick, type: "button", title: this.editLabel || undefined, "aria-label": this.editLabel || undefined }, h("co-icon", { name: "pencil-simple", size: 14 }))), hasValue && this.clearable && !this.disabled && (h("button", { class: "co-ref-field__clear", part: "trigger-clear", tabIndex: -1, onClick: this.handleClear, type: "button" }, h("co-icon", { name: "x", size: 14 }))), h("span", { class: "co-ref-field__caret", part: "trigger-chevron" }, h("co-icon", { name: "caret-up-down", size: 16 }))));
     }
     /**
      * Leading visual for a selected value / chip. Prefers a real avatar (image
@@ -408,16 +481,31 @@ export class CoRefField {
                 }, 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));
         })), overflow > 0 && h("span", { class: "co-ref-field__chip-overflow" }, "+", overflow)));
     }
+    /** Botones del footer. `slotted`: dentro de la co-option-list van por su
+     *  slot `footer`; en el panel proyectado se pintan directo bajo el slot. */
+    renderFooter(slotted) {
+        if (!this.showFooter)
+            return null;
+        return (h("div", { class: "co-ref-field__footer", slot: slotted ? 'footer' : undefined }, this.footerSecondaryLabel && (h("button", { class: "co-ref-field__footer-btn co-ref-field__footer-btn--secondary", type: "button", onClick: this.handleFooterSecondary }, h("co-icon", { name: "plus", size: 16 }), h("span", null, this.footerSecondaryLabel))), h("button", { class: "co-ref-field__footer-btn co-ref-field__footer-btn--primary", type: "button", onClick: this.handleFooterPrimary }, h("co-icon", { name: "check", size: 16 }), h("span", null, this.footerPrimaryLabel))));
+    }
     renderPanel() {
-        return (h("div", { class: {
-                'co-ref-field__panel': true,
-                'co-ref-field__panel--dark': this.panelTheme === 'dark',
-                'co-ref-field__panel--light': this.panelTheme === 'light',
-            }, style: this.panelWidth ? { width: this.panelWidth } : undefined }, h("co-option-list", { id: CoRefField.LIST_ID, ref: (el) => (this.optionListEl = el), items: typeof this.options === 'string' ? this.options : JSON.stringify(this.options), value: this.value, selectedItems: typeof this.selectedDisplay === 'string' ? this.selectedDisplay : JSON.stringify(this.selectedDisplay), multiple: this.multiple, selectedFirst: this.multiple, reorderable: this.multiple, pinnable: this.pinnable, listReorderable: this.listReorderable, selectedAffordance: "deselect", searchable: this.searchable, searchPlaceholder: this.searchPlaceholder, searchDebounce: this.searchDebounce, loading: this.loading, total: this.total, emptyMessage: this.emptyMessage, avatarShape: this.avatarShape, onCoSearch: (e) => this.coSearch.emit(e.detail), onCoChange: (e) => this.handleListChange(e.detail), onCoReorder: (e) => this.handleReorder(e.detail), onCoPinToggle: (e) => this.coPinToggle.emit(e.detail), onCoListReorder: (e) => this.coListReorder.emit(e.detail), onCoLoadMore: () => this.coLoadMore.emit() }, h("slot", { name: "panel-footer", slot: "footer" }), this.showFooter && (h("div", { class: "co-ref-field__footer", slot: "footer" }, this.footerSecondaryLabel && (h("button", { class: "co-ref-field__footer-btn co-ref-field__footer-btn--secondary", type: "button", onClick: this.handleFooterSecondary }, h("co-icon", { name: "plus", size: 16 }), h("span", null, this.footerSecondaryLabel))), h("button", { class: "co-ref-field__footer-btn co-ref-field__footer-btn--primary", type: "button", onClick: this.handleFooterPrimary }, h("co-icon", { name: "check", size: 16 }), h("span", null, this.footerPrimaryLabel)))))));
+        const panelClass = {
+            'co-ref-field__panel': true,
+            'co-ref-field__panel--dark': this.panelTheme === 'dark',
+            'co-ref-field__panel--light': this.panelTheme === 'light',
+        };
+        const panelStyle = this.panelWidth ? { width: this.panelWidth } : undefined;
+        if (this.hasPanelSlot) {
+            // Panel del host: la búsqueda, las opciones y su a11y son suyas; acá
+            // quedan el chrome del panel (radius/tema/ancho), el id que el trigger
+            // referencia por aria-controls y el footer compartido.
+            return (h("div", { class: Object.assign(Object.assign({}, panelClass), { 'co-ref-field__panel--custom': true }), id: CoRefField.LIST_ID, style: panelStyle }, h("slot", { name: "panel" }), this.renderFooter(false)));
+        }
+        return (h("div", { class: panelClass, style: panelStyle }, h("co-option-list", { id: CoRefField.LIST_ID, ref: (el) => (this.optionListEl = el), items: typeof this.options === 'string' ? this.options : JSON.stringify(this.options), value: this.value, selectedItems: typeof this.selectedDisplay === 'string' ? this.selectedDisplay : JSON.stringify(this.selectedDisplay), multiple: this.multiple, selectedFirst: this.multiple, reorderable: this.multiple, pinnable: this.pinnable, listReorderable: this.listReorderable, selectedAffordance: "deselect", searchable: this.searchable, searchPlaceholder: this.searchPlaceholder, searchDebounce: this.searchDebounce, loading: this.loading, total: this.total, emptyMessage: this.emptyMessage, avatarShape: this.avatarShape, onCoSearch: (e) => this.coSearch.emit(e.detail), onCoChange: (e) => this.handleListChange(e.detail), onCoReorder: (e) => this.handleReorder(e.detail), onCoPinToggle: (e) => this.coPinToggle.emit(e.detail), onCoListReorder: (e) => this.coListReorder.emit(e.detail), onCoLoadMore: () => this.coLoadMore.emit() }, h("slot", { name: "panel-footer", slot: "footer" }), this.renderFooter(true))));
     }
     // ── Main render ────────────────────────────────────────────
     render() {
-        return (h("div", { key: '8904995ce46d0552556775029316fa42c0d1261e', class: "co-ref-field" }, (this.label || this.secondaryLabel) && (h("div", { key: 'a3b1d77f18f04b0233d5cf9c5b18c484b60d06e4', class: "co-ref-field__labels" }, this.label && (h("label", { key: '837c1f52807a6b258874d4984fdd3aafd48737ed', class: "co-ref-field__label" }, this.labelIcon && (h("co-icon", { key: 'c9e74495eac50df1f9f074f3a25b3be7bcf36d1c', class: "co-ref-field__label-icon", name: this.labelIcon, size: 16 })), this.label, h(RequiredMark, { key: '49a4366d6fc20c7ddbad31d020a1d45ea4134554', required: this.required }))), this.secondaryLabel && (h("span", { key: '4f9dd9e68d79642cfafd16a71e51747599668f9e', class: "co-ref-field__secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: '91ad529d27a62ccbcb8acac7f23cee7ac2ca33ce', open: this.isOpen, placement: "bottom-start", matchWidth: !this.panelWidth, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '809b6f7e0f64ffd7c6151c1fae340114f5887e72', slot: "trigger" }, this.renderTrigger()), this.isOpen && this.renderPanel()), this.helperText && (h("div", { key: '4089f6e3cd993ce620742d619282d12542e87057', class: `co-ref-field__helper co-ref-field__helper--${this.status}` }, this.status !== 'default' && (h("co-icon", { key: '3d9e658ba0cc04034778911930837f1268afeedd', name: this.status === 'error' ? 'warning-circle' : this.status === 'success' ? 'check-circle' : 'info', size: 14 })), h("span", { key: '8c26be0575794b6f8b410f1fd0b71efd715d5324' }, this.helperText)))));
+        return (h("div", { key: 'fa7de667cc9002d1a4a042b0d200524cbcb89b78', class: "co-ref-field" }, (this.label || this.secondaryLabel) && (h("div", { key: 'a6ddd5b71364e4f5bdf63b04faa09bfc0a32f6bc', class: "co-ref-field__labels" }, this.label && (h("label", { key: '766f803c8be77f72e52e4d3cdd7b6d7a363a146a', class: "co-ref-field__label" }, this.labelIcon && (h("co-icon", { key: 'a8b6c7f189af4b9f37de8c3cc96cb489fd9183e4', class: "co-ref-field__label-icon", name: this.labelIcon, size: 16 })), this.label, h(RequiredMark, { key: '643edcb040ef9a91040e8d52f628bc0af06c36ba', required: this.required }))), this.secondaryLabel && (h("span", { key: '7a107c578e003760423acc6d450f2a42a0868375', class: "co-ref-field__secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: '9938ca629c5927156ea137adfefd1d927104312b', open: this.isOpen, placement: "bottom-start", matchWidth: !this.panelWidth, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '7618ea5fb13e4944596fd728cf934b5c28bd29ab', slot: "trigger" }, this.renderTrigger()), this.isOpen && this.renderPanel()), this.helperText && (h("div", { key: '1dd9fc7659e8f8791bb4b785407b0e89b32107c8', class: `co-ref-field__helper co-ref-field__helper--${this.status}` }, this.status !== 'default' && (h("co-icon", { key: '399674b95ebcc91581f1f1cea54451f8ee33d9da', name: this.status === 'error' ? 'warning-circle' : this.status === 'success' ? 'check-circle' : 'info', size: 14 })), h("span", { key: '640adc4e5cd4cd742a171cac1319b75489cb7ef8' }, this.helperText)))));
     }
     static get is() { return "co-ref-field"; }
     static get encapsulation() { return "shadow"; }
@@ -1088,6 +1176,46 @@ export class CoRefField {
                 "attribute": "trigger-badge-label",
                 "defaultValue": "''"
             },
+            "inheritedLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor HEREDADO: texto que se pinta cuando NO hay valor, en lugar del\nplaceholder, para mostrar lo que aplica por defecto (p. ej. el layout\npredeterminado del workspace en Deal.proposal.template.layout). No es un\nvalor: `value` sigue vac\u00EDo y no hay \u00D7. Vac\u00EDo = placeholder de siempre."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inherited-label",
+                "defaultValue": "''"
+            },
+            "inheritedBadgeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chip outlined junto al valor heredado (p. ej. 'Predeterminado'). Solo con inheritedLabel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inherited-badge-label",
+                "defaultValue": "''"
+            },
             "panelWidth": {
                 "type": "string",
                 "mutable": false,
@@ -1171,6 +1299,7 @@ export class CoRefField {
     }
     static get states() {
         return {
+            "inheritedTruncated": {},
             "isOpen": {},
             "overflowCount": {}
         };
@@ -1192,7 +1321,7 @@ export class CoRefField {
                     "references": {
                         "RefFieldOption": {
                             "location": "local",
-                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-ref-field/co-ref-field.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-18/packages/core/src/components/co-ref-field/co-ref-field.tsx",
                             "id": "src/components/co-ref-field/co-ref-field.tsx::RefFieldOption"
                         }
                     }
@@ -1333,7 +1462,7 @@ export class CoRefField {
                     "references": {
                         "RefFieldOption": {
                             "location": "local",
-                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-ref-field/co-ref-field.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-18/packages/core/src/components/co-ref-field/co-ref-field.tsx",
                             "id": "src/components/co-ref-field/co-ref-field.tsx::RefFieldOption"
                         }
                     }
@@ -1354,7 +1483,7 @@ export class CoRefField {
                     "references": {
                         "RefFieldOption": {
                             "location": "local",
-                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-ref-field/co-ref-field.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-18/packages/core/src/components/co-ref-field/co-ref-field.tsx",
                             "id": "src/components/co-ref-field/co-ref-field.tsx::RefFieldOption"
                         }
                     }
@@ -1376,11 +1505,78 @@ export class CoRefField {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "selectOption": {
+                "complexType": {
+                    "signature": "(option: RefFieldOption) => Promise<void>",
+                    "parameters": [{
+                            "name": "option",
+                            "type": "RefFieldOption",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "RefFieldOption": {
+                            "location": "local",
+                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-18/packages/core/src/components/co-ref-field/co-ref-field.tsx",
+                            "id": "src/components/co-ref-field/co-ref-field.tsx::RefFieldOption"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Selecci\u00F3n desde un panel proyectado (slot `panel`): mismo contrato que un\nclick en la co-option-list \u2014 actualiza `value`, emite `coChange` con\n`{ value, item }` y cierra en single.",
+                    "tags": []
+                }
+            },
+            "closePanel": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Cierra el panel (Escape/Enter manejados por un panel proyectado).",
+                    "tags": []
+                }
+            },
+            "openPanel": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Abre el panel. Espejo de `closePanel` para un panel proyectado que se\ncierra a s\u00ED mismo (p.ej. para mostrar un modal \u2014 un click dentro de un\nco-modal cuenta como click-outside del popover) y quiere volver a abrirse\ndespu\u00E9s. No-op si est\u00E1 disabled, igual que el trigger.",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "isOpen",
                 "methodName": "onOpenChange"
+            }, {
+                "propName": "inheritedLabel",
+                "methodName": "onInheritedLabelChange"
             }];
     }
 }

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

@@ -126,6 +126,28 @@ co-rich-text-editor {
   border-top-right-radius: calc(var(--co-border-radius-xs) - 1px);
 }
 
+/* ---- Toolbar at the bottom (`toolbar-position="bottom"`) ----
+   The row owns the separator (border-top) and shows the frame's surface; the
+   toolbar inside drops its own border/background (co-rich-text-toolbar
+   `:host([position="bottom"])`). `<slot name="toolbar-end">` (light DOM) is the
+   consumer's footer, rendered whenever the mode is bottom — toolbar or not. */
+.co-rich-text-editor__toolbar-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--co-spacing-md);
+  flex-shrink: 0;
+  min-width: 0;
+  border-top: 1px solid var(--co-semantic-border-subtle);
+}
+
+.co-rich-text-editor--toolbar-bottom .co-rich-text-editor__toolbar {
+  /* Nothing to nest at the top any more (mirror of the top-corner rule above). */
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  min-width: 0;
+}
+
 .co-rte-content {
   min-height: 96px;
   color: var(--co-semantic-text-default);

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

@@ -37,6 +37,13 @@ export class CoRichTextEditor {
         this.autofocus = false;
         /** Toolbar layout. `auto` uses the preset default. */
         this.toolbar = 'auto';
+        /** Where the toolbar sits. `bottom` moves it under the content, into a row that also
+         * exposes a `toolbar-end` light-DOM slot (this component is `shadow: false`) for the
+         * consumer's footer (hint, submit). The row renders whenever the mode is `bottom`, even
+         * while the toolbar itself is hidden (disabled/readonly): keep the slotted child ALWAYS
+         * mounted and toggle its insides — a placeholder that comes and goes desyncs Stencil's
+         * slot relocation with the consumer's vdom. */
+        this.toolbarPosition = 'top';
         /** Passthrough: shows the toolbar attachment button (host owns the files). */
         this.attachmentsEnabled = false;
         /** BCP-47 locale for UI strings (e.g. 'en', 'es-CO', 'pt-BR'). Default English. */
@@ -296,7 +303,10 @@ export class CoRichTextEditor {
         }
     }
     sanitizeHtml(html) {
-        return this.rt.sanitize(html, this.preset);
+        // Con las MISMAS features que cargaron el schema: sin ellas, un <img> con
+        // `features.image` o los attrs de menciones en un preset que no los lleva en
+        // su whitelist base se podaban EN SILENCIO al emitir (2026-09-18).
+        return this.rt.sanitize(html, this.preset, this.parsedFeatures);
     }
     buildOutput(editor) {
         const empty = editor.isEmpty;
@@ -1987,12 +1997,19 @@ export class CoRichTextEditor {
             const c = (((_a = dom === null || dom === void 0 ? void 0 : dom.closest) === null || _a === void 0 ? void 0 : _a.call(dom, '[data-resize-container]')) || dom);
             if (!c)
                 return true;
-            c.dataset.imageLayout = node.attrs.imageLayout || 'inline';
+            const layout = node.attrs.imageLayout || 'inline';
+            c.dataset.imageLayout = layout;
             // Neutralise any absolute positioning baked by the old fixed-page model.
             c.style.position = '';
             c.style.left = '';
             c.style.top = '';
             c.style.zIndex = '';
+            // The resize NodeView pins `display: inline-flex` INLINE on the container, which
+            // beats the stylesheet's `display: block` for `center` / `full-width`: the editor
+            // showed those images inline-left while the viewer (and the sent email) centred
+            // them (2026-09-17). Clear it for block layouts so the CSS rule can apply; the
+            // inline value is restored for flow layouts so the resize handles keep working.
+            c.style.display = layout === 'center' || layout === 'full-width' ? '' : 'inline-flex';
             return true;
         });
     }
@@ -2034,7 +2051,12 @@ export class CoRichTextEditor {
     render() {
         const showToolbar = this.resolvedToolbar !== 'none' && !this.readonly && !this.disabled;
         const showCount = this.showCharacterCount || this.maxLength != null;
-        return (h("div", { key: '135188e840e6c824750f41311c8317677754a57e', class: {
+        const bottom = this.toolbarPosition === 'bottom';
+        const toolbar = showToolbar && (h("co-rich-text-toolbar", { key: '0df30a57a843cbcd967ffd254ae0e54bee448902', 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: '03be9df0d50d00a3cf889b3404c4f347626aa27c', class: {
                 'co-rich-text-editor': true,
                 'co-rich-text-editor--focused': this.hasFocus,
                 'co-rich-text-editor--disabled': this.disabled,
@@ -2042,10 +2064,8 @@ export class CoRichTextEditor {
                 'co-rich-text-editor--loading': !this.ready,
                 [`co-rich-text-editor--${this.status}`]: this.status !== 'default',
                 'co-rich-text-editor--flat': this.variant === 'flat',
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '6efe3d162583d450797bde27f772ed400f764f89', class: "co-rich-text-editor__labels" }, this.label && h("label", { key: 'e7e4b81fe3c7ac101b7583ef2aa75635c9730fc9', class: "co-rich-text-editor__label", part: "label" }, this.label), this.secondaryLabel && (h("span", { key: '57d843617b4faadb72997c94f89d3032da83c0ef', class: "co-rich-text-editor__secondary-label" }, this.secondaryLabel)))), h("div", { key: '8bdfacbab4a4b782d19cb1f3b42237387ed686c0', class: "co-rich-text-editor__frame" }, showToolbar && (h("co-rich-text-toolbar", { key: 'ef14095c7489e7f090cebaf227345a6ec7e8681f', class: "co-rich-text-editor__toolbar", part: "toolbar", variant: this.resolvedToolbar, 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) })), h("div", { key: '554599eaefefb60470801d1ef6ced9ad271b197c', class: "co-rich-text-editor__box" }, h("div", { key: '85a5e5ace0ad305a58b4a18dd1f5cf102b5f480a', 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("div", { key: 'dbc4bdbafa74e8fc19b243c151e5ade688b8f463', class: "co-rich-text-editor__footer" }, this.helperText && (h("div", { key: '464cbd83eef858073cd82cfc2d71772bf0a7904a', class: `co-rich-text-editor__helper co-rich-text-editor__helper--${this.status}`, part: "helper" }, h("co-icon", { key: '1bd007d69fac6948e30d585ad7b9f3ece0fe85ca', name: this.helperIcon, size: 14 }), h("span", { key: '33c618629fc830ff7cdb1bdb1b576bbbc3369435' }, this.helperText))), showCount && (h("span", { key: 'c0bfa6e67be05fe892c2f51b12392810e4d3fed0', class: "co-rich-text-editor__count", ref: (el) => (this.charCountEl = el) }, this.charCount, this.maxLength != null ? ` / ${this.maxLength}` : '')))));
+                'co-rich-text-editor--toolbar-bottom': bottom,
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: 'ae732219465a376af19e771e63589c955be37c4b', class: "co-rich-text-editor__labels" }, this.label && h("label", { key: 'd316724c4f4bcbf55adf582b8ad40c6c45fba407', class: "co-rich-text-editor__label", part: "label" }, this.label), this.secondaryLabel && (h("span", { key: '3cca63f6dfa2335dcd7122eb734205d4fd86a90f', class: "co-rich-text-editor__secondary-label" }, this.secondaryLabel)))), h("div", { key: '620bd101dd94684f7b2d533401717eeb7421593c', class: "co-rich-text-editor__frame" }, !bottom && toolbar, h("div", { key: 'a20f163022dd1c6e23dfc222786ddf0fc6f9b3ac', class: "co-rich-text-editor__box" }, h("div", { key: 'd678e095ae36610895cb466c1a15c722b46d4483', 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: '62127cb0a34e7f43ceadcb20ef724aba0524fa69', name: "content-end" }), bottom && (h("div", { key: '99d574e7cbb2a115a243288b770cb03f1892ff93', class: "co-rich-text-editor__toolbar-row", part: "toolbar-row" }, toolbar, h("slot", { key: 'b9b971930ddda8d118c8b6d204fad8d41d25468e', name: "toolbar-end" })))), h("div", { key: 'caafa3f153192eee6efa7679dafa376dea69b150', class: "co-rich-text-editor__footer" }, this.helperText && (h("div", { key: '8d2ab21ababab2c14c912f8ffd6945001fca62f7', class: `co-rich-text-editor__helper co-rich-text-editor__helper--${this.status}`, part: "helper" }, h("co-icon", { key: 'b60df4c320b9356a87df39179c75360f91e858bf', name: this.helperIcon, size: 14 }), h("span", { key: 'd56108257c9bba2332e434d6240f4f387e2411f6' }, this.helperText))), showCount && (h("span", { key: '7973c2996e24ec991115fe4932915a9aefc1b495', 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() {
@@ -2348,7 +2368,7 @@ export class CoRichTextEditor {
                 "mutable": false,
                 "complexType": {
                     "original": "ToolbarVariant",
-                    "resolved": "\"auto\" | \"basic\" | \"compact\" | \"compact-assets\" | \"full\" | \"none\" | \"notes\"",
+                    "resolved": "\"auto\" | \"basic\" | \"compact\" | \"compact-assets\" | \"email\" | \"full\" | \"none\" | \"notes\"",
                     "references": {
                         "ToolbarVariant": {
                             "location": "import",
@@ -2370,6 +2390,26 @@ export class CoRichTextEditor {
                 "attribute": "toolbar",
                 "defaultValue": "'auto'"
             },
+            "toolbarPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'bottom'",
+                    "resolved": "\"bottom\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Where the toolbar sits. `bottom` moves it under the content, into a row that also\nexposes a `toolbar-end` light-DOM slot (this component is `shadow: false`) for the\nconsumer's footer (hint, submit). The row renders whenever the mode is `bottom`, even\nwhile the toolbar itself is hidden (disabled/readonly): keep the slotted child ALWAYS\nmounted and toggle its insides \u2014 a placeholder that comes and goes desyncs Stencil's\nslot relocation with the consumer's vdom."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "toolbar-position",
+                "defaultValue": "'top'"
+            },
             "features": {
                 "type": "string",
                 "mutable": false,