@prolibu-suite/cobalt-core 0.9.6 → 0.10.1

package/dist/cjs/co-input.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-DK-2Lzmf.js');
-var requiredMark = require('./requiredMark-C1xcrzSZ.js');
+var index = require('./index-MDAnKsze.js');
+var requiredMark = require('./requiredMark-D-t-IPN0.js');
 
-const coInputCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-input{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-input{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-input__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-input__label{white-space:normal}:host([layout='horizontal']) .co-input>:not(.co-input__labels){grid-column:2;min-width:0}.co-input__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-input__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-input__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-input__field-row{display:flex;align-items:stretch}.co-input__field{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);min-height:40px;box-sizing:border-box;overflow:hidden;flex:1;min-width:0}.co-input--flat .co-input__field{background:transparent;border-color:transparent}.co-input--s .co-input__field{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-input--sm .co-input__field{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-input--lg .co-input__field{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-input--has-action .co-input__field{border-radius:var(--co-border-radius-xs) 0 0 var(--co-border-radius-xs);border-right:none}.co-input__field ::slotted([slot="action"]){margin-left:auto;margin-right:calc(-1 * var(--co-spacing-md));margin-top:calc(-1 * var(--co-spacing-sm2));margin-bottom:calc(-1 * var(--co-spacing-sm2));border-radius:0 var(--co-border-radius-xs) var(--co-border-radius-xs) 0;flex-shrink:0}.co-input__field ::slotted([slot="chips"]){display:flex;gap:var(--co-spacing-xxs);align-items:center;flex-wrap:wrap;min-width:0}.co-input__input-wrapper{flex:1;display:flex;align-items:center;min-width:0;min-height:22px;padding:0}.co-input__native{width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-input__native::placeholder{color:var(--co-semantic-text-muted)}.co-input__native[type='number']::-webkit-inner-spin-button,.co-input__native[type='number']::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.co-input__native[type='number']{-moz-appearance:textfield;appearance:textfield}.co-input__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-input__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-input__clear--hidden{visibility:hidden;pointer-events:none}.co-input__clear:hover{color:var(--co-semantic-text-default)}.co-input__action{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md) var(--co-spacing-sm2) var(--co-spacing-sm2);background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none;border-radius:0 var(--co-border-radius-xs) var(--co-border-radius-xs) 0;cursor:pointer;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;flex-shrink:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box}.co-input__action:hover{opacity:0.85}.co-input__action:disabled{opacity:0.4;cursor:not-allowed}.co-input__action-icon{display:flex;align-items:center;flex-shrink:0}.co-input__action-label{display:flex;align-items:center}.co-input__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-input__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-input__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-input--focused .co-input__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-input--disabled .co-input__labels .co-input__label,.co-input--disabled .co-input__labels .co-input__secondary-label{color:var(--co-semantic-text-disabled)}.co-input--disabled .co-input__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-input--disabled .co-input__native{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-input--disabled .co-input__native::placeholder{color:var(--co-semantic-text-disabled)}.co-input--disabled .co-input__icon{color:var(--co-semantic-text-disabled)}.co-input__status-icon{flex-shrink:0;display:flex;align-items:center}.co-input--success .co-input__status-icon{color:var(--co-semantic-status-success)}.co-input--error .co-input__status-icon{color:var(--co-semantic-status-error)}.co-input--warning .co-input__status-icon{color:var(--co-color-status-review)}.co-input--info .co-input__status-icon{color:var(--co-semantic-status-info)}.co-input--error .co-input__field{border-color:var(--co-semantic-status-error)}.co-input--error.co-input--focused .co-input__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-input__helper--error .co-input__helper-icon,.co-input__helper--error .co-input__helper-text{color:var(--co-semantic-status-error)}.co-input--success .co-input__field{border-color:var(--co-semantic-status-success)}.co-input--success.co-input--focused .co-input__field{border-color:var(--co-semantic-status-success);box-shadow:0 0 0 2px rgba(10, 119, 36, 0.12)}.co-input__helper--success .co-input__helper-icon,.co-input__helper--success .co-input__helper-text{color:var(--co-semantic-status-success)}.co-input--warning .co-input__field{border-color:var(--co-color-status-review)}.co-input--warning.co-input--focused .co-input__field{border-color:var(--co-color-status-review);box-shadow:0 0 0 2px rgba(133, 87, 31, 0.12)}.co-input__helper--warning .co-input__helper-icon,.co-input__helper--warning .co-input__helper-text{color:var(--co-color-status-review)}.co-input--info .co-input__field{border-color:var(--co-semantic-status-info)}.co-input--info.co-input--focused .co-input__field{border-color:var(--co-semantic-status-info);box-shadow:0 0 0 2px rgba(45, 108, 197, 0.12)}.co-input__helper--info .co-input__helper-icon,.co-input__helper--info .co-input__helper-text{color:var(--co-semantic-status-info)}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}@supports not (background: color-mix(in srgb, red, transparent)){.co-input__field{background:var(--co-semantic-surface-secondary)}}.co-input--fill .co-input__field{background:var(--co-color-gray-100, #f6f6f6);border:none;box-shadow:none;border-radius:10px;padding:0 12px;gap:var(--co-spacing-sm2);min-height:46px;font-size:13.5px;-webkit-backdrop-filter:none;backdrop-filter:none}.co-input--fill.co-input--s .co-input__field{min-height:38px}.co-input--fill.co-input--sm .co-input__field{min-height:42px}.co-input--fill.co-input--lg .co-input__field{min-height:52px}.co-input--fill .co-input__native{font-size:13.5px;font-family:var(--co-font-family-primary);letter-spacing:var(--co-font-letter-spacing-body)}.co-input--fill .co-input__native::placeholder{color:var(--co-color-gray-400, #a0a0a0)}.co-input--fill .co-input__icon{color:var(--co-color-gray-400, #a0a0a0)}.co-input--fill .co-input__clear{color:var(--co-color-gray-400, #a0a0a0)}.co-input--fill .co-input__clear:hover{color:var(--co-color-gray-600, #585858)}.co-input--fill.co-input--focused .co-input__field{border-color:transparent;box-shadow:none}`;
+const coInputCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-input{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-input{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-input__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-input__label{white-space:normal}:host([layout='horizontal']) .co-input>:not(.co-input__labels){grid-column:2;min-width:0}.co-input__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-input__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-input__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-input__field-row{display:flex;align-items:stretch}.co-input__field{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);min-height:40px;box-sizing:border-box;overflow:hidden;flex:1;min-width:0}.co-input--flat .co-input__field{background:transparent;border-color:transparent}.co-input--s .co-input__field{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-input--sm .co-input__field{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-input--lg .co-input__field{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-input--has-action .co-input__field{border-radius:var(--co-border-radius-xs) 0 0 var(--co-border-radius-xs);border-right:none}.co-input__field ::slotted([slot="action"]){margin-left:auto;margin-right:calc(-1 * var(--co-spacing-md));margin-top:calc(-1 * var(--co-spacing-sm2));margin-bottom:calc(-1 * var(--co-spacing-sm2));border-radius:0 var(--co-border-radius-xs) var(--co-border-radius-xs) 0;flex-shrink:0}.co-input__field ::slotted([slot="chips"]){display:flex;gap:var(--co-spacing-xxs);align-items:center;flex-wrap:wrap;min-width:0}.co-input__input-wrapper{flex:1;display:flex;align-items:center;min-width:0;min-height:22px;padding:0}.co-input__native{width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-input__native::placeholder{color:var(--co-semantic-text-muted)}.co-input__native[type='number']::-webkit-inner-spin-button,.co-input__native[type='number']::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.co-input__native[type='number']{-moz-appearance:textfield;appearance:textfield}.co-input__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-input__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-input__clear--hidden{visibility:hidden;pointer-events:none}.co-input__clear:hover{color:var(--co-semantic-text-default)}.co-input__action{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md) var(--co-spacing-sm2) var(--co-spacing-sm2);background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none;border-radius:0 var(--co-border-radius-xs) var(--co-border-radius-xs) 0;cursor:pointer;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;flex-shrink:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box}.co-input__action:hover{opacity:0.85}.co-input__action:disabled{opacity:0.4;cursor:not-allowed}.co-input__action-icon{display:flex;align-items:center;flex-shrink:0}.co-input__action-label{display:flex;align-items:center}.co-input__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-input__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-input__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-input--focused .co-input__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-input--disabled .co-input__labels .co-input__label,.co-input--disabled .co-input__labels .co-input__secondary-label{color:var(--co-semantic-text-disabled)}.co-input--disabled .co-input__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-input--disabled .co-input__native{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-input--disabled .co-input__native::placeholder{color:var(--co-semantic-text-disabled)}.co-input--disabled .co-input__icon{color:var(--co-semantic-text-disabled)}.co-input__status-icon{flex-shrink:0;display:flex;align-items:center}.co-input--success .co-input__status-icon{color:var(--co-semantic-status-success)}.co-input--error .co-input__status-icon{color:var(--co-semantic-status-error)}.co-input--warning .co-input__status-icon{color:var(--co-color-status-review)}.co-input--info .co-input__status-icon{color:var(--co-semantic-status-info)}.co-input--error .co-input__field{border-color:var(--co-semantic-status-error)}.co-input--error.co-input--focused .co-input__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-input__helper--error .co-input__helper-icon,.co-input__helper--error .co-input__helper-text{color:var(--co-semantic-status-error)}.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)}}.co-input--success .co-input__field{border-color:var(--co-semantic-status-success)}.co-input--success.co-input--focused .co-input__field{border-color:var(--co-semantic-status-success);box-shadow:0 0 0 2px rgba(10, 119, 36, 0.12)}.co-input__helper--success .co-input__helper-icon,.co-input__helper--success .co-input__helper-text{color:var(--co-semantic-status-success)}.co-input--warning .co-input__field{border-color:var(--co-color-status-review)}.co-input--warning.co-input--focused .co-input__field{border-color:var(--co-color-status-review);box-shadow:0 0 0 2px rgba(133, 87, 31, 0.12)}.co-input__helper--warning .co-input__helper-icon,.co-input__helper--warning .co-input__helper-text{color:var(--co-color-status-review)}.co-input--info .co-input__field{border-color:var(--co-semantic-status-info)}.co-input--info.co-input--focused .co-input__field{border-color:var(--co-semantic-status-info);box-shadow:0 0 0 2px rgba(45, 108, 197, 0.12)}.co-input__helper--info .co-input__helper-icon,.co-input__helper--info .co-input__helper-text{color:var(--co-semantic-status-info)}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}@supports not (background: color-mix(in srgb, red, transparent)){.co-input__field{background:var(--co-semantic-surface-secondary)}}.co-input--fill .co-input__field{background:var(--co-color-gray-100, #f6f6f6);border:none;box-shadow:none;border-radius:10px;padding:0 12px;gap:var(--co-spacing-sm2);min-height:46px;font-size:13.5px;-webkit-backdrop-filter:none;backdrop-filter:none}.co-input--fill.co-input--s .co-input__field{min-height:38px}.co-input--fill.co-input--sm .co-input__field{min-height:42px}.co-input--fill.co-input--lg .co-input__field{min-height:52px}.co-input--fill .co-input__native{font-size:13.5px;font-family:var(--co-font-family-primary);letter-spacing:var(--co-font-letter-spacing-body)}.co-input--fill .co-input__native::placeholder{color:var(--co-color-gray-400, #a0a0a0)}.co-input--fill .co-input__icon{color:var(--co-color-gray-400, #a0a0a0)}.co-input--fill .co-input__clear{color:var(--co-color-gray-400, #a0a0a0)}.co-input--fill .co-input__clear:hover{color:var(--co-color-gray-600, #585858)}.co-input--fill.co-input--focused .co-input__field{border-color:transparent;box-shadow:none}`;
 
 const CoInput = class {
     constructor(hostRef) {
@@ -55,6 +55,8 @@ const CoInput = class {
          *  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;
@@ -88,6 +90,10 @@ const CoInput = class {
         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
@@ -104,10 +110,26 @@ const CoInput = class {
         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;
@@ -171,7 +193,8 @@ const CoInput = class {
                 [`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) && (index.h("div", { class: "co-input__labels" }, this.label && index.h("label", { class: "co-input__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { required: this.required })), this.secondaryLabel && (index.h("span", { class: "co-input__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), index.h("div", { class: "co-input__field-row" }, index.h("div", { class: "co-input__field", part: "field" }, this.iconLeft && (index.h("co-icon", { name: this.iconLeft, size: 16, class: "co-input__icon co-input__icon--left" })), index.h("slot", { name: "chips" }), index.h("div", { class: "co-input__input-wrapper" }, index.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 && (index.h("button", { class: {
+                'co-input--shake': this.shaking,
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (index.h("div", { class: "co-input__labels" }, this.label && index.h("label", { class: "co-input__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { required: this.required })), this.secondaryLabel && (index.h("span", { class: "co-input__secondary-label", part: "secondary-label" }, this.secondaryLabel)))), index.h("div", { class: "co-input__field-row" }, index.h("div", { class: "co-input__field", part: "field", onAnimationEnd: this.handleShakeEnd }, this.iconLeft && (index.h("co-icon", { name: this.iconLeft, size: 16, class: "co-input__icon co-input__icon--left" })), index.h("slot", { name: "chips" }), index.h("div", { class: "co-input__input-wrapper" }, index.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 && (index.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" }, index.h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))), this.iconRight && (index.h("co-icon", { name: this.iconRight, size: 16, class: "co-input__icon co-input__icon--right" })), this.statusFieldIcon && (index.h("co-icon", { name: this.statusFieldIcon, size: 16, class: "co-input__status-icon" })), index.h("slot", { name: "suffix" }), index.h("slot", null), index.h("slot", { name: "action" })), this.hasAction && (index.h("button", { class: "co-input__action", type: "button", onClick: this.handleAction, disabled: this.disabled, part: "action" }, this.actionIcon && (index.h("co-icon", { name: this.actionIcon, size: 16, class: "co-input__action-icon" })), this.actionLabel && (index.h("span", { class: "co-input__action-label" }, this.actionLabel))))), this.helperText && (index.h("div", { class: `co-input__helper co-input__helper--${this.status}`, part: "helper" }, this.helperIcon && (index.h("co-icon", { name: this.helperIcon, size: 14, class: "co-input__helper-icon" })), index.h("span", { class: "co-input__helper-text" }, this.helperText)))));
@@ -180,6 +203,9 @@ const CoInput = class {
     static get watchers() { return {
         "value": [{
                 "onValueChange": 0
+            }],
+        "status": [{
+                "onStatusChange": 0
             }]
     }; }
 };

package/dist/cjs/co-json-field.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-DK-2Lzmf.js');
-var requiredMark = require('./requiredMark-C1xcrzSZ.js');
+var index = require('./index-MDAnKsze.js');
+var requiredMark = require('./requiredMark-D-t-IPN0.js');
 
 const coJsonFieldCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-json-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-json-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-json-field__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}.co-json-field__field{display:flex;background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box;overflow:hidden}.co-json-field__native{width:100%;resize:vertical;border:none;outline:none;background:transparent;font-family:var(--co-font-family-mono, monospace);font-size:var(--co-font-size-13, 13px);font-weight:400;line-height:1.5;color:var(--co-semantic-text-default);padding:var(--co-spacing-sm2) var(--co-spacing-md);margin:0;box-sizing:border-box;tab-size:2}.co-json-field__native::placeholder{color:var(--co-semantic-text-muted)}.co-json-field--s .co-json-field__native{padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12, 12px)}.co-json-field--sm .co-json-field__native{padding:var(--co-spacing-xs) var(--co-spacing-sm)}.co-json-field--lg .co-json-field__native{padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-14)}.co-json-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-json-field__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-json-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-json-field--focused .co-json-field__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-json-field--disabled{opacity:0.6;pointer-events:none}.co-json-field--disabled .co-json-field__field{background:var(--co-semantic-surface-disabled);border-color:transparent}.co-json-field--invalid .co-json-field__field,.co-json-field--error .co-json-field__field{border-color:var(--co-semantic-status-error)}.co-json-field--invalid.co-json-field--focused .co-json-field__field,.co-json-field--error.co-json-field--focused .co-json-field__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-json-field__helper--error .co-json-field__helper-icon,.co-json-field__helper--error .co-json-field__helper-text{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-json-field{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-json-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-json-field__label{white-space:normal}:host([layout='horizontal']) .co-json-field>:not(.co-json-field__labels){grid-column:2;min-width:0}`;
 
@@ -89,17 +89,17 @@ const CoJsonField = class {
     render() {
         const helper = this.internalInvalid ? this.invalidMessage : this.helperText;
         const statusClass = this.status !== 'default' ? `co-json-field--${this.status}` : '';
-        return (index.h("div", { key: '5b2311f320820573ac6f7fb501b1a566e1e640fb', class: {
+        return (index.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 && (index.h("div", { key: '98b624bc8d99515a83f19df185207ae696dcb943', class: "co-json-field__labels" }, index.h("label", { key: 'cfdccd9cedd268e5c8074b9f68c06618cf7d222d', class: "co-json-field__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { key: 'eb659605e09458ba403de648c4d499f08e899e90', required: this.required })))), index.h("div", { key: '25cc5eb6b413f4d2f3e57154849adc2e91d23cea', class: "co-json-field__field", part: "field" }, index.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 && index.h("input", { key: '2a49f930780920205b51403271c86e2a7d49908f', type: "hidden", name: this.name, value: this.draft }), helper && (index.h("div", { key: '3ffa24824f850162de4e3dbdf12535f35ccdb864', class: {
+            }, part: "wrapper" }, this.label && (index.h("div", { key: '77c4793e6755c159d70943be68d94dc9a8f6f82c', class: "co-json-field__labels" }, index.h("label", { key: 'fa060ddb64fea5a78f339cf10ff46b8bbc3f6c9c', class: "co-json-field__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { key: 'fd130517bb57f0b5c012f39e61cd4ef905c34b42', required: this.required })))), index.h("div", { key: '752bccc5c2193a81ef174415b0e22936d1729914', class: "co-json-field__field", part: "field" }, index.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 && index.h("input", { key: '8d658f97252824dce51a262c19e251b664de9c4e', type: "hidden", name: this.name, value: this.draft }), helper && (index.h("div", { key: '857a97a47b5a88b0a778680329670b474ff1eac1', class: {
                 'co-json-field__helper': true,
                 'co-json-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (index.h("co-icon", { key: 'f01083ead8818bdb50e0579f6805ab3c07d5829f', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), index.h("span", { key: '02d8146ec67d84171bb21ce58838e4ef9cc6391c', class: "co-json-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (index.h("co-icon", { key: 'df90fefaedba9e8340b1fbfd19dd8350ab8e26af', name: "warning-circle", size: 14, class: "co-json-field__helper-icon" })), index.h("span", { key: '3ba614c007e38009f7cda47be0d705d63397359f', class: "co-json-field__helper-text" }, helper)))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-DK-2Lzmf.js');
-var dateI18n = require('./dateI18n-wblvKRq_.js');
+var index = require('./index-MDAnKsze.js');
+var dateI18n = require('./dateI18n-BK2qHqoC.js');
 
 /**
  * Built-in UI string dictionary for co-lightbox (aria labels + tooltips).
@@ -45,7 +45,7 @@ function getLightboxStrings(locale) {
     return DICT[dateI18n.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;
@@ -100,10 +100,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;
@@ -112,17 +134,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
             }
@@ -132,6 +157,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);
@@ -172,6 +218,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())
@@ -193,6 +247,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)
@@ -200,6 +260,7 @@ const CoLightbox = class {
     }
     disconnectedCallback() {
         this.detachKeyListener();
+        this.pauseVideo();
         clearTimeout(this.demoteTimer);
     }
     componentDidRender() {
@@ -217,12 +278,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;
         }
@@ -247,18 +315,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) {
@@ -277,6 +393,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);
@@ -288,8 +407,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 ────────────────────────────────────────────────
@@ -338,20 +514,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 (index.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 && (index.h("div", { key: '3c757d34339330ddc8179869771548d2e10eeb86', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, index.h("span", { key: 'ea97b286b84225423f46de0241fb7ab5f86a615e', class: "co-lightbox__caption", title: img.alt }, img.alt), index.h("div", { key: '273f23d1c551f459ed2d2b7d2dbdccf43beba000', class: "co-lightbox__zoom" }, index.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) }, index.h("co-icon", { key: '085ed06e6593b99e13cf36009149d9cf90524280', name: "minus", size: 16 })), index.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), "%"), index.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) }, index.h("co-icon", { key: 'e10fb035385e19dab132fffc4b8d962e720c379e', name: "plus", size: 16 }))), index.h("button", { key: 'f500ccfea7a04b5f47cf786579cd1d1f138cbbd9', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, index.h("co-icon", { key: 'd9098c2bf45c888681b5982dea6d59b9a5e3d89d', name: "arrow-square-out", size: 16 })), index.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 }, index.h("co-icon", { key: '787d1be07f3befb406beddbb7853d1f604fbfa30', name: "x", size: 16 })))), img && (index.h("div", { key: 'd4e4dcab4f5b34cfade28927cb484eb0fade7c6c', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, index.h("img", { key: '06ce0ba917e7007da67a5db9372457286d33d84c', class: {
+        return (index.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 && (index.h("div", { key: 'cc9e9db83ef082deab744f259c4da63a58eb0c3b', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, index.h("span", { key: 'ab3fa42e21008407f2cab377566a1793a96a8a50', class: "co-lightbox__caption", title: img.alt }, img.alt), !video && (index.h("div", { key: 'af8761111e7c5e0e7a838d8e69971cc2863ee9d4', class: "co-lightbox__zoom" }, index.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) }, index.h("co-icon", { key: '371f4edc5141561b348ce36a8791fb81500248fa', name: "minus", size: 16 })), index.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), "%"), index.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) }, index.h("co-icon", { key: '6b56559a4dad36bee62545deb426734450f64f58', name: "plus", size: 16 })))), index.h("button", { key: '53099c4e3dec82cfc9087e89916154ef4a8845f6', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, index.h("co-icon", { key: 'de160ed313ba0559cd1523f9f73fad7e3b167848', name: "arrow-square-out", size: 16 })), index.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 }, index.h("co-icon", { key: 'fcbcbbf6001e67199b6ec7b99bde5f9f24537ca0', name: "x", size: 16 })))), img && (index.h("div", { key: '39cef6c2bd1bf3fe9f641778b48b618a62f1b5f8', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: video ? undefined : this.handleWheel }, video ? (index.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: dateI18n.langFromLocale(this.locale), onCoReady: this.handlePlayerReady, onClick: this.stop })) : (index.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 && (index.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 && (index.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);
-            } }, index.h("co-icon", { key: '17cb67246511c6a83a06ce594060be52c9f46cd0', name: "caret-left", size: 24 }))), img && multi && (index.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) => {
+            } }, index.h("co-icon", { key: '649171d5330299b3ccb368bb0b434c643157c3f5', name: "caret-left", size: 24 }))), img && multi && (index.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);
-            } }, index.h("co-icon", { key: '1ab70f0b03bb640b9df26420df704b041b14a5a4', name: "caret-right", size: 24 }))), img && multi && (index.h("div", { key: '116097d4c98a45c150033b38dbf1e83f12602449', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
+            } }, index.h("co-icon", { key: 'd9d32607a6b4350009db5c1719987aa8afcbb007', name: "caret-right", size: 24 }))), img && multi && (index.h("div", { key: 'a23f10a2c9d82c4295285feeedfbe0d9016f4db0', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DK-2Lzmf.js');
+var index = require('./index-MDAnKsze.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}`;
 
@@ -17,7 +17,7 @@ const CoListFooter = class {
         this.handleSecondary = () => this.coSecondary.emit();
     }
     render() {
-        return (index.h("div", { key: 'd522b5d67635a4a7751a7b4760ccca1133f6e8f1', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (index.h("button", { key: '3e1ba3d6e14b48014dce5c91a1a39baba5a14556', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && index.h("co-icon", { key: '9b31eb5104f0109c93a11ddcef4029517348c9da', name: this.secondaryIcon, size: 16 }), index.h("span", { key: '1d097b4874f5379a7e6f2f9882ba83b0828d1099' }, this.secondaryLabel))), this.primaryLabel && (index.h("button", { key: '7ffa258f1778a0ae31b574a3ccb1319162648fb9', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && index.h("co-icon", { key: 'd75c5a25355c3b65222889b5a1ea75ecb559c05c', name: this.primaryIcon, size: 16 }), index.h("span", { key: '3a3cb4f049c8d590088182ef486304b291963aa4' }, this.primaryLabel))), index.h("slot", { key: '8e7579f147928f28f3f119ebb5423efb85922995' })));
+        return (index.h("div", { key: 'fbf4ec72aa2f6814b558d51c44592e784355751e', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (index.h("button", { key: '78abef0f79117263c7d30e5ce37a876d193ba5e4', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && index.h("co-icon", { key: 'a765ab5be51d7eb5791d3161cf5c7d3688fa0fd7', name: this.secondaryIcon, size: 16 }), index.h("span", { key: '0f5d57201bcd6ce40439c26916e01f1e37fcd87e' }, this.secondaryLabel))), this.primaryLabel && (index.h("button", { key: '27aa3b20666c9fe2a6fb7f28a9ca6e2542dd8fd7', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && index.h("co-icon", { key: 'bafe2ebb9cfb2cc26c682ae9b419b09a512652f8', name: this.primaryIcon, size: 16 }), index.h("span", { key: 'c3c9baead987beea02ead3a65d3372c5532a67b8' }, this.primaryLabel))), index.h("slot", { key: '7a1ce48c91cc95c320c4d680053f42555e601187' })));
     }
 };
 CoListFooter.style = coListFooterCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DK-2Lzmf.js');
+var index = require('./index-MDAnKsze.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}`;
 
@@ -71,21 +71,21 @@ const CoListItem = class {
         requestAnimationFrame(this.measureTruncation);
     }
     render() {
-        return (index.h("div", { key: '4f75f2a1f42dea993a9b6fa7fe922bed8cbac7e5', class: {
+        return (index.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 }, index.h("span", { key: 'f4da4a9cfc3685cd3124c95308857353729fe71e', class: "co-list-item__prefix" }, this.icon && index.h("co-icon", { key: '640630cb8639d9b897734ceb4fa91b6eddd2a432', name: this.icon, size: 18 }), index.h("slot", { key: '300cfc7354b11bce7c94a349d2ec0c6d58bc00da', name: "prefix" })), index.h("div", { key: '7278c5c18ce4f390e31fc2af8f360de91c2ca644', class: "co-list-item__content" }, this.label && (index.h("co-tooltip", { key: 'fb1a48e2364bd34d1940cddda3402c8a114720cc', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, index.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 }, index.h("span", { key: 'a0f3c86656e408225fdbfeb610a088f8adebfa55', class: "co-list-item__prefix" }, this.icon && index.h("co-icon", { key: '18be77a790afd7b83f8ad07c9af5925abed4f23b', name: this.icon, size: 18 }), index.h("slot", { key: '2e198e4c541e1c86c6c266cf93408e195c851428', name: "prefix" })), index.h("div", { key: 'cbb5768d0a7bb287dbab1e013ae5e03ff2194a1f', class: "co-list-item__content" }, this.label && (index.h("co-tooltip", { key: '79730131bb1a74660d6dba076b622358b7c1ee15', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, index.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 && (index.h("co-tooltip", { key: 'b40df7e5bec902fad45f79e2984b226302b68d5f', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, index.h("span", { key: '2af014c92bbf2d596f7fd78d73309f6cb7813047', class: "co-list-item__description", ref: (el) => {
+            } }, this.label))), this.description && (index.h("co-tooltip", { key: '56c81304ceec7039a659c1e2443a17df48bf88eb', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, index.h("span", { key: '5f1f870da25778bfbe801cfb769319cff71fac75', class: "co-list-item__description", ref: (el) => {
                 this.descEl = el;
                 if (el && this.ro)
                     this.ro.observe(el);
-            } }, this.description))), index.h("slot", { key: '1066c2e56c9855d77e28d891b77602988e70aba4' })), index.h("span", { key: 'c6413614311416a7d06681c7d381a004dfd9891b', class: "co-list-item__suffix" }, index.h("slot", { key: 'aff9146f80c9b61c42e1da3926b7b6b8a7eaf1f7', name: "suffix" }))));
+            } }, this.description))), index.h("slot", { key: '136ec5db83f4d2a77126d734ecac511c92b36d91' })), index.h("span", { key: '759b18ea3bedcb7b7b8023cb6ca1444fbacb5748', class: "co-list-item__suffix" }, index.h("slot", { key: 'c6519a183c1b7cdb84e4d822a5e2fa523a99ab52', name: "suffix" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DK-2Lzmf.js');
+var index = require('./index-MDAnKsze.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))}}`;