@prolibu-suite/cobalt-core 0.6.0 → 0.8.0

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: 'f6262519bd90bb9a419daeb9a1386147396a79ff', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: '081a2cfee9a8a903c6bd2a2f0bd06cbac635c021', class: "co-option-list__search", part: "search" }, h("co-icon", { key: 'a001c71f5de00288907cde1e123f8d393e052a9e', name: "magnifying-glass", size: 16 }), h("input", { key: '355520b7d77077e02666fcd5012f36c648eaeacf', 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: '833708f614d3f561ba45bf1656f4bcfa6701b8ce', 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: '10da99a56133af0748f43c20af62e03e975aebcd', class: "co-option-list__inner" }, showClear && (h("button", { key: '208bc13eb8e89c88657022fbc174bb22ffe9e1c4', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: '8c6d29e405a12e53bd3ab9f1662c7237bcae0617', name: "x-circle", size: 14 }), h("span", { key: 'd7e11cc7753c8dd63ae6a556bf5368c01ea1fc2a' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: 'dec374969fe6b401a95d60d101cc625c181f3e72', class: "co-option-list__loading" }, h("co-loader", { key: 'c1547fc0f49911f2f8ab8b85063bf15af6500314', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: '1e0692572f89d4f9507f1e4b8c4ef90f9f8d307c', class: "co-option-list__empty" }, h("co-icon", { key: 'ff979119305afdd7b2180336c203ff33adc3c463', name: "magnifying-glass", size: 20 }), h("span", { key: '9d460743d6edf7734012d75cabb0f488b67d20cf' }, 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: 'f9c506fddfba9d360a7dd4b2d4ed4142aaa179c5', class: "co-option-list__loading-more" }, h("co-loader", { key: '587d93ebd03eb3764e5637c748975c925d1bd59f', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: 'cef0c72b2aa1f246404001bae6c8ee4ea560ee07', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: '646b6421fb03008d55e5361e14f12d05db08e299', 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: 'e70f495933546eca563a6d07ad1cea1fa9679945', 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: 'f7bdd4bf7c20374c45beab4cebe4b98211ccd095' })));
+        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: '8cc8c7c22074b9d26f1188862281cfe529176caa', class: "co-page-header", part: "page-header" }, h("div", { key: '3b500f4d87dca9e030b73072aa91cffac152a77a', class: "co-page-header__left" }, this.icon && (h("span", { key: 'ae3a8660321c7e35df329e1cd81bf8ade4b7d423', class: "co-page-header__icon" }, h("co-icon", { key: '7571121b507d205beb602164db650858ef1ec7c6', name: this.icon, size: 24 }))), h("span", { key: '2b75edfe92074136c414fe4245500296f937aa84', class: "co-page-header__title" }, h("slot", { key: '7c90582ce3205119e2cfe2b30b3407ddfd88a8fb' }, this.heading))), h("div", { key: '22fd3ea46014f8a717379d5a779c51631722f136', class: "co-page-header__actions" }, h("slot", { key: '06ab6736b021352f673197234426122c0677aa8c', 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.css

@@ -51,7 +51,7 @@
   /* Figma Text Field parity (same box as co-input): solid page surface +
      Negro 25% border — tinted glass didn't read as editable on white. */
   background: var(--co-semantic-surface-page);
-  border: 1px solid var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25));
+  border: 1px solid var(--co-semantic-border-field);
   border-radius: var(--co-border-radius-xs);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   min-height: 40px;
@@ -85,7 +85,7 @@
 
 .co-phone-field__container:focus-within {
   border-color: var(--co-semantic-border-focus);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 15%, transparent);
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
 }
 
 .co-phone-field__selector {

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: '0c1c765453fd4ec3c25ea586c24df13d563d0183', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: '7241ea86c1aa5ecdfaca9f916da0b8857c546f7f', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: 'a9b6361645cfbaf46a51eae6251a1e4896661b45', required: this.required }))), h("div", { key: '88f91585a55d38b3a9e1d0141a804633e8cda902', class: "co-phone-field__container" }, h("button", { key: '86b736933e4116fe035bf744b974f39d8f9282ad', 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: '8417712d8a5da930057989996f830874a38e5320', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: '8bf326a6846b9a3ed83a6cf2191e5df2d8cc859a', class: "co-phone-field__chevron" }, h("co-icon", { key: 'fb5d2975572898de1f82e295180f55306b326bbf', name: "caret-down", size: 14 }))), h("input", { key: '797a9cbea54cb59c40da94365eb8a1350e750cea', 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: '48cb464f8abb745ae4a15428b1fa339d0f51264d', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: 'a0deba5bd857051ff6917be7f87829291379c9ac', class: "co-phone-field__search" }, h("input", { key: '621d9b646763d44535e158f618113dfe5bfe807e', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: 'f704fb94729f3001faa17e0fdb631bda0cc03b02', 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: 'acdb17617c05389dc188b5c02e301841302ddfc5', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: '966719a393cf04403fab56f839b383c2df02597e', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '3e91617e7159c113219acb3617c1a0db1fc736f3', 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: '89d8f4d14642d426bdd7cefd047aa27eb301c217', 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: '1aa79096ed24c2f4cddeefe704ffbd312d5e95ce', 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: 'c97a2f586f1e4518d2a35be1d43f13ede60a25bc', 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: '7418e16887ea4705d8e7d7228bc8c172058d5f5f', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '0af289d28bbf4f7e6c9be76c3c7e686960cd1ff0', 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%);
+}

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

@@ -0,0 +1,124 @@
+import { h } from "@stencil/core";
+/** Marcas oficiales, con sus colores. NO se tokenizan: un logo recoloreado
+ *  deja de ser el logo (misma excepción que aplica el host para brand icons). */
+const BRANDS = {
+    google: {
+        viewBox: '0 0 48 48',
+        paths: [
+            { fill: '#EA4335', d: 'M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z' },
+            { fill: '#4285F4', d: 'M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z' },
+            { fill: '#FBBC05', d: 'M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z' },
+            { fill: '#34A853', d: 'M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z' },
+        ],
+    },
+    microsoft: {
+        viewBox: '0 0 23 23',
+        paths: [
+            { fill: '#F25022', d: 'M1 1h10v10H1z' },
+            { fill: '#7FBA00', d: 'M12 1h10v10H12z' },
+            { fill: '#00A4EF', d: 'M1 12h10v10H1z' },
+            { fill: '#FFB900', d: 'M12 12h10v10H12z' },
+        ],
+    },
+};
+/**
+ * Logo de marca de un proveedor externo (Google, Microsoft), a color y
+ * self-contained (SVG inline — nunca una URL remota).
+ *
+ * `plated` lo monta sobre un disco blanco: es lo que hace legible una marca a
+ * color cuando va encima de una superficie teñida (el badge de un evento de
+ * calendario externo, que hereda el color del calendario).
+ */
+export class CoProviderLogo {
+    constructor() {
+        /** Lado del logo en px (los viewBox son cuadrados). */
+        this.size = 16;
+        /** Disco blanco de fondo para contraste sobre superficies de color. */
+        this.plated = false;
+    }
+    render() {
+        var _a;
+        const key = String((_a = this.provider) !== null && _a !== void 0 ? _a : '').toLowerCase();
+        const brand = BRANDS[key.includes('outlook') ? 'microsoft' : key];
+        if (!brand)
+            return null;
+        // El disco crece sobre el logo para que la marca respire dentro del plato.
+        const box = this.plated ? Math.round(this.size * 1.5) : this.size;
+        return (h("span", { class: { 'co-provider-logo': true, 'co-provider-logo--plated': this.plated }, style: { width: `${box}px`, height: `${box}px` }, part: "root" }, h("svg", { width: this.size, height: this.size, viewBox: brand.viewBox, "aria-hidden": "true", focusable: "false" }, brand.paths.map((p) => (h("path", { fill: p.fill, d: p.d }))))));
+    }
+    static get is() { return "co-provider-logo"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-provider-logo.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-provider-logo.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "provider": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Proveedor: `google` | `microsoft`. Uno desconocido no pinta nada."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "provider"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lado del logo en px (los viewBox son cuadrados)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "16"
+            },
+            "plated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disco blanco de fondo para contraste sobre superficies de color."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "plated",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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

@@ -17,15 +17,15 @@ export class CoRadio {
         };
     }
     render() {
-        return (h("div", { key: '81fa047c34b13cdd776886449a3f5c26cdcc4797', class: {
+        return (h("div", { key: '336f85ea727de12ef444126ba6f428957463663c', class: {
                 'co-radio-row': true,
                 'co-radio-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("button", { key: '1a666d5890bef0df1257780b70890fb161758ae9', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, h("button", { key: '9f703411fc244639599918c9673e166ca6b820a6', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
                 'co-radio': true,
                 [`co-radio--${this.size}`]: true,
                 'co-radio--checked': this.checked,
                 'co-radio--disabled': this.disabled,
-            }, disabled: this.disabled, part: "circle" }), this.label && (h("span", { key: '29a4f347d9af77512725da44b8fb3f884fd72910', class: "co-radio__label", part: "label" }, this.label))));
+            }, disabled: this.disabled, part: "circle" }), this.label && (h("span", { key: 'f7f027f702b41e9b52f281cb80ef05d57f0fae1b', class: "co-radio__label", part: "label" }, this.label))));
     }
     static get is() { return "co-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,16 +36,16 @@ export class CoRating {
         const iconSize = this.size === 'large' ? 28 : 20;
         const active = this.hoverValue || this.value;
         const stars = Array.from({ length: this.max }, (_, i) => i + 1);
-        return (h("div", { key: '79a5d0a2893814ec7bd1a43178d6ae68e51921ef', class: {
+        return (h("div", { key: '1f30917baf6de9922ebf76214c324b2669046f98', class: {
                 'co-rating': true,
                 'co-rating--disabled': this.disabled,
                 'co-rating--readonly': this.readOnly,
                 [`co-rating--${this.size}`]: true,
-            } }, this.label && h("label", { key: '50606dcbbf3783df6d55e78ad03c7d7b85cd9611', class: "co-rating__label" }, this.label), h("div", { key: '489d544d4857ba770719086d341b41162af557de', class: "co-rating__stars", onMouseLeave: this.handleMouseLeave }, stars.map(star => (h("button", { class: {
+            } }, this.label && h("label", { key: 'f03d4bd39a49f4e16d5724478f4c0f15ac3a8c92', class: "co-rating__label" }, this.label), h("div", { key: '96301d47ba510e923f0abd3f5fff63b5f8437099', class: "co-rating__stars", onMouseLeave: this.handleMouseLeave }, stars.map(star => (h("button", { class: {
                 'co-rating__star': true,
                 'co-rating__star--active': star <= active,
                 'co-rating__star--hover': this.hoverValue > 0 && star <= this.hoverValue,
-            }, type: "button", tabIndex: this.disabled || this.readOnly ? -1 : 0, disabled: this.disabled, onClick: () => this.handleClick(star), onMouseEnter: () => this.handleMouseEnter(star), "aria-label": `${star} of ${this.max}` }, h("co-icon", { name: this.icon, size: iconSize, weight: star <= active ? 'fill' : 'regular' }))))), this.helperText && (h("div", { key: 'af6db3a4a405300904ef3bac7634145614813bd4', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'af9a32a796abceb861bd0e838c058b8414fc1e9b', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), h("span", { key: '77d7357560bd293f4adb5e9d85a82d6e9e8da056', class: "co-rating__helper-text" }, this.helperText)))));
+            }, type: "button", tabIndex: this.disabled || this.readOnly ? -1 : 0, disabled: this.disabled, onClick: () => this.handleClick(star), onMouseEnter: () => this.handleMouseEnter(star), "aria-label": `${star} of ${this.max}` }, h("co-icon", { name: this.icon, size: iconSize, weight: star <= active ? 'fill' : 'regular' }))))), this.helperText && (h("div", { key: '4e84ece3536c2e028057be76910eae6fa3ac6228', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'a24e3451108027dc941c96dbf03988e1cab92424', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), h("span", { key: '734bc0b5515d95ac1d5545b20842d949e35a0d87', class: "co-rating__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-rating"; }
     static get encapsulation() { return "shadow"; }

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

@@ -59,7 +59,7 @@
      (e.g. the dark-navbar workspace pill = Figma "Blanco 8%") without
      touching shared tokens. */
   background: var(--co-ref-field-trigger-bg, var(--co-semantic-surface-page));
-  border: 1px solid var(--co-ref-field-trigger-border-color, var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25)));
+  border: 1px solid var(--co-ref-field-trigger-border-color, var(--co-semantic-border-field));
   border-radius: var(--co-border-radius-xs);
   min-height: 40px;
   box-sizing: border-box;
@@ -67,6 +67,22 @@
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
+/* ── Variant: flat (no border/background — reads as content) ──────────
+   Border-width/radius are left untouched (only the color goes transparent),
+   so padding/box size never shift between default and flat. Placed here
+   (before size variants and ahead of open/disabled/status below) so the
+   equal-specificity (0,1,0) single-class state selectors — open/disabled/
+   error/success/warning — win the cascade tie by source order and keep
+   showing through on top of flat. Unlike co-input/co-select (wrapper class +
+   separate `__field`/`__trigger` child), co-ref-field already keeps every
+   trigger modifier on this one div, so the tied selectors are single
+   classes here instead of two-class descendant chains — same trick,
+   adapted to this component's existing structure. */
+.co-ref-field--flat {
+  background: transparent;
+  border-color: transparent;
+}
+
 /* ── Size variants (mirror co-input heights: s 28 / sm 32 / md 40 / lg 48).
    md is the default trigger above — no override needed. sm keeps its legacy
    12px font (suite-v2 FieldRef/filters depend on this exact look). */