@prolibu-suite/cobalt-core 0.11.11 → 0.11.12

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

@@ -20,9 +20,11 @@
   width: 72px;
   height: 72px;
   border-radius: 50%;
-  /* Semánticos de MISMO valor en claro (gray-100 = surface-control): la
-     primitiva no gira y dejaba un disco claro sobre la página oscura. */
-  background: var(--co-semantic-surface-control);
+  /* Disco TRANSPARENTE con contorno de 1px border-default (auditoría de contraste
+     #8 B, 2026-10-05): el relleno surface-control (gray-100) quedaba a 1,08:1 de
+     la página. El contorno va por box-shadow inset: el disco sigue midiendo 72px. */
+  background: transparent;
+  box-shadow: inset 0 0 0 1px var(--co-semantic-border-default);
   color: var(--co-semantic-text-muted);
   margin-bottom: var(--co-spacing-xl);
 }
@@ -63,7 +65,8 @@
 
 .co-empty-state--card .co-empty-state__icon {
   margin-bottom: 0;
-  background: var(--co-semantic-surface-control);
+  /* Mismo disco transparente con contorno que la variante base (#8 B). */
+  background: transparent;
   color: var(--co-semantic-text-secondary);
 }
 

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

@@ -69,8 +69,10 @@
   transition: border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), background var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
+/* Hover = border-strong, no border-focus: la tinta sólida queda para el foco y el
+   arrastre (--drag); un hover no puede pesar como el foco (auditoría 2026-10-05). */
 .co-file-field__dropzone:hover {
-  border-color: var(--co-semantic-border-focus);
+  border-color: var(--co-semantic-border-strong);
 }
 
 .co-file-field__dropzone--drag {

package/dist/collection/components/co-icon-button/co-icon-button.css

@@ -80,7 +80,7 @@
   backdrop-filter: none;
 }
 .co-icon-button--ghost:hover:not(:disabled) {
-  background: var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+  background: var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.08));
 }
 
 /* Soft = fondo sólido `--co-semantic-surface-control` (gray-100 en claro /

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

@@ -39,6 +39,12 @@
   background: var(--co-semantic-surface-muted);
 }
 
+/* Sobre la fila seleccionada (surface-muted) la descripción en text-muted quedaba en
+   4,15:1 claro / 3,65:1 oscuro → text-secondary (5,54 / 4,95). En reposo no cambia. */
+.co-list-item--selected .co-list-item__description {
+  color: var(--co-semantic-text-secondary);
+}
+
 .co-list-item--disabled {
   opacity: 0.4;
   cursor: not-allowed;

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

@@ -20,7 +20,9 @@
      border so it never adds to the panel box). */
   box-shadow:
     var(--co-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04)),
-    inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));
+    /* border-subtle (negro 8 % claro / blanco 8 % oscuro): la primitiva cruda no giraba
+       y en oscuro el borde quedaba negro sobre negro (1,01:1). */
+    inset 0 0 0 1px var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));
   /* Tunable panel padding — default 4px; design (Header "Nuevo" menu) uses 6px. */
   padding: var(--co-menu-padding, var(--co-spacing-xs, 4px));
   min-width: 200px;
@@ -42,7 +44,7 @@
   min-width: var(--co-menu-min-width, 200px);
   box-shadow:
     var(--co-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04)),
