@prolibu-suite/cobalt-core 0.9.5 → 0.10.0

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { afterEventFor } from "../co-overlay/overlayAfterClose";
 import { slotHasContent } from "../../utils/slotContent";
 /**
  * @slot header  - Custom header content (overrides `heading` prop). Receives close button next to it.
@@ -58,16 +59,25 @@ export class CoDrawer {
             e.stopPropagation();
         };
         this.handleTransitionEnd = (e) => {
-            if (e.propertyName !== 'transform')
+            // Solo la transición `transform` del PROPIO aside: `transitionend` burbujea y
+            // los slots no lo frenan — un hover con transform dentro del body (p. ej. el
+            // CTA de propuesta del form de deals) re-emitía coAfterOpen/Close. Guard como
+            // co-modal.tsx (e.target !== this.modalEl). Spec: co-drawer.after-events.spec.tsx.
+            // La decisión open/close sale del helper compartido con co-modal/co-overlay
+            // (co-overlay/overlayAfterClose.ts); el guard de target queda acá porque el
+            // elemento observado es propio de cada componente.
+            if (e.target !== this.asideEl)
                 return;
-            if (this.open)
+            const ev = afterEventFor(e.propertyName, this.open, 'transform');
+            if (ev === 'after-open')
                 this.coAfterOpen.emit();
-            else
+            else if (ev === 'after-close')
                 this.coAfterClose.emit();
         };
-        /** Modeless only: keep the aside promoted to the top layer for its whole
-         *  lifetime (mirrors co-overlay's syncPopover; eviction on disconnect is
-         *  automatic). */
+        /** Ref del aside — SIEMPRE adjunto (handleTransitionEnd lo necesita como
+         *  target). Modeless only: además mantiene el aside promovido al top layer
+         *  para toda su vida (mirrors co-overlay's syncPopover; eviction on
+         *  disconnect is automatic). */
         this.promoteModeless = (el) => {
             if (el)
                 this.asideEl = el;
@@ -124,11 +134,13 @@ export class CoDrawer {
     render() {
         const aside = (h("aside", { class: {
                 'co-drawer': true,
+                'co-sq-elevation': true,
+                'co-sq-elevation-fallback': true,
                 'co-drawer--open': this.open,
                 'co-drawer--modeless': this.modeless,
                 [`co-drawer--${this.position}`]: true,
                 [`co-drawer--${this.size}`]: true,
-            }, popover: this.modeless ? 'manual' : undefined, ref: this.modeless ? this.promoteModeless : undefined, part: "drawer", role: "dialog", "aria-modal": this.modeless ? 'false' : 'true', "aria-labelledby": this.labelledBy, onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { class: "co-drawer__card", part: "card" }, h("header", { class: "co-drawer__header", part: "header" }, h("div", { class: "co-drawer__header-content", id: "co-drawer-header-content" }, h("slot", { name: "header", onSlotchange: this.handleHeaderSlotChange }, h("div", { class: "co-drawer__heading-row" }, this.icon && h("co-icon", { name: this.icon, size: 20, class: "co-drawer__icon" }), h("h2", { class: "co-drawer__heading", id: "co-drawer-heading" }, this.heading)), this.description && h("p", { class: "co-drawer__description" }, this.description))), this.closable && (h("button", { class: "co-drawer__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { name: "x", size: 20 })))), h("div", { class: { 'co-drawer__tabs': true, 'co-drawer__tabs--empty': !this.hasTabs }, part: "tabs" }, h("slot", { name: "tabs", onSlotchange: this.handleTabsSlotChange })), h("div", { class: "co-drawer__body", part: "body" }, h("slot", null), h("co-loader", { overlay: true, visible: this.loading, part: "loader" })), h("footer", { class: { 'co-drawer__footer': true, 'co-drawer__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { name: "footer", onSlotchange: this.handleFooterSlotChange })))));
+            }, popover: this.modeless ? 'manual' : undefined, ref: this.promoteModeless, part: "drawer", role: "dialog", "aria-modal": this.modeless ? 'false' : 'true', "aria-labelledby": this.labelledBy, onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { class: "co-drawer__card co-sq-clip", part: "card" }, h("header", { class: "co-drawer__header", part: "header" }, h("div", { class: "co-drawer__header-content", id: "co-drawer-header-content" }, h("slot", { name: "header", onSlotchange: this.handleHeaderSlotChange }, h("div", { class: "co-drawer__heading-row" }, this.icon && h("co-icon", { name: this.icon, size: 20, class: "co-drawer__icon" }), h("h2", { class: "co-drawer__heading", id: "co-drawer-heading" }, this.heading)), this.description && h("p", { class: "co-drawer__description" }, this.description))), this.closable && (h("button", { class: "co-drawer__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { name: "x", size: 20 })))), h("div", { class: { 'co-drawer__tabs': true, 'co-drawer__tabs--empty': !this.hasTabs }, part: "tabs" }, h("slot", { name: "tabs", onSlotchange: this.handleTabsSlotChange })), h("div", { class: "co-drawer__body", part: "body" }, h("slot", null), h("co-loader", { overlay: true, visible: this.loading, part: "loader" })), h("footer", { class: { 'co-drawer__footer': true, 'co-drawer__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { name: "footer", onSlotchange: this.handleFooterSlotChange })))));
         if (this.modeless)
             return aside;
         return (h("co-overlay", { open: this.open, onCoClose: this.handleOverlayClose }, aside));

package/dist/collection/components/co-drive-card/co-drive-card.js

@@ -74,7 +74,7 @@ export class CoDriveCard {
     }
     render() {
         const isFile = this.variant === 'file';
-        return (h("div", { key: 'fef9abf2a536fe08fa6c65fcc4e37955c5bc5373', class: {
+        return (h("div", { key: 'd21cc658d8a825973bf2662166792e2645cb7919', class: {
                 'co-drive-card': true,
                 [`co-drive-card--${this.variant}`]: true,
                 [`co-drive-card--${this.density}`]: true,

package/dist/collection/components/co-drop-zone/co-drop-zone.js

@@ -58,7 +58,7 @@ export class CoDropZone {
         this.coDragStateChange.emit(next);
     }
     render() {
-        return (h(Host, { key: '95256dff45bfd8c003a8c4e81aa221873b850df3', class: { 'co-drop-zone': true, 'co-drop-zone--active': this.active }, part: "host", style: { '--co-drop-zone-accent': this.accent }, onDragEnter: this.handleDragEnter, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("slot", { key: '4a5841592fdb7cba17a51eb49bf617f1c5c88a03' }), this.active && (h("div", { key: '80d179ef44a5c5fd6294c1252fd17c35ac1e6f28', class: "co-drop-zone__overlay", part: "overlay" }, h("div", { key: '32fcd18641cd0d766273ce2390d83460347cb358', class: "co-drop-zone__badge", part: "badge" }, h("co-icon", { key: 'c193069fd16d3935c037f6ce69606bc9342d9ad8', name: this.icon, size: 34 })), h("span", { key: 'c6827e6f837f3707778c3b6b330b29907840e46c', class: "co-drop-zone__label", part: "label" }, this.label)))));
+        return (h(Host, { key: '8c054ca976730d2a6d31026a7da431e38fb61d9d', class: { 'co-drop-zone': true, 'co-drop-zone--active': this.active }, part: "host", style: { '--co-drop-zone-accent': this.accent }, onDragEnter: this.handleDragEnter, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("slot", { key: '478ff353fc8c88d719a054bdd302ffeeec06a238' }), this.active && (h("div", { key: '64310825f2556838d525541f6dba33af521f1c2f', class: "co-drop-zone__overlay", part: "overlay" }, h("div", { key: '5567646e887cfd23a4c5e987cc0f9b7cbcda247e', class: "co-drop-zone__badge", part: "badge" }, h("co-icon", { key: '8b50b8e1615d13efaad52ef03ede3afdc4dd7869', name: this.icon, size: 34 })), h("span", { key: '10209ab792204eff4ddc86c08aac950cfae50ec1', class: "co-drop-zone__label", part: "label" }, this.label)))));
     }
     static get is() { return "co-drop-zone"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-emoji-picker/co-emoji-picker.js

@@ -383,14 +383,14 @@ export class CoEmojiPicker {
         const stripCategories = hasRecent
             ? [RECENT_CATEGORY, ...EMOJI_CATEGORIES]
             : [...EMOJI_CATEGORIES];
-        return (h("div", { key: '7f3da124283afb57ac05c388746d07a7f63a0eca', class: "co-emoji-picker", part: "panel", role: "group", "aria-label": this.label || s.pickerLabel, style: { '--co-emoji-picker-columns': String(Math.max(1, this.columns)) }, onKeyDown: this.handleKeyDown }, this.searchable && (h("div", { key: 'eb4efeeed738dc094f155bc7bdc907e3075c2dad', class: "co-emoji-picker__search", part: "search" }, h("co-icon", { key: '042c32db076e3628e9459304f12304c7c3d85ae9', name: "magnifying-glass", size: 16 }), h("input", { key: '21c74e3a55e9b332061e73812cff512807afaabc', class: "co-emoji-picker__input", part: "input", type: "text", value: this.term, placeholder: this.searchPlaceholder || s.searchPlaceholder, onInput: this.handleInput, ref: (el) => (this.inputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list", "aria-controls": CoEmojiPicker.GRID_ID, "aria-activedescendant": activeCellId }), this.renderTones())), this.showCategories && (h("div", { key: '7b08cac53699f975e7f331e91700f6182d208cab', class: "co-emoji-picker__categories", part: "categories", "aria-label": s.categoriesLabel }, !this.searchable && this.renderTones(), stripCategories.map((category) => {
+        return (h("div", { key: '7c7dfc4be7b8f8ea44df0f6c988cd2462b5fbdab', class: "co-emoji-picker", part: "panel", role: "group", "aria-label": this.label || s.pickerLabel, style: { '--co-emoji-picker-columns': String(Math.max(1, this.columns)) }, onKeyDown: this.handleKeyDown }, this.searchable && (h("div", { key: 'd25a0e16ced7efd0bc92b2dd104e60ea926ae042', class: "co-emoji-picker__search", part: "search" }, h("co-icon", { key: '72d9381c9e5375e2a1f7c8a01ca4d5e9d9c69b5c', name: "magnifying-glass", size: 16 }), h("input", { key: '5dc6d956f35f8497e35915faf1eb6bec424e0978', class: "co-emoji-picker__input", part: "input", type: "text", value: this.term, placeholder: this.searchPlaceholder || s.searchPlaceholder, onInput: this.handleInput, ref: (el) => (this.inputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list", "aria-controls": CoEmojiPicker.GRID_ID, "aria-activedescendant": activeCellId }), this.renderTones())), this.showCategories && (h("div", { key: 'f590a30901ad79dffe872381ac7d19f3bb8e4185', class: "co-emoji-picker__categories", part: "categories", "aria-label": s.categoriesLabel }, !this.searchable && this.renderTones(), stripCategories.map((category) => {
             var _a, _b;
             const name = (_a = s.categories[category]) !== null && _a !== void 0 ? _a : category;
             return (h("button", { type: "button", key: category, class: {
                     'co-emoji-picker__category': true,
                     'co-emoji-picker__category--active': category === activeCategory,
                 }, "aria-label": name, "aria-current": category === activeCategory ? 'true' : undefined, title: name, onClick: () => this.jumpToCategory(category) }, h("co-icon", { name: (_b = EMOJI_CATEGORY_ICONS[category]) !== null && _b !== void 0 ? _b : 'circle', size: 16 })));
-        }))), h("div", { key: '349078ee46f1833797620c5c97da23807b7db384', class: "co-emoji-picker__scroll", part: "grid", id: CoEmojiPicker.GRID_ID, role: "listbox", "aria-label": s.gridLabel, ref: (el) => (this.scrollEl = el), onScroll: this.handleScroll }, isEmpty ? (h("div", { class: "co-emoji-picker__empty" }, h("co-icon", { name: "magnifying-glass", size: 20 }), h("span", null, this.emptyMessage || s.emptyMessage))) : (this.renderRows(rows)))));
+        }))), h("div", { key: 'e2d0322703aef9efdf8b0aeec6b5021fbfaa15f8', class: "co-emoji-picker__scroll", part: "grid", id: CoEmojiPicker.GRID_ID, role: "listbox", "aria-label": s.gridLabel, ref: (el) => (this.scrollEl = el), onScroll: this.handleScroll }, isEmpty ? (h("div", { class: "co-emoji-picker__empty" }, h("co-icon", { name: "magnifying-glass", size: 20 }), h("span", null, this.emptyMessage || s.emptyMessage))) : (this.renderRows(rows)))));
     }
     static get is() { return "co-emoji-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-empty-state/co-empty-state.css

@@ -85,3 +85,31 @@
   font-weight: 500;
   line-height: 1.25;
 }
+
+/* ─── REVEAL ESCALONADO (receta tdev texts-reveal) ───────────────
+   Corre al montar: el empty-state entra cuando una carga resolvió vacía.
+   Delays con el longhand animation-delay (el guard lo permite siempre);
+   reduced-motion: zeroing global + fill both = estado final en un frame. */
+.co-empty-state__icon,
+.co-empty-state__heading,
+.co-empty-state__description,
+.co-empty-state__actions {
+  animation: co-empty-reveal var(--co-motion-duration-slower) var(--co-motion-ease-out) both;
+}
+
+.co-empty-state__heading { animation-delay: var(--co-motion-duration-instant); }
+.co-empty-state__description { animation-delay: calc(var(--co-motion-duration-instant) * 2); }
+.co-empty-state__actions { animation-delay: calc(var(--co-motion-duration-instant) * 3); }
+
+@keyframes co-empty-reveal {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+    filter: blur(var(--co-motion-blur-md));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+    filter: none;
+  }
+}

package/dist/collection/components/co-empty-state/co-empty-state.js

@@ -13,11 +13,11 @@ export class CoEmptyState {
     render() {
         var _a;
         const iconWeight = (_a = this.iconWeight) !== null && _a !== void 0 ? _a : (this.variant === 'card' ? 'regular' : 'light');
-        return (h("div", { key: 'e113826d18559a68ffae18ccf6529eea99d1e3e1', class: {
+        return (h("div", { key: '4011b99b59671ad38cf5c90b5adc1b42a0353817', class: {
                 'co-empty-state': true,
                 [`co-empty-state--${this.variant}`]: true,
                 [`co-empty-state--${this.size}`]: true,
-            }, part: "empty-state" }, this.icon && (h("div", { key: 'ada3644ee8b42e431b7d433f2240a3500caa2876', class: "co-empty-state__icon" }, h("co-icon", { key: 'ecfbb6c8ffefa7e919859a960bc56390f0c1403d', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (h("div", { key: '3473ab221979388c12fb4f5c9dd4a0816f0a9eea', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: '55065da69e04e5ac3d6859b28ecdb452320b9263', class: "co-empty-state__description" }, this.description)), h("div", { key: '2842e7935653e51f42fb389827abf7db433a00a4', class: "co-empty-state__actions" }, h("slot", { key: 'ed90d3aaced375020cfb4af1c1d44077fbba0f17' }))));
+            }, part: "empty-state" }, this.icon && (h("div", { key: 'a6899c6690bb8b9fcdd858fb63a30644b7094672', class: "co-empty-state__icon" }, h("co-icon", { key: '312945448815ae5be78074e03840909b04e5f3c4', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (h("div", { key: '7fd7fdb5fc4922bf2c7d6aab5200bc80947c20ba', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: 'da5cddc1aa7afc32ee30f59293f66f1e30507614', class: "co-empty-state__description" }, this.description)), h("div", { key: '940a1b9ffa4022a3ee2623b7a6892000c63abfd4', class: "co-empty-state__actions" }, h("slot", { key: 'b6b9fbd93e79890193500d5c3bbbe72d32fa1e20' }))));
     }
     static get is() { return "co-empty-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-event-calendar/co-event-calendar.js

@@ -223,10 +223,10 @@ export class CoEventCalendar {
         const t = getDateStrings(this.locale);
         const views = this.viewsList;
         const a = parseISO(this.anchor);
-        return (h("div", { key: 'd0a147fee3fa5ad01d40dacbbc2a0b1adf8f3808', class: "cal" }, h("div", { key: '35feaa81dc6f139fcced1ee691864b1587b19931', class: "cal__toolbar", part: "toolbar" }, h("button", { key: 'd05cf866772e81bacd7c904ff31d7f5032431672', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), h("div", { key: 'b3c1389ec39de8121d807c8eec944751245b2324', class: "cal__title-group" }, h("button", { key: '17224b09c008cf0d5bae8e585f3ffc7981bf63bb', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, h("co-icon", { key: '2bf18c14b972a6a2b0136e67279b743b69074060', name: "caret-left", size: 16 })), h("h2", { key: '7ad21c7a35e45355870f699ecbbe79099de7e7e6', class: "cal__title", "aria-live": "polite" }, this.title()), h("button", { key: '4bb0d0287b41b4f100d09c9627afeb91bc5b57d7', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, h("co-icon", { key: '9bf5ab51b1d31e4d5c8274be1ca5b71ef96335a1', name: "caret-right", size: 16 }))), views.length > 1 ? (h("div", { class: "cal__views", role: "tablist" }, views.map((v) => {
+        return (h("div", { key: 'eb07a859a28ba0d09a3880a77a5b122c1ae063fb', class: "cal" }, h("div", { key: '693683cddfad9a1aed4be0bf3651cfff8b2ba1c7', class: "cal__toolbar", part: "toolbar" }, h("button", { key: '48f8fc44179b2950ea0498205f8f8a5d91d33e04', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), h("div", { key: '387a1cee67da85bf72e791ca2adc67f7482eb629', class: "cal__title-group" }, h("button", { key: '24d316422fb98f7d7c66ed6154a90f54a56cab12', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, h("co-icon", { key: 'd0c575fce693943e91de8c578bb3371bfdb6425a', name: "caret-left", size: 16 })), h("h2", { key: '1bc26dd2c49d67854a1fc922cffc519485437f6a', class: "cal__title", "aria-live": "polite" }, this.title()), h("button", { key: '0e152157ed337011d00699b450b6a5cd10016b97', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, h("co-icon", { key: 'c821a72abc278e325cadfeae54b4d2b05984d3ba', name: "caret-right", size: 16 }))), views.length > 1 ? (h("div", { class: "cal__views", role: "tablist" }, views.map((v) => {
             var _a;
             return (h("button", { type: "button", role: "tab", "aria-selected": this.view === v ? 'true' : 'false', class: { 'cal__view-btn': true, 'cal__view-btn--active': this.view === v }, onClick: () => this.switchView(v) }, (_a = t[v]) !== null && _a !== void 0 ? _a : v));
-        }))) : (h("span", { class: "cal__views-spacer" }))), h("div", { key: '468dd7e859c0f9cbbe7d9e48e0c4cd55fdea2ddf', class: "cal__body", part: "body" }, this.view === 'month' ? (h("co-calendar-month", { loading: this.loading, events: this.normalized, year: a.year, month: a.month, locale: this.locale, firstDayOfWeek: this.firstDayOfWeek, timeZone: this.tz, minDate: this.minDate, maxDate: this.maxDate, editable: this.editable, selectable: this.selectable, maxLanes: this.dayMaxEvents, onCoDaySelect: this.handleDaySelect, onCoEventClick: this.handleEventClick, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, onCoMoreClick: this.handleMoreClick })) : this.view === 'week' || this.view === 'day' ? (h("co-calendar-timegrid", { loading: this.loading, events: this.normalized, dates: this.visibleDates, locale: this.locale, timeZone: this.tz, editable: this.editable, selectable: this.selectable, minDate: this.minDate, maxDate: this.maxDate, onCoRangeSelect: this.handleRangeSelect, onCoEventClick: this.handleEventClick, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, defaultDurationMinutes: this.defaultDurationMinutes, allDaySlot: this.allDaySlot, minTime: this.minTime, maxTime: this.maxTime, slotMinutes: this.slotMinutes, snapMinutes: this.snapMinutes, scrollTime: this.scrollTime, nowIndicator: this.nowIndicator })) : (h("div", { class: "cal__placeholder" }, h("co-icon", { name: "calendar-dots", size: 32 }), h("p", null, `${this.view} view — coming soon`))))));
+        }))) : (h("span", { class: "cal__views-spacer" }))), h("div", { key: '2472ed0d314a489f41f2f46dc7988ce8860a64c2', class: "cal__body", part: "body" }, this.view === 'month' ? (h("co-calendar-month", { loading: this.loading, events: this.normalized, year: a.year, month: a.month, locale: this.locale, firstDayOfWeek: this.firstDayOfWeek, timeZone: this.tz, minDate: this.minDate, maxDate: this.maxDate, editable: this.editable, selectable: this.selectable, maxLanes: this.dayMaxEvents, onCoDaySelect: this.handleDaySelect, onCoEventClick: this.handleEventClick, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, onCoMoreClick: this.handleMoreClick })) : this.view === 'week' || this.view === 'day' ? (h("co-calendar-timegrid", { loading: this.loading, events: this.normalized, dates: this.visibleDates, locale: this.locale, timeZone: this.tz, editable: this.editable, selectable: this.selectable, minDate: this.minDate, maxDate: this.maxDate, onCoRangeSelect: this.handleRangeSelect, onCoEventClick: this.handleEventClick, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, defaultDurationMinutes: this.defaultDurationMinutes, allDaySlot: this.allDaySlot, minTime: this.minTime, maxTime: this.maxTime, slotMinutes: this.slotMinutes, snapMinutes: this.snapMinutes, scrollTime: this.scrollTime, nowIndicator: this.nowIndicator })) : (h("div", { class: "cal__placeholder" }, h("co-icon", { name: "calendar-dots", size: 32 }), h("p", null, `${this.view} view — coming soon`))))));
     }
     static get is() { return "co-event-calendar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-event-popover/co-event-popover.js

@@ -118,7 +118,7 @@ export class CoEventPopover {
         this.coClose.emit();
     }
     render() {
-        return (h(Host, { key: '4a80f76492bda89a6082b4794f0c924ec929dc85' }, h("div", { key: 'e8ede438958439ae0e9f2689da9fcc88419b9837', class: "pop", popover: "manual", role: "dialog", "aria-modal": "false", "aria-label": this.popoverLabel, tabIndex: -1, ref: (el) => (this.panelEl = el) }, h("div", { key: 'f09ced9c1d8e312df3218929b267e976c64207e8', class: "pop__actions", part: "actions" }, h("slot", { key: '6cfe39bfca0783530950a4e9c482b17f2104157d', name: "actions" })), h("div", { key: '1f3938226f5767fd39d1e80c28f01f2daf023540', class: "pop__head" }, this.dot && h("span", { key: '729486152ea2ab84a72270deeef917ae89ddcdba', class: "pop__dot", style: this.color ? { background: this.color } : {} }), h("div", { key: '2b9f20c48495de4327ae9e27cf1fd305a860dc39', class: "pop__body", part: "body" }, h("slot", { key: '675ce278c7de391af91e8c9235a35aa85964726d' }))))));
+        return (h(Host, { key: '8febb91e9c26e67bdd8edde9bd95e24b9a6f4b04' }, h("div", { key: '1311c574b0bae76fb85952da3b5e8531d77e1b25', class: "pop", popover: "manual", role: "dialog", "aria-modal": "false", "aria-label": this.popoverLabel, tabIndex: -1, ref: (el) => (this.panelEl = el) }, h("div", { key: '9d275e1b245f0bd4f95ba13743d6a9080b3d581a', class: "pop__actions", part: "actions" }, h("slot", { key: '322fefefddfe8ba575185fa093a980197f267311', name: "actions" })), h("div", { key: '22243bc4a6d4723843c490b9fa41796f31f401f8', class: "pop__head" }, this.dot && h("span", { key: '09d3e746f133432f0946e023e93aa92bcf5f9952', class: "pop__dot", style: this.color ? { background: this.color } : {} }), h("div", { key: '27d6f3ca1896ea02e08515db3fc8a7a58a51daeb', class: "pop__body", part: "body" }, h("slot", { key: 'd098bfca183fe303f6cb85f496f7ed1914b5e26b' }))))));
     }
     static get is() { return "co-event-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -28,7 +28,7 @@ export class CoFab {
         const iconSize = this.size === 'xl' ? 24 : this.size === 'l' ? 24 : this.size === 's' ? 18 : 20;
         const hasLabel = !!this.label;
         const hoverExpand = hasLabel && this.expandOnHover;
-        return (h("button", { key: '33b456dcff41cacf4783c6aacdd8d99e6b699eff', class: {
+        return (h("button", { key: 'f0d1612601922430df403628c5349b322ee8e88d', class: {
                 'co-fab': true,
                 [`co-fab--${this.variant}`]: true,
                 [`co-fab--${this.size}`]: true,
@@ -36,7 +36,7 @@ export class CoFab {
                 'co-fab--hover-expand': hoverExpand,
                 'co-fab--disabled': this.disabled,
                 [`co-fab--${this.position}`]: this.position !== 'none',
-            }, type: "button", disabled: this.disabled, onClick: this.handleClick, onPointerEnter: this.handleExpandMeasure, onFocusin: this.handleExpandMeasure, "aria-label": this.ariaLabelText || this.label || this.icon }, h("co-icon", { key: '4d7ab37bc111369fc17277ece2e397b4207ec3f4', name: this.icon, size: iconSize }), this.label && (h("span", { key: '7de41d3f16a27dc3ce66c6b1d2731f5774046630', class: "co-fab__label", ref: (el) => (this.labelEl = el) }, this.label))));
+            }, type: "button", disabled: this.disabled, onClick: this.handleClick, onPointerEnter: this.handleExpandMeasure, onFocusin: this.handleExpandMeasure, "aria-label": this.ariaLabelText || this.label || this.icon }, h("co-icon", { key: 'fc53d94af9263b20cfce36656608962158d480ab', name: this.icon, size: iconSize }), this.label && (h("span", { key: '5a16cdace79b8fb7b6ead260d14ee4ae018ed02b', class: "co-fab__label", ref: (el) => (this.labelEl = el) }, this.label))));
     }
     static get is() { return "co-fab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-file-field/co-file-field.css

@@ -58,9 +58,8 @@
   justify-content: center;
   gap: var(--co-spacing-md);
   padding: var(--co-spacing-4xl) var(--co-spacing-2xl);
+  /* Sin backdrop-filter (D2): el dropzone va sobre la superficie del form → blur inerte. */
   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;
@@ -179,6 +178,60 @@
   transform: scale(1.02);
 }
 
+/* ---- Video card ----
+   Same card as an image, with the poster (or the type tile, when the server
+   produced no frame) under a play badge. Without the badge a poster reads as
+   a still photo and the file looks unplayable. */
+.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);
+  /* The whole card is the button; the badge must never eat the click. */
+  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);
+  /* 80% y no 50%: el badge se apoya sobre CUALQUIER frame, y sobre un póster
+     saturado un negro a medias se ensucia con el color de abajo. El aro
+     interior lo mantiene legible también sobre la tarjeta negra sin póster. */
+  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 {
+  /* Optical centering: a play triangle's mass sits left of its bounding box. */
+  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);
+}
+
 /* ---- File rows ---- */
 .co-file-field__list {
   list-style: none;

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { RequiredMark } from "../../utils/requiredMark";
 import { fillTemplate, getFileStrings } from "../../utils/fileI18n";
-import { formatBytes, isImage, previewSrc, truncateLeft } from "./co-file-field.utils";
+import { fileExtension, formatBytes, isPreviewable, isVideo, previewSrc, truncateLeft, } from "./co-file-field.utils";
 /**
  * Host-driven file selector — renders a drop-zone + previews + a file list with
  * upload progress, but performs NO upload itself. When the user picks/drops
@@ -101,6 +101,14 @@ export class CoFileField {
             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);
     }
@@ -241,6 +249,17 @@ export class CoFileField {
         }
     }
     // ── 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
@@ -252,12 +271,10 @@ export class CoFileField {
         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');
@@ -338,15 +355,15 @@ export class CoFileField {
         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) => {
@@ -354,7 +371,18 @@ export class CoFileField {
                     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: {
@@ -378,10 +406,10 @@ export class CoFileField {
                     '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)))));
     }
     static get is() { return "co-file-field"; }
     static get encapsulation() { return "shadow"; }

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

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

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

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

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

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

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

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

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

@@ -24,8 +24,15 @@
     transform var(--co-motion-duration-fast) var(--co-motion-ease-out);
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
-  -webkit-backdrop-filter: var(--co-icon-button-backdrop-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));
-  backdrop-filter: var(--co-icon-button-backdrop-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate)));
+  /* --co-icon-button-backdrop-filter: alias publicado (API), cero consumidores;
+     adentro la cadena canónica --co-glass-filter (none = opt-out).
+     ⚠️ El alias va POR FUERA de --co-glass-filter (orden prescrito por el spec):
+     un host que lo setee ESCAPA al opt-out global — ni --co-glass-filter: none
+     en un ancestro ni prefers-reduced-transparency apagan ese valor. No
+     introducir consumidores; para tunear usar --co-glass-blur/-saturate y para
+     apagar, --co-glass-filter: none en el subárbol. */
+  -webkit-backdrop-filter: var(--co-icon-button-backdrop-filter, var(--co-glass-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate))));
+          backdrop-filter: var(--co-icon-button-backdrop-filter, var(--co-glass-filter, blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate))));
 }
 
 /* ─── VARIANTS ─────────────────────────────────────────────── */
@@ -169,3 +176,34 @@
   .co-icon-button--filled { background: var(--co-semantic-surface-primary); }
   .co-icon-button--outlined { background: var(--co-icon-button-bg, var(--co-semantic-surface-secondary)); }
 }
+
+/* ─── ICON SWAP (receta tdev): ambos iconos apilados en una celda grid ── */
+.co-icon-button__swap {
+  display: inline-grid;
+}
+
+.co-icon-button__swap > co-icon {
+  grid-area: 1 / 1;
+  transition:
+    opacity var(--co-motion-duration-base) var(--co-motion-ease-in-out),
+    transform var(--co-motion-duration-base) var(--co-motion-ease-in-out),
+    filter var(--co-motion-duration-base) var(--co-motion-ease-in-out);
+}
+
+.co-icon-button__swap > co-icon:last-child {
+  opacity: 0;
+  transform: scale(0.25);
+  filter: blur(var(--co-motion-blur-sm));
+}
+
+.co-icon-button__swap--toggled > co-icon:first-child {
+  opacity: 0;
+  transform: scale(0.25);
+  filter: blur(var(--co-motion-blur-sm));
+}
+
+.co-icon-button__swap--toggled > co-icon:last-child {
+  opacity: 1;
+  transform: scale(1);
+  filter: blur(0);
+}