@prolibu-suite/cobalt-core 0.9.3 → 0.9.5

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

@@ -89,6 +89,13 @@
   box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
 }
 
+/* Anillo de foco por teclado — mismo trazo que el estado abierto. */
+.co-combobox__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-combobox--disabled .co-combobox__trigger {
   background: var(--co-semantic-surface-disabled);
   border-color: transparent;

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

@@ -46,6 +46,24 @@ export class CoCombobox {
             if (this.disabled)
                 e.stopPropagation();
         };
+        this.handleTriggerKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            // Solo las teclas del PROPIO trigger togglean el dropdown. 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;
+            }
+        };
         this.handlePopoverOpen = () => {
             console.log('[co-combobox] handlePopoverOpen called');
             this.isOpen = true;
@@ -175,6 +193,7 @@ export class CoCombobox {
         }
         else {
             this.coClose.emit();
+            this.restoreTriggerFocus();
         }
     }
     onValueChange() {
@@ -231,16 +250,26 @@ export class CoCombobox {
             this.overflowCount = hiddenCount;
         }
     }
+    /** 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() {
-        return (h("div", { key: '115947444bbca6363647eadfa82af752c5e9c59a', class: {
+        return (h("div", { key: '37a1a6c5d14a61e45a522024b1aecf9ef3421cb5', class: {
                 'co-combobox': true,
                 'co-combobox--open': this.isOpen,
                 'co-combobox--disabled': this.disabled,
                 [`co-combobox--${this.size}`]: true,
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '775183563b76c909d4d566b0f829a3a7cf7927f2', class: "co-combobox__labels" }, this.label && h("label", { key: '38441f5d492f9c0976fb20f299d82ac6129b2ef6', class: "co-combobox__label", part: "label" }, this.label, h(RequiredMark, { key: '921136617ac8082a7f54e21fd4954e2a8a25870f', required: this.required })), this.secondaryLabel && (h("span", { key: 'f93bc3b87b8d16736f2326a54cc63799612fd7b2', class: "co-combobox__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: '295160e48bacd17ee7ec69b8f1c77da2436acbe5', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'e0f2595637c0e2362d6b07e36302c8080b31064a', slot: "trigger", class: "co-combobox__trigger", part: "trigger", onClick: this.handleTriggerClick }, this.iconLeft && (h("co-icon", { key: '560b912264de5ebf0e05c1e67afcd85c7e890d5f', name: this.iconLeft, size: 16, class: "co-combobox__icon" })), h("div", { key: '455830491a53919efc40396c7664576e583f19ab', class: "co-combobox__input-wrapper", ref: (el) => (this.chipContainerEl = el) }, this.multiple && this.hasValue ? (this.selectedOptions.map(opt => (h("co-chip", { size: "small", "icon-mode": "both", label: opt.label }, h("co-icon", { slot: "icon-left", name: opt.icon || 'circle', size: 10 }), h("co-icon", { slot: "icon-right", name: "x-circle", size: 10, weight: "fill", onClick: (e) => { e.stopPropagation(); this.handleListRemove(opt.value); } }))))) : (h("span", { class: {
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '4db14a62bbdbd01088df7279939cce69eb30f9a3', class: "co-combobox__labels" }, this.label && h("label", { key: '294744758ea6e99f1c68c3b612269aa5fb38e838', class: "co-combobox__label", part: "label" }, this.label, h(RequiredMark, { key: '17c9fd9fe7cac0abd1f6b8bee4f31a9e536758fb', required: this.required })), this.secondaryLabel && (h("span", { key: '457e35ca2dd250a7ecd5c36980ced045fb46f319', class: "co-combobox__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), h("co-popover", { key: '54fdc55762dcf268d1522c345968d39f26fc768e', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: '0bb104f5e51e7ea5b36d7325e178c7c7eadde05c', slot: "trigger", class: "co-combobox__trigger", part: "trigger", 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 ? CoCombobox.LIST_ID : undefined, tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.iconLeft && (h("co-icon", { key: 'ebdfa267be7257aaa2b187fc867cb5d334d91319', name: this.iconLeft, size: 16, class: "co-combobox__icon" })), h("div", { key: '77671cfffe0d593242c776316292dec69af64ed6', class: "co-combobox__input-wrapper", ref: (el) => (this.chipContainerEl = el) }, this.multiple && this.hasValue ? (this.selectedOptions.map(opt => (h("co-chip", { size: "small", "icon-mode": "both", label: opt.label }, h("co-icon", { slot: "icon-left", name: opt.icon || 'circle', size: 10 }), h("co-icon", { slot: "icon-right", name: "x-circle", size: 10, weight: "fill", onClick: (e) => { e.stopPropagation(); this.handleListRemove(opt.value); } }))))) : (h("span", { class: {
                 'co-combobox__text': true,
                 'co-combobox__text--placeholder': !this.hasValue,
-            } }, this.hasValue ? this.displayText : this.placeholder))), this.multiple && this.overflowCount > 0 && (h("span", { key: 'cd033364eb722a95343b8fd1229d1bd4e86ac6eb', class: "co-combobox__overflow-badge" }, this.overflowCount)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: '9734b00f8d48310ec7643ecad7c37dc67b8d10a5', class: "co-combobox__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear selection", part: "clear" }, h("co-icon", { key: 'b5b4441482bd896ca54e651dd491ea947a72a163', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: '2c1e33a3a5e13d77d7c4a646be2f723021608ce1', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-combobox__caret" })), h("div", { key: '2860fe141048ca0e6eb3fd4d0354fec49d1a9234', class: "co-combobox__dropdown", part: "dropdown" }, this.isOpen && (h("co-option-list", { key: '04a725a827b086bcd2942ca96b1e2739a459ac57', ref: (el) => (this.optionListEl = el), items: this.listItemsJson, value: this.multiple ? JSON.stringify(this.selectedValues) : (this.selectedValues[0] || ''), multiple: this.multiple, selectedAffordance: "check", removableItems: this.multiple, virtual: true, searchable: this.searchable, searchPlaceholder: this.searchPlaceholder, searchDebounce: 0, highlightMatches: true, emptyMessage: this.emptyMessage, onCoSearch: (e) => { this.searchQuery = e.detail; }, onCoChange: (e) => this.handleListChange(e.detail), onCoRemoveItem: (e) => this.handleListRemove(e.detail) }, this.showFooter && (h("co-list-footer", { key: '40f9a6ba691c5766bd5d9c0dcf8cb9c467139ba7', slot: "footer", secondaryLabel: this.footerSecondaryLabel, primaryLabel: this.footerPrimaryLabel, onCoSecondary: this.handleFooterSecondary, onCoPrimary: this.handleFooterPrimary })))))), this.helperText && (h("div", { key: 'e518fc76d1e94f2a9cf74e3ea6f934966b24f837', class: `co-combobox__helper co-combobox__helper--${this.status}`, part: "helper" }, this.statusIcon && h("co-icon", { key: '72e7890676a61ff832894bf92530a032c6c5c85d', name: this.statusIcon, size: 14, weight: "fill", class: "co-combobox__helper-icon" }), h("span", { key: 'c5bf6bf198c8380cd787214e68eb2eacadb88f44', class: "co-combobox__helper-text" }, this.helperText)))));
+            } }, this.hasValue ? this.displayText : this.placeholder))), this.multiple && this.overflowCount > 0 && (h("span", { key: 'c230748247efc705f21f299254c24b717d7f5af7', class: "co-combobox__overflow-badge" }, this.overflowCount)), this.clearable && this.hasValue && !this.disabled && (h("button", { key: 'b8acd2eeeb17ec672912886e7dfa67abd1026927', class: "co-combobox__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear selection", part: "clear" }, h("co-icon", { key: 'd21e7dec49db82e5514a1562b60596d51ee69094', name: "x-circle", size: 16, weight: "fill" }))), h("co-icon", { key: '51becab683f82d56d93599e701025a640822127c', name: this.isOpen ? 'caret-up' : 'caret-down', size: 16, class: "co-combobox__caret" })), h("div", { key: '8d21ea81c9c5ca9500359f7cedadf12328e4c5eb', class: "co-combobox__dropdown", part: "dropdown" }, this.isOpen && (h("co-option-list", { key: '066a18d85a356c238ff9ced3721c1d3280bce4c8', id: CoCombobox.LIST_ID, ref: (el) => (this.optionListEl = el), items: this.listItemsJson, value: this.multiple ? JSON.stringify(this.selectedValues) : (this.selectedValues[0] || ''), multiple: this.multiple, selectedAffordance: "check", removableItems: this.multiple, virtual: true, searchable: this.searchable, searchPlaceholder: this.searchPlaceholder, searchDebounce: 0, highlightMatches: true, emptyMessage: this.emptyMessage, onCoSearch: (e) => { this.searchQuery = e.detail; }, onCoChange: (e) => this.handleListChange(e.detail), onCoRemoveItem: (e) => this.handleListRemove(e.detail) }, this.showFooter && (h("co-list-footer", { key: '11d5f3fd067ac246e2068bc33a7ef938efef8829', slot: "footer", secondaryLabel: this.footerSecondaryLabel, primaryLabel: this.footerPrimaryLabel, onCoSecondary: this.handleFooterSecondary, onCoPrimary: this.handleFooterPrimary })))))), this.helperText && (h("div", { key: 'aea733779599bf85e1060062b9664821bcd1f003', class: `co-combobox__helper co-combobox__helper--${this.status}`, part: "helper" }, this.statusIcon && h("co-icon", { key: '629698daf7e0005c8849062777daf8b329fe969c', name: this.statusIcon, size: 14, weight: "fill", class: "co-combobox__helper-icon" }), h("span", { key: 'd91bd4fdadedb2eebbe4a2a3c5d033978cb8db76', class: "co-combobox__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-combobox"; }
     static get encapsulation() { return "shadow"; }
@@ -502,7 +531,7 @@ export class CoCombobox {
                     "references": {
                         "ComboboxOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-093/packages/core/src/components/co-combobox/co-combobox.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-rel-095/packages/core/src/components/co-combobox/co-combobox.tsx",
                             "id": "src/components/co-combobox/co-combobox.tsx::ComboboxOption"
                         }
                     }
@@ -771,3 +800,14 @@ export class CoCombobox {
             }];
     }
 }
+/**
+ * Id del <co-option-list> del dropdown, 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`: la lista se monta
+ * on-demand, así que cerrado el IDREF quedaría colgante.
+ */
+CoCombobox.LIST_ID = 'co-combobox-list';

