@prolibu-suite/cobalt-core 0.9.6 → 0.10.1

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CrtiywTB.js';
-import { l as langFromLocale } from './dateI18n-CnNpoKwg.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.js';
+import { l as langFromLocale } from './dateI18n-jYd9gu_c.js';
 
 /**
  * Built-in UI string dictionary for co-lightbox (aria labels + tooltips).
@@ -43,7 +43,7 @@ function getLightboxStrings(locale) {
     return DICT[langFromLocale(locale)];
 }
 
-const coLightboxCss = () => `:host{display:contents;font-family:var(--co-font-family-primary)}.co-lightbox{position:fixed;inset:0;margin:0;border:0;padding:0;width:auto;height:auto;overflow:visible;color:inherit;z-index:1100;display:flex;align-items:center;justify-content:center;background:var(--co-color-opacity-negro-80);opacity:0;pointer-events:none;transition:opacity var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-lightbox--open{opacity:1;pointer-events:auto}.co-lightbox__toolbar{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-md) var(--co-spacing-lg);background:linear-gradient(var(--co-color-opacity-negro-50), transparent)}.co-lightbox__caption{flex:1;min-width:0;color:var(--co-color-base-blanco);font-size:var(--co-font-size-14);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-lightbox__zoom{display:flex;align-items:center;gap:var(--co-spacing-xxs);padding:0 var(--co-spacing-xs);border-radius:var(--co-border-radius-full);background:var(--co-color-opacity-blanco-8)}.co-lightbox__btn{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 var(--co-spacing-xs);border:none;border-radius:var(--co-border-radius-full);background:transparent;color:var(--co-color-base-blanco);font-family:inherit;font-size:var(--co-font-size-13, 13px);cursor:pointer;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-lightbox__btn:hover{background:var(--co-color-opacity-blanco-16)}.co-lightbox__zoom-value{min-width:48px;font-variant-numeric:tabular-nums}.co-lightbox__stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}.co-lightbox__img{max-width:calc(100vw - var(--co-spacing-5xl) * 2);max-height:calc(100vh - var(--co-spacing-5xl) * 2);border-radius:var(--co-border-radius-xs);user-select:none;transition:transform var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-lightbox__img--zoomed{cursor:grab}.co-lightbox__img--dragging{cursor:grabbing;transition:none}.co-lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:none;border-radius:var(--co-border-radius-full);background:var(--co-color-opacity-blanco-8);color:var(--co-color-base-blanco);cursor:pointer;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-lightbox__nav:hover{background:var(--co-color-opacity-blanco-25)}.co-lightbox__nav--prev{left:var(--co-spacing-lg)}.co-lightbox__nav--next{right:var(--co-spacing-lg)}.co-lightbox__counter{position:absolute;bottom:var(--co-spacing-lg);left:50%;transform:translateX(-50%);z-index:2;padding:var(--co-spacing-xs) var(--co-spacing-md);border-radius:var(--co-border-radius-full);background:var(--co-color-opacity-blanco-8);color:var(--co-color-base-blanco);font-size:var(--co-font-size-13, 13px);font-variant-numeric:tabular-nums}`;
+const coLightboxCss = () => `:host{display:contents;font-family:var(--co-font-family-primary)}.co-lightbox{position:fixed;inset:0;margin:0;border:0;padding:0;width:auto;height:auto;overflow:visible;color:inherit;z-index:1100;display:flex;align-items:center;justify-content:center;background:var(--co-color-opacity-negro-80);opacity:0;pointer-events:none;transition:opacity var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-lightbox--open{opacity:1;pointer-events:auto}.co-lightbox__toolbar{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-md) var(--co-spacing-lg);background:linear-gradient(var(--co-color-opacity-negro-50), transparent)}.co-lightbox__caption{flex:1;min-width:0;color:var(--co-color-base-blanco);font-size:var(--co-font-size-14);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-lightbox__zoom{display:flex;align-items:center;gap:var(--co-spacing-xxs);padding:0 var(--co-spacing-xs);border-radius:var(--co-border-radius-full);background:var(--co-color-opacity-blanco-8)}.co-lightbox__btn{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 var(--co-spacing-xs);border:none;border-radius:var(--co-border-radius-full);background:transparent;color:var(--co-color-base-blanco);font-family:inherit;font-size:var(--co-font-size-13, 13px);cursor:pointer;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-lightbox__btn:hover{background:var(--co-color-opacity-blanco-16)}.co-lightbox__zoom-value{min-width:48px;font-variant-numeric:tabular-nums}.co-lightbox__stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}.co-lightbox__img{max-width:calc(100vw - var(--co-spacing-5xl) * 2);max-height:calc(100vh - var(--co-spacing-5xl) * 2);border-radius:var(--co-border-radius-xs);user-select:none;transition:transform var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-lightbox__video{--co-lb-ar:1.7778;flex:0 0 auto;width:auto;aspect-ratio:var(--co-lb-ar);height:min(     calc(100vh - var(--co-spacing-5xl) * 2),     calc((100vw - var(--co-spacing-5xl) * 2) / var(--co-lb-ar)),     calc(1200px / var(--co-lb-ar))   );border-radius:var(--co-border-radius-xs);overflow:hidden}.co-lightbox__img--zoomed{cursor:grab}.co-lightbox__img--dragging{cursor:grabbing;transition:none}.co-lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:none;border-radius:var(--co-border-radius-full);background:var(--co-color-opacity-blanco-8);color:var(--co-color-base-blanco);cursor:pointer;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-lightbox__nav:hover{background:var(--co-color-opacity-blanco-25)}.co-lightbox__nav--prev{left:var(--co-spacing-lg)}.co-lightbox__nav--next{right:var(--co-spacing-lg)}.co-lightbox__counter{position:absolute;bottom:var(--co-spacing-lg);left:50%;transform:translateX(-50%);z-index:2;padding:var(--co-spacing-xs) var(--co-spacing-md);border-radius:var(--co-border-radius-full);background:var(--co-color-opacity-blanco-8);color:var(--co-color-base-blanco);font-size:var(--co-font-size-13, 13px);font-variant-numeric:tabular-nums}`;
 
 const MIN_SCALE = 1;
 const MAX_SCALE = 8;
@@ -98,10 +98,32 @@ const CoLightbox = class {
         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;
@@ -110,17 +132,20 @@ const CoLightbox = class {
                     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
             }
@@ -130,6 +155,27 @@ const CoLightbox = class {
         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);
@@ -170,6 +216,14 @@ const CoLightbox = class {
         };
         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())
@@ -191,6 +245,12 @@ const CoLightbox = class {
     }
     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)
@@ -198,6 +258,7 @@ const CoLightbox = class {
     }
     disconnectedCallback() {
         this.detachKeyListener();
+        this.pauseVideo();
         clearTimeout(this.demoteTimer);
     }
     componentDidRender() {
@@ -215,12 +276,19 @@ const CoLightbox = class {
             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;
         }
@@ -245,18 +313,66 @@ const CoLightbox = class {
     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) {
@@ -275,6 +391,9 @@ const CoLightbox = class {
         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);
@@ -286,8 +405,65 @@ const CoLightbox = class {
             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 ────────────────────────────────────────────────
@@ -336,20 +512,27 @@ const CoLightbox = class {
         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))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-CrtiywTB.js';
+import { r as registerInstance, c as createEvent, h } from './index-DH5lfRNj.js';
 
 const coListFooterCss = () => `:host{display:block}.co-list-footer{display:flex;gap:var(--co-spacing-sm2);padding-top:var(--co-spacing-sm2)}.co-list-footer__btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12, 12px);font-weight:500;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;cursor:pointer;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box;min-height:32px}.co-list-footer__btn:hover{opacity:0.85}.co-list-footer__btn:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px}.co-list-footer__btn--secondary{background:transparent;color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-default)}.co-list-footer__btn--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none}`;
 
@@ -15,7 +15,7 @@ const CoListFooter = class {
         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' })));
     }
 };
 CoListFooter.style = coListFooterCss();

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-CrtiywTB.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.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: '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" }))));
     }
     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-CrtiywTB.js';
+import { r as registerInstance, h } from './index-DH5lfRNj.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-CrtiywTB.js';
+import { r as registerInstance, h } from './index-DH5lfRNj.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: '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)" })))))));
     }
 };
 CoMediaThumb.style = coMediaThumbCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-CrtiywTB.js';
+import { r as registerInstance, h } from './index-DH5lfRNj.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}`;
 
@@ -7,7 +7,7 @@ const CoMenuDivider = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return h("hr", { key: 'be5b2213b3e1d8bf8a0b3c238de90598117b5fce', class: "co-menu-divider", role: "separator" });
+        return h("hr", { key: '9896239f2395bd79f45309fb61e0a0173572947a', class: "co-menu-divider", role: "separator" });
     }
 };
 CoMenuDivider.style = coMenuDividerCss();

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

@@ -1,6 +1,42 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CrtiywTB.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.js';
 
-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__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}`;
+/** 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 CoMenuItem = class {
     constructor(hostRef) {
@@ -21,6 +57,11 @@ const CoMenuItem = class {
         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;
@@ -72,6 +113,16 @@ const CoMenuItem = class {
                 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`
@@ -109,7 +160,37 @@ const CoMenuItem = class {
         }
         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
@@ -134,7 +215,7 @@ const CoMenuItem = class {
         }
         // 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)))));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CrtiywTB.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.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)}`;
 
@@ -90,7 +90,7 @@ 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: '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' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {