@prolibu-suite/cobalt-core 0.9.5 → 0.10.0

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

@@ -1,5 +1,38 @@
 import { h } from "@stencil/core";
 import { RequiredMark } from "../../utils/requiredMark";
+import { formatAmountText, parseNumericText, stripAmountText } from "../../utils/amountText";
+/**
+ * Todo lo que NO puede formar parte de un número escrito a mano. El input es
+ * `type="text"` a propósito (hace falta para pintar el valor formateado y el
+ * sufijo), y eso lo deja aceptar letras: sin este filtro, tipear "asd10" deja
+ * "asd10" A LA VISTA hasta que el blur repinta el valor canónico.
+ * No valida el número final —de eso se encargan `clamp()` y el repintado del
+ * blur—, solo impide que el campo muestre algo que no es un número.
+ */
+const NON_NUMERIC = /[^0-9.,-]/g;
+/** Caracteres que CUENTAN para el caret en modo amount (la coma es decorado). */
+const SIGNIFICANT = /[0-9.-]/;
+const countSignificant = (text) => {
+    let count = 0;
+    for (const char of text)
+        if (SIGNIFICANT.test(char))
+            count++;
+    return count;
+};
+/** Posición del caret justo después de `count` caracteres significativos. */
+const caretAfterSignificant = (text, count) => {
+    if (count <= 0)
+        return 0;
+    let seen = 0;
+    for (let i = 0; i < text.length; i++) {
+        if (SIGNIFICANT.test(text[i])) {
+            seen++;
+            if (seen === count)
+                return i + 1;
+        }
+    }
+    return text.length;
+};
 export class CoNumberField {
     constructor() {
         /** Whether the field is required (renders a required marker on the label). */
@@ -14,19 +47,46 @@ export class CoNumberField {
         this.size = 'md';
         /** Show clear button when the field has a value */
         this.clearable = false;
+        /**
+         * Oculta los botones ± (campo numérico "plano": precio, tasa). Las flechas
+         * ↑↓ siguen escalonando. Reflejado para que el CSS del host lo lea.
+         */
+        this.hideControls = false;
         this.focused = false;
+        // Stepping/clear son mutaciones PROGRAMÁTICAS: con el campo enfocado ni el
+        // @Watch (guard `focused`) ni el vdom (que copia el texto vivo) repintan, así
+        // que cada path escribe el input él mismo — si no, ArrowUp emite y persiste
+        // valores que el usuario no ve hasta el blur.
         this.handleDecrement = () => {
             if (!this.canDecrement)
                 return;
             this.emitValue(this.current - this.step);
+            this.syncInputText();
         };
         this.handleIncrement = () => {
             if (!this.canIncrement)
                 return;
             this.emitValue(this.current + this.step);
+            this.syncInputText();
         };
         this.handleInput = (e) => {
-            const raw = e.target.value;
+            var _a;
+            const input = e.target;
+            if (this.isAmount) {
+                this.handleAmountInput(input);
+                return;
+            }
+            let raw = input.value;
+            // Descarta los caracteres imposibles al tipearlos y al pegar, conservando
+            // la posición del cursor (reescribir `value` la mandaría al final).
+            const cleaned = raw.replace(NON_NUMERIC, '');
+            if (cleaned !== raw) {
+                const caret = ((_a = input.selectionStart) !== null && _a !== void 0 ? _a : raw.length) - (raw.length - cleaned.length);
+                input.value = cleaned;
+                const next = caret < 0 ? 0 : caret;
+                input.setSelectionRange(next, next);
+                raw = cleaned;
+            }
             if (raw === '') {
                 // Deleting all content clears the field (parity with the clear button),
                 // but only when clearing is enabled — otherwise keep prior behavior.
@@ -43,9 +103,50 @@ export class CoNumberField {
                 this.emitValue(this.fromDisplay(num));
             }
         };
+        /**
+         * Pegar en modo amount: el texto llega con el formato de DONDE se copió
+         * (es-CO `1.234,56`, en-US `1,234.56`, la app `$ 34,640.00`), así que se
+         * interpreta con la heurística de separadores ANTES de empalmarlo con lo que
+         * ya había en el campo. Sin el preventDefault, el navegador escribiría el
+         * texto crudo y `parseFloat` cortaría en la primera coma (commit silencioso
+         * de 1 al pegar "1,234.56").
+         */
+        this.handlePaste = (e) => {
+            var _a, _b, _c, _d;
+            if (!this.isAmount)
+                return;
+            e.preventDefault();
+            const input = e.target;
+            const text = (_b = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : '';
+            let parsed = parseNumericText(text);
+            if (parsed && this.allowNegative && /^\s*-/.test(text))
+                parsed = `-${parsed}`;
+            const start = (_c = input.selectionStart) !== null && _c !== void 0 ? _c : input.value.length;
+            const end = (_d = input.selectionEnd) !== null && _d !== void 0 ? _d : start;
+            const before = stripAmountText(input.value.slice(0, start), this.allowNegative);
+            const after = stripAmountText(input.value.slice(end));
+            const spliced = stripAmountText(before + parsed + after, this.allowNegative);
+            const formatted = formatAmountText(spliced);
+            input.value = formatted;
+            const caret = caretAfterSignificant(formatted, countSignificant(before + parsed));
+            input.setSelectionRange(caret, caret);
+            if (spliced === '' || spliced === '-') {
+                if (spliced === '' && this.clearable) {
+                    this.value = null;
+                    this.coChange.emit(null);
+                }
+                return;
+            }
+            const num = parseFloat(spliced);
+            if (!isNaN(num))
+                this.emitValue(num);
+        };
         this.handleClear = () => {
             var _a;
             this.value = null;
+            // En Safari el click NO roba el foco al botón → `focused` sigue true y sin
+            // esto el texto viejo quedaba pintado con el valor ya emitido en null.
+            this.syncInputText();
             this.coClear.emit();
             this.coChange.emit(null);
             (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
@@ -55,6 +156,10 @@ export class CoNumberField {
             // Re-clamp on blur, but keep an empty field empty.
             if (!this.isEmpty)
                 this.emitValue(this.value);
+            // Repinta el texto canónico: si el clamp devolvió el MISMO valor que ya
+            // tenía el prop (tipear "-20" sobre 0 con min 0), el @Watch no dispara y el
+            // input se quedaba con lo tipeado.
+            this.syncInputText();
         };
         this.handleFocus = () => {
             this.focused = true;
@@ -81,9 +186,8 @@ export class CoNumberField {
     onValueChange() {
         if (!this.inputEl || this.focused)
             return;
-        const next = this.isEmpty ? '' : String(this.toDisplay(this.value));
-        if (this.inputEl.value !== next)
-            this.inputEl.value = next;
+        if (this.inputEl.value !== this.displayValue)
+            this.inputEl.value = this.displayValue;
     }
     /** True when there is no numeric value (cleared / empty). */
     get isEmpty() {
@@ -125,6 +229,21 @@ export class CoNumberField {
     get scaled() {
         return this.format === 'rate' || this.format === 'percent';
     }
+    /** Whether the live money mask (thousands separators, paste parsing) is on. */
+    get isAmount() {
+        return this.format === 'amount';
+    }
+    /** El signo entra sólo cuando el rango lo admite (sin `min`, o `min` < 0). */
+    get allowNegative() {
+        return this.min === undefined || this.min < 0;
+    }
+    /** Texto canónico del input para el valor actual (formateado en amount). */
+    get displayValue() {
+        if (this.isEmpty)
+            return '';
+        const plain = String(this.toDisplay(this.value));
+        return this.isAmount ? formatAmountText(plain) : plain;
+    }
     /** Stored decimal → shown number (0.15 → 15). toFixed avoids FP artifacts. */
     toDisplay(v) {
         return this.scaled ? Number((v * 100).toFixed(6)) : v;
@@ -138,14 +257,63 @@ export class CoNumberField {
         this.value = clamped;
         this.coChange.emit(clamped);
     }
+    /**
+     * Modo amount: en cada input se rearma el display desde los dígitos (miles
+     * con coma, coma tipeada descartada, sólo un punto) y el caret se restituye
+     * contando caracteres significativos — reescribir `value` lo mandaría al
+     * final. El punto colgante ("1,234.") sobrevive porque se reformatea el
+     * TEXTO, no el número parseado.
+     */
+    handleAmountInput(input) {
+        var _a;
+        const raw = input.value;
+        const caret = (_a = input.selectionStart) !== null && _a !== void 0 ? _a : raw.length;
+        const significantBefore = countSignificant(raw.slice(0, caret));
+        const cleaned = stripAmountText(raw, this.allowNegative);
+        const formatted = formatAmountText(cleaned);
+        if (input.value !== formatted) {
+            input.value = formatted;
+            const next = caretAfterSignificant(formatted, significantBefore);
+            input.setSelectionRange(next, next);
+        }
+        if (cleaned === '') {
+            if (this.clearable) {
+                this.value = null;
+                this.coChange.emit(null);
+            }
+            return;
+        }
+        if (cleaned === '-')
+            return;
+        const num = parseFloat(cleaned);
+        if (!isNaN(num))
+            this.emitValue(num);
+    }
+    syncInputText() {
+        if (!this.inputEl)
+            return;
+        if (this.inputEl.value !== this.displayValue)
+            this.inputEl.value = this.displayValue;
+    }
+    /** Texto del afijo: `suffix` explícito manda; si no, el "%" de los formatos escalados. */
+    get affixText() {
+        if (this.suffix !== undefined)
+            return this.suffix || null;
+        return this.scaled && !this.isEmpty ? '%' : null;
+    }
     render() {
-        return (h("div", { key: '0c6bc83afe9b061ce2cb99b5ae7c1f6aed3f779a', class: {
+        return (h("div", { key: 'd1b4cf4bbb6f9a01db718079c1e4686653d6cb69', class: {
                 'co-number-field': true,
                 'co-number-field--disabled': this.disabled,
                 'co-number-field--focused': this.focused,
                 [`co-number-field--${this.size}`]: true,
                 [`co-number-field--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: '203720b71c1962ec93f5aefa8dd3cbd67a0294fc', class: "co-number-field__labels" }, this.label && h("label", { key: '114cc0e2a0aa9d351911cee4d1c9c1494259ce3a', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: 'bf4794dd4d5e21052c529ff7eb8e47a79ff9ddb4', required: this.required })), this.secondaryLabel && h("span", { key: '60519c76314068312514d47ef2284ccdd00b5c70', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: 'c0584ba632adaa29f439f896cbab3f73663f2b0b', class: "co-number-field__row" }, h("button", { key: '21979d6ca5667f7f278b5c4674e6497cf1e3911d', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: 'a1173b08171bca43b50a6ca3dc8bb637cb0c43b3', name: "minus", size: 16 })), h("input", { key: 'c5584bbabde195e8178fff12eb98b4919b21e0c8', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal", value: this.isEmpty ? '' : String(this.toDisplay(this.value)), placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown }), this.scaled && !this.isEmpty && (h("span", { key: '86705658b5b1ec0feb9be58afbf7966f382aaa9b', class: "co-number-field__affix", "aria-hidden": "true" }, "%")), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: '5e030b36c3c95a2416544930e2e4f69b06decf61', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '5492f06d71885eb432122984160e5f93153a226f', name: "x-circle", size: 16, weight: "fill" }))), h("button", { key: '8987e2c51aef9fcd54e3394066543607edcd764b', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: '2398e8b5e94071de8ffccbd3625976ddf93878d3', name: "plus", size: 16 }))), this.helperText && (h("div", { key: '16fc9f87db0ad43c6169eebb5be7ec57abd33e98', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '1d3006cb9ba6d6b0f30fb6d09aad6b28fdf764d8', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: '6d727671c30c45655c84319b6a269e4997c3ef6b', class: "co-number-field__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: '972f6a811230bc8e919bb13d82b00b697ef849d3', class: "co-number-field__labels" }, this.label && h("label", { key: 'cca4de1e86a0066464b6dc71289ee174cc29e229', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: '80a8266109c1cede57e32c706fb4c0e47eb33249', required: this.required })), this.secondaryLabel && h("span", { key: '082db322206fedfbcd2f9a6c0fd4c439a0a96fd6', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: '88fba5f119dab3a4feb2ad2380cd5023d760e7e9', class: "co-number-field__row", part: "row" }, !this.hideControls && (h("button", { key: '28a2033ed8997597615edf6c6b591d4da205c888', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: '4a562d696da337feeb4bb60b018b4a23024163ad', name: "minus", size: 16 }))), h("input", { key: 'f05ebf923249188da23edb73e6688ccd8ecf8233', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal",
+            // Mismo guard `focused` que el @Watch: mientras el usuario edita, su
+            // texto manda. Sin esto, el re-render que dispara emitValue repinta
+            // el input desde el NÚMERO y se come el texto en construcción
+            // ("34,640.00" pegado quedaba "34,640"; un "12." perdería el punto).
+            value: this.focused && this.inputEl ? this.inputEl.value : this.displayValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }), this.affixText && (h("span", { key: 'b10fe23b0e16df1a9abc121923175aef3568d987', class: "co-number-field__affix", "aria-hidden": "true" }, this.affixText)), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: 'c963c856ea592a259e506ce9cc37948b105e28d3', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'd88127405a552237b103f794f449be98840254d5', name: "x-circle", size: 16, weight: "fill" }))), h("slot", { key: '0809f93bae05abd88549ffc707d3c4e9126f6d96', name: "suffix" }), !this.hideControls && (h("button", { key: 'd10d3900942acb5016448a8b509173a15ca86d43', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: 'f346237b4df54f3182b1702b953a17e07cb0a1ca', name: "plus", size: 16 })))), this.helperText && (h("div", { key: 'b9771e896812e73ba940d49419ec2eee3ba28ba3', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '08fa68bb3f9ad4efab6722d59c5df480a0454f02', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: 'f8dd3318d47684c9c5ff0d761155174fa14d98aa', class: "co-number-field__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-number-field"; }
     static get encapsulation() { return "shadow"; }
@@ -440,20 +608,59 @@ export class CoNumberField {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'rate' | 'percent'",
-                    "resolved": "\"percent\" | \"rate\" | undefined",
+                    "original": "'rate' | 'percent' | 'amount'",
+                    "resolved": "\"amount\" | \"percent\" | \"rate\" | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Display format. With 'rate' | 'percent' the `value` stays a DECIMAL\n(e.g. 0.15) but the field shows/edits the PERCENT (15) with a \"%\" suffix.\nvalue/min/max/step are always in the underlying (decimal) unit.\nReflected so it survives lazy hydration when set via the Vue wrapper."
+                    "text": "Display format. With 'rate' | 'percent' the `value` stays a DECIMAL\n(e.g. 0.15) but the field shows/edits the PERCENT (15) with a \"%\" suffix.\nvalue/min/max/step are always in the underlying (decimal) unit.\nWith 'amount' the field is a live money mask: thousands separators while\ntyping (1234.5 shows 1,234.5), typing restricted to digits and dot, and\npaste normalized whatever the source locale (\"1.234,56\" and \"1,234.56\"\nboth commit 1234.56). The emitted value is always the raw number.\nReflected so it survives lazy hydration when set via the Vue wrapper."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
                 "attribute": "format"
+            },
+            "hideControls": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Oculta los botones \u00B1 (campo num\u00E9rico \"plano\": precio, tasa). Las flechas\n\u2191\u2193 siguen escalonando. Reflejado para que el CSS del host lo lea."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "hide-controls",
+                "defaultValue": "false"
+            },
+            "suffix": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sufijo de texto a la derecha del n\u00FAmero (moneda, unidad). Reemplaza al \"%\"\nautom\u00E1tico de `format`; cadena vac\u00EDa = sin sufijo (\u00FAtil cuando el slot\n`suffix` ya lleva el control que indica la unidad)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "suffix"
             }
         };
     }

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

@@ -681,7 +681,15 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
  * Figma original, 2026-07-29: a 12px el texto quedaba ilegible en paneles
  * densos como el picker de campos del filtro avanzado).
  * Todos los var() llevan fallback literal: el host puede tener un build de
- * tokens viejo sin los tokens nuevos (font-size-12, spacing-sm2, mono…). */
+ * tokens viejo sin los tokens nuevos (font-size-12, spacing-sm2, mono…).
+ * Overridables por host (además de `--co-option-list-max-height`, documentada
+ * junto a `.co-option-list__options`): `--co-option-list-item-min-height`
+ * (default 32px, fila más alta — p.ej. filas de dos líneas con precio),
+ * `--co-option-list-item-padding-y` (default `--co-spacing-xs`, padding
+ * vertical de la fila) y `--co-option-list-text-gap` (default
+ * `--co-spacing-xxs`, gap entre título y descripción). Ninguna afecta el
+ * pitch fijo 34 de `.co-option-list__spacer .co-option-list__option`
+ * (virtualización — ver comentario en esa regla). */
 .co-option-list {
   display: flex;
   flex-direction: column;
@@ -775,9 +783,9 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   align-items: center;
   gap: var(--co-spacing-sm2, 8px);
   min-width: 0;
-  min-height: 32px;
+  min-height: var(--co-option-list-item-min-height, 32px);
   box-sizing: border-box;
-  padding: var(--co-spacing-xs, 4px) var(--co-spacing-sm2, 8px) var(--co-spacing-xs, 4px) var(--co-spacing-xs, 4px);
+  padding: var(--co-option-list-item-padding-y, var(--co-spacing-xs, 4px)) var(--co-spacing-sm2, 8px) var(--co-option-list-item-padding-y, var(--co-spacing-xs, 4px)) var(--co-spacing-xs, 4px);
   border-radius: var(--co-border-radius-xs, 8px);
   cursor: pointer;
   font-size: var(--co-font-size-14, 14px);
@@ -831,7 +839,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 .co-option-list__text {
   display: flex;
   flex-direction: column;
-  gap: var(--co-spacing-xxs, 2px);
+  gap: var(--co-option-list-text-gap, var(--co-spacing-xxs, 2px));
   flex: 1;
   min-width: 0;
 }
@@ -859,6 +867,19 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   flex-shrink: 1;
 }
 
+/* suffixAlign="end": el suffix sale del título y pinta como columna a la
+ * derecha de la fila (precio/meta) — sin el guion inline, alineado y con
+ * cifras tabulares para que varias filas apiladas no "bailen". */
+.co-option-list__suffix--end {
+  flex-shrink: 0;
+  margin-left: auto;
+  text-align: right;
+  white-space: nowrap;
+  font-size: var(--co-font-size-13, 13px);
+  color: var(--co-semantic-text-default, #1f1c1b);
+  font-variant-numeric: tabular-nums;
+}
+
 .co-option-list__badge {
   flex-shrink: 0;
   padding: 0 var(--co-spacing-xs, 4px);

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

@@ -60,6 +60,9 @@ export class CoOptionList {
         /** Término externo para highlight (input en el host, p.ej. ⌘K). */
         this.highlightTerm = '';
         this.avatarShape = 'circle';
+        /** `end` pinta el suffix como columna a la derecha de la fila (precio/meta),
+         *  sin el guion; `inline` = junto al label (default). */
+        this.suffixAlign = 'inline';
         // ── Navegación ─────────────────────────────────────────────
         /** Auto-resalta la primera fila navegable al montar y en cada cambio de
          *  items (paridad command-palette: tipear + Enter = primer resultado).
@@ -699,7 +702,7 @@ export class CoOptionList {
                 'co-option-list__option--lifted': !this.listDragActive && this.dragKey === item._id,
                 'co-option-list__option--drop-before': this.listDragActive && this.overKey === item._id && !this.dropAfter,
                 'co-option-list__option--drop-after': this.listDragActive && this.overKey === item._id && this.dropAfter,
-            }, key: item._id, id: `co-optlist-${index}`, "data-id": item._id, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : 'false', draggable: listDragRow && this.armedKey === item._id, onClick: () => !item.disabled && this.pick(item), onMouseEnter: () => { this.activeIndex = index; }, onDragStart: listDragRow ? (e) => this.handleRowDragStart(e, item._id) : undefined, onDragOver: listDragRow ? (e) => this.handleRowDragOver(e, item._id) : undefined, onDrop: listDragRow ? (e) => this.handleRowDrop(e, item._id) : undefined, onDragEnd: listDragRow ? this.handleRowDragEnd : undefined, onDragLeave: listDragRow ? (e) => this.handleRowDragLeave(e, item._id) : undefined }, (ptrDragRow || listDragRow) && (h("span", { class: "co-option-list__drag-handle", part: "drag-handle", title: "Drag to reorder", onMouseDown: listDragRow ? () => (this.armedKey = item._id) : undefined, onPointerDown: ptrDragRow ? (e) => this.startPointerDrag(e, item._id) : undefined, 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 && this.renderBadge(item.badge)), item.description && h("span", { class: "co-option-list__desc" }, item.description)), this.pinnable && (h("button", { class: { 'co-option-list__pin': true, 'co-option-list__pin--active': !!item.pinned }, type: "button", tabIndex: -1, "aria-label": item.pinned ? `Unpin ${item.label}` : `Pin ${item.label}`, "aria-pressed": item.pinned ? 'true' : 'false', onClick: (e) => { e.stopPropagation(); this.coPinToggle.emit({ item }); } }, h("co-icon", { name: "push-pin", size: 16, weight: item.pinned ? 'fill' : 'regular' }))), 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.deselectItem(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" }))));
+            }, key: item._id, id: `co-optlist-${index}`, "data-id": item._id, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : 'false', draggable: listDragRow && this.armedKey === item._id, onClick: () => !item.disabled && this.pick(item), onMouseEnter: () => { this.activeIndex = index; }, onDragStart: listDragRow ? (e) => this.handleRowDragStart(e, item._id) : undefined, onDragOver: listDragRow ? (e) => this.handleRowDragOver(e, item._id) : undefined, onDrop: listDragRow ? (e) => this.handleRowDrop(e, item._id) : undefined, onDragEnd: listDragRow ? this.handleRowDragEnd : undefined, onDragLeave: listDragRow ? (e) => this.handleRowDragLeave(e, item._id) : undefined }, (ptrDragRow || listDragRow) && (h("span", { class: "co-option-list__drag-handle", part: "drag-handle", title: "Drag to reorder", onMouseDown: listDragRow ? () => (this.armedKey = item._id) : undefined, onPointerDown: ptrDragRow ? (e) => this.startPointerDrag(e, item._id) : undefined, 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 && this.suffixAlign !== 'end' && h("span", { class: "co-option-list__suffix" }, "- ", item.suffix), item.badge && this.renderBadge(item.badge)), item.description && h("span", { class: "co-option-list__desc" }, item.description)), item.suffix && this.suffixAlign === 'end' && h("span", { class: "co-option-list__suffix co-option-list__suffix--end" }, item.suffix), this.pinnable && (h("button", { class: { 'co-option-list__pin': true, 'co-option-list__pin--active': !!item.pinned }, type: "button", tabIndex: -1, "aria-label": item.pinned ? `Unpin ${item.label}` : `Pin ${item.label}`, "aria-pressed": item.pinned ? 'true' : 'false', onClick: (e) => { e.stopPropagation(); this.coPinToggle.emit({ item }); } }, h("co-icon", { name: "push-pin", size: 16, weight: item.pinned ? 'fill' : 'regular' }))), 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.deselectItem(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);
@@ -710,11 +713,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: 'a5754821517230b914fd9f23b024afc523e4ee9d', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: '9988f2e6834b5c8cf4c4832d609fb6665c9a46cc', class: "co-option-list__search", part: "search" }, h("co-icon", { key: '8b8f2e72fb6f9aa9b498455757aefe943627af80', name: "magnifying-glass", size: 16 }), h("input", { key: 'e434b657655cb855ef77611671db90a7e8f78850', 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: '9e3c8ff1cb005274b74cf50b1c8db469958bbfc0', 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: '8087c3de1d857b562918a358f98a7a195cbe66d7', class: "co-option-list__inner" }, showClear && (h("button", { key: 'b067aedd7e0dbb29db12c35d0d217147359bc5f7', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: '406e84a7bcc5d8509383527caa0f49d5f93fda53', name: "x-circle", size: 14 }), h("span", { key: '9347b010b58d51363a68aab65781cae7de31cca1' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: '774fcb348a3553a945b70de822621ee24e410808', class: "co-option-list__loading" }, h("co-loader", { key: 'f760bf3ec0b27cfd0c57e2a56a613b8390faa935', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: 'f018550513d4057bdbddaf64846ba7d4cd016a45', class: "co-option-list__empty" }, h("co-icon", { key: '7925a8b7c385389b1d59548d5d550a0d7f0d163e', name: "magnifying-glass", size: 20 }), h("span", { key: 'b31e52eef274434599db7ff217a9bfc634ebdf7f' }, this.emptyMessage))), items.length > 0 && this.virtual
+        return (h("div", { key: 'fc7f56eb7837405c1c3c1addabb9748f4c955fed', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (h("div", { key: '44a31021a6cd49ec0ddf169c2cf2a0cdd0088f1d', class: "co-option-list__search", part: "search" }, h("co-icon", { key: '4d375787abbc1dd93fda1200a8cfb76928775e6f', name: "magnifying-glass", size: 16 }), h("input", { key: 'ffcad867196edd9f8384eda74d215873f2b2f857', 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: 'a1d5b69d184accaf8ee4ff4b0674823cee4da659', 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: '3b6761a9bd95bcdaea14dd13619024841e9b6e22', class: "co-option-list__inner" }, showClear && (h("button", { key: '0b9fce9a2439733e5a3bb0d74542eafcbb3754b9', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, h("co-icon", { key: '6db442c304c7d36fa9e41befb78a1ee4ebe8a415', name: "x-circle", size: 14 }), h("span", { key: '12d6b290acc9789dea62cfd036f62eae2a28b33d' }, this.clearOptionLabel))), this.loading && items.length === 0 && (h("div", { key: 'cc358dc94a3db4208ef85f16f8dce2d0592d4193', class: "co-option-list__loading" }, h("co-loader", { key: '9373dbe39674b9e5b18d03cf540ffa83309ea3fe', size: "sm" }))), !this.loading && items.length === 0 && (h("div", { key: '732747e33e2ec29968eb7f19b050d89e4b2cca00', class: "co-option-list__empty" }, h("co-icon", { key: '6defcd47ad121509bea43da488382a47a846f728', name: "magnifying-glass", size: 20 }), h("span", { key: '73729f8c52962e522125b6c258b0f1fb04eff533' }, 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: '7de231a83a96a2aca0cb240a68c3c9e6ab9b475c', class: "co-option-list__loading-more" }, h("co-loader", { key: '087234fb45c3cbea3bd3f2888957d3b2751753ad', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: '456bc75bb53a3f0d01f7fd850ca4b8227baf326d', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: '2935b1dd65ec2409c18c3f72e0200d5ed1c19323', name: "footer" })));
+                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (h("div", { key: '915e9c5dd03a7f77a2d680137b962e0f100fa903', class: "co-option-list__loading-more" }, h("co-loader", { key: 'dea515b0c90e0fac1f16fd4140ed38bddcd0cda4', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (h("div", { key: '9f3be3b39ccc00a380c3d88d30ac8695102e22a4', class: "co-option-list__more" }, remaining, " more results")))), h("slot", { key: '6b6a06ef1819241ef5f5ff5870e79ab8b0765ed8', name: "footer" })));
     }
     static get is() { return "co-option-list"; }
     static get encapsulation() { return "shadow"; }
@@ -1204,6 +1207,26 @@ export class CoOptionList {
                 "attribute": "avatar-shape",
                 "defaultValue": "'circle'"
             },
+            "suffixAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'inline' | 'end'",
+                    "resolved": "\"end\" | \"inline\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`end` pinta el suffix como columna a la derecha de la fila (precio/meta),\nsin el guion; `inline` = junto al label (default)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "suffix-align",
+                "defaultValue": "'inline'"
+            },
             "autoHighlight": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -106,8 +106,10 @@ export class CoOverlay {
     }
     /**
      * Promote the scrim to the browser top layer so it covers the whole viewport
-     * regardless of ancestor `filter`/`mask`/`transform` (which would otherwise
-     * make `position: fixed` resolve against that ancestor, confining the scrim).
+     * regardless of ancestor containing blocks — `contain: layout` on the
+     * app-shell `.main` / `.co-drawer` / `.co-modal__frame` (which replaced the
+     * old ancestor `filter`/`mask`), or any `transform` — that would otherwise
+     * make `position: fixed` resolve against that ancestor, confining the scrim.
      * The Popover API promotes WITHOUT moving the DOM node, so slots and Stencil
      * reconciliation are untouched. No-ops gracefully where unsupported.
      */
@@ -187,7 +189,7 @@ export class CoOverlay {
         focusables[nextIndex].focus();
     }
     render() {
-        return (h("div", { key: '686e2708db09be6fbbb35bb267e3969d240bba4f', 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: '61b7864c03339835d2373efe36804d781f770d3a' })));
+        return (h("div", { key: '1664f81264046991c4d66285489001c4783138ec', 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: 'fc220441149e20eb8b2ca1dcb7131d77e25dcdb3' })));
     }
     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: 'cc4d3011b35cf0c7e409e26e81c0443d4acf7116', class: "co-page-header", part: "page-header" }, h("div", { key: 'd0d79d2a1f1e55ef178ae6deb4a4bda9a718f3f7', class: "co-page-header__left" }, this.icon && (h("span", { key: '5d6c4210d2f18a69c9f1371ec79ba63a884a586b', class: "co-page-header__icon" }, h("co-icon", { key: '3bd905fa57f3c772cd2f61cd9de1e2d60407af62', name: this.icon, size: 24 }))), h("span", { key: '9656285b6a3d91f442d00e4acf9c55a8300ca5a0', class: "co-page-header__title" }, h("slot", { key: '1b31917e3bcbacdc111d8c5f46be03a56d188548' }, this.heading))), h("div", { key: 'fa551bee2dade362de86402835532b09547bdb30', class: "co-page-header__actions" }, h("slot", { key: '8ecfd5b89dd1c1fb5d62f5d78c375e918f6abff6', name: "actions" }))));
+        return (h("div", { key: '305f42c88d10f238351f362b72283abe82eaeb20', class: "co-page-header", part: "page-header" }, h("div", { key: '10185fe127049bfece585c59f92824888113861e', class: "co-page-header__left" }, this.icon && (h("span", { key: '017bc4f2aed8d05999c581ce0d7a4797aa84eff6', class: "co-page-header__icon" }, h("co-icon", { key: '7d5863437875aa09ad3bbe9e12c0b5d5c9f5c0c7', name: this.icon, size: 24 }))), h("span", { key: 'e62ead8cb061045d8995689dce3009e9843e3997', class: "co-page-header__title" }, h("slot", { key: '9e1d01a94942daeeb1c56f1d0f05534b45125422' }, this.heading))), h("div", { key: '5a2dd08e5b11ab33e64ddb581196d8535deb0925', class: "co-page-header__actions" }, h("slot", { key: '7fd3a5ea06593c9208a59ba2812bb827f1d39815', 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: '39e358a001c1c0df6b6fb626f031ea2efd416e78', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: '3210c553f76fafdfec97bab4f9468e2438f0c5c2', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: 'f9057119f8e7d7d37765ae758829aef9ef4b47c6', required: this.required }))), h("div", { key: '782a76b6c15bdac59b6e33964f326451ce85a5ef', class: "co-phone-field__container" }, h("button", { key: 'fc31bf1af8767f56508f9fcff28e9c50be6da447', 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: 'd98253ada8bbf1a905ef6eadd4b30723dd4ec4ee', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: '746626be2b166e290af16181f5f9e9837ae8e3dc', class: "co-phone-field__chevron" }, h("co-icon", { key: 'bffa21af2ceee3dad2d045cdf07996b4da1ad0bb', name: "caret-down", size: 14 }))), h("input", { key: '51d59eb3fa78d64984f59f6096f8ca5ea013cb3d', 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: 'e0b96accd38c9226812da68f811db79ae1f39e06', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: '919556f077ab5b55fb7b72dcec7cfa43c4ae2b25', class: "co-phone-field__search" }, h("input", { key: 'f3d78c9daa4bb43f8617d06b6d9bb9efdb88dc58', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: 'ad53c211f9130391585e21da43435777f156bdf1', 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: 'a39f039fe9ae6216e84e032c9f8ef1b18791d224', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: 'fd32dedcbd326365ae80f71d58ad1a7653a0474c', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '369daab4e46552564be76402d739f56b3f46b669', class: "co-phone-field__helper-text" }, this.helperText)))));
+        return (h("div", { key: '44113c6d2a4845b96b185bc1a291335ad099491b', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: 'aee2eced519f996ebf8941210e5151ebe32429d3', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: '85b8d50b8062d0041b0f416beb7a140d29d06b1f', required: this.required }))), h("div", { key: '381313d069536477ded093cd236ff740dc534ae4', class: "co-phone-field__container" }, h("button", { key: '4aa81cd26e4824c45b9fd0530a4ff1016acbc877', 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: 'd8ba9bbaae902853d97c37892ea2094a3a05c2ed', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: '065c2daf2b277fd870204c989b3eb359aa68dec4', class: "co-phone-field__chevron" }, h("co-icon", { key: '53761d275d9f98010c197e7d8b8f5b20abf753fd', name: "caret-down", size: 14 }))), h("input", { key: '8340a483e8deaf24fd7b03d2239195064d392eb4', 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: '6e736fb24707feb8faf373a403b192670698a043', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: 'f0750d83d3da8cebc3c1b39d21a35b31bc17bd4a', class: "co-phone-field__search" }, h("input", { key: '546c432e6e11010e2d685780e2f5eddfbf3ad73d', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: '5960b2979fbedf66ea197ff7f37093b6240242bc', 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: 'fa9e15ba4f08abf2caff8b1b196ce25ce2e89bb9', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: '122a32febae2d6f86e32d8b3d1f2ec2df9e573c7', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '6117ecd58a0c2ddefca94237f7c5d815fd5c3c79', 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

@@ -43,7 +43,7 @@
      exactamente igual de invisible que antes — sin estado nuevo que limpiar. */
   visibility: hidden;
   opacity: 0;
-  transform: scale(0.98);
+  transform: scale(0.97);
   background: var(--co-semantic-surface-page, #fff);
   border: 1px solid var(--co-semantic-border-subtle);
   border-radius: var(--co-border-radius-sm, 12px);
@@ -51,8 +51,9 @@
   overflow: visible;
 }
 
-/* La transición vive en --positioned (solo entrada): el cierre desmonta el nodo,
-   no hay fase de salida que animar. */
+/* 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). */
 .co-popover__panel--positioned {
   visibility: visible;
   opacity: 1;
@@ -62,6 +63,20 @@
     transform var(--co-motion-duration-base) var(--co-motion-ease-out);
 }
 
+/* Fase de salida: el nodo sigue montado (tsx difiere el unmount hasta transitionend).
+   Debe declararse después de --positioned: misma especificidad, gana por orden.
+   pointer-events: none — el panel moribundo sigue :popover-open en el top layer
+   ~150ms; sin esto, un click durante el exit aterriza en el menú fantasma. */
+.co-popover__panel--closing {
+  visibility: visible;
+  opacity: 0;
+  transform: scale(0.99);
+  pointer-events: none;
+  transition:
+    opacity var(--co-motion-duration-fast) var(--co-motion-ease-in),
+    transform var(--co-motion-duration-fast) var(--co-motion-ease-in);
+}
+
 /* Origen según el lado resuelto (post-flip) por el que abre el panel. */
 .co-popover__panel--bottom {
   transform-origin: top center;