package/dist/collection/components/co-command-search/co-command-search.js

@@ -246,7 +246,7 @@ export class CoCommandSearch {
                     "references": {
                         "CommandItem": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-093/packages/core/src/components/co-command-search/co-command-search.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-rel-095/packages/core/src/components/co-command-search/co-command-search.tsx",
                             "id": "src/components/co-command-search/co-command-search.tsx::CommandItem"
                         }
                     }

package/dist/collection/components/co-data-table/co-data-table.js

@@ -450,7 +450,7 @@ export class CoDataTable {
                     "references": {
                         "CoDataTableColumn": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-093/packages/core/src/components/co-data-table/co-data-table.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-rel-095/packages/core/src/components/co-data-table/co-data-table.tsx",
                             "id": "src/components/co-data-table/co-data-table.tsx::CoDataTableColumn"
                         }
                     }

package/dist/collection/components/co-date-range-picker/co-date-range-picker.js

@@ -1039,7 +1039,7 @@ export class CoDateRangePicker {
                     "references": {
                         "DateRangeValue": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-093/packages/core/src/components/co-date-range-picker/co-date-range-picker.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-rel-095/packages/core/src/components/co-date-range-picker/co-date-range-picker.tsx",
                             "id": "src/components/co-date-range-picker/co-date-range-picker.tsx::DateRangeValue"
                         }
                     }
