@prolibu-suite/cobalt-core 0.9.6 → 0.10.0

package/dist/collection/components/co-icon-button/co-icon-button.js

@@ -26,6 +26,8 @@ export class CoIconButton {
         this.disabled = false;
         /** Accessible label */
         this.label = '';
+        /** Swap state: false → `icon`, true → `toggleIcon`. */
+        this.toggled = false;
         /** Icon weight */
         this.iconWeight = 'regular';
     }
@@ -44,16 +46,14 @@ export class CoIconButton {
                     : 'var(--co-border-radius-full)',
             }
             : undefined;
-        return (h("button", { key: 'f562372b80c9bc181be338a2a8572ea5ba7071a8', class: {
+        return (h("button", { key: '0dc2858366d546995a30d0dac2ed6db5d80943c9', class: {
                 'co-icon-button': true,
                 [`co-icon-button--${this.variant}`]: true,
                 [`co-icon-button--${this.shape}`]: true,
                 [`co-icon-button--${this.size}`]: true,
                 'co-icon-button--dark': this.surface === 'dark',
                 'co-icon-button--disabled': this.disabled,
-            }, style: boxStyle, disabled: this.disabled, "aria-label": this.label || this.icon, part: "button" }, this.icon
-            ? h("co-icon", { name: this.icon, weight: this.iconWeight, size: resolvedIconSize })
-            : null));
+            }, style: boxStyle, disabled: this.disabled, "aria-label": this.label || (this.toggled && this.toggleIcon ? this.toggleIcon : this.icon), part: "button" }, this.icon && this.toggleIcon ? (h("span", { class: { 'co-icon-button__swap': true, 'co-icon-button__swap--toggled': this.toggled }, "aria-hidden": "true" }, h("co-icon", { name: this.icon, weight: this.iconWeight, size: resolvedIconSize }), h("co-icon", { name: this.toggleIcon, weight: this.iconWeight, size: resolvedIconSize }))) : this.icon ? (h("co-icon", { name: this.icon, weight: this.iconWeight, size: resolvedIconSize })) : null));
     }
     static get is() { return "co-icon-button"; }
     static get encapsulation() { return "shadow"; }
@@ -246,6 +246,45 @@ export class CoIconButton {
                 "reflect": false,
                 "attribute": "icon"
             },
+            "toggleIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Second icon of the swap (play/pause, hamburger/x). With it set, `toggled`\npicks which one shows. \u26A0\uFE0F The swap's crossfade drops the icon name as the\naccessible name source \u2014 with `toggleIcon` set, the consumer MUST pass\n`label` explicitly (the icon alone no longer describes the state)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "toggle-icon"
+            },
+            "toggled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Swap state: false \u2192 `icon`, true \u2192 `toggleIcon`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "toggled",
+                "defaultValue": "false"
+            },
             "iconWeight": {
                 "type": "string",
                 "mutable": false,

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

@@ -365,6 +365,39 @@
   color: var(--co-semantic-status-error);
 }
 
