@prolibu-suite/cobalt-core 0.11.6 → 0.11.8

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

@@ -16,12 +16,12 @@ export class CoNavbar {
         this.rounded = false;
     }
     render() {
-        return (h("div", { key: '68c78b33434a32372eef9763b0c11c9a185f6ef8', class: {
+        return (h("div", { key: '3573a493f29f3a1b4b4d95b23f221e842b41cea6', class: {
                 'co-navbar': true,
                 [`co-navbar--${this.variant}`]: true,
                 [`co-navbar--${this.size}`]: true,
                 'co-navbar--rounded': this.rounded,
-            }, part: "navbar", role: "toolbar" }, h("slot", { key: 'a9d05ff60065f85dc24e941478a18fa40466143f' })));
+            }, part: "navbar", role: "toolbar" }, h("slot", { key: 'e4f46072826161cf3e8525e0dced7f0050b42d1b' })));
     }
     static get is() { return "co-navbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -80,7 +80,10 @@
   border-color: transparent;
 }
 
-.co-number-field--error .co-number-field__row { 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-number-field--error .co-number-field__row { border-color: var(--co-semantic-border-error, var(--co-semantic-status-error)); }
 .co-number-field--success .co-number-field__row { border-color: var(--co-semantic-status-success); }
 .co-number-field--warning .co-number-field__row { border-color: var(--co-color-status-review); }
 .co-number-field--info .co-number-field__row { border-color: var(--co-semantic-status-info); }
@@ -231,17 +234,19 @@
   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-number-field__helper--error .co-number-field__helper-icon,
-.co-number-field__helper--error .co-number-field__helper-text { color: var(--co-semantic-status-error); }
+.co-number-field__helper--error .co-number-field__helper-text { color: var(--co-semantic-text-error, var(--co-semantic-status-error)); }
 
 .co-number-field__helper--success .co-number-field__helper-icon,
-.co-number-field__helper--success .co-number-field__helper-text { color: var(--co-semantic-status-success); }
+.co-number-field__helper--success .co-number-field__helper-text { color: var(--co-semantic-text-success, var(--co-semantic-status-success)); }
 
 .co-number-field__helper--warning .co-number-field__helper-icon,
-.co-number-field__helper--warning .co-number-field__helper-text { color: var(--co-color-status-review); }
+.co-number-field__helper--warning .co-number-field__helper-text { color: var(--co-semantic-text-warning, var(--co-color-status-review)); }
 
 .co-number-field__helper--info .co-number-field__helper-icon,
-.co-number-field__helper--info .co-number-field__helper-text { color: var(--co-semantic-status-info); }
+.co-number-field__helper--info .co-number-field__helper-text { color: var(--co-semantic-text-info, var(--co-semantic-status-info)); }
 
 /* ── Horizontal layout: label left; control + helper stacked right ──
    Set --co-field-label-width on a container to align labels across fields. */
@@ -269,9 +274,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-number-field/co-number-field.js

@@ -345,18 +345,18 @@ export class CoNumberField {
         return this.scaled && !this.isEmpty ? '%' : null;
     }
     render() {
-        return (h("div", { key: '87d77047c35e2f0b3b9a978839e5b3c99541dc2e', class: {
+        return (h("div", { key: 'c06b2895c508e45d8e936ddce619f517985637bb', class: {
                 'co-number-field': true,
                 'co-number-field--disabled': this.disabled,
                 'co-number-field--focused': this.focused,
                 [`co-number-field--${this.size}`]: true,
                 [`co-number-field--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: '22f0674035a68861fae6ce37aba4e51b10c03226', class: "co-number-field__labels" }, this.label && h("label", { key: '442ee74bed62bf7c800f231ad4992b791b85a30c', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: 'ff7517b83b8e942512dcb8c1f504eafab55cea90', required: this.required })), this.secondaryLabel && h("span", { key: '736889aae85065fb28a56131e2f7a3da9fc86a48', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: 'fd6163c7cb83073db2c19c3477447076372abb44', class: "co-number-field__row", part: "row" }, !this.hideControls && (h("button", { key: 'e1a52831b83c3255ce63c4ed48a228fe4fdb1629', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: '86e0ce9b9801e50d9bda6b18a8e1f6f96581b178', name: "minus", size: 16 }))), h("input", { key: '4bdf89e9a4958841a948b3bd6e9886898917f464', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal",
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: '2ade558c7d748eefb332f4c58f8618199bd5b7cb', class: "co-number-field__labels" }, this.label && h("label", { key: '94576cf7ef1ce2bb8a0f9606613b2e12c3e4d3d1', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: '884cb5ad7003543f1cf371fa08b592ec30f62975', required: this.required })), this.secondaryLabel && h("span", { key: 'd8e98e616c43a27e8b50341a81a6c5d4c45f83a1', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: 'aa7bddd49fc689ff512c25fa9bf375c2e65a7a69', class: "co-number-field__row", part: "row" }, !this.hideControls && (h("button", { key: '037c88c0092989da13bb7174e1609150172f95fb', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: 'bb7a68226f0cfaaaca8c62ccfafdcdca2b529469', name: "minus", size: 16 }))), h("input", { key: '9bb9e56f0f8fbc0f0c64f8b07f4fc97f0cc73198', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal",
             // Mismo guard `focused` que el @Watch: mientras el usuario edita, su
             // texto manda. Sin esto, el re-render que dispara emitValue repinta
             // el input desde el NÚMERO y se come el texto en construcción
             // ("34,640.00" pegado quedaba "34,640"; un "12." perdería el punto).
-            value: this.focused && this.inputEl ? this.inputEl.value : this.displayValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }), this.affixText && (h("span", { key: '7bc7c12c6fe2708691d9a2972f9ed3037e82a1a8', class: "co-number-field__affix", "aria-hidden": "true" }, this.affixText)), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: '2ef7c424a34a8a6cbfe8ac4cd0a5d8f0ed74e6d4', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'c428ca841c0de013cd151bd356686be43992de04', name: "x-circle", size: 16, weight: "fill" }))), h("slot", { key: 'fb127a663d3839bbb10b8232b250eaf67faab898', name: "suffix" }), !this.hideControls && (h("button", { key: '684329d2f32a58f6be2a124f0cd20986a7fc49af', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: '7ef48466e060efb314466d62216a8e00168ddbcd', name: "plus", size: 16 })))), this.helperText && (h("div", { key: '2cf6df2556160fef3c1dfd1b525991eb822cb285', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '905ad795d9714fa9ae8fc2b9d4b9f6a7bba2d2ce', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: '0c4825c4145298700de006eb3170e9ec3b52d3b7', class: "co-number-field__helper-text" }, this.helperText)))));
+            value: this.focused && this.inputEl ? this.inputEl.value : this.displayValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }), this.affixText && (h("span", { key: 'b3b43651edb493510327c18d27945679e1b4f391', class: "co-number-field__affix", "aria-hidden": "true" }, this.affixText)), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: '7055c55c7a035621f0fdcae168324a515dc419d5', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '162303056606a465ad5fc43496260cadf8b5c5b2', name: "x-circle", size: 16, weight: "fill" }))), h("slot", { key: '1fba80dd46e27d7ee89c0a7dcd32f34ac9a9a5f7', name: "suffix" }), !this.hideControls && (h("button", { key: 'c9575f0459a3c9d18239fbd636b60b9ea51b4551', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: 'b310d8a2316cb841b7c87157b9ac40d7faba1bbf', name: "plus", size: 16 })))), this.helperText && (h("div", { key: 'b933f8cdf51e44d26d58c215afe2c393a068ac1c', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '99d3fd7dbef2173da5384ad12a40f6d669bb9c49', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: 'f93dac49f3b1f6ca2ae08190f51e35f600e675e4', class: "co-number-field__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-number-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-option-list/co-option-list.css

@@ -828,9 +828,11 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   --os-padding-axis: 2px;
   --os-track-bg: transparent;
   --os-handle-border-radius: var(--co-border-radius-full, 9999px);
-  --os-handle-bg: var(--co-color-opacity-negro-16, rgba(31, 28, 27, 0.16));
-  --os-handle-bg-hover: var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25));
-  --os-handle-bg-active: var(--co-color-opacity-negro-50, rgba(31, 28, 27, 0.5));
+  /* Handle por border-* (mismo valor en claro que negro-16/25/50): la tinta negra fija era
+     invisible sobre la superficie oscura del panel. */
+  --os-handle-bg: var(--co-semantic-border-default, rgba(31, 28, 27, 0.16));
+  --os-handle-bg-hover: var(--co-semantic-border-field, rgba(31, 28, 27, 0.25));
+  --os-handle-bg-active: var(--co-semantic-border-strong, rgba(31, 28, 27, 0.5));
   --os-handle-min-size: 24px;
 }
 
@@ -1005,7 +1007,8 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 }
 
 .co-option-list__match {
-  color: var(--co-color-primary-azul, #2563eb);
+  /* Resaltado de coincidencia: tinta text-link, gira con el tema (azul primitivo = 3,8:1 en oscuro). */
+  color: var(--co-semantic-text-link, var(--co-color-primary-azul, #2563eb));
   font-weight: 700;
 }
 

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

@@ -781,11 +781,11 @@ export class CoOptionList {
         const selectedIds = this.selectedIds;
         const { hasMore, remaining } = deriveMore(this.parsedItems.length, this.total, this.hasMore);
         const showClear = !!this.clearOptionLabel && selectedIds.length > 0;
-        return (h("div", { key: 'ca480a23b7127ff745ee57002a71dea707e32e95', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: 'de6a96f09450c05c9194933f3e5f732e158437c7', class: "co-option-list__search", part: "search" }, h("co-icon", { key: 'f99a19e0a194d6a0bcce6d40a736197593af8fdf', name: "magnifying-glass", size: 16 }), h("input", { key: '26fabd78b4660523e25b40bc8e92740df2677244', class: "co-option-list__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.term, onInput: this.onSearchInput, ref: (el) => (this.searchInputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list" }))), h("slot", { key: '05dc7fb2d632ba58b3b960e9355b1e48a71df32c', name: "header" }), h("div", { key: 'b3edc8acf06c7f433da9584249be73d25c5f1fee', class: "co-option-list__options", part: "options", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : 'false', ref: (el) => (this.optionsEl = el), onScroll: this.onNativeScroll }, h("div", { key: '8abe9a20998f35332ee320512a433d8fb8196875', class: "co-option-list__inner" }, showClear && (h("button", { key: '9b420f4a08d94c7588657ec73102253dc3aace29', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: '5e0d86b76f5b85ee41a4534284c4e05fec4f2df1', name: "x-circle", size: 14 }), h("span", { key: 'ff554cd331978bbe2e6aaef44b590a9de66c67d5' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: '1db10de6bf8b6cda7b7ca13f5969400ab420a3e7', class: "co-option-list__loading" }, h("co-loader", { key: 'd724879c38f755067e544503c233c740f932f46e', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: '95f42f0028e6f7a1641bc45f6a294fe2ded5a29f', class: "co-option-list__empty" }, h("co-icon", { key: '1bed6dbd8c0c4e0722f6c28c2867331bba4e3879', name: "magnifying-glass", size: 20 }), h("span", { key: '7f2d01d6eed6e91ab14ace418f52167713963976' }, this.emptyMessage))), items.length > 0 && this.virtual
+        return (h("div", { key: 'c73f8d143c1f655f4d9145ef0a2a4d3219a43e49', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: 'bd5dfa8848da20fd66293acdd87568ca0e2fbebc', class: "co-option-list__search", part: "search" }, h("co-icon", { key: '0c5aeacb9fbde646862a6359f2c58a75f31a6100', name: "magnifying-glass", size: 16 }), h("input", { key: '0a573789feff4b3cd31610ee720ddfaa2b859ea4', class: "co-option-list__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.term, onInput: this.onSearchInput, ref: (el) => (this.searchInputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list" }))), h("slot", { key: '650e79a9b2ba218f7fcd324335505fda29a87b71', name: "header" }), h("div", { key: '1f2baa6b0b6b728cd0eeab5ae555847d397351ac', class: "co-option-list__options", part: "options", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : 'false', ref: (el) => (this.optionsEl = el), onScroll: this.onNativeScroll }, h("div", { key: '33f7230c30c06ef31ac83fb5febba040f0d88d6e', class: "co-option-list__inner" }, showClear && (h("button", { key: '9934486c64862d94ee8ed6e3af603710edd2a5c6', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: 'f0abd016e20d238345c0c2d40436220631a1403a', name: "x-circle", size: 14 }), h("span", { key: '9090f327d77767db03792e13bd4bfcdd4abcffcd' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: '25b13f063b888d6d95b24a2741e1ae3e070d60ab', class: "co-option-list__loading" }, h("co-loader", { key: 'dc56d924da21b4029fc81b454672a2ded44f14ef', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: '492e6902e2849a83ac0529fe922aa43814db2c40', class: "co-option-list__empty" }, h("co-icon", { key: '2c9d91ddaad0b52e0dbff654871ce147e0617f59', name: "magnifying-glass", size: 20 }), h("span", { key: '76eacb323225035d650f1ebb6e17507035d02ac4' }, this.emptyMessage))), items.length > 0 && this.virtual
             ? this.renderVirtual(items, selectedIds)
             : buildRows(items).map((row) => row.kind === 'header'
                 ? h("div", { class: "co-option-list__group", role: "presentation" }, row.label)
-                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (h("div", { key: '9fb95c0193357bf50eabc21dae3f8ca0bb2b3a9f', class: "co-option-list__loading-more" }, h("co-loader", { key: 'dddf472d61b1c14f281212b02538bd576dce09d1', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: '6d4f16d14d67b137fe37b67fe1590d209b51b800', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: '9091482eaf2228e93b3eeb893e804d5fcd8c3d44', name: "footer" })));
+                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (h("div", { key: 'e86f2a2157e84d9e9a414f6bbf3d20235bc75829', class: "co-option-list__loading-more" }, h("co-loader", { key: 'de4c472413852c7fc3e4c6fb088632c79ce518d6', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: '12616fbfb51d2c656937e22907d5152f3f7ea210', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: 'd73683805a28e15b2a126867fd7947869ee649f6', name: "footer" })));
     }
     static get is() { return "co-option-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,6 +21,9 @@
   max-width: none;
   max-height: none;
   overflow: visible;
+  /* La UA de [popover] pone `color: CanvasText` (#000 también en oscuro, sin
+     color-scheme): el scrim es un contenedor de paso, la tinta viene del host. */
+  color: inherit;
   display: flex;
   align-items: center;
   justify-content: center;

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { afterEventFor } from "./overlayAfterClose";
 import { isBackdropDismiss } from "./backdropDismiss";
 import { getComposedFocusables, isTopTrap, resolveInitialFocus, resolveTabIndex } from "./focusTrap";
+import { isPopoverOpen } from "../../utils/popoverApi";
 /**
  * Module-level body-scroll lock shared by every overlay instance.
  * Ref-counted so stacked/nested overlays (e.g. a modal opened from a drawer)
@@ -157,7 +158,7 @@ export class CoOverlay {
         const el = this.overlayEl;
         if (!this.open || !el || typeof el.showPopover !== 'function')
             return;
-        if (!el.matches(':popover-open'))
+        if (!isPopoverOpen(el))
             return;
         const active = this.deepActiveElement();
         el.classList.add(REFRONT_CLASS);
@@ -198,7 +199,7 @@ export class CoOverlay {
         if (!el || typeof el.showPopover !== 'function')
             return;
         try {
-            const isShown = el.matches(':popover-open');
+            const isShown = isPopoverOpen(el);
             if (this.open && !isShown)
                 el.showPopover();
             else if (!this.open && isShown)
@@ -298,7 +299,7 @@ export class CoOverlay {
         focusables[nextIndex].focus();
     }
     render() {
-        return (h("div", { key: 'e18d7b0e3ebd4933a78a9f2d39af6058ce429105', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", popover: "manual", tabindex: this.trapFocus ? -1 : undefined, ref: (el) => (this.overlayEl = el), onPointerDown: this.handlePointerDown, onPointerUp: this.handlePointerUp, onClick: this.handleClick, onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: '2f29233d44de8a0cc3100cfa08233cdc10ebf352' })));
+        return (h("div", { key: '419d44027ef0e270aa9bddccc83bf3e93e1e78db', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", popover: "manual", tabindex: this.trapFocus ? -1 : undefined, ref: (el) => (this.overlayEl = el), onPointerDown: this.handlePointerDown, onPointerUp: this.handlePointerUp, onClick: this.handleClick, onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: '34ffc7586b41bced7d7f56b6189f654c1c5e1a7f' })));
     }
     static get is() { return "co-overlay"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-overlay/escapeLayers.js

@@ -0,0 +1,20 @@
+const layers = [];
+const isModeless = (layer) => layer.modeless === true;
+export function pushEscapeLayer(layer) {
+    removeEscapeLayer(layer);
+    layers.push(layer);
+}
+export function removeEscapeLayer(layer) {
+    const i = layers.indexOf(layer);
+    if (i >= 0)
+        layers.splice(i, 1);
+}
+export function isTopEscapeLayer(layer) {
+    const blocking = layers.filter((l) => !isModeless(l));
+    const pool = blocking.length ? blocking : layers;
+    return pool.length > 0 && pool[pool.length - 1] === layer;
+}
+/** Solo para tests. */
+export function resetEscapeLayers() {
+    layers.length = 0;
+}

package/dist/collection/components/co-page-header/co-page-header.js

@@ -9,7 +9,7 @@ import { h } from "@stencil/core";
  */
 export class CoPageHeader {
     render() {
-        return (h("div", { key: '18d15d7b241f92bbd121fd6547832a30f4404928', class: "co-page-header", part: "page-header" }, h("div", { key: 'cbf4427991e3b43775a1d47c95f953ef79d71c77', class: "co-page-header__left" }, this.icon && (h("span", { key: '647701102f261fc214a0a4347894ba275da1ed7d', class: "co-page-header__icon" }, h("co-icon", { key: 'd377f2f5cbfa190cb483fe4a6ff2a483f9053f7b', name: this.icon, size: 24 }))), h("span", { key: 'ccf59184d2154c89fc90ccddfffc8dfc8c07b72b', class: "co-page-header__title" }, h("slot", { key: '34dd64e79e72cb154c63b16f72c2ec58193d9988' }, this.heading))), h("div", { key: 'e2f1d119629a3b9479896cf2338625ad775b8556', class: "co-page-header__actions" }, h("slot", { key: '62ee162b3388968ee1930a2c3ab20e45b34a2d65', name: "actions" }))));
+        return (h("div", { key: '877c32ab794ec6e86ed26e7e99d7c45463a1922f', class: "co-page-header", part: "page-header" }, h("div", { key: '4e771155a4d3ae9914619ab34fbc31e5ce9246a8', class: "co-page-header__left" }, this.icon && (h("span", { key: '458833e13b51f2e076af6780f75a06c8de6e2514', class: "co-page-header__icon" }, h("co-icon", { key: 'a68d9d9ce0181f8d58e33de465d844506ea45af9', name: this.icon, size: 24 }))), h("span", { key: '9c1294e395a20433e260224ab7a33931b9d85319', class: "co-page-header__title" }, h("slot", { key: '4b7af2160fd067a7ca4ce973004a4c89249552dd' }, this.heading))), h("div", { key: '715cc529b7b80d702c2470571f9feb56ea01fa35', class: "co-page-header__actions" }, h("slot", { key: '6803b878b2e2bc939840847a394300c80be661c7', name: "actions" }))));
     }
     static get is() { return "co-page-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { computePosition, findScrollParents, getOffsetAncestor, isAnchorVisible } from "../../utils/positioning";
 import { pushLayer, removeLayer, isTopLayer } from "../../utils/popover-stack";
+import { isPopoverOpen } from "../../utils/popoverApi";
 /** Side classes driving the entrance `transform-origin` (see co-popover.css). */
 const SIDE_CLASSES = ['top', 'bottom', 'left', 'right'].map((s) => `co-popover__panel--${s}`);
 /**
@@ -60,6 +61,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,20 +171,27 @@ 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`
             // resolves against the viewport regardless of any transformed/filtered
             // ancestor — so skip the offset-ancestor compensation. It only applies in
             // the no-Popover-API fallback where the panel still renders in place.
-            const promoted = this.panelEl.matches(':popover-open');
+            const promoted = isPopoverOpen(this.panelEl);
             if (!promoted) {
                 if (!this.offsetAncestorComputed) {
                     this.cachedOffsetAncestor = getOffsetAncestor(this.panelEl);
@@ -220,6 +229,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);
@@ -352,7 +367,7 @@ export class CoPopover {
         if (!el || typeof el.showPopover !== 'function')
             return;
         try {
-            if (!el.matches(':popover-open'))
+            if (!isPopoverOpen(el))
                 el.showPopover();
         }
         catch (_a) {
@@ -360,6 +375,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 +407,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 +425,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: '36563fc43d535139e1dcacf5c10f7d94ac7c3c56', class: "co-popover" }, h("div", { key: 'b89ff545f53702c42e95058449644af4336c7b8e', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: 'aacbf2fbf099af3402d2a09d2f003893ed01b6da', name: "trigger" })), (this.open || this.closing) && (h("div", { key: '571d316922717803b4645e66302068f8081e8d36', 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: 'cd42d52c6bbdf2522ce692b75ba556da35c8a5b9' })))));
     }
     static get is() { return "co-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -446,7 +476,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 ──