@prolibu-suite/cobalt-core 0.11.6 → 0.11.7

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

@@ -27,9 +27,11 @@
   padding: 0 var(--co-spacing-xs);
 }
 
+/* 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-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 {
@@ -79,8 +81,11 @@
   font-size: var(--co-font-size-16);
 }
 
+/* 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-phone-field--error .co-phone-field__container {
-  border-color: var(--co-color-status-error);
+  border-color: var(--co-semantic-border-error, var(--co-color-status-error));
 }
 
 .co-phone-field__container:focus-within {
@@ -259,7 +264,7 @@
 }
 
 .co-phone-field--error .co-phone-field__helper {
-  color: var(--co-semantic-status-error);
+  color: var(--co-semantic-text-error, var(--co-semantic-status-error));
 }
 
 /* ── Horizontal layout: label left; control + helper stacked right ──

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { RequiredMark } from "../../utils/requiredMark";
 import { DIAL_CODES, DIAL_CODE_MAP } from "./dial-codes";
 import { highlightSegments, rankByMatch } from "../../utils/normalizeText";
+import { getPhoneStrings } from "../../utils/phoneI18n";
 /**
  * Phone input with country code indicator. Composes a country selector
  * (flag + dial code) alongside a free-form phone number input.
@@ -33,6 +34,18 @@ export class CoPhoneField {
         this.numberPart = '';
         this.isOpen = false;
         this.searchQuery = '';
+        /**
+         * A flag that 404s (or that flagcdn throttles) used to render Chrome's torn-image
+         * icon in every row. The box is kept — hiding it instead of removing it stops the
+         * list from reflowing — and the country name and dial code carry the meaning, so
+         * nothing is lost. Mutating the node directly is deliberate: a `@State` set would
+         * re-render the whole 198-row list once per failed image.
+         */
+        this.hideBrokenFlag = (ev) => {
+            const img = ev.target;
+            if (img)
+                img.style.visibility = 'hidden';
+        };
         this.handleOutsideClick = (e) => {
             if (!this.isOpen)
                 return;
@@ -99,6 +112,9 @@ export class CoPhoneField {
     get hasCountry() {
         return !!this.selectedIso2 && !!this.selectedEntry;
     }
+    get strings() {
+        return getPhoneStrings(this.locale);
+    }
     get statusIcon() {
         const map = {
             error: 'warning-circle',
@@ -159,7 +175,7 @@ export class CoPhoneField {
     render() {
         const entry = this.selectedEntry;
         const statusClass = this.status !== 'default' ? `co-phone-field--${this.status}` : '';
-        return (h("div", { key: '46c764eaa95e5948b860341cd1a1a1468bc26920', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: '25b5a320625765b5ce9ebca165c165b6b7423a0a', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: 'b04b160b13504030159a51cb6bc8e2c258dab0a8', required: this.required }))), h("div", { key: '3bbe98a398007123d7ad405f16e0c5093829999e', class: "co-phone-field__container" }, h("button", { key: '58b43e162f7966cd11ac5c3b4ece75612769863b', type: "button", class: "co-phone-field__selector", disabled: this.disabled, onClick: () => this.handleToggleDropdown(), "aria-expanded": String(this.isOpen), "aria-haspopup": "listbox" }, entry ? (h("img", { class: "co-phone-field__flag", src: `https://flagcdn.com/w40/${entry.iso2.toLowerCase()}.png`, alt: entry.iso2 })) : (h("co-icon", { name: "phone", size: 16 })), h("span", { key: '78b26caa474d9f3df6f0f39bcb3c731761354786', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: 'd2753d9b70c19ce15b525e2bb6ed02d61aa15045', class: "co-phone-field__chevron" }, h("co-icon", { key: 'd94cffbcf3d0348c11a69cc3c7554dbe11d001b2', name: "caret-down", size: 14 }))), h("input", { key: 'ee111f5cb76785ebcbae917f9cd00d08e00d62c1', class: "co-phone-field__input", type: "tel", placeholder: this.placeholder, value: this.numberPart, disabled: this.disabled, onInput: (e) => this.handleNumberInput(e) })), this.isOpen && (h("div", { key: '9d86bccfa1643b1e6703b300a74587bed334cbc2', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: '8dfeb48d11dc7d70e3acc499ad1390805aa7889d', class: "co-phone-field__search" }, h("input", { key: '1e673f71acfea7a50915dfa7a0e9e5d67a6e76cf', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: 'e28014f19f7002049657884b4d5ff0caf81eb3d8', class: "co-phone-field__options" }, this.filteredCountries.map((d) => (h("button", { type: "button", key: d.iso2, class: `co-phone-field__option ${d.iso2 === this.selectedIso2 ? 'co-phone-field__option--selected' : ''}`, role: "option", "aria-selected": d.iso2 === this.selectedIso2 ? 'true' : 'false', onClick: () => this.handleCountrySelect(d) }, h("img", { class: "co-phone-field__option-flag", src: `https://flagcdn.com/w40/${d.iso2.toLowerCase()}.png`, alt: d.iso2 }), h("span", { class: "co-phone-field__option-name" }, this.renderName(d.name)), h("span", { class: "co-phone-field__option-code" }, d.dialCode))))))), this.helperText && (h("div", { key: '2033c1184dbb72d5705d9e0ba392d77bc9629f4c', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: 'b3204decf888ec35cc0bf3f044ea5a8037fa8a53', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '697323bd25dbd70a4dc9872d1678d80e6c7bdeff', class: "co-phone-field__helper-text" }, this.helperText)))));
+        return (h("div", { key: '8c960a1db186c84921d1062f3a81dac55d36be90', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: 'c19628c6057b6314a7dca1aeac5c8e201d2c20c0', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: 'e070c5a69e9064d61ca6fb6fd1d5fca6944f8a36', required: this.required }))), h("div", { key: '69e52a3489ddc693271a2eff7b63e7a3f6ffee9b', class: "co-phone-field__container" }, h("button", { key: '1b0998e28fb0f0aa0ab64443adceea96355483e5', type: "button", class: "co-phone-field__selector", disabled: this.disabled, onClick: () => this.handleToggleDropdown(), "aria-expanded": String(this.isOpen), "aria-haspopup": "listbox", "aria-label": entry ? `${this.strings.selectCountry}: ${entry.name} ${entry.dialCode}` : this.strings.selectCountry }, entry ? (h("img", { class: "co-phone-field__flag", src: `https://flagcdn.com/w40/${entry.iso2.toLowerCase()}.png`, alt: "", decoding: "async", onError: this.hideBrokenFlag })) : (h("co-icon", { name: "phone", size: 16 })), h("span", { key: '5f2f173697b6e659b729547eb44372efbdebf0de', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: 'd0ad9d09fd06c9ab4385b6b10fd335429d2b2782', class: "co-phone-field__chevron" }, h("co-icon", { key: '6ef136322e4fcada10e924d25beff2ff3699a0d9', name: "caret-down", size: 14 }))), h("input", { key: 'b5d77691bbd9638a3868e82a243c1106e3167384', class: "co-phone-field__input", type: "tel", placeholder: this.placeholder, value: this.numberPart, disabled: this.disabled, onInput: (e) => this.handleNumberInput(e) })), this.isOpen && (h("div", { key: 'c9310ebc76fb76f4ad7b3f460199131e89238129', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: '2b103381c88331f86dd0cd941b5d7dc102d60cfa', class: "co-phone-field__search" }, h("input", { key: '3152d3842b4db1f2f75b36c8c16933a115af75b5', class: "co-phone-field__search-input", type: "text", placeholder: this.strings.searchPlaceholder, value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: '0b5fdd035243c03563e956b7c6e8b189e3fac976', class: "co-phone-field__options" }, this.filteredCountries.map((d) => (h("button", { type: "button", key: d.iso2, class: `co-phone-field__option ${d.iso2 === this.selectedIso2 ? 'co-phone-field__option--selected' : ''}`, role: "option", "aria-selected": d.iso2 === this.selectedIso2 ? 'true' : 'false', onClick: () => this.handleCountrySelect(d) }, h("img", { class: "co-phone-field__option-flag", src: `https://flagcdn.com/w40/${d.iso2.toLowerCase()}.png`, alt: "", loading: "lazy", decoding: "async", onError: this.hideBrokenFlag }), h("span", { class: "co-phone-field__option-name" }, this.renderName(d.name)), h("span", { class: "co-phone-field__option-code" }, d.dialCode))))))), this.helperText && (h("div", { key: '49841fcec083d7d619c699cdc5a236dcdf5cb214', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: 'c0e2d6641adcd3bea675e1b78a6d982f75ef56df', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '305562aeba6e0169b0f1b23f504c5f686413cb79', class: "co-phone-field__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-phone-field"; }
     static get encapsulation() { return "shadow"; }
@@ -372,6 +388,25 @@ export class CoPhoneField {
                 "reflect": false,
                 "attribute": "default-country",
                 "defaultValue": "''"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "BCP-47 locale for the built-in UI strings (es/en/pt)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale"
             }
         };
     }

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

@@ -50,6 +50,10 @@
   opacity: 0;
   transform: scale(0.97);
   background: var(--co-semantic-surface-page, #fff);
+  /* Tinta pareja con SU fondo: la UA de [popover] pone `color: CanvasText`
+     (#000 también en oscuro), y heredar del disparador fallaría dentro de un
+     contexto inverso (navbar oscuro: blanco sobre el panel blanco). */
+  color: var(--co-semantic-text-default);
   /* Variables con el default de siempre como
      fallback — sin --co-popover-border-color/--co-popover-shadow, cero
      cambio visual. */

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

@@ -60,6 +60,7 @@ export class CoPopover {
         this.closing = false;
         /** El trigger se vio al menos una vez desde que abrió (ver `updatePosition`). */
         this.anchorSeenVisible = false;
+        this.keepSide = false;
         this.scrollParents = [];
         // Cached offset ancestor + a flag to distinguish "not computed yet" from
         // "computed and there is none". Avoids re-walking the DOM + calling
@@ -169,13 +170,20 @@ export class CoPopover {
             // computePosition cae a `triggerRect` — mismo resultado que hoy.
             const anchorEl = this.resolveAnchor();
             const anchorRect = anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.getBoundingClientRect();
+            // Re-cálculo por tamaño: parte del lado donde YA está. Si cabe se queda (filtrar la
+            // búsqueda no hace saltar el panel de arriba a abajo); si no, computePosition voltea o
+            // lo sube hasta que entre, igual que al abrir.
+            const placement = this.keepSide && this.lastPlacement ? this.lastPlacement : this.placement;
+            this.keepSide = false;
+            this.observePanel();
             const { top, left, actualPlacement } = computePosition(triggerRect, panelRect, {
-                placement: this.placement,
+                placement,
                 offset: this.offset,
                 flip: this.flip,
                 anchorRect,
                 shift: this.shift,
             });
+            this.lastPlacement = actualPlacement;
             let finalTop = top;
             let finalLeft = left;
             // When the panel is promoted to the top layer (Popover API), `position:fixed`
@@ -220,6 +228,12 @@ export class CoPopover {
                 this.panelEl.classList.add('co-popover__panel--positioned');
             }
         };
+        this.handlePanelResize = () => {
+            if (!this.open)
+                return;
+            this.keepSide = true;
+            this.scheduleUpdate();
+        };
         this.scheduleUpdate = () => {
             if (this.rafId)
                 cancelAnimationFrame(this.rafId);
@@ -360,6 +374,16 @@ export class CoPopover {
                the same frame) — safe to ignore; falls back to in-place positioning */
         }
     }
+    observePanel() {
+        var _a;
+        if (typeof ResizeObserver === 'undefined' || !this.panelEl || this.observedPanel === this.panelEl)
+            return;
+        (_a = this.resizeObserver) !== null && _a !== void 0 ? _a : (this.resizeObserver = new ResizeObserver(this.handlePanelResize));
+        if (this.observedPanel)
+            this.resizeObserver.unobserve(this.observedPanel);
+        this.observedPanel = this.panelEl;
+        this.resizeObserver.observe(this.panelEl);
+    }
     // ── Scroll/resize listeners ────────────────────────────────
     // Listen to window resize/scroll and to every ancestor that ACTUALLY scrolls
     // (co-drawer/co-modal body, datatable body…).
@@ -382,6 +406,11 @@ export class CoPopover {
         }
     }
     cleanupListeners() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.observedPanel = undefined;
+        this.lastPlacement = undefined;
+        this.keepSide = false;
         if (this.rafId) {
             cancelAnimationFrame(this.rafId);
             this.rafId = undefined;
@@ -395,13 +424,13 @@ export class CoPopover {
     }
     // ── Render ─────────────────────────────────────────────────
     render() {
-        return (h("div", { key: 'f9c23cf5b7beb42230fbc37e6aacb9d8423a2c34', class: "co-popover" }, h("div", { key: '255b7a3b713719283e3b4a6d65ed520661b4e40b', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: '82c7133648e7c55db263f1abae8902c3ab579d27', name: "trigger" })), (this.open || this.closing) && (h("div", { key: '990ca1400e5e19d6614dbc7b43e78b116626e1b0', class: { 'co-popover__panel': true, 'co-popover__panel--closing': this.closing }, part: "panel", popover: "manual", onTransitionEnd: this.handlePanelTransitionEnd, ref: (el) => {
+        return (h("div", { key: 'a85df32be71c08c86bd19a31224b51b899d1f468', class: "co-popover" }, h("div", { key: 'accafae8513bad7bfbf32b7e98f0dc6ec0968efa', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: 'f12247af31066f6d4cbdd45671146b3ea5c996bc', name: "trigger" })), (this.open || this.closing) && (h("div", { key: '64dbc77cae4a913bbe3ec4174f6b18c4982520ae', class: { 'co-popover__panel': true, 'co-popover__panel--closing': this.closing }, part: "panel", popover: "manual", onTransitionEnd: this.handlePanelTransitionEnd, ref: (el) => {
                 if (el && el !== this.panelEl) {
                     this.panelEl = el;
                     this.promotePanel();
                     this.scheduleUpdate();
                 }
-            } }, h("slot", { key: 'fb635cf42e7866b055a59aaf471bab5bca995afb' })))));
+            } }, h("slot", { key: '858df49b45b1bd72f215f5e408e835227633d41f' })))));
     }
     static get is() { return "co-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -446,7 +475,7 @@ export class CoPopover {
                     "references": {
                         "PopoverPlacement": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-popover/co-popover.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-popover/co-popover.tsx",
                             "id": "src/components/co-popover/co-popover.tsx::PopoverPlacement"
                         }
                     }

