@prolibu-suite/cobalt-core 0.9.6 → 0.10.1

package/dist/collection/components/co-modal/co-modal.css

@@ -1,60 +1,128 @@
+/* squircle-surface.css — receta ÚNICA de superficie squircle (co-app-shell,
+   co-drawer, co-modal). Se @import-a desde el CSS del componente como PRIMER
+   statement (Stencil inlinea @import relativos; precedente co-select.css:3) y
+   el tsx agrega las clases. Spec: prolibu-front-v2/docs/superpowers/specs/
+   2026-09-02-suite-v2-intel-perf-remediation-design.md §7 (E1, E5).
+
+   Variables que declara CADA consumidor sobre el elemento (o un ancestro):
+     --co-sq-r            radio de esquina
+     --co-sq-shadow       box-shadow (rama Chromium ≥139, sigue el corner-shape)
+     --co-sq-drop-shadow  filter drop-shadow (fallback Safari/Firefox)
+   Conversión entre ambas: drop-shadow(x y σ) ≡ box-shadow x y 2σ.
+
+   Clases:
+     .co-sq-elevation           sombra que sigue la silueta squircle
+     .co-sq-clip                recorte superelíptico SIN máscara
+     .co-sq-elevation-fallback  SIEMPRE en un ancestro del .co-sq-clip: en el
+                                fallback la sombra es un `filter`, y `filter` se
+                                aplica antes que `mask` en el mismo elemento →
+                                la máscara la recortaría.
+
+   Reglas: (1) el componente NO redeclara border-radius / overflow / filter /
+   mask / box-shadow en esos elementos (una redeclaración posterior le gana al
+   partial por cascada; guard squircle-surface-guard.test.ts); (2)
+   .co-sq-elevation y .co-sq-clip pueden ir en el MISMO elemento (co-modal) o
+   en padre/hijo (shell, drawer); (3) `contain: layout` NO va acá: lo declara
+   cada componente donde E2/E20 lo piden.
+
+   Las 4 rutas SVG son una superelipse de exponente 4 = `corner-shape: squircle`
+   (superellipse(2)): misma silueta, error máx 1e-4 — a 14 px de radio la
+   diferencia con un círculo es ≤1.87 px en la punta. Sin `+2px` anti-costura en
+   la rama Chromium: sin máscara no hay costura posible (historia del hack: nota
+   de memoria cobalt-squircle-mask-seam). */
+
+.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;
+}
+
+/* F2 (E1): Safari/Firefox = píxel-idéntico a la receta anterior (filter
+   drop-shadow en el ancestro + máscara de 6 capas en el clip). */
+@supports not (corner-shape: squircle) {
+  .co-sq-elevation {
+    box-shadow: none;
+  }
+
+  .co-sq-elevation-fallback {
+    filter: var(--co-sq-drop-shadow);
+  }
+
+  /* Declarado DESPUÉS de .co-sq-elevation a propósito: cuando ambas clases van
+     en el mismo elemento (co-modal) gana el radius 0 y la máscara define la
+     forma. 4 esquinas + cruz de 2 barras (H full-width, V full-height); las
+     barras van `calc(... + 2px)` para solapar cada esquina ~1px y evitar la
+     costura sub-píxel que flickeaba con el zoom. */
+  .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;
   /* Frosted-glass backdrop for modals — stronger blur than the overlay default
-     so the page behind reads as glass, while the panel itself stays solid. */
+     so the page behind reads as glass, while the panel itself stays solid.
+     (Scrim sin cambios: E3.) */
   --co-overlay-blur: 8px;
   --co-overlay-bg: rgba(31, 28, 27, 0.35);
 }
 
-/* Frame: carries the squircle-following soft drop-shadow. A box-shadow on the
-   masked panel would be clipped away by the mask, so the elevation lives here
-   (drop-shadow respects the child's mask silhouette). co-overlay centers it. */
+/* Frame: co-overlay lo centra. En el fallback (Safari/Firefox) lleva el
+   drop-shadow (.co-sq-elevation-fallback, tsx); en Chromium ≥139 la sombra va
+   en .co-modal como box-shadow, así acompaña el scale-in 0.96→1 exactamente
+   como el drop-shadow acompañaba el alfa del hijo. `contain: layout` preserva
+   el containing block que el filter le daba a un `position: fixed` slotteado
+   (E20, extensión de E2) y saca al frame del rol de render surface. */
 .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));
