@prolibu-suite/cobalt-core 0.9.6 → 0.10.1

package/dist/esm/co-file-field.entry.js

@@ -1,85 +1,6 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CrtiywTB.js';
-import { R as RequiredMark } from './requiredMark-DCD-ZA51.js';
-
-/**
- * Built-in UI string dictionary for co-file-field.
- *
- * Strategy mirrors dateI18n: the component ships es/en/pt strings keyed by the
- * `locale` prop, with per-string prop overrides (uploadButtonText, dropText,
- * uploadedTitle, helperText) for full host control. Templates use `{n}` (max
- * files) and `{x}` (formatted max size) placeholders.
- */
-const DICT = {
-    es: {
-        uploadButton: 'Cargar archivo',
-        dropHint: 'Arrastra y suelta archivos aquí',
-        helperBoth: 'Puedes subir hasta {n} archivos, cada uno hasta {x}',
-        helperFiles: 'Puedes subir hasta {n} archivos',
-        helperBytes: 'Cada archivo hasta {x}',
-        uploadedTitle: 'Archivos subidos',
-        removeFile: 'Eliminar archivo',
-        copyUrl: 'Copiar enlace',
-        downloadFile: 'Descargar',
-        copied: 'Copiado',
-        dragToReorder: 'Arrastra para reordenar',
-        openPreview: 'Abrir vista previa',
-        errInvalidFormat: 'Formato no permitido: .{x}',
-        errTooLarge: 'Archivo demasiado grande: {x}',
-        errMaxFiles: 'Puedes subir hasta {n} archivos',
-    },
-    en: {
-        uploadButton: 'Upload file',
-        dropHint: 'Drag and drop files here',
-        helperBoth: 'You can upload up to {n} files, each up to {x}',
-        helperFiles: 'You can upload up to {n} files',
-        helperBytes: 'Each file up to {x}',
-        uploadedTitle: 'Uploaded files',
-        removeFile: 'Remove file',
-        copyUrl: 'Copy link',
-        downloadFile: 'Download',
-        copied: 'Copied',
-        dragToReorder: 'Drag to reorder',
-        openPreview: 'Open preview',
-        errInvalidFormat: 'Invalid format: .{x}',
-        errTooLarge: 'File too large: {x}',
-        errMaxFiles: 'You can upload up to {n} files',
-    },
-    pt: {
-        uploadButton: 'Carregar arquivo',
-        dropHint: 'Arraste e solte arquivos aqui',
-        helperBoth: 'Você pode enviar até {n} arquivos, cada um até {x}',
-        helperFiles: 'Você pode enviar até {n} arquivos',
-        helperBytes: 'Cada arquivo até {x}',
-        uploadedTitle: 'Arquivos enviados',
-        removeFile: 'Remover arquivo',
-        copyUrl: 'Copiar link',
-        downloadFile: 'Baixar',
-        copied: 'Copiado',
-        dragToReorder: 'Arraste para reordenar',
-        openPreview: 'Abrir pré-visualização',
-        errInvalidFormat: 'Formato inválido: .{x}',
-        errTooLarge: 'Arquivo muito grande: {x}',
-        errMaxFiles: 'Você pode enviar até {n} arquivos',
-    },
-};
-/** Map any BCP-47 locale (e.g. "es-CO") to a supported language; fallback 'en'. */
-function langFromLocale(locale) {
-    const l = (locale || '').toLowerCase();
-    if (l.startsWith('es'))
-        return 'es';
-    if (l.startsWith('pt'))
-        return 'pt';
-    return 'en';
-}
-/** Resolve the built-in UI strings for a locale. */
-function getFileStrings(locale) {
-    return DICT[langFromLocale(locale)];
-}
-/** Fill the `{n}` / `{x}` placeholders of a template string. */
-function fillTemplate(tpl, vars) {
-    var _a, _b;
-    return tpl.replace('{n}', String((_a = vars.n) !== null && _a !== void 0 ? _a : '')).replace('{x}', (_b = vars.x) !== null && _b !== void 0 ? _b : '');
-}
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.js';
+import { R as RequiredMark } from './requiredMark-BCJUuZvC.js';
+import { g as getFileStrings, f as fillTemplate } from './fileI18n-gKnOhsd2.js';
 
 /** Format bytes like the Figma spec: "59.25 KB" (base 1024, up to 2 decimals). */
 function formatBytes(bytes) {
@@ -104,15 +25,55 @@ 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.
+ */
+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.
+ */
+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. */
 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;
@@ -120,16 +81,23 @@ function isImage(item) {
         return true;
     return hasImageExtension(item);
 }
+/** Items that earn a card in the previews grid: images and videos alike. */
+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`.
  */
 function previewSrc(item) {
+    if (hasVideoExtension(item))
+        return item.url || item.thumbnail;
     return hasImageExtension(item) ? item.url || item.thumbnail : item.thumbnail || item.url;
 }
 
-const coFileFieldCss = () => `: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-file-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-file-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs)}.co-file-field__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;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-file-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--co-spacing-md);padding:var(--co-spacing-4xl) var(--co-spacing-2xl);background:color-mix(in srgb, var(--co-semantic-surface-hover) 55%, transparent);-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));border:1px dashed var(--co-semantic-border-field);border-radius:var(--co-border-radius-sm);cursor:pointer;text-align:center;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-file-field__dropzone:hover{border-color:var(--co-semantic-border-focus)}.co-file-field__dropzone--drag{border-color:var(--co-semantic-border-focus);background:var(--co-semantic-surface-hover)}.co-file-field__upload-btn{display:inline-flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-md) var(--co-spacing-xl);margin-bottom:var(--co-spacing-xs);background:var(--co-semantic-surface-secondary);color:var(--co-semantic-text-default);border:none;border-radius:var(--co-border-radius-full);box-shadow:var(--co-shadow-lg);font-family:inherit;font-size:var(--co-font-size-16);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;cursor:pointer;transition:box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-file-field__upload-btn:hover{box-shadow:var(--co-shadow-xl, var(--co-shadow-lg));transform:translateY(-1px)}.co-file-field__upload-btn co-icon{display:inline-flex;flex-shrink:0}.co-file-field__dropzone-text{color:var(--co-semantic-text-default);font-size:var(--co-font-size-18);line-height:1.25}.co-file-field__dropzone-hint{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);line-height:1.25}.co-file-field__actions{display:contents}.co-file-field__input{display:none}.co-file-field__uploaded{display:flex;flex-direction:column;gap:var(--co-spacing-lg);margin-top:var(--co-spacing-sm2)}.co-file-field__uploaded-title{color:var(--co-semantic-text-default);font-size:var(--co-font-size-22);font-weight:500;letter-spacing:-0.03em;line-height:1.25}.co-file-field__previews{display:grid;grid-template-columns:repeat(auto-fill, minmax(150px, 180px));gap:var(--co-spacing-md)}.co-file-field__preview{padding:0;border:none;border-radius:var(--co-border-radius-sm);overflow:hidden;aspect-ratio:3 / 2;background:var(--co-semantic-surface-hover);cursor:pointer}.co-file-field__preview img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-file-field__preview:hover img{transform:scale(1.02)}.co-file-field__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-file-field__row{display:flex;align-items:center;gap:var(--co-spacing-lg);padding:var(--co-spacing-xl);background:var(--co-semantic-surface-hover);border:1px solid transparent;border-radius:var(--co-border-radius-sm)}.co-file-field__row--error{border-color:var(--co-semantic-status-error)}.co-file-field__row--dragging{opacity:0.5}.co-file-field__row--drop-target{border-color:var(--co-semantic-border-focus);background:var(--co-semantic-surface-hover)}.co-file-field__drag-handle{flex-shrink:0;display:flex;align-items:center;color:var(--co-semantic-text-secondary);cursor:grab}.co-file-field__drag-handle:active{cursor:grabbing}.co-file-field__row-icon{flex-shrink:0;color:var(--co-semantic-text-secondary);display:flex;align-items:center}.co-file-field__row--error .co-file-field__row-icon{color:var(--co-semantic-status-error)}.co-file-field__row-icon--spin{animation:co-file-spin 0.8s linear infinite}@keyframes co-file-spin{to{transform:rotate(360deg)}}.co-file-field__row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--co-spacing-xs)}.co-file-field__row-name{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-file-field__row-error{color:var(--co-semantic-status-error);font-size:var(--co-font-size-12)}.co-file-field__row-size{flex-shrink:0;color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);line-height:1;white-space:nowrap}.co-file-field__progress{position:relative;height:4px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-hover);overflow:hidden}.co-file-field__progress-bar{position:absolute;inset:0;width:40%;border-radius:var(--co-border-radius-full);background:var(--co-semantic-status-info);transition:width var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-file-field__progress-bar:not([style]){animation:co-file-indeterminate 1.2s ease-in-out infinite}@keyframes co-file-indeterminate{0%{left:-40%}100%{left:100%}}.co-file-field__action{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;text-decoration:none;color:var(--co-semantic-text-secondary);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-file-field__action:hover{color:var(--co-semantic-text-default)}.co-file-field__action--copied,.co-file-field__action--copied:hover{color:var(--co-color-primary-verde)}.co-file-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-file-field__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-file-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);line-height:1}.co-file-field--disabled{opacity:0.6;pointer-events:none}.co-file-field--invalid .co-file-field__dropzone,.co-file-field--error .co-file-field__dropzone{border-color:var(--co-semantic-status-error)}.co-file-field__helper--error .co-file-field__helper-icon,.co-file-field__helper--error .co-file-field__helper-text{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-file-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-file-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-file-field__label{white-space:normal}:host([layout='horizontal']) .co-file-field>:not(.co-file-field__labels){grid-column:2;min-width:0}@supports not (background: color-mix(in srgb, red, transparent)){.co-file-field__dropzone{background:var(--co-semantic-surface-hover)}}`;
+const coFileFieldCss = () => `: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-file-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-file-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs)}.co-file-field__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;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-file-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--co-spacing-md);padding:var(--co-spacing-4xl) var(--co-spacing-2xl);background:color-mix(in srgb, var(--co-semantic-surface-hover) 55%, transparent);border:1px dashed var(--co-semantic-border-field);border-radius:var(--co-border-radius-sm);cursor:pointer;text-align:center;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-file-field__dropzone:hover{border-color:var(--co-semantic-border-focus)}.co-file-field__dropzone--drag{border-color:var(--co-semantic-border-focus);background:var(--co-semantic-surface-hover)}.co-file-field__upload-btn{display:inline-flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-md) var(--co-spacing-xl);margin-bottom:var(--co-spacing-xs);background:var(--co-semantic-surface-secondary);color:var(--co-semantic-text-default);border:none;border-radius:var(--co-border-radius-full);box-shadow:var(--co-shadow-lg);font-family:inherit;font-size:var(--co-font-size-16);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;cursor:pointer;transition:box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-file-field__upload-btn:hover{box-shadow:var(--co-shadow-xl, var(--co-shadow-lg));transform:translateY(-1px)}.co-file-field__upload-btn co-icon{display:inline-flex;flex-shrink:0}.co-file-field__dropzone-text{color:var(--co-semantic-text-default);font-size:var(--co-font-size-18);line-height:1.25}.co-file-field__dropzone-hint{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);line-height:1.25}.co-file-field__actions{display:contents}.co-file-field__input{display:none}.co-file-field__uploaded{display:flex;flex-direction:column;gap:var(--co-spacing-lg);margin-top:var(--co-spacing-sm2)}.co-file-field__uploaded-title{color:var(--co-semantic-text-default);font-size:var(--co-font-size-22);font-weight:500;letter-spacing:-0.03em;line-height:1.25}.co-file-field__previews{display:grid;grid-template-columns:repeat(auto-fill, minmax(150px, 180px));gap:var(--co-spacing-md)}.co-file-field__preview{padding:0;border:none;border-radius:var(--co-border-radius-sm);overflow:hidden;aspect-ratio:3 / 2;background:var(--co-semantic-surface-hover);cursor:pointer}.co-file-field__preview img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-file-field__preview:hover img{transform:scale(1.02)}.co-file-field__preview--video{position:relative;background:var(--co-color-base-negro)}.co-file-field__preview-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--co-spacing-sm2);color:var(--co-color-base-blanco);pointer-events:none}.co-file-field__preview-play-badge{display:flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:var(--co-border-radius-full);background:var(--co-color-opacity-negro-80);box-shadow:inset 0 0 0 1px var(--co-color-opacity-blanco-25);transition:transform var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-file-field__preview--video:hover .co-file-field__preview-play-badge{transform:scale(1.08)}.co-file-field__preview-play-badge co-icon{transform:translateX(1px)}.co-file-field__preview-ext{font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12);font-weight:var(--co-font-weight-medium);letter-spacing:var(--co-font-letter-spacing-overline);color:var(--co-color-opacity-blanco-80)}.co-file-field__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-file-field__row{display:flex;align-items:center;gap:var(--co-spacing-lg);padding:var(--co-spacing-xl);background:var(--co-semantic-surface-hover);border:1px solid transparent;border-radius:var(--co-border-radius-sm)}.co-file-field__row--error{border-color:var(--co-semantic-status-error)}.co-file-field__row--dragging{opacity:0.5}.co-file-field__row--drop-target{border-color:var(--co-semantic-border-focus);background:var(--co-semantic-surface-hover)}.co-file-field__drag-handle{flex-shrink:0;display:flex;align-items:center;color:var(--co-semantic-text-secondary);cursor:grab}.co-file-field__drag-handle:active{cursor:grabbing}.co-file-field__row-icon{flex-shrink:0;color:var(--co-semantic-text-secondary);display:flex;align-items:center}.co-file-field__row--error .co-file-field__row-icon{color:var(--co-semantic-status-error)}.co-file-field__row-icon--spin{animation:co-file-spin 0.8s linear infinite}@keyframes co-file-spin{to{transform:rotate(360deg)}}.co-file-field__row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--co-spacing-xs)}.co-file-field__row-name{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-file-field__row-error{color:var(--co-semantic-status-error);font-size:var(--co-font-size-12)}.co-file-field__row-size{flex-shrink:0;color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);line-height:1;white-space:nowrap}.co-file-field__progress{position:relative;height:4px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-hover);overflow:hidden}.co-file-field__progress-bar{position:absolute;inset:0;width:40%;border-radius:var(--co-border-radius-full);background:var(--co-semantic-status-info);transition:width var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-file-field__progress-bar:not([style]){animation:co-file-indeterminate 1.2s ease-in-out infinite}@keyframes co-file-indeterminate{0%{left:-40%}100%{left:100%}}.co-file-field__action{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;text-decoration:none;color:var(--co-semantic-text-secondary);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-file-field__action:hover{color:var(--co-semantic-text-default)}.co-file-field__action--copied,.co-file-field__action--copied:hover{color:var(--co-color-primary-verde)}.co-file-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-file-field__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-file-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);line-height:1}.co-file-field--disabled{opacity:0.6;pointer-events:none}.co-file-field--invalid .co-file-field__dropzone,.co-file-field--error .co-file-field__dropzone{border-color:var(--co-semantic-status-error)}.co-file-field__helper--error .co-file-field__helper-icon,.co-file-field__helper--error .co-file-field__helper-text{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-file-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-file-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-file-field__label{white-space:normal}:host([layout='horizontal']) .co-file-field>:not(.co-file-field__labels){grid-column:2;min-width:0}@supports not (background: color-mix(in srgb, red, transparent)){.co-file-field__dropzone{background:var(--co-semantic-surface-hover)}}`;
 
 const CoFileField = class {
     constructor(hostRef) {
@@ -213,6 +181,14 @@ const CoFileField = class {
             this.resetDragState();
         };
     }
+    /** Seeding `@State` here and not on the class field: the @stencil/vitest
+     *  transform doesn't apply field defaults before the first render, so a
+     *  `failedPreviews.has(...)` in render() would blow up on a bare Set
+     *  (precedente co-data-table / co-audio-player). */
+    componentWillLoad() {
+        if (!this.failedPreviews)
+            this.failedPreviews = new Set();
+    }
     connectedCallback() {
         window.addEventListener('mouseup', this.disarmDrag);
     }
@@ -353,6 +329,17 @@ const CoFileField = class {
         }
     }
     // ── Preview (in-app lightbox) ─────────────────────────────────
+    /**
+     * The previews grid and the lightbox gallery MUST agree on what they show,
+     * or the index the viewer opens on points at the wrong file. One factory,
+     * two call sites.
+     *
+     * A video stays in the grid even when its poster fails to load (the card
+     * falls back to the type tile) — dropping it would leave no way to play it.
+     */
+    previewItems() {
+        return this.parsedFiles.filter((it) => isPreviewable(it) && (isVideo(it) || !this.failedPreviews.has(this.keyFor(it))));
+    }
     /**
      * Opens the clicked image in a co-lightbox with the SAME gallery the
      * previews grid shows. The lightbox is created imperatively on
@@ -364,12 +351,10 @@ const CoFileField = class {
         if (!url)
             return;
         this.coPreviewOpen.emit({ id: this.keyFor(item), url });
-        const gallery = this.parsedFiles.filter((it) => isImage(it) && !this.failedPreviews.has(this.keyFor(it)));
-        const images = gallery.map((it) => ({
-            src: previewSrc(it),
-            thumbnail: it.thumbnail,
-            alt: it.name,
-        }));
+        const gallery = this.previewItems();
+        const images = gallery.map((it) => isVideo(it)
+            ? { src: previewSrc(it), thumbnail: it.thumbnail, alt: it.name, kind: 'video', poster: it.thumbnail }
+            : { src: previewSrc(it), thumbnail: it.thumbnail, alt: it.name });
         const startIndex = Math.max(0, gallery.findIndex((it) => this.keyFor(it) === this.keyFor(item)));
         this.closeLightbox();
         const lb = document.createElement('co-lightbox');
@@ -450,15 +435,15 @@ const CoFileField = class {
         const atCapacity = this.multiple && items.length >= this.maxFiles;
         const showDropzone = !this.readonly && (this.multiple ? !atCapacity : items.length === 0);
         const statusClass = this.status !== 'default' ? `co-file-field--${this.status}` : '';
-        const previews = items.filter((it) => isImage(it) && !this.failedPreviews.has(this.keyFor(it)));
+        const previews = this.previewItems();
         const canReorder = this.reorderable && this.multiple && !this.disabled && !this.readonly && items.length > 1;
         const capacity = this.capacityHint(s);
-        return (h("div", { key: '615291bd9c075d4f26f264602da03427e13bf35b', class: {
+        return (h("div", { key: '47a8258c141901fcb3621a24d638f0849946172e', class: {
                 'co-file-field': true,
                 'co-file-field--disabled': this.disabled,
                 'co-file-field--invalid': this.isInvalid,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, this.label && (h("div", { key: '0c4fbdb6c5824824bbe39a96c568f06f442955ef', class: "co-file-field__labels" }, h("label", { key: '4f8767b17adcd04d553c2cf6668c60c30a780783', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '82fb4a69b136fcdcdd3b3e81ea8d2deb8ca64e10', required: this.required })))), showDropzone && (h("div", { key: 'bce9efbedf17d917ae4bf00ae839409f63e4cccd', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: '603d04815a5730f45a2462d6c2904de4c7aa83af', class: "co-file-field__labels" }, h("label", { key: 'e280970feef1f6fad7c9ce336a5002746231a7c6', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '075b35392df1a5be556dcc9dcbd2130d0a3c91a1', required: this.required })))), showDropzone && (h("div", { key: 'd9dec9f08bc063239bd7b75acc43813ab3f9aebb', class: {
                 'co-file-field__dropzone': true,
                 'co-file-field__dropzone--drag': this.dragOver,
             }, part: "dropzone", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleBrowse, onKeyDown: (e) => {
@@ -466,7 +451,18 @@ const CoFileField = class {
                     e.preventDefault();
                     this.handleBrowse();
                 }
-            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: '82c82cf57f9692bc560d4c82e0bc22a539e25e08', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: 'e2dc567ce78647717c894c877334e2eecab6b80e', name: "file-arrow-up", size: 18 }), h("span", { key: '9c0082e62f13a53d5d598623e35678db84df52b3' }, this.uploadButtonText || s.uploadButton)), h("span", { key: '3f43f21c3fb54f1d21143aa7cdf9a485ee89cf69', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: 'd4b2a12ffde1a17c5f1cdded7fb50f035ffb6f0c', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: '38e36894d82bb094d4dbd37fb10b915607bf3f13', class: "co-file-field__actions", part: "actions" }, h("slot", { key: '993f64d18baed0474f29e50418bd5883ac6bc90c', name: "actions" })), h("input", { key: '33dcec562a9c266ca3920537297ddbff2688a0a3', ref: (el) => (this.inputEl = el), class: "co-file-field__input", type: "file", multiple: this.multiple, accept: this.inputAccept, disabled: this.disabled, onChange: this.handleInputChange, "aria-hidden": "true", tabIndex: -1 }))), items.length > 0 && (h("div", { key: 'a78a747ee890c15d082c99770c0a8487405301ee', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: '08336c691f85e1c39216779a850e1c4eb4ad92eb', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: '374c52cbaf91ab19d1781c6f4faaed809146aea5', class: "co-file-field__previews", part: "previews" }, previews.map((item) => (h("button", { class: "co-file-field__preview", part: "preview", type: "button", key: `prev-${this.keyFor(item)}`, title: item.name, "aria-label": s.openPreview, onClick: () => this.handlePreviewOpen(item) }, h("img", { src: item.thumbnail || item.url, alt: item.name, loading: "lazy", onError: () => this.handlePreviewError(item) })))))), h("ul", { key: '93ab31f0a3567287db8de9b5b00f4e3772988c82', class: "co-file-field__list", part: "list" }, items.map((item) => {
+            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: '61afb508be3e46257e2ffdb2bdc62d66e37055ed', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: '96bb8ef3107abbee44fb5bd7c80ff2cbf39915ec', name: "file-arrow-up", size: 18 }), h("span", { key: '53950664f09064e29d1427530058e0634b287a92' }, this.uploadButtonText || s.uploadButton)), h("span", { key: 'de085f9dac492ea1b7db278a34e25ec2a8baa1d3', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: '1617a52c9773a31ff8617e7310401a95911ecc2f', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: 'f6f07691b5ec339f2ae0fa302415dd3dba04fe69', class: "co-file-field__actions", part: "actions" }, h("slot", { key: 'b5332b03438a34a82ffb565b1d2901a69729af61', name: "actions" })), h("input", { key: '5d0089ebcd857f1fa97bedcd743ab0530e75715a', ref: (el) => (this.inputEl = el), class: "co-file-field__input", type: "file", multiple: this.multiple, accept: this.inputAccept, disabled: this.disabled, onChange: this.handleInputChange, "aria-hidden": "true", tabIndex: -1 }))), items.length > 0 && (h("div", { key: 'cec19c438ec510dbae564c33dd3e6b739e156294', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: 'e97f2fe09fb30521d5b22238d2714d8f1002a2ed', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: '569f37799d34182ff00996dd011232daf7f141a8', class: "co-file-field__previews", part: "previews" }, previews.map((item) => {
+            const key = this.keyFor(item);
+            const video = isVideo(item);
+            // A video without a usable poster still gets a card — the
+            // type tile stands in for the frame we don't have.
+            const poster = this.failedPreviews.has(key) ? '' : item.thumbnail;
+            const showImg = !video || !!poster;
+            return (h("button", { class: {
+                    'co-file-field__preview': true,
+                    'co-file-field__preview--video': video,
+                }, part: "preview", type: "button", key: `prev-${key}`, title: item.name, "aria-label": `${video ? s.playVideo : s.openPreview}: ${item.name}`, onClick: () => this.handlePreviewOpen(item) }, showImg && (h("img", { src: video ? poster : item.thumbnail || item.url, alt: item.name, loading: "lazy", onError: () => this.handlePreviewError(item) })), video && (h("span", { class: "co-file-field__preview-play", "aria-hidden": "true" }, h("span", { class: "co-file-field__preview-play-badge" }, h("co-icon", { name: "play", size: 20, weight: "fill" })), !poster && (h("span", { class: "co-file-field__preview-ext" }, fileExtension(item).toUpperCase()))))));
+        }))), h("ul", { key: '2de5c71b79f82cd50c5aea5818d9848956eeb1eb', class: "co-file-field__list", part: "list" }, items.map((item) => {
             const key = this.keyFor(item);
             const draggable = canReorder && item.status === 'done';
             return (h("li", { class: {
@@ -490,10 +486,10 @@ const CoFileField = class {
                     'co-file-field__action': true,
                     'co-file-field__action--copied': this.copiedKey === key,
                 }, type: "button", tabIndex: -1, "aria-label": s.copyUrl, onClick: () => this.handleCopy(item) }, h("co-icon", { name: this.copiedKey === key ? 'check' : 'copy', size: 18 })))), !this.disabled && !this.readonly && (h("co-tooltip", { content: s.removeFile }, h("button", { class: "co-file-field__action", type: "button", tabIndex: -1, "aria-label": s.removeFile, onClick: () => this.coRemove.emit(key) }, h("co-icon", { name: "trash", size: 18 }))))));
-        })))), helper && (h("div", { key: 'd05514a8115362aa08a872baaf1293a55048ad79', class: {
+        })))), helper && (h("div", { key: 'a6a14de91f12490b54717153520e3f59b9c9ef10', class: {
                 'co-file-field__helper': true,
                 'co-file-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '0e5f2c0feb7dff2da1d549b498ed1e7ae6051448', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '716ea5cc929a44f1da1984952da2bb5a9ce0a791', class: "co-file-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '500ff53b0e1b4f894891bfc3f442ca170a2da2d0', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: 'c723bcbf23a6bcecb9f781aede09120f78fe9b55', class: "co-file-field__helper-text" }, helper)))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/co-file-type-tile.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-CrtiywTB.js';
+import { r as registerInstance, h } from './index-DH5lfRNj.js';
 
 const coFileTypeTileCss = () => `:host{display:inline-flex}.co-file-type-tile{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box}`;
 
@@ -58,7 +58,7 @@ const CoFileTypeTile = class {
         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,
@@ -68,7 +68,7 @@ const CoFileTypeTile = class {
                 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" })));
     }
 };
 CoFileTypeTile.style = coFileTypeTileCss();

package/dist/esm/co-helper-text.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-CrtiywTB.js';
+import { r as registerInstance, h } from './index-DH5lfRNj.js';
 
 const coHelperTextCss = () => `:host{display:block}.co-helper-text{display:flex;align-items:center;gap:var(--co-spacing-xs);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12);line-height:1.4}.co-helper-text__icon{flex-shrink:0}.co-helper-text--default{color:var(--co-semantic-text-muted)}.co-helper-text--error{color:var(--co-semantic-status-error)}.co-helper-text--success{color:var(--co-semantic-status-success)}.co-helper-text--warning{color:var(--co-semantic-status-warning)}.co-helper-text--info{color:var(--co-semantic-status-info)}`;
 
@@ -16,10 +16,10 @@ const CoHelperText = class {
         };
     }
     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))));
     }
 };
 CoHelperText.style = coHelperTextCss();

package/dist/esm/co-icon-button.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-CrtiywTB.js';
+import { r as registerInstance, h } from './index-DH5lfRNj.js';
 
-const coIconButtonCss = () => `:host{display:inline-flex}:host([disabled]){pointer-events:none}.co-icon-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;outline:none;padding:0;flex-shrink:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out),     background var(--co-motion-duration-fast) var(--co-motion-ease-out),     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--filled{background:color-mix(in srgb, var(--co-semantic-surface-primary) 78%, transparent);color:var(--co-semantic-on-primary);border-color:color-mix(in srgb, var(--co-semantic-on-primary) 28%, transparent)}.co-icon-button--outlined{background:color-mix(in srgb, var(--co-icon-button-bg, var(--co-semantic-surface-secondary)) 55%, transparent);color:var(--co-icon-button-color, var(--co-semantic-on-secondary));border:1px solid var(--co-icon-button-border, var(--co-semantic-border-subtle))}.co-icon-button--ghost{background:transparent;color:var(--co-icon-button-color, var(--co-semantic-text-default));border:none;-webkit-backdrop-filter:none;backdrop-filter:none}.co-icon-button--ghost:hover:not(:disabled){background:var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08))}.co-icon-button--dark{color:var(--co-icon-button-color, var(--co-color-base-blanco, #fff))}.co-icon-button--dark.co-icon-button--ghost:hover:not(:disabled){background:var(--co-color-opacity-blanco-16, rgba(255, 255, 255, 0.16))}.co-icon-button--rounded.co-icon-button--xl{width:80px;height:80px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--lg{width:64px;height:64px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--md{width:56px;height:56px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--sm{width:48px;height:48px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--xs{width:32px;height:32px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--xxs{width:24px;height:24px;border-radius:var(--co-border-radius-full)}.co-icon-button--square.co-icon-button--xl{width:80px;height:80px;border-radius:var(--co-border-radius-xl);}.co-icon-button--square.co-icon-button--lg{width:64px;height:64px;border-radius:var(--co-border-radius-lg);}.co-icon-button--square.co-icon-button--md{width:56px;height:56px;border-radius:var(--co-border-radius-lg);}.co-icon-button--square.co-icon-button--sm{width:48px;height:48px;border-radius:var(--co-border-radius-sm);}.co-icon-button--square.co-icon-button--xs{width:32px;height:32px;border-radius:var(--co-border-radius-xs);}.co-icon-button--square.co-icon-button--xxs{width:24px;height:24px;border-radius:var(--co-spacing-sm);}.co-icon-button--xl ::slotted(*){width:32px;height:32px}.co-icon-button--lg ::slotted(*){width:24px;height:24px}.co-icon-button--md ::slotted(*){width:20px;height:20px}.co-icon-button--sm ::slotted(*){width:18px;height:18px}.co-icon-button--xs ::slotted(*){width:16px;height:16px}.co-icon-button--xxs ::slotted(*){width:12px;height:12px}.co-icon-button--disabled,.co-icon-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-icon-button:hover:not(:disabled){opacity:0.88}.co-icon-button:focus-visible{outline:none;border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus)}.co-icon-button--dark:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, var(--co-color-base-blanco, #fff) 45%, transparent)}.co-icon-button:active:not(:disabled){transform:scale(0.97);transition-duration:var(--co-motion-duration-instant)}@supports not (background: color-mix(in srgb, red, transparent)){.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))}}`;
+const coIconButtonCss = () => `:host{display:inline-flex}:host([disabled]){pointer-events:none}.co-icon-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;outline:none;padding:0;flex-shrink:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out),     background var(--co-motion-duration-fast) var(--co-motion-ease-out),     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, 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))))}.co-icon-button--filled{background:color-mix(in srgb, var(--co-semantic-surface-primary) 78%, transparent);color:var(--co-semantic-on-primary);border-color:color-mix(in srgb, var(--co-semantic-on-primary) 28%, transparent)}.co-icon-button--outlined{background:color-mix(in srgb, var(--co-icon-button-bg, var(--co-semantic-surface-secondary)) 55%, transparent);color:var(--co-icon-button-color, var(--co-semantic-on-secondary));border:1px solid var(--co-icon-button-border, var(--co-semantic-border-subtle))}.co-icon-button--ghost{background:transparent;color:var(--co-icon-button-color, var(--co-semantic-text-default));border:none;-webkit-backdrop-filter:none;backdrop-filter:none}.co-icon-button--ghost:hover:not(:disabled){background:var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08))}.co-icon-button--dark{color:var(--co-icon-button-color, var(--co-color-base-blanco, #fff))}.co-icon-button--dark.co-icon-button--ghost:hover:not(:disabled){background:var(--co-color-opacity-blanco-16, rgba(255, 255, 255, 0.16))}.co-icon-button--rounded.co-icon-button--xl{width:80px;height:80px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--lg{width:64px;height:64px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--md{width:56px;height:56px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--sm{width:48px;height:48px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--xs{width:32px;height:32px;border-radius:var(--co-border-radius-full)}.co-icon-button--rounded.co-icon-button--xxs{width:24px;height:24px;border-radius:var(--co-border-radius-full)}.co-icon-button--square.co-icon-button--xl{width:80px;height:80px;border-radius:var(--co-border-radius-xl);}.co-icon-button--square.co-icon-button--lg{width:64px;height:64px;border-radius:var(--co-border-radius-lg);}.co-icon-button--square.co-icon-button--md{width:56px;height:56px;border-radius:var(--co-border-radius-lg);}.co-icon-button--square.co-icon-button--sm{width:48px;height:48px;border-radius:var(--co-border-radius-sm);}.co-icon-button--square.co-icon-button--xs{width:32px;height:32px;border-radius:var(--co-border-radius-xs);}.co-icon-button--square.co-icon-button--xxs{width:24px;height:24px;border-radius:var(--co-spacing-sm);}.co-icon-button--xl ::slotted(*){width:32px;height:32px}.co-icon-button--lg ::slotted(*){width:24px;height:24px}.co-icon-button--md ::slotted(*){width:20px;height:20px}.co-icon-button--sm ::slotted(*){width:18px;height:18px}.co-icon-button--xs ::slotted(*){width:16px;height:16px}.co-icon-button--xxs ::slotted(*){width:12px;height:12px}.co-icon-button--disabled,.co-icon-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-icon-button:hover:not(:disabled){opacity:0.88}.co-icon-button:focus-visible{outline:none;border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus)}.co-icon-button--dark:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, var(--co-color-base-blanco, #fff) 45%, transparent)}.co-icon-button:active:not(:disabled){transform:scale(0.97);transition-duration:var(--co-motion-duration-instant)}@supports not (background: color-mix(in srgb, red, transparent)){.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))}}.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)}`;
 
 const CoIconButton = class {
     constructor(hostRef) {
@@ -30,6 +30,8 @@ const CoIconButton = class {
         this.disabled = false;
         /** Accessible label */
         this.label = '';
+        /** Swap state: false → `icon`, true → `toggleIcon`. */
+        this.toggled = false;
         /** Icon weight */
         this.iconWeight = 'regular';
     }
@@ -48,16 +50,14 @@ const CoIconButton = class {
                     : '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));
     }
 };
 CoIconButton.style = coIconButtonCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-CrtiywTB.js';
+import { r as registerInstance, h, H as Host } from './index-DH5lfRNj.js';
 
 const CDN_BASE = 'https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets';
 /** Caché compartido a nivel de módulo: clave → PROMESA del SVG (en vuelo o resuelta). */
@@ -83,12 +83,12 @@ const CoIcon = class {
         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 watchers() { return {
         "name": [{

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CrtiywTB.js';
-import { R as RequiredMark } from './requiredMark-DCD-ZA51.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.js';
+import { R as RequiredMark } from './requiredMark-BCJUuZvC.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) {
@@ -53,6 +53,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;
@@ -86,6 +88,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
@@ -102,10 +108,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;
@@ -169,7 +191,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) && (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)))));
@@ -178,6 +201,9 @@ const CoInput = class {
     static get watchers() { return {
         "value": [{
                 "onValueChange": 0
+            }],
+        "status": [{
+                "onStatusChange": 0
             }]
     }; }
 };

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CrtiywTB.js';
-import { R as RequiredMark } from './requiredMark-DCD-ZA51.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.js';
+import { R as RequiredMark } from './requiredMark-BCJUuZvC.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}`;
 
@@ -87,17 +87,17 @@ const CoJsonField = class {
     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)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {