@prolibu-suite/cobalt-core 0.9.5 → 0.10.0

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

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-DK-2Lzmf.js');
+var index = require('./index-MDAnKsze.js');
 var overlayAfterClose = require('./overlayAfterClose-BdeXrhVY.js');
 var slotContent = require('./slotContent-Bm9RcM_Q.js');
 
-const coModalCss = () => `:host{display:contents;--co-overlay-blur:8px;--co-overlay-bg:rgba(31, 28, 27, 0.35)}.co-modal__frame{display:flex;filter:drop-shadow(0 1px 2px rgba(31, 28, 27, 0.06))     drop-shadow(0 14px 34px rgba(31, 28, 27, 0.16))}.co-modal{display:flex;flex-direction:column;background:var(--co-semantic-surface-secondary);--co-modal-r:var(--co-border-radius-xl);--co-sq-tl:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 0L95 0L92.5 0L90 0L87.5 0.01L85 0.01L82.5 0.02L80 0.04L77.5 0.06L75 0.1L72.5 0.14L70 0.2L67.5 0.28L65 0.38L62.5 0.5L60 0.65L57.5 0.83L55 1.04L52.5 1.3L50 1.6L47.5 1.96L45 2.37L42.5 2.85L40 3.41L37.5 4.05L35 4.8L32.5 5.65L30 6.63L27.5 7.77L25 9.07L22.5 10.58L20 12.34L17.5 14.41L15 16.85L12.5 19.79L10 23.42L7.5 28.06L5 34.37L2.5 44.29L0 100L100 100Z%27 fill=%27%23fff%27/></svg>");--co-sq-tr:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 0L5 0L7.5 0L10 0L12.5 0.01L15 0.01L17.5 0.02L20 0.04L22.5 0.06L25 0.1L27.5 0.14L30 0.2L32.5 0.28L35 0.38L37.5 0.5L40 0.65L42.5 0.83L45 1.04L47.5 1.3L50 1.6L52.5 1.96L55 2.37L57.5 2.85L60 3.41L62.5 4.05L65 4.8L67.5 5.65L70 6.63L72.5 7.77L75 9.07L77.5 10.58L80 12.34L82.5 14.41L85 16.85L87.5 19.79L90 23.42L92.5 28.06L95 34.37L97.5 44.29L100 100L0 100Z%27 fill=%27%23fff%27/></svg>");--co-sq-bl:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 55.71L5 65.63L7.5 71.94L10 76.58L12.5 80.21L15 83.15L17.5 85.59L20 87.66L22.5 89.42L25 90.93L27.5 92.23L30 93.37L32.5 94.35L35 95.2L37.5 95.95L40 96.59L42.5 97.15L45 97.63L47.5 98.04L50 98.4L52.5 98.7L55 98.96L57.5 99.17L60 99.35L62.5 99.5L65 99.62L67.5 99.72L70 99.8L72.5 99.86L75 99.9L77.5 99.94L80 99.96L82.5 99.98L85 99.99L87.5 99.99L90 100L92.5 100L95 100L97.5 100L100 100L100 0Z%27 fill=%27%23fff%27/></svg>");--co-sq-br:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 55.71L95 65.63L92.5 71.94L90 76.58L87.5 80.21L85 83.15L82.5 85.59L80 87.66L77.5 89.42L75 90.93L72.5 92.23L70 93.37L67.5 94.35L65 95.2L62.5 95.95L60 96.59L57.5 97.15L55 97.63L52.5 98.04L50 98.4L47.5 98.7L45 98.96L42.5 99.17L40 99.35L37.5 99.5L35 99.62L32.5 99.72L30 99.8L27.5 99.86L25 99.9L22.5 99.94L20 99.96L17.5 99.98L15 99.99L12.5 99.99L10 100L7.5 100L5 100L2.5 100L0 100L0 0Z%27 fill=%27%23fff%27/></svg>");-webkit-mask:var(--co-sq-tl) top left / var(--co-modal-r) var(--co-modal-r) no-repeat,     var(--co-sq-tr) top right / var(--co-modal-r) var(--co-modal-r) no-repeat,     var(--co-sq-bl) bottom left / var(--co-modal-r) var(--co-modal-r) no-repeat,     var(--co-sq-br) bottom right / var(--co-modal-r) var(--co-modal-r) no-repeat,     linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-modal-r) + 2px) no-repeat,     linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-modal-r) + 2px) 100% no-repeat;mask:var(--co-sq-tl) top left / var(--co-modal-r) var(--co-modal-r) no-repeat,     var(--co-sq-tr) top right / var(--co-modal-r) var(--co-modal-r) no-repeat,     var(--co-sq-bl) bottom left / var(--co-modal-r) var(--co-modal-r) no-repeat,     var(--co-sq-br) bottom right / var(--co-modal-r) var(--co-modal-r) no-repeat,     linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-modal-r) + 2px) no-repeat,     linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-modal-r) + 2px) 100% no-repeat;border-radius:0;max-width:540px;width:90vw;max-height:80vh;overflow:hidden;font-family:var(--co-font-family-primary);transform:translateY(8px);opacity:0;transition:transform var(--co-motion-duration-slow) var(--co-motion-ease-out), opacity var(--co-motion-duration-slow) var(--co-motion-ease-out)}.co-modal--sm{max-width:400px}.co-modal--lg{max-width:680px}.co-modal--full{max-width:min(1400px, 95vw);width:95vw;height:92vh;max-height:92vh}.co-modal--full .co-modal__body{flex:1;min-height:0;padding:0;overflow:hidden}.co-modal--open{transform:none;opacity:1}.co-modal__header{display:flex;align-items:flex-start;gap:var(--co-spacing-md);padding:var(--co-spacing-xl) var(--co-spacing-xl) var(--co-spacing-md)}.co-modal__header-text{display:flex;flex-direction:column;gap:var(--co-spacing-sm);flex:1}.co-modal__heading{margin:0;font-size:var(--co-font-size-20);font-weight:700;color:var(--co-semantic-text-default);line-height:1.3}.co-modal__description{margin:0;font-size:var(--co-font-size-14);color:var(--co-semantic-text-secondary);line-height:1.5}.co-modal__close{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs);margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-sm);flex-shrink:0;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-modal__close:hover{background:var(--co-semantic-surface-hover)}.co-modal__body{padding:var(--co-spacing-lg) var(--co-spacing-xl);overflow-y:auto;overscroll-behavior:contain;font-size:var(--co-font-size-14);color:var(--co-semantic-text-secondary);line-height:1.6;border-top:1px solid var(--co-semantic-border-default)}.co-modal__body:empty{display:none}.co-modal__footer{display:flex;justify-content:flex-end;gap:var(--co-spacing-md);padding:var(--co-spacing-lg) var(--co-spacing-xl) var(--co-spacing-xl);border-top:1px solid var(--co-semantic-border-default);--co-button-radius:var(--co-border-radius-xs)}.co-modal__footer--empty{display:none}.co-modal--no-dividers .co-modal__footer{border-top:none}`;
+const coModalCss = () => `.co-sq-elevation{border-radius:var(--co-sq-r);corner-shape:squircle;box-shadow:var(--co-sq-shadow)}.co-sq-clip{overflow:hidden;border-radius:var(--co-sq-r);corner-shape:squircle}@supports not (corner-shape: squircle){.co-sq-elevation{box-shadow:none}.co-sq-elevation-fallback{filter:var(--co-sq-drop-shadow)}.co-sq-clip{border-radius:0;--co-sq-tl:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 0L95 0L92.5 0L90 0L87.5 0.01L85 0.01L82.5 0.02L80 0.04L77.5 0.06L75 0.1L72.5 0.14L70 0.2L67.5 0.28L65 0.38L62.5 0.5L60 0.65L57.5 0.83L55 1.04L52.5 1.3L50 1.6L47.5 1.96L45 2.37L42.5 2.85L40 3.41L37.5 4.05L35 4.8L32.5 5.65L30 6.63L27.5 7.77L25 9.07L22.5 10.58L20 12.34L17.5 14.41L15 16.85L12.5 19.79L10 23.42L7.5 28.06L5 34.37L2.5 44.29L0 100L100 100Z%27 fill=%27%23fff%27/></svg>");--co-sq-tr:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 0L5 0L7.5 0L10 0L12.5 0.01L15 0.01L17.5 0.02L20 0.04L22.5 0.06L25 0.1L27.5 0.14L30 0.2L32.5 0.28L35 0.38L37.5 0.5L40 0.65L42.5 0.83L45 1.04L47.5 1.3L50 1.6L52.5 1.96L55 2.37L57.5 2.85L60 3.41L62.5 4.05L65 4.8L67.5 5.65L70 6.63L72.5 7.77L75 9.07L77.5 10.58L80 12.34L82.5 14.41L85 16.85L87.5 19.79L90 23.42L92.5 28.06L95 34.37L97.5 44.29L100 100L0 100Z%27 fill=%27%23fff%27/></svg>");--co-sq-bl:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 55.71L5 65.63L7.5 71.94L10 76.58L12.5 80.21L15 83.15L17.5 85.59L20 87.66L22.5 89.42L25 90.93L27.5 92.23L30 93.37L32.5 94.35L35 95.2L37.5 95.95L40 96.59L42.5 97.15L45 97.63L47.5 98.04L50 98.4L52.5 98.7L55 98.96L57.5 99.17L60 99.35L62.5 99.5L65 99.62L67.5 99.72L70 99.8L72.5 99.86L75 99.9L77.5 99.94L80 99.96L82.5 99.98L85 99.99L87.5 99.99L90 100L92.5 100L95 100L97.5 100L100 100L100 0Z%27 fill=%27%23fff%27/></svg>");--co-sq-br:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 55.71L95 65.63L92.5 71.94L90 76.58L87.5 80.21L85 83.15L82.5 85.59L80 87.66L77.5 89.42L75 90.93L72.5 92.23L70 93.37L67.5 94.35L65 95.2L62.5 95.95L60 96.59L57.5 97.15L55 97.63L52.5 98.04L50 98.4L47.5 98.7L45 98.96L42.5 99.17L40 99.35L37.5 99.5L35 99.62L32.5 99.72L30 99.8L27.5 99.86L25 99.9L22.5 99.94L20 99.96L17.5 99.98L15 99.99L12.5 99.99L10 100L7.5 100L5 100L2.5 100L0 100L0 0Z%27 fill=%27%23fff%27/></svg>");-webkit-mask:var(--co-sq-tl) top left / var(--co-sq-r) var(--co-sq-r) no-repeat,       var(--co-sq-tr) top right / var(--co-sq-r) var(--co-sq-r) no-repeat,       var(--co-sq-bl) bottom left / var(--co-sq-r) var(--co-sq-r) no-repeat,       var(--co-sq-br) bottom right / var(--co-sq-r) var(--co-sq-r) no-repeat,       linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-sq-r) + 2px) no-repeat,       linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-sq-r) + 2px) 100% no-repeat;mask:var(--co-sq-tl) top left / var(--co-sq-r) var(--co-sq-r) no-repeat,       var(--co-sq-tr) top right / var(--co-sq-r) var(--co-sq-r) no-repeat,       var(--co-sq-bl) bottom left / var(--co-sq-r) var(--co-sq-r) no-repeat,       var(--co-sq-br) bottom right / var(--co-sq-r) var(--co-sq-r) no-repeat,       linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-sq-r) + 2px) no-repeat,       linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-sq-r) + 2px) 100% no-repeat}}:host{display:contents;--co-overlay-blur:8px;--co-overlay-bg:rgba(31, 28, 27, 0.35)}.co-modal__frame{display:flex;contain:layout;--co-sq-drop-shadow:drop-shadow(0 1px 2px rgba(31, 28, 27, 0.06)) drop-shadow(0 14px 34px rgba(31, 28, 27, 0.16))}.co-modal{display:flex;flex-direction:column;background:var(--co-semantic-surface-secondary);--co-modal-r:var(--co-border-radius-xl);--co-sq-r:var(--co-modal-r);--co-sq-shadow:0 1px 4px rgba(31, 28, 27, 0.06), 0 14px 68px rgba(31, 28, 27, 0.16);max-width:540px;width:90vw;max-height:80vh;font-family:var(--co-font-family-primary);transform:scale(0.96);opacity:0;transition:transform var(--co-motion-duration-fast) var(--co-motion-ease-in), opacity var(--co-motion-duration-fast) var(--co-motion-ease-in)}.co-modal--sm{max-width:400px}.co-modal--lg{max-width:680px}.co-modal--full{max-width:min(1400px, 95vw);width:95vw;height:92vh;max-height:92vh}.co-modal--full .co-modal__body{flex:1;min-height:0;padding:0;overflow:hidden}.co-modal--open{transform:scale(1);opacity:1;transition:transform var(--co-motion-duration-base) var(--co-motion-ease-out), opacity var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-modal__header{display:flex;align-items:flex-start;gap:var(--co-spacing-md);padding:var(--co-spacing-xl) var(--co-spacing-xl) var(--co-spacing-md)}.co-modal__header-text{display:flex;flex-direction:column;gap:var(--co-spacing-sm);flex:1}.co-modal__heading{margin:0;font-size:var(--co-font-size-20);font-weight:700;color:var(--co-semantic-text-default);line-height:1.3}.co-modal__description{margin:0;font-size:var(--co-font-size-14);color:var(--co-semantic-text-secondary);line-height:1.5}.co-modal__close{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs);margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-sm);flex-shrink:0;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-modal__close:hover{background:var(--co-semantic-surface-hover)}.co-modal__body{padding:var(--co-spacing-lg) var(--co-spacing-xl);overflow-y:auto;overscroll-behavior:contain;font-size:var(--co-font-size-14);color:var(--co-semantic-text-secondary);line-height:1.6;border-top:1px solid var(--co-semantic-border-default)}.co-modal__body:empty{display:none}.co-modal__footer{display:flex;justify-content:flex-end;gap:var(--co-spacing-md);padding:var(--co-spacing-lg) var(--co-spacing-xl) var(--co-spacing-xl);border-top:1px solid var(--co-semantic-border-default);--co-button-radius:var(--co-border-radius-xs)}.co-modal__footer--empty{display:none}.co-modal--no-dividers .co-modal__footer{border-top:none}`;
 
 const CoModal = class {
     constructor(hostRef) {
@@ -73,14 +73,16 @@ const CoModal = class {
             this.coClose.emit();
     }
     render() {
-        return (index.h("co-overlay", { key: 'd8a169309bd13e529bbe1f6363f7d5f261aab8eb', open: this.open, onCoClose: this.handleOverlayClick }, index.h("div", { key: 'e9045bb14dcba0d2eba7d985fe1b79723b21ba6c', class: "co-modal__frame" }, index.h("div", { key: '1ed0eede2a8b8408112c32253b8046a6a9761dae', class: {
+        return (index.h("co-overlay", { key: '40c8e5bd7300ba5b9b9dbe5eed4d3f369f15002d', open: this.open, onCoClose: this.handleOverlayClick }, index.h("div", { key: '466391dc8b03381f4a00f4e95605c1c22d2eb052', class: "co-modal__frame co-sq-elevation-fallback" }, index.h("div", { key: 'af09fd79f4c716cfc76eda669ccab0da258d6dde', class: {
                 'co-modal': true,
+                'co-sq-clip': true,
+                'co-sq-elevation': true,
                 'co-modal--open': this.open,
                 'co-modal--sm': this.size === 'sm',
                 'co-modal--lg': this.size === 'lg',
                 'co-modal--full': this.size === 'full',
                 'co-modal--no-dividers': this.noDividers,
-            }, part: "modal", ref: (el) => (this.modalEl = el), role: "dialog", "aria-modal": "true", "aria-labelledby": this.heading ? 'modal-heading' : undefined, onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, index.h("div", { key: '7208dd4502f2f001a3b4b0d187de7b244e29b9d4', class: "co-modal__header", part: "header" }, index.h("div", { key: '81dad02cdce3b324e0609b5863c0b17649224899', class: "co-modal__header-text" }, index.h("h2", { key: '0e94f6295c645ba100c4b762d18e5171d32d8c8a', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (index.h("p", { key: '7a6e9b0f9a2c4a0d8bd5a75050b8644f0802e4b0', class: "co-modal__description" }, this.description))), this.closable && (index.h("button", { key: 'b22682124517861d9f4ba7a24f697460ef03573d', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, index.h("co-icon", { key: 'c1c9152d1d37396428f9990c96128a93f60c78df', name: "x", size: 20 })))), !this.noDividers && (index.h("div", { key: '95073452c4e27974f82c0b0c815e4b0dc620869a', class: "co-modal__body", part: "body" }, index.h("slot", { key: '6f4e9ac5e29347de9116e4654ab94929c6d75d0e' }))), index.h("div", { key: '13cb1e194dd20201b9560edbe6891dd8982073b8', class: { 'co-modal__footer': true, 'co-modal__footer--empty': !this.hasFooter }, part: "footer" }, index.h("slot", { key: '73e1c6cfb288fa0debfa3064434fb9b44d6823ce', name: "footer", onSlotchange: this.handleFooterSlotChange }))))));
+            }, part: "modal", ref: (el) => (this.modalEl = el), role: "dialog", "aria-modal": "true", "aria-labelledby": this.heading ? 'modal-heading' : undefined, onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, index.h("div", { key: '5149098013107e3dab0149131f4110e2f039d6b6', class: "co-modal__header", part: "header" }, index.h("div", { key: '2c9c7d6378b7bb536f9c4ade2af7643b4d1e8e9f', class: "co-modal__header-text" }, index.h("h2", { key: '36f1000d5795862fe319dda98c40b68578b794df', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (index.h("p", { key: 'ac1e07eb244b986b29763eecfbafcddab36626da', class: "co-modal__description" }, this.description))), this.closable && (index.h("button", { key: '5727e992fef9c2e4ab7e53624734d71de8ef28fe', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, index.h("co-icon", { key: 'ad217f504bccd348576cb2badb63786179d70122', name: "x", size: 20 })))), !this.noDividers && (index.h("div", { key: '7a1c7801132cb4470914167acddafda8f789ec92', class: "co-modal__body", part: "body" }, index.h("slot", { key: 'd00f9a7566eb30a73a40539c42f55061e1c27e12' }))), index.h("div", { key: '461f22cf012d9ea515863ae249ed257337c17bff', class: { 'co-modal__footer': true, 'co-modal__footer--empty': !this.hasFooter }, part: "footer" }, index.h("slot", { key: '641074e1b09f74d5bb817fe60ea97953fa1f6b99', name: "footer", onSlotchange: this.handleFooterSlotChange }))))));
     }
 };
 CoModal.style = coModalCss();

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-DK-2Lzmf.js');
+var index = require('./index-MDAnKsze.js');
 
-const coNavbarCss = () => `:host{display:block}.co-navbar{display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--co-font-family-primary);box-sizing:border-box;background:var(--co-navbar-bg);color:var(--co-navbar-color)}.co-navbar--default{--co-navbar-bg:transparent}.co-navbar--filled{--co-navbar-bg:var(--co-semantic-surface-primary, #1f1c1b);--co-navbar-color:var(--co-semantic-on-primary, #fff)}.co-navbar--bordered{--co-navbar-bg:var(--co-semantic-surface-page, #fff);--co-navbar-color:inherit;border-bottom:1px solid var(--co-semantic-border-subtle, rgba(31,28,27,0.08))}.co-navbar--dark{--co-navbar-bg:var(--co-theme-navbar-bg, var(--co-color-base-negro, #1F1C1B));--co-navbar-color:var(--co-theme-on-navbar, #fff);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);--co-icon-button-bg:var(--co-theme-on-navbar-surface, var(--co-color-opacity-blanco-16, rgba(255,255,255,0.16)));--co-icon-button-color:var(--co-theme-on-navbar, #fff);--co-icon-button-border:transparent}.co-navbar--rounded{border-radius:var(--co-border-radius-sm, 12px);overflow:hidden}.co-navbar--sm{min-height:40px;padding:0 var(--co-navbar-padding-x, var(--co-spacing-md, 12px));gap:var(--co-spacing-sm2, 8px);font-size:var(--co-font-size-12, 12px)}.co-navbar--md{min-height:48px;padding:0 var(--co-navbar-padding-x, var(--co-spacing-lg, 16px));gap:var(--co-spacing-md, 12px);font-size:var(--co-font-size-14, 14px)}.co-navbar--lg{min-height:56px;padding:0     var(--co-navbar-padding-x-end, var(--co-spacing-2xl, 24px))     0     var(--co-navbar-padding-x-start, var(--co-spacing-md, 12px));gap:var(--co-spacing-sm2, 8px);font-size:var(--co-font-size-14, 14px)}::slotted([slot-spacer]),::slotted(.co-spacer){flex:1}`;
+const coNavbarCss = () => `:host{display:block}.co-navbar{display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--co-font-family-primary);box-sizing:border-box;background:var(--co-navbar-bg);color:var(--co-navbar-color)}.co-navbar--default{--co-navbar-bg:transparent}.co-navbar--filled{--co-navbar-bg:var(--co-semantic-surface-primary, #1f1c1b);--co-navbar-color:var(--co-semantic-on-primary, #fff)}.co-navbar--bordered{--co-navbar-bg:var(--co-semantic-surface-page, #fff);--co-navbar-color:inherit;border-bottom:1px solid var(--co-semantic-border-subtle, rgba(31,28,27,0.08))}.co-navbar--dark{--co-navbar-bg:var(--co-theme-navbar-bg, var(--co-color-base-negro, #1F1C1B));--co-navbar-color:var(--co-theme-on-navbar, #fff);--co-icon-button-bg:var(--co-theme-on-navbar-surface, var(--co-color-opacity-blanco-16, rgba(255,255,255,0.16)));--co-icon-button-color:var(--co-theme-on-navbar, #fff);--co-icon-button-border:transparent}.co-navbar--rounded{border-radius:var(--co-border-radius-sm, 12px);overflow:hidden}.co-navbar--sm{min-height:40px;padding:0 var(--co-navbar-padding-x, var(--co-spacing-md, 12px));gap:var(--co-spacing-sm2, 8px);font-size:var(--co-font-size-12, 12px)}.co-navbar--md{min-height:48px;padding:0 var(--co-navbar-padding-x, var(--co-spacing-lg, 16px));gap:var(--co-spacing-md, 12px);font-size:var(--co-font-size-14, 14px)}.co-navbar--lg{min-height:56px;padding:0     var(--co-navbar-padding-x-end, var(--co-spacing-2xl, 24px))     0     var(--co-navbar-padding-x-start, var(--co-spacing-md, 12px));gap:var(--co-spacing-sm2, 8px);font-size:var(--co-font-size-14, 14px)}::slotted([slot-spacer]),::slotted(.co-spacer){flex:1}`;
 
 const CoNavbar = class {
     constructor(hostRef) {
@@ -15,12 +15,12 @@ const CoNavbar = class {
         this.rounded = false;
     }
     render() {
-        return (index.h("div", { key: '9db66169484ffc0954c76c21ca395bafe6a5c749', class: {
+        return (index.h("div", { key: '2bfd8f245fd8e93a2d085c5cecbe729a32f10754', class: {
                 'co-navbar': true,
                 [`co-navbar--${this.variant}`]: true,
                 [`co-navbar--${this.size}`]: true,
                 'co-navbar--rounded': this.rounded,
-            }, part: "navbar", role: "toolbar" }, index.h("slot", { key: 'dbf92282c2698bc55b7c7b0ce6bcc49724f636d6' })));
+            }, part: "navbar", role: "toolbar" }, index.h("slot", { key: 'a07380f56382e9b96b335ab9169a16c8ed9e042e' })));
     }
 };
 CoNavbar.style = coNavbarCss();

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: '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) && (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: '972f6a811230bc8e919bb13d82b00b697ef849d3', class: "co-number-field__labels" }, this.label && index.h("label", { key: 'cca4de1e86a0066464b6dc71289ee174cc29e229', class: "co-number-field__label" }, this.label, index.h(requiredMark.RequiredMark, { key: '80a8266109c1cede57e32c706fb4c0e47eb33249', required: this.required })), this.secondaryLabel && index.h("span", { key: '082db322206fedfbcd2f9a6c0fd4c439a0a96fd6', class: "co-number-field__secondary-label" }, this.secondaryLabel))), index.h("div", { key: '88fba5f119dab3a4feb2ad2380cd5023d760e7e9', class: "co-number-field__row", part: "row" }, !this.hideControls && (index.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" }, index.h("co-icon", { key: '4a562d696da337feeb4bb60b018b4a23024163ad', name: "minus", size: 16 }))), index.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 && (index.h("span", { key: 'b10fe23b0e16df1a9abc121923175aef3568d987', class: "co-number-field__affix", "aria-hidden": "true" }, this.affixText)), this.clearable && !this.isEmpty && !this.disabled && (index.h("button", { key: 'c963c856ea592a259e506ce9cc37948b105e28d3', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, index.h("co-icon", { key: 'd88127405a552237b103f794f449be98840254d5', name: "x-circle", size: 16, weight: "fill" }))), index.h("slot", { key: '0809f93bae05abd88549ffc707d3c4e9126f6d96', name: "suffix" }), !this.hideControls && (index.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" }, index.h("co-icon", { key: 'f346237b4df54f3182b1702b953a17e07cb0a1ca', name: "plus", size: 16 })))), this.helperText && (index.h("div", { key: 'b9771e896812e73ba940d49419ec2eee3ba28ba3', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && index.h("co-icon", { key: '08fa68bb3f9ad4efab6722d59c5df480a0454f02', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), index.h("span", { key: 'f8dd3318d47684c9c5ff0d761155174fa14d98aa', 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: '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 }, index.h("slot", { key: 'fc220441149e20eb8b2ca1dcb7131d77e25dcdb3' })));
     }
     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: '305f42c88d10f238351f362b72283abe82eaeb20', class: "co-page-header", part: "page-header" }, index.h("div", { key: '10185fe127049bfece585c59f92824888113861e', class: "co-page-header__left" }, this.icon && (index.h("span", { key: '017bc4f2aed8d05999c581ce0d7a4797aa84eff6', class: "co-page-header__icon" }, index.h("co-icon", { key: '7d5863437875aa09ad3bbe9e12c0b5d5c9f5c0c7', name: this.icon, size: 24 }))), index.h("span", { key: 'e62ead8cb061045d8995689dce3009e9843e3997', class: "co-page-header__title" }, index.h("slot", { key: '9e1d01a94942daeeb1c56f1d0f05534b45125422' }, this.heading))), index.h("div", { key: '5a2dd08e5b11ab33e64ddb581196d8535deb0925', class: "co-page-header__actions" }, index.h("slot", { key: '7fd3a5ea06593c9208a59ba2812bb827f1d39815', 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: '44113c6d2a4845b96b185bc1a291335ad099491b', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (index.h("label", { key: 'aee2eced519f996ebf8941210e5151ebe32429d3', class: "co-phone-field__label" }, this.label, index.h(requiredMark.RequiredMark, { key: '85b8d50b8062d0041b0f416beb7a140d29d06b1f', required: this.required }))), index.h("div", { key: '381313d069536477ded093cd236ff740dc534ae4', class: "co-phone-field__container" }, index.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 ? (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: 'd8ba9bbaae902853d97c37892ea2094a3a05c2ed', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), index.h("span", { key: '065c2daf2b277fd870204c989b3eb359aa68dec4', class: "co-phone-field__chevron" }, index.h("co-icon", { key: '53761d275d9f98010c197e7d8b8f5b20abf753fd', name: "caret-down", size: 14 }))), index.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 && (index.h("div", { key: '6e736fb24707feb8faf373a403b192670698a043', class: "co-phone-field__dropdown", role: "listbox" }, index.h("div", { key: 'f0750d83d3da8cebc3c1b39d21a35b31bc17bd4a', class: "co-phone-field__search" }, index.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 })), index.h("div", { key: '5960b2979fbedf66ea197ff7f37093b6240242bc', 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: 'fa9e15ba4f08abf2caff8b1b196ce25ce2e89bb9', class: "co-phone-field__helper" }, this.statusIcon && (index.h("co-icon", { key: '122a32febae2d6f86e32d8b3d1f2ec2df9e573c7', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), index.h("span", { key: '6117ecd58a0c2ddefca94237f7c5d815fd5c3c79', class: "co-phone-field__helper-text" }, this.helperText)))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {