@prolibu-suite/cobalt-core 0.9.6 → 0.10.0

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

@@ -70,21 +70,21 @@ export class CoListItem {
         requestAnimationFrame(this.measureTruncation);
     }
     render() {
-        return (h("div", { key: '4f75f2a1f42dea993a9b6fa7fe922bed8cbac7e5', class: {
+        return (h("div", { key: '23cfee682f0e7d3a22ca793b9e6b29eb89cf8ca1', class: {
                 'co-list-item': true,
                 'co-list-item--selected': this.selected,
                 'co-list-item--disabled': this.disabled,
                 'co-list-item--dense': this.dense,
                 'co-list-item--has-description': !!this.description,
-            }, part: "item", role: "option", tabindex: this.disabled ? -1 : 0, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'f4da4a9cfc3685cd3124c95308857353729fe71e', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: '640630cb8639d9b897734ceb4fa91b6eddd2a432', name: this.icon, size: 18 }), h("slot", { key: '300cfc7354b11bce7c94a349d2ec0c6d58bc00da', name: "prefix" })), h("div", { key: '7278c5c18ce4f390e31fc2af8f360de91c2ca644', class: "co-list-item__content" }, this.label && (h("co-tooltip", { key: 'fb1a48e2364bd34d1940cddda3402c8a114720cc', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, h("span", { key: '4079eb57702d8faa93f6dab67ddf3024ba2fea15', class: "co-list-item__label", ref: (el) => {
+            }, part: "item", role: "option", tabindex: this.disabled ? -1 : 0, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'a0f3c86656e408225fdbfeb610a088f8adebfa55', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: '18be77a790afd7b83f8ad07c9af5925abed4f23b', name: this.icon, size: 18 }), h("slot", { key: '2e198e4c541e1c86c6c266cf93408e195c851428', name: "prefix" })), h("div", { key: 'cbb5768d0a7bb287dbab1e013ae5e03ff2194a1f', class: "co-list-item__content" }, this.label && (h("co-tooltip", { key: '79730131bb1a74660d6dba076b622358b7c1ee15', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, h("span", { key: '778b003dc31bc196a770a7dc6c4eebe649faf8c3', class: "co-list-item__label", ref: (el) => {
                 this.labelEl = el;
                 if (el && this.ro)
                     this.ro.observe(el);
-            } }, this.label))), this.description && (h("co-tooltip", { key: 'b40df7e5bec902fad45f79e2984b226302b68d5f', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, h("span", { key: '2af014c92bbf2d596f7fd78d73309f6cb7813047', class: "co-list-item__description", ref: (el) => {
+            } }, this.label))), this.description && (h("co-tooltip", { key: '56c81304ceec7039a659c1e2443a17df48bf88eb', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, h("span", { key: '5f1f870da25778bfbe801cfb769319cff71fac75', class: "co-list-item__description", ref: (el) => {
                 this.descEl = el;
                 if (el && this.ro)
                     this.ro.observe(el);
-            } }, this.description))), h("slot", { key: '1066c2e56c9855d77e28d891b77602988e70aba4' })), h("span", { key: 'c6413614311416a7d06681c7d381a004dfd9891b', class: "co-list-item__suffix" }, h("slot", { key: 'aff9146f80c9b61c42e1da3926b7b6b8a7eaf1f7', name: "suffix" }))));
+            } }, this.description))), h("slot", { key: '136ec5db83f4d2a77126d734ecac511c92b36d91' })), h("span", { key: '759b18ea3bedcb7b7b8023cb6ca1444fbacb5748', class: "co-list-item__suffix" }, h("slot", { key: 'c6519a183c1b7cdb84e4d822a5e2fa523a99ab52', name: "suffix" }))));
     }
     static get is() { return "co-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-media-thumb/co-media-thumb.js

@@ -23,13 +23,13 @@ export class CoMediaThumb {
     }
     render() {
         var _a;
-        return (h("div", { key: '12fa10a5ad7d6148b1dfbbe0c0e176770c87674e', class: {
+        return (h("div", { key: 'acd021eb5ebcc987eeb1528b874fdbdfa48f8b52', class: {
                 'co-media-thumb': true,
                 'co-media-thumb--video': this.video,
             }, part: "thumb", style: {
                 height: this.toCss(this.height),
                 borderRadius: `${this.radius}px`,
-            } }, this.src ? (h("img", { class: "co-media-thumb__img", src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : '', part: "img" })) : (h("slot", null)), this.video && (h("div", { key: 'd361913b211494e36be8f84eadd3e79087c97453', class: "co-media-thumb__scrim", part: "scrim" }, h("div", { key: 'ca2ee329750c62c701026b9e42e9983ca9dd3c11', class: "co-media-thumb__play", part: "play" }, h("svg", { key: 'e6b20bcfd2bd8862ab4bccf71da18222534650dd', class: "co-media-thumb__play-icon", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", "aria-hidden": "true" }, h("path", { key: '8a197ade5ab1afc39e4ffcd19b44b44933efffa6', d: "M2 2l12 7-12 7z", fill: "var(--co-color-base-negro, #1f1c1b)" })))))));
+            } }, this.src ? (h("img", { class: "co-media-thumb__img", src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : '', part: "img" })) : (h("slot", null)), this.video && (h("div", { key: 'a6ec84bed9d75673b7b917b2cb513f01545d5bf2', class: "co-media-thumb__scrim", part: "scrim" }, h("div", { key: '9ce636bf0a3d9e53eb271803fc0bbd60f4314989', class: "co-media-thumb__play", part: "play" }, h("svg", { key: '07016dfed6ee4ff793650d830f152d2555731550', class: "co-media-thumb__play-icon", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", "aria-hidden": "true" }, h("path", { key: '825b3921b94248f28b30ce91b63525fd2fda5b35', d: "M2 2l12 7-12 7z", fill: "var(--co-color-base-negro, #1f1c1b)" })))))));
     }
     static get is() { return "co-media-thumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -111,7 +111,7 @@ export class CoMenu {
         (_b = (_a = items[next]) === null || _a === void 0 ? void 0 : _a.focusItem) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
     render() {
-        return (h("co-popover", { key: '718b9e0d42dad29533ca48b7fef6ee22fa6cc333', placement: this.placement, offset: this.offset, open: this.open, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("slot", { key: 'f9c94ff702e55f1410b1114b753c25b6e57095d7', name: "trigger", slot: "trigger" }), h("div", { key: 'a9d5c6bf91ece47c8fb1ba73e6287035c97f21fd', class: "co-menu", role: "menu", style: this.width ? { width: this.width, minWidth: this.width } : undefined }, h("slot", { key: '8fc58143f17c900f7dfe82319e5d39eb2766e7a9' }))));
+        return (h("co-popover", { key: 'a386ccd371e9eb5627b6c70f43e66d6844df0b8a', placement: this.placement, offset: this.offset, open: this.open, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("slot", { key: '9115ac2e7689183d9d397bd602d1a8651dcf364d', name: "trigger", slot: "trigger" }), h("div", { key: 'a56a14dfc5810144b93ca68ce54aceb7e5c2b85c', class: "co-menu", role: "menu", style: this.width ? { width: this.width, minWidth: this.width } : undefined }, h("slot", { key: '045510a7bbde56d841eee17d7561249a090e6de3' }))));
     }
     static get is() { return "co-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-menu-divider/co-menu-divider.js

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class CoMenuDivider {
     render() {
-        return h("hr", { key: 'be5b2213b3e1d8bf8a0b3c238de90598117b5fce', class: "co-menu-divider", role: "separator" });
+        return h("hr", { key: '9896239f2395bd79f45309fb61e0a0173572947a', class: "co-menu-divider", role: "separator" });
     }
     static get is() { return "co-menu-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-menu-item/co-menu-item.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { SUBMENU_SIDE_ATTR, inheritedSubmenuSide, sideOfPlacement, submenuPlacement } from "../../utils/submenu";
 /**
  * Row inside a `co-menu`. Two modes:
  *
@@ -29,6 +30,11 @@ export class CoMenuItem {
         this.variant = 'default';
         this.hasSubmenu = false;
         this.submenuOpen = false;
+        /** Lado hacia el que este ítem PIDE abrir su submenú. Se recalcula en cada
+         *  apertura (no en render) heredando la dirección del ancestro: para cuando
+         *  el usuario puede hoverear una fila de este panel, el submenú del ancestro
+         *  ya se posicionó y publicó su lado. Ver utils/submenu.ts. */
+        this.submenuPlacementValue = 'right-start';
         this.handleClick = (e) => {
             if (this.disabled)
                 return;
@@ -80,6 +86,16 @@ export class CoMenuItem {
                 return;
             this.scheduleClose();
         };
+        /** El popover ya se posicionó: publicamos el lado RESUELTO (post-flip) en el
+         *  host para que los co-menu-item anidados —hijos de light DOM— lo hereden.
+         *  Va como atributo y no como evento que burbujee a propósito: `coPlacement`
+         *  es `bubbles: false`, así que el de un submenú de adentro no se confunde
+         *  con el nuestro. */
+        this.handlePlacement = (e) => {
+            const side = sideOfPlacement(e.detail.placement);
+            if (side)
+                this.el.setAttribute(SUBMENU_SIDE_ATTR, side);
+        };
         // Arrow function (not a plain method) so `this` stays bound when it is passed
         // directly as a JSX event handler (`onMouseEnter={this.cancelClose}`). Stencil
         // does NOT auto-bind plain methods used as listeners — as a listener `this`
@@ -117,7 +133,37 @@ export class CoMenuItem {
         }
         return false;
     }
-    openSubmenu() { this.submenuOpen = true; }
+    openSubmenu() {
+        // Coordinación de HERMANOS: abrir este submenú cierra inmediato el de
+        // cualquier co-menu-item del mismo parent. Sin esto, el delay de gracia de
+        // 260ms de scheduleClose deja DOS paneles visibles cuando el cursor pasa
+        // rápido de un trigger al de al lado (los ancestros no se tocan: un
+        // submenú anidado vive DENTRO de su ancestro, no es hermano).
+        if (!this.submenuOpen)
+            this.closeSiblingSubmenus();
+        // La dirección se resuelve ACÁ y no en render: heredarla exige que el
+        // submenú del ancestro ya esté posicionado, y eso solo está garantizado
+        // cuando el cursor pudo llegar a esta fila (que vive dentro de ese panel).
+        this.submenuPlacementValue = submenuPlacement(inheritedSubmenuSide(this.el));
+        this.submenuOpen = true;
+    }
+    /** Cierra el submenú YA (sin delay de gracia). Público: lo invoca el hermano
+     *  que se está abriendo, mismo patrón cross-elemento que `focusItem`. */
+    async closeSubmenu() {
+        this.cancelClose();
+        this.submenuOpen = false;
+    }
+    closeSiblingSubmenus() {
+        var _a, _b;
+        const parent = this.el.parentElement;
+        if (!parent)
+            return;
+        for (const sib of Array.from(parent.children)) {
+            if (sib !== this.el && sib.tagName.toLowerCase() === 'co-menu-item') {
+                (_b = (_a = sib).closeSubmenu) === null || _b === void 0 ? void 0 : _b.call(_a);
+            }
+        }
+    }
     scheduleClose() {
         this.cancelClose();
         // Delay tolerates the cursor travelling from the trigger row, across the
@@ -142,7 +188,7 @@ export class CoMenuItem {
         }
         // Submenu trigger — wrap the row in a co-popover anchored to the right.
         // The default slot (nested co-menu-items) is projected into the popover.
-        return (h("div", { class: "co-menu-item__wrap co-menu-item__wrap--submenu", onMouseEnter: this.cancelClose, onMouseLeave: this.handleMouseLeave }, h("co-popover", { placement: "right-start", offset: 4, open: this.submenuOpen, onCoOpen: () => { this.submenuOpen = true; }, onCoClose: () => { this.submenuOpen = false; } }, h("div", { slot: "trigger", class: "co-menu-item__trigger-wrap" }, row), h("div", { class: "co-menu-item__submenu", role: "menu", onMouseEnter: this.cancelClose, onMouseLeave: this.handleMouseLeave }, h("slot", null)))));
+        return (h("div", { class: "co-menu-item__wrap co-menu-item__wrap--submenu", onMouseEnter: this.cancelClose, onMouseLeave: this.handleMouseLeave }, h("co-popover", { placement: this.submenuPlacementValue, offset: 4, open: this.submenuOpen, onCoOpen: () => this.openSubmenu(), onCoClose: () => { this.submenuOpen = false; }, onCoPlacement: this.handlePlacement }, h("div", { slot: "trigger", class: "co-menu-item__trigger-wrap" }, row), h("div", { class: "co-menu-item__submenu", role: "menu", onMouseEnter: this.cancelClose, onMouseLeave: this.handleMouseLeave }, h("slot", null)))));
     }
     static get is() { return "co-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -339,7 +385,8 @@ export class CoMenuItem {
     static get states() {
         return {
             "hasSubmenu": {},
-            "submenuOpen": {}
+            "submenuOpen": {},
+            "submenuPlacementValue": {}
         };
     }
     static get events() {
@@ -393,6 +440,23 @@ export class CoMenuItem {
                     "text": "Programmatic focus \u2014 used by `co-menu`'s keyboard navigation. Named\n`focusItem` (not `focus`) because Stencil reserves the latter (it shadows\nHTMLElement.prototype.focus).",
                     "tags": []
                 }
+            },
+            "closeSubmenu": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Cierra el submen\u00FA YA (sin delay de gracia). P\u00FAblico: lo invoca el hermano\nque se est\u00E1 abriendo, mismo patr\u00F3n cross-elemento que `focusItem`.",
+                    "tags": []
+                }
             }
         };
     }

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 ────────────────────────────────────────────────── */

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

@@ -68,14 +68,16 @@ 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: '40c8e5bd7300ba5b9b9dbe5eed4d3f369f15002d', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '466391dc8b03381f4a00f4e95605c1c22d2eb052', class: "co-modal__frame co-sq-elevation-fallback" }, 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 }, 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 }))))));
+            }, 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: '5149098013107e3dab0149131f4110e2f039d6b6', class: "co-modal__header", part: "header" }, h("div", { key: '2c9c7d6378b7bb536f9c4ade2af7643b4d1e8e9f', class: "co-modal__header-text" }, h("h2", { key: '36f1000d5795862fe319dda98c40b68578b794df', class: "co-modal__heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: 'ac1e07eb244b986b29763eecfbafcddab36626da', class: "co-modal__description" }, this.description))), this.closable && (h("button", { key: '5727e992fef9c2e4ab7e53624734d71de8ef28fe', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'ad217f504bccd348576cb2badb63786179d70122', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: '7a1c7801132cb4470914167acddafda8f789ec92', class: "co-modal__body", part: "body" }, h("slot", { key: 'd00f9a7566eb30a73a40539c42f55061e1c27e12' }))), h("div", { key: '461f22cf012d9ea515863ae249ed257337c17bff', class: { 'co-modal__footer': true, 'co-modal__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { key: '641074e1b09f74d5bb817fe60ea97953fa1f6b99', name: "footer", onSlotchange: this.handleFooterSlotChange }))))));
     }
     static get is() { return "co-modal"; }
     static get encapsulation() { return "shadow"; }

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: '2bfd8f245fd8e93a2d085c5cecbe729a32f10754', 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: 'a07380f56382e9b96b335ab9169a16c8ed9e042e' })));
     }
     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;