@prolibu-suite/cobalt-core 0.7.0 → 0.8.0

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

@@ -88,6 +88,27 @@
   text-overflow: ellipsis;
 }
 
+/* Caption: segunda línea bajo el label (fila apilada). La fila crece sola
+   (min-height). El icono queda centrado verticalmente — igual que V1. */
+.co-menu-item__label--stacked {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1px;
+}
+
+.co-menu-item__label-main {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--co-spacing-xs, 4px);
+}
+
+.co-menu-item__caption {
+  font-size: var(--co-font-size-11, 11px);
+  color: var(--co-semantic-text-muted);
+  line-height: 1.3;
+  white-space: nowrap;
+}
+
 .co-menu-item__suffix {
   display: inline-flex;
   align-items: center;

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

@@ -135,7 +135,7 @@ export class CoMenuItem {
                 'co-menu-item--danger': this.variant === 'danger',
                 'co-menu-item--submenu': this.hasSubmenu,
                 'co-menu-item--submenu-open': this.hasSubmenu && this.submenuOpen,
-            }, type: "button", role: "menuitem", "aria-haspopup": this.hasSubmenu ? 'menu' : undefined, "aria-expanded": this.hasSubmenu ? (this.submenuOpen ? 'true' : 'false') : undefined, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeydown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.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" }, this.label, h("slot", { name: "label" })), this.trailingCheck && (h("span", { class: "co-menu-item__check" }, h("co-icon", { name: "check", size: 15 }))), h("span", { class: "co-menu-item__suffix" }, h("slot", { name: "suffix" }), this.hasSubmenu && h("co-icon", { name: "caret-right", size: 14 }))));
+            }, type: "button", role: "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.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);
@@ -215,6 +215,25 @@ export class CoMenuItem {
                 "reflect": false,
                 "attribute": "label"
             },
