@prolibu-suite/cobalt-core 0.9.6 → 0.10.1

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

@@ -1,10 +1,138 @@
 'use strict';
 
-var index = require('./index-DK-2Lzmf.js');
-var requiredMark = require('./requiredMark-C1xcrzSZ.js');
+var index = require('./index-MDAnKsze.js');
+var requiredMark = require('./requiredMark-D-t-IPN0.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) {
         index.registerInstance(this, hostRef);
@@ -22,19 +150,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.
@@ -51,9 +206,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();
@@ -63,6 +259,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;
@@ -89,9 +289,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() {
@@ -133,6 +332,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;
@@ -146,14 +360,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 (index.h("div", { key: '0c6bc83afe9b061ce2cb99b5ae7c1f6aed3f779a', class: {
+        return (index.h("div", { key: '1bcd7e60596bc28f5159f86a026d69d0d053f038', 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) && (index.h("div", { key: '203720b71c1962ec93f5aefa8dd3cbd67a0294fc', class: "co-number-field__labels" }, this.label && index.h("label", { key: '114cc0e2a0aa9d351911cee4d1c9c1494259ce3a', class: "co-number-field__label" }, this.label, index.h(requiredMark.RequiredMark, { key: 'bf4794dd4d5e21052c529ff7eb8e47a79ff9ddb4', required: this.required })), this.secondaryLabel && index.h("span", { key: '60519c76314068312514d47ef2284ccdd00b5c70', class: "co-number-field__secondary-label" }, this.secondaryLabel))), index.h("div", { key: 'c0584ba632adaa29f439f896cbab3f73663f2b0b', class: "co-number-field__row" }, index.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" }, index.h("co-icon", { key: 'a1173b08171bca43b50a6ca3dc8bb637cb0c43b3', name: "minus", size: 16 })), index.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 && (index.h("span", { key: '86705658b5b1ec0feb9be58afbf7966f382aaa9b', class: "co-number-field__affix", "aria-hidden": "true" }, "%")), this.clearable && !this.isEmpty && !this.disabled && (index.h("button", { key: '5e030b36c3c95a2416544930e2e4f69b06decf61', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, index.h("co-icon", { key: '5492f06d71885eb432122984160e5f93153a226f', name: "x-circle", size: 16, weight: "fill" }))), index.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" }, index.h("co-icon", { key: '2398e8b5e94071de8ffccbd3625976ddf93878d3', name: "plus", size: 16 }))), this.helperText && (index.h("div", { key: '16fc9f87db0ad43c6169eebb5be7ec57abd33e98', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && index.h("co-icon", { key: '1d3006cb9ba6d6b0f30fb6d09aad6b28fdf764d8', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), index.h("span", { key: '6d727671c30c45655c84319b6a269e4997c3ef6b', class: "co-number-field__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel) && (index.h("div", { key: 'aca2d9958374940304e05495ae05e74d627154c7', class: "co-number-field__labels" }, this.label && index.h("label", { key: '8cf05675830ad181005430526785984acc793d0b', class: "co-number-field__label" }, this.label, index.h(requiredMark.RequiredMark, { key: '36aed2cf48890cf79506416d0c45f272ed329664', required: this.required })), this.secondaryLabel && index.h("span", { key: '636111436e1e3fff8d74fb4b9412c2192c93495a', class: "co-number-field__secondary-label" }, this.secondaryLabel))), index.h("div", { key: '6cbbb87a304cd9e415aafda276daede8dbe0b6a7', class: "co-number-field__row", part: "row" }, !this.hideControls && (index.h("button", { key: 'e11dfc41ee97b3287908877aa74f732a4cbe31fe', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, index.h("co-icon", { key: '3f369b4d8293e9e987d18ba58fa1f010bd538016', name: "minus", size: 16 }))), index.h("input", { key: '8144b563cd4ae46774adbf224c45fa59378da4c7', 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 && (index.h("span", { key: '56e8b3a225f2332f9c3974ec195b63b3681d5b09', class: "co-number-field__affix", "aria-hidden": "true" }, this.affixText)), this.clearable && !this.isEmpty && !this.disabled && (index.h("button", { key: 'ea8325f7097c5b0b87bd51554163d44bdfe379ff', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, index.h("co-icon", { key: 'c72d4e3a039752fbcf7cf4594421d24bc2f0570a', name: "x-circle", size: 16, weight: "fill" }))), index.h("slot", { key: '2a3dc1b5a3e22ade3db02389178dd4ae3b1d3295', name: "suffix" }), !this.hideControls && (index.h("button", { key: '3b9bf39d86c7aacb212576dc4cf4af548b56fbed', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, index.h("co-icon", { key: '1655aaca9e66b51c0d97fc128c132326d3c740ad', name: "plus", size: 16 })))), this.helperText && (index.h("div", { key: '397b37569cabdf68072d870b5e5781f7d39da8fe', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && index.h("co-icon", { key: 'b574fddca9813af3e208ea3e9258480a992fd4f2', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), index.h("span", { key: 'd17a39a82108f12100dee523d7754b50f147bb63', class: "co-number-field__helper-text" }, this.helperText)))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DK-2Lzmf.js');
+var index = require('./index-MDAnKsze.js');
 var overlayAfterClose = require('./overlayAfterClose-BdeXrhVY.js');
 
 // focusTrap.ts
@@ -168,8 +168,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.
      */
@@ -249,7 +251,7 @@ const CoOverlay = class {
         focusables[nextIndex].focus();
     }
     render() {
-        return (index.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 }, index.h("slot", { key: '61b7864c03339835d2373efe36804d781f770d3a' })));
+        return (index.h("div", { key: '4fafc87768eca581018ff578875b2362cf5297d2', 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 }, index.h("slot", { key: '2d18410bb6774701806101d38b6d41293b0e7ff9' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DK-2Lzmf.js');
+var index = require('./index-MDAnKsze.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}`;
 
@@ -9,7 +9,7 @@ const CoPageHeader = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: 'cc4d3011b35cf0c7e409e26e81c0443d4acf7116', class: "co-page-header", part: "page-header" }, index.h("div", { key: 'd0d79d2a1f1e55ef178ae6deb4a4bda9a718f3f7', class: "co-page-header__left" }, this.icon && (index.h("span", { key: '5d6c4210d2f18a69c9f1371ec79ba63a884a586b', class: "co-page-header__icon" }, index.h("co-icon", { key: '3bd905fa57f3c772cd2f61cd9de1e2d60407af62', name: this.icon, size: 24 }))), index.h("span", { key: '9656285b6a3d91f442d00e4acf9c55a8300ca5a0', class: "co-page-header__title" }, index.h("slot", { key: '1b31917e3bcbacdc111d8c5f46be03a56d188548' }, this.heading))), index.h("div", { key: 'fa551bee2dade362de86402835532b09547bdb30', class: "co-page-header__actions" }, index.h("slot", { key: '8ecfd5b89dd1c1fb5d62f5d78c375e918f6abff6', name: "actions" }))));
+        return (index.h("div", { key: '0f064f7e659103d8f679f23242492a5e9a869a88', class: "co-page-header", part: "page-header" }, index.h("div", { key: '4ccd5682d2d6872a5fa771b2779a8f7e0ab8b6f7', class: "co-page-header__left" }, this.icon && (index.h("span", { key: '10bc9aa126f8b9932b1e4247d7c3c3c04d89c425', class: "co-page-header__icon" }, index.h("co-icon", { key: '42f2cda7ec8ee4e0e4a51069606492647d13f690', name: this.icon, size: 24 }))), index.h("span", { key: '368633ff1b213286d5f6bdf5716e3acb1cbe2f71', class: "co-page-header__title" }, index.h("slot", { key: 'c74f2dcde7cfc0c0384f6a10a9f069a9ff94f78d' }, this.heading))), index.h("div", { key: '6666c103a2e6e826837091658ce1e4e4b1704215', class: "co-page-header__actions" }, index.h("slot", { key: '7df47ea333491b960bc1faff7fd0b6431aba56e5', name: "actions" }))));
     }
 };
 CoPageHeader.style = coPageHeaderCss();

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-DK-2Lzmf.js');
-var requiredMark = require('./requiredMark-C1xcrzSZ.js');
+var index = require('./index-MDAnKsze.js');
+var requiredMark = require('./requiredMark-D-t-IPN0.js');
 var normalizeText = require('./normalizeText-B-v-XPKf.js');
 
 /**
@@ -361,7 +361,7 @@ const CoPhoneField = class {
     render() {
         const entry = this.selectedEntry;
         const statusClass = this.status !== 'default' ? `co-phone-field--${this.status}` : '';
-        return (index.h("div", { key: '39e358a001c1c0df6b6fb626f031ea2efd416e78', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (index.h("label", { key: '3210c553f76fafdfec97bab4f9468e2438f0c5c2', class: "co-phone-field__label" }, this.label, index.h(requiredMark.RequiredMark, { key: 'f9057119f8e7d7d37765ae758829aef9ef4b47c6', required: this.required }))), index.h("div", { key: '782a76b6c15bdac59b6e33964f326451ce85a5ef', class: "co-phone-field__container" }, index.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 ? (index.h("img", { class: "co-phone-field__flag", src: `https://flagcdn.com/w40/${entry.iso2.toLowerCase()}.png`, alt: entry.iso2 })) : (index.h("co-icon", { name: "phone", size: 16 })), index.h("span", { key: 'd98253ada8bbf1a905ef6eadd4b30723dd4ec4ee', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), index.h("span", { key: '746626be2b166e290af16181f5f9e9837ae8e3dc', class: "co-phone-field__chevron" }, index.h("co-icon", { key: 'bffa21af2ceee3dad2d045cdf07996b4da1ad0bb', name: "caret-down", size: 14 }))), index.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 && (index.h("div", { key: 'e0b96accd38c9226812da68f811db79ae1f39e06', class: "co-phone-field__dropdown", role: "listbox" }, index.h("div", { key: '919556f077ab5b55fb7b72dcec7cfa43c4ae2b25', class: "co-phone-field__search" }, index.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 })), index.h("div", { key: 'ad53c211f9130391585e21da43435777f156bdf1', class: "co-phone-field__options" }, this.filteredCountries.map((d) => (index.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) }, index.h("img", { class: "co-phone-field__option-flag", src: `https://flagcdn.com/w40/${d.iso2.toLowerCase()}.png`, alt: d.iso2 }), index.h("span", { class: "co-phone-field__option-name" }, this.renderName(d.name)), index.h("span", { class: "co-phone-field__option-code" }, d.dialCode))))))), this.helperText && (index.h("div", { key: 'a39f039fe9ae6216e84e032c9f8ef1b18791d224', class: "co-phone-field__helper" }, this.statusIcon && (index.h("co-icon", { key: 'fd32dedcbd326365ae80f71d58ad1a7653a0474c', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), index.h("span", { key: '369daab4e46552564be76402d739f56b3f46b669', class: "co-phone-field__helper-text" }, this.helperText)))));
+        return (index.h("div", { key: 'a9c32c0be0ebd40ed647e76522424eb7e5e9aa18', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (index.h("label", { key: '37178a06aab45e8254fd0a366758e5302f2eaa46', class: "co-phone-field__label" }, this.label, index.h(requiredMark.RequiredMark, { key: '03a342ae39b5f17ba154b5c41f38c68ed3b017ba', required: this.required }))), index.h("div", { key: '1ec715b8334d174369e2cf84c1599d98f99e0a46', class: "co-phone-field__container" }, index.h("button", { key: '4570d47ae1b5f29777ef83934f29238f41f39c72', type: "button", class: "co-phone-field__selector", disabled: this.disabled, onClick: () => this.handleToggleDropdown(), "aria-expanded": String(this.isOpen), "aria-haspopup": "listbox" }, entry ? (index.h("img", { class: "co-phone-field__flag", src: `https://flagcdn.com/w40/${entry.iso2.toLowerCase()}.png`, alt: entry.iso2 })) : (index.h("co-icon", { name: "phone", size: 16 })), index.h("span", { key: 'eeea700daa0921575451e84229f756a8b07ba2bc', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), index.h("span", { key: '8a255cbcdd177d2c3df85e70cd533977401b4331', class: "co-phone-field__chevron" }, index.h("co-icon", { key: 'b7b7f8ae9ff2faa4aced5387cbdcafbdca3ab850', name: "caret-down", size: 14 }))), index.h("input", { key: '5c22124cf3b89be951b241dc5414ecfaa914f311', class: "co-phone-field__input", type: "tel", placeholder: this.placeholder, value: this.numberPart, disabled: this.disabled, onInput: (e) => this.handleNumberInput(e) })), this.isOpen && (index.h("div", { key: '58a86dd712fff37ae8a15aa814ecffe68872c546', class: "co-phone-field__dropdown", role: "listbox" }, index.h("div", { key: '7641be732c29f0cb601b05a185ea10219fc45bae', class: "co-phone-field__search" }, index.h("input", { key: 'd77b2e9acb00dcf28babbc203b65692fb5b9c8e7', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), index.h("div", { key: 'a80b7fbe6ac444f44ea802d8820b0dabff943885', class: "co-phone-field__options" }, this.filteredCountries.map((d) => (index.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) }, index.h("img", { class: "co-phone-field__option-flag", src: `https://flagcdn.com/w40/${d.iso2.toLowerCase()}.png`, alt: d.iso2 }), index.h("span", { class: "co-phone-field__option-name" }, this.renderName(d.name)), index.h("span", { class: "co-phone-field__option-code" }, d.dialCode))))))), this.helperText && (index.h("div", { key: 'c24516916b7d78d89eb18d03c8b70363567db9cf', class: "co-phone-field__helper" }, this.statusIcon && (index.h("co-icon", { key: 'e76e608653f1b45c7904bbfe0325a2813fe6aff1', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), index.h("span", { key: 'b7f14cc4ad48df862eee0ba4b45e19fe29e26baa', class: "co-phone-field__helper-text" }, this.helperText)))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {