@prolibu-suite/cobalt-core 0.9.5 → 0.10.0

package/dist/esm/co-number-field.entry.js

@@ -1,8 +1,136 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CrtiywTB.js';
-import { R as RequiredMark } from './requiredMark-DCD-ZA51.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.js';
+import { R as RequiredMark } from './requiredMark-BCJUuZvC.js';
 
-const coNumberFieldCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-number-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-number-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-number-field__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-number-field__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-number-field--disabled .co-number-field__label,.co-number-field--disabled .co-number-field__secondary-label{color:var(--co-semantic-text-disabled)}.co-number-field__row{display:flex;align-items:center;gap:0;background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);min-height:40px;overflow:hidden;box-sizing:border-box;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-number-field--s .co-number-field__row{min-height:28px}.co-number-field--s .co-number-field__btn{width:28px}.co-number-field--sm .co-number-field__row{min-height:32px}.co-number-field--sm .co-number-field__btn{width:32px}.co-number-field--lg .co-number-field__row{min-height:48px}.co-number-field--lg .co-number-field__btn{width:48px}.co-number-field--focused .co-number-field__row{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-number-field--disabled .co-number-field__row{background:var(--co-semantic-surface-disabled);border-color:transparent}.co-number-field--error .co-number-field__row{border-color:var(--co-semantic-status-error)}.co-number-field--success .co-number-field__row{border-color:var(--co-semantic-status-success)}.co-number-field--warning .co-number-field__row{border-color:var(--co-color-status-review)}.co-number-field--info .co-number-field__row{border-color:var(--co-semantic-status-info)}.co-number-field__btn{display:flex;align-items:center;justify-content:center;width:40px;align-self:stretch;flex-shrink:0;border:none;background:transparent;color:var(--co-semantic-text-default);cursor:pointer;padding:0;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-number-field__btn:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-number-field__btn:active:not(:disabled){background:var(--co-semantic-surface-muted)}.co-number-field__btn:disabled{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-number-field__btn--minus{border-right:1px solid var(--co-semantic-border-subtle)}.co-number-field__btn--plus{border-left:1px solid var(--co-semantic-border-subtle)}.co-number-field__clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:100%;padding:0;border:none;background:transparent;color:var(--co-semantic-text-muted);cursor:pointer;transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-number-field__clear:hover{color:var(--co-semantic-text-default)}.co-number-field__input{flex:1;min-width:0;border:none;background:transparent;text-align:center;color:var(--co-semantic-text-default);font-family:inherit;font-size:inherit;font-weight:400;line-height:1;padding:var(--co-spacing-sm2) var(--co-spacing-sm2);outline:none;-moz-appearance:textfield}.co-number-field__input::placeholder{color:var(--co-semantic-text-muted)}.co-number-field__affix{flex-shrink:0;padding-right:var(--co-spacing-sm2);color:var(--co-semantic-text-muted);font-size:inherit;font-weight:400;line-height:1;pointer-events:none;user-select:none}.co-number-field__input::-webkit-outer-spin-button,.co-number-field__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.co-number-field--disabled .co-number-field__input{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-number-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-number-field__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-number-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-number-field__helper--error .co-number-field__helper-icon,.co-number-field__helper--error .co-number-field__helper-text{color:var(--co-semantic-status-error)}.co-number-field__helper--success .co-number-field__helper-icon,.co-number-field__helper--success .co-number-field__helper-text{color:var(--co-semantic-status-success)}.co-number-field__helper--warning .co-number-field__helper-icon,.co-number-field__helper--warning .co-number-field__helper-text{color:var(--co-color-status-review)}.co-number-field__helper--info .co-number-field__helper-icon,.co-number-field__helper--info .co-number-field__helper-text{color:var(--co-semantic-status-info)}:host([layout='horizontal']) .co-number-field{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-number-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-number-field__label{white-space:normal}:host([layout='horizontal']) .co-number-field>:not(.co-number-field__labels){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}`;
+/**
+ * Texto de montos para co-number-field `format="amount"`.
+ *
+ * El campo pinta coma = miles y punto = decimal (formato de la app). El texto
+ * PEGADO, en cambio, viene con el formato de DONDE se copió: es-CO usa el punto
+ * para miles (`121.123,20`), en-US al revés (`121,123.20`). Los dos separadores
+ * intercambian rol según el locale, así que no alcanza con borrar lo que no sea
+ * dígito: hay que decidir CUÁL es el decimal antes de descartar el otro.
+ * Puerto del util probado de V1 (shared-components `utils/numericInput.js`).
+ */
+/**
+ * Topes de longitud: pegar una COLUMNA entera de Excel concatena todos los
+ * dígitos en un solo número — sin tope, cada tecla siguiente re-formatea un
+ * string gigante (y la agrupación de miles se vuelve costosa) y parseFloat
+ * termina en Infinity. 15 enteros = rango seguro de Number; 8 decimales =
+ * paridad con el numeral de V1 (`$ 0,0.[00000000]`).
+ */
+const MAX_INTEGER_DIGITS = 15;
+const MAX_DECIMAL_DIGITS = 8;
+const capDigits = (integer, decimals) => ({
+    integer: integer.slice(0, MAX_INTEGER_DIGITS),
+    decimals: decimals.slice(0, MAX_DECIMAL_DIGITS),
+});
+/**
+ * Interpreta un número pegado sin saber de qué locale viene.
+ *
+ * Reglas, en orden:
+ * 1. Con AMBOS separadores, el ÚLTIMO es el decimal (`121.123,20` → `121123.20`).
+ * 2. Separador repetido = miles (`123.123.123` → `123123123`).
+ * 3. Uno solo: grupo de exactamente 3 dígitos detrás = miles (`34,640` → `34640`,
+ *    como formatea la propia app); cualquier otra cantidad = decimal (`121,20`).
+ *
+ * Devuelve el número crudo listo para `parseFloat` ('' si no hay dígitos).
+ */
+function parseNumericText(text) {
+    const cleaned = String(text !== null && text !== void 0 ? text : '').replace(/[^\d.,]/g, '');
+    if (!cleaned)
+        return '';
+    const lastDot = cleaned.lastIndexOf('.');
+    const lastComma = cleaned.lastIndexOf(',');
+    let decimalIndex = -1;
+    if (lastDot >= 0 && lastComma >= 0) {
+        decimalIndex = Math.max(lastDot, lastComma);
+    }
+    else if (lastDot >= 0 || lastComma >= 0) {
+        const separator = lastDot >= 0 ? '.' : ',';
+        const groups = cleaned.split(separator);
+        if (groups.length === 2 && groups[1].length !== 3)
+            decimalIndex = cleaned.lastIndexOf(separator);
+    }
+    const { integer, decimals } = capDigits((decimalIndex >= 0 ? cleaned.slice(0, decimalIndex) : cleaned).replace(/[.,]/g, ''), decimalIndex >= 0 ? cleaned.slice(decimalIndex + 1).replace(/[.,]/g, '') : '');
+    if (!integer && !decimals)
+        return '';
+    return decimals ? `${integer || '0'}.${decimals}` : integer;
+}
+/**
+ * Deja texto que YA está en el formato del campo (coma = miles, punto = decimal)
+ * como número crudo: dígitos y un único punto, con signo sólo si se permite.
+ * Un "-" solo se conserva como estado transitorio de tipeo (parseFloat da NaN
+ * y el caller no emite).
+ */
+function stripAmountText(text, allowNegative = false) {
+    const source = String(text !== null && text !== void 0 ? text : '');
+    const negative = allowNegative && /^\s*-/.test(source);
+    const cleaned = source.replace(/[^\d.]/g, '');
+    const [rawInteger, ...rawDecimals] = cleaned.split('.');
+    const { integer, decimals } = capDigits(rawInteger, rawDecimals.join(''));
+    const raw = rawDecimals.length ? `${integer}.${decimals}` : integer;
+    if (!raw)
+        return negative ? '-' : '';
+    return negative ? `-${raw}` : raw;
+}
+/**
+ * Agrupa la parte ENTERA de un número crudo con comas de miles, sin tocar los
+ * decimales ni un punto colgante a medio tipear (`1234.` → `1,234.`).
+ */
+function formatAmountText(raw) {
+    if (!raw)
+        return '';
+    const negative = raw.startsWith('-');
+    const body = negative ? raw.slice(1) : raw;
+    const dotIndex = body.indexOf('.');
+    const integer = dotIndex >= 0 ? body.slice(0, dotIndex) : body;
+    const rest = dotIndex >= 0 ? body.slice(dotIndex) : '';
+    // Recorrido O(n): el idiom con lookahead (`/\B(?=(\d{3})+(?!\d))/g`) es
+    // CUADRÁTICO en la cantidad de dígitos — inofensivo para un número, letal
+    // dentro de un handler de input (medido: 12k dígitos ≈ 81ms por tecla en M4).
+    let grouped = '';
+    for (let i = 0; i < integer.length; i++) {
+        if (i > 0 && (integer.length - i) % 3 === 0)
+            grouped += ',';
+        grouped += integer[i];
+    }
+    return `${negative ? '-' : ''}${grouped}${rest}`;
+}
+
+const coNumberFieldCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-number-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-number-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-number-field__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-number-field__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-number-field--disabled .co-number-field__label,.co-number-field--disabled .co-number-field__secondary-label{color:var(--co-semantic-text-disabled)}.co-number-field__row{display:flex;align-items:center;gap:0;background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);min-height:40px;overflow:hidden;box-sizing:border-box;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-number-field--s .co-number-field__row{min-height:28px}.co-number-field--s .co-number-field__btn{width:28px}.co-number-field--sm .co-number-field__row{min-height:32px}.co-number-field--sm .co-number-field__btn{width:32px}.co-number-field--lg .co-number-field__row{min-height:48px}.co-number-field--lg .co-number-field__btn{width:48px}.co-number-field--focused .co-number-field__row{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-number-field--disabled .co-number-field__row{background:var(--co-semantic-surface-disabled);border-color:transparent}.co-number-field--error .co-number-field__row{border-color:var(--co-semantic-status-error)}.co-number-field--success .co-number-field__row{border-color:var(--co-semantic-status-success)}.co-number-field--warning .co-number-field__row{border-color:var(--co-color-status-review)}.co-number-field--info .co-number-field__row{border-color:var(--co-semantic-status-info)}.co-number-field__btn{display:flex;align-items:center;justify-content:center;width:40px;align-self:stretch;flex-shrink:0;border:none;background:transparent;color:var(--co-semantic-text-default);cursor:pointer;padding:0;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-number-field__btn:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-number-field__btn:active:not(:disabled){background:var(--co-semantic-surface-muted)}.co-number-field__btn:disabled{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-number-field__btn--minus{border-right:1px solid var(--co-semantic-border-subtle)}.co-number-field__btn--plus{border-left:1px solid var(--co-semantic-border-subtle)}.co-number-field__clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:100%;padding:0;border:none;background:transparent;color:var(--co-semantic-text-muted);cursor:pointer;transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-number-field__clear:hover{color:var(--co-semantic-text-default)}.co-number-field__input{flex:1;min-width:0;border:none;background:transparent;text-align:center;color:var(--co-semantic-text-default);font-family:inherit;font-size:inherit;font-weight:400;line-height:1;padding:var(--co-spacing-sm2) var(--co-spacing-sm2);outline:none;-moz-appearance:textfield}.co-number-field__input::placeholder{color:var(--co-semantic-text-muted)}.co-number-field__affix{flex-shrink:0;padding-right:var(--co-spacing-sm2);color:var(--co-semantic-text-muted);font-size:inherit;font-weight:400;line-height:1;pointer-events:none;user-select:none}::slotted([slot='suffix']){flex-shrink:0;margin-right:var(--co-spacing-xxs)}:host([hide-controls]) .co-number-field__input{text-align:right;padding-left:var(--co-spacing-md);padding-right:var(--co-spacing-md)}:host([hide-controls]) .co-number-field__affix{padding-right:var(--co-spacing-md);font-size:var(--co-font-size-12)}.co-number-field__input::-webkit-outer-spin-button,.co-number-field__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.co-number-field--disabled .co-number-field__input{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-number-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-number-field__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-number-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-number-field__helper--error .co-number-field__helper-icon,.co-number-field__helper--error .co-number-field__helper-text{color:var(--co-semantic-status-error)}.co-number-field__helper--success .co-number-field__helper-icon,.co-number-field__helper--success .co-number-field__helper-text{color:var(--co-semantic-status-success)}.co-number-field__helper--warning .co-number-field__helper-icon,.co-number-field__helper--warning .co-number-field__helper-text{color:var(--co-color-status-review)}.co-number-field__helper--info .co-number-field__helper-icon,.co-number-field__helper--info .co-number-field__helper-text{color:var(--co-semantic-status-info)}:host([layout='horizontal']) .co-number-field{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-number-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-number-field__label{white-space:normal}:host([layout='horizontal']) .co-number-field>:not(.co-number-field__labels){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}`;
 
+/**
+ * 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;
+};
 const CoNumberField = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -20,19 +148,46 @@ const CoNumberField = class {
         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.
@@ -49,9 +204,50 @@ const CoNumberField = class {
                 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();
@@ -61,6 +257,10 @@ const CoNumberField = class {
             // 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;
@@ -87,9 +287,8 @@ const CoNumberField = class {
     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() {
@@ -131,6 +330,21 @@ const CoNumberField = class {
     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;
@@ -144,14 +358,63 @@ const CoNumberField = class {
         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)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/co-overlay.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CrtiywTB.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.js';
 import { a as afterEventFor } from './overlayAfterClose-Ch1jfwZ2.js';
 
 // focusTrap.ts
@@ -166,8 +166,10 @@ const CoOverlay = class {
     }
     /**
      * 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.
      */
@@ -247,7 +249,7 @@ const CoOverlay = class {
         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' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/co-page-header.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-CrtiywTB.js';
+import { r as registerInstance, h } from './index-DH5lfRNj.js';
 
 const coPageHeaderCss = () => `:host{display:block}.co-page-header{display:flex;align-items:center;justify-content:space-between;padding:var(--co-spacing-lg) var(--co-spacing-xl);font-family:var(--co-font-family-primary);border-bottom:1px solid var(--co-semantic-border-subtle);background:var(--co-semantic-surface-page);min-height:72px;box-sizing:border-box}.co-page-header__left{display:flex;align-items:center;gap:var(--co-spacing-md)}.co-page-header__icon{display:flex;color:var(--co-semantic-text-muted)}.co-page-header__title{font-size:var(--co-font-size-18);font-weight:600;color:var(--co-semantic-text-default)}.co-page-header__actions{display:flex;align-items:center;gap:var(--co-spacing-md)}.co-page-header__actions:empty{display:none}`;
 
@@ -7,7 +7,7 @@ const CoPageHeader = class {
         registerInstance(this, hostRef);
     }
     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" }))));
     }
 };
 CoPageHeader.style = coPageHeaderCss();

package/dist/esm/co-phone-field.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CrtiywTB.js';
-import { R as RequiredMark } from './requiredMark-DCD-ZA51.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.js';
+import { R as RequiredMark } from './requiredMark-BCJUuZvC.js';
 import { r as rankByMatch, h as highlightMatch } from './normalizeText-CQY6Ul7q.js';
 
 /**
@@ -359,7 +359,7 @@ const CoPhoneField = class {
     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)))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/co-popover.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CrtiywTB.js';
-import { c as computePosition, g as getOffsetAncestor, f as findNearestScrollParent } from './positioning-BMdapAL8.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.js';
+import { c as computePosition, g as getOffsetAncestor, f as findScrollParents } from './positioning-DFHRS9cJ.js';
 
 /**
  * Pila global de popovers abiertos (orden de apertura). Permite que el
@@ -26,7 +26,7 @@ function isTopLayer(el) {
     return stack.length > 0 && stack[stack.length - 1] === el;
 }
 
-const coPopoverCss = () => `:host{display:inline-block;position:relative}:host([match-width]){display:block;width:100%}.co-popover{display:block;width:100%}.co-popover__trigger{display:block;width:100%;cursor:pointer}.co-popover__panel{position:fixed;inset:auto;top:0;left:0;margin:0;padding:0;width:auto;height:auto;max-width:none;max-height:none;z-index:10000;visibility:hidden;opacity:0;transform:scale(0.98);background:var(--co-semantic-surface-page, #fff);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-sm, 12px);box-shadow:0 4px 16px rgba(31, 28, 27, 0.08);overflow:visible}.co-popover__panel--positioned{visibility:visible;opacity:1;transform:scale(1);transition:opacity var(--co-motion-duration-base) var(--co-motion-ease-out),     transform var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-popover__panel--bottom{transform-origin:top center}.co-popover__panel--top{transform-origin:bottom center}.co-popover__panel--right{transform-origin:center left}.co-popover__panel--left{transform-origin:center right}`;
+const coPopoverCss = () => `:host{display:inline-block;position:relative}:host([match-width]){display:block;width:100%}.co-popover{display:block;width:100%}.co-popover__trigger{display:block;width:100%;cursor:pointer}.co-popover__panel{position:fixed;inset:auto;top:0;left:0;margin:0;padding:0;width:auto;height:auto;max-width:none;max-height:none;z-index:10000;visibility:hidden;opacity:0;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);box-shadow:0 4px 16px rgba(31, 28, 27, 0.08);overflow:visible}.co-popover__panel--positioned{visibility:visible;opacity:1;transform:scale(1);transition:opacity var(--co-motion-duration-base) var(--co-motion-ease-out),     transform var(--co-motion-duration-base) var(--co-motion-ease-out)}.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)}.co-popover__panel--bottom{transform-origin:top center}.co-popover__panel--top{transform-origin:bottom center}.co-popover__panel--right{transform-origin:center left}.co-popover__panel--left{transform-origin:center right}`;
 
 /** Side classes driving the entrance `transform-origin` (see co-popover.css). */
 const SIDE_CLASSES = ['top', 'bottom', 'left', 'right'].map((s) => `co-popover__panel--${s}`);
@@ -35,6 +35,7 @@ const CoPopover = class {
         registerInstance(this, hostRef);
         this.coOpen = createEvent(this, "coOpen", 3);
         this.coClose = createEvent(this, "coClose", 3);
+        this.coPlacement = createEvent(this, "coPlacement", 3);
         // ── Props ──────────────────────────────────────────────────
         /** Whether the popover panel is visible. */
         this.open = false;
@@ -57,6 +58,8 @@ const CoPopover = class {
         this.closeOnEscape = true;
         /** Flip placement when the panel would overflow the viewport. */
         this.flip = true;
+        /** Fase de salida: mantiene el panel montado mientras corre la transición de cierre. */
+        this.closing = 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
@@ -68,6 +71,20 @@ const CoPopover = class {
         // had every popover instance (open or not) running capture-phase document
         // click handlers, growing O(N) with popover count in the page.
         this.docListenersBound = false;
+        this.finishClose = () => {
+            clearTimeout(this.closeFallbackTimer);
+            if (this.open)
+                return; // reabierto durante el cierre
+            this.closing = false;
+            this.panelEl = undefined;
+        };
+        this.handlePanelTransitionEnd = (e) => {
+            if (this.open || !this.closing)
+                return;
+            if (e.target !== this.panelEl || e.propertyName !== 'transform')
+                return;
+            this.finishClose();
+        };
         // ── Click outside (manual, capture phase) ──────────────────
         // Attached/detached in connectedCallback/disconnectedCallback. Using capture
         // phase so we run before any inner-element listeners that might stop
@@ -107,8 +124,8 @@ const CoPopover = class {
                 return;
             const triggerRect = this.triggerEl.getBoundingClientRect();
             // ⚠️ El panel arrastra el `transform: scale()` de la entrada, y
-            // getBoundingClientRect() devuelve la caja TRANSFORMADA: 0.98× al montar y
-            // ~0.982× en la segunda pasada del watcher (~16ms de los 180ms). Medir con
+            // 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
             // ella metía el factor de escala DENTRO de la matemática de posicionamiento,
             // y ~2% del error quedaba en la posición de reposo: las alineaciones que
             // restan el tamaño del panel (`bottom-end` — el default de co-menu —, `top*`,
@@ -163,6 +180,7 @@ const CoPopover = class {
                 if (!this.panelEl.classList.contains(sideClass)) {
                     this.panelEl.classList.remove(...SIDE_CLASSES);
                     this.panelEl.classList.add(sideClass);
+                    this.coPlacement.emit({ placement: actualPlacement });
                 }
                 this.panelEl.classList.add('co-popover__panel--positioned');
             }
@@ -196,10 +214,18 @@ const CoPopover = class {
         removeLayer(this.el);
         this.unbindDocListeners();
         this.cleanupListeners();
+        clearTimeout(this.closeFallbackTimer);
+        // Desconectado a mitad del exit (p.ej. host removido por un v-if del
+        // padre mientras corre la transición de cierre): si se reconecta luego
+        // (:key remount, teleport) sin pasar por finishClose, `closing` quedaría
+        // stale en true y el panel nacería en fase de salida.
+        this.closing = false;
     }
     // ── Watchers ───────────────────────────────────────────────
     onOpenChange(isOpen) {
         if (isOpen) {
+            this.closing = false;
+            clearTimeout(this.closeFallbackTimer);
             pushLayer(this.el);
             this.coOpen.emit();
             this.bindDocListeners();
@@ -220,10 +246,16 @@ const CoPopover = class {
             this.unbindDocListeners();
             this.cachedOffsetAncestor = null;
             this.offsetAncestorComputed = false;
-            // The panel is removed from the DOM by the conditional render (which also
-            // evicts it from the top layer); drop the now-detached ref so no async
-            // updatePosition can touch a stale element before the next open re-sets it.
-            this.panelEl = undefined;
+            // Panel keeps its ref/position frozen through the exit animation — the
+            // ref is dropped only when `finishClose` actually unmounts the node
+            // (transitionend, or the fallback timer). `panelEl` is intentionally
+            // NOT cleared here.
+            this.closing = true;
+            // Fallback por si transitionend no dispara (tab oculta, display:none ancestro).
+            // ⚠️ Atado al token: debe superar --co-motion-duration-fast (150ms) con margen —
+            // si el retune sube `fast` por encima de ~350ms, revisar esta constante.
+            clearTimeout(this.closeFallbackTimer);
+            this.closeFallbackTimer = setTimeout(() => this.finishClose(), 400);
         }
     }
     bindDocListeners() {
@@ -272,19 +304,24 @@ const CoPopover = class {
         }
     }
     // ── Scroll/resize listeners ────────────────────────────────
-    // Listen to window resize/scroll (covers most layout changes) and to the
-    // NEAREST scrollable ancestor (covers internal-scroll containers like a
-    // datatable body or co-drawer). Previously walked the entire ancestor chain,
-    // attaching N listeners per popover open — for deep trees, that was 5-10
-    // extra listeners per popover × per-scroll-tick getBoundingClientRect calls.
+    // Listen to window resize/scroll and to every ancestor that ACTUALLY scrolls
+    // (co-drawer/co-modal body, datatable body…).
+    //
+    // El listener de window NO alcanza por sí solo: los eventos `scroll` no son
+    // `composed`, así que el de un scroller que vive dentro de un shadow root
+    // —el caso de `.co-drawer__body`— nunca cruza el límite y el capture de
+    // window no lo ve. Por eso hay que engancharse al scroller mismo.
+    //
+    // Se recorre la cadena entera y no solo el ancestro más cercano porque los
+    // scrollers se anidan; `findScrollParents` ya filtra por `overflow` real, así
+    // que la lista queda en 1-2 elementos y no en los 5-10 que motivaron acotar
+    // esto a uno solo en su momento.
     addScrollListeners() {
         window.addEventListener('resize', this.scheduleUpdate, { passive: true });
         window.addEventListener('scroll', this.scheduleUpdate, { passive: true, capture: true });
-        this.scrollParents = [];
-        const scrollAncestor = findNearestScrollParent(this.el);
-        if (scrollAncestor) {
-            scrollAncestor.addEventListener('scroll', this.scheduleUpdate, { passive: true });
-            this.scrollParents.push(scrollAncestor);
+        this.scrollParents = findScrollParents(this.el);
+        for (const parent of this.scrollParents) {
+            parent.addEventListener('scroll', this.scheduleUpdate, { passive: true });
         }
     }
     cleanupListeners() {
@@ -301,13 +338,13 @@ const CoPopover = class {
     }
     // ── Render ─────────────────────────────────────────────────
     render() {
-        return (h("div", { key: '8a4ccad04a131824d9990759a41905e4772fd56c', class: "co-popover" }, h("div", { key: 'b71344c25aa5f785dbcb65425931f25403877173', class: "co-popover__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick }, h("slot", { key: '3a2ad77fbf1d79f917f9c7278faef8ecb65a364e', name: "trigger" })), this.open && (h("div", { key: 'dd6d65a867b15ad3d6fe18658d1f3fdd89be8806', class: "co-popover__panel", popover: "manual", ref: (el) => {
+        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) => {
                 if (el && el !== this.panelEl) {
                     this.panelEl = el;
                     this.promotePanel();
                     this.scheduleUpdate();
                 }
-            } }, h("slot", { key: '3082d046fc973bd5f571b4f9b845844be6e6bf9c' })))));
+            } }, h("slot", { key: '8466f617bd6b8a497e2040d3275b384156de126c' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {