@prolibu-suite/cobalt-core 0.10.4 → 0.11.0

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { MENU_DIRECTION_ATTR, menuDirectionOfPlacement } from "../../utils/submenu";
 /**
  * Dropdown menu. Wraps `co-popover` with menu-specific UX:
  *   - Default `placement="bottom-end"` (typical for "more actions" 3-dot triggers)
@@ -34,6 +35,24 @@ export class CoMenu {
         this.autoClose = true;
         /** Whether the menu panel is visible. Reflected to attribute. */
         this.open = false;
+        /** Superficie sobre la que se apoya el panel (regla transversal `surface="dark"`).
+         *  `dark` = fondo `--co-semantic-surface-primary`, texto `--co-semantic-text-inverse`,
+         *  sin anillo ni sombra, radio `--co-border-radius-xs`, `min-width: auto`. Para los
+         *  menús negros de herramienta (formas, plantillas de página, Lineal/Radial).
+         *  Reflejado a atributo para que el CSS lo lea vía `:host([surface="dark"])`.
+         *
+         *  Los `co-menu-item` (y `co-menu-divider`) hijos heredan el tema oscuro SOLOS,
+         *  sin ningún prop propio: `co-menu.css` publica variables CSS en el elemento
+         *  slotted (`::slotted(co-menu-item) { --co-menu-item-color: ...; }`) y esas
+         *  variables — al ser custom properties heredadas — atraviesan el shadow
+         *  boundary del hijo hasta su propio `:host` y de ahí a su árbol interno.
+         *  `co-menu-item`/`co-menu-divider` las consumen con fallback al valor claro
+         *  de siempre, así que sin `surface="dark"` no cambia nada. */
+        this.surface = 'light';
+        /** Desplazamiento en px sobre el eje CRUZADO del `placement` (Task C10,
+         *  Fase 2 Cobalt — fix round 1). Reenviada tal cual al `co-popover`
+         *  interno. Default `0` = sin cambio. */
+        this.shift = 0;
         this.handleKeydown = (e) => {
             if (!this.open)
                 return;
@@ -58,6 +77,11 @@ export class CoMenu {
             this.open = true;
             this.coOpen.emit();
         };
+        /** Publica hacia los ítems (light DOM) si el panel abrió hacia arriba, ya
+         *  resuelto el flip: sus submenús crecen en la misma dirección (utils/submenu). */
+        this.handlePlacement = (e) => {
+            this.el.setAttribute(MENU_DIRECTION_ATTR, menuDirectionOfPlacement(e.detail.placement));
+        };
         this.handlePopoverClose = () => {
             this.open = false;
             this.coClose.emit();
@@ -83,6 +107,16 @@ export class CoMenu {
             document.removeEventListener('keydown', this.handleKeydown, true);
         }
     }
+    componentDidLoad() {
+        // Stencil NO dispara @Watch para el valor inicial: un menú CONTROLADO que
+        // monta ya con `open=true` (el contextual del canvas del editor, que nace
+        // abierto en la coordenada del clic) se quedaba sin listener de teclado y
+        // sin foco inicial — ↑/↓/Enter no hacían nada, aunque Escape sí cerraba
+        // porque ese lo maneja el `co-popover` interno, que ya tenía este mismo
+        // remedio (ver su componentDidLoad).
+        if (this.open)
+            this.onOpenChange(true);
+    }
     disconnectedCallback() {
         document.removeEventListener('keydown', this.handleKeydown, true);
     }
@@ -94,9 +128,27 @@ export class CoMenu {
     /** Walk the LIGHT DOM children for `<co-menu-item>` rows in document order.
      *  Returns the focusable inner buttons via `.focus()`-able interface — we
      *  use the host element here and rely on focus delegating to the inner
-     *  `<button>` via Stencil's `delegatesFocus`-like behavior. */
+     *  `<button>` via Stencil's `delegatesFocus`-like behavior.
+     *
+     *  Las filas son las del panel ACTIVO: el submenú abierto más profundo, o la
+     *  raíz si no hay ninguno (lo que el docstring del componente ya prometía).
+     *  Antes era un `querySelectorAll` plano, que también devolvía las filas de
+     *  los submenús CERRADOS — sus `co-menu-item` viven en el light DOM aunque su
+     *  panel no esté renderizado, así que ↓ mandaba el foco a filas invisibles.
+     *  Sin submenús el resultado es idéntico al de siempre. */
     getMenuItems() {
-        return Array.from(this.el.querySelectorAll('co-menu-item'));
+        return itemsIn(this.activePanel());
+    }
+    /** El submenú abierto más profundo (por el atributo `data-submenu-open` que
+     *  publica `co-menu-item`), o el propio menú si no hay ninguno abierto. */
+    activePanel() {
+        let panel = this.el;
+        for (;;) {
+            const open = itemsIn(panel).find((item) => item.hasAttribute('data-submenu-open'));
+            if (!open)
+                return panel;
+            panel = open;
+        }
     }
     moveFocus(delta) {
         var _a, _b;
@@ -111,7 +163,14 @@ 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: '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' }))));
+        return (h("co-popover", { key: '9ad32ee1adf1436a4ff266db44a34c0b4e9b5293', placement: this.placement, offset: this.offset, open: this.open, anchor: this.anchor, shift: this.shift,
+            // `co-menu` SIEMPRE pinta su propio chrome (`.co-menu`: fondo +
+            // shadow-lg + anillo, o el panel sólido de `surface="dark"`) — el
+            // `co-popover` interno tiene que ir SIEMPRE bare, sin condición, para
+            // no sumarle un fondo/borde/sombra propios detrás (Task C10, Fase 2
+            // Cobalt — fix round 1; antes de esto el panel del menú tenía doble
+            // chrome SIEMPRE, no solo en un caso opcional).
+            bare: true, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose, onCoPlacement: this.handlePlacement }, h("slot", { key: 'b093c29c2e8a6773843a030282cc9e06af54f8c7', name: "trigger", slot: "trigger" }), h("div", { key: '00baf22b70a5f0544a134c170549b31fb46baf38', class: "co-menu", role: "menu", style: this.width ? { width: this.width, minWidth: this.width } : undefined }, h("slot", { key: '2307edc81be264fe4e8a76fb2e1bc14b59538cc2' }))));
     }
     static get is() { return "co-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -232,6 +291,70 @@ export class CoMenu {
                 "setter": false,
                 "reflect": false,
                 "attribute": "width"
+            },
+            "surface": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Superficie sobre la que se apoya el panel (regla transversal `surface=\"dark\"`).\n`dark` = fondo `--co-semantic-surface-primary`, texto `--co-semantic-text-inverse`,\nsin anillo ni sombra, radio `--co-border-radius-xs`, `min-width: auto`. Para los\nmen\u00FAs negros de herramienta (formas, plantillas de p\u00E1gina, Lineal/Radial).\nReflejado a atributo para que el CSS lo lea v\u00EDa `:host([surface=\"dark\"])`.\n\nLos `co-menu-item` (y `co-menu-divider`) hijos heredan el tema oscuro SOLOS,\nsin ning\u00FAn prop propio: `co-menu.css` publica variables CSS en el elemento\nslotted (`::slotted(co-menu-item) { --co-menu-item-color: ...; }`) y esas\nvariables \u2014 al ser custom properties heredadas \u2014 atraviesan el shadow\nboundary del hijo hasta su propio `:host` y de ah\u00ED a su \u00E1rbol interno.\n`co-menu-item`/`co-menu-divider` las consumen con fallback al valor claro\nde siempre, as\u00ED que sin `surface=\"dark\"` no cambia nada."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "surface",
+                "defaultValue": "'light'"
+            },
+            "anchor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement | string",
+                    "resolved": "HTMLElement | string | undefined",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Elemento (o selector resuelto contra `document`) al que se alinea el\npanel EN VEZ del trigger (Task C10, Fase 2 Cobalt \u2014 fix round 1).\nReenviada tal cual al `co-popover` interno; sin `anchor`, cae al\ntrigger (comportamiento de siempre). \u00DAtil para alinear el men\u00FA contra\nun contenedor m\u00E1s grande que el bot\u00F3n que lo abre (p.ej. la p\u00EDldora del\nzoom del toolbar)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "anchor"
+            },
+            "shift": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Desplazamiento en px sobre el eje CRUZADO del `placement` (Task C10,\nFase 2 Cobalt \u2014 fix round 1). Reenviada tal cual al `co-popover`\ninterno. Default `0` = sin cambio."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shift",
+                "defaultValue": "0"
             }
         };
     }
