@prolibu-suite/cobalt-core 0.4.0 → 0.6.0

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

@@ -51,6 +51,11 @@ export class CoOptionList {
         /** Término externo para highlight (input en el host, p.ej. ⌘K). */
         this.highlightTerm = '';
         this.avatarShape = 'circle';
+        // ── Navegación ─────────────────────────────────────────────
+        /** Auto-resalta la primera fila navegable al montar y en cada cambio de
+         *  items (paridad command-palette: tipear + Enter = primer resultado).
+         *  Salta filas disabled vía nextActiveIndex. */
+        this.autoHighlight = false;
         this.term = '';
         this.activeIndex = -1;
         this.scrollTop = 0;
@@ -107,6 +112,8 @@ export class CoOptionList {
     componentWillLoad() {
         this.term = this.initialTerm || '';
         this.takeSnapshot();
+        if (this.autoHighlight)
+            this.activeIndex = nextActiveIndex(-1, 1, this.orderedItems);
     }
     componentDidRender() {
         // OverlayScrollbars sobre el contenedor; wrapper interno estable para que
@@ -127,9 +134,15 @@ export class CoOptionList {
         this.osInstance = undefined;
     }
     onItemsChange() {
-        // Nueva página / nuevos resultados: si el highlight quedó fuera de rango, resetea.
-        if (this.activeIndex >= this.orderedItems.length)
+        // Nueva página / nuevos resultados: si autoHighlight, re-resalta la primera fila
+        // navegable (paridad command-palette); si no, solo resetea cuando el highlight
+        // quedó fuera de rango.
+        if (this.autoHighlight) {
+            this.activeIndex = nextActiveIndex(-1, 1, this.orderedItems);
+        }
+        else if (this.activeIndex >= this.orderedItems.length) {
             this.activeIndex = -1;
+        }
         // Clamp defensivo del scroll virtual: si la nueva lista es más corta que el
         // scrollTop actual (p.ej. búsqueda que redujo drásticamente el resultset),
         // reencuadra dentro de rango. NO resetear a 0 incondicionalmente — eso
@@ -188,6 +201,12 @@ export class CoOptionList {
                 this.scrollActiveIntoView();
                 return true;
             case 'Enter': {
+                // Enter con un fetch in-flight pickearía de la lista STALE (race
+                // detectada en smoke: el usuario teclea y confirma antes de que
+                // lleguen los resultados). Se consume sin actuar; el siguiente
+                // Enter opera sobre la lista fresca.
+                if (this.loading)
+                    return true;
                 const item = items[this.activeIndex];
                 if (item && !item.disabled) {
                     this.pick(item);
@@ -226,7 +245,7 @@ export class CoOptionList {
     // ── Render helpers ─────────────────────────────────────────
     renderLeading(item) {
         if (item.image || item.avatar) {
-            return (h("co-avatar", { class: "co-option-list__avatar", type: item.image ? 'image' : 'text', src: item.image, text: item.avatar, color: item.color, size: "xs", shape: this.avatarShape }));
+            return (h("co-avatar", { class: "co-option-list__avatar", type: item.image ? 'image' : 'text', src: item.image, text: item.avatar, color: item.color, size: "xxs", shape: this.avatarShape }));
         }
         if (item.color)
             return h("span", { class: "co-option-list__dot", style: { backgroundColor: item.color } });
@@ -248,7 +267,7 @@ export class CoOptionList {
                 '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 } : 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: 18, weight: "fill" }))), isSelected && !this.removableItems && this.selectedAffordance === 'check' && (h("co-icon", { name: "check", size: 16, class: "co-option-list__check" }))));
+            }, 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" }))));
     }
     renderVirtual(items, selectedIds) {
         const { totalHeight, startIdx, endIdx, offsetY } = virtualSlice(this.scrollTop, items.length);
@@ -259,11 +278,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: '2354775b63fe7419f03500639a66010c79e261d2', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: '9621030007e83e7906dcd07f59deb7623a06ef66', class: "co-option-list__search", part: "search" }, h("co-icon", { key: '9a28e5fa86aa8e0196a8efa47bb03ff361441d97', name: "magnifying-glass", size: 16 }), h("input", { key: 'd78d1a37d904811841e0077c07b74f8d6939848d', 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: '99335055c0ce9cef160ef84eaf0d85d79fc9ce17', 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: '716d4bd2d8fa07f6054c2b96eace6be78b2b07eb', class: "co-option-list__inner" }, showClear && (h("button", { key: '03eca612c006784e6d46ed0f4924b20c52582c75', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: '2ea79932eb4d1e4aaec62cacbcb42aa008cbb5cf', name: "x-circle", size: 14 }), h("span", { key: '04348a03193f518a94aab87f95a885ff6ff10af6' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: '5433843784a569c17ef7c2b51e82a4244f36d969', class: "co-option-list__loading" }, h("co-loader", { key: '52df16368ce659d2599b620affba0ca7715b7f3c', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: 'f998f6dc92acf6e96c236e83e00d27cf837f5306', class: "co-option-list__empty" }, h("co-icon", { key: 'ebdaafcefda9a4502ecdb448d7b1a6bb89165484', name: "magnifying-glass", size: 20 }), h("span", { key: '6532f13666769f9496baa21348d709d08083f395' }, this.emptyMessage))), items.length > 0 && this.virtual
+        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
             ? 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: 'b2e4c16e8f39a96f1154101a755f9edf43ecb354', class: "co-option-list__loading-more" }, h("co-loader", { key: 'c4a5161d81ddf6d5a106d8fe484f60d3c83e37db', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: '7adc44652a3c740e21e364d51fa69a96a654818c', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: 'bf2d4d336ef235d9213bf176403d30a7a899437b', name: "footer" })));
+                : 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" })));
     }
     static get is() { return "co-option-list"; }
     static get encapsulation() { return "shadow"; }
@@ -692,6 +711,26 @@ export class CoOptionList {
                 "reflect": false,
                 "attribute": "avatar-shape",
                 "defaultValue": "'circle'"
+            },
+            "autoHighlight": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-resalta la primera fila navegable al montar y en cada cambio de\nitems (paridad command-palette: tipear + Enter = primer resultado).\nSalta filas disabled v\u00EDa nextActiveIndex."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-highlight",
+                "defaultValue": "false"
             }
         };
     }

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

@@ -187,7 +187,7 @@ export class CoOverlay {
         focusables[nextIndex].focus();
     }
     render() {
-        return (h("div", { key: 'da8d1cc91e1e1a6ae1b9c1bc9fea2aefb0e8170a', 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: '884c740ff55fc6c9d34ddbb996fad1f7ea058344' })));
+        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' })));
     }
     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: '79bbf7064e2f72b992bc9c24bd3666071ef1cc7b', class: "co-page-header", part: "page-header" }, h("div", { key: '35aed98b3aaca45ffb20c9338e901f9d65f71fe0', class: "co-page-header__left" }, this.icon && (h("span", { key: '58c1c53d14b98c1731cd544c82a0e874a3da4e42', class: "co-page-header__icon" }, h("co-icon", { key: '882f34bd6a6cb1812f9e4f62cb35aed21a017212', name: this.icon, size: 24 }))), h("span", { key: '3bea48bca6b9d8ba5a539ed74bf505ae9c6cdd22', class: "co-page-header__title" }, h("slot", { key: 'ba1007a022068edbe53fa3903162564b23784f6e' }, this.heading))), h("div", { key: 'eb8127421713990cc25714a63ca0c450b22b3171', class: "co-page-header__actions" }, h("slot", { key: '631718ea4e974d946a185772c50abcf1b6128199', name: "actions" }))));
