@prolibu-suite/cobalt-core 0.10.3 → 0.11.0

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

@@ -10,6 +10,7 @@ import { buildRows, deriveMore, listReorderIds, liveSelectedOrder, nextActiveInd
  * NO renderiza trigger ni chrome de panel (popover/dialog/ancho): eso es del
  * host. Es 100% controlada: no muta `value`; emite y el host decide.
  *
+ * @slot header - Entre el buscador y la lista (filtros por categoría de una paleta). UN elemento siempre montado.
  * @slot footer - Footer del panel (normalmente <co-list-footer>).
  */
 export class CoOptionList {
@@ -308,6 +309,25 @@ export class CoOptionList {
     }
     // ── Métodos públicos ───────────────────────────────────────
     /** Re-toma el snapshot selected-first. El host la llama al abrir su panel. */
+    /**
+     * Vacía el buscador (texto, término y cualquier coSearch en vuelo) y emite
+     * `coSearch('')`. Para hosts que reabren el panel (co-popover): el término
+     * vive ACÁ, así que sin esto la búsqueda anterior reaparecía con la lista del
+     * host ya sin filtrar.
+     */
+    async clearSearch() {
+        if (this.debounceTimer)
+            clearTimeout(this.debounceTimer);
+        const hadTerm = !!this.term;
+        this.term = '';
+        this.activeIndex = -1;
+        this.lastFillLen = -1;
+        if (this.searchInputEl)
+            this.searchInputEl.value = '';
+        if (hadTerm)
+            this.takeSnapshot();
+        this.coSearch.emit('');
+    }
     async snapshotOrder() {
         this.takeSnapshot();
     }
@@ -690,6 +710,9 @@ export class CoOptionList {
         }
         if (item.color)
             return h("span", { class: "co-option-list__dot", style: { backgroundColor: item.color } });
+        if (item.icon && item.iconTint) {
+            return (h("span", { class: "co-option-list__icon-tile", part: "icon-tile", style: { '--co-option-list-icon-tint': item.iconTint } }, h("co-icon", { name: item.icon, size: 14 })));
+        }
         if (item.icon)
             return h("co-icon", { name: item.icon, size: 16, class: "co-option-list__icon" });
         return null;
@@ -741,11 +764,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: '30f39e9cfe2472f1083768b6e974aa48672e63d0', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: 'f1c125c141ca8ceebae5c1ed0c786919c31805b3', class: "co-option-list__search", part: "search" }, h("co-icon", { key: 'd56810ca205984e7b2c56546930ce25ca70fda68', name: "magnifying-glass", size: 16 }), h("input", { key: 'a85b35debe7b14c604a3262c7c04ee3b9ca41a6a', 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: 'ea5eecc218a228e07dd05d8f963518b4a8e0039f', 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: 'b27071cb3d629022fa6e926050fdc17b2051ef98', class: "co-option-list__inner" }, showClear && (h("button", { key: '443791f8ee2d1f05a16c4002573264acf0a8de1b', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: 'ebe7e65669ff9eb76922ef76e21b9209658a444f', name: "x-circle", size: 14 }), h("span", { key: '82d2bcceb41ec5370e60ea9e25af91a2cbf11e70' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: '9f60fedc78ee66d198623a5e3ac9b0f1569ddef4', class: "co-option-list__loading" }, h("co-loader", { key: 'ab7b1947e03af880cc608bef8639d7dc882a53b7', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: '6b0870e6c5b2c25e2854431a28a2d6b56253ecf2', class: "co-option-list__empty" }, h("co-icon", { key: '302d71e23e0d56104dfd04948201630ddbb4b078', name: "magnifying-glass", size: 20 }), h("span", { key: 'fc580f9a50974ab22a7b648dbbe4ca17340094d8' }, this.emptyMessage))), items.length > 0 && this.virtual
+        return (h("div", { key: 'af6891bdf933b74b6e680b81387764c3c2a0f2b9', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: '68cfffc9df1d3061d38063f6b0502afc58c668c4', class: "co-option-list__search", part: "search" }, h("co-icon", { key: 'abfc569cce22f30146cc714f4157ce12819a729a', name: "magnifying-glass", size: 16 }), h("input", { key: '5150055db79ef22253e0103998fde0c79d3b5eda', 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("slot", { key: '1d858e33c3a6971b4abf6dd614603c4e01cba1c6', name: "header" }), h("div", { key: '28fd86f22a7f8e95fdfee4f33f1af0b441ca4c38', 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: '3002c5216cac79d5d39aab2b349f6853e6517535', class: "co-option-list__inner" }, showClear && (h("button", { key: 'f6e15aeb7ea9422daf38d65611df3ca4dbb243e2', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: '2f22f2b31291145b36721e923c3a422fadcabb50', name: "x-circle", size: 14 }), h("span", { key: 'd4c6b7ad4dd8df4725b763929f34da6793b29649' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: 'c9cb5cf8095ed45d71a143878bd9ed524c6dbf25', class: "co-option-list__loading" }, h("co-loader", { key: '550b8014bec75fb16c9c7b29dd5589355abee9be', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: '40ffc1f2945a0acd0a9c7ee4e83a1f23a93ebbd2', class: "co-option-list__empty" }, h("co-icon", { key: '639e88bb241fd79fca5481505d5cab36e89b89df', name: "magnifying-glass", size: 20 }), h("span", { key: '8f01fb62e21ad0fd6c2e367bd14d88cb09fa425e' }, 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: '606a674960e4d16198ef36de4686de91ad742dde', class: "co-option-list__loading-more" }, h("co-loader", { key: '933613b7b606399cd9eea3f877a4b2c77f269785', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: '6a6220513b6db222b57155c54afa805519e4b1b8', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: '4d952742c39335d9f19c2e45f58ae6be3306857d', name: "footer" })));
+                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (h("div", { key: 'e0146742e08a49e0c297ab795e3eb283daedf281', class: "co-option-list__loading-more" }, h("co-loader", { key: '1bdd97a2c79d4fab0ea75be2bc4c7c4254de7638', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: 'cd336459aded62f27957888595c53475ba2d7664', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: '767d9b82e7afbea41f196e110d7a6fd720637df9', name: "footer" })));
     }
     static get is() { return "co-option-list"; }
     static get encapsulation() { return "shadow"; }
@@ -1442,6 +1465,23 @@ export class CoOptionList {
     }
     static get methods() {
         return {
+            "clearSearch": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Vac\u00EDa el buscador (texto, t\u00E9rmino y cualquier coSearch en vuelo) y emite\n`coSearch('')`. Para hosts que reabren el panel (co-popover): el t\u00E9rmino\nvive AC\u00C1, as\u00ED que sin esto la b\u00FAsqueda anterior reaparec\u00EDa con la lista del\nhost ya sin filtrar.",
+                    "tags": []
+                }
+            },
             "snapshotOrder": {
                 "complexType": {
                     "signature": "() => Promise<void>",
@@ -1455,7 +1495,7 @@ export class CoOptionList {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Re-toma el snapshot selected-first. El host la llama al abrir su panel.",
+                    "text": "",
                     "tags": []
                 }
             },

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

@@ -53,7 +53,9 @@ export class CoOverlay {
         /** Whether THIS instance currently holds a scroll lock (prevents double-count). */
         this.hasLock = false;
         // Origen de la pulsación en curso (ver isBackdropDismiss): un drag que
-        // empieza dentro del contenido y suelta en el fondo NO es un cierre.
+        // empieza dentro del contenido y suelta en el fondo NO es un cierre —el
+        // navegador despacha ese `click` al ancestro común, el propio scrim—, ni
+        // uno que empieza en el fondo y suelta en el contenido (Tarea QA 94).
         this.pressDownTarget = null;
         this.pressUpTarget = null;
         this.handlePointerDown = (e) => {
@@ -65,9 +67,11 @@ export class CoOverlay {
             var _a;
             this.pressUpTarget = (_a = e.composedPath()[0]) !== null && _a !== void 0 ? _a : null;
         };
+        // Sólo cierra una pulsación completa sobre el scrim mismo, no sobre el contenido.
         this.handleClick = (e) => {
             var _a;
-            const dismiss = isBackdropDismiss(this.pressDownTarget, this.pressUpTarget, (_a = e.composedPath()[0]) !== null && _a !== void 0 ? _a : null);
+            const clickTarget = (_a = e.composedPath()[0]) !== null && _a !== void 0 ? _a : null;
+            const dismiss = clickTarget === this.overlayEl && isBackdropDismiss(this.pressDownTarget, this.pressUpTarget, clickTarget);
             this.pressDownTarget = null;
             this.pressUpTarget = null;
             if (dismiss)
@@ -208,7 +212,7 @@ export class CoOverlay {
         focusables[nextIndex].focus();
     }
     render() {
-        return (h("div", { key: '74051ac6a35eff0b9c873bafe2141b0a9486f83e', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", popover: "manual", tabindex: this.trapFocus ? -1 : undefined, ref: (el) => (this.overlayEl = el), onPointerDown: this.handlePointerDown, onPointerUp: this.handlePointerUp, onClick: this.handleClick, onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: '8ed7f244bfe88f3d38b9e1f6720b0a191529f6f1' })));
+        return (h("div", { key: '842f23e0829dcb9138f3fd35c86471035949517c', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", popover: "manual", tabindex: this.trapFocus ? -1 : undefined, ref: (el) => (this.overlayEl = el), onPointerDown: this.handlePointerDown, onPointerUp: this.handlePointerUp, onClick: this.handleClick, onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: '645b336ce50938672fc09a27a15ef314250beaf2' })));
     }
     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: '0f064f7e659103d8f679f23242492a5e9a869a88', class: "co-page-header", part: "page-header" }, h("div", { key: '4ccd5682d2d6872a5fa771b2779a8f7e0ab8b6f7', class: "co-page-header__left" }, this.icon && (h("span", { key: '10bc9aa126f8b9932b1e4247d7c3c3c04d89c425', class: "co-page-header__icon" }, h("co-icon", { key: '42f2cda7ec8ee4e0e4a51069606492647d13f690', name: this.icon, size: 24 }))), h("span", { key: '368633ff1b213286d5f6bdf5716e3acb1cbe2f71', class: "co-page-header__title" }, h("slot", { key: 'c74f2dcde7cfc0c0384f6a10a9f069a9ff94f78d' }, this.heading))), h("div", { key: '6666c103a2e6e826837091658ce1e4e4b1704215', class: "co-page-header__actions" }, h("slot", { key: '7df47ea333491b960bc1faff7fd0b6431aba56e5', name: "actions" }))));
+        return (h("div", { key: 'e3a67a921d1a5c5ac8a91d1bbf76efc5d1dc6e54', class: "co-page-header", part: "page-header" }, h("div", { key: 'c1487cedf194477595bb176c381d5e839a70571e', class: "co-page-header__left" }, this.icon && (h("span", { key: 'd07f12f586c1e42fb85a06c8a7cc634778a939e5', class: "co-page-header__icon" }, h("co-icon", { key: '0224fac27acc073beccd0d59b39e3714732b3fcc', name: this.icon, size: 24 }))), h("span", { key: 'c19700b850224b46a175c4a5fb082a7898842c7e', class: "co-page-header__title" }, h("slot", { key: '3e7426edb3999085f9791ed7fb9fb74b82e4227e' }, this.heading))), h("div", { key: 'ca4dd0bd5c5d553eb6adb80cc3d2093ea9dd4d2b', class: "co-page-header__actions" }, h("slot", { key: '3f108386752ebd1a740ab97c5f7fc8535a55f853', 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: '007dbe9a20cd410cb818f512d9f698afba6e821f', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: 'a4c5c1b7e10de3098f7f50d74a3ca8703d41f465', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: 'bcd04f54711067258d1270814141b4b81324ee21', required: this.required }))), h("div", { key: 'a04a6996610ccd5007c54f5728a1158c951c50e9', class: "co-phone-field__container" }, h("button", { key: '317348de58e74afb6f545749c83670ed92eb61bb', 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: '122cd3a7b4f363554410c7a37df3331b91e4bc81', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: '3d3d8691ba489bbe093f99a6141323f2620fd6a8', class: "co-phone-field__chevron" }, h("co-icon", { key: 'adab28c8fb4f1d6838dd0e400494656d0bc50812', name: "caret-down", size: 14 }))), h("input", { key: '13214ef8043c4984fcab73e7971e836039d8b469', 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: 'b993dff8a4ad5ef53b7f50849591310ec3df54f5', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: '95db7d412dbb49ebebda43e7dc13b9f763f2e3e1', class: "co-phone-field__search" }, h("input", { key: 'cd97d9422f0b2ee04de398a4ddd38500664d3828', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: 'f0a8c53ed8a8a2e212f6bb2da2883c3efa7eab1e', 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: 'c2b32d573c9c94720a403280a84547ad08c8a686', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: '9199cc2660052d07753d3a12b28a3ff60724c3ea', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '27462c9a1cefa4aa4cf43ab19924c1f59a399b68', class: "co-phone-field__helper-text" }, this.helperText)))));
+        return (h("div", { key: '46c764eaa95e5948b860341cd1a1a1468bc26920', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: '25b5a320625765b5ce9ebca165c165b6b7423a0a', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: 'b04b160b13504030159a51cb6bc8e2c258dab0a8', required: this.required }))), h("div", { key: '3bbe98a398007123d7ad405f16e0c5093829999e', class: "co-phone-field__container" }, h("button", { key: '58b43e162f7966cd11ac5c3b4ece75612769863b', 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: '78b26caa474d9f3df6f0f39bcb3c731761354786', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: 'd2753d9b70c19ce15b525e2bb6ed02d61aa15045', class: "co-phone-field__chevron" }, h("co-icon", { key: 'd94cffbcf3d0348c11a69cc3c7554dbe11d001b2', name: "caret-down", size: 14 }))), h("input", { key: 'ee111f5cb76785ebcbae917f9cd00d08e00d62c1', 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: '9d86bccfa1643b1e6703b300a74587bed334cbc2', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: '8dfeb48d11dc7d70e3acc499ad1390805aa7889d', class: "co-phone-field__search" }, h("input", { key: '1e673f71acfea7a50915dfa7a0e9e5d67a6e76cf', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: 'e28014f19f7002049657884b4d5ff0caf81eb3d8', 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: '2033c1184dbb72d5705d9e0ba392d77bc9629f4c', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: 'b3204decf888ec35cc0bf3f044ea5a8037fa8a53', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '697323bd25dbd70a4dc9872d1678d80e6c7bdeff', 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.css

@@ -45,12 +45,25 @@
   opacity: 0;
   transform: scale(0.97);
   background: var(--co-semantic-surface-page, #fff);
-  border: 1px solid var(--co-semantic-border-subtle);
+  /* Task C10 (Fase 2 Cobalt): variables con el default de siempre como
+     fallback — sin --co-popover-border-color/--co-popover-shadow, cero
+     cambio visual. */
+  border: 1px solid var(--co-popover-border-color, var(--co-semantic-border-subtle));
   border-radius: var(--co-border-radius-sm, 12px);
-  box-shadow: 0 4px 16px rgba(31, 28, 27, 0.08);
+  box-shadow: var(--co-popover-shadow, 0 4px 16px rgba(31, 28, 27, 0.08));
   overflow: visible;
 }
 
+/* `bare` (Task C10, Fase 2 Cobalt): sin fondo/borde/sombra propios, para
+   alojar un `co-menu` (u otro contenido con su propio chrome) sin "doble
+   chrome". El resto del panel (posicionamiento, transición de entrada/salida)
+   no cambia. */
+:host([bare]) .co-popover__panel {
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+}
+
 /* Transición de entrada. La de salida vive en --closing, declarada DESPUÉS
    (misma especificidad, gana por orden de cascada) — el nodo sigue montado
    durante el cierre (tsx difiere el unmount hasta transitionend). */

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { computePosition, findScrollParents, getOffsetAncestor } from "../../utils/positioning";
+import { computePosition, findScrollParents, getOffsetAncestor, isAnchorVisible } from "../../utils/positioning";
 import { pushLayer, removeLayer, isTopLayer } from "../../utils/popover-stack";
 /** Side classes driving the entrance `transform-origin` (see co-popover.css). */
 const SIDE_CLASSES = ['top', 'bottom', 'left', 'right'].map((s) => `co-popover__panel--${s}`);
@@ -27,8 +27,29 @@ export class CoPopover {
         this.closeOnEscape = true;
         /** Flip placement when the panel would overflow the viewport. */
         this.flip = true;
+        /**
+         * El panel no pinta fondo/borde/sombra propios (Task C10, Fase 2 Cobalt):
+         * para alojar un `co-menu` (u otro contenido con su propio chrome) sin
+         * "doble chrome". Reflejado como atributo `bare`. Default `false` = panel
+         * con el fondo/borde/sombra de siempre (`--co-popover-border-color` /
+         * `--co-popover-shadow`), sin cambio.
+         */
+        this.bare = false;
+        /**
+         * Desplazamiento en px sobre el eje CRUZADO del `placement` (Task C10, Fase
+         * 2 Cobalt): con un placement vertical (`top*`/`bottom*`) mueve `left`; con
+         * uno horizontal (`left*`/`right*`) mueve `top`. Default 0 = sin cambio.
+         *
+         * ⚠️ Se aplica ANTES del clamp de 4px a los bordes del viewport (ver
+         * `computePosition` en `utils/positioning.ts`) — un `shift` grande cerca de
+         * un borde puede quedar clampeado igual que hoy, no lo evita. No hay forma
+         * de pedir un `shift` que se salga de pantalla a propósito.
+         */
+        this.shift = 0;
         /** Fase de salida: mantiene el panel montado mientras corre la transición de cierre. */
         this.closing = false;
+        /** El trigger se vio al menos una vez desde que abrió (ver `updatePosition`). */
+        this.anchorSeenVisible = false;
         this.scrollParents = [];
         // Cached offset ancestor + a flag to distinguish "not computed yet" from
         // "computed and there is none". Avoids re-walking the DOM + calling
@@ -59,10 +80,21 @@ export class CoPopover {
         // phase so we run before any inner-element listeners that might stop
         // propagation, and bypassing Stencil's @Listen delegation quirks across
         // nested shadow DOMs.
+        // La pulsación en curso EMPEZÓ dentro del popover: seleccionar texto en un
+        // input del panel y soltar afuera despacha el `click` al ancestro común (fuera)
+        // y cerraba el panel. Ese click no es un "click afuera".
+        this.pressStartedInside = false;
+        this.handleDocumentPointerDownManual = (e) => {
+            this.pressStartedInside = e.composedPath().includes(this.el);
+        };
         this.handleDocumentClickManual = (e) => {
+            const startedInside = this.pressStartedInside;
+            this.pressStartedInside = false;
             // Early-exit keeps closed instances silent.
             if (!this.open || !this.closeOnClickOutside)
                 return;
+            if (startedInside)
+                return;
             // Solo el tope de la pila reacciona al click afuera: con popovers
             // anidados (dropdown dentro de un panel de filtro), el primer click
             // afuera cierra solo el de más arriba; el padre queda intacto. Nota: si
@@ -92,6 +124,21 @@ export class CoPopover {
             if (!this.open || !this.triggerEl || !this.panelEl)
                 return;
             const triggerRect = this.triggerEl.getBoundingClientRect();
+            // El trigger salió de la vista de su scroller (la columna de un kanban, el body
+            // de una tabla): seguirlo deja el panel pegado al borde del viewport por el
+            // clamp de `computePosition`, flotando sobre la cabecera sin su ancla. Se
+            // cierra, como un menú nativo. Solo si alguna vez estuvo visible (una apertura
+            // programática con el ancla ya fuera de vista queda como antes) y solo en los
+            // popovers descartables: uno persistente (`closeOnClickOutside=false`) no se
+            // cierra por sí solo.
+            const clipRects = this.scrollParents.map((p) => p.getBoundingClientRect());
+            if (isAnchorVisible(triggerRect, clipRects)) {
+                this.anchorSeenVisible = true;
+            }
+            else if (this.anchorSeenVisible && this.closeOnClickOutside) {
+                this.open = false;
+                return;
+            }
             // ⚠️ El panel arrastra el `transform: scale()` de la entrada, y
             // getBoundingClientRect() devuelve la caja TRANSFORMADA: 0.97× al montar y
             // ~0.972× en la segunda pasada del watcher (~16ms de los `base` 250ms). Medir con
@@ -107,10 +154,17 @@ export class CoPopover {
                 width: this.panelEl.offsetWidth,
                 height: this.panelEl.offsetHeight,
             });
+            // Task C10 (Fase 2 Cobalt): `anchor` sin resolver (prop ausente, o
+            // selector sin match en `document`) → `anchorRect` queda undefined y
+            // computePosition cae a `triggerRect` — mismo resultado que hoy.
+            const anchorEl = this.resolveAnchor();
+            const anchorRect = anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.getBoundingClientRect();
             const { top, left, actualPlacement } = computePosition(triggerRect, panelRect, {
                 placement: this.placement,
                 offset: this.offset,
                 flip: this.flip,
+                anchorRect,
+                shift: this.shift,
             });
             let finalTop = top;
             let finalLeft = left;
@@ -135,7 +189,9 @@ export class CoPopover {
                 left: `${finalLeft}px`,
             };
             if (this.matchWidth) {
-                style.width = `${triggerRect.width}px`;
+                // Con `anchor`, "match width" es contra el ancho del anchor (la píldora
+                // completa) — no del trigger chico que solo dispara el popover.
+                style.width = `${(anchorRect !== null && anchorRect !== void 0 ? anchorRect : triggerRect).width}px`;
             }
             // Apply styles directly to DOM to avoid triggering a re-render loop
             if (this.panelEl) {
@@ -192,6 +248,7 @@ export class CoPopover {
     }
     // ── Watchers ───────────────────────────────────────────────
     onOpenChange(isOpen) {
+        this.anchorSeenVisible = false;
         if (isOpen) {
             this.closing = false;
             clearTimeout(this.closeFallbackTimer);
@@ -230,6 +287,7 @@ export class CoPopover {
     bindDocListeners() {
         if (this.docListenersBound)
             return;
+        document.addEventListener('pointerdown', this.handleDocumentPointerDownManual, true);
         document.addEventListener('click', this.handleDocumentClickManual, true);
         document.addEventListener('keydown', this.handleDocumentKeydownManual, true);
         this.docListenersBound = true;
@@ -237,9 +295,11 @@ export class CoPopover {
     unbindDocListeners() {
         if (!this.docListenersBound)
             return;
+        document.removeEventListener('pointerdown', this.handleDocumentPointerDownManual, true);
         document.removeEventListener('click', this.handleDocumentClickManual, true);
         document.removeEventListener('keydown', this.handleDocumentKeydownManual, true);
         this.docListenersBound = false;
+        this.pressStartedInside = false;
     }
     // ── Public methods ─────────────────────────────────────────
     async toggle() {
@@ -251,6 +311,21 @@ export class CoPopover {
     async hide() {
         this.open = false;
     }
+    /**
+     * Resuelve la prop `anchor` a un elemento (Task C10, Fase 2 Cobalt):
+     *   - `HTMLElement` → se usa tal cual.
+     *   - `string` → selector resuelto contra `document`; sin match, `null`
+     *     (el llamador cae a `triggerRect`, el comportamiento de siempre).
+     *   - sin `anchor` → `null` (mismo fallback).
+     */
+    resolveAnchor() {
+        if (!this.anchor)
+            return null;
+        if (typeof this.anchor === 'string') {
+            return document.querySelector(this.anchor);
+        }
+        return this.anchor;
+    }
     /**
      * Promote the panel to the browser top layer (Popover API) so an ancestor's
      * filter / mask / overflow / transform can't clip it. Mirrors co-overlay.
@@ -307,13 +382,13 @@ export class CoPopover {
     }
     // ── Render ─────────────────────────────────────────────────
     render() {
-        return (h("div", { key: 'f8460e212fabe8828f1e33f08304d7e680a7cab0', class: "co-popover" }, h("div", { key: 'c9caad8ae7f16c82173e4b30ad5cc053dc73b6da', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: 'afa0443ba85607cf24f517e8c7fe0cee689df024', name: "trigger" })), (this.open || this.closing) && (h("div", { key: 'd2a081f8923f53ac456edd6e5eb7422dc5ab7daa', class: { 'co-popover__panel': true, 'co-popover__panel--closing': this.closing }, popover: "manual", onTransitionEnd: this.handlePanelTransitionEnd, ref: (el) => {
+        return (h("div", { key: '662c5cf02c52e80ab1367b7bf5418a5314449b93', class: "co-popover" }, h("div", { key: '067b11518b303acbfdb695d339d5fc3a1c709413', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: 'b186427b3c97ff65beda554f0c54e0e4bd91b44b', name: "trigger" })), (this.open || this.closing) && (h("div", { key: '2e905ee909de4e8c89baefd0ad5218f5a5446ec9', class: { 'co-popover__panel': true, 'co-popover__panel--closing': this.closing }, part: "panel", popover: "manual", onTransitionEnd: this.handlePanelTransitionEnd, ref: (el) => {
                 if (el && el !== this.panelEl) {
                     this.panelEl = el;
                     this.promotePanel();
                     this.scheduleUpdate();
                 }
-            } }, h("slot", { key: '8466f617bd6b8a497e2040d3275b384156de126c' })))));
+            } }, h("slot", { key: '2220a6e8efdee1ec51c4c3d33eb1b016f0619f48' })))));
     }
     static get is() { return "co-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -358,7 +433,7 @@ export class CoPopover {
                     "references": {
                         "PopoverPlacement": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-0.10.3/packages/core/src/components/co-popover/co-popover.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-24/packages/core/src/components/co-popover/co-popover.tsx",
                             "id": "src/components/co-popover/co-popover.tsx::PopoverPlacement"
                         }
                     }
@@ -474,6 +549,70 @@ export class CoPopover {
                 "reflect": false,
                 "attribute": "flip",
                 "defaultValue": "true"
+            },
+            "bare": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "El panel no pinta fondo/borde/sombra propios (Task C10, Fase 2 Cobalt):\npara alojar un `co-menu` (u otro contenido con su propio chrome) sin\n\"doble chrome\". Reflejado como atributo `bare`. Default `false` = panel\ncon el fondo/borde/sombra de siempre (`--co-popover-border-color` /\n`--co-popover-shadow`), sin cambio."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "bare",
+                "defaultValue": "false"
+            },
+            "anchor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement | string",
+                    "resolved": "HTMLElement | string | undefined",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Elemento (o selector resuelto contra `document`) al que se alinea el\npanel EN VEZ del trigger (Task C10, Fase 2 Cobalt) \u2014 p.ej. la p\u00EDldora\ncompleta del zoom, no solo el bot\u00F3n \"\u25BE\" que abre el men\u00FA. Un selector sin\nmatch cae al trigger (comportamiento actual). Sin `anchor`, cero cambio."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "anchor"
+            },
+            "shift": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Desplazamiento en px sobre el eje CRUZADO del `placement` (Task C10, Fase\n2 Cobalt): con un placement vertical (`top*`/`bottom*`) mueve `left`; con\nuno horizontal (`left*`/`right*`) mueve `top`. Default 0 = sin cambio.\n\n\u26A0\uFE0F Se aplica ANTES del clamp de 4px a los bordes del viewport (ver\n`computePosition` en `utils/positioning.ts`) \u2014 un `shift` grande cerca de\nun borde puede quedar clampeado igual que hoy, no lo evita. No hay forma\nde pedir un `shift` que se salga de pantalla a prop\u00F3sito."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shift",
+                "defaultValue": "0"
             }
         };
     }

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: 'bcf5e566cfa6726eac8578288797d1004e4003fb', class: {
+        return (h("div", { key: 'c2286f839f8f8f472e76bcad9d3f77962112bf8f', 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: '932537ab1521b2d7fcd0e1bb57c027a276dacaf3', 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: '2fe1138f2caac250117c14cc51aec68be76f48d8', 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: 'bc100ca3ef731aab3168a247098102b8e9ab9537', class: {
+        return (h("div", { key: '93f0e78b8f51342146367c35fb4a1238e6381fa4', 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: '48862f1f57c0bb8cd6e03c2f0a84a1ae324d3ec1', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '0ff2c6995740504e1df9b11dfa10e0a9f9d368c5', class: "co-progress-circle__label" }, clamped, "%"))));
+            } }, h("div", { key: '433ddb015c524bc9fead3540a71a3c514d66a64c', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '6951e520d786e0d22af5163d116464faa7be171a', 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: '59335ec237efb379852efc4fabcb7cbb37632a1e', class: {
+        return (h("div", { key: 'e919e4c950b39acb06eab78a8a22d5d5d3acb211', class: {
                 'co-radio-row': true,
                 'co-radio-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, h("button", { key: 'dc726deac041e9df4cb34f60a473350426ed2cbc', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, h("button", { key: '9f52728498ff3092f994410a948e9e52cc83b0cb', 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: 'bf2602521d20f806283884ba3ebbab4ff4ef0c70', class: "co-radio__label", part: "label" }, this.label))));
+            }, disabled: this.disabled, part: "circle" }), this.label && (h("span", { key: '989a97802b68aabe45b5b5e983f10bb2bbf9b01e', 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: '9e3a5c50cf5b0797146b7d6649cd1e1f6176e7a8', class: {
+        return (h("div", { key: 'aed7b7da65c9115ab36df5e8ac883de54c95c9e6', 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: '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: {
+            }, role: "radiogroup", "aria-label": this.label || '' }, hasLabels && (h("div", { key: 'a9bebb49089cd496da9766edc80170d285f3e0f4', class: "co-radio-group__labels" }, this.label && h("span", { key: '07b2fa433d6414e69862ba88bb95485fa59e3cb0', class: "co-radio-group__label" }, this.label), this.secondaryLabel && (h("span", { key: '2fce367eb0415d3d030d0c5385d15a304a4ac2dd', class: "co-radio-group__secondary-label" }, this.secondaryLabel)))), h("div", { key: '22bed181fb344e6954afa82bd2e7d67814c87175', 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: '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)))));
+        })), hasHelper && (h("div", { key: '8377e98a33fc79ae642110aded1e8061b7f5a47e', class: `co-radio-group__helper co-radio-group__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '3699789297cd963755d3855fda23e3884d85e6e0', name: this.statusIcon, size: 14, weight: "fill", class: "co-radio-group__helper-icon" })), h("span", { key: 'bcec0afba4852a80296ec04ece33708e17309f8b', class: "co-radio-group__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -219,7 +219,7 @@ export class CoRadioGroup {
                     "references": {
                         "RadioOption": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-release-0.10.3/packages/core/src/components/co-radio-group/co-radio-group.tsx",
+                            "path": "/Users/agox/worktrees/cobalt-release-2026-09-24/packages/core/src/components/co-radio-group/co-radio-group.tsx",
                             "id": "src/components/co-radio-group/co-radio-group.tsx::RadioOption"
                         }
                     }

package/dist/collection/components/co-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: 'a825b7cf49067c0a12ccddb81554c172d90a888f', class: {
+        return (h("div", { key: 'f5945130cb06fff4082067667d4cf4a5af7c4382', class: {
                 'co-rating': true,
                 'co-rating--disabled': this.disabled,
                 'co-rating--readonly': this.readOnly,
                 [`co-rating--${this.size}`]: true,
-            } }, this.label && h("label", { key: '354b3b676401d0265e5f64aed1b137b97a147468', class: "co-rating__label" }, this.label), h("div", { key: '29c8af2cde2482ac803e75025dc5533c7051c2ff', class: "co-rating__stars", onMouseLeave: this.handleMouseLeave }, stars.map(star => (h("button", { class: {
+            } }, this.label && h("label", { key: '5af2e8529dbcbbc467a76f9a45ad724cc352c24a', class: "co-rating__label" }, this.label), h("div", { key: 'bd4f80f83ad087593d5f892d6eb81d80071b0898', 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: '0fcc95b7e125f1ef57c67ed9e46d4511da5d3eaa', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'c9cb1f60e902c0b52a45225bedacd92ba08ae0b4', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), h("span", { key: '8a5479175de97fccb5947f2f8f2c87888481b104', 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: 'e9a4cbfda339926e1c31150129cf7ec6bacc53c2', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '5b581b2d06bce928c7299d197747f1adb6b4a380', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), h("span", { key: '84dd514c19fe8f76916681da7682377abf3b37ea', class: "co-rating__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-rating"; }
     static get encapsulation() { return "shadow"; }