@prolibu-suite/cobalt-core 0.11.12 → 0.11.13

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

@@ -20,31 +20,11 @@ export class CoMenuItem {
     constructor() {
         /** Tighter row metrics (32px instead of 36px). */
         this.dense = false;
-        /** 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). */
+        /** Marks the row as selected — paints an at-rest gray-100 background. Used by
+         *  single-select menus (sort/type). */
         this.selected = false;
-        /** 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. */
+        /** Renders a trailing check (size 15) after the label. Pair with `selected`
+         *  to mark the chosen option in a single-select menu. */
         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
@@ -215,21 +195,8 @@ 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,
@@ -238,7 +205,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: 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 }))));
+            }, 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 }))));
         if (!this.hasSubmenu) {
             // Leaf — the default slot is unused for leaves; ignore it.
             return h("div", { class: "co-menu-item__wrap" }, row);
@@ -375,7 +342,7 @@ export class CoMenuItem {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "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)."
+                    "text": "Marks the row as selected \u2014 paints an at-rest gray-100 background. Used by\nsingle-select menus (sort/type)."
                 },
                 "getter": false,
                 "setter": false,
@@ -383,46 +350,6 @@ 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,
@@ -435,7 +362,7 @@ export class CoMenuItem {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "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."
+                    "text": "Renders a trailing check (size 15) after the label. Pair with `selected`\nto mark the chosen option in a single-select menu."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -683,7 +683,6 @@ 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).
@@ -874,21 +873,14 @@ 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, color-mix(in srgb, var(--co-semantic-text-default) 6%, transparent));
+  background: var(--co-option-list-active-bg, var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04)));
   box-shadow: var(--co-option-list-active-ring, none);
 }
 