@@ -306,3 +429,20 @@ export class CoMenu {
             }];
     }
 }
+/** Filas de UN panel: todos los `co-menu-item` de adentro cuyo `co-menu-item`
+ *  ancestro más cercano sea ESTE panel — los del menú raíz no tienen ninguno y
+ *  los de un submenú cuelgan del ítem que lo abre.
+ *
+ *  Se mira el ancestro y no los hijos directos a propósito (fix round 1): con
+ *  hijos directos, un consumidor que envuelva sus filas en un `<div>` (un
+ *  grupo, un `v-for` con wrapper, un fragmento con contenedor) se quedaba sin
+ *  navegación por flechas **en silencio**. Así el envoltorio da igual y los
+ *  submenús siguen quedando fuera. */
+function itemsIn(panel) {
+    const esItem = panel.tagName.toLowerCase() === 'co-menu-item';
+    return Array.from(panel.querySelectorAll('co-menu-item')).filter((item) => {
+        var _a, _b;
+        const ancestro = (_b = (_a = item.parentElement) === null || _a === void 0 ? void 0 : _a.closest('co-menu-item')) !== null && _b !== void 0 ? _b : null;
+        return esItem ? ancestro === panel : ancestro === null;
+    });
+}

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

@@ -7,3 +7,20 @@
   border-top: 1px solid var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));
   margin: var(--co-spacing-xs, 4px) 0;
 }
