@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

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,23 @@ 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`. Reenviada tal
+         *  cual al `co-popover` interno. Default `0` = sin cambio. */
+        this.shift = 0;
         this.handleKeydown = (e) => {
             if (!this.open)
                 return;
@@ -58,6 +76,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,9 +106,20 @@ 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);
     }
+    /** Enfoca la primera fila del panel raíz (lo hace solo al abrir). */
     async focusFirstItem() {
         var _a, _b;
         const items = this.getMenuItems();
@@ -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: '66b0e90463829343152d2a9bdb821e19e70fa4d4', 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 (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: 'b78bcba7bc9542a82c78c1b8026bd4aa56629667', name: "trigger", slot: "trigger" }), h("div", { key: '0515763cb0b89320d4831befe1b6d984029ce309', class: "co-menu", role: "menu", style: this.width ? { width: this.width, minWidth: this.width } : undefined }, h("slot", { key: 'baf72944333c4e912fe0a0aa58d8affb8e923a3e' }))));
     }
     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.\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`. Reenviada tal\ncual al `co-popover` interno. Default `0` = sin cambio."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shift",
+                "defaultValue": "0"
             }
         };
     }
@@ -244,7 +367,7 @@ export class CoMenu {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Se abri\u00F3 el men\u00FA (toma el foco y el teclado). No burbujea."
                 },
                 "complexType": {
                     "original": "void",
@@ -259,7 +382,7 @@ export class CoMenu {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Se cerr\u00F3 el men\u00FA (Escape, click afuera o selecci\u00F3n con `autoClose`). No burbujea."
                 },
                 "complexType": {
                     "original": "void",
@@ -283,7 +406,7 @@ export class CoMenu {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Enfoca la primera fila del panel ra\u00EDz (lo hace solo al abrir).",
                     "tags": []
                 }
             }
@@ -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: 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

@@ -1,3 +1,7 @@
+/**
+ * @prop --co-menu-divider-color: Color de la línea (un `co-menu` con `surface="dark"` lo asigna).
+ * @prop --co-menu-divider-margin: Margen del separador (default `4px 0`).
+ */
 :host {
   display: block;
 }
@@ -7,3 +11,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

@@ -2,10 +2,11 @@ import { h } from "@stencil/core";
 /**
  * Thin horizontal separator between groups of `co-menu-item` rows. Renders an
  * accessible `<hr>` with `role="separator"`.
+ * Wrapper Vue: `CoMenuDivider` de `@prolibu-suite/cobalt-vue`.
  */
 export class CoMenuDivider {
     render() {
-        return h("hr", { key: '9896239f2395bd79f45309fb61e0a0173572947a', class: "co-menu-divider", role: "separator" });
+        return h("hr", { key: '08a30fe0fba8fbbab4a6fce1bc92c700aa767b2d', 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

@@ -1,3 +1,17 @@
+/**
+ * Dentro de un `co-menu` con `surface="dark"`, el menú asigna las de color a sus filas.
+ * @prop --co-menu-item-height: Alto mínimo de la fila (default 36px).
+ * @prop --co-menu-item-padding: Padding de la fila.
+ * @prop --co-menu-item-gap: Separación entre ícono, texto y sufijos.
+ * @prop --co-menu-item-font-size: Tamaño del texto (default 14px).
+ * @prop --co-menu-item-font-weight: Peso del texto.
+ * @prop --co-menu-item-letter-spacing: Espaciado de letras del texto.
+ * @prop --co-menu-item-line-height: Interlineado del texto (default `normal`).
+ * @prop --co-menu-item-color: Color del texto.
+ * @prop --co-menu-item-icon-color: Color del ícono (default: el del texto).
+ * @prop --co-menu-item-hover-bg: Fondo de la fila en hover o con foco.
+ * @prop --co-menu-item-selected-bg: Fondo de la fila `selected`.
+ */
 :host {
   display: block;
 }
@@ -19,8 +33,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 +64,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 +111,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 +201,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:
  *
@@ -13,6 +13,8 @@ import { SUBMENU_SIDE_ATTR, inheritedSubmenuSide, sideOfPlacement, submenuPlacem
  *      `coSelect` — only the leaf items inside do.
  *
  * Submenu nesting is unbounded — submenu items can themselves have submenus.
+ *
+ * Wrapper Vue: `CoMenuItem` de `@prolibu-suite/cobalt-vue`.
  */
 export class CoMenuItem {
     constructor() {
@@ -24,6 +26,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 +117,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 +168,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 +205,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 +370,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 +511,10 @@ export class CoMenuItem {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "submenuOpen",
+                "methodName": "onSubmenuOpenChange"
+            }];
+    }
 }