@prolibu-suite/cobalt-core 0.9.3 → 0.9.5

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

@@ -70,6 +70,17 @@ export function buildRows(items) {
 }
 /** Mueve `fromId` a la posición de `toId` en `order`. No muta el input;
  *  devuelve el mismo array (referencia) si es no-op. */
+/**
+ * Universo del drag del bloque seleccionado: los ids seleccionados VIVOS en su
+ * orden visible. A diferencia del snapshot (congelado al abrir), incluye lo
+ * seleccionado durante la sesión del panel — sin esto, esos ítems renderizan
+ * handle pero el drop los rechaza, y un reorder del snapshot emitiría un value
+ * truncado (pierde las selecciones frescas).
+ */
+export function liveSelectedOrder(items, selectedIds) {
+    const sel = new Set(selectedIds);
+    return items.filter((i) => sel.has(i._id)).map((i) => i._id);
+}
 export function reorderIds(order, fromId, toId) {
     if (fromId === toId)
         return order;
@@ -81,6 +92,13 @@ export function reorderIds(order, fromId, toId) {
     next.splice(to, 0, next.splice(from, 1)[0]);
     return next;
 }
+/** Reorder de lista completa: los extremos pineados son inválidos (ni origen ni
+ *  destino) — devuelve la misma referencia, señal de no-op para el caller. */
+export function listReorderIds(order, fromId, toId, isPinned) {
+    if (isPinned(fromId) || isPinned(toId))
+        return order;
+    return reorderIds(order, fromId, toId);
+}
 /** Siguiente highlight: wrap, salta disabled. -1 = sin items navegables. */
 export function nextActiveIndex(current, delta, items) {
     const positions = [];
@@ -95,6 +113,13 @@ export function nextActiveIndex(current, delta, items) {
         return delta === 1 ? positions[0] : positions[positions.length - 1];
     return positions[(at + delta + positions.length) % positions.length];
 }
+/** Highlight inicial de la sesión del panel: primera fila seleccionada
+ *  NAVEGABLE en orden visible (contrato de scrollToSelected, paridad
+ *  resetActiveIndex de co-select). -1 = nada que anclar. */
+export function selectedActiveIndex(items, selectedIds) {
+    const sel = new Set(selectedIds);
+    return items.findIndex((it) => sel.has(it._id) && !it.disabled);
+}
 /** `total > 0` tiene precedencia (deriva remaining); si no, vale `hasMoreProp`. */
 export function deriveMore(count, total, hasMoreProp) {
     if (total > 0)

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

@@ -322,7 +322,7 @@ export class CoPopover {
                     "references": {
                         "PopoverPlacement": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-093/packages/core/src/components/co-popover/co-popover.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-rel-095/packages/core/src/components/co-popover/co-popover.tsx",
                             "id": "src/components/co-popover/co-popover.tsx::PopoverPlacement"
                         }
                     }

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

@@ -219,7 +219,7 @@ export class CoRadioGroup {
                     "references": {
                         "RadioOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-093/packages/core/src/components/co-radio-group/co-radio-group.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-rel-095/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-ref-field/co-ref-field.css

@@ -109,6 +109,14 @@
   box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
 }
 
+/* Anillo de foco por teclado — mismo trazo que el estado abierto. Solo
+   :focus-visible: el click de mouse no debe encenderlo. */
+.co-ref-field__trigger:focus-visible {
+  outline: none;
+  border-color: var(--co-semantic-border-focus);
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
+}
+
 .co-ref-field--disabled {
   background: var(--co-semantic-surface-disabled);
   border-color: transparent;
@@ -194,6 +202,23 @@
   color: var(--co-semantic-text-default);
 }
 
+.co-ref-field__edit {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--co-semantic-text-muted);
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
+}
+
+.co-ref-field__edit:hover {
+  color: var(--co-semantic-text-default);
+}
+
 /* ── Selected single value ──────────────────────────────── */
 .co-ref-field__selected {
   display: flex;
@@ -299,6 +324,30 @@
   flex-shrink: 0;
 }
 
+/* colorMode='fill': the item color is the chip background (inline style);
+   label + remove flip to WCAG-contrast ink. Dot-less, so keep the dot chips'
+   min-height via the size modifiers (unchanged). Radius 6px = co-chip square
+   (the tag chip spec) — NOT the neutral chips' full pill. */
+.co-ref-field__chip--fill {
+  color: var(--co-color-base-blanco);
+  border-radius: var(--co-spacing-sm);
+}
+.co-ref-field__chip--fill-light { color: var(--co-color-base-negro); }
+
+.co-ref-field__chip--fill .co-ref-field__chip-label,
+.co-ref-field__chip--fill .co-ref-field__chip-remove {
+  color: inherit;
+}
+
+.co-ref-field__chip--fill .co-ref-field__chip-remove {
+  opacity: 0.72;
+}
+
+.co-ref-field__chip--fill .co-ref-field__chip-remove:hover {
+  color: inherit;
+  opacity: 1;
+}
+
 .co-ref-field__chip-label {
   color: var(--co-semantic-text-default);
   white-space: nowrap;

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { RequiredMark } from "../../utils/requiredMark";
 import { FieldChip } from "../../utils/fieldChip";
+import { isLightColor } from "../../utils/color";
 export class CoRefField {
     constructor() {
         /** Whether the field is required (renders a required marker on the label). */
@@ -8,6 +9,12 @@ export class CoRefField {
         this.placeholder = 'Select…';
         this.disabled = false;
         this.clearable = true;
+        /** Shows a pencil button on the single-value trigger that emits
+         *  `coEditSelected` with the selected record id. The host owns policy
+         *  (permissions, what opens) — the component only paints and emits. */
+        this.editable = false;
+        /** Accessible name / tooltip for the edit button. */
+        this.editLabel = 'Edit';
         this.multiple = false;
         this.status = 'default';
         /** Label layout: vertical (label above) or horizontal (label beside) */
@@ -56,6 +63,13 @@ export class CoRefField {
         this.maxChips = 0;
         /** Panel color theme. 'auto' follows trigger, 'dark' forces dark panel, 'light' forces light. */
         this.panelTheme = 'auto';
+        /**
+         * How `item.color` paints the selected chips (multiple mode).
+         * 'dot' (default) = neutral chip with a leading 8px color dot.
+         * 'fill' = the color becomes the chip BACKGROUND (label/remove switch to
+         * WCAG-contrast text) — the tag look. Avatar/image items keep the avatar.
+         */
+        this.colorMode = 'dot';
         /**
          * Phosphor icon rendered as a small status badge after the selected label in
          * the trigger (e.g. 'funnel' = strict workspace filter active). Only shows
@@ -71,6 +85,10 @@ export class CoRefField {
          * a smooth squircle. The avatar border can be themed via --co-avatar-border-color.
          */
         this.avatarShape = 'circle';
+        /** Push-pin por fila en el panel (forward a co-option-list). */
+        this.pinnable = false;
+        /** Drag-reorder de la lista del panel (forward a co-option-list). */
+        this.listReorderable = false;
         this.isOpen = false;
         /** How many trailing chips don't fit the trigger width (responsive mode). */
         this.overflowCount = 0;
@@ -87,6 +105,24 @@ export class CoRefField {
             if (this.disabled)
                 e.stopPropagation();
         };
+        this.handleTriggerKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            // Solo las teclas del PROPIO trigger togglean el panel. Los botones
+            // internos (clear, "x" de los chips) llevan tabIndex={-1} pero quedan
+            // focuseados al clickearlos: su Enter/Space debe activarlos de forma
+            // nativa, no abrir/cerrar el panel bajo ellos.
+            if (e.target !== this.triggerEl)
+                return;
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.isOpen = !this.isOpen;
+            }
+            else if (e.key === 'ArrowDown' && !this.isOpen) {
+                e.preventDefault();
+                this.isOpen = true;
+            }
+        };
         /** Change de la co-option-list: `value: null` = deselección explícita (la X
          *  de la fila) → mismo camino que la X del trigger (clear + coClear). El
          *  resto sigue por handleOptionClick con el ítem. */
@@ -129,11 +165,29 @@ export class CoRefField {
             this.value = this.multiple ? '[]' : '';
             this.coClear.emit();
         };
+        this.handleEditClick = (e) => {
+            e.stopPropagation();
+            const selected = this.effectiveDisplayItems[0];
+            if (selected)
+                this.coEditSelected.emit(selected._id);
+        };
         this.handleRemoveChip = (id, e) => {
+            var _a;
             e.stopPropagation();
+            // `?? {_id, label:id}`: el chip quitado SIEMPRE está en la lista que los
+            // pinta, pero `find` es `T | undefined` para el compilador — y un item
+            // con el id crudo es mejor payload que romper el tipo del evento.
+            const removed = (_a = this.effectiveDisplayItems.find((o) => o._id === id)) !== null && _a !== void 0 ? _a : { _id: id, label: id };
             const newValue = this.parsedValue.filter((v) => v !== id);
             this.value = JSON.stringify(newValue);
             this.coRemove.emit(id);
+            // …y TAMBIÉN por el contrato normal de cambio. `coRemove` sólo lleva el id
+            // quitado, así que un host que escuche el evento estándar (lo natural: es
+            // el mismo cambio de selección que un deselect del panel, que sí emite
+            // coChange) no se enteraba: el chip desaparecía de la pantalla y el modelo
+            // del host quedaba intacto. Emitir ambos mantiene la compatibilidad de
+            // `coRemove` y quita la trampa.
+            this.coChange.emit({ value: newValue, item: removed });
         };
         this.handleFooterPrimary = () => {
             this.coFooterPrimary.emit();
@@ -281,6 +335,17 @@ export class CoRefField {
         }
         else {
             this.coClose.emit();
+            this.restoreTriggerFocus();
+        }
+    }
+    /** Devuelve el foco al trigger al cerrar el panel (Escape, selección),
+     *  salvo que el cierre venga de un click-outside que ya movió el foco a
+     *  otro elemento — en ese caso no robarlo. */
+    restoreTriggerFocus() {
+        var _a;
+        const active = document.activeElement;
+        if (active === this.el || this.el.contains(active)) {
+            (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }
     // ── Render helpers ─────────────────────────────────────────
@@ -294,7 +359,7 @@ export class CoRefField {
                 [`co-ref-field--${this.normalizedSize}`]: true,
                 [`co-ref-field--${this.status}`]: this.status !== 'default',
                 'co-ref-field--flat': this.variant === 'flat',
-            }, onClick: this.handleTriggerClick }, this.iconLeft && (h("span", { class: "co-ref-field__icon" }, h("co-icon", { name: this.iconLeft, size: 16 }))), h("div", { class: "co-ref-field__value" }, !hasValue && h("span", { class: "co-ref-field__placeholder", part: "trigger-placeholder" }, this.placeholder), hasValue && !this.multiple && this.renderSingleValue(selected[0]), hasValue && this.multiple && this.renderMultipleValue(selected)), hasValue && this.triggerBadgeIcon && (h("span", { class: "co-ref-field__trigger-badge", part: "trigger-badge", role: "img", title: this.triggerBadgeLabel || undefined, "aria-label": this.triggerBadgeLabel || undefined }, h("co-icon", { name: this.triggerBadgeIcon, size: 11, weight: "fill" }))), hasValue && this.clearable && !this.disabled && (h("button", { class: "co-ref-field__clear", part: "trigger-clear", onClick: this.handleClear, type: "button" }, h("co-icon", { name: "x", size: 14 }))), h("span", { class: "co-ref-field__caret", part: "trigger-chevron" }, h("co-icon", { name: "caret-up-down", size: 16 }))));
+            }, role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-label": this.label || undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-controls": this.isOpen ? CoRefField.LIST_ID : undefined, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.iconLeft && (h("span", { class: "co-ref-field__icon" }, h("co-icon", { name: this.iconLeft, size: 16 }))), h("div", { class: "co-ref-field__value" }, !hasValue && h("span", { class: "co-ref-field__placeholder", part: "trigger-placeholder" }, this.placeholder), hasValue && !this.multiple && this.renderSingleValue(selected[0]), hasValue && this.multiple && this.renderMultipleValue(selected)), hasValue && this.triggerBadgeIcon && (h("span", { class: "co-ref-field__trigger-badge", part: "trigger-badge", role: "img", title: this.triggerBadgeLabel || undefined, "aria-label": this.triggerBadgeLabel || undefined }, h("co-icon", { name: this.triggerBadgeIcon, size: 11, weight: "fill" }))), hasValue && !this.multiple && this.editable && !this.disabled && (h("button", { class: "co-ref-field__edit", part: "trigger-edit", tabIndex: -1, onClick: this.handleEditClick, type: "button", title: this.editLabel || undefined, "aria-label": this.editLabel || undefined }, h("co-icon", { name: "pencil-simple", size: 14 }))), hasValue && this.clearable && !this.disabled && (h("button", { class: "co-ref-field__clear", part: "trigger-clear", tabIndex: -1, onClick: this.handleClear, type: "button" }, h("co-icon", { name: "x", size: 14 }))), h("span", { class: "co-ref-field__caret", part: "trigger-chevron" }, h("co-icon", { name: "caret-up-down", size: 16 }))));
     }
     /**
      * Leading visual for a selected value / chip. Prefers a real avatar (image
@@ -327,25 +392,32 @@ export class CoRefField {
         const visible = fixed ? items.slice(0, this.maxChips) : items;
         const overflow = fixed ? items.length - this.maxChips : responsiveOverflow;
         const visibleCount = items.length - (fixed ? 0 : responsiveOverflow);
-        return (h("div", { class: "co-ref-field__chips-row" }, h("div", { class: "co-ref-field__chips", ref: (el) => (this.chipsEl = el) }, visible.map((item, i) => (
-        // Shared field-chip (utils/fieldChip.tsx); the leading avatar /
-        // color-dot goes in as children, the "+N" overflow stays here.
-        h(FieldChip, { key: item._id, baseClass: "co-ref-field__chip", label: item.label, modifiers: {
-                'co-ref-field__chip--avatar': !!(item.image || item.avatar),
-                'co-ref-field__chip--clipped': !fixed && i >= visibleCount,
-                [`co-ref-field__chip--${this.normalizedSize}`]: true,
-            }, onRemove: (e) => this.handleRemoveChip(item._id, e) }, item.image || item.avatar ? (this.renderItemAvatar(item)) : item.color ? (h("span", { class: "co-ref-field__chip-dot", style: { backgroundColor: item.color } })) : null)))), overflow > 0 && h("span", { class: "co-ref-field__chip-overflow" }, "+", overflow)));
+        return (h("div", { class: "co-ref-field__chips-row" }, h("div", { class: "co-ref-field__chips", ref: (el) => (this.chipsEl = el) }, visible.map((item, i) => {
+            // 'fill' mode: the item color IS the chip background (tag look);
+            // no leading dot, label/remove flip to contrast via CSS `inherit`.
+            const fill = this.colorMode === 'fill' && !!item.color && !(item.image || item.avatar);
+            return (
+            // Shared field-chip (utils/fieldChip.tsx); the leading avatar /
+            // color-dot goes in as children, the "+N" overflow stays here.
+            h(FieldChip, { key: item._id, baseClass: "co-ref-field__chip", label: item.label, modifiers: {
+                    'co-ref-field__chip--avatar': !!(item.image || item.avatar),
+                    'co-ref-field__chip--fill': fill,
+                    'co-ref-field__chip--fill-light': fill && isLightColor(item.color),
+                    'co-ref-field__chip--clipped': !fixed && i >= visibleCount,
+                    [`co-ref-field__chip--${this.normalizedSize}`]: true,
+                }, style: fill ? { backgroundColor: item.color } : undefined, onRemove: (e) => this.handleRemoveChip(item._id, e) }, item.image || item.avatar ? (this.renderItemAvatar(item)) : item.color && !fill ? (h("span", { class: "co-ref-field__chip-dot", style: { backgroundColor: item.color } })) : null));
+        })), overflow > 0 && h("span", { class: "co-ref-field__chip-overflow" }, "+", overflow)));
     }
     renderPanel() {
         return (h("div", { class: {
                 'co-ref-field__panel': true,
                 'co-ref-field__panel--dark': this.panelTheme === 'dark',
                 'co-ref-field__panel--light': this.panelTheme === 'light',
-            }, style: this.panelWidth ? { width: this.panelWidth } : undefined }, h("co-option-list", { ref: (el) => (this.optionListEl = el), items: typeof this.options === 'string' ? this.options : JSON.stringify(this.options), value: this.value, selectedItems: typeof this.selectedDisplay === 'string' ? this.selectedDisplay : JSON.stringify(this.selectedDisplay), multiple: this.multiple, selectedFirst: this.multiple, reorderable: this.multiple, selectedAffordance: "deselect", searchable: this.searchable, searchPlaceholder: this.searchPlaceholder, searchDebounce: this.searchDebounce, loading: this.loading, total: this.total, emptyMessage: this.emptyMessage, avatarShape: this.avatarShape, onCoSearch: (e) => this.coSearch.emit(e.detail), onCoChange: (e) => this.handleListChange(e.detail), onCoReorder: (e) => this.handleReorder(e.detail), onCoLoadMore: () => this.coLoadMore.emit() }, h("slot", { name: "panel-footer", slot: "footer" }), this.showFooter && (h("div", { class: "co-ref-field__footer", slot: "footer" }, this.footerSecondaryLabel && (h("button", { class: "co-ref-field__footer-btn co-ref-field__footer-btn--secondary", type: "button", onClick: this.handleFooterSecondary }, h("co-icon", { name: "plus", size: 16 }), h("span", null, this.footerSecondaryLabel))), h("button", { class: "co-ref-field__footer-btn co-ref-field__footer-btn--primary", type: "button", onClick: this.handleFooterPrimary }, h("co-icon", { name: "check", size: 16 }), h("span", null, this.footerPrimaryLabel)))))));
+            }, style: this.panelWidth ? { width: this.panelWidth } : undefined }, h("co-option-list", { id: CoRefField.LIST_ID, ref: (el) => (this.optionListEl = el), items: typeof this.options === 'string' ? this.options : JSON.stringify(this.options), value: this.value, selectedItems: typeof this.selectedDisplay === 'string' ? this.selectedDisplay : JSON.stringify(this.selectedDisplay), multiple: this.multiple, selectedFirst: this.multiple, reorderable: this.multiple, pinnable: this.pinnable, listReorderable: this.listReorderable, selectedAffordance: "deselect", searchable: this.searchable, searchPlaceholder: this.searchPlaceholder, searchDebounce: this.searchDebounce, loading: this.loading, total: this.total, emptyMessage: this.emptyMessage, avatarShape: this.avatarShape, onCoSearch: (e) => this.coSearch.emit(e.detail), onCoChange: (e) => this.handleListChange(e.detail), onCoReorder: (e) => this.handleReorder(e.detail), onCoPinToggle: (e) => this.coPinToggle.emit(e.detail), onCoListReorder: (e) => this.coListReorder.emit(e.detail), onCoLoadMore: () => this.coLoadMore.emit() }, h("slot", { name: "panel-footer", slot: "footer" }), this.showFooter && (h("div", { class: "co-ref-field__footer", slot: "footer" }, this.footerSecondaryLabel && (h("button", { class: "co-ref-field__footer-btn co-ref-field__footer-btn--secondary", type: "button", onClick: this.handleFooterSecondary }, h("co-icon", { name: "plus", size: 16 }), h("span", null, this.footerSecondaryLabel))), h("button", { class: "co-ref-field__footer-btn co-ref-field__footer-btn--primary", type: "button", onClick: this.handleFooterPrimary }, h("co-icon", { name: "check", size: 16 }), h("span", null, this.footerPrimaryLabel)))))));
     }
     // ── Main render ────────────────────────────────────────────
     render() {
-        return (h("div", { key: '2947ab90a0811a53bc77263f96f13da30a2ed975', class: "co-ref-field" }, (this.label || this.secondaryLabel) && (h("div", { key: '5e16afd2e37e56191e019cdf4be27aea292836eb', class: "co-ref-field__labels" }, this.label && (h("label", { key: '28b97b7f577fa1a1ea2c2c9a8bbd31aa9915ef7f', class: "co-ref-field__label" }, this.labelIcon && (h("co-icon", { key: 'a02fdfc4ebd37c6b7fe1ff84788fb5b94b11c5bf', class: "co-ref-field__label-icon", name: this.labelIcon, size: 16 })), this.label, h(RequiredMark, { key: '933bb1d1d78894a9d127d0666f184a470bbe621f', required: this.required }))), this.secondaryLabel && (h("span", { key: 'cfe226e11e1cafb1187a90c4bba8abfe2318a9ca', class: "co-ref-field__secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: 'd6fb3e669735e53c4b01269a69c018d703761758', open: this.isOpen, placement: "bottom-start", matchWidth: !this.panelWidth, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '7f80d30580f77a23b38f85a4771b6fb1170f6791', slot: "trigger" }, this.renderTrigger()), this.isOpen && this.renderPanel()), this.helperText && (h("div", { key: '9ed05c93faee76f9d4ff18f41f8ae1e8ce60a734', class: `co-ref-field__helper co-ref-field__helper--${this.status}` }, this.status !== 'default' && (h("co-icon", { key: 'ffcb659c5dd52bc6f8b14ca982d0cba5f4089529', name: this.status === 'error' ? 'warning-circle' : this.status === 'success' ? 'check-circle' : 'info', size: 14 })), h("span", { key: 'ab0f53e7e2ade7d635389767b0b31d89844697ae' }, this.helperText)))));
+        return (h("div", { key: '8904995ce46d0552556775029316fa42c0d1261e', class: "co-ref-field" }, (this.label || this.secondaryLabel) && (h("div", { key: 'a3b1d77f18f04b0233d5cf9c5b18c484b60d06e4', class: "co-ref-field__labels" }, this.label && (h("label", { key: '837c1f52807a6b258874d4984fdd3aafd48737ed', class: "co-ref-field__label" }, this.labelIcon && (h("co-icon", { key: 'c9e74495eac50df1f9f074f3a25b3be7bcf36d1c', class: "co-ref-field__label-icon", name: this.labelIcon, size: 16 })), this.label, h(RequiredMark, { key: '49a4366d6fc20c7ddbad31d020a1d45ea4134554', required: this.required }))), this.secondaryLabel && (h("span", { key: '4f9dd9e68d79642cfafd16a71e51747599668f9e', class: "co-ref-field__secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: '91ad529d27a62ccbcb8acac7f23cee7ac2ca33ce', open: this.isOpen, placement: "bottom-start", matchWidth: !this.panelWidth, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '809b6f7e0f64ffd7c6151c1fae340114f5887e72', slot: "trigger" }, this.renderTrigger()), this.isOpen && this.renderPanel()), this.helperText && (h("div", { key: '4089f6e3cd993ce620742d619282d12542e87057', class: `co-ref-field__helper co-ref-field__helper--${this.status}` }, this.status !== 'default' && (h("co-icon", { key: '3d9e658ba0cc04034778911930837f1268afeedd', name: this.status === 'error' ? 'warning-circle' : this.status === 'success' ? 'check-circle' : 'info', size: 14 })), h("span", { key: '8c26be0575794b6f8b410f1fd0b71efd715d5324' }, this.helperText)))));
     }
     static get is() { return "co-ref-field"; }
     static get encapsulation() { return "shadow"; }
@@ -498,6 +570,46 @@ export class CoRefField {
                 "attribute": "clearable",
                 "defaultValue": "true"
             },
+            "editable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a pencil button on the single-value trigger that emits\n`coEditSelected` with the selected record id. The host owns policy\n(permissions, what opens) \u2014 the component only paints and emits."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "editable",
+                "defaultValue": "false"
+            },
+            "editLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name / tooltip for the edit button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "edit-label",
+                "defaultValue": "'Edit'"
+            },
             "multiple": {
                 "type": "boolean",
                 "mutable": false,
@@ -916,6 +1028,26 @@ export class CoRefField {
                 "attribute": "panel-theme",
                 "defaultValue": "'auto'"
             },
+            "colorMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dot' | 'fill'",
+                    "resolved": "\"dot\" | \"fill\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How `item.color` paints the selected chips (multiple mode).\n'dot' (default) = neutral chip with a leading 8px color dot.\n'fill' = the color becomes the chip BACKGROUND (label/remove switch to\nWCAG-contrast text) \u2014 the tag look. Avatar/image items keep the avatar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color-mode",
+                "defaultValue": "'dot'"
+            },
             "triggerBadgeIcon": {
                 "type": "string",
                 "mutable": false,
@@ -994,6 +1126,46 @@ export class CoRefField {
                 "reflect": false,
                 "attribute": "avatar-shape",
                 "defaultValue": "'circle'"
+            },
+            "pinnable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Push-pin por fila en el panel (forward a co-option-list)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pinnable",
+                "defaultValue": "false"
+            },
+            "listReorderable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Drag-reorder de la lista del panel (forward a co-option-list)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "list-reorderable",
+                "defaultValue": "false"
             }
         };
     }
@@ -1020,7 +1192,7 @@ export class CoRefField {
                     "references": {
                         "RefFieldOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-093/packages/core/src/components/co-ref-field/co-ref-field.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-rel-095/packages/core/src/components/co-ref-field/co-ref-field.tsx",
                             "id": "src/components/co-ref-field/co-ref-field.tsx::RefFieldOption"
                         }
                     }
@@ -1145,6 +1317,63 @@ export class CoRefField {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "coPinToggle",
+                "name": "coPinToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Re-emisi\u00F3n del toggle de pin de una fila del panel (pinnable)."
+                },
+                "complexType": {
+                    "original": "{ item: RefFieldOption }",
+                    "resolved": "{ item: RefFieldOption; }",
+                    "references": {
+                        "RefFieldOption": {
+                            "location": "local",
+                            "path": "/Users/agox/worktrees/cobalt-rel-095/packages/core/src/components/co-ref-field/co-ref-field.tsx",
+                            "id": "src/components/co-ref-field/co-ref-field.tsx::RefFieldOption"
+                        }
+                    }
+                }
+            }, {
+                "method": "coListReorder",
+                "name": "coListReorder",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Re-emisi\u00F3n del drag-reorder de la lista del panel (listReorderable)."
+                },
+                "complexType": {
+                    "original": "{ value: string[]; item: RefFieldOption }",
+                    "resolved": "{ value: string[]; item: RefFieldOption; }",
+                    "references": {
+                        "RefFieldOption": {
+                            "location": "local",
+                            "path": "/Users/agox/worktrees/cobalt-rel-095/packages/core/src/components/co-ref-field/co-ref-field.tsx",
+                            "id": "src/components/co-ref-field/co-ref-field.tsx::RefFieldOption"
+                        }
+                    }
+                }
+            }, {
+                "method": "coEditSelected",
+                "name": "coEditSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Pencil click on the single-value trigger. Detail = selected record `_id`."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "el"; }
@@ -1155,3 +1384,14 @@ export class CoRefField {
             }];
     }
 }
+/**
+ * Id del <co-option-list> del panel, target de `aria-controls` del trigger.
+ * Constante (no aleatoria): vive en el shadow root de ESTA instancia, donde
+ * los ids no colisionan con los de otras. Se referencia el HOST de la
+ * primitiva — su listbox interno queda tras su propio shadow boundary y no
+ * es direccionable desde acá (limitación conocida y aceptada).
+ *
+ * El trigger solo emite `aria-controls` mientras `isOpen`: el panel se monta
+ * on-demand, así que cerrado el IDREF quedaría colgante.
+ */
+CoRefField.LIST_ID = 'co-ref-field-list';

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

@@ -154,7 +154,7 @@ export class CoSegmentedBar {
                     "references": {
                         "CoSegment": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-093/packages/core/src/components/co-segmented-bar/co-segmented-bar.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-rel-095/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

@@ -818,9 +818,19 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
 }
 
+/* Anillo de foco por teclado — mismo trazo que el estado abierto. */
+.co-select__trigger:focus-visible {
+  outline: none;
+  border-color: var(--co-semantic-border-focus);
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
+}
+
 .co-select--disabled .co-select__trigger {
   background: var(--co-semantic-surface-disabled);
   border-color: transparent;
+  /* Un focus() programático sobre el trigger deshabilitado si no pintaría el
+     anillo del :focus-visible. */
+  box-shadow: none;
   cursor: not-allowed;
 }
 
@@ -978,6 +988,15 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   background: var(--co-semantic-surface-muted);
 }
 
+/* Opción resaltada por teclado (`aria-activedescendant`). Va DESPUÉS de
+ * `--selected` a propósito: sobre una opción ya elegida tiene que ganar, si no
+ * el usuario de teclado pierde de vista dónde está parado. Mismo gris que el
+ * hover — el check sigue distinguiendo lo seleccionado (igual que
+ * co-option-list). */
+.co-select__option--active {
+  background: var(--co-semantic-surface-hover);
+}
+
 .co-select__option--disabled {
   opacity: 0.4;
   cursor: not-allowed;