@@ -1060,7 +1060,7 @@ export class CoDateRangePicker {
                     "references": {
                         "DateRangeValue": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-093/packages/core/src/components/co-date-range-picker/co-date-range-picker.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-rel-095/packages/core/src/components/co-date-range-picker/co-date-range-picker.tsx",
                             "id": "src/components/co-date-range-picker/co-date-range-picker.tsx::DateRangeValue"
                         }
                     }

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

@@ -91,7 +91,10 @@ export class CoEventPopover {
         // Dialog-pattern focus: focus the panel itself (tabIndex=-1). Slotted actions
         // live in light DOM and co-icon-button is shadow — querySelector here can't
         // reach them; Tab from the panel lands on the first slotted action naturally.
-        this.panelEl.focus();
+        // preventScroll: an out-of-viewport panel (month view) would auto-scroll on
+        // focus, which the scroll-close listener below caught in the same frame —
+        // the popover opened and closed before paint (the "click does nothing" bug).
+        this.panelEl.focus({ preventScroll: true });
         window.addEventListener('resize', this.onScroll);
         window.addEventListener('scroll', this.onScroll, true);
         window.addEventListener('keydown', this.onKeydown, true);
@@ -115,7 +118,7 @@ export class CoEventPopover {
         this.coClose.emit();
     }
     render() {
-        return (h(Host, { key: '2bf728a720fb724085b945b4128a4bad5831b870' }, h("div", { key: '81bf88204d662d59a9b4d0b2148063e8244287c3', class: "pop", popover: "manual", role: "dialog", "aria-modal": "false", "aria-label": this.popoverLabel, tabIndex: -1, ref: (el) => (this.panelEl = el) }, h("div", { key: '1dae9ef8ef905f269946cb0a842636d77af46e66', class: "pop__actions", part: "actions" }, h("slot", { key: 'ce5a5fa4ea60a6649d323953dbfa2cccd8840f7c', name: "actions" })), h("div", { key: '019f8e05e990563069e33dd1936655df664085ae', class: "pop__head" }, this.dot && h("span", { key: 'a1f11545250cbf9fb900840dfca4d6721cb98852', class: "pop__dot", style: this.color ? { background: this.color } : {} }), h("div", { key: 'e81876518297dde46ef6288538c4e471b5eab521', class: "pop__body", part: "body" }, h("slot", { key: '9818f107cee7d29278b58efd1af3109d345651b4' }))))));
+        return (h(Host, { key: '4a80f76492bda89a6082b4794f0c924ec929dc85' }, h("div", { key: 'e8ede438958439ae0e9f2689da9fcc88419b9837', class: "pop", popover: "manual", role: "dialog", "aria-modal": "false", "aria-label": this.popoverLabel, tabIndex: -1, ref: (el) => (this.panelEl = el) }, h("div", { key: 'f09ced9c1d8e312df3218929b267e976c64207e8', class: "pop__actions", part: "actions" }, h("slot", { key: '6cfe39bfca0783530950a4e9c482b17f2104157d', name: "actions" })), h("div", { key: '1f3938226f5767fd39d1e80c28f01f2daf023540', class: "pop__head" }, this.dot && h("span", { key: '729486152ea2ab84a72270deeef917ae89ddcdba', class: "pop__dot", style: this.color ? { background: this.color } : {} }), h("div", { key: '2b9f20c48495de4327ae9e27cf1fd305a860dc39', class: "pop__body", part: "body" }, h("slot", { key: '675ce278c7de391af91e8c9235a35aa85964726d' }))))));
     }
     static get is() { return "co-event-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -317,6 +317,8 @@
   border: none;
   background: transparent;
   cursor: pointer;
+  /* La acción de descargar es un <a>: sin subrayado ni color de link del UA. */
+  text-decoration: none;
   color: var(--co-semantic-text-secondary);
   transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }

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

@@ -362,7 +362,10 @@ export class CoFileField {
                     [`co-file-field__row--${item.status}`]: true,
                     'co-file-field__row--dragging': this.dragKey === key,
                     'co-file-field__row--drop-target': this.overKey === key,
-                }, part: "row", key: key, draggable: this.armedKey === key, onDragStart: (e) => this.handleRowDragStart(e, key), onDragOver: (e) => this.handleRowDragOver(e, key), onDrop: (e) => this.handleRowDrop(e, key), onDragEnd: this.handleRowDragEnd }, draggable ? (h("span", { class: "co-file-field__drag-handle", part: "drag-handle", title: s.dragToReorder, onMouseDown: () => (this.armedKey = key) }, h("co-icon", { name: "list", size: 18 }))) : (h("co-icon", { name: item.status === 'error'
+                }, part: "row", key: key, draggable: this.armedKey === key, onDragStart: (e) => this.handleRowDragStart(e, key), onDragOver: (e) => this.handleRowDragOver(e, key), onDrop: (e) => this.handleRowDrop(e, key), onDragEnd: this.handleRowDragEnd }, draggable ? (
+            // Regla del DS: control icon-only → co-tooltip, nunca `title`
+            // nativo (se pinta con el estilo del SO). Ver CLAUDE.md raíz.
+            h("co-tooltip", { content: s.dragToReorder }, h("span", { class: "co-file-field__drag-handle", part: "drag-handle", onMouseDown: () => (this.armedKey = key) }, h("co-icon", { name: "list", size: 18 })))) : (h("co-icon", { name: item.status === 'error'
                     ? 'warning-circle'
                     : item.status === 'uploading'
                         ? 'spinner-gap'
@@ -371,14 +374,14 @@ export class CoFileField {
                     'co-file-field__row-icon--spin': item.status === 'uploading',
                 } })), h("div", { class: "co-file-field__row-body" }, h("span", { class: "co-file-field__row-name", title: item.name }, truncateLeft(item.name)), item.status === 'uploading' && (h("div", { class: "co-file-field__progress" }, h("div", { class: "co-file-field__progress-bar", style: typeof item.progress === 'number'
                     ? { width: `${item.progress}%` }
-                    : undefined }))), item.status === 'error' && item.error && (h("span", { class: "co-file-field__row-error" }, item.error))), item.size != null && (h("span", { class: "co-file-field__row-size" }, formatBytes(item.size))), item.status === 'done' && !!item.url && (h("button", { class: {
+                    : undefined }))), item.status === 'error' && item.error && (h("span", { class: "co-file-field__row-error" }, item.error))), item.size != null && (h("span", { class: "co-file-field__row-size" }, formatBytes(item.size))), item.status === 'done' && !!item.url && (h("co-tooltip", { content: s.downloadFile }, h("a", { class: "co-file-field__action", href: item.url, target: "_blank", rel: "noopener noreferrer", download: item.name, tabIndex: -1, "aria-label": s.downloadFile }, h("co-icon", { name: "download", size: 18 })))), item.status === 'done' && !!item.url && (h("co-tooltip", { content: this.copiedKey === key ? s.copied : s.copyUrl }, h("button", { class: {
                     'co-file-field__action': true,
                     'co-file-field__action--copied': this.copiedKey === key,
-                }, type: "button", tabIndex: -1, title: this.copiedKey === key ? s.copied : s.copyUrl, "aria-label": s.copyUrl, onClick: () => this.handleCopy(item) }, h("co-icon", { name: this.copiedKey === key ? 'check' : 'copy', size: 18 }))), !this.disabled && !this.readonly && (h("button", { class: "co-file-field__action", type: "button", tabIndex: -1, title: s.removeFile, "aria-label": s.removeFile, onClick: () => this.coRemove.emit(key) }, h("co-icon", { name: "trash", size: 18 })))));
-        })))), helper && (h("div", { key: 'fce82b34f47fbf65872fbd5dea20a87b4c99ae12', class: {
+                }, type: "button", tabIndex: -1, "aria-label": s.copyUrl, onClick: () => this.handleCopy(item) }, h("co-icon", { name: this.copiedKey === key ? 'check' : 'copy', size: 18 })))), !this.disabled && !this.readonly && (h("co-tooltip", { content: s.removeFile }, h("button", { class: "co-file-field__action", type: "button", tabIndex: -1, "aria-label": s.removeFile, onClick: () => this.coRemove.emit(key) }, h("co-icon", { name: "trash", size: 18 }))))));
+        })))), helper && (h("div", { key: 'd05514a8115362aa08a872baaf1293a55048ad79', class: {
                 'co-file-field__helper': true,
                 'co-file-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '920361c5833f0252673779b716f872af151ae4b2', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '6711fa168985fb206fdb79533834e4d8548da3dd', class: "co-file-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '0e5f2c0feb7dff2da1d549b498ed1e7ae6051448', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '716ea5cc929a44f1da1984952da2bb5a9ce0a791', class: "co-file-field__helper-text" }, helper)))));
     }
     static get is() { return "co-file-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-icon/iconLoader.js

@@ -28,7 +28,23 @@ export function loadSvg(name, weight) {
     // priority:'low' → los iconos ceden ante JS/CSS/datos críticos del boot
     // (Fetch Priority API; ignorado sin daño donde no se soporta).
     const p = fetch(url, { priority: 'low' })
-        .then((res) => (res.ok ? res.text() : '')) // 404 → '' (queda cacheado, no reintenta)
+        .then(async (res) => {
+        if (!res.ok)
+            return ''; // 404 real → '' (queda cacheado, no reintenta)
+        const text = await res.text();
+        // Un 200 puede NO ser el SVG: el fallback SPA de un dev/static server
+        // responde index.html COMPLETO para archivos faltantes (p.ej. durante la
+        // ventana de un rebuild que regenera dist/). Inyectar eso al shadow del
+        // icono pinta un documento entero dentro del icono (splash fullscreen,
+        // estilos position:fixed) y el caché lo perpetuaba. Solo aceptar SVG
+        // real; cualquier otra cosa se trata como fallo transitorio: no cachear,
+        // permitir reintento.
+        if (!/^\s*(<\?xml|<svg)/i.test(text)) {
+            iconCache.delete(key);
+            return '';
+        }
+        return text;
+    })
         .catch(() => {
         // Error de red: no envenenar el caché — permitir reintento futuro.
         iconCache.delete(key);

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

@@ -2,6 +2,13 @@
   display: inline-flex;
 }
 
+/* Disabled must block clicks AT THE HOST: the inner button's
+   pointer-events:none re-targets clicks to the host element, where consumer
+   listeners (Vue @click) live — without this, "disabled" buttons still fire. */
+:host([disabled]) {
+  pointer-events: none;
+}
+
 .co-icon-button {
   display: inline-flex;
   align-items: center;

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

@@ -20,6 +20,9 @@ export class CoIconButton {
          */
         this.size = 'md';
         /** Disabled state */
+        /** Reflected so :host([disabled]) can kill pointer-events — the inner
+         *  button's pointer-events:none re-targets clicks to the host, where
+         *  consumers' click listeners live. */
         this.disabled = false;
         /** Accessible label */
         this.label = '';
@@ -41,7 +44,7 @@ export class CoIconButton {
                     : 'var(--co-border-radius-full)',
             }
             : undefined;
-        return (h("button", { key: '870a3f745f22073b730bf78c57712aefcd1f0ae1', class: {
+        return (h("button", { key: 'f562372b80c9bc181be338a2a8572ea5ba7071a8', class: {
                 'co-icon-button': true,
                 [`co-icon-button--${this.variant}`]: true,
                 [`co-icon-button--${this.shape}`]: true,
@@ -196,11 +199,11 @@ export class CoIconButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Disabled state"
+                    "text": "Reflected so :host([disabled]) can kill pointer-events \u2014 the inner\nbutton's pointer-events:none re-targets clicks to the host, where\nconsumers' click listeners live."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
             },

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

@@ -188,6 +188,19 @@
   color: var(--co-semantic-text-muted);
 }
 
+/* type=number: ocultar los spinners nativos. co-number-field es la vía canónica
+   para incrementar con botones; un co-input[type=number] los quiere fuera (los
+   pseudo-elementos del spinner no se alcanzan por ::part desde el host). */
+.co-input__native[type='number']::-webkit-inner-spin-button,
+.co-input__native[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.co-input__native[type='number'] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
 /* ---- Icons ---- */
 .co-input__icon {
   flex-shrink: 0;

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

@@ -86,6 +86,21 @@ export class CoInput {
             this.coAction.emit();
         };
     }
+    /**
+     * Refleja en el <input> los cambios de `value` que vienen de AFUERA (host que
+     * setea la prop programáticamente: cálculos, refresh, seed diferido). El
+     * <input> controlado de Stencil no repinta ante esos cambios bajo el lazy
+     * loader; escribir `inputEl.value` a mano lo sincroniza. Guard `hasFocus`:
+     * mientras el usuario tipea NO lo pisamos (movería el caret). Mismo patrón que
+     * co-number-field.onValueChange.
+     */
+    onValueChange(next) {
+        if (!this.inputEl || this.hasFocus)
+            return;
+        const v = next == null ? '' : String(next);
+        if (this.inputEl.value !== v)
+            this.inputEl.value = v;
+    }
     /** Programmatically focus the inner input (post-hydration safe). */
     async setFocus() {
         var _a;
@@ -725,4 +740,10 @@ export class CoInput {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
 }

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

@@ -50,9 +50,11 @@
   animation: co-loader-bounce 2s infinite cubic-bezier(0.28, 0.84, 0.42, 1);
 }
 
-.co-loader__ball--blue   { background-color: #4285f4; }
-.co-loader__ball--yellow { background-color: #fdbd00; animation-delay: 0.4s; }
-.co-loader__ball--red    { background-color: #d4145a; animation-delay: 0.8s; }
+/* Brand primaries with the legacy hex as fallback: themeable per tenant and
+   readable on both surfaces (the old fixed hex couldn't be re-themed). */
+.co-loader__ball--blue   { background-color: var(--co-color-primary-azul, #4285f4); }
+.co-loader__ball--yellow { background-color: var(--co-color-primary-amarillo, #fdbd00); animation-delay: 0.4s; }
+.co-loader__ball--red    { background-color: var(--co-color-primary-rosado, #d4145a); animation-delay: 0.8s; }
 
 .co-loader__text {
   margin: 0;

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

@@ -70,6 +70,21 @@ export class CoNumberField {
             }
         };
     }
+    /**
+     * Refleja en el <input> los cambios de `value` que vienen de AFUERA (host que
+     * setea la prop: refresh de tasas, seed al abrir un form, cálculos). El render
+     * de Stencil no repinta el input controlado ante esos cambios bajo el lazy
+     * loader (verificado en vivo 2026-08-20: prop=0.000326 y el input seguía en
+     * "0"). Escribir `inputEl.value` a mano lo sincroniza. Guard `focused`: mientras
+     * el usuario tipea, su propio input manda — no lo pisamos (movería el caret).
+     */
+    onValueChange() {
+        if (!this.inputEl || this.focused)
+            return;
+        const next = this.isEmpty ? '' : String(this.toDisplay(this.value));
+        if (this.inputEl.value !== next)
+            this.inputEl.value = next;
+    }
     /** True when there is no numeric value (cleared / empty). */
     get isEmpty() {
         return this.value === null || this.value === undefined || Number.isNaN(this.value);
@@ -124,13 +139,13 @@ export class CoNumberField {
         this.coChange.emit(clamped);
     }
     render() {
-        return (h("div", { key: 'e21d2694b5fd0fd5b77f514d8455c71f455a894b', class: {
+        return (h("div", { key: '0c6bc83afe9b061ce2cb99b5ae7c1f6aed3f779a', class: {
                 'co-number-field': true,
                 'co-number-field--disabled': this.disabled,
                 'co-number-field--focused': this.focused,
                 [`co-number-field--${this.size}`]: true,
                 [`co-number-field--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: '17efd9e4987c6ea49173cac684b0bff5a218c5c6', class: "co-number-field__labels" }, this.label && h("label", { key: '977f2f3606ccf1080028fa45bf039dc419e51501', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: '79866d27266b934c2bbf0b2c9b7ff5234e3ee31c', required: this.required })), this.secondaryLabel && h("span", { key: '0f336f36b8c40655088cbe25e42c582df103b235', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: 'a46ab7533a82a23c935e76dc44d1d6f6cf3c1cad', class: "co-number-field__row" }, h("button", { key: '8ade028bbfe79d177a95b3a72823ddf325fb39bf', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: '85f7ecc76fab9ac8776be5669fe1dc7f494b55a2', name: "minus", size: 16 })), h("input", { key: '0e3959431a17c29a6ee42c18f893be71d6ff156f', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal", value: this.isEmpty ? '' : String(this.toDisplay(this.value)), placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown }), this.scaled && !this.isEmpty && (h("span", { key: 'f5d2518f8bb4ae3aefdf7ee059ad92e6fee66e9c', class: "co-number-field__affix", "aria-hidden": "true" }, "%")), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: '5ee9748d2a17601638276af4ce5cc7eb57a75ac9', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '05e5ebbbb8f8403b8fca2e53d2df4e915e53af21', name: "x-circle", size: 16, weight: "fill" }))), h("button", { key: 'f1d0473bec40293d4bd4cd558516118731069b4e', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: 'b8fca118622fab53168fb5123e20029fe5864ce9', name: "plus", size: 16 }))), this.helperText && (h("div", { key: '9feea41492ad64cb440c03ad69410ad49f4130c1', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '66217b4f1a8a44e111bc9b73abf6f8a44665bf12', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: '201c84b2cb3a055e08e3eb004e50666513828038', class: "co-number-field__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: '203720b71c1962ec93f5aefa8dd3cbd67a0294fc', class: "co-number-field__labels" }, this.label && h("label", { key: '114cc0e2a0aa9d351911cee4d1c9c1494259ce3a', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: 'bf4794dd4d5e21052c529ff7eb8e47a79ff9ddb4', required: this.required })), this.secondaryLabel && h("span", { key: '60519c76314068312514d47ef2284ccdd00b5c70', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: 'c0584ba632adaa29f439f896cbab3f73663f2b0b', class: "co-number-field__row" }, h("button", { key: '21979d6ca5667f7f278b5c4674e6497cf1e3911d', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: 'a1173b08171bca43b50a6ca3dc8bb637cb0c43b3', name: "minus", size: 16 })), h("input", { key: 'c5584bbabde195e8178fff12eb98b4919b21e0c8', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal", value: this.isEmpty ? '' : String(this.toDisplay(this.value)), placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown }), this.scaled && !this.isEmpty && (h("span", { key: '86705658b5b1ec0feb9be58afbf7966f382aaa9b', class: "co-number-field__affix", "aria-hidden": "true" }, "%")), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: '5e030b36c3c95a2416544930e2e4f69b06decf61', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '5492f06d71885eb432122984160e5f93153a226f', name: "x-circle", size: 16, weight: "fill" }))), h("button", { key: '8987e2c51aef9fcd54e3394066543607edcd764b', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: '2398e8b5e94071de8ffccbd3625976ddf93878d3', name: "plus", size: 16 }))), this.helperText && (h("div", { key: '16fc9f87db0ad43c6169eebb5be7ec57abd33e98', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '1d3006cb9ba6d6b0f30fb6d09aad6b28fdf764d8', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: '6d727671c30c45655c84319b6a269e4997c3ef6b', class: "co-number-field__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-number-field"; }
     static get encapsulation() { return "shadow"; }
@@ -481,4 +496,10 @@ export class CoNumberField {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
 }

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

@@ -738,7 +738,10 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 
 /* ── Options container ───────────────────────────────────── */
 .co-option-list__options {
-  max-height: 280px;
+  /* Overridable por host (hereda a través del shadow boundary). Con `virtual`
+     el viewport renderizado sigue siendo VIRTUAL_VIEWPORT_ITEMS — no subir
+     este var en listas virtualizadas sin ajustar ese límite. */
+  max-height: var(--co-option-list-max-height, 280px);
   overflow-y: auto;
   overflow-x: hidden;
   padding: var(--co-spacing-md, 12px);
@@ -780,7 +783,9 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   font-size: var(--co-font-size-14, 14px);
   letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
   color: var(--co-semantic-text-default, #1f1c1b);
-  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
+  transition:
+    background var(--co-motion-duration-fast) var(--co-motion-ease-out),
+    opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 /* Filas virtualizadas: alto FIJO 32 + margen 2 = pitch 34 exacto
@@ -865,6 +870,14 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   line-height: 16px;
 }
 
+/* Badge con tooltip: el host de co-tooltip pasa a ser el flex-item del título,
+   así que hereda el no-shrink y el centrado que tenía el pill. */
+.co-option-list__badge-tip {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
 .co-option-list__desc {
   font-size: var(--co-font-size-12, 12px);
   color: var(--co-semantic-text-muted, #888888);
@@ -899,6 +912,26 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   color: var(--co-semantic-text-default, #1f1c1b);
 }
 
+/* ── Pin por fila (pinnable) ─────────────────────────────── */
+.co-option-list__pin {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  padding: var(--co-spacing-xxs, 2px);
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--co-border-radius-xxs, 4px);
+  color: var(--co-semantic-text-muted, #888888);
+}
+.co-option-list__pin:hover {
+  color: var(--co-semantic-text-default, #1f1c1b);
+}
+.co-option-list__pin--active {
+  color: var(--co-semantic-text-default, #1f1c1b);
+}
+
 /* ── Reorder (drag del bloque selected-first) ────────────── */
 .co-option-list__drag-handle {
   display: inline-flex;
@@ -909,7 +942,17 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   flex: 0 0 auto;
 }
 .co-option-list__drag-handle:active { cursor: grabbing; }
+/* touch-action: el gesto sobre el handle es SIEMPRE drag, nunca scroll. */
+.co-option-list__drag-handle { touch-action: none; }
 .co-option-list__option--dragging { opacity: 0.5; }
+/* Fila lifted (drag por puntero): sigue al cursor con sombra y fondo sólido. */
+.co-option-list__option--lifted {
+  position: relative;
+  z-index: 2;
+  background: var(--co-semantic-surface-page, #fff);
+  box-shadow: var(--co-shadow-lg);
+  cursor: grabbing;
+}
 .co-option-list__option--drop-before {
   box-shadow: inset 0 2px 0 0 var(--co-semantic-border-focus);
 }