@prolibu-suite/cobalt-core 0.9.6 → 0.10.1

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

@@ -1,15 +1,20 @@
 import { h } from "@stencil/core";
+import { langFromLocale } from "../../utils/dateI18n";
 import { getLightboxStrings } from "../../utils/lightboxI18n";
 const MIN_SCALE = 1;
 const MAX_SCALE = 8;
 const WHEEL_FACTOR = 1.15;
 const DBLCLICK_SCALE = 2.5;
 /**
- * Fullscreen image viewer — dark scrim, zoom (wheel / buttons / double-click,
+ * Fullscreen media viewer — dark scrim, zoom (wheel / buttons / double-click,
  * anchored at the cursor), drag-to-pan while zoomed, and prev/next carousel
- * when more than one image is provided. Keyboard: Escape closes, arrows
+ * when more than one item is provided. Keyboard: Escape closes, arrows
  * navigate, +/- zoom, 0 resets.
  *
+ * An item with `kind: 'video'` mounts a `co-video` instead of an `<img>`:
+ * zoom/pan make no sense over a seek bar, so they are disabled (and their
+ * toolbar cluster hidden) for as long as that slide is active.
+ *
  * Controlled like co-modal: the host owns `open` and reacts to `coClose`.
  *
  * CAVEAT: the root is `position: fixed`, so an ancestor with `transform`,
@@ -21,6 +26,7 @@ const DBLCLICK_SCALE = 2.5;
  * @part overlay - Fullscreen scrim container
  * @part toolbar - Top bar (caption + zoom controls + actions)
  * @part image - The active image element
+ * @part video - The co-video player on a video slide
  * @part prev - Previous-image arrow button
  * @part next - Next-image arrow button
  * @part counter - The "i / n" indicator
@@ -72,10 +78,32 @@ export class CoLightbox {
         this.handleKey = (e) => {
             if (!this.open)
                 return;
+            if (e.key === 'Escape') {
+                // This Escape belongs to something else — the browser leaving fullscreen,
+                // or the player closing its speed menu. Either way the viewer must NOT
+                // close... and must still swallow the event: an ancestor co-drawer also
+                // listens for Escape on document, so merely returning here would close
+                // THAT instead, tearing down the drawer (and its unsaved edits) under a
+                // user who only wanted to leave fullscreen.
+                if (this.escapeBelongsToPlayer()) {
+                    e.stopPropagation();
+                    return;
+                }
+                this.requestClose();
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
+            if (e.key === 'Tab') {
+                this.trapTab(e);
+                return;
+            }
+            // While the player holds focus it owns the keyboard — space toggles play,
+            // arrows seek. Stealing those would leave the video keyboard-operable
+            // everywhere except when the user is actually inside it.
+            if (this.isFocusInPlayer())
+                return;
             switch (e.key) {
-                case 'Escape':
-                    this.requestClose();
-                    break;
                 case 'ArrowLeft':
                     this.goTo(-1);
                     break;
@@ -84,17 +112,20 @@ export class CoLightbox {
                     break;
                 case '+':
                 case '=':
+                    if (this.isVideoSlide)
+                        return;
                     this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0);
                     break;
                 case '-':
+                    if (this.isVideoSlide)
+                        return;
                     this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0);
                     break;
                 case '0':
+                    if (this.isVideoSlide)
+                        return;
                     this.resetView();
                     break;
-                case 'Tab':
-                    this.trapTab(e);
-                    return;
                 default:
                     return; // unhandled keys pass through untouched
             }
@@ -104,6 +135,27 @@ export class CoLightbox {
         this.requestClose = () => {
             this.coClose.emit();
         };
+        // ── Video slide ───────────────────────────────────────────────────
+        this.mountPlayer = (el) => {
+            if (!el || el === this.playerEl)
+                return;
+            this.playerEl = el;
+            this.tryAutoplay();
+        };
+        /**
+         * Ajusta la caja del slide al frame real. Sin esto el player es un rectángulo
+         * FIJO (ancho tope × alto tope) y el `object-fit: contain` deja franjas negras
+         * a los costados: en un vertical — el caso típico, una grabación de pantalla —
+         * la losa negra tapa media pantalla y se traga los clicks que el usuario dirige
+         * al scrim para cerrar.
+         */
+        this.handlePlayerReady = (e) => {
+            var _a;
+            const { width, height } = e.detail || {};
+            if (!width || !height)
+                return; // el navegador todavía no sabe el tamaño
+            (_a = this.playerEl) === null || _a === void 0 ? void 0 : _a.style.setProperty('--co-lb-ar', String(width / height));
+        };
         this.handleWheel = (e) => {
             e.preventDefault();
             const [px, py] = this.stagePoint(e);
@@ -144,6 +196,14 @@ export class CoLightbox {
         };
         this.stop = (e) => e.stopPropagation();
     }
