@prolibu-suite/cobalt-core 0.9.6 → 0.10.1

package/dist/collection/components/co-file-field/co-file-field.utils.js

@@ -21,15 +21,55 @@ export function truncateLeft(name, max = 35) {
     return `...${name.slice(-max)}`;
 }
 const IMAGE_EXTS = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'avif', 'bmp']);
-function hasImageExtension(item) {
-    const base = (item.name || item.url || '').split('?')[0];
+/** Containers a `<video>` can at least attempt to play. Kept in sync with the
+ *  `video` bucket of co-file-type-tile (mp4/mov/webm) plus the two extra
+ *  containers the browser handles natively. Whether the CODEC inside decodes
+ *  is a runtime question — co-video reports that through its error state. */
+const VIDEO_EXTS = new Set(['mp4', 'mov', 'webm', 'm4v', 'ogv']);
+function extOf(source) {
+    const base = (source || '').split('?')[0];
     const i = base.lastIndexOf('.');
-    return i >= 0 && IMAGE_EXTS.has(base.slice(i + 1).toLowerCase());
+    return i >= 0 ? base.slice(i + 1).toLowerCase() : '';
+}
+/**
+ * Lower-cased extension of an item — from its name, falling back to its url.
+ * The fallback is not decoration: hosts derive `name` from whatever the record
+ * gives them (form-vue: `fileName || name || originalName || id`), so a File
+ * populated without `fileName` arrives named after its id, extensionless, with
+ * the only ".mov" in sight sitting in the url.
+ */
+export function fileExtension(item) {
+    return extOf(item.name) || extOf(item.url);
+}
+function hasImageExtension(item) {
+    return IMAGE_EXTS.has(fileExtension(item));
+}
+function hasVideoExtension(item) {
+    return VIDEO_EXTS.has(fileExtension(item));
+}
+/**
+ * A stored video we can hand to a player. `url` is required on purpose: the
+ * thumbnail is a poster frame, not the media — an item with only a poster has
+ * nothing to play.
+ */
+export function isVideo(item) {
+    if (item.status !== 'done')
+        return false;
+    if (!item.url)
+        return false;
+    return hasVideoExtension(item);
 }
 /** An item renders in the previews grid when it's a stored image we can show. */
 export function isImage(item) {
     if (item.status !== 'done')
         return false;
+    // A video ships with a server-generated poster; that thumbnail must NOT
+    // promote it to "image", or clicking the card opens a still frame in an
+    // <img> and the file looks unplayable. Only a PLAYABLE video is excluded
+    // though: one whose url never came through has nothing but its poster, and
+    // showing that (as this field always did) beats dropping the card.
+    if (isVideo(item))
+        return false;
     const src = item.thumbnail || item.url;
     if (!src)
         return false;
@@ -37,11 +77,18 @@ export function isImage(item) {
         return true;
     return hasImageExtension(item);
 }
+/** Items that earn a card in the previews grid: images and videos alike. */
+export function isPreviewable(item) {
+    return isImage(item) || isVideo(item);
+}
 /**
  * Best lightbox source: the original `url` only when it is itself an image —
  * a PDF that entered the grid via its server-generated thumbnail must open
- * the thumbnail (an `<img>` can't render the PDF).
+ * the thumbnail (an `<img>` can't render the PDF). A video always resolves to
+ * the media itself; its poster travels separately as the player's `poster`.
  */
 export function previewSrc(item) {
+    if (hasVideoExtension(item))
+        return item.url || item.thumbnail;
     return hasImageExtension(item) ? item.url || item.thumbnail : item.thumbnail || item.url;
 }

package/dist/collection/components/co-file-type-tile/co-file-type-tile.js

@@ -54,7 +54,7 @@ export class CoFileTypeTile {
         const iconSize = Math.round(this.size * 0.5);
         const background = this.colorTags ? meta.tint : 'var(--co-color-gray-100)';
         const color = this.colorTags ? meta.accent : 'var(--co-color-gray-600)';
-        return (h("span", { key: 'adb6141d2b0d587d289d0d1c8f3887963a33261a', class: {
+        return (h("span", { key: '1df6dee1c0f729279f36463be6df9137bcbf4af0', class: {
                 'co-file-type-tile': true,
                 [`co-file-type-tile--${type}`]: true,
                 'co-file-type-tile--mono': !this.colorTags,
@@ -64,7 +64,7 @@ export class CoFileTypeTile {
                 borderRadius: `${this.radius}px`,
                 background,
                 color,
-            } }, h("co-icon", { key: 'e409cbb4d9c2d08f9417058ec843a6466d875f04', name: meta.icon, size: iconSize, weight: "fill" })));
+            } }, h("co-icon", { key: '566163b957b853911e3eef15cd38c7573cf749b4', name: meta.icon, size: iconSize, weight: "fill" })));
     }
     static get is() { return "co-file-type-tile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-helper-text/co-helper-text.js

@@ -15,10 +15,10 @@ export class CoHelperText {
         };
     }
     render() {
-        return (h("div", { key: '09ca6f7214d2c25432ffb9e9fa90036d81c48200', class: {
+        return (h("div", { key: '2c4ae2b671b16dfda50eea3dd33b92c5661812fb', class: {
                 'co-helper-text': true,
                 [`co-helper-text--${this.status}`]: true,
-            }, part: "helper-text" }, h("co-icon", { key: 'd3757438d31d6a14d4c52157197818846ac3fd11', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: '7ae8d75fa07b8a6046e02d36c05b73676a68425e', class: "co-helper-text__message" }, h("slot", { key: 'd13a404f19f6b04d0b63aa2a4f68caf84d33e619' }, this.message))));
+            }, part: "helper-text" }, h("co-icon", { key: '18a15852e651204d06279be5a685c79ed927c6d0', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: '62c3d084abd1b62f90b2631953f51306293b23b7', class: "co-helper-text__message" }, h("slot", { key: '06604123763ac0f84fe1bc2ec1dd840d6ee2756d' }, this.message))));
     }
     static get is() { return "co-helper-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,12 +31,12 @@ export class CoIcon {
         this.svgContent = await loadSvg(this.name, this.weight);
     }
     render() {
-        return (h(Host, { key: '9fa97e09f5063eaa9b463f1bb7f06d4b277c8bc6', "aria-hidden": "true", style: {
+        return (h(Host, { key: 'a1f3cfef2067bd672a17c19666821b6fac0b3027', "aria-hidden": "true", style: {
                 display: 'inline-flex',
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 flexShrink: '0',
-            } }, h("span", { key: '092068cc819b5d0cd63e15a5f3e0b7349cdb63cd', part: "svg", innerHTML: this.svgContent })));
+            } }, h("span", { key: 'cc92c6ea6d2ab5f59a7e793f166f2ae685f7928c', part: "svg", innerHTML: this.svgContent })));
     }
     static get is() { return "co-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -24,8 +24,15 @@
     transform var(--co-motion-duration-fast) var(--co-motion-ease-out);
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
-  -webkit-backdrop-filter: var(--co-icon-button-backdrop-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));
-  backdrop-filter: var(--co-icon-button-backdrop-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));
+  /* --co-icon-button-backdrop-filter: alias publicado (API), cero consumidores;
+     adentro la cadena canónica --co-glass-filter (none = opt-out).
+     ⚠️ El alias va POR FUERA de --co-glass-filter (orden prescrito por el spec):
+     un host que lo setee ESCAPA al opt-out global — ni --co-glass-filter: none
+     en un ancestro ni prefers-reduced-transparency apagan ese valor. No
+     introducir consumidores; para tunear usar --co-glass-blur/-saturate y para
+     apagar, --co-glass-filter: none en el subárbol. */
+  -webkit-backdrop-filter: var(--co-icon-button-backdrop-filter, var(--co-glass-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate))));
+          backdrop-filter: var(--co-icon-button-backdrop-filter, var(--co-glass-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate))));
 }
 
 /* ─── VARIANTS ─────────────────────────────────────────────── */