+/* Shake de validación (receta tdev): keyframe multi-segmento con easing POR STOP.
+   Stops = duraciones acumuladas de cada tramo (80/80/60/60ms de 280ms totales
+   → 28.57/57.14/78.57/100%). La duración va tokenizada (guard); los easings
+   por stop usan var(--co-motion-ease-out) (resuelve igual dentro de @keyframes
+   en propiedades no-custom) y los px no entran al scanner del guard.
+   Reduced-motion: el zeroing global de --co-motion-duration-* la deja en un
+   frame, sin guard propio. */
+.co-input--shake .co-input__field {
+  animation: co-input-shake calc(var(--co-motion-duration-instant) * 3.5) var(--co-motion-ease-out) both;
+}
+
+@keyframes co-input-shake {
+  0% {
+    transform: translateX(0);
+    animation-timing-function: var(--co-motion-ease-out);
+  }
+  28.57% {
+    transform: translateX(-6px);
+    animation-timing-function: var(--co-motion-ease-out);
+  }
+  57.14% {
+    transform: translateX(6px);
+    animation-timing-function: var(--co-motion-ease-out);
+  }
+  78.57% {
+    transform: translateX(-4px);
+    animation-timing-function: var(--co-motion-ease-out);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
 /* Success */
 .co-input--success .co-input__field {
   border-color: var(--co-semantic-status-success);

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

@@ -52,6 +52,8 @@ export class CoInput {
          *  IDENTICALLY to the standard text field. */
         this.fill = false;
         this.hasFocus = false;
+        /** Sacudida en curso — se limpia en el animationend del keyframe para poder re-disparar. */
+        this.shaking = false;
         this.handleInput = (e) => {
             const target = e.target;
             this.value = target.value;
@@ -85,6 +87,10 @@ export class CoInput {
         this.handleAction = () => {
             this.coAction.emit();
         };
+        this.handleShakeEnd = (e) => {
+            if (e.animationName === 'co-input-shake')
+                this.shaking = false;
+        };
     }
     /**
      * Refleja en el <input> los cambios de `value` que vienen de AFUERA (host que
@@ -101,6 +107,18 @@ export class CoInput {
         if (this.inputEl.value !== v)
             this.inputEl.value = v;
     }
+    onStatusChange(newVal, oldVal) {
+        if (newVal === 'error' && oldVal !== 'error') {
+            this.shaking = true;
+        }
+        else if (newVal !== 'error') {
+            // Si el animationend nunca llega (nodo oculto/desmontado a mitad de la
+            // sacudida), `shaking` quedaría true para siempre y el input no volvería
+            // a sacudir en el próximo error. Salir de 'error' por cualquier otra vía
+            // (éxito, limpio) también corta la sacudida en curso.
+            this.shaking = false;
+        }
+    }
     /** Programmatically focus the inner input (post-hydration safe). */
     async setFocus() {
         var _a;
@@ -168,7 +186,8 @@ export class CoInput {
                 [`co-input--${this.status}`]: this.status !== 'default',
                 'co-input--has-action': this.hasAction,
                 'co-input--flat': this.variant === 'flat',
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { class: "co-input__labels" }, this.label && h("label", { class: "co-input__label", part: "label" }, this.label, h(RequiredMark, { required: this.required })), this.secondaryLabel && (h("span", { class: "co-input__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), h("div", { class: "co-input__field-row" }, h("div", { class: "co-input__field", part: "field" }, this.iconLeft && (h("co-icon", { name: this.iconLeft, size: 16, class: "co-input__icon co-input__icon--left" })), h("slot", { name: "chips" }), h("div", { class: "co-input__input-wrapper" }, h("input", { ref: (el) => (this.inputEl = el), class: "co-input__native", type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, autoComplete: this.autocomplete, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (h("button", { class: {
+                'co-input--shake': this.shaking,
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { class: "co-input__labels" }, this.label && h("label", { class: "co-input__label", part: "label" }, this.label, h(RequiredMark, { required: this.required })), this.secondaryLabel && (h("span", { class: "co-input__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), h("div", { class: "co-input__field-row" }, h("div", { class: "co-input__field", part: "field", onAnimationEnd: this.handleShakeEnd }, this.iconLeft && (h("co-icon", { name: this.iconLeft, size: 16, class: "co-input__icon co-input__icon--left" })), h("slot", { name: "chips" }), h("div", { class: "co-input__input-wrapper" }, h("input", { ref: (el) => (this.inputEl = el), class: "co-input__native", type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, autoComplete: this.autocomplete, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (h("button", { class: {
                 'co-input__clear': true,
                 'co-input__clear--hidden': !showClear,
             }, type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear input", part: "clear" }, h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), this.iconRight && (h("co-icon", { name: this.iconRight, size: 16, class: "co-input__icon co-input__icon--right" })), this.statusFieldIcon && (h("co-icon", { name: this.statusFieldIcon, size: 16, class: "co-input__status-icon" })), h("slot", { name: "suffix" }), h("slot", null), h("slot", { name: "action" })), this.hasAction && (h("button", { class: "co-input__action", type: "button", onClick: this.handleAction, disabled: this.disabled, part: "action" }, this.actionIcon && (h("co-icon", { name: this.actionIcon, size: 16, class: "co-input__action-icon" })), this.actionLabel && (h("span", { class: "co-input__action-label" }, this.actionLabel))))), this.helperText && (h("div", { class: `co-input__helper co-input__helper--${this.status}`, part: "helper" }, this.helperIcon && (h("co-icon", { name: this.helperIcon, size: 14, class: "co-input__helper-icon" })), h("span", { class: "co-input__helper-text" }, this.helperText)))));
@@ -622,7 +641,8 @@ export class CoInput {
     }
     static get states() {
         return {
-            "hasFocus": {}
+            "hasFocus": {},
+            "shaking": {}
         };
     }
     static get events() {
@@ -744,6 +764,9 @@ export class CoInput {
         return [{
                 "propName": "value",
                 "methodName": "onValueChange"
+            }, {
+                "propName": "status",
+                "methodName": "onStatusChange"
             }];
     }
 }

package/dist/collection/components/co-json-field/co-json-field.js

@@ -97,17 +97,17 @@ export class CoJsonField {
     render() {
         const helper = this.internalInvalid ? this.invalidMessage : this.helperText;
         const statusClass = this.status !== 'default' ? `co-json-field--${this.status}` : '';
-        return (h("div", { key: '5b2311f320820573ac6f7fb501b1a566e1e640fb', class: {
+        return (h("div", { key: '6e303939542b1c400432876149a7f7cf94dbfad4', class: {
                 'co-json-field': true,
                 'co-json-field--disabled': this.disabled,
                 'co-json-field--focused': this.hasFocus,
                 'co-json-field--invalid': this.isInvalid,
                 [`co-json-field--${this.size}`]: true,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, this.label && (h("div", { key: '98b624bc8d99515a83f19df185207ae696dcb943', class: "co-json-field__labels" }, h("label", { key: 'cfdccd9cedd268e5c8074b9f68c06618cf7d222d', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'eb659605e09458ba403de648c4d499f08e899e90', required: this.required })))), h("div", { key: '25cc5eb6b413f4d2f3e57154849adc2e91d23cea', class: "co-json-field__field", part: "field" }, h("textarea", { key: '5739bc7a9f45853d0c553bc03459028fb9225e1e', class: "co-json-field__native", rows: this.rows, spellcheck: false, autocomplete: "off", value: this.draft, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'JSON' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), this.name && h("input", { key: '2a49f930780920205b51403271c86e2a7d49908f', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: '3ffa24824f850162de4e3dbdf12535f35ccdb864', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: '77c4793e6755c159d70943be68d94dc9a8f6f82c', class: "co-json-field__labels" }, h("label", { key: 'fa060ddb64fea5a78f339cf10ff46b8bbc3f6c9c', class: "co-json-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'fd130517bb57f0b5c012f39e61cd4ef905c34b42', required: this.required })))), h("div", { key: '752bccc5c2193a81ef174415b0e22936d1729914', class: "co-json-field__field", part: "field" }, h("textarea", { key: '397b3e80d4d252c55f55d9e6c444083f8ee2a28a', class: "co-json-field__native", rows: this.rows, spellcheck: false, autocomplete: "off", value: this.draft, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? 'JSON' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), this.name && h("input", { key: '8d658f97252824dce51a262c19e251b664de9c4e', type: "hidden", name: this.name, value: this.draft }), helper && (h("div", { key: '857a97a47b5a88b0a778680329670b474ff1eac1', class: {
                 'co-json-field__helper': true,
                 'co-json-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'f01083ead8818bdb50e0579f6805ab3c07d5829f', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: '02d8146ec67d84171bb21ce58838e4ef9cc6391c', class: "co-json-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'df90fefaedba9e8340b1fbfd19dd8350ab8e26af', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), h("span", { key: '3ba614c007e38009f7cda47be0d705d63397359f', class: "co-json-field__helper-text" }, helper)))));
     }
     static get is() { return "co-json-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -119,6 +119,29 @@
   transition: transform var(--co-motion-duration-base) var(--co-motion-ease-out);
 }
 
+/* A video slide is sized like the image: to the media, not to the stage. The
+   host stamps `--co-lb-ar` (intrinsic width/height) as soon as co-video reports
+   metadata; until then 16/9 stands in. Giving the box a DEFINITE height and
+   letting `aspect-ratio` derive the width is what keeps a portrait recording
+   from becoming a full-width black slab with the video stranded in the middle
+   — and keeps the scrim around it clickable. The three-way min() caps the
+   height by the viewport, by the available width, and by the 1200px ceiling.
+   co-video's `auto` aspect then stretches its container to this height, and
+   its inner <video> is object-fit: contain. */
+.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;
 }

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"; }