+        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" }))));
     }
     static get is() { return "co-page-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -48,10 +48,10 @@
   align-items: center;
   gap: var(--co-spacing-sm2);
   padding: var(--co-spacing-sm2) var(--co-spacing-md);
-  background: color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);
-  -webkit-backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
-  backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
-  border: 1px solid var(--co-semantic-border-subtle);
+  /* 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-radius: var(--co-border-radius-xs);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   min-height: 40px;
@@ -288,6 +288,3 @@
   min-width: 0;
 }
 
-@supports not (background: color-mix(in srgb, red, transparent)) {
-  .co-phone-field__container { background: var(--co-semantic-surface-secondary); }
-}

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: 'a716785bef2a754a09c502f13fcae90f7a8cb00e', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: 'ec550e1d699292885133c96effcb791541f649aa', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: '61c864be67e0283a00db014b1cd2bb734c249a2d', required: this.required }))), h("div", { key: 'e019c16551cc205bf27e03cc7a4f91fb95ec07e7', class: "co-phone-field__container" }, h("button", { key: '58a0958e3e3240bcd68edcde4d2dc1de72ecaf33', 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: 'ee75fbf56e703a88b6026244588d2da0f4ed1478', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: '05b173aded9b5fd4cf2173c453c70d94ddb8dd00', class: "co-phone-field__chevron" }, h("co-icon", { key: 'd7a543b4bedd61d7e6fdf88ae56cbf350fea31be', name: "caret-down", size: 14 }))), h("input", { key: '31e21dbce76c374dc8dd0c80919b7af0d8641375', 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: '8b5689485bba266776b988564a2b14602a80d9d4', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: 'f4453a595520c177e5f1ef184737c3b25bf84939', class: "co-phone-field__search" }, h("input", { key: '5f85ac03bbd7dff3f8d9130ab1f0a4c23b5d327d', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: '97051407520f0ba0514c746064e813b033ae1594', 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: '6d19085b7a08978c42f05713de48c1bdf0b19dba', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: '612cf27d01f0afda0fa75d58206114160dd61bcb', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '910b4584c3a2df48e30d11894bba7fd8fbb7e03c', class: "co-phone-field__helper-text" }, this.helperText)))));
+        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)))));
     }
     static get is() { return "co-phone-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -108,6 +108,15 @@ export class CoPopover {
     // per-mounted-popover overhead — pages with dozens of inline filters used to
     // pay for capture-phase listeners on every click for popovers that may never
     // open.
+    componentDidLoad() {
+        // Stencil NO dispara @Watch para el valor inicial: un popover CONTROLADO que
+        // monta ya con open=true (fresh-mount, p.ej. HeaderFilterPanel de suite-v2)
+        // quedaba promovido al top-layer pero SIN posicionar (centrado por el UA
+        // stylesheet de [popover]) y sin listeners de ESC/click-fuera/scroll.
+        // Ejecutar el show-path explícitamente cubre ese caso.
+        if (this.open)
+            this.onOpenChange(true);
+    }
     disconnectedCallback() {
         this.unbindDocListeners();
         this.cleanupListeners();
@@ -214,13 +223,13 @@ export class CoPopover {
     }
     // ── Render ─────────────────────────────────────────────────
     render() {
-        return (h("div", { key: '1d797487362744cb7d90dd47f428ee1dd859abfa', class: "co-popover" }, h("div", { key: 'ab088b70a9f179a3ea98378fe6004f7e7ba7634a', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: 'a087953350db65b6671466b136f8fad5dee9dba0', name: "trigger" })), this.open && (h("div", { key: 'a951cb121f3b258b51a90ee75450d555e87f3eb0', class: "co-popover__panel", popover: "manual", ref: (el) => {
+        return (h("div", { key: 'b39b9ec82457b91b62a5a82e400d598a45c99f95', class: "co-popover" }, h("div", { key: '925ffcd374f6f92ddc6991ed658eb7053f7fad44', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: '15cc3984fe8792738912406fb5479984f6de814e', name: "trigger" })), this.open && (h("div", { key: '61beaefd72b8b86e2deb8d8a4ba4e85a57cb4757', class: "co-popover__panel", popover: "manual", ref: (el) => {
                 if (el && el !== this.panelEl) {
                     this.panelEl = el;
                     this.promotePanel();
                     this.scheduleUpdate();
                 }
-            } }, h("slot", { key: 'dc00cee702a8162705b7891684b0765400289bb4' })))));
+            } }, h("slot", { key: '3ceb088ee3bbb1cc0e721502e81a72aee13de267' })))));
     }
     static get is() { return "co-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-progress-bar/co-progress-bar.css

@@ -60,7 +60,7 @@
 
 /* ─── Empty (0) — show only track ───────────────────────── */
 .co-progress-bar--dashed.co-progress-bar--default {
-  border-color: var(--co-semantic-border-muted);
+  border-color: var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));
 }
 
 /* ─── Indeterminate ──────────────────────────────────────── */

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: 'b86a49eb2bc74a2af69f887296cde9e303d1a39b', class: {
+        return (h("div", { key: '89d8f4d14642d426bdd7cefd047aa27eb301c217', 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: 'b18869a713977e9a3b6c08e439fb83438cfd6bb8', 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: '1aa79096ed24c2f4cddeefe704ffbd312d5e95ce', 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: '68787ff3019b10ef8fbdadedf955421b775e8f99', class: {
+        return (h("div", { key: 'c97a2f586f1e4518d2a35be1d43f13ede60a25bc', 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: '3d3af85f0b7ae4b4e59952989310269bd0b3fb36', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '00d943f501f90a4d03d0346f324e5c8f458fd22c', class: "co-progress-circle__label" }, clamped, "%"))));
+            } }, h("div", { key: '7418e16887ea4705d8e7d7228bc8c172058d5f5f', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '0af289d28bbf4f7e6c9be76c3c7e686960cd1ff0', class: "co-progress-circle__label" }, clamped, "%"))));
     }
     static get is() { return "co-progress-circle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,15 +17,15 @@ export class CoRadio {
         };
     }
     render() {
-        return (h("div", { key: 'bc7cde81e68321604f58bb3ff2aa66707897c132', class: {
+        return (h("div", { key: '81fa047c34b13cdd776886449a3f5c26cdcc4797', class: {
                 'co-radio-row': true,
                 'co-radio-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("button", { key: '628cd1366ffaf1d3a53c571bd1678994ac82f188', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, h("button", { key: '1a666d5890bef0df1257780b70890fb161758ae9', 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: 'a9615f8b274081add31e83d8fc46cef5bfc2d803', class: "co-radio__label", part: "label" }, this.label))));
+            }, disabled: this.disabled, part: "circle" }), this.label && (h("span", { key: '29a4f347d9af77512725da44b8fb3f884fd72910', class: "co-radio__label", part: "label" }, this.label))));
     }
     static get is() { return "co-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -59,11 +59,11 @@ export class CoRadioGroup {
         const hasLabels = this.label || this.secondaryLabel;
         const hasHelper = this.helperText;
         const opts = this.parsedOptions;
-        return (h("div", { key: '94c29c15e32e8ad2e1640641102d141882fed7e2', class: {
+        return (h("div", { key: '9e3a5c50cf5b0797146b7d6649cd1e1f6176e7a8', class: {
                 'co-radio-group': true,
                 'co-radio-group--disabled': this.disabled,
                 [`co-radio-group--${this.status}`]: this.status !== 'default',
-            }, role: "radiogroup", "aria-label": this.label || '' }, hasLabels && (h("div", { key: '219064f62b47c4f6945c694215ed239543ae7a20', class: "co-radio-group__labels" }, this.label && h("span", { key: '73ad6a795fb79c6a61adbd7caf99d66a2097f2a4', class: "co-radio-group__label" }, this.label), this.secondaryLabel && (h("span", { key: '0a7300369de028245ef04ef7f758ee6b98605b60', class: "co-radio-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: '89eea55b445a648926923b019abd793f7c622f94', class: {
+            }, role: "radiogroup", "aria-label": this.label || '' }, hasLabels && (h("div", { key: 'a6670dd8052801c17380161a875e5504c773f7cf', class: "co-radio-group__labels" }, this.label && h("span", { key: '2e11c6a1dc36e880975315147fd731a7811fd42f', class: "co-radio-group__label" }, this.label), this.secondaryLabel && (h("span", { key: 'cf844f3dfd22693afefb47bad0f467edd7e33329', class: "co-radio-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'e2650512d0b9c217f4d6f0c041157e546f582fa2', class: {
                 'co-radio-group__options': true,
                 [`co-radio-group__options--${this.direction}`]: true,
             } }, opts.map(opt => {
@@ -78,7 +78,7 @@ export class CoRadioGroup {
                     'co-radio-group__circle--checked': isChecked,
                     'co-radio-group__circle--disabled': isDisabled,
                 }, role: "radio", "aria-checked": String(isChecked), "aria-label": opt.label }), h("span", { class: "co-radio-group__option-label" }, opt.label)));
-        })), hasHelper && (h("div", { key: 'f30ed296f217352dbb4402b5679d791d0adf0b07', class: `co-radio-group__helper co-radio-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '831a33a28dbfff0306c3da3b7d89fb688522f2af', name: this.statusIcon, size: 14, weight: "fill", class: "co-radio-group__helper-icon" })), h("span", { key: '96412549d5a05ab07c40e5a24bfd954403856c6d', class: "co-radio-group__helper-text" }, this.helperText)))));
+        })), hasHelper && (h("div", { key: '8684377f807fe91a0d88337e61cb7c7de0226832', class: `co-radio-group__helper co-radio-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '2e12226109aec413ac76f71d0c32ac98f41b12f4', name: this.statusIcon, size: 14, weight: "fill", class: "co-radio-group__helper-icon" })), h("span", { key: 'e4d32771b3fe3a49ee1f907c0545fff31441e887', class: "co-radio-group__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-radio-group"; }
     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: 'c065e6d1dfc6a9e1919e13692ef04ed1e6a547e9', class: {
+        return (h("div", { key: '79a5d0a2893814ec7bd1a43178d6ae68e51921ef', class: {
                 'co-rating': true,
                 'co-rating--disabled': this.disabled,
                 'co-rating--readonly': this.readOnly,
                 [`co-rating--${this.size}`]: true,
-            } }, this.label && h("label", { key: 'a18472ea4337aca205a5f558c2fe2de71502205b', class: "co-rating__label" }, this.label), h("div", { key: '0a30106a0e8e7001d24793c22e1c93e82d572325', class: "co-rating__stars", onMouseLeave: this.handleMouseLeave }, stars.map(star => (h("button", { class: {
+            } }, 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: {
                 '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: '6c204320177cbc147263668e0ae2f1ed607b2b58', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'f7dfea814dbe33f4e976807bc7f2be630b60b57d', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), h("span", { key: 'd282f7826e0ff68099995cbbbd835c18cc89e9d7', 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: '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)))));
     }
     static get is() { return "co-rating"; }
     static get encapsulation() { return "shadow"; }