+  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);
-  /* Squircle geometry — fixed-radius 4-corner mask (smooth continuous corners
-     that stay constant at any modal size). Radius knob: --co-modal-r.
-     The cross bars are `calc(... + 2px)` so they OVERLAP each corner ~1px: at
-     exact abutment the fractional-pixel rounding leaves a <1px transparent SEAM
-     at the bar↔corner edge that reads as a faint line flickering with zoom (same
-     fix as co-app-shell .main__card). The overlap is inside the corners' opaque
-     area, so the rounded shape is unchanged. */
+  /* Squircle + sombra: .co-sq-clip y .co-sq-elevation en ESTE elemento
+     (partial). No redeclarar border-radius / overflow / mask / box-shadow acá.
+     Radius knob: --co-modal-r. */
   --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; /* the mask defines the (smooth) shape */
+  --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;
-  overflow: hidden;
   font-family: var(--co-font-family-primary);
-  transform: translateY(8px);
+  transform: scale(0.96);
   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);
+  /* Asimetría tdev: esta transición es la de SALIDA (el estado base es el destino
+     del cierre) — más corta y ease-in. La de entrada vive en --open. */
+  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; }
@@ -78,8 +146,9 @@
 }
 
 .co-modal--open {
-  transform: none;
+  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);
 }
 
 /* ─── Header ────────────────────────────────────────────────── */
@@ -165,3 +234,9 @@
 .co-modal--no-dividers .co-modal__footer {
   border-top: none;
 }
+
+/* header-divider="false": the body runs straight under the heading. */
+.co-modal--no-header-divider .co-modal__body {
+  border-top: none;
+  padding-top: 0;
+}

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