+
+/* Task C9 — hook de color para `co-menu surface="dark"` (ver co-menu.css):
+   el borde sutil negro-8 es casi invisible sobre el fondo negro del panel
+   oscuro. El ancestro oscuro publica `--co-menu-divider-color` en ESTE
+   elemento (custom property heredada — atraviesa el shadow boundary hasta
+   acá). Solo tocamos `border-top-color` (no todo el shorthand `border-top`
+   de arriba), así el ancho/estilo (1px solid) quedan intactos. Sin ancestro
+   oscuro, sigue el borde de siempre. */
+.co-menu-divider {
+  border-top-color: var(--co-menu-divider-color, var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08)));
+  /* Task C1 — hook del margen, con el default de siempre (`4px 0`). El
+     separador del menú contextual del canvas es más ANCHO que el contenido
+     del panel (margen horizontal negativo) y su aire vertical no es simétrico
+     (el borde de 1px cuenta). Va en la re-declaración y no en el shorthand
+     `margin` de arriba para no cambiar nada sin la variable. */
+  margin: var(--co-menu-divider-margin, var(--co-spacing-xs, 4px) 0);
+}

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: '9896239f2395bd79f45309fb61e0a0173572947a', class: "co-menu-divider", role: "separator" });
+        return h("hr", { key: '7ec669cd5b23822d5ac9e94bf6f9d729222bc107', 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.css

@@ -19,8 +19,25 @@
   border: 0;
   border-radius: var(--co-border-radius-xs, 8px);
   font-family: var(--co-font-family-primary);
-  font-size: var(--co-font-size-14, 14px);
-  color: var(--co-semantic-text-default);
+  /* Task C9 — hooks aditivos de tipografía (mismo default de siempre: 14px,
+     sin font-weight/letter-spacing explícitos — o sea `normal`) y de color
+     para `co-menu surface="dark"` (ver co-menu.css): el ancestro oscuro
+     publica `--co-menu-item-color` en ESTE elemento (custom property
+     heredada — atraviesa el shadow boundary hasta acá). Sin ancestro oscuro,
+     sigue el texto de siempre. Los hooks van EN la regla original, no en una
+     re-declaración al final: `.co-menu-item--danger` pesa lo mismo (0,1,0) y
+     gana solo por orden de fuente — una `.co-menu-item { color }` posterior
+     le quitaba el rojo a todo ítem danger (fix C-1). */
+  font-size: var(--co-menu-item-font-size, var(--co-font-size-14, 14px));
+  font-weight: var(--co-menu-item-font-weight, normal);
+  letter-spacing: var(--co-menu-item-letter-spacing, normal);
+  /* Follow-up Fase 4 (editor): hook para fijar el interlineado de la fila
+     (filas de 12px del editor). Fallback `normal` = lo que ya computaba: la
+     fila es un <button> y el UA le pone `line-height: normal` (Chromium/
+     WebKit vía `font: -webkit-small-control`, Firefox en forms.css); esta
+     hoja no lo tocaba. Sin la variable, nada cambia. */
+  line-height: var(--co-menu-item-line-height, normal);
+  color: var(--co-menu-item-color, var(--co-semantic-text-default));
   text-align: left;
   cursor: pointer;
   transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);
@@ -33,14 +50,19 @@
   min-height: 32px;
 }
 