+    get activeItem() {
+        return this.parsedImages[this.index];
+    }
+    /** Zoom, pan and the toolbar's zoom cluster are all gated on this. */
+    get isVideoSlide() {
+        var _a;
+        return ((_a = this.activeItem) === null || _a === void 0 ? void 0 : _a.kind) === 'video';
+    }
     get parsedImages() {
         const raw = this.images;
         if (typeof raw !== 'string' || !raw.trim())
@@ -165,6 +225,12 @@ export class CoLightbox {
     }
     componentWillLoad() {
         this.index = this.clampIndex(this.startIndex);
+        // Hosts that create the viewer imperatively flip `open` on the next frame,
+        // which lands BEFORE the lazy chunk hydrates — and Stencil skips @Watch
+        // callbacks fired before the instance exists, so `onOpenChange` never runs
+        // on that path (same reason connectedCallback re-checks `open` below).
+        // Seeding here is what makes a viewer opened straight onto a video play.
+        this.pendingAutoplay = this.open;
     }
     connectedCallback() {
         if (this.open)
@@ -172,6 +238,7 @@ export class CoLightbox {
     }
     disconnectedCallback() {
         this.detachKeyListener();
+        this.pauseVideo();
         clearTimeout(this.demoteTimer);
     }
     componentDidRender() {
@@ -189,12 +256,19 @@ export class CoLightbox {
             this.resetView();
             this.preloadNeighbors();
             this.attachKeyListener();
+            this.pendingAutoplay = true;
+            this.tryAutoplay();
             // aria-modal dialog: move focus in on open, restore it on close.
             this.previouslyFocused = (_a = document.activeElement) !== null && _a !== void 0 ? _a : undefined;
             this.pendingFocus = true;
         }
         else {
             this.detachKeyListener();
+            // The host fades the viewer out before dropping the node; a video left
+            // playing keeps its audio going through the whole fade (and beyond, if
+            // the node is detached rather than removed).
+            this.pauseVideo();
+            this.pendingAutoplay = false;
             (_c = (_b = this.previouslyFocused) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b);
             this.previouslyFocused = undefined;
         }
@@ -219,18 +293,66 @@ export class CoLightbox {
     detachKeyListener() {
         window.removeEventListener('keydown', this.handleKey, { capture: true });
     }
-    /** Minimal focus trap: Tab cycles through the viewer's own buttons. */
-    trapTab(e) {
+    /**
+     * Minimal focus trap: Tab cycles through the viewer's own buttons — plus the
+     * player's, on a video slide. A shadow root is opaque to `querySelectorAll`,
+     * so co-video's controls have to be pulled in explicitly; without this the
+     * trap would cycle around the player and its play/seek would be unreachable
+     * by keyboard. (Safe because the viewer pins the controls visible: an
+     * auto-hidden control bar is `opacity: 0` and would take focus invisibly.)
+     */
+    focusables() {
+        var _a, _b;
+        const nodes = Array.from((_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, co-video')) !== null && _b !== void 0 ? _b : []);
+        return nodes.flatMap((el) => {
+            var _a, _b;
+            return el.tagName === 'CO-VIDEO'
+                ? // `button` alone is not enough: the seek bar and the volume slider are
+                    // `role="slider"` divs, and the player's own keyboard shortcuts live on
+                    // its `role="region"` container — all three are tabindex 0, and all
+                    // three would be skipped by a button-only sweep.
+                    // `:not([tabindex="-1"])` importa: co-video marca así su overlay de
+                    // play grande, que se DESMONTA al activarse — enfocarlo tira el foco
+                    // fuera del visor en el mismo gesto.
+                    Array.from((_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button:not([tabindex="-1"]), [tabindex="0"]')) !== null && _b !== void 0 ? _b : [])
+                : [el];
+        });
+    }
+    /** Deepest focused element, walking down through nested shadow roots. */
+    deepActive() {
         var _a, _b, _c;
-        const focusables = Array.from((_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button')) !== null && _b !== void 0 ? _b : []);
+        let a = (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) !== null && _b !== void 0 ? _b : null;
+        while ((_c = a === null || a === void 0 ? void 0 : a.shadowRoot) === null || _c === void 0 ? void 0 : _c.activeElement)
+            a = a.shadowRoot.activeElement;
+        return a;
+    }
+    /** True while the player owns this Escape: it is fullscreen (co-video enters
+     *  through the webkit-prefixed API where that is all Safari has, so both
+     *  spellings are checked), or its speed menu is open on top of it. */
+    escapeBelongsToPlayer() {
+        var _a, _b;
+        const doc = document;
+        if (doc.fullscreenElement || doc.webkitFullscreenElement)
+            return true;
+        return !!((_b = (_a = this.playerEl) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.co-video__speed-menu'));
+    }
+    isFocusInPlayer() {
+        var _a;
+        const player = this.playerEl;
+        return !!player && ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === player;
+    }
+    trapTab(e) {
+        const focusables = this.focusables();
         if (focusables.length === 0)
             return;
         e.preventDefault();
         e.stopPropagation();
-        const active = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.activeElement;
-        const i = focusables.indexOf(active);
         const delta = e.shiftKey ? -1 : 1;
-        const next = focusables[(i + delta + focusables.length) % focusables.length];
+        const i = focusables.indexOf(this.deepActive());
+        // Sin foco previo (i === -1) el módulo daría el ANTEÚLTIMO con Shift+Tab.
+        const next = i < 0
+            ? focusables[delta > 0 ? 0 : focusables.length - 1]
+            : focusables[(i + delta + focusables.length) % focusables.length];
         next.focus();
     }
     clampIndex(i) {
@@ -249,6 +371,9 @@ export class CoLightbox {
         const n = this.parsedImages.length;
         if (n < 2)
             return;
+        this.pauseVideo();
+        // From here on the user is driving: nothing plays unless they press play.
+        this.pendingAutoplay = false;
         this.index = (this.index + delta + n) % n;
         this.resetView();
         this.coChange.emit(this.index);
@@ -260,8 +385,65 @@ export class CoLightbox {
             return;
         for (const d of [1, -1]) {
             const neighbor = imgs[(this.index + d + imgs.length) % imgs.length];
-            if (neighbor === null || neighbor === void 0 ? void 0 : neighbor.src)
-                new Image().src = neighbor.src;
+            if (!neighbor)
+                continue;
+            // A video's `src` is the media: pushing it through `new Image()` would
+            // download the whole file only to fail at decode. Its poster is what
+            // the slide paints first, so that is what's worth having warm.
+            const src = neighbor.kind === 'video' ? neighbor.poster : neighbor.src;
+            if (src)
+                new Image().src = src;
+        }
+    }
+    /**
+     * Autoplay rides the click that opened the viewer instead of co-video's own
+     * `autoplay` prop, which only fires when muted — and a silent video reads as
+     * a broken one. If the browser refuses the unmuted start (Safari), the
+     * rejection is swallowed and the player simply waits on its play button.
+     *
+     * Called from BOTH sides of a race: the player mounts on the first render,
+     * which hosts do while still closed (co-file-field fades the viewer in on
+     * the next frame), so `open` usually arrives second — but a host that
+     * renders the viewer already open flips the order.
+     */
+    tryAutoplay() {
+        var _a;
+        if (!this.pendingAutoplay || !this.open)
+            return;
+        if (!this.isVideoSlide) {
+            // Opened onto an image: the chance is SPENT, not saved. Leaving the flag
+            // armed would make the first video the user arrows to start by itself.
+            this.pendingAutoplay = false;
+            return;
+        }
+        const player = this.playerEl;
+        if (!player)
+            return;
+        this.pendingAutoplay = false;
+        Promise.resolve((_a = player.componentOnReady) === null || _a === void 0 ? void 0 : _a.call(player))
+            .then(() => {
+            var _a;
+            // Revalidar: entre el click y el chunk lazy de co-video puede pasar
+            // cualquier cosa — el usuario cierra el visor o flecha a otro slide, y
+            // un play() a ciegas deja audio sonando sobre una pantalla que ya no
+            // muestra ese video (o que ya no muestra nada).
+            if (!this.open || this.playerEl !== player || !this.isVideoSlide)
+                return;
+            return (_a = player.play) === null || _a === void 0 ? void 0 : _a.call(player);
+        })
+            .catch(() => {
+            /* blocked by the autoplay policy — the play button takes over */
+        });
+    }
+    pauseVideo() {
+        var _a, _b;
+        try {
+            const p = (_b = (_a = this.playerEl) === null || _a === void 0 ? void 0 : _a.pause) === null || _b === void 0 ? void 0 : _b.call(_a);
+            if (p && typeof p.catch === 'function')
+                p.catch(() => { });
+        }
+        catch (_c) {
+            /* not hydrated yet — nothing is playing either */
         }
     }
     // ── Zoom / pan ────────────────────────────────────────────────
@@ -310,20 +492,27 @@ export class CoLightbox {
         const imgs = this.parsedImages;
         const img = imgs[this.index];
         const multi = imgs.length > 1;
+        const video = (img === null || img === void 0 ? void 0 : img.kind) === 'video';
         const counter = s.counter
             .replace('{i}', String(this.index + 1))
             .replace('{n}', String(imgs.length));
-        return (h("div", { key: 'b3999d685ec6dc1c12bf430eba3bc0982b2fd4d3', class: { 'co-lightbox': true, 'co-lightbox--open': this.open }, part: "overlay", role: "dialog", "aria-modal": "true", "aria-label": img === null || img === void 0 ? void 0 : img.alt, popover: "manual", ref: this.syncTopLayer, onClick: this.requestClose }, img && (h("div", { key: '3c757d34339330ddc8179869771548d2e10eeb86', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: 'ea97b286b84225423f46de0241fb7ab5f86a615e', class: "co-lightbox__caption", title: img.alt }, img.alt), h("div", { key: '273f23d1c551f459ed2d2b7d2dbdccf43beba000', class: "co-lightbox__zoom" }, h("button", { key: '7af226c8ea17183f2555e9983627ecf29189ddb3', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomOut, title: s.zoomOut, onClick: () => this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '085ed06e6593b99e13cf36009149d9cf90524280', name: "minus", size: 16 })), h("button", { key: 'f4df42781faa209de6b8ebbcfdd58c9c605a7977', class: "co-lightbox__btn co-lightbox__zoom-value", type: "button", "aria-label": s.zoomReset, title: s.zoomReset, onClick: () => this.resetView() }, Math.round(this.scale * 100), "%"), h("button", { key: 'd1cbe7e831ff8b1f76927c87cc5929d5d29aae02', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomIn, title: s.zoomIn, onClick: () => this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: 'e10fb035385e19dab132fffc4b8d962e720c379e', name: "plus", size: 16 }))), h("button", { key: 'f500ccfea7a04b5f47cf786579cd1d1f138cbbd9', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: 'd9098c2bf45c888681b5982dea6d59b9a5e3d89d', name: "arrow-square-out", size: 16 })), h("button", { key: 'b61f45f9df568c4441cc764a88d74ba31debd16c', class: "co-lightbox__btn", part: "close", type: "button", "aria-label": s.close, title: s.close, ref: (el) => (this.closeBtnEl = el), onClick: this.requestClose }, h("co-icon", { key: '787d1be07f3befb406beddbb7853d1f604fbfa30', name: "x", size: 16 })))), img && (h("div", { key: 'd4e4dcab4f5b34cfade28927cb484eb0fade7c6c', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, h("img", { key: '06ce0ba917e7007da67a5db9372457286d33d84c', class: {
+        return (h("div", { key: '1a3c29e98fd491c92b82ba9d9296588609cdd006', class: { 'co-lightbox': true, 'co-lightbox--open': this.open }, part: "overlay", role: "dialog", "aria-modal": "true", "aria-label": img === null || img === void 0 ? void 0 : img.alt, popover: "manual", ref: this.syncTopLayer, onClick: this.requestClose }, img && (h("div", { key: 'cc9e9db83ef082deab744f259c4da63a58eb0c3b', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: 'ab3fa42e21008407f2cab377566a1793a96a8a50', class: "co-lightbox__caption", title: img.alt }, img.alt), !video && (h("div", { key: 'af8761111e7c5e0e7a838d8e69971cc2863ee9d4', class: "co-lightbox__zoom" }, h("button", { key: 'e73628b4fd25fa7c3ed9ca947fccd196e6433f84', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomOut, title: s.zoomOut, onClick: () => this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '371f4edc5141561b348ce36a8791fb81500248fa', name: "minus", size: 16 })), h("button", { key: 'e07adc772687ef65d97db5669ed235749e43c034', class: "co-lightbox__btn co-lightbox__zoom-value", type: "button", "aria-label": s.zoomReset, title: s.zoomReset, onClick: () => this.resetView() }, Math.round(this.scale * 100), "%"), h("button", { key: '29ed305a4f464e38c4b4ef331dbbfc35aa6fdc95', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomIn, title: s.zoomIn, onClick: () => this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '6b56559a4dad36bee62545deb426734450f64f58', name: "plus", size: 16 })))), h("button", { key: '53099c4e3dec82cfc9087e89916154ef4a8845f6', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: 'de160ed313ba0559cd1523f9f73fad7e3b167848', name: "arrow-square-out", size: 16 })), h("button", { key: 'd1658ff7b8d0fc22f1a489c0138a16077304a165', class: "co-lightbox__btn", part: "close", type: "button", "aria-label": s.close, title: s.close, ref: (el) => (this.closeBtnEl = el), onClick: this.requestClose }, h("co-icon", { key: 'fcbcbbf6001e67199b6ec7b99bde5f9f24537ca0', name: "x", size: 16 })))), img && (h("div", { key: '39cef6c2bd1bf3fe9f641778b48b618a62f1b5f8', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: video ? undefined : this.handleWheel }, video ? (h("co-video", { class: "co-lightbox__video", part: "video",
+            /* Keyed per slide: a fresh player is the only way to be sure
+               poster, error state and playback all start clean. */
+            key: `video-${this.index}`, ref: this.mountPlayer, src: img.src, poster: img.poster || '', aspectRatio: "auto", rounded: "none",
+            /* Auto-hiding controls go `opacity: 0` while staying
+               focusable — invisible focus in a viewer that traps Tab. */
+            controlsAutoHide: false, showSpeed: true, showPip: true, locale: langFromLocale(this.locale), onCoReady: this.handlePlayerReady, onClick: this.stop })) : (h("img", { class: {
                 'co-lightbox__img': true,
                 'co-lightbox__img--zoomed': this.scale > MIN_SCALE,
                 'co-lightbox__img--dragging': this.dragging,
-            }, part: "image", ref: (el) => (this.imgEl = el), src: img.src, alt: img.alt || '', draggable: false, style: { transform: `translate(${this.tx}px, ${this.ty}px) scale(${this.scale})` }, onClick: this.stop, onDblClick: this.handleDblClick, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp }))), img && multi && (h("button", { key: 'c0af13776f424508ef953c40efe203e8a9f0ffab', class: "co-lightbox__nav co-lightbox__nav--prev", part: "prev", type: "button", "aria-label": s.prevImage, title: s.prevImage, onClick: (e) => {
+            }, part: "image", ref: (el) => (this.imgEl = el), src: img.src, alt: img.alt || '', draggable: false, style: { transform: `translate(${this.tx}px, ${this.ty}px) scale(${this.scale})` }, onClick: this.stop, onDblClick: this.handleDblClick, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp })))), img && multi && (h("button", { key: 'a161402e30021374f608755ea0a5dc6ccee0e99a', class: "co-lightbox__nav co-lightbox__nav--prev", part: "prev", type: "button", "aria-label": s.prevImage, title: s.prevImage, onClick: (e) => {
                 e.stopPropagation();
                 this.goTo(-1);
-            } }, h("co-icon", { key: '17cb67246511c6a83a06ce594060be52c9f46cd0', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: 'b2e8ab1029b75ef8db09c7141bf035e3aa67d156', class: "co-lightbox__nav co-lightbox__nav--next", part: "next", type: "button", "aria-label": s.nextImage, title: s.nextImage, onClick: (e) => {
+            } }, h("co-icon", { key: '649171d5330299b3ccb368bb0b434c643157c3f5', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: '5cc5d07467e1ecf9c27094947ce421c28c35472d', class: "co-lightbox__nav co-lightbox__nav--next", part: "next", type: "button", "aria-label": s.nextImage, title: s.nextImage, onClick: (e) => {
                 e.stopPropagation();
                 this.goTo(1);
-            } }, h("co-icon", { key: '1ab70f0b03bb640b9df26420df704b041b14a5a4', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: '116097d4c98a45c150033b38dbf1e83f12602449', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
+            } }, h("co-icon", { key: 'd9d32607a6b4350009db5c1719987aa8afcbb007', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: 'a23f10a2c9d82c4295285feeedfbe0d9016f4db0', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
     }
     static get is() { return "co-lightbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,7 @@ export class CoListFooter {
         this.handleSecondary = () => this.coSecondary.emit();
     }
     render() {
-        return (h("div", { key: 'd522b5d67635a4a7751a7b4760ccca1133f6e8f1', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (h("button", { key: '3e1ba3d6e14b48014dce5c91a1a39baba5a14556', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && h("co-icon", { key: '9b31eb5104f0109c93a11ddcef4029517348c9da', name: this.secondaryIcon, size: 16 }), h("span", { key: '1d097b4874f5379a7e6f2f9882ba83b0828d1099' }, this.secondaryLabel))), this.primaryLabel && (h("button", { key: '7ffa258f1778a0ae31b574a3ccb1319162648fb9', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && h("co-icon", { key: 'd75c5a25355c3b65222889b5a1ea75ecb559c05c', name: this.primaryIcon, size: 16 }), h("span", { key: '3a3cb4f049c8d590088182ef486304b291963aa4' }, this.primaryLabel))), h("slot", { key: '8e7579f147928f28f3f119ebb5423efb85922995' })));
+        return (h("div", { key: 'fbf4ec72aa2f6814b558d51c44592e784355751e', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (h("button", { key: '78abef0f79117263c7d30e5ce37a876d193ba5e4', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && h("co-icon", { key: 'a765ab5be51d7eb5791d3161cf5c7d3688fa0fd7', name: this.secondaryIcon, size: 16 }), h("span", { key: '0f5d57201bcd6ce40439c26916e01f1e37fcd87e' }, this.secondaryLabel))), this.primaryLabel && (h("button", { key: '27aa3b20666c9fe2a6fb7f28a9ca6e2542dd8fd7', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && h("co-icon", { key: 'bafe2ebb9cfb2cc26c682ae9b419b09a512652f8', name: this.primaryIcon, size: 16 }), h("span", { key: 'c3c9baead987beea02ead3a65d3372c5532a67b8' }, this.primaryLabel))), h("slot", { key: '7a1ce48c91cc95c320c4d680053f42555e601187' })));
     }
     static get is() { return "co-list-footer"; }
     static get encapsulation() { return "shadow"; }

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

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

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

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

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

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

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

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

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

@@ -122,6 +122,15 @@
 
 .co-menu-item__trigger-wrap { display: block; }
 
+/* El trigger de un submenú va envuelto en co-popover, cuyo :host es inline-block:
+   sin esto la fila se encoge a su contenido y la flecha queda pegada al texto en
+   vez de al borde derecho del panel (las filas hoja no pasan por co-popover). Una
+   regla del scope exterior sobre el host gana a su :host. */
+.co-menu-item__wrap--submenu > co-popover {
+  display: block;
+  width: 100%;
+}
+
 .co-menu-item__submenu {
   /* surface-secondary = base-blanco. NOT surface-primary (that's base-negro). */
   background: var(--co-semantic-surface-secondary, #fff);

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

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