package/dist/collection/components/co-progress-bar/co-progress-bar.css

@@ -3,11 +3,15 @@
   width: 100%;
 }
 
+/**
+ * @prop --co-progress-bar-track: Color de la pista (default: --co-semantic-border-subtle).
+ * @prop --co-progress-bar-fill: Relleno de la variante solid con status default (default: --co-semantic-status-info).
+ */
 .co-progress-bar {
   width: 100%;
   border-radius: 9999px;
   overflow: hidden;
-  background: var(--co-semantic-border-subtle);
+  background: var(--co-progress-bar-track, var(--co-semantic-border-subtle));
   position: relative;
 }
 
@@ -19,7 +23,7 @@
 
 /* ─── Solid variant ──────────────────────────────────────── */
 .co-progress-bar--solid .co-progress-bar__fill {
-  background: var(--co-semantic-status-info);
+  background: var(--co-progress-bar-fill, var(--co-semantic-status-info));
 }
 
 .co-progress-bar--solid.co-progress-bar--success .co-progress-bar__fill {

package/dist/collection/components/co-progress-bar/co-progress-bar.js

@@ -21,12 +21,12 @@ export class CoProgressBar {
     render() {
         const clamped = Math.max(0, Math.min(100, this.value));
         const indeterminate = this.indeterminate;
-        return (h("div", { key: '73ffc3d2dedc7a87e2552a75b61a56199f60edb6', class: {
+        return (h("div", { key: '11e44e13ee324094bd7992d79cc6dc835c9de2f3', class: {
                 'co-progress-bar': true,
                 [`co-progress-bar--${this.status}`]: true,
                 [`co-progress-bar--${this.variant}`]: true,
                 'co-progress-bar--indeterminate': indeterminate,
-            }, role: "progressbar", "aria-valuenow": indeterminate ? undefined : clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "bar", style: { height: `${this.thickness}px` } }, h("div", { key: 'da42344ce3d88c2a1eec058b4bb57a7b8380a2aa', class: "co-progress-bar__fill", style: indeterminate ? undefined : { width: `${clamped}%` } })));
+            }, role: "progressbar", "aria-valuenow": indeterminate ? undefined : clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "bar", style: { height: `${this.thickness}px` } }, h("div", { key: 'e0448637058e041aa2ff6a49f1be5464114c0d15', class: "co-progress-bar__fill", style: indeterminate ? undefined : { width: `${clamped}%` } })));
     }
     static get is() { return "co-progress-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-progress-circle/co-progress-circle.js

@@ -22,7 +22,7 @@ export class CoProgressCircle {
         const clamped = Math.max(0, Math.min(100, this.value));
         const angle = (clamped / 100) * 360;
         const safeStroke = Math.min(this.strokeWidth, this.size / 2);
-        return (h("div", { key: 'a3d5bc7d287ef18ad5d1d2f23373d25ea2509476', class: {
+        return (h("div", { key: '7659875cfd5d239ce132e216ebb013d867ef2d22', class: {
                 'co-progress-circle': true,
                 [`co-progress-circle--${this.status}`]: true,
             }, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "circle", style: {
@@ -30,7 +30,7 @@ export class CoProgressCircle {
                 height: `${this.size}px`,
                 '--co-pc-angle': `${angle}deg`,
                 '--co-pc-stroke': `${safeStroke}px`,
-            } }, h("div", { key: '3b922058d72dcb0d1a7a9f59b122b8a2d54c4d4a', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '083498504b05357660f593c128258a2be8ca359e', class: "co-progress-circle__label" }, clamped, "%"))));
+            } }, h("div", { key: '832ee366fc48659f1e7731f57d0d9624348b15c0', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '02d74ff3dcad11b608bab449db396073fcdf0b64', class: "co-progress-circle__label" }, clamped, "%"))));
     }
     static get is() { return "co-progress-circle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,15 +25,15 @@ export class CoRadio {
         };
     }
     render() {
-        return (h("div", { key: '637efb5c90e6f1f2c205a9c97c020c609f72a093', class: {
+        return (h("div", { key: 'daeb8835509b680044c4bb85e3b290d8315c509d', class: {
                 'co-radio-row': true,
                 'co-radio-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("button", { key: '7311c200f5b2e2029acfe2642aa59c850087a7b3', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, h("button", { key: 'e1f8d09f867cb18404315048951e4bf05a68307c', 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: '067c567f9d70642c11ccb1a8d0b30c17323fb476', class: "co-radio__label", part: "label" }, this.label))));
+            }, disabled: this.disabled, part: "circle" }), this.label && (h("span", { key: '59360a6bd719d62872fb33de176eb43a0507d756', 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.css

@@ -149,8 +149,11 @@
 }
 
 /* ── Error state — circle border ────────────────────────────── */
+/* 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-radio-group--error .co-radio-group__circle {
-  border-color: var(--co-semantic-status-error);
+  border-color: var(--co-semantic-border-error, var(--co-semantic-status-error));
 }
 
 /* ── Helper text ────────────────────────────────────────────── */
@@ -175,24 +178,26 @@
 }
 
 /* status colors */
+/* 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-radio-group__helper--error .co-radio-group__helper-icon,
 .co-radio-group__helper--error .co-radio-group__helper-text {
-  color: var(--co-semantic-status-error);
+  color: var(--co-semantic-text-error, var(--co-semantic-status-error));
 }
 
 .co-radio-group__helper--success .co-radio-group__helper-icon,
 .co-radio-group__helper--success .co-radio-group__helper-text {
-  color: var(--co-semantic-status-success);
+  color: var(--co-semantic-text-success, var(--co-semantic-status-success));
 }
 
 .co-radio-group__helper--warning .co-radio-group__helper-icon,
 .co-radio-group__helper--warning .co-radio-group__helper-text {
-  color: var(--co-color-status-review);
+  color: var(--co-semantic-text-warning, var(--co-color-status-review));
 }
 
 .co-radio-group__helper--info .co-radio-group__helper-icon,
 .co-radio-group__helper--info .co-radio-group__helper-text {
-  color: var(--co-semantic-status-info);
+  color: var(--co-semantic-text-info, var(--co-semantic-status-info));
 }
 
 /* ── Horizontal layout: label left; control + helper stacked right ──

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"
                         }
                     },