-/* At-rest selected highlight. Declared before :hover so hover still wins. */
+/* At-rest selected highlight. Declared before :hover so hover still wins.
+   En `co-menu surface="dark"` el ancestro publica `--co-menu-item-selected-bg:
+   transparent` (selected SIN fondo) y `--co-menu-item-hover-bg` en blanco-16;
+   sin esas variables el fallback es el valor de siempre. Ambas reglas se
+   quedan ACÁ, antes de `--danger:hover` (misma especificidad que
+   `.co-menu-item:hover`): el hover rojo de danger gana por orden (fix C-1). */
 .co-menu-item--selected {
-  background: var(--co-color-gray-100, #f6f6f6);
+  background: var(--co-menu-item-selected-bg, var(--co-color-gray-100, #f6f6f6));
 }
 
 .co-menu-item:hover,
 .co-menu-item--submenu-open {
-  background: var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04));
+  background: var(--co-menu-item-hover-bg, var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04)));
 }
 
 .co-menu-item:focus-visible {
@@ -75,7 +97,9 @@
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
-  color: var(--co-semantic-text-default);
+  /* Mismo hook de color que la fila (Task C9): en `surface="dark"` sigue el
+     texto claro del panel; sin ancestro oscuro, el default de siempre. */
+  color: var(--co-menu-item-color, var(--co-semantic-text-default));
 }
 
 .co-menu-item__label {
@@ -163,3 +187,15 @@
 }
 .co-menu-item__submenu::before { left: -6px; }
 .co-menu-item__submenu::after { right: -6px; }
+
+/* leadingCheck: check de 12px al INICIO de la fila (primer hijo del flex, ver
+   .tsx), pareja de trailingCheck pero para menús de selección única con panel
+   oscuro (formas, plantillas de página). El span se reserva SIEMPRE que
+   leadingCheck esté activo — ancho fijo 12px, mismo tamaño que el ícono de
+   adentro — el gap con el siguiente hijo (icono o label) ya lo pone el `gap`
+   de `.co-menu-item`, así que el hueco total es 12px + ese gap. El `co-icon`
+   de adentro solo se monta si además `selected` es true (ver .tsx). */
+.co-menu-item__check--leading {
+  width: 12px;
+  justify-content: center;
+}

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { SUBMENU_SIDE_ATTR, inheritedSubmenuSide, sideOfPlacement, submenuPlacement } from "../../utils/submenu";
+import { SUBMENU_SIDE_ATTR, inheritedSubmenuSide, menuOpensUp, sideOfPlacement, submenuPlacement } from "../../utils/submenu";
 /**
  * Row inside a `co-menu`. Two modes:
  *
@@ -24,6 +24,14 @@ export class CoMenuItem {
         /** Renders a trailing check (size 15) after the label. Pair with `selected`
          *  to mark the chosen option in a single-select menu. */
         this.trailingCheck = false;