@@ -169,3 +176,34 @@
   .co-icon-button--filled { background: var(--co-semantic-surface-primary); }
   .co-icon-button--outlined { background: var(--co-icon-button-bg, var(--co-semantic-surface-secondary)); }
 }
+
+/* ─── ICON SWAP (receta tdev): ambos iconos apilados en una celda grid ── */
+.co-icon-button__swap {
+  display: inline-grid;
+}
+
+.co-icon-button__swap > co-icon {
+  grid-area: 1 / 1;
+  transition:
+    opacity var(--co-motion-duration-base) var(--co-motion-ease-in-out),
+    transform var(--co-motion-duration-base) var(--co-motion-ease-in-out),
+    filter var(--co-motion-duration-base) var(--co-motion-ease-in-out);
+}
+
+.co-icon-button__swap > co-icon:last-child {
+  opacity: 0;
+  transform: scale(0.25);
+  filter: blur(var(--co-motion-blur-sm));
+}
+
+.co-icon-button__swap--toggled > co-icon:first-child {
+  opacity: 0;
+  transform: scale(0.25);
+  filter: blur(var(--co-motion-blur-sm));
+}
+
+.co-icon-button__swap--toggled > co-icon:last-child {
+  opacity: 1;
+  transform: scale(1);
+  filter: blur(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,10 +107,26 @@ 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() {
+    /** Enfoca el input nativo. `options` se reenvía a `focus()` — p. ej.
+     *  `{ preventScroll: true }` para un buscador que vive en un panel
+     *  top-layer (co-popover): el scroll nativo hacia el foco trepa por los
+     *  ancestros del light DOM y arrastra al host (drawer) sin necesidad. */
+    async setFocus(options) {
         var _a;
-        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus(options);
     }
     componentDidLoad() {
         var _a;
@@ -168,7 +190,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 +645,8 @@ export class CoInput {
     }
     static get states() {
         return {
-            "hasFocus": {}
+            "hasFocus": {},
+            "shaking": {}
         };
     }
     static get events() {
@@ -722,18 +746,26 @@ export class CoInput {
         return {
             "setFocus": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions | undefined",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
                         }
                     },
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Programmatically focus the inner input (post-hydration safe).",
+                    "text": "Enfoca el input nativo. `options` se reenv\u00EDa a `focus()` \u2014 p. ej.\n`{ preventScroll: true }` para un buscador que vive en un panel\ntop-layer (co-popover): el scroll nativo hacia el foco trepa por los\nancestros del light DOM y arrastra al host (drawer) sin necesidad.",
                     "tags": []
                 }
             }
@@ -744,6 +776,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;
 }