@@ -3,7 +3,14 @@ import { afterEventFor } from "../co-overlay/overlayAfterClose";
 import { slotHasContent } from "../../utils/slotContent";
 /**
  * @slot        - Modal body content
+ * @slot header-leading - Control before the heading (e.g. a back arrow on a
+ *                        second screen of the same modal)
+ * @slot header-actions - Controls at the right end of the header (e.g. a settings
+ *                        icon-button), before the close button
  * @slot footer - Footer with action buttons
+ * @part modal | header | header-text | heading | description | body | footer -
+ *       layout/typography hooks for a consumer that must match a specific spec
+ *       (paddings, heading weight); colors stay on semantic tokens
  */
 export class CoModal {
     constructor() {
@@ -36,6 +43,9 @@ export class CoModal {
         this.size = 'md';
         /** Hide body section and all border dividers (compact confirm dialogs) */
         this.noDividers = false;
+        /** Hairline between header and body. `false` lets the body run straight
+         *  under the heading (Figma modals whose first row is a segmented control). */
+        this.headerDivider = true;
         /* `:empty` can't see across a <slot>, so slotted presence is tracked in JS */
         this.hasFooter = false;
         this.handleFooterSlotChange = (e) => {
@@ -68,14 +78,17 @@ export class CoModal {
             this.coClose.emit();
     }
     render() {
-        return (h("co-overlay", { key: 'd8a169309bd13e529bbe1f6363f7d5f261aab8eb', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: 'e9045bb14dcba0d2eba7d985fe1b79723b21ba6c', class: "co-modal__frame" }, h("div", { key: '1ed0eede2a8b8408112c32253b8046a6a9761dae', class: {
+        return (h("co-overlay", { key: '9b796364a697af4d4a0ede50e5dd5516ccaa299f', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: 'bea863aedb405cdc492277add25e2c08ea7ef258', class: "co-modal__frame co-sq-elevation-fallback" }, h("div", { key: '05f9e86f7a813243913f60c6a042fb93ed65a463', 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 }, h("div", { key: '7208dd4502f2f001a3b4b0d187de7b244e29b9d4', class: "co-modal__header", part: "header" }, h("div", { key: '81dad02cdce3b324e0609b5863c0b17649224899', class: "co-modal__header-text" }, h("h2", { key: '0e94f6295c645ba100c4b762d18e5171d32d8c8a', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: '7a6e9b0f9a2c4a0d8bd5a75050b8644f0802e4b0', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: 'b22682124517861d9f4ba7a24f697460ef03573d', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'c1c9152d1d37396428f9990c96128a93f60c78df', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: '95073452c4e27974f82c0b0c815e4b0dc620869a', class: "co-modal__body", part: "body" }, h("slot", { key: '6f4e9ac5e29347de9116e4654ab94929c6d75d0e' }))), h("div", { key: '13cb1e194dd20201b9560edbe6891dd8982073b8', class: { 'co-modal__footer': true, 'co-modal__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { key: '73e1c6cfb288fa0debfa3064434fb9b44d6823ce', name: "footer", onSlotchange: this.handleFooterSlotChange }))))));
+                'co-modal--no-header-divider': !this.headerDivider,
+            }, 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 }, h("div", { key: '8ecd9f7f4413339e484710e2abef1c21fc7f25d0', class: "co-modal__header", part: "header" }, h("slot", { key: '09df61b3aac8a26e0eb85a6a6aa48f9a7f547dbf', name: "header-leading" }), h("div", { key: '8e9a55561a1b5615f77eb3eb96284ddc68eddbc3', class: "co-modal__header-text", part: "header-text" }, h("h2", { key: '65c083247543448d9f527592cd8614a4c713cf4c', class: "co-modal__heading", part: "heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: 'c871aa6549cf56265a02048ca18f736d92d1a482', class: "co-modal__description", part: "description" }, this.description))), h("slot", { key: '106a5be71c8c03736313c1084c61d3b836ebb495', name: "header-actions" }), this.closable && (h("button", { key: 'a0df67cd09e5f414c58f9f67f6a92c58b9f4773b', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'e766981fff30de0c79599756dde74c5981d5c9fd', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: '355e455c19cbc4a0783c0e0c2689265e6f599484', class: "co-modal__body", part: "body" }, h("slot", { key: 'fa6d3310464ff33de17618561182736bc6cef0e5' }))), h("div", { key: '43b89751fac3fd1b707a284d260e91dd7d7ea8a6', class: { 'co-modal__footer': true, 'co-modal__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { key: 'e9821b0712a6903c923f9bb50393e4b85545c211', name: "footer", onSlotchange: this.handleFooterSlotChange }))))));
     }
     static get is() { return "co-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -249,6 +262,26 @@ export class CoModal {
                 "reflect": true,
                 "attribute": "no-dividers",
                 "defaultValue": "false"
+            },
+            "headerDivider": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hairline between header and body. `false` lets the body run straight\nunder the heading (Figma modals whose first row is a segmented control)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header-divider",
+                "defaultValue": "true"
             }
         };
     }

package/dist/collection/components/co-navbar/co-navbar.css

@@ -32,8 +32,10 @@
 .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);
+  /* Sin backdrop-filter (D3): --co-navbar-bg es OPACO (los hosts pasan un hex
+     sólido) → blur(40px) no esmerilaba nada y costaba un render surface del
+     ancho del viewport en cada frame. Un host translúcido que quiera frost lo
+     agrega él vía ::part(navbar). */
   /* Override icon-button outlined variant for dark context */
   --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);

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

@@ -14,12 +14,12 @@ export class CoNavbar {
         this.rounded = false;
     }
     render() {
-        return (h("div", { key: '9db66169484ffc0954c76c21ca395bafe6a5c749', class: {
+        return (h("div", { key: '9899b395fdf793bf9b7e47509b81eb559aac0b56', class: {
                 'co-navbar': true,
                 [`co-navbar--${this.variant}`]: true,
                 [`co-navbar--${this.size}`]: true,
                 'co-navbar--rounded': this.rounded,
-            }, part: "navbar", role: "toolbar" }, h("slot", { key: 'dbf92282c2698bc55b7c7b0ce6bcc49724f636d6' })));
+            }, part: "navbar", role: "toolbar" }, h("slot", { key: 'c863bcf8dc9eddab771922a81e11c1966bfe8d2e' })));
     }
     static get is() { return "co-navbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -177,6 +177,28 @@
   user-select: none;
 }
 
+/* Control slotteado a la derecha (toggle de unidad, etc.): flex-shrink 0 y un
+   respiro contra el borde de la caja; verticalmente lo centra el row. */
+::slotted([slot='suffix']) {
+  flex-shrink: 0;
+  margin-right: var(--co-spacing-xxs);
+}
+
+/* hide-controls: campo numérico plano (precio, tasa) — sin ± el número se
+   alinea a la derecha como en cualquier columna numérica y el padding lateral
+   es el de co-input. */
+: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;

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

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