+        /** Reserva un check de 12px AL INICIO de la fila (antes del ícono/label).
+         *  A diferencia de `trailingCheck` (que solo se monta si el prop está en
+         *  true), acá el HUECO (12px + el gap de la fila) se reserva SIEMPRE que
+         *  `leadingCheck` esté activo — el `co-icon` de adentro solo se monta si
+         *  además `selected` es true, así todas las filas de un menú de selección
+         *  única (formas, plantillas de página) quedan alineadas aunque solo una
+         *  esté marcada. Pensado para menús con `co-menu surface="dark"`. */
+        this.leadingCheck = false;
         /** Visually disabled — pointer events ignored, opacity reduced. */
         this.disabled = false;
         /** `danger` shifts text + icon to the destructive color. Use for Delete, etc. */
@@ -107,6 +115,20 @@ export class CoMenuItem {
             }
         };
     }
+    /** Publica el submenú abierto como atributo del HOST (`data-submenu-open`).
+     *  Prefijo `data-`: es un atributo que el componente escribe solo, no una
+     *  API que se setea desde afuera, y sin prefijo ensuciaba el espacio de
+     *  nombres de atributos estándar (review final 2).
+     *  `submenuOpen` es `@State` y vive en el shadow: sin esto, el `co-menu`
+     *  ancestro no tiene forma de saber qué panel está activo para dirigir las
+     *  flechas (ver `getMenuItems` en co-menu.tsx). Aditivo: un atributo de solo
+     *  lectura que nadie más consume; el resto del componente no cambia. */
+    onSubmenuOpenChange(isOpen) {
+        if (isOpen)
+            this.el.setAttribute('data-submenu-open', '');
+        else
+            this.el.removeAttribute('data-submenu-open');
+    }
     /** Programmatic focus — used by `co-menu`'s keyboard navigation. Named
      *  `focusItem` (not `focus`) because Stencil reserves the latter (it shadows
      *  HTMLElement.prototype.focus). */
