@prolibu-suite/cobalt-core 0.10.3 → 0.11.0

package/dist/esm/co-list-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DJkaRtbb.js';
 
 const coListItemCss = () => `:host{display:block}.co-list-item{display:flex;align-items:center;gap:var(--co-spacing-md);padding:var(--co-spacing-md) var(--co-spacing-lg);font-family:var(--co-font-family-primary);cursor:pointer;border-radius:var(--co-border-radius-sm);transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box;min-height:40px}.co-list-item--dense{gap:var(--co-spacing-sm);padding:6px var(--co-spacing-sm);border-radius:var(--co-border-radius-xxs);min-height:32px}.co-list-item--dense .co-list-item__label{font-size:var(--co-font-size-14)}.co-list-item:hover:not(.co-list-item--disabled){background:var(--co-semantic-surface-hover)}.co-list-item:focus-visible{outline:none;box-shadow:0 0 0 2px var(--co-semantic-border-focus)}.co-list-item--selected{background:var(--co-semantic-surface-muted)}.co-list-item--disabled{opacity:0.4;cursor:not-allowed}.co-list-item__prefix,.co-list-item__suffix{display:flex;align-items:center;gap:var(--co-spacing-sm);flex-shrink:0;color:var(--co-semantic-text-muted)}.co-list-item__prefix:empty,.co-list-item__suffix:empty{display:none}.co-list-item__content{display:flex;flex-direction:column;flex:1;min-width:0}.co-list-item__content>.co-list-item__tip{min-width:0;max-width:100%}.co-list-item__label{display:block;font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-default);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-list-item__description{display:block;font-size:var(--co-font-size-12);color:var(--co-semantic-text-muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;
 
@@ -69,21 +69,21 @@ const CoListItem = class {
         requestAnimationFrame(this.measureTruncation);
     }
     render() {
-        return (h("div", { key: '23cfee682f0e7d3a22ca793b9e6b29eb89cf8ca1', class: {
+        return (h("div", { key: '1b41a6b63153b67dc59394f292bf100ff3e32a89', 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: '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) => {
+            }, 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: '7cad6103ab3087a0c9b6156bfeb2049f796acca4', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: '7b9934bad5ec591f82b733451317a6d7e1622ff1', name: this.icon, size: 18 }), h("slot", { key: '5e5e97b0392f181f442bf6bd3915f001bd95e54c', name: "prefix" })), h("div", { key: '5a64e8895ef52a3aed341307ce36b6a83edfc602', class: "co-list-item__content" }, this.label && (h("co-tooltip", { key: 'dde0ef8d6141a123200e92f431a8478d2abaec0d', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, h("span", { key: '566e69fd926005ec57b3b2314ccc2323c77de916', 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: '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.label))), this.description && (h("co-tooltip", { key: '435997357a7370731d90a3e6c636aab5463cd364', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, h("span", { key: '58ca1721f60f68c3725759f2f14f15c2c4639991', class: "co-list-item__description", ref: (el) => {
                 this.descEl = el;
                 if (el && this.ro)
                     this.ro.observe(el);
-            } }, this.description))), h("slot", { key: '136ec5db83f4d2a77126d734ecac511c92b36d91' })), h("span", { key: '759b18ea3bedcb7b7b8023cb6ca1444fbacb5748', class: "co-list-item__suffix" }, h("slot", { key: 'c6519a183c1b7cdb84e4d822a5e2fa523a99ab52', name: "suffix" }))));
+            } }, this.description))), h("slot", { key: '38cff2270b737756895da1b692f42557e9396b54' })), h("span", { key: 'df206f44faabbc30306509ad7651558c976ecb10', class: "co-list-item__suffix" }, h("slot", { key: '48bfb58fc0e74ae5647425472279b92e6b1ce30d', name: "suffix" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/co-loader.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-DH5lfRNj.js';
+import { r as registerInstance, h } from './index-DJkaRtbb.js';
 
 const coLoaderCss = () => `:host{display:contents;--co-loader-ball:15px;--co-loader-step:25px;--co-loader-text:var(--co-font-size-14);--co-loader-gap:10px}:host([size="sm"]){--co-loader-ball:8px;--co-loader-step:14px;--co-loader-text:var(--co-font-size-12);--co-loader-gap:6px}:host([size="lg"]){--co-loader-ball:20px;--co-loader-step:33px;--co-loader-gap:12px}.co-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--co-loader-gap)}.co-loader--overlay{position:absolute;inset:0;background:rgba(255, 255, 255, 0.72);z-index:10}.co-loader__balls{position:relative;width:calc(var(--co-loader-step) * 3);height:var(--co-loader-ball)}.co-loader__ball{position:absolute;width:var(--co-loader-ball);height:var(--co-loader-ball);border-radius:50%;animation:co-loader-bounce 2s infinite cubic-bezier(0.28, 0.84, 0.42, 1)}.co-loader__ball--blue{background-color:var(--co-color-primary-azul, #4285f4)}.co-loader__ball--yellow{background-color:var(--co-color-primary-amarillo, #fdbd00);animation-delay:0.4s}.co-loader__ball--red{background-color:var(--co-color-primary-rosado, #d4145a);animation-delay:0.8s}.co-loader__text{margin:0;font-family:var(--co-font-family-primary);font-size:var(--co-loader-text);color:var(--co-semantic-text-secondary);text-align:center;white-space:pre-line}@keyframes co-loader-bounce{0%,100%{transform:translateX(0) scale(1)}25%{transform:translateX(var(--co-loader-step)) scale(1.2)}50%{transform:translateX(calc(var(--co-loader-step) * 2)) scale(0.8)}75%{transform:translateX(var(--co-loader-step)) scale(1.2)}}@media (prefers-reduced-motion: reduce){.co-loader__ball{animation:none}.co-loader__ball--blue{transform:translateX(0)}.co-loader__ball--yellow{transform:translateX(var(--co-loader-step))}.co-loader__ball--red{transform:translateX(calc(var(--co-loader-step) * 2))}}`;
 

package/dist/esm/co-media-thumb.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-DH5lfRNj.js';
+import { r as registerInstance, h } from './index-DJkaRtbb.js';
 
 const coMediaThumbCss = () => `:host{display:block}.co-media-thumb{position:relative;overflow:hidden;width:100%;background:var(--co-color-gray-100, #f6f6f6);box-sizing:border-box}.co-media-thumb__img{width:100%;height:100%;object-fit:cover;display:block}.co-media-thumb__scrim{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(31, 28, 27, 0.28)}.co-media-thumb__play{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(255, 255, 255, 0.92)}.co-media-thumb__play-icon{display:block;margin-left:2px;}`;
 
@@ -20,13 +20,13 @@ const CoMediaThumb = class {
     }
     render() {
         var _a;
-        return (h("div", { key: 'acd021eb5ebcc987eeb1528b874fdbdfa48f8b52', class: {
+        return (h("div", { key: 'ce38519a6f2e10a54e70cec300f7229c28d12207', 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: '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)" })))))));
+            } }, 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: '6fd5a47d1f3443cf2c7f47e24a2e70a4a6930f62', class: "co-media-thumb__scrim", part: "scrim" }, h("div", { key: 'fde9e8f4d4bf3bfa11221887a3b0edc458684b64', class: "co-media-thumb__play", part: "play" }, h("svg", { key: '99f2e4947a475348c2302a6949e8607b0c50177e', class: "co-media-thumb__play-icon", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none", "aria-hidden": "true" }, h("path", { key: '8bb6cd16e6a91aab6cf331fda06fc8cc1a8e8ca9', d: "M2 2l12 7-12 7z", fill: "var(--co-color-base-negro, #1f1c1b)" })))))));
     }
 };
 CoMediaThumb.style = coMediaThumbCss();

package/dist/esm/co-menu-divider.entry.js

@@ -1,13 +1,13 @@
-import { r as registerInstance, h } from './index-DH5lfRNj.js';
+import { r as registerInstance, h } from './index-DJkaRtbb.js';
 
-const coMenuDividerCss = () => `:host{display:block}.co-menu-divider{border:0;border-top:1px solid var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));margin:var(--co-spacing-xs, 4px) 0}`;
+const coMenuDividerCss = () => `:host{display:block}.co-menu-divider{border:0;border-top:1px solid var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));margin:var(--co-spacing-xs, 4px) 0}.co-menu-divider{border-top-color:var(--co-menu-divider-color, var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08)));margin:var(--co-menu-divider-margin, var(--co-spacing-xs, 4px) 0)}`;
 
 const CoMenuDivider = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     render() {
-        return h("hr", { key: '9896239f2395bd79f45309fb61e0a0173572947a', class: "co-menu-divider", role: "separator" });
+        return h("hr", { key: '7ec669cd5b23822d5ac9e94bf6f9d729222bc107', class: "co-menu-divider", role: "separator" });
     }
 };
 CoMenuDivider.style = coMenuDividerCss();

package/dist/esm/co-menu-item.entry.js

@@ -1,42 +1,7 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DJkaRtbb.js';
+import { s as sideOfPlacement, S as SUBMENU_SIDE_ATTR, a as submenuPlacement, b as menuOpensUp, i as inheritedSubmenuSide } from './submenu-DU-KOQ8L.js';
 
-/** Atributo con el que un `co-menu-item` publica hacia sus hijos el lado al que
- *  su propio submenú terminó abriendo (post-flip). Lo escribe el componente al
- *  recibir el `coPlacement` del popover. */
-const SUBMENU_SIDE_ATTR = 'submenu-side';
-/** Lado horizontal de un placement ya resuelto; null si es vertical (no hay
- *  nada que heredar en una cadena que abre hacia abajo). */
-function sideOfPlacement(placement) {
-    const side = placement.split('-')[0];
-    return side === 'left' || side === 'right' ? side : null;
-}
-/** Placement que debe pedir un submenú, dado el lado al que resolvió el submenú
- *  de su ancestro. Sin ancestro (primer nivel) mantiene el comportamiento
- *  histórico: a la derecha, y que el flip decida. */
-function submenuPlacement(parentSide) {
-    return parentSide === 'left' ? 'left-start' : 'right-start';
-}
-/**
- * Lado heredado del `co-menu-item` ancestro más cercano, o null si no hay (o si
- * todavía no se posicionó).
- *
- * Arranca en `parentElement` a propósito: `el.closest('co-menu-item')` se
- * matchearía al PROPIO elemento — un ítem con submenú se heredaría a sí mismo y
- * el fix sería un no-op.
- *
- * Funciona sobre light DOM: los `co-menu-item` anidados son hijos reales del
- * padre en el árbol (el `<slot/>` los proyecta visualmente pero no los mueve),
- * así que la cadena `parentElement` conserva el anidamiento a través de
- * cualquier wrapper intermedio.
- */
-function inheritedSubmenuSide(el) {
-    var _a;
-    const ancestor = (_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.closest('co-menu-item');
-    const side = ancestor === null || ancestor === void 0 ? void 0 : ancestor.getAttribute(SUBMENU_SIDE_ATTR);
-    return side === 'left' || side === 'right' ? side : null;
-}
-
-const coMenuItemCss = () => `:host{display:block}.co-menu-item__wrap{display:block}.co-menu-item{width:100%;display:flex;align-items:center;gap:var(--co-menu-item-gap, var(--co-spacing-sm, 8px));padding:var(--co-menu-item-padding, var(--co-spacing-sm, 8px) var(--co-spacing-md, 12px));background:transparent;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);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);min-height:var(--co-menu-item-height, 36px);box-sizing:border-box}.co-menu-item--dense{padding:var(--co-spacing-xs, 4px) var(--co-spacing-md, 12px);min-height:32px}.co-menu-item--selected{background: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))}.co-menu-item:focus-visible{outline:2px solid var(--co-semantic-border-focus, #2563eb);outline-offset:-2px}.co-menu-item--disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.co-menu-item--danger{color:var(--co-color-status-error, #aa2e1b)}.co-menu-item--danger:hover{background:var(--co-color-status-bg-error, #ffefef)}.co-menu-item__icon{display:inline-flex;align-items:center;flex-shrink:0;color:var(--co-menu-item-icon-color, currentColor)}.co-menu-item__check{display:inline-flex;align-items:center;flex-shrink:0;color:var(--co-semantic-text-default)}.co-menu-item__label{flex:1;display:inline-flex;align-items:center;gap:var(--co-spacing-xs, 4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-menu-item__label--stacked{flex-direction:column;align-items:flex-start;gap:1px}.co-menu-item__label-main{display:inline-flex;align-items:center;gap:var(--co-spacing-xs, 4px)}.co-menu-item__caption{font-size:var(--co-font-size-11, 11px);color:var(--co-semantic-text-muted);line-height:1.3;white-space:nowrap}.co-menu-item__suffix{display:inline-flex;align-items:center;gap:var(--co-spacing-xs, 4px);flex-shrink:0;color:var(--co-semantic-text-muted)}.co-menu-item--submenu-open .co-menu-item__suffix{color:var(--co-semantic-text-default)}.co-menu-item__trigger-wrap{display:block}.co-menu-item__wrap--submenu>co-popover{display:block;width:100%}.co-menu-item__submenu{background:var(--co-semantic-surface-secondary, #fff);border-radius:var(--co-border-radius-sm, 12px);box-shadow:var(--co-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04)),     inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));padding:var(--co-menu-padding, var(--co-spacing-xs, 4px));min-width:180px;display:flex;flex-direction:column;gap:2px;position:relative}.co-menu-item__submenu::before,.co-menu-item__submenu::after{content:'';position:absolute;top:0;bottom:0;width:6px;}.co-menu-item__submenu::before{left:-6px}.co-menu-item__submenu::after{right:-6px}`;
+const coMenuItemCss = () => `:host{display:block}.co-menu-item__wrap{display:block}.co-menu-item{width:100%;display:flex;align-items:center;gap:var(--co-menu-item-gap, var(--co-spacing-sm, 8px));padding:var(--co-menu-item-padding, var(--co-spacing-sm, 8px) var(--co-spacing-md, 12px));background:transparent;border:0;border-radius:var(--co-border-radius-xs, 8px);font-family:var(--co-font-family-primary);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);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);min-height:var(--co-menu-item-height, 36px);box-sizing:border-box}.co-menu-item--dense{padding:var(--co-spacing-xs, 4px) var(--co-spacing-md, 12px);min-height:32px}.co-menu-item--selected{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-menu-item-hover-bg, var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04)))}.co-menu-item:focus-visible{outline:2px solid var(--co-semantic-border-focus, #2563eb);outline-offset:-2px}.co-menu-item--disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.co-menu-item--danger{color:var(--co-color-status-error, #aa2e1b)}.co-menu-item--danger:hover{background:var(--co-color-status-bg-error, #ffefef)}.co-menu-item__icon{display:inline-flex;align-items:center;flex-shrink:0;color:var(--co-menu-item-icon-color, currentColor)}.co-menu-item__check{display:inline-flex;align-items:center;flex-shrink:0;color:var(--co-menu-item-color, var(--co-semantic-text-default))}.co-menu-item__label{flex:1;display:inline-flex;align-items:center;gap:var(--co-spacing-xs, 4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-menu-item__label--stacked{flex-direction:column;align-items:flex-start;gap:1px}.co-menu-item__label-main{display:inline-flex;align-items:center;gap:var(--co-spacing-xs, 4px)}.co-menu-item__caption{font-size:var(--co-font-size-11, 11px);color:var(--co-semantic-text-muted);line-height:1.3;white-space:nowrap}.co-menu-item__suffix{display:inline-flex;align-items:center;gap:var(--co-spacing-xs, 4px);flex-shrink:0;color:var(--co-semantic-text-muted)}.co-menu-item--submenu-open .co-menu-item__suffix{color:var(--co-semantic-text-default)}.co-menu-item__trigger-wrap{display:block}.co-menu-item__wrap--submenu>co-popover{display:block;width:100%}.co-menu-item__submenu{background:var(--co-semantic-surface-secondary, #fff);border-radius:var(--co-border-radius-sm, 12px);box-shadow:var(--co-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04)),     inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));padding:var(--co-menu-padding, var(--co-spacing-xs, 4px));min-width:180px;display:flex;flex-direction:column;gap:2px;position:relative}.co-menu-item__submenu::before,.co-menu-item__submenu::after{content:'';position:absolute;top:0;bottom:0;width:6px;}.co-menu-item__submenu::before{left:-6px}.co-menu-item__submenu::after{right:-6px}.co-menu-item__check--leading{width:12px;justify-content:center}`;
 
 const CoMenuItem = class {
     constructor(hostRef) {
@@ -51,6 +16,14 @@ const CoMenuItem = class {
         /** 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. */
@@ -134,6 +107,20 @@ const CoMenuItem = class {
             }
         };
     }
+    /** 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). */
@@ -171,7 +158,7 @@ const CoMenuItem = class {
         // 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
@@ -208,16 +195,27 @@ const CoMenuItem = class {
                 '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)))));
     }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "submenuOpen": [{
+                "onSubmenuOpenChange": 0
+            }]
+    }; }
 };
 CoMenuItem.style = coMenuItemCss();
 

package/dist/esm/co-menu.entry.js

@@ -1,6 +1,7 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DJkaRtbb.js';
+import { M as MENU_DIRECTION_ATTR, m as menuDirectionOfPlacement } from './submenu-DU-KOQ8L.js';
 
-const coMenuCss = () => `:host{display:contents}.co-menu{background:var(--co-semantic-surface-secondary, #fff);border-radius:var(--co-border-radius-sm, 12px);box-shadow:var(--co-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04)),     inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));padding:var(--co-menu-padding, var(--co-spacing-xs, 4px));min-width:200px;display:flex;flex-direction:column;gap:2px;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-default)}`;
+const coMenuCss = () => `:host{display:contents}.co-menu{background:var(--co-semantic-surface-secondary, #fff);border-radius:var(--co-border-radius-sm, 12px);box-shadow:var(--co-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04)),     inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));padding:var(--co-menu-padding, var(--co-spacing-xs, 4px));min-width:200px;display:flex;flex-direction:column;gap:2px;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-default)}.co-menu{gap:var(--co-menu-gap, 2px);min-width:var(--co-menu-min-width, 200px);box-shadow:var(--co-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04)),     inset 0 0 0 1px var(--co-menu-border-color, var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08)))}.co-menu{border-radius:var(--co-menu-radius, var(--co-border-radius-sm, 12px));max-height:var(--co-menu-max-height, none);overflow:var(--co-menu-overflow, visible)}:host([surface='dark']) .co-menu{background:var(--co-semantic-surface-primary);color:var(--co-semantic-text-inverse);box-shadow:var(--co-menu-shadow, none);border-radius:var(--co-menu-radius, var(--co-border-radius-xs, 8px));min-width:auto}:host([surface='dark']) ::slotted(co-menu-item){--co-menu-item-color:var(--co-semantic-text-inverse);--co-menu-item-hover-bg:var(--co-color-opacity-blanco-16, rgba(255, 255, 255, 0.16));--co-menu-item-selected-bg:transparent}:host([surface='dark']) ::slotted(co-menu-divider){--co-menu-divider-color:var(--co-color-opacity-blanco-16, rgba(255, 255, 255, 0.16))}`;
 
 const CoMenu = class {
     constructor(hostRef) {
@@ -15,6 +16,24 @@ const CoMenu = class {
         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;
@@ -37,6 +56,11 @@ const CoMenu = class {
             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();
@@ -62,6 +86,16 @@ const CoMenu = class {
             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);
     }
@@ -73,9 +107,27 @@ const CoMenu = class {
     /** 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;
@@ -90,7 +142,14 @@ const CoMenu = class {
         (_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' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -99,6 +158,23 @@ const CoMenu = class {
             }]
     }; }
 };
+/** 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;
+    });
+}
 CoMenu.style = coMenuCss();
 
 export { CoMenu as co_menu };