+            "caption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional second line under the label (muted, smaller) \u2014 e.g. what an\nexport method means. The row auto-grows (min-height, not height)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "caption"
+            },
             "dense": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -62,14 +62,14 @@ export class CoModal {
             this.coClose.emit();
     }
     render() {
-        return (h("co-overlay", { key: '05ef9c3f53b155899f4838db0c0fca818f542731', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '46dbcfb7b8073c2ca11114fe049d55842bd9cb94', class: "co-modal__frame" }, h("div", { key: '75a703ddeb451e3afc4392990c10040423f0f7c7', class: {
+        return (h("co-overlay", { key: 'aef8eefd5790e210ada8e53f1d904dd7652b75dd', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: 'dcf89aa4a6e783e16e99b3c350b917e073c26b76', class: "co-modal__frame" }, h("div", { key: 'c579fe7b0ac3b92c4a413eac9cc4a9da3ec06f69', class: {
                 'co-modal': true,
                 'co-modal--open': this.open,
                 'co-modal--sm': this.size === 'sm',
                 'co-modal--lg': this.size === 'lg',
                 'co-modal--full': this.size === 'full',
                 'co-modal--no-dividers': this.noDividers,
-            }, part: "modal", ref: (el) => (this.modalEl = el), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '3ebedf6549d81d4515abef9cd406688d82d583dd', class: "co-modal__header", part: "header" }, h("div", { key: '8c08be60fe1cac72a2351acbd26f93c4aa2178f4', class: "co-modal__header-text" }, h("h2", { key: '8235568540f5c09941790d203ae43c94393f4c3c', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: 'bda3dc9a4eea2b60c9728e01b83771ea921dec57', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: '10bf91d47ce12f40e3d7ede6adc788ac5952e928', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: '3eb98394355c5d60ca633c55f6c26111b046bfa7', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: '1fa27604b8f29d2271b4c4291a52949a1a57dcba', class: "co-modal__body", part: "body" }, h("slot", { key: '1524ac17115286ee90e4ffd251e3407edb1ecb94' }))), h("div", { key: 'f65aae95cdbc156285e3837187b161a65d8772ef', class: "co-modal__footer", part: "footer" }, h("slot", { key: '936d4e2f0b52553abf4edec689ff13e8d0bc1940', name: "footer" }))))));
+            }, part: "modal", ref: (el) => (this.modalEl = el), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '37bcab4a7d73d99ed199a4dc3ddbcb5d452f7f67', class: "co-modal__header", part: "header" }, h("div", { key: '1761b1fa2761ec89b74da943652533873ffb041d', class: "co-modal__header-text" }, h("h2", { key: 'f8ee41c7c122956431c388222cdde6263089118f', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: 'f719d9f6b3f974f0f677ac9daba1611e8e90d162', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: 'c893a1c5f36631743061ad71f5c120ba6d695081', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'afcce2e70b4045188ee37897798d8f54add996c2', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: 'ab2890e8f0e3308d9fe989107eebb6ca24161f6d', class: "co-modal__body", part: "body" }, h("slot", { key: '2991f8166a1fc52dbb58350ab5573d67a35ed2ad' }))), h("div", { key: '3d2a5f9aa2ba1eac6d11828e0653be775d9f9152', class: "co-modal__footer", part: "footer" }, h("slot", { key: '62ff2668995d3d9d33719b29a85a8afd31013042', name: "footer" }))))));
     }
     static get is() { return "co-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,12 +14,12 @@ export class CoNavbar {
         this.rounded = false;
     }
     render() {
-        return (h("div", { key: '93279a4c80cd3c050fe5bd5bb10b0c56fa942bdc', class: {
+        return (h("div", { key: '9899b395fdf793bf9b7e47509b81eb559aac0b56', class: {
                 'co-navbar': true,
                 [`co-navbar--${this.variant}`]: true,
                 [`co-navbar--${this.size}`]: true,
                 'co-navbar--rounded': this.rounded,
-            }, part: "navbar", role: "toolbar" }, h("slot", { key: '643f397c092a3ad3961158c641bab0d4edb27e47' })));
+            }, part: "navbar", role: "toolbar" }, h("slot", { key: 'c863bcf8dc9eddab771922a81e11c1966bfe8d2e' })));
     }
     static get is() { return "co-navbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -124,13 +124,13 @@ export class CoNumberField {
         this.coChange.emit(clamped);
     }
     render() {
-        return (h("div", { key: '81d578bdeaefc9f6176ab68ca38b5e831ad636cd', class: {
+        return (h("div", { key: '851b1d89af98cc8a0ad9c925576b12fac545721d', 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: '0010a5984faa5c26d3ed18a29c43679422158529', class: "co-number-field__labels" }, this.label && h("label", { key: '1744b37b776c36e6c105f6537e9bc0eff427f3c3', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: '24b51fde19384d3de672b6c1aa1c54c408078b98', required: this.required })), this.secondaryLabel && h("span", { key: '752dca236f11f65a78ab0f2e35bae1a0dcb81ba8', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: 'a88c171a1349972ed78452b0c304cac207921a8f', class: "co-number-field__row" }, h("button", { key: '4a781c675e97937288f641d55e821fa30104a180', 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: '12f82a9f0f8c1b0c9f51264006084d4e80d81715', name: "minus", size: 16 })), h("input", { key: '6f440216843a93d124723b18e0f6f1e7ce98791c', 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: '6672a63fc024e9d33661fee37deb04debe2aaa25', class: "co-number-field__affix", "aria-hidden": "true" }, "%")), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: 'a0ad4682f949dab538db35348282a3cab52fcb75', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '2beb8574b79926c54665081e4ed06e191932bed6', name: "x-circle", size: 16, weight: "fill" }))), h("button", { key: 'd6e01ce20f596ff102899680f7234d35042e2d49', 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: '27e33390bc7f3baaf9caed056e8e3e6e64b291c9', name: "plus", size: 16 }))), this.helperText && (h("div", { key: '9cc415d2a5f5be410a0677ed7067c7d9bb8368df', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '7cf249285dcd15680f6e21840adcfc81dfd16298', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: '6791bb8f9789af7b878d7c5aa27047d905238e48', class: "co-number-field__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'ccb5f1b7e75e65b732d31c8f9fe7abb1ca127a21', class: "co-number-field__labels" }, this.label && h("label", { key: 'e5121754db6dff01c1e62a3b27503df9c8dcafa3', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: 'ebaf4bf7d26267bf96e0d99ea1f1b4f448f801ca', required: this.required })), this.secondaryLabel && h("span", { key: '77b800626376802d8e25baa9af81eeb84298d175', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: 'da070461da5fc2be02dfde4a2196c910f406d459', class: "co-number-field__row" }, h("button", { key: '522b084d7582c7e223db943b96009bc75cc77c2d', 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: 'b598a702578fe0b10ea7a7adde0a9ef638d177ff', name: "minus", size: 16 })), h("input", { key: 'f061fc874dfcd886f9e20132f10359476741dbaa', 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: 'e007c2d1d46408bc961cbfdf316b49fbf2f6b2c8', class: "co-number-field__affix", "aria-hidden": "true" }, "%")), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: '73f440263698c26a25495e408529417e0ee80690', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '577021788bca76984f2bca56ff6cdec34ef47ac5', name: "x-circle", size: 16, weight: "fill" }))), h("button", { key: '82f1be58f496c76d218c6d5550615ec03691c564', 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: '42f83b44defa32ec4efb9af84518fa1a0cbc6caa', name: "plus", size: 16 }))), this.helperText && (h("div", { key: '68c4300d1b5fb9010bc07457cba7d1628c9d5dc7', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'aef962d0b62920215685af9c4cd06bdc63fff92d', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: 'ea5a62af95585e27a791e43a2038036c098069b6', class: "co-number-field__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-number-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -897,6 +897,24 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   color: var(--co-semantic-text-default, #1f1c1b);
 }
 
+/* ── Reorder (drag del bloque selected-first) ────────────── */
+.co-option-list__drag-handle {
+  display: inline-flex;
+  align-items: center;
+  cursor: grab;
+  color: var(--co-semantic-text-muted);
+  margin-right: var(--co-spacing-xs);
+  flex: 0 0 auto;
+}
+.co-option-list__drag-handle:active { cursor: grabbing; }
+.co-option-list__option--dragging { opacity: 0.5; }
+.co-option-list__option--drop-before {
+  box-shadow: inset 0 2px 0 0 var(--co-semantic-border-focus);
+}
+.co-option-list__option--drop-after {
+  box-shadow: inset 0 -2px 0 0 var(--co-semantic-border-focus);
+}
+
 /* ── Group headers ───────────────────────────────────────── */
 /* Figma: Geist Mono 10px uppercase, tracking 0.8px, color default. */
 .co-option-list__group {

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { highlightMatch } from "../../utils/normalizeText";
 import { initOverlayScroll } from "../../utils/overlayScroll";
-import { buildRows, deriveMore, nextActiveIndex, orderItems, parseItems, parseValue, virtualSlice, VIRTUAL_ITEM_HEIGHT, VIRTUAL_VIEWPORT_ITEMS, } from "./optionListLogic";
+import { buildRows, deriveMore, nextActiveIndex, orderItems, parseItems, parseValue, reorderIds, virtualSlice, VIRTUAL_ITEM_HEIGHT, VIRTUAL_VIEWPORT_ITEMS, } from "./optionListLogic";
 /**
  * Núcleo de lista de opciones — la única fuente del look & behavior de los
  * dropdowns Cobalt (co-ref-field, co-combobox, co-autocomplete,
@@ -28,6 +28,8 @@ export class CoOptionList {
         this.selectedAffordance = 'check';
         /** Botón remove por fila seleccionada en multiple (tags de combobox). */
         this.removableItems = false;
+        /** Habilita reorder por drag del bloque de seleccionados (selected-first). */
+        this.reorderable = false;
         // ── Search integrado (opcional) ────────────────────────────
         this.searchable = false;
         this.searchPlaceholder = 'Search…';
@@ -59,6 +61,14 @@ export class CoOptionList {
         this.term = '';
         this.activeIndex = -1;
         this.scrollTop = 0;
+        /** Fila armada para drag (handle presionado). */
+        this.armedKey = '';
+        /** Fila que se está arrastrando. */
+        this.dragKey = '';
+        /** Fila hover como drop-target. */
+        this.overKey = '';
+        /** Dirección del drop sobre overKey (true = el ítem cae DESPUÉS del target). */
+        this.dropAfter = false;
         /** Snapshot selected-first (ver snapshotOrder). */
         this.sortSnapshot = new Set();
         this.displaySnapshot = [];
@@ -88,6 +98,19 @@ export class CoOptionList {
                 clearTimeout(this.debounceTimer);
             this.debounceTimer = setTimeout(() => this.coSearch.emit(v), this.searchDebounce);
         };
+        this.handleRowDragEnd = () => { this.resetDragState(); };
+        this.handleRowDragLeave = (e, id) => {
+            // Limpia el highlight al salir de la fila (evita drop-target stale al pasar sobre
+            // el bloque no-seleccionado, que no tiene onDragOver). Guard `contains`: dragleave
+            // también dispara al entrar a un hijo, no solo al salir de la fila.
+            if (this.overKey === id && !e.currentTarget.contains(e.relatedTarget)) {
+                this.overKey = '';
+            }
+        };
+        this.disarmDrag = () => {
+            if (this.armedKey && !this.dragKey)
+                this.armedKey = '';
+        };
         this.onNativeScroll = (e) => {
             // Fallback pre-OverlayScrollbars (primer frame) — misma lógica.
             const el = e.target;
@@ -126,12 +149,16 @@ export class CoOptionList {
             });
         }
     }
+    connectedCallback() {
+        window.addEventListener('mouseup', this.disarmDrag);
+    }
     disconnectedCallback() {
         var _a;
         if (this.debounceTimer)
             clearTimeout(this.debounceTimer);
         (_a = this.osInstance) === null || _a === void 0 ? void 0 : _a.destroy();
         this.osInstance = undefined;
+        window.removeEventListener('mouseup', this.disarmDrag);
     }
     onItemsChange() {
         // Nueva página / nuevos resultados: si autoHighlight, re-resalta la primera fila
@@ -229,6 +256,50 @@ export class CoOptionList {
             this.coChange.emit({ value: item._id, item });
         }
     }
+    // ── Reorder (drag del bloque selected-first) ───────────────
+    handleRowDragStart(e, id) {
+        if (this.armedKey !== id) {
+            e.preventDefault();
+            return;
+        }
+        this.dragKey = id;
+        if (e.dataTransfer) {
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('text/plain', id);
+        }
+    }
+    handleRowDragOver(e, id) {
+        if (!this.dragKey || this.dragKey === id)
+            return;
+        e.preventDefault();
+        if (e.dataTransfer)
+            e.dataTransfer.dropEffect = 'move';
+        this.overKey = id;
+        // Dirección: al arrastrar hacia abajo (from<to) el ítem cae DESPUÉS del target
+        // (semántica de reorderIds) → el indicador va en el borde inferior; hacia arriba, superior.
+        const ids = this.displaySnapshot.map((d) => d._id);
+        this.dropAfter = ids.indexOf(this.dragKey) < ids.indexOf(id);
+    }
+    handleRowDrop(e, id) {
+        e.preventDefault();
+        e.stopPropagation();
+        const fromId = this.dragKey;
+        const order = this.displaySnapshot.map((d) => d._id);
+        this.resetDragState();
+        // Solo reordenar dentro del bloque seleccionado
+        if (fromId === id || !order.includes(fromId) || !order.includes(id))
+            return;
+        const next = reorderIds(order, fromId, id);
+        const byId = new Map(this.displaySnapshot.map((d) => [d._id, d]));
+        this.displaySnapshot = next.map((x) => byId.get(x)); // reflow en vivo del panel
+        this.coReorder.emit({ value: next, item: byId.get(fromId) });
+    }
+    resetDragState() {
+        this.armedKey = '';
+        this.dragKey = '';
+        this.overKey = '';
+        this.dropAfter = false;
+    }
     maybeLoadMore(scrollTop, clientHeight, scrollHeight) {
         if (this.loading)
             return;
@@ -262,12 +333,16 @@ export class CoOptionList {
     }
     renderRow(item, index, selectedIds) {
         const isSelected = selectedIds.includes(item._id);
+        const canDrag = this.reorderable && this.selectedFirst && isSelected && !this.term;
         return (h("div", { class: {
                 'co-option-list__option': true,
                 'co-option-list__option--selected': isSelected,
                 'co-option-list__option--active': index === this.activeIndex,
                 'co-option-list__option--disabled': !!item.disabled,
-            }, key: item._id, id: `co-optlist-${index}`, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : 'false', onClick: () => !item.disabled && this.pick(item), onMouseEnter: () => { this.activeIndex = index; } }, 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 && h("span", { class: "co-option-list__suffix" }, "- ", item.suffix), item.badge && (h("span", { class: "co-option-list__badge", style: item.badge.color ? { backgroundColor: item.badge.color, color: 'var(--co-color-base-blanco, #fff)' } : undefined }, item.badge.label))), item.description && h("span", { class: "co-option-list__desc" }, item.description)), 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.pick(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" }))));
+                'co-option-list__option--dragging': this.dragKey === item._id,
+                'co-option-list__option--drop-before': this.overKey === item._id && !this.dropAfter,
+                'co-option-list__option--drop-after': this.overKey === item._id && this.dropAfter,
+            }, key: item._id, id: `co-optlist-${index}`, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : 'false', draggable: canDrag && this.armedKey === item._id, onClick: () => !item.disabled && this.pick(item), onMouseEnter: () => { this.activeIndex = index; }, onDragStart: canDrag ? (e) => this.handleRowDragStart(e, item._id) : undefined, onDragOver: canDrag ? (e) => this.handleRowDragOver(e, item._id) : undefined, onDrop: canDrag ? (e) => this.handleRowDrop(e, item._id) : undefined, onDragEnd: canDrag ? this.handleRowDragEnd : undefined, onDragLeave: canDrag ? (e) => this.handleRowDragLeave(e, item._id) : undefined }, canDrag && (h("span", { class: "co-option-list__drag-handle", part: "drag-handle", title: "Drag to reorder", onMouseDown: () => (this.armedKey = item._id), 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 && h("span", { class: "co-option-list__suffix" }, "- ", item.suffix), item.badge && (h("span", { class: "co-option-list__badge", style: item.badge.color ? { backgroundColor: item.badge.color, color: 'var(--co-color-base-blanco, #fff)' } : undefined }, item.badge.label))), item.description && h("span", { class: "co-option-list__desc" }, item.description)), 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.pick(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);
@@ -278,11 +353,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: '8e4a0e5e6b0831d1413fccc5d58f5548e756ca90', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: '91658cdefff07570ae339a7e4c785493c200b690', class: "co-option-list__search", part: "search" }, h("co-icon", { key: '28900e1543e8cd50d7e789de2f6d8815eafd1fb7', name: "magnifying-glass", size: 16 }), h("input", { key: '3455b4f3d4e54b81291b997bceb64d95ef1be105', 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("div", { key: '32f315ed929802532c1a050d6e42aaa4150a2d11', 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: '374a2383399a56d90afcb048f5e6343d4f9275d7', class: "co-option-list__inner" }, showClear && (h("button", { key: 'be34ee751a34147660e8bc7846b12d8ab1f937d4', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: 'c3c70f93b6d4ce7c0774b4c5ff1ebd7f2549dd93', name: "x-circle", size: 14 }), h("span", { key: 'a9970acd4f67dc84afd4d7f10317d4e35f0feebf' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: '6b1bb04068d2832bd71f0d9b9b9205662a3184f2', class: "co-option-list__loading" }, h("co-loader", { key: '1de716e5fac313dbc10a9aeed2dd8f61e491f020', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: '29f51655d034fcd1b5aac08df9537fb176090ce7', class: "co-option-list__empty" }, h("co-icon", { key: 'c7c51260cfe80d82ae75ae0a3510560f5258a3ad', name: "magnifying-glass", size: 20 }), h("span", { key: 'af1c571186f203f2a128b4a7f2d26e5171bf7951' }, this.emptyMessage))), items.length > 0 && this.virtual
+        return (h("div", { key: '0c7bd9ada61fbe73efe303e5ea3745bf1390300f', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: '7125f418aaf46bfc92bf96387d23975f2a97fdc1', class: "co-option-list__search", part: "search" }, h("co-icon", { key: '34ef849033d03bbab79b020b77f31ecef32bb26c', name: "magnifying-glass", size: 16 }), h("input", { key: 'bcb6538309247d776fc12148786e19a5a8cdaf45', 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("div", { key: 'eb0c6c9cede058369f87f8812f1fbdc500687f25', 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: '24528c2e44974d07a0fbd1358c54c5c4504a0815', class: "co-option-list__inner" }, showClear && (h("button", { key: '1ecbdd28f116ae0b94cc3ed9f321550601637fcb', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: 'bd2781f8450724065ca73f14cb3574e7183013a9', name: "x-circle", size: 14 }), h("span", { key: '6e3e73b331c42b9b5c479a28c5a20c8836d21549' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: '671980fc29b319aed0065ce61b857ac144e0672c', class: "co-option-list__loading" }, h("co-loader", { key: '0677a97d9e97df7e5d183f0a7e430188887a2ef2', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: '5f35f35d2251d2d0944005dd14f68170952ceef0', class: "co-option-list__empty" }, h("co-icon", { key: 'a166f1a172cec7d88ca230c0c3dc20fc1f54b9b3', name: "magnifying-glass", size: 20 }), h("span", { key: 'd913f59862e9e315875e6e37e088c4c92e5efa35' }, 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: '0322e0c734d57f0fdc80ace2753276b2bc2a33ad', class: "co-option-list__loading-more" }, h("co-loader", { key: 'e305edb2317d433b27e581a97f35e99083306bff', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: '31d25badb8cbefa515eaedd1a849b943274a2f9d', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: '2df4d5c4c55db9647b378eb9d09c828a76e563f1', name: "footer" })));
+                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (h("div", { key: 'b01020b03f69750a56d1b19c33773195ba284c8b', class: "co-option-list__loading-more" }, h("co-loader", { key: '7a7c78fb807ac6a4a30e6c36e59c98e491622b5d', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: '010d69fe8d2a13f142226910d1f0755875dd3594', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: 'ef7037e0bd6ba1dac6c76641093200c952a4bcec', name: "footer" })));
     }
     static get is() { return "co-option-list"; }
     static get encapsulation() { return "shadow"; }
@@ -452,6 +527,26 @@ export class CoOptionList {
                 "attribute": "removable-items",
                 "defaultValue": "false"
             },
+            "reorderable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Habilita reorder por drag del bloque de seleccionados (selected-first)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reorderable",
+                "defaultValue": "false"
+            },
             "searchable": {
                 "type": "boolean",
                 "mutable": false,
@@ -738,7 +833,12 @@ export class CoOptionList {
         return {
             "term": {},
             "activeIndex": {},
-            "scrollTop": {}
+            "scrollTop": {},
+            "armedKey": {},
+            "dragKey": {},
+            "overKey": {},
+            "dropAfter": {},
+            "displaySnapshot": {}
         };
     }
     static get events() {
@@ -824,6 +924,28 @@ export class CoOptionList {
                     "resolved": "string",
                     "references": {}
                 }
+            }, {
+                "method": "coReorder",
+                "name": "coReorder",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido tras un drag-reorder: nuevo orden de ids seleccionados + \u00EDtem movido."
+                },
+                "complexType": {
+                    "original": "{ value: string[]; item: OptionListItem }",
+                    "resolved": "{ value: string[]; item: OptionListItem; }",
+                    "references": {
+                        "OptionListItem": {
+                            "location": "import",
+                            "path": "./optionListLogic",
+                            "id": "src/components/co-option-list/optionListLogic.ts::OptionListItem",
+                            "referenceLocation": "OptionListItem"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {

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

@@ -68,6 +68,19 @@ export function buildRows(items) {
     }
     return rows;
 }
+/** Mueve `fromId` a la posición de `toId` en `order`. No muta el input;
+ *  devuelve el mismo array (referencia) si es no-op. */
+export function reorderIds(order, fromId, toId) {
+    if (fromId === toId)
+        return order;
+    const from = order.indexOf(fromId);
+    const to = order.indexOf(toId);
+    if (from === -1 || to === -1)
+        return order;
+    const next = [...order];
+    next.splice(to, 0, next.splice(from, 1)[0]);
+    return next;
+}
 /** Siguiente highlight: wrap, salta disabled. -1 = sin items navegables. */
 export function nextActiveIndex(current, delta, items) {
     const positions = [];

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

@@ -187,7 +187,7 @@ export class CoOverlay {
         focusables[nextIndex].focus();
     }
     render() {
-        return (h("div", { key: '41b0ea10b8078a2bf3c46f68fe35869bf2778130', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", popover: "manual", tabindex: this.trapFocus ? -1 : undefined, ref: (el) => (this.overlayEl = el), onClick: this.handleClick, onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: '35e1ec1b7921c1439a177b8f526f128351c5fdec' })));
+        return (h("div", { key: 'b801503a338c2fd3ed92a0448c09356970beebee', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", popover: "manual", tabindex: this.trapFocus ? -1 : undefined, ref: (el) => (this.overlayEl = el), onClick: this.handleClick, onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: 'ad290e1dde7d3c5bae0df9d69cd490c607d53bc8' })));
     }
     static get is() { return "co-overlay"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class CoPageHeader {
     render() {
-        return (h("div", { key: '9170d832d0e51cc8e721a4a331f85abb8543b893', class: "co-page-header", part: "page-header" }, h("div", { key: 'ca13df04f2b81a2ce14ab0223a5f651aaa0c921d', class: "co-page-header__left" }, this.icon && (h("span", { key: 'efe024a0388ae60afc2c4e3ce0861b65e0fa9923', class: "co-page-header__icon" }, h("co-icon", { key: '3051bda0f31d1002142e53db09d0aabd7ecf13bf', name: this.icon, size: 24 }))), h("span", { key: '7b714ebec4e82dffaca71d9e8152330b7fe0a38f', class: "co-page-header__title" }, h("slot", { key: '021b7da34753a3946b94bb104f515b1c4781d837' }, this.heading))), h("div", { key: '52d2d1f3510b23c1684aecacb97d341e56fc7619', class: "co-page-header__actions" }, h("slot", { key: 'da455091aa0467df02674fdd38241fd7e70bab13', name: "actions" }))));
+        return (h("div", { key: '707564c0b96e4ef99a9cf99a34b19751808bd35a', class: "co-page-header", part: "page-header" }, h("div", { key: '8588626e6de02ba95f32966b40d2519fe3832e0e', class: "co-page-header__left" }, this.icon && (h("span", { key: 'de3903d4763f6db09651155ff1fc339fe347213f', class: "co-page-header__icon" }, h("co-icon", { key: '36b6931df7651c6daa86181280a741d391905516', name: this.icon, size: 24 }))), h("span", { key: '40946efea9e8a7cde96bf5a0de8dcafef4ff4797', class: "co-page-header__title" }, h("slot", { key: '0df50db78b3000f9b784b7e9c1d96cf7d2761861' }, this.heading))), h("div", { key: 'c8f84bd61e76a7d79f32b1985a476384f91ed6b6', class: "co-page-header__actions" }, h("slot", { key: 'a034ba5616842f98c6b4f2847dbfc22afc422aa7', name: "actions" }))));
     }
     static get is() { return "co-page-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -159,7 +159,7 @@ export class CoPhoneField {
     render() {
         const entry = this.selectedEntry;
         const statusClass = this.status !== 'default' ? `co-phone-field--${this.status}` : '';
-        return (h("div", { key: 'e1851152e30c4e1580dd533ba0880eeef8933c0c', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: 'd6adc2584613b7c2ebe72933275ff3058c9d6eef', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: 'e02252f85db26cc8ac82a791d86b096630026e9f', required: this.required }))), h("div", { key: 'a1433e7df570481200e39aa366e343d41e85441d', class: "co-phone-field__container" }, h("button", { key: 'da306e01f096755f7da014bbfaf21db41fb99c51', type: "button", class: "co-phone-field__selector", disabled: this.disabled, onClick: () => this.handleToggleDropdown(), "aria-expanded": String(this.isOpen), "aria-haspopup": "listbox" }, entry ? (h("img", { class: "co-phone-field__flag", src: `https://flagcdn.com/w40/${entry.iso2.toLowerCase()}.png`, alt: entry.iso2 })) : (h("co-icon", { name: "phone", size: 16 })), h("span", { key: '920e1cfffbcae7266dcde4bd37e339e550adcae0', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: '2dec0f362a9a75b718ea4aade2c981fba6777ecb', class: "co-phone-field__chevron" }, h("co-icon", { key: 'ad77c5446f2352cc8fa07230af125500dff3f4b6', name: "caret-down", size: 14 }))), h("input", { key: '926302b2660eb32b8d86a2e421700acebc1b8e11', 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: '4e86eb6353ad92839a68400ebfa9d8b5dff0111b', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: 'bdd3d82c8b1e46741f9fca118ffe35b2e8c0690f', class: "co-phone-field__search" }, h("input", { key: '699189bbdd5027436c2757569ddf5945f2c29e78', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: '8ec344b5aeb8a80fd0bb72ad1773ac3416a6d1e6', class: "co-phone-field__options" }, this.filteredCountries.map((d) => (h("button", { type: "button", key: d.iso2, class: `co-phone-field__option ${d.iso2 === this.selectedIso2 ? 'co-phone-field__option--selected' : ''}`, role: "option", "aria-selected": d.iso2 === this.selectedIso2 ? 'true' : 'false', onClick: () => this.handleCountrySelect(d) }, h("img", { class: "co-phone-field__option-flag", src: `https://flagcdn.com/w40/${d.iso2.toLowerCase()}.png`, alt: d.iso2 }), h("span", { class: "co-phone-field__option-name" }, this.renderName(d.name)), h("span", { class: "co-phone-field__option-code" }, d.dialCode))))))), this.helperText && (h("div", { key: 'e248da6a7e2c62c9ed01d2ad0a204caea51f55a6', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: 'ab6fbf9894d8d71fde4e00e07eb81eece230eafb', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '0608d49c56d3a20c65cc966c733607440bf73900', class: "co-phone-field__helper-text" }, this.helperText)))));
+        return (h("div", { key: '8284bc5388c552450f81718741a496f85fed978a', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: 'bec896d4bded4e50b7872468842b9ffc54c17d41', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: 'fd6aa534c7ce1e3a07144b975c767878c74478b0', required: this.required }))), h("div", { key: '2e76fbce6848dc629633f33b6c35240ef8d86ed9', class: "co-phone-field__container" }, h("button", { key: 'd10b160393d1387e5cb4ae5383cb799c7aa83c35', type: "button", class: "co-phone-field__selector", disabled: this.disabled, onClick: () => this.handleToggleDropdown(), "aria-expanded": String(this.isOpen), "aria-haspopup": "listbox" }, entry ? (h("img", { class: "co-phone-field__flag", src: `https://flagcdn.com/w40/${entry.iso2.toLowerCase()}.png`, alt: entry.iso2 })) : (h("co-icon", { name: "phone", size: 16 })), h("span", { key: 'b186df40f9625c1a948d0453b0c1c5552c0edcbc', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: '18ac1c10191d9858b8f8ec6d2eacd0c5ea0200d4', class: "co-phone-field__chevron" }, h("co-icon", { key: '3ef2c5a5078f50b2142a4113c3dc06dd6ce5d1a1', name: "caret-down", size: 14 }))), h("input", { key: 'd802c344bd3f8b03bc6f4abafc827a116ad69529', 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: '1afbb3ac516442ce7aa31b234510cbfad91cdbea', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: 'c8d82c6dc2bac91e63fc6d436fa869c06b9f7127', class: "co-phone-field__search" }, h("input", { key: 'ed79f91223ee797a633c04401573592e30826b36', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: 'c17c257306957e24676efbe67dcacbbcb44cf860', class: "co-phone-field__options" }, this.filteredCountries.map((d) => (h("button", { type: "button", key: d.iso2, class: `co-phone-field__option ${d.iso2 === this.selectedIso2 ? 'co-phone-field__option--selected' : ''}`, role: "option", "aria-selected": d.iso2 === this.selectedIso2 ? 'true' : 'false', onClick: () => this.handleCountrySelect(d) }, h("img", { class: "co-phone-field__option-flag", src: `https://flagcdn.com/w40/${d.iso2.toLowerCase()}.png`, alt: d.iso2 }), h("span", { class: "co-phone-field__option-name" }, this.renderName(d.name)), h("span", { class: "co-phone-field__option-code" }, d.dialCode))))))), this.helperText && (h("div", { key: '715b34b6ddf4ffba355eb6adb8e1f1b95f84c427', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: 'bae83d720a649a103b5fb96e1d7574e5d7d43a96', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: 'cfff030caaf3479a7959244a8e2f55698aec962f', 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-progress-bar/co-progress-bar.js

@@ -18,12 +18,12 @@ export class CoProgressBar {
     render() {
         const clamped = Math.max(0, Math.min(100, this.value));
         const indeterminate = this.indeterminate;
-        return (h("div", { key: '77313f1edbd0a70e8b783155e71ba39ac6c2b905', class: {
+        return (h("div", { key: '88de4aa234fc442abdd438c30e93cf98c1fc3602', class: {
                 'co-progress-bar': true,
                 [`co-progress-bar--${this.status}`]: true,
                 [`co-progress-bar--${this.variant}`]: true,
                 'co-progress-bar--indeterminate': indeterminate,
-            }, role: "progressbar", "aria-valuenow": indeterminate ? undefined : clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "bar", style: { height: `${this.thickness}px` } }, h("div", { key: '1c6e1942e8128d49f01bb2fedac113eee2f31ac6', class: "co-progress-bar__fill", style: indeterminate ? undefined : { width: `${clamped}%` } })));
+            }, role: "progressbar", "aria-valuenow": indeterminate ? undefined : clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "bar", style: { height: `${this.thickness}px` } }, h("div", { key: '20302f98f83a18eda4477eeb333aadc6beead8ba', class: "co-progress-bar__fill", style: indeterminate ? undefined : { width: `${clamped}%` } })));
     }
     static get is() { return "co-progress-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,7 +19,7 @@ export class CoProgressCircle {
         const clamped = Math.max(0, Math.min(100, this.value));
         const angle = (clamped / 100) * 360;
         const safeStroke = Math.min(this.strokeWidth, this.size / 2);
-        return (h("div", { key: '879a0c95c7d4aa279eed21447b093bc1461afa4c', class: {
+        return (h("div", { key: '43d2823b3f20fb1c604fc0f9dab2cf15ca52db4e', class: {
                 'co-progress-circle': true,
                 [`co-progress-circle--${this.status}`]: true,
             }, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "circle", style: {
@@ -27,7 +27,7 @@ export class CoProgressCircle {
                 height: `${this.size}px`,
                 '--co-pc-angle': `${angle}deg`,
                 '--co-pc-stroke': `${safeStroke}px`,
-            } }, h("div", { key: '7f2ece80cede1b6eda659706fe4a2b8cbfc6f47a', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '83cbbe79663dae93962da7d1d9ae1f27a6e46fa4', class: "co-progress-circle__label" }, clamped, "%"))));
+            } }, h("div", { key: '23165c28690602eeea2f22ecc66982dee7c2dd62', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '47b3c3ef7122c94c7ae216b7a3f5cb81cc9a028c', class: "co-progress-circle__label" }, clamped, "%"))));
     }
     static get is() { return "co-progress-circle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-provider-logo/co-provider-logo.css

@@ -0,0 +1,23 @@
+/* co-provider-logo */
+
+:host {
+  display: inline-flex;
+  flex: 0 0 auto;
+  line-height: 0;
+}
+
+.co-provider-logo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Disco blanco: la marca a color sobre una superficie teñida (chip de evento
+   externo) necesita su propio fondo para leerse. Blanco literal, no un token
+   semántico: el plato existe para dar el contraste que la marca asume, y en
+   dark mode debe seguir siendo blanco igual. */
+.co-provider-logo--plated {
+  background: #fff;
+  border-radius: var(--co-border-radius-full);
+  box-shadow: 0 0 0 1px rgb(0 0 0 / 8%);
+}