@@ -144,7 +166,7 @@ export class CoMenuItem {
         // 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.submenuPlacementValue = submenuPlacement(inheritedSubmenuSide(this.el), menuOpensUp(this.el));
         this.submenuOpen = true;
     }
     /** Cierra el submenú YA (sin delay de gracia). Público: lo invoca el hermano
@@ -181,14 +203,20 @@ export class CoMenuItem {
                 'co-menu-item--danger': this.variant === 'danger',
                 'co-menu-item--submenu': this.hasSubmenu,
                 'co-menu-item--submenu-open': this.hasSubmenu && this.submenuOpen,
-            }, type: "button", role: "menuitem", "aria-haspopup": this.hasSubmenu ? 'menu' : undefined, "aria-expanded": this.hasSubmenu ? (this.submenuOpen ? 'true' : 'false') : undefined, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeydown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.icon && (h("span", { class: "co-menu-item__icon" }, h("co-icon", { name: this.icon, size: (_a = this.iconSize) !== null && _a !== void 0 ? _a : 16 }))), h("span", { class: { 'co-menu-item__label': true, 'co-menu-item__label--stacked': !!this.caption } }, h("span", { class: "co-menu-item__label-main" }, this.label, h("slot", { name: "label" })), this.caption && h("span", { class: "co-menu-item__caption" }, this.caption)), this.trailingCheck && (h("span", { class: "co-menu-item__check" }, h("co-icon", { name: "check", size: 15 }))), h("span", { class: "co-menu-item__suffix" }, h("slot", { name: "suffix" }), this.hasSubmenu && h("co-icon", { name: "caret-right", size: 14 }))));
+            }, type: "button", role: "menuitem", "aria-haspopup": this.hasSubmenu ? 'menu' : undefined, "aria-expanded": this.hasSubmenu ? (this.submenuOpen ? 'true' : 'false') : undefined, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeydown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.leadingCheck && (h("span", { class: "co-menu-item__check co-menu-item__check--leading" }, this.selected && h("co-icon", { name: "check", size: 12 }))), this.icon && (h("span", { class: "co-menu-item__icon" }, h("co-icon", { name: this.icon, size: (_a = this.iconSize) !== null && _a !== void 0 ? _a : 16 }))), h("span", { class: { 'co-menu-item__label': true, 'co-menu-item__label--stacked': !!this.caption } }, h("span", { class: "co-menu-item__label-main" }, this.label, h("slot", { name: "label" })), this.caption && h("span", { class: "co-menu-item__caption" }, this.caption)), this.trailingCheck && (h("span", { class: "co-menu-item__check" }, h("co-icon", { name: "check", size: 15 }))), h("span", { class: "co-menu-item__suffix" }, h("slot", { name: "suffix" }), this.hasSubmenu && h("co-icon", { name: "caret-right", size: 14 }))));
         if (!this.hasSubmenu) {
             // Leaf — the default slot is unused for leaves; ignore it.
             return h("div", { class: "co-menu-item__wrap" }, row);
         }
         // 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: 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)))));
+        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,
+            // `.co-menu-item__submenu` pinta su PROPIO chrome (fondo + shadow-lg
+            // + anillo interno, igual que `.co-menu`), así que el popover va
+            // SIEMPRE bare — misma regla que el popover interno de `co-menu`
+            // (Task C10 fix round 1); sin esto el submenú tenía doble
+            // borde/sombra/fondo (fix I-4).
+            bare: true, 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"; }
@@ -340,6 +368,26 @@ export class CoMenuItem {
                 "attribute": "trailing-check",
                 "defaultValue": "false"
             },
+            "leadingCheck": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Reserva un check de 12px AL INICIO de la fila (antes del \u00EDcono/label).\nA diferencia de `trailingCheck` (que solo se monta si el prop est\u00E1 en\ntrue), ac\u00E1 el HUECO (12px + el gap de la fila) se reserva SIEMPRE que\n`leadingCheck` est\u00E9 activo \u2014 el `co-icon` de adentro solo se monta si\nadem\u00E1s `selected` es true, as\u00ED todas las filas de un men\u00FA de selecci\u00F3n\n\u00FAnica (formas, plantillas de p\u00E1gina) quedan alineadas aunque solo una\nest\u00E9 marcada. Pensado para men\u00FAs con `co-menu surface=\"dark\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "leading-check",
+                "defaultValue": "false"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -461,4 +509,10 @@ export class CoMenuItem {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "submenuOpen",
+                "methodName": "onSubmenuOpenChange"
+            }];
+    }
 }

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

@@ -235,8 +235,219 @@
   border-top: none;
 }
 
-/* header-divider="false": the body runs straight under the heading. */
+/* header-divider="false": the body runs straight under the heading.
+   Va ANTES de los modos panel/dialog (misma especificidad 0,2,0): esos modos
+   conservan la anatomía de su cuerpo (padding propio, sin divisor) aunque
+   además llegue header-divider="false". */
 .co-modal--no-header-divider .co-modal__body {
   border-top: none;
   padding-top: 0;
 }