-/* 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);
+/* 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));
 }
 
 .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.multiple) || (!this.removableItems && this.selectedAffordance === 'deselect')) && (h("co-icon", { name: "check", size: 16, class: "co-option-list__check", "aria-hidden": "true" }))));
+            }, 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" }))));
     }
     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: '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
+        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: '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" })));
+                : 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-phone-field/co-phone-field.css

@@ -213,22 +213,13 @@
   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: color-mix(in srgb, var(--co-semantic-text-default) 6%, transparent);
+  background: var(--co-semantic-surface-hover);
 }
 
 .co-phone-field__option--selected {
-  font-weight: 600;
-}
-
-.co-phone-field__option-check {
-  flex-shrink: 0;
-  color: var(--co-semantic-text-default);
+  background: color-mix(in srgb, var(--co-semantic-border-focus) 8%, transparent);
+  font-weight: 500;
 }
 
 .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), 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)))));
+        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"; }

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

@@ -476,7 +476,7 @@ export class CoPopover {
                     "references": {
                         "PopoverPlacement": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-a11y/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-circle/co-progress-circle.css

@@ -4,9 +4,7 @@
 
 .co-progress-circle {
   --_color: var(--co-semantic-status-info, #2563eb);
-  /* 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));
+  --_track: var(--co-color-opacity-negro-8, rgba(0, 0, 0, 0.08));
 
   position: relative;
   display: inline-flex;

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

@@ -52,13 +52,6 @@
   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;
@@ -71,10 +64,8 @@
 }
 
 /* ─── 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-field);
+  border-color: var(--co-semantic-border-default);
 }
 
 /* ─── 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/worktrees/cobalt-release-a11y/packages/core/src/components/co-radio-group/co-radio-group.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-radio-group/co-radio-group.tsx",
                             "id": "src/components/co-radio-group/co-radio-group.tsx::RadioOption"
                         }
                     }

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

@@ -39,9 +39,7 @@
   border: none;
   background: transparent;
   cursor: pointer;
-  /* 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);
+  color: var(--co-semantic-border-subtle);
   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/worktrees/cobalt-release-a11y/packages/core/src/components/co-ref-field/co-ref-field.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-ref-field/co-ref-field.tsx",
                             "id": "src/components/co-ref-field/co-ref-field.tsx::RefFieldOption"
                         }
                     }
@@ -1497,7 +1497,7 @@ export class CoRefField {
                     "references": {
                         "RefFieldOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-a11y/packages/core/src/components/co-ref-field/co-ref-field.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-ref-field/co-ref-field.tsx",
                             "id": "src/components/co-ref-field/co-ref-field.tsx::RefFieldOption"
                         }
                     }
@@ -1518,7 +1518,7 @@ export class CoRefField {
                     "references": {
                         "RefFieldOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-a11y/packages/core/src/components/co-ref-field/co-ref-field.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-ref-field/co-ref-field.tsx",
                             "id": "src/components/co-ref-field/co-ref-field.tsx::RefFieldOption"
                         }
                     }
@@ -1557,7 +1557,7 @@ export class CoRefField {
                         },
                         "RefFieldOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-a11y/packages/core/src/components/co-ref-field/co-ref-field.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-ref-field/co-ref-field.tsx",
                             "id": "src/components/co-ref-field/co-ref-field.tsx::RefFieldOption"
                         }
                     },

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

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

@@ -894,6 +894,51 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   box-shadow: 0 0 0 1px var(--co-semantic-border-subtle);
 }
 
+/* Logo (`logo`): marca CUADRADA de una opción —proveedor, integración— en el trigger
+   (seleccionada) y en las filas. A diferencia de la bandera no se recorta ni se
+   enmarca: `contain`, sin radio ni aro (el aro es del rectángulo de una bandera). */
+.co-select__logo,
+.co-select__option-logo {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  object-fit: contain;
+}
+
+/* `logoMono`: marca de UNA tinta (OpenAI, Apple…) pintada con la tinta del texto por
+   máscara, así sigue al tema — un <img> no hereda `color` y la marca negra desaparecía
+   en oscuro. La URL va inline (`mask-image`, desde el tsx); lo demás vive acá. */
+.co-select__logo--mono,
+.co-select__option-logo--mono {
+  color: var(--co-semantic-text-default);
+  background-color: currentColor;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+.co-select--disabled .co-select__logo--mono {
+  color: var(--co-semantic-text-disabled);
+}
+
+/* Alto contraste de Windows (forced-colors): el sistema fuerza `background-color` a Canvas
+   —el color del fondo— y la máscara no dejaba ni un píxel (medido en Chromium). La marca va
+   en la tinta del texto del sistema, y en GrayText con el trigger deshabilitado. */
+@media (forced-colors: active) {
+  .co-select__logo--mono,
+  .co-select__option-logo--mono {
+    forced-color-adjust: none;
+    background-color: CanvasText;
+  }
+
+  .co-select--disabled .co-select__logo--mono {
+    background-color: GrayText;
+  }
+}
+
 .co-select__icon {
   flex-shrink: 0;
   color: var(--co-semantic-text-muted);
@@ -1280,7 +1325,8 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   border-radius: var(--co-border-radius-xs, 8px);
 }
 
-.co-select__dropdown--dark .co-select__option-label {
+.co-select__dropdown--dark .co-select__option-label,
+.co-select__dropdown--dark .co-select__option-logo--mono {
   color: var(--co-semantic-text-inverse);
 }
 

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

@@ -3,6 +3,8 @@ import { RequiredMark } from "../../utils/requiredMark";
 import { OverlayScrollbars } from "overlayscrollbars";
 import { highlightSegments, rankByMatch } from "../../utils/normalizeText";
 import { LEGACY_ROW_METRICS, resolveRowMetrics, scrollTopToReveal, virtualSlice } from "./virtualRows";
+/** `url("…")` safe for any URL, data-URIs included: escapes `\` and `"`, drops line breaks. */
+const cssUrl = (src) => `url("${src.replace(/[\\"]/g, '\\$&').replace(/[\r\n]/g, '')}")`;
 /**
  * Selector desplegable de una o varias opciones de una lista conocida, con
  * búsqueda opcional del lado del cliente y lista virtualizada. Para opciones que
@@ -23,8 +25,8 @@ export class CoSelect {
         this.layout = 'vertical';
         /** Estado de validación: pinta el borde y el `helperText` con el color del estado. */
         this.status = 'default';
-        /** Opciones: array de `{ value, label, icon?, image?, disabled? }`, array de strings
-         *  (value = label), o ese mismo array como JSON desde HTML. */
+        /** Opciones: array de `{ value, label, icon?, image?, logo?, logoMono?, disabled? }`, array de
+         *  strings (value = label), o ese mismo array como JSON desde HTML. */
         this.options = '[]';
         /** Selección: el `value` de la opción en single; en `multiple`, array o JSON array.
          *  `''` significa «sin selección» (una opción con `value: ''` no se puede marcar).
@@ -356,7 +358,7 @@ export class CoSelect {
     get hasValue() {
         return this.selectedValues.length > 0;
     }
-    /** The selected option in single mode (used to show its flag/image in the trigger). */
+    /** The selected option in single mode (used to show its flag/image or logo in the trigger). */
     get selectedOption() {
         if (this.multiple)
             return undefined;
@@ -529,6 +531,16 @@ export class CoSelect {
             return label;
         return segs.map((s) => (s.match ? h("span", { class: "co-select__match" }, s.text) : s.text));
     }
+    /** `logo` de una opción: `<img>` a color o, con `logoMono`, una máscara que pinta la tinta del
+     *  texto (la URL va inline; tamaño, posición y tinta los pone el CSS). `lazy` solo en las filas,
+     *  igual que la bandera: el trigger está a la vista. */
+    renderLogo(opt, cls, lazy) {
+        if (opt.logoMono) {
+            const src = cssUrl(opt.logo);
+            return h("span", { class: `${cls} ${cls}--mono`, style: { '-webkit-mask-image': src, 'mask-image': src }, "aria-hidden": "true" });
+        }
+        return h("img", { class: cls, src: opt.logo, alt: "", loading: lazy ? 'lazy' : undefined });
+    }
     /** `?? LEGACY`: el harness de specs no siembra inicializadores de campo en
      *  todos los casos; en el build real `rowMetrics` siempre existe. */
     get metrics() {
@@ -539,7 +551,7 @@ export class CoSelect {
         return virtualSlice(items.length, this.scrollTop || 0, this.metrics, CoSelect.VIEWPORT_ITEMS, CoSelect.OVERSCAN);
     }
     render() {
-        var _a, _b;
+        var _a, _b, _c, _d;
         const selected = this.selectedValues;
         const options = this.filteredOptions;
         // Se calcula UNA vez sobre `options` (no en un getter): el virtualizador
@@ -549,7 +561,7 @@ export class CoSelect {
         const activeOptionId = this.isOpen && this.activeIndex >= 0 && this.activeIndex < options.length
             ? this.optionId(this.activeIndex)
             : undefined;
-        return (h("div", { key: 'd121ba9ec0b29e6e70702185d055f9f2590fcf60', class: {
+        return (h("div", { key: '6003cc4133eddbbb6fced6d10a13c2771727df84', class: {
                 'co-select': true,
                 'co-select--open': this.isOpen,
                 'co-select--disabled': this.disabled,
@@ -558,22 +570,23 @@ export class CoSelect {
                 'co-select--flat': this.variant === 'flat',
                 'co-select--soft': this.variant === 'soft',
                 'co-select--inline-help': this.labelStyle === 'inline-help',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'b5ba06d1b361ba3f0488b3835e2ae9fbc723ee3f', class: "co-select__labels" }, this.label && h("label", { key: '8131f52d757b71d694ddbb5fe2e83e0762237627', class: "co-select__label" }, this.label, h(RequiredMark, { key: '31de4113e6cc17e7be6ecf82cf4d9108878cad67', required: this.required })), this.secondaryLabel && h("span", { key: 'd499ef261e4c8b375e6058eae2b18fa9e755008b', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: '2cb6fc46ec1ecab4e1ccdae6a44d9394201fb339', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4,
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: '43b148e8868b1641d025697da63e864760acad2f', class: "co-select__labels" }, this.label && h("label", { key: '13f801c1fd6bd360278c9d76b87eb1c4e3c17d96', class: "co-select__label" }, this.label, h(RequiredMark, { key: 'ab7fbf24df924590a2a2f3e8b5ec32d5bae8b2e3', required: this.required })), this.secondaryLabel && h("span", { key: '2346a6b8281d7661d055b7e662aa5f2dd12ce672', class: "co-select__secondary-label" }, this.secondaryLabel))), h("co-popover", { key: '33947720df541df7ef1db7ab299bb39479a3cf0d', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4,
             // menuSurface="dark": el panel oscuro pinta su propio chrome (fondo
             // negro, radio xs, sin borde ni sombra — Figma 4750:23242), así que
             // el co-popover va `bare` para no sumar el borde hairline ni la
             // sombra del panel claro (y cualquier --co-popover-shadow heredada
             // del contexto). En "light" (default) no cambia nada.
-            bare: this.menuSurface === 'dark', onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '4e85e1c3256c40b93336fc282afaf5cb684f3af0', slot: "trigger", class: "co-select__trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-label": this.label || this.ariaLabelText || undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-controls": CoSelect.LISTBOX_ID, "aria-activedescendant": activeOptionId, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.iconLeft && (h("co-icon", { key: 'b70cb41a5da6e4b0fb5c70d88658d9a15b8ff730', name: this.iconLeft, size: (_a = this.iconSize) !== null && _a !== void 0 ? _a : 16, class: "co-select__icon" })), ((_b = this.selectedOption) === null || _b === void 0 ? void 0 : _b.image) && (h("img", { key: 'e594304493fc463f48c35a8a7526488664d7300e', class: "co-select__flag", src: this.selectedOption.image, alt: "" })), this.multiple && this.hasValue ? (h("div", { class: "co-select__chips" }, this.selectedValues.map((v) => {
+            bare: this.menuSurface === 'dark', onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'ecf35c28e3f5a8986f55387617c1c105d2d9764e', slot: "trigger", class: "co-select__trigger", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-label": this.label || this.ariaLabelText || undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-controls": CoSelect.LISTBOX_ID, "aria-activedescendant": activeOptionId, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.iconLeft && (h("co-icon", { key: '28ae3b87205f06144b9ec3d5f52f99c4b9d2eaae', name: this.iconLeft, size: (_a = this.iconSize) !== null && _a !== void 0 ? _a : 16, class: "co-select__icon" })), ((_b = this.selectedOption) === null || _b === void 0 ? void 0 : _b.image) && (h("img", { key: '1cb0ebfd61ae1bd3ca702abd65c826a7a61cca7b', class: "co-select__flag", src: this.selectedOption.image, alt: "" })), !((_c = this.selectedOption) === null || _c === void 0 ? void 0 : _c.image) && ((_d = this.selectedOption) === null || _d === void 0 ? void 0 : _d.logo) &&
+            this.renderLogo(this.selectedOption, 'co-select__logo', false), this.multiple && this.hasValue ? (h("div", { class: "co-select__chips" }, this.selectedValues.map((v) => {
             const opt = this.parsedOptions.find((o) => o.value === v);
             return (h("span", { class: "co-select__chip", key: v }, h("span", { class: "co-select__chip-label" }, opt ? opt.label : v), h("button", { class: "co-select__chip-remove", type: "button", tabIndex: -1, "aria-label": "Remove", onClick: (e) => {
                     e.stopPropagation();
                     this.handleOptionClick(v);
                 } }, h("co-icon", { name: "x", size: 12 }))));
-        }))) : (h("span", { class: { 'co-select__text': true, 'co-select__text--placeholder': !this.hasValue } }, this.hasValue ? this.displayText : this.placeholder)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: '73a50ae2aa6c1a9f449a5abb9851fdef231e7ffc', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'ade7609dc136ec20a0412fd7e460a95e50d516e4', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: '7b5bba8fb8fca31613879ab8743f884b1bd71802', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: '2e6bd8187439a7920fe6ad151886da76f79426fc', class: {
+        }))) : (h("span", { class: { 'co-select__text': true, 'co-select__text--placeholder': !this.hasValue } }, this.hasValue ? this.displayText : this.placeholder)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: '496cd4f5e4573c650d208f651bc6d99303889d91', class: "co-select__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '80bde8985273408581de34ebda1aacb29b85846f', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: 'b6063522d74bb07864915512416c1e71cad00062', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-select__caret" })), h("div", { key: 'dfce4c79b0de038a83a34533fbafc5583679f5cc', class: {
                 'co-select__dropdown': true,
                 'co-select__dropdown--dark': this.menuSurface === 'dark',
-            } }, this.isOpen && this.searchable && (h("div", { key: '75b3f339a256945a1c5153453033ab3ad0b5902e', class: "co-select__search" }, h("co-icon", { key: '95f2a28646ffba6416fe7582a360b7c6b4ce58a9', name: "magnifying-glass", size: 16, class: "co-select__search-icon" }), h("input", { key: '8e539a698da9d3ff68e3cce544cac9da4c285afa', class: "co-select__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchText, "aria-controls": CoSelect.LISTBOX_ID, "aria-activedescendant": activeOptionId, onInput: this.handleSearchInput, onKeyDown: this.handleNavKeyDown, ref: (el) => (this.searchInputEl = el) }))), this.isOpen && this.searchable && options.length === 0 && (h("div", { key: 'b0ed2db9c7e397dae2f59cf3f11d9a2ccdf27ab8', class: "co-select__empty" }, this.emptyText)), h("div", { key: 'ec2381d0de5d9a928510d0e15b7ca78b449844b1', class: "co-select__options", id: CoSelect.LISTBOX_ID, role: "listbox", "aria-multiselectable": this.multiple ? 'true' : undefined, ref: (el) => (this.optionsContainerEl = el) }, this.isOpen && (() => {
+            } }, this.isOpen && this.searchable && (h("div", { key: '96b1c59af0d3e8a55d457bff581e3091b6095117', class: "co-select__search" }, h("co-icon", { key: '794175738f7337468e072f95a3069728013761f5', name: "magnifying-glass", size: 16, class: "co-select__search-icon" }), h("input", { key: 'c02a77bc52e3f7dfec008cff41337686281601f6', class: "co-select__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchText, "aria-controls": CoSelect.LISTBOX_ID, "aria-activedescendant": activeOptionId, onInput: this.handleSearchInput, onKeyDown: this.handleNavKeyDown, ref: (el) => (this.searchInputEl = el) }))), this.isOpen && this.searchable && options.length === 0 && (h("div", { key: 'db7b93c92ff58f84d2ced8c3190309c10a46e76a', class: "co-select__empty" }, this.emptyText)), h("div", { key: 'ea7e328c1c105e50aa2d82c4a71da4e8a655bd74', class: "co-select__options", id: CoSelect.LISTBOX_ID, role: "listbox", "aria-multiselectable": this.multiple ? 'true' : undefined, ref: (el) => (this.optionsContainerEl = el) }, this.isOpen && (() => {
             const { totalHeight, startIdx, endIdx, offsetY } = this.getVirtualSlice(options);
             return (
             // Los wrappers del virtualizador van `presentation` para que las
@@ -587,9 +600,9 @@ export class CoSelect {
                         'co-select__option--selected': isSelected,
                         'co-select__option--disabled': isDisabled,
                         'co-select__option--active': index === this.activeIndex,
-                    }, onClick: () => !isDisabled && this.handleOptionClick(opt.value), onPointerMove: (e) => this.handleOptionPointerMove(e, index) }, this.menuSurface === 'dark' && (h("span", { class: "co-select__option-check-slot" }, isSelected && (h("co-icon", { name: "check", size: 12, class: "co-select__option-check co-select__option-check--leading" })))), opt.image ? (h("img", { class: "co-select__option-flag", src: opt.image, alt: "", loading: "lazy" })) : opt.icon ? (h("co-icon", { name: opt.icon, size: 20, class: "co-select__option-icon" })) : null, h("span", { class: "co-select__option-label" }, this.renderLabel(opt.label)), isSelected && this.menuSurface !== 'dark' && (h("co-icon", { name: "check", size: 16, class: "co-select__option-check" }))));
+                    }, onClick: () => !isDisabled && this.handleOptionClick(opt.value), onPointerMove: (e) => this.handleOptionPointerMove(e, index) }, this.menuSurface === 'dark' && (h("span", { class: "co-select__option-check-slot" }, isSelected && (h("co-icon", { name: "check", size: 12, class: "co-select__option-check co-select__option-check--leading" })))), opt.image ? (h("img", { class: "co-select__option-flag", src: opt.image, alt: "", loading: "lazy" })) : opt.logo ? (this.renderLogo(opt, 'co-select__option-logo', true)) : opt.icon ? (h("co-icon", { name: opt.icon, size: 20, class: "co-select__option-icon" })) : null, h("span", { class: "co-select__option-label" }, this.renderLabel(opt.label)), isSelected && this.menuSurface !== 'dark' && (h("co-icon", { name: "check", size: 16, class: "co-select__option-check" }))));
             }))));
-        })()), this.isOpen && this.showFooter && (h("co-list-footer", { key: 'e46141c876fdd0e8f05a14318f969ed370c2e201', class: "co-select__footer", primaryLabel: this.footerPrimaryLabel, primaryIcon: "check", onCoPrimary: this.handleFooterPrimary })))), this.helperText && (h("div", { key: '13b7b84f7241bed5afdfd70c1867045ae4fcd820', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '0f4a854f367a34b7a314ba0a768d02a35b03df07', name: this.statusIcon, size: 14, class: "co-select__helper-icon" }), h("span", { key: '965b58e53ac2bfd55c4d416e07062067c9f686b7', class: "co-select__helper-text" }, this.helperText)))));
+        })()), this.isOpen && this.showFooter && (h("co-list-footer", { key: '2200fd64cb53faa05e50e68ee96b44508fe4607f', class: "co-select__footer", primaryLabel: this.footerPrimaryLabel, primaryIcon: "check", onCoPrimary: this.handleFooterPrimary })))), this.helperText && (h("div", { key: '79255371e7a6cc8cfcbd71011b9746e759fc4432', class: `co-select__helper co-select__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'd72f636d292253376b84a7a2cf9f2a5711965bf8', name: this.statusIcon, size: 14, class: "co-select__helper-icon" }), h("span", { key: 'f0984d9d3190349a1002422639a4e54b9c92dd22', class: "co-select__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-select"; }
     static get encapsulation() { return "shadow"; }
@@ -848,7 +861,7 @@ export class CoSelect {
                     "references": {
                         "SelectOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-a11y/packages/core/src/components/co-select/co-select.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-select/co-select.tsx",
                             "id": "src/components/co-select/co-select.tsx::SelectOption"
                         }
                     }
@@ -857,7 +870,7 @@ export class CoSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Opciones: array de `{ value, label, icon?, image?, disabled? }`, array de strings\n(value = label), o ese mismo array como JSON desde HTML."
+                    "text": "Opciones: array de `{ value, label, icon?, image?, logo?, logoMono?, disabled? }`, array de\nstrings (value = label), o ese mismo array como JSON desde HTML."
                 },
                 "getter": false,
                 "setter": false,