-    inset 0 0 0 1px var(--co-menu-border-color, var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08)));
+    inset 0 0 0 1px var(--co-menu-border-color, var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08)));
 }
 
 /* Task C1 — tres hooks más, mismo patrón aditivo que los de arriba y mismos

package/dist/collection/components/co-menu-item/co-menu-item.css

@@ -10,7 +10,8 @@
  * @prop --co-menu-item-color: Color del texto.
  * @prop --co-menu-item-icon-color: Color del ícono (default: el del texto).
  * @prop --co-menu-item-hover-bg: Fondo de la fila en hover o con foco.
- * @prop --co-menu-item-selected-bg: Fondo de la fila `selected`.
+ * @prop --co-menu-item-selected-bg: Fondo de la fila `selected` (default transparente).
+ * @prop --co-menu-item-selected-font-weight: Peso del texto de la fila `selected` (default 600).
  */
 :host {
   display: block;
@@ -71,14 +72,22 @@
    quedan ACÁ, antes de `--danger:hover` (misma especificidad que
    `.co-menu-item:hover`): el hover rojo de danger gana por orden (fix C-1). */
 .co-menu-item--selected {
-  /* Fallback surface-control (= gray-100 en claro): la primitiva no giraba y en oscuro la
-     fila seleccionada quedaba casi blanca bajo texto blanco (D6). */
-  background: var(--co-menu-item-selected-bg, var(--co-semantic-surface-control, #f6f6f6));
+  /* Seleccionado = check + peso 600, SIN relleno (auditoría de contraste #5 B, 2026-10-05):
+     con el gris de antes (surface-control) el hover se leía igual o "más seleccionado" que
+     la selección. El hook --co-menu-item-selected-bg sigue para quien quiera un fondo. */
+  background: var(--co-menu-item-selected-bg, transparent);
+}
+
+/* El 600 va al rótulo principal, no a la fila: el caption (segunda línea) conserva su peso. */
+.co-menu-item--selected .co-menu-item__label-main {
+  font-weight: var(--co-menu-item-selected-font-weight, 600);
 }
 
 .co-menu-item:hover,
 .co-menu-item--submenu-open {
-  background: var(--co-menu-item-hover-bg, var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04)));
+  /* Hover = gris liviano (text-default 6 %): gira con el tema y queda por debajo de la
+     marca de seleccionado (check + 600). Antes surface-hover (negro 8 %). */
+  background: var(--co-menu-item-hover-bg, color-mix(in srgb, var(--co-semantic-text-default) 6%, transparent));
 }
 
 .co-menu-item:focus-visible {

package/dist/collection/components/co-menu-item/co-menu-item.js

@@ -20,11 +20,31 @@ export class CoMenuItem {
     constructor() {
         /** Tighter row metrics (32px instead of 36px). */
         this.dense = false;
-        /** Marks the row as selected — paints an at-rest gray-100 background. Used by
-         *  single-select menus (sort/type). */
+        /** Marks the row as selected — sin relleno: peso 600 + un check al final (salvo
+         *  que la fila use `leadingCheck`, que ya lo pinta al inicio). La fila pasa a
+         *  `role="menuitemradio"` con `aria-checked="true"` (o `menuitemcheckbox` con
+         *  `selectionMode="multiple"`). Used by selection menus (sort/type, columnas). */
         this.selected = false;
-        /** Renders a trailing check (size 15) after the label. Pair with `selected`
-         *  to mark the chosen option in a single-select menu. */
+        /** La fila pertenece a un menú de selección única: se expone como
+         *  `role="menuitemradio"` con `aria-checked` true/false aunque NO esté marcada.
+         *  `aria-checked` sobre `role="menuitem"` es ARIA inválido, y sin este prop una
+         *  fila no marcada de un menú de selección quedaría como `menuitem` pelado al lado
+         *  de su hermana `menuitemradio`. Ponerlo en TODAS las filas del grupo. Implícito
+         *  con `selected` o `leadingCheck` (que reserva el hueco en todas las filas). */
+        this.selectable = false;
+        /** Tipo de grupo de selección al que pertenece la fila (solo cuenta con
+         *  `selectable`, `selected` o `leadingCheck`):
+         *  - `'single'` (default) → `role="menuitemradio"`: una sola marcada (orden, tipo).
+         *  - `'multiple'` → `role="menuitemcheckbox"`: varias marcadas a la vez (columnas
+         *    visibles, filtros). Mismo look (peso 600 + check, sin relleno) y el mismo
+         *    `aria-checked` true/false. Ponerlo en TODAS las filas del grupo. */
+        this.selectionMode = 'single';
+        /** Legacy/redundante: `selected` ya pinta el check al final y
+         *  expone `aria-checked`. Solo, sin `selected`, `trailingCheck` dibuja un check
+         *  DECORATIVO sobre un `role="menuitem"` sin `aria-checked` (el lector de
+         *  pantalla no se entera de nada): para marcar la opción elegida usar
+         *  `selected` (+ `selectable` en las filas no marcadas del grupo). Se conserva
+         *  por compatibilidad; junto con `selected` no agrega un segundo check. */
         this.trailingCheck = false;
         /** Reserva un check de 12px AL INICIO de la fila (antes del ícono/label).
          *  A diferencia de `trailingCheck` (que solo se monta si el prop está en
@@ -195,8 +215,21 @@ export class CoMenuItem {
         // flipped submenu). The panel's own mouseenter cancels this on arrival.
         this.closeTimer = window.setTimeout(() => { this.submenuOpen = false; }, 260);
     }
+    /** La fila es marcable (pertenece a un grupo de selección, ver `selectable`).
+     *  Un disparador de submenú nunca lo es. */
+    get isCheckable() {
+        return !this.hasSubmenu && (this.selectable || this.leadingCheck || this.selected);
+    }
+    /** Rol ARIA de la fila: `menuitemcheckbox` en un grupo de selección múltiple,
+     *  `menuitemradio` en uno de selección única, `menuitem` en el resto. */
+    get role() {
+        if (!this.isCheckable)
+            return 'menuitem';
+        return this.selectionMode === 'multiple' ? 'menuitemcheckbox' : 'menuitemradio';
+    }
     render() {
         var _a;
+        const isCheckable = this.isCheckable;
         const row = (h("button", { ref: (el) => (this.rowEl = el), class: {
                 'co-menu-item': true,
                 'co-menu-item--dense': this.dense,
@@ -205,7 +238,7 @@ export class CoMenuItem {
                 'co-menu-item--danger': this.variant === 'danger',
                 'co-menu-item--submenu': this.hasSubmenu,
                 'co-menu-item--submenu-open': this.hasSubmenu && this.submenuOpen,
-            }, type: "button", role: "menuitem", "aria-haspopup": this.hasSubmenu ? 'menu' : undefined, "aria-expanded": this.hasSubmenu ? (this.submenuOpen ? 'true' : 'false') : undefined, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeydown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.leadingCheck && (h("span", { class: "co-menu-item__check co-menu-item__check--leading" }, this.selected && h("co-icon", { name: "check", size: 12 }))), this.icon && (h("span", { class: "co-menu-item__icon" }, h("co-icon", { name: this.icon, size: (_a = this.iconSize) !== null && _a !== void 0 ? _a : 16 }))), h("span", { class: { 'co-menu-item__label': true, 'co-menu-item__label--stacked': !!this.caption } }, h("span", { class: "co-menu-item__label-main" }, this.label, h("slot", { name: "label" })), this.caption && h("span", { class: "co-menu-item__caption" }, this.caption)), this.trailingCheck && (h("span", { class: "co-menu-item__check" }, h("co-icon", { name: "check", size: 15 }))), h("span", { class: "co-menu-item__suffix" }, h("slot", { name: "suffix" }), this.hasSubmenu && h("co-icon", { name: "caret-right", size: 14 }))));
+            }, type: "button", role: this.role, "aria-haspopup": this.hasSubmenu ? 'menu' : undefined, "aria-expanded": this.hasSubmenu ? (this.submenuOpen ? 'true' : 'false') : undefined, "aria-checked": isCheckable ? (this.selected ? 'true' : 'false') : undefined, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeydown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.leadingCheck && (h("span", { class: "co-menu-item__check co-menu-item__check--leading", "aria-hidden": "true" }, this.selected && h("co-icon", { name: "check", size: 12 }))), this.icon && (h("span", { class: "co-menu-item__icon" }, h("co-icon", { name: this.icon, size: (_a = this.iconSize) !== null && _a !== void 0 ? _a : 16 }))), h("span", { class: { 'co-menu-item__label': true, 'co-menu-item__label--stacked': !!this.caption } }, h("span", { class: "co-menu-item__label-main" }, this.label, h("slot", { name: "label" })), this.caption && h("span", { class: "co-menu-item__caption" }, this.caption)), (this.trailingCheck || (this.selected && !this.leadingCheck)) && (h("span", { class: "co-menu-item__check", "aria-hidden": "true" }, h("co-icon", { name: "check", size: 15 }))), h("span", { class: "co-menu-item__suffix" }, h("slot", { name: "suffix" }), this.hasSubmenu && h("co-icon", { name: "caret-right", size: 14 }))));
         if (!this.hasSubmenu) {
             // Leaf — the default slot is unused for leaves; ignore it.
             return h("div", { class: "co-menu-item__wrap" }, row);
@@ -342,7 +375,7 @@ export class CoMenuItem {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Marks the row as selected \u2014 paints an at-rest gray-100 background. Used by\nsingle-select menus (sort/type)."
+                    "text": "Marks the row as selected \u2014 sin relleno: peso 600 + un check al final (salvo\nque la fila use `leadingCheck`, que ya lo pinta al inicio). La fila pasa a\n`role=\"menuitemradio\"` con `aria-checked=\"true\"` (o `menuitemcheckbox` con\n`selectionMode=\"multiple\"`). Used by selection menus (sort/type, columnas)."
                 },
                 "getter": false,
                 "setter": false,
@@ -350,6 +383,46 @@ export class CoMenuItem {
                 "attribute": "selected",
                 "defaultValue": "false"
             },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "La fila pertenece a un men\u00FA de selecci\u00F3n \u00FAnica: se expone como\n`role=\"menuitemradio\"` con `aria-checked` true/false aunque NO est\u00E9 marcada.\n`aria-checked` sobre `role=\"menuitem\"` es ARIA inv\u00E1lido, y sin este prop una\nfila no marcada de un men\u00FA de selecci\u00F3n quedar\u00EDa como `menuitem` pelado al lado\nde su hermana `menuitemradio`. Ponerlo en TODAS las filas del grupo. Impl\u00EDcito\ncon `selected` o `leadingCheck` (que reserva el hueco en todas las filas)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable",
+                "defaultValue": "false"
+            },
+            "selectionMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'single' | 'multiple'",
+                    "resolved": "\"multiple\" | \"single\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tipo de grupo de selecci\u00F3n al que pertenece la fila (solo cuenta con\n`selectable`, `selected` o `leadingCheck`):\n- `'single'` (default) \u2192 `role=\"menuitemradio\"`: una sola marcada (orden, tipo).\n- `'multiple'` \u2192 `role=\"menuitemcheckbox\"`: varias marcadas a la vez (columnas\n  visibles, filtros). Mismo look (peso 600 + check, sin relleno) y el mismo\n  `aria-checked` true/false. Ponerlo en TODAS las filas del grupo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selection-mode",
+                "defaultValue": "'single'"
+            },
             "trailingCheck": {
                 "type": "boolean",
                 "mutable": false,
@@ -362,7 +435,7 @@ export class CoMenuItem {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Renders a trailing check (size 15) after the label. Pair with `selected`\nto mark the chosen option in a single-select menu."
+                    "text": "Legacy/redundante: `selected` ya pinta el check al final y\nexpone `aria-checked`. Solo, sin `selected`, `trailingCheck` dibuja un check\nDECORATIVO sobre un `role=\"menuitem\"` sin `aria-checked` (el lector de\npantalla no se entera de nada): para marcar la opci\u00F3n elegida usar\n`selected` (+ `selectable` en las filas no marcadas del grupo). Se conserva\npor compatibilidad; junto con `selected` no agrega un segundo check."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -683,6 +683,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
  * @prop --co-option-list-item-font-size: Tamaño del texto de la fila (default 14px).
  * @prop --co-option-list-active-bg: Fondo de la fila activa (hover o teclado).
  * @prop --co-option-list-active-ring: Sombra/anillo de la fila activa.
+ * @prop --co-option-list-selected-label-weight: Peso del rótulo de la fila seleccionada (default 600).
  * @prop --co-option-list-label-weight: Peso del label de la fila.
  * @prop --co-option-list-text-gap: Separación entre el título y la descripción de la fila.
  * @prop --co-option-list-icon-tile-size: Lado del recuadro del ícono (default 22px).
@@ -873,14 +874,21 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   margin-bottom: var(--co-spacing-xxs, 2px);
 }
 
+/* Activa (hover o teclado) = gris liviano text-default 6 %, gira con el tema. Antes
+   surface-hover (negro 8 %), el mismo gris que el seleccionado: no se distinguían. */
 .co-option-list__option--active {
-  background: var(--co-option-list-active-bg, var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04)));
+  background: var(--co-option-list-active-bg, color-mix(in srgb, var(--co-semantic-text-default) 6%, transparent));
   box-shadow: var(--co-option-list-active-ring, none);
 }
 
-/* Seleccionado = mismo gris-100 del Figma; el affordance (X/check) distingue. */
-.co-option-list__option--selected {
-  background: var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04));
+/* Seleccionado = SIN relleno: la marca es el affordance (check/X) + rótulo en 600
+   (auditoría de contraste #5 B, 2026-10-05). Con el gris de antes (surface-hover) el hover
+   se leía igual que la selección. No se declara ningún background en --selected: así la
+   fila seleccionada que además está activa muestra el gris del hover (--active) y en
+   reposo queda en el fondo de la fila (--co-option-list-item-bg).
+   Peso: `--co-option-list-selected-label-weight` (default 600). */
+.co-option-list__option--selected .co-option-list__label {
+  font-weight: var(--co-option-list-selected-label-weight, 600);
 }
 
 .co-option-list__option--disabled {

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

@@ -770,7 +770,7 @@ export class CoOptionList {
                 'co-option-list__option--lifted': !this.listDragActive && this.dragKey === item._id,
                 'co-option-list__option--drop-before': this.listDragActive && this.overKey === item._id && !this.dropAfter,
                 'co-option-list__option--drop-after': this.listDragActive && this.overKey === item._id && this.dropAfter,
-            }, key: item._id, id: `co-optlist-${index}`, "data-id": item._id, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : 'false', draggable: listDragRow && this.armedKey === item._id, onClick: () => !item.disabled && this.pick(item), onMouseEnter: () => { this.activeIndex = index; }, onDragStart: listDragRow ? (e) => this.handleRowDragStart(e, item._id) : undefined, onDragOver: listDragRow ? (e) => this.handleRowDragOver(e, item._id) : undefined, onDrop: listDragRow ? (e) => this.handleRowDrop(e, item._id) : undefined, onDragEnd: listDragRow ? this.handleRowDragEnd : undefined, onDragLeave: listDragRow ? (e) => this.handleRowDragLeave(e, item._id) : undefined }, (ptrDragRow || listDragRow) && (h("span", { class: "co-option-list__drag-handle", part: "drag-handle", title: "Drag to reorder", onMouseDown: listDragRow ? () => (this.armedKey = item._id) : undefined, onPointerDown: ptrDragRow ? (e) => this.startPointerDrag(e, item._id) : undefined, onClick: (e) => e.stopPropagation() }, h("co-icon", { name: "dots-six-vertical", size: 16 }))), this.renderLeading(item), h("div", { class: "co-option-list__text" }, h("span", { class: "co-option-list__title" }, h("span", { class: "co-option-list__label", style: item.labelColor ? { color: item.labelColor, fontWeight: '600' } : undefined }, this.renderLabelText(item.label)), item.suffix && this.suffixAlign !== 'end' && h("span", { class: "co-option-list__suffix" }, "- ", item.suffix), item.badge && this.renderBadge(item.badge)), item.description && h("span", { class: "co-option-list__desc" }, item.description)), item.suffix && this.suffixAlign === 'end' && h("span", { class: "co-option-list__suffix co-option-list__suffix--end" }, item.suffix), this.pinnable && (h("button", { class: { 'co-option-list__pin': true, 'co-option-list__pin--active': !!item.pinned }, type: "button", tabIndex: -1, "aria-label": item.pinned ? `Unpin ${item.label}` : `Pin ${item.label}`, "aria-pressed": item.pinned ? 'true' : 'false', onClick: (e) => { e.stopPropagation(); this.coPinToggle.emit({ item }); } }, h("co-icon", { name: "push-pin", size: 16, weight: item.pinned ? 'fill' : 'regular' }))), isSelected && this.removableItems && this.multiple && (h("button", { class: "co-option-list__row-action", type: "button", tabIndex: -1, "aria-label": `Remove ${item.label}`, onClick: (e) => { e.stopPropagation(); this.coRemoveItem.emit(item._id); } }, h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), isSelected && !this.removableItems && this.selectedAffordance === 'deselect' && (h("button", { class: "co-option-list__row-action", type: "button", tabIndex: -1, "aria-label": `Deselect ${item.label}`, onClick: (e) => { e.stopPropagation(); this.deselectItem(item); } }, h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), isSelected && !this.removableItems && this.selectedAffordance === 'check' && (h("co-icon", { name: "check", size: 16, class: "co-option-list__check" }))));
+            }, key: item._id, id: `co-optlist-${index}`, "data-id": item._id, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : 'false', draggable: listDragRow && this.armedKey === item._id, onClick: () => !item.disabled && this.pick(item), onMouseEnter: () => { this.activeIndex = index; }, onDragStart: listDragRow ? (e) => this.handleRowDragStart(e, item._id) : undefined, onDragOver: listDragRow ? (e) => this.handleRowDragOver(e, item._id) : undefined, onDrop: listDragRow ? (e) => this.handleRowDrop(e, item._id) : undefined, onDragEnd: listDragRow ? this.handleRowDragEnd : undefined, onDragLeave: listDragRow ? (e) => this.handleRowDragLeave(e, item._id) : undefined }, (ptrDragRow || listDragRow) && (h("span", { class: "co-option-list__drag-handle", part: "drag-handle", title: "Drag to reorder", onMouseDown: listDragRow ? () => (this.armedKey = item._id) : undefined, onPointerDown: ptrDragRow ? (e) => this.startPointerDrag(e, item._id) : undefined, onClick: (e) => e.stopPropagation() }, h("co-icon", { name: "dots-six-vertical", size: 16 }))), this.renderLeading(item), h("div", { class: "co-option-list__text" }, h("span", { class: "co-option-list__title" }, h("span", { class: "co-option-list__label", style: item.labelColor ? { color: item.labelColor, fontWeight: '600' } : undefined }, this.renderLabelText(item.label)), item.suffix && this.suffixAlign !== 'end' && h("span", { class: "co-option-list__suffix" }, "- ", item.suffix), item.badge && this.renderBadge(item.badge)), item.description && h("span", { class: "co-option-list__desc" }, item.description)), item.suffix && this.suffixAlign === 'end' && h("span", { class: "co-option-list__suffix co-option-list__suffix--end" }, item.suffix), this.pinnable && (h("button", { class: { 'co-option-list__pin': true, 'co-option-list__pin--active': !!item.pinned }, type: "button", tabIndex: -1, "aria-label": item.pinned ? `Unpin ${item.label}` : `Pin ${item.label}`, "aria-pressed": item.pinned ? 'true' : 'false', onClick: (e) => { e.stopPropagation(); this.coPinToggle.emit({ item }); } }, h("co-icon", { name: "push-pin", size: 16, weight: item.pinned ? 'fill' : 'regular' }))), isSelected && this.removableItems && this.multiple && (h("button", { class: "co-option-list__row-action", type: "button", tabIndex: -1, "aria-label": `Remove ${item.label}`, onClick: (e) => { e.stopPropagation(); this.coRemoveItem.emit(item._id); } }, h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), isSelected && !this.removableItems && this.selectedAffordance === 'deselect' && (h("button", { class: "co-option-list__row-action", type: "button", tabIndex: -1, "aria-label": `Deselect ${item.label}`, onClick: (e) => { e.stopPropagation(); this.deselectItem(item); } }, h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), isSelected && !((this.removableItems && this.multiple) || (!this.removableItems && this.selectedAffordance === 'deselect')) && (h("co-icon", { name: "check", size: 16, class: "co-option-list__check", "aria-hidden": "true" }))));
     }
     renderVirtual(items, selectedIds) {
         const { totalHeight, startIdx, endIdx, offsetY } = virtualSlice(this.scrollTop, items.length);
@@ -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: '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
+        return (h("div", { key: '56e2db1d58bebbbd37d10e6813be9034ac575323', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: '0408ef8880e6be71c8a3fc172db6ee65dd6689a0', class: "co-option-list__search", part: "search" }, h("co-icon", { key: '0300cc9e1d430da5b50a5ffa4e9ece94f43b104c', name: "magnifying-glass", size: 16 }), h("input", { key: 'f540c8fcc9eb17167133f8ffffc5e1da5a20d1dc', 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: '4da1c79aab9efa870239dc1ea58d286935d7fda4', name: "header" }), h("div", { key: 'aaed96ccda574661e127abe5deee921468c42a47', 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: 'ea94def9450c37a09c639eea32f8e1ec829dbcaf', class: "co-option-list__inner" }, showClear && (h("button", { key: '32102669f7b70d56d1831c9543c1a50799b1cf6a', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: 'c09f3fa1418494971dc1d80207bcd595b4a0fe38', name: "x-circle", size: 14 }), h("span", { key: 'd6f4afa32a32e477a5131039da5eb3f7eb0d7018' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: '1abb47c6560856992103b8fd5962ed2ce57c356a', class: "co-option-list__loading" }, h("co-loader", { key: 'e2a562325238349ad9e493c276f4c099b1e06ec0', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: 'fa3cad402047a7ea7d919abca0f6808b2eb2797a', class: "co-option-list__empty" }, h("co-icon", { key: '65d553e95e4b4a7a71c7675447892871692b4e8a', name: "magnifying-glass", size: 20 }), h("span", { key: '591a2bcf9dc6148c5f22a9aa0da1fa3ba647b33b' }, 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: '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" })));
+                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (h("div", { key: '8d8b91d2ef9dc1fe9b97873da384080d5721617c', class: "co-option-list__loading-more" }, h("co-loader", { key: '134bb46ec2f27500f8ef6c13613bd3ab3c15c1f2', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: 'e850a68ccfc2f4033edaa41257728e141f55d556', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: '7c838d68ec977e650922c59cd8314ee530e15ad4', name: "footer" })));
     }
     static get is() { return "co-option-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -213,13 +213,22 @@
   text-align: left;
 }
 
+/* Opción = patrón #5 B de la auditoría de contraste (2026-10-05), el mismo de co-option-list:
+   hover = gris liviano text-default 6 % (gira con el tema); seleccionada = SIN relleno, rótulo
+   en 600 + check decorativo al final (aria-hidden; el estado lo expone aria-selected de la
+   fila). Antes la seleccionada pintaba un tinte y el hover surface-hover (8 %): el hover pesaba
+   más que la selección y no se distinguían. */
 .co-phone-field__option:hover {
-  background: var(--co-semantic-surface-hover);
+  background: color-mix(in srgb, var(--co-semantic-text-default) 6%, transparent);
 }
 
 .co-phone-field__option--selected {
-  background: color-mix(in srgb, var(--co-semantic-border-focus) 8%, transparent);
-  font-weight: 500;
+  font-weight: 600;
+}
+
+.co-phone-field__option-check {
+  flex-shrink: 0;
+  color: var(--co-semantic-text-default);
 }
 
 .co-phone-field__option-flag {

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

@@ -175,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: '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)))));
+        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), d.iso2 === this.selectedIso2 && (h("co-icon", { name: "check", size: 16, class: "co-phone-field__option-check", "aria-hidden": "true" })))))))), this.helperText && (h("div", { key: '686669982abbcb8f1c2c5d045a3a04546a0a0e46', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: '030b2538e516b2a6aaa583e4581638b3772f7a8a', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '649c30fdf2f2b6a1cd43687b972bd727eba6bcc9', class: "co-phone-field__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-phone-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -476,7 +476,7 @@ export class CoPopover {
                     "references": {
                         "PopoverPlacement": {
                             "location": "local",
-                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-popover/co-popover.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-a11y/packages/core/src/components/co-popover/co-popover.tsx",
                             "id": "src/components/co-popover/co-popover.tsx::PopoverPlacement"
                         }
                     }

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

@@ -4,7 +4,9 @@
 
 .co-progress-circle {
   --_color: var(--co-semantic-status-info, #2563eb);
-  --_track: var(--co-color-opacity-negro-8, rgba(0, 0, 0, 0.08));
+  /* surface-hover gira con el tema: en claro es el mismo negro 8 % (sin cambio visual); la
+     primitiva negro-8 se perdía en oscuro (1,01:1 → 1,18:1). */
+  --_track: var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.08));
 
   position: relative;
   display: inline-flex;

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

@@ -52,6 +52,13 @@
   overflow: hidden;
 }
 
+/* Foco por teclado (H1, auditoría a11y 2026-10-05): trazo border-focus (tinta sólida desde
+   #2D/#3D), no el halo focus-ring. box-shadow y no outline: el propio overflow:hidden no
+   recorta la sombra del elemento. Molde co-checkbox. */
+.co-radio:focus-visible {
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus);
+}
+
 /* ─── SIZES ─────────────────────────────────────────────────── */
 .co-radio--small {
   width: 16px;
@@ -64,8 +71,10 @@
 }
 
 /* ─── UNCHECKED ─────────────────────────────────────────────── */
+/* #3D (auditoría de contraste 2026-10-05): contorno border-field, el mismo de los campos
+   (≥3:1). border-default (16%) quedaba a ~1,3:1. */
 .co-radio:not(.co-radio--checked) {
-  border-color: var(--co-semantic-border-default);
+  border-color: var(--co-semantic-border-field);
 }
 
 /* ─── CHECKED ───────────────────────────────────────────────── */

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/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-radio-group/co-radio-group.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-a11y/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

@@ -39,7 +39,9 @@
   border: none;
   background: transparent;
   cursor: pointer;
-  color: var(--co-semantic-border-subtle);
+  /* Estrella vacía = indicador no textual (WCAG 1.4.11): border-subtle (8 %) daba 1,17:1 contra
+     la página. text-muted: 5,33 claro / 5,58 oscuro. */
+  color: var(--co-semantic-text-muted);
   transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 

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

@@ -1356,7 +1356,7 @@ export class CoRefField {
                     "references": {
                         "RefFieldOption": {
                             "location": "local",
-                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-ref-field/co-ref-field.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-a11y/packages/core/src/components/co-ref-field/co-ref-field.tsx",
                             "id": "src/components/co-ref-field/co-ref-field.tsx::RefFieldOption"
                         }
                     }
@@ -1497,7 +1497,7 @@ export class CoRefField {
                     "references": {
                         "RefFieldOption": {
                             "location": "local",
-                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-ref-field/co-ref-field.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-a11y/packages/core/src/components/co-ref-field/co-ref-field.tsx",
                             "id": "src/components/co-ref-field/co-ref-field.tsx::RefFieldOption"
                         }
                     }
@@ -1518,7 +1518,7 @@ export class CoRefField {
                     "references": {
                         "RefFieldOption": {
                             "location": "local",
-                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-ref-field/co-ref-field.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-a11y/packages/core/src/components/co-ref-field/co-ref-field.tsx",
                             "id": "src/components/co-ref-field/co-ref-field.tsx::RefFieldOption"
                         }
                     }
@@ -1557,7 +1557,7 @@ export class CoRefField {
                         },
                         "RefFieldOption": {
                             "location": "local",
-                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-ref-field/co-ref-field.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-a11y/packages/core/src/components/co-ref-field/co-ref-field.tsx",
                             "id": "src/components/co-ref-field/co-ref-field.tsx::RefFieldOption"
                         }
                     },

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

@@ -160,7 +160,7 @@ export class CoSegmentedBar {
                     "references": {
                         "CoSegment": {
                             "location": "local",
-                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-segmented-bar/co-segmented-bar.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-a11y/packages/core/src/components/co-segmented-bar/co-segmented-bar.tsx",
                             "id": "src/components/co-segmented-bar/co-segmented-bar.tsx::CoSegment"
                         }
                     }

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

@@ -848,7 +848,7 @@ export class CoSelect {
                     "references": {
                         "SelectOption": {
                             "location": "local",
-                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-select/co-select.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-a11y/packages/core/src/components/co-select/co-select.tsx",
                             "id": "src/components/co-select/co-select.tsx::SelectOption"
                         }
                     }

package/dist/collection/components/co-sidebar-nav/co-sidebar-nav.js

@@ -536,7 +536,7 @@ export class CoSidebarNav {
                     "references": {
                         "NavigateDetail": {
                             "location": "local",
-                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-sidebar-nav/co-sidebar-nav.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-a11y/packages/core/src/components/co-sidebar-nav/co-sidebar-nav.tsx",
                             "id": "src/components/co-sidebar-nav/co-sidebar-nav.tsx::NavigateDetail"
                         }
                     }

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

@@ -5,11 +5,14 @@
 .co-skeleton {
   height: 1em;
   border-radius: var(--co-border-radius-xs);
+  /* Base surface-muted (gray-200 claro / gray-650 oscuro): la de antes partía de
+     surface-secondary (= el fondo de la página) y la barra en reposo era invisible
+     (<=1,17:1). El brillo del sweep es la mezcla 50 % con surface-page. */
   background: linear-gradient(
     90deg,
-    var(--co-semantic-surface-secondary) 0%,
-    var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.04)) 50%,
-    var(--co-semantic-surface-secondary) 100%
+    var(--co-semantic-surface-muted) 0%,
+    color-mix(in srgb, var(--co-semantic-surface-muted), var(--co-semantic-surface-page) 50%) 50%,
+    var(--co-semantic-surface-muted) 100%
   );
   background-size: 200% 100%;
   animation: co-skeleton-sweep 1.2s ease-in-out infinite;

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

@@ -96,7 +96,13 @@
 .co-slider__track {
   width: 100%;
   height: var(--co-slider-track-thickness, 4px);
-  background: var(--co-semantic-border-subtle);
+  /* Riel sin llenar = indicador no textual (WCAG 1.4.11): border-subtle (8 %) daba 1,17:1
+     contra la página. control-track-off (gray-500, la pista apagada de co-switch): 3,54 claro /
+     5,58 oscuro contra la página; el relleno queda a 4,78 (claro) / 3,54 (oscuro) del riel.
+     Compromiso aceptado: los rellenos de ESTADO (error/success/warning) quedan a ~1,6-1,9 del riel
+     gris; ahí el valor lo lleva el pulgar (mismo color, contra la página) y el estado, el texto de
+     ayuda. En suite-v2 solo se usa `error`, transitorio, en validación (FieldSlider). */
+  background: var(--co-semantic-control-track-off);
   border-radius: var(--co-border-radius-full);
   overflow: hidden;
 }
@@ -112,6 +118,11 @@
   background: var(--co-semantic-text-disabled);
 }
 
+/* Deshabilitado conserva el riel tenue de siempre (exento de 1.4.11). */
+.co-slider--disabled .co-slider__track {
+  background: var(--co-semantic-border-subtle);
+}
+
 .co-slider--error .co-slider__fill { background: var(--co-semantic-status-error); }
 .co-slider--success .co-slider__fill { background: var(--co-semantic-status-success); }
 .co-slider--warning .co-slider__fill { background: var(--co-color-status-review); }
@@ -267,6 +278,15 @@
   transition: none;
 }
 
+/* Foco de teclado (WCAG 2.4.7). El nodo enfocable es el `<input type="range">` oculto, que va
+   DESPUÉS del riel en el DOM: un `~` no alcanza al thumb, así que se sube por `:has()` desde la
+   raíz. Anillo de la casa: separador surface-page + trazo border-focus (3,29 claro / 5,33
+   oscuro). Va DESPUÉS de `--dragging` y pesa (0,3,0): el foco por teclado se ve aunque el
+   arrastre siga marcado. `:focus-visible`, nunca `:focus` pelado: el click no lo prende. */
+.co-slider:has(.co-slider__native:focus-visible) .co-slider__thumb {
+  box-shadow: 0 0 0 2px var(--co-semantic-surface-page), 0 0 0 4px var(--co-semantic-border-focus);
+}
+
 .co-slider--disabled .co-slider__thumb {
   background: var(--co-semantic-text-disabled);
 }