+
+/* ─── size="xs" (Task C12) ──────────────────────────────────── */
+/* Panel angosto de ancho fijo (369px) — a diferencia de sm/lg (solo
+   max-width sobre el `width: 90vw` base) acá el ancho es fijo, expuesto vía
+   variable para que un consumidor lo pueda ajustar sin nueva prop. */
+.co-modal--xs {
+  width: var(--co-modal-width, 369px);
+  max-width: var(--co-modal-width, 369px);
+}
+
+/* ─── appearance="panel" (Task C12) ─────────────────────────── */
+/* Superficie plana con borde + sombra completa, SIN squircle: el tsx omite
+   .co-sq-clip/.co-sq-elevation en .co-modal--panel y .co-sq-elevation-fallback
+   en el frame para esta variante, así que radio/box-shadow van declarados acá
+   enteros (no hay partial squircle-surface.css involucrado). */
+.co-modal--panel {
+  border-radius: var(--co-border-radius-sm);
+  border: 1px solid var(--co-semantic-border-subtle);
+  box-shadow: var(--co-shadow-lg);
+}
+
+.co-modal--panel .co-modal__header {
+  padding: 16px 20px 16px 24px;
+  align-items: center;
+  border-bottom: 1px solid var(--co-semantic-border-subtle);
+}
+
+.co-modal--panel .co-modal__heading {
+  font-size: var(--co-font-size-20);
+  font-weight: 500;
+  line-height: 1.25;
+  letter-spacing: var(--co-font-letter-spacing-body);
+}
+
+.co-modal--panel .co-modal__close {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: var(--co-border-radius-full);
+  color: var(--co-semantic-text-default);
+}
+
+.co-modal--panel .co-modal__body {
+  padding: 24px;
+  border-top: none;
+}
+
+.co-modal--panel .co-modal__footer {
+  padding: 12px 24px;
+  gap: 12px;
+  border-top: 1px solid var(--co-semantic-border-subtle);
+}
+
+/* ─── backdrop="none" / inline (Task C12) ───────────────────── */
+/* Sin <co-overlay> el frame deja de ser centrado por su flex del padre — se
+   posiciona y apila SOLO: mismo fixed+inset+centrado que co-overlay.css,
+   pero sin promoción a top layer (ver doc de `inline` en el @Prop). El
+   z-index es una variable propia (no pisa el 1000 de co-overlay) para que un
+   consumidor pueda ubicar sus propios portales por encima o por debajo a
+   gusto. `pointer-events: none` en el wrapper deja pasar los clics al resto
+   de la página (no hay backdrop que los intercepte); el panel recupera
+   `auto` SOLO mientras está abierto — `pointer-events` hereda, así que
+   cerrado (sin --open) el wrapper en none ya alcanza. */
+.co-modal__frame--standalone {
+  position: fixed;
+  inset: 0;
+  z-index: var(--co-modal-z-index, 1000);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.co-modal__frame--standalone .co-modal--open {
+  pointer-events: auto;
+}
+
+/* Cerrado, el frame standalone sigue MONTADO (no hay co-overlay que lo
+   saque del flujo): solo con `opacity: 0` el panel seguía en el tab-order y
+   legible para AT (fix I-1). `visibility: hidden` lo saca de ambos, pero el
+   flip va DIFERIDO al final del fade-out de salida (delay = la misma
+   --co-motion-duration-fast de la transición base de .co-modal) para no
+   cortar la animación de cierre ni el `transitionend` de `transform` del que
+   sale `coAfterClose` (mismo patrón que co-accordion / co-action-bar). Al
+   abrir, la transición vigente es la de `.co-modal--open` (sin visibility),
+   así que el panel es visible desde el frame 1. Reduced-motion lo cubre el
+   zeroing global de --co-motion-duration-*. Solo aplica bajo el frame
+   standalone: el modal default (dentro de co-overlay) no cambia. */
+.co-modal__frame--standalone .co-modal:not(.co-modal--open) {
+  visibility: hidden;
+  transition: transform var(--co-motion-duration-fast) var(--co-motion-ease-in), opacity var(--co-motion-duration-fast) var(--co-motion-ease-in), visibility 0s linear var(--co-motion-duration-fast);
+}
+
+/* ─── appearance="dialog" (Task M1) ─────────────────────────── */
+/* La anatomía del componente "Modal" del design system (Figma Prolibu UI
+   Suite `1179:37247`), medida del Figma: contenedor 540 (= `md`) radio 16
+   `radius-lg`, fondo blanco, SIN borde ni sombra propios (el nodo no lleva
+   efecto: sobre el scrim alcanza); contenido con padding 32 `space-3xl` y gap
+   16 `space-lg` entre título (Subheading/S1: 22/500, lh 1.25, ls −3 %) y
+   cuerpo (Body/B2: 16/400, lh 1.5, ls −3 %, gris-600) sin divisor entre
+   ambos; footer con padding 16/24 (`space-lg`/`space-2xl`), gap 12
+   `space-md`, hairline superior `negro-8 %` = `--co-semantic-border-subtle`
+   y botones a la derecha (cuadrados radio 12: `co-button shape="square"
+   size="m"`). Igual que `panel`, el tsx omite las clases squircle para esta
+   variante, así que el radio va declarado acá entero (no hay partial
+   squircle-surface.css involucrado). Aditivo: `default` y `panel` no cambian. */
+.co-modal--dialog {
+  border-radius: var(--co-border-radius-lg);
+}
+
+/* Header = solo el título (y el ✕ si `closable`): el padding inferior lo
+   pone el cuerpo (gap 16 del Figma). `flex-start`, no `center`: con
+   `description` el texto es una columna y el ✕ tiene que quedar arriba. */
+.co-modal--dialog .co-modal__header {
+  padding: var(--co-spacing-3xl) var(--co-spacing-3xl) 0;
+  align-items: flex-start;
+  gap: var(--co-spacing-lg);
+}
+
+.co-modal--dialog .co-modal__header-text {
+  gap: var(--co-spacing-lg);
+}
+
+.co-modal--dialog .co-modal__heading {
+  font-size: var(--co-font-size-22);
+  font-weight: 500;
+  line-height: 1.25;
+  letter-spacing: var(--co-font-letter-spacing-body);
+}
+
+.co-modal--dialog .co-modal__description {
+  font-size: var(--co-font-size-16);
+  line-height: 1.5;
+  letter-spacing: var(--co-font-letter-spacing-body);
+}
+
+/* ✕ redondo de 32 (el mismo del modo `panel`), subido 3 px para centrarlo
+   ópticamente en la línea de 27,5 del título y corrido 6 px hacia el borde
+   para que el glifo (18 px, 7 de aire en la caja) quede al ras del padding. */
+.co-modal--dialog .co-modal__close {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  margin: -3px -6px 0 0;
+  border-radius: var(--co-border-radius-full);
+  color: var(--co-semantic-text-default);
+}
+
+/* Cuerpo: 16 arriba (gap título→cuerpo), 32 a los lados y abajo; sin el
+   divisor del default. Tipografía Body/B2 del DS (el consumidor la hereda). */
+.co-modal--dialog .co-modal__body {
+  padding: var(--co-spacing-lg) var(--co-spacing-3xl) var(--co-spacing-3xl);
+  border-top: none;
+  font-size: var(--co-font-size-16);
+  line-height: 1.5;
+  letter-spacing: var(--co-font-letter-spacing-body);
+}
+
+/* `size="full"` (viewers edge-to-edge) conserva su cuerpo sin padding: la
+   regla de arriba tiene la misma especificidad que `.co-modal--full
+   .co-modal__body` y va después, así que se re-afirma explícitamente. */
+.co-modal--dialog.co-modal--full .co-modal__body {
+  padding: 0;
+}
+
+/* Footer 16/24, gap 12, hairline subtle. Solo el COLOR del borde: así
+   `no-dividers` (`border-top: none`, misma especificidad, declarado antes)
+   sigue quitándolo. Los botones cuadrados del Figma (radio 12) los pone el
+   consumidor con `shape="square"`; la variable cubre a los `rounded`. */
+.co-modal--dialog .co-modal__footer {
+  padding: var(--co-spacing-lg) var(--co-spacing-2xl);
+  gap: var(--co-spacing-md);
+  border-top-color: var(--co-semantic-border-subtle);
+  --co-button-radius: var(--co-border-radius-sm);
+}
+
+/* ─── movable (Task D1) ─────────────────────────────────────── */
+/* Opt-in: sin `movable` no se emite ninguna de estas clases, así que el CSS
+   por defecto queda idéntico. El desplazamiento lo escribe el gesto como
+   custom property y se aplica con `translate` — una propiedad INDEPENDIENTE
+   del `transform` que anima la apertura (scale), así que no la pisa ni
+   dispara layout. `none` es el valor inicial: sin arrastrar, el panel queda
+   exactamente donde lo dejan co-overlay o el consumidor. */
+.co-modal--movable {
+  translate: var(--co-modal-translate, none);
+}
+
+/* El header entero es la zona de agarre (no hay ícono de agarre).
+   `touch-action: none` para que el gesto táctil mueva en vez de scrollear, y
+   sin selección de texto para que arrastrar el título no lo pinte. */
+.co-modal__header--movable {
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Los controles del header conservan su cursor: el ✕ no arrastra (el gesto lo
+   ignora, ver isInteractiveDragTarget) y no debe parecer que sí. */
+.co-modal__header--movable .co-modal__close {
+  cursor: pointer;
+}
+
+/* Declarada DESPUÉS de --movable y con la misma especificidad: gana por orden
+   mientras dura el gesto. */
+.co-modal__header--dragging {
+  cursor: grabbing;
+}