@prolibu-suite/cobalt-core 0.7.0 → 0.9.0

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

@@ -0,0 +1,326 @@
+import { h, Host } from "@stencil/core";
+import { computePosition } from "../../utils/positioning";
+/**
+ * co-event-popover — anchored detail card (Google-Calendar-style) for a calendar
+ * event. Non-modal, dismissible. Anchors to a viewport `anchorRect` (the chip's
+ * getBoundingClientRect), promotes to the top-layer (the calendar shell has
+ * contain:layout ancestors that re-anchor position:fixed), and closes on Escape /
+ * outside-click. Content is slotted by the host (suite-v2 fills the meeting fields).
+ */
+export class CoEventPopover {
+    constructor() {
+        this.open = false;
+        this.placement = 'right-start';
+        /** Render the leading color dot. Set false for dot-less content (quick-create). */
+        this.dot = true;
+        this.closeOnEscape = true;
+        this.closeOnClickOutside = true;
+        this.position = () => {
+            if (!this.open || !this.panelEl || !this.anchorRect)
+                return;
+            const a = this.anchorRect;
+            const triggerRect = {
+                top: a.top, left: a.left, right: a.left + a.width, bottom: a.top + a.height,
+                width: a.width, height: a.height,
+            };
+            const panelRect = this.panelEl.getBoundingClientRect();
+            const { top, left } = computePosition(triggerRect, panelRect, {
+                placement: this.placement, offset: 8, flip: true,
+            });
+            this.panelEl.style.top = `${top}px`;
+            this.panelEl.style.left = `${left}px`;
+        };
+        // The anchor rect is a point-in-time snapshot: once the page scrolls or resizes
+        // it's stale, and a top-layer panel would stay pinned to a chip that has moved
+        // (or disappeared). Google Calendar closes the popover in that case — match it.
+        this.onScroll = () => {
+            if (this.open)
+                this.requestClose();
+        };
+        this.onKeydown = (e) => {
+            if (!this.open)
+                return;
+            if (this.closeOnEscape && e.key === 'Escape') {
+                e.stopPropagation();
+                this.requestClose();
+            }
+        };
+        this.onPointerDown = (e) => {
+            if (!this.open || !this.closeOnClickOutside || !this.panelEl)
+                return;
+            const path = e.composedPath();
+            if (path.includes(this.panelEl) || path.includes(this.el))
+                return;
+            this.requestClose();
+        };
+    }
+    componentDidLoad() {
+        // Stencil no dispara @Watch para el valor inicial (gotcha conocido del DS).
+        if (this.open)
+            this.onOpenChange(true);
+    }
+    onOpenChange(v) {
+        var _a;
+        if (v) {
+            this.prevFocus = (_a = document.activeElement) !== null && _a !== void 0 ? _a : undefined;
+            requestAnimationFrame(() => this.promoteAndPosition());
+        }
+        else {
+            this.dismissPanel();
+            if (this.prevFocus)
+                this.prevFocus.focus();
+        }
+    }
+    onAnchorChange() {
+        if (this.open)
+            this.position();
+    }
+    disconnectedCallback() {
+        this.teardownListeners();
+    }
+    promoteAndPosition() {
+        var _a, _b;
+        if (!this.open || !this.panelEl)
+            return;
+        // Promote to the top-layer so contain:layout ancestors don't re-anchor us.
+        try {
+            (_b = (_a = this.panelEl).showPopover) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        catch ( /* already shown */_c) { /* already shown */ }
+        this.position();
+        // Dialog-pattern focus: focus the panel itself (tabIndex=-1). Slotted actions
+        // live in light DOM and co-icon-button is shadow — querySelector here can't
+        // reach them; Tab from the panel lands on the first slotted action naturally.
+        this.panelEl.focus();
+        window.addEventListener('resize', this.onScroll);
+        window.addEventListener('scroll', this.onScroll, true);
+        window.addEventListener('keydown', this.onKeydown, true);
+        window.addEventListener('pointerdown', this.onPointerDown, true);
+    }
+    dismissPanel() {
+        var _a, _b;
+        try {
+            (_b = (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.hidePopover) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        catch ( /* noop */_c) { /* noop */ }
+        this.teardownListeners();
+    }
+    teardownListeners() {
+        window.removeEventListener('resize', this.onScroll);
+        window.removeEventListener('scroll', this.onScroll, true);
+        window.removeEventListener('keydown', this.onKeydown, true);
+        window.removeEventListener('pointerdown', this.onPointerDown, true);
+    }
+    requestClose() {
+        this.coClose.emit();
+    }
+    render() {
+        return (h(Host, { key: '0d80c0a501c72d7428c85ba44075a4c9cab05f6f' }, h("div", { key: 'a772efeb2c49d71f42b53f63ba56858019fcfdcd', class: "pop", popover: "manual", role: "dialog", "aria-modal": "false", "aria-label": this.popoverLabel, tabIndex: -1, ref: (el) => (this.panelEl = el) }, h("div", { key: '8eff11fdc9ae6ebd0de3967dc3a6522cd159bfa0', class: "pop__actions", part: "actions" }, h("slot", { key: 'b9c5c598356d8acc6b0cf135e3c5347de937a33b', name: "actions" })), h("div", { key: '0e1f10c5727d66170d9c1a5b8137ba48c61a867b', class: "pop__head" }, this.dot && h("span", { key: '78ab616e697fb9e4cdc354e791a4e2184ea20123', class: "pop__dot", style: this.color ? { background: this.color } : {} }), h("div", { key: '1abdeb6c16aa3daf5adfb652f4f2ede5e0abb891', class: "pop__body", part: "body" }, h("slot", { key: 'f28a87f62acaa8c617cf24f264462b525065ecbc' }))))));
+    }
+    static get is() { return "co-event-popover"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-event-popover.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-event-popover.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "anchorRect": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ top: number; left: number; width: number; height: number }",
+                    "resolved": "undefined | { top: number; left: number; width: number; height: number; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Anchor rect in viewport coords (chip.getBoundingClientRect())."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "../../utils/positioning",
+                            "id": "src/utils/positioning.ts::Placement",
+                            "referenceLocation": "Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'right-start'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accent color for the leading dot (event color)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color"
+            },
+            "dot": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Render the leading color dot. Set false for dot-less content (quick-create)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dot",
+                "defaultValue": "true"
+            },
+            "closeOnEscape": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-escape",
+                "defaultValue": "true"
+            },
+            "closeOnClickOutside": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-click-outside",
+                "defaultValue": "true"
+            },
+            "popoverLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the panel (role=\"dialog\" needs one)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "popover-label"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coClose",
+                "name": "coClose",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }, {
+                "propName": "anchorRect",
+                "methodName": "onAnchorChange"
+            }];
+    }
+}

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

@@ -18,7 +18,7 @@
   font-weight: 500;
   white-space: nowrap;
   box-sizing: border-box;
-  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out);
   box-shadow: 0 4px 12px rgba(31, 28, 27, 0.15);
 }
 
@@ -49,8 +49,8 @@
   justify-content: flex-start;
   overflow: hidden;
   /* Colapso rápido y SIN rebote — el spring vive solo en el estado expandido. */
-  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s ease,
-    box-shadow 0.15s ease, transform 0.1s ease;
+  transition: width var(--co-motion-duration-slow) var(--co-motion-ease-in-out), background var(--co-motion-duration-fast) var(--co-motion-ease-out),
+    box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-fab--hover-expand.co-fab--xl { padding: 0 20px; }
@@ -61,13 +61,13 @@
 .co-fab--hover-expand:hover:not(:disabled),
 .co-fab--hover-expand:focus-visible {
   width: calc(var(--co-fab-size) + var(--co-spacing-sm2) + var(--co-fab-label-w, 0px));
-  transition: width 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease,
-    box-shadow 0.15s ease, transform 0.1s ease;
+  transition: width var(--co-motion-duration-slower) var(--co-motion-ease-spring), background var(--co-motion-duration-fast) var(--co-motion-ease-out),
+    box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-fab--hover-expand co-icon {
   flex-shrink: 0;
-  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition: transform var(--co-motion-duration-slower) var(--co-motion-ease-spring);
 }
 
 .co-fab--hover-expand:hover:not(:disabled) co-icon,
@@ -83,21 +83,27 @@
   flex-shrink: 0;
   opacity: 0;
   transform: translateX(-6px);
-  transition: opacity 0.12s ease, transform 0.12s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-fab--hover-expand:hover:not(:disabled) .co-fab__label,
 .co-fab--hover-expand:focus-visible .co-fab__label {
   opacity: 1;
   transform: translateX(0);
-  transition: opacity 0.2s ease 0.1s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
+  transition: opacity var(--co-motion-duration-base) var(--co-motion-ease-out) 0.1s, transform var(--co-motion-duration-slow) var(--co-motion-ease-spring) 0.1s;
 }
 
+/* El resto de las transitions de hover-expand ya cuelgan de
+   var(--co-motion-duration-*) — el zeroing global (cobalt.css) las deja en
+   0.01ms bajo reduced-motion, así que no hace falta un guard propio para
+   ellas. La ÚNICA sobreviviente es el delay 0.1s del label expandido (arriba):
+   es literal (no existe --co-motion-delay-*) y el zeroing de duración no lo
+   toca, así que sin este guard un usuario reduced-motion sufre una espera
+   muerta de 100ms antes del cambio (ya casi instantáneo). */
 @media (prefers-reduced-motion: reduce) {
-  .co-fab--hover-expand,
-  .co-fab--hover-expand co-icon,
-  .co-fab--hover-expand .co-fab__label {
-    transition: none;
+  .co-fab--hover-expand:hover:not(:disabled) .co-fab__label,
+  .co-fab--hover-expand:focus-visible .co-fab__label {
+    transition-delay: 0s;
   }
 }
 

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: 'e321a7455329a1401504cf93f1761a37d7d45eff', class: {
+        return (h("button", { key: '67d54b40024fa3851d0ea79960949861ecaeaf4c', 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: '66a36ba9144cf10b7ad8b4bef6a821ef92257892', name: this.icon, size: iconSize }), this.label && (h("span", { key: 'c01018d61ca455a0d1952082b94ec0e5efd807b8', 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: 'e5e75805115a8b31530a56d8210dcdae66e28ab5', name: this.icon, size: iconSize }), this.label && (h("span", { key: '2e659c02f0056f848f5c0566069dd39f4cd48d2c', 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

@@ -65,7 +65,7 @@
   border-radius: var(--co-border-radius-sm);
   cursor: pointer;
   text-align: center;
-  transition: border-color 0.15s ease, background 0.15s ease;
+  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 {
@@ -94,7 +94,7 @@
   letter-spacing: var(--co-font-letter-spacing-body);
   line-height: 1;
   cursor: pointer;
-  transition: box-shadow 0.15s ease, transform 0.15s ease;
+  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 {
@@ -169,7 +169,7 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: transform 0.2s ease;
+  transition: transform var(--co-motion-duration-base) var(--co-motion-ease-out);
 }
 
 .co-file-field__preview:hover img {
@@ -287,7 +287,7 @@
   width: 40%;
   border-radius: var(--co-border-radius-full);
   background: var(--co-semantic-status-info);
-  transition: width 0.2s ease;
+  transition: width var(--co-motion-duration-base) var(--co-motion-ease-out);
 }
 
 /* When the host doesn't report progress, animate an indeterminate sweep. */
@@ -315,7 +315,7 @@
   background: transparent;
   cursor: pointer;
   color: var(--co-semantic-text-secondary);
-  transition: color 0.15s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-file-field__action:hover {

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

@@ -341,12 +341,12 @@ export class CoFileField {
         const previews = items.filter((it) => isImage(it) && !this.failedPreviews.has(this.keyFor(it)));
         const canReorder = this.reorderable && this.multiple && !this.disabled && !this.readonly && items.length > 1;
         const capacity = this.capacityHint(s);
-        return (h("div", { key: '6f0c0d55291904a925ddf87b444279443b123414', class: {
+        return (h("div", { key: '11e79bc9c1b3b56c10c0558b0d504821db7e8cd6', 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: 'e3d624d4b904358132fcbdcf68c283a6fb1bcabb', class: "co-file-field__labels" }, h("label", { key: 'd96a9d10db3c9eaae4bf5e4d1bc3986f3f111c3c', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '6810c17061391ead3343daf9cd06d71d3b03706c', required: this.required })))), showDropzone && (h("div", { key: 'b910dfaa918f1c6d04d4d817a67100b74b6f156f', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: '9e3f1d834e5a1b70411747568d7a1055b3e0d8f1', class: "co-file-field__labels" }, h("label", { key: '1c138fbe71432df15c970b00f910e0ddcc69a333', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '34b7d0fe683a911fc10352f0d7c79cb01c559999', required: this.required })))), showDropzone && (h("div", { key: '9d046b734982edfd7d9743e9dab5b95593e15383', 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 +354,7 @@ export class CoFileField {
                     e.preventDefault();
                     this.handleBrowse();
                 }
-            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: 'a2a02be018cc925718943411aa28da509a2a2a96', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: 'bb1879d1397ae93c5da975cbdbe6b7c1c907c490', name: "file-arrow-up", size: 18 }), h("span", { key: 'e4ad56d293a8bfcc082b7b6579dfefd9a02846bc' }, this.uploadButtonText || s.uploadButton)), h("span", { key: 'e9c32bdcd65a3138b08b38e52aa909c82b8d2047', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: '417fa71efaf202fc7a1483e02bca170d35d4bf9f', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: '3697aa6c3ccc065ea9bf999f931bd8efb46ea26f', class: "co-file-field__actions", part: "actions" }, h("slot", { key: 'b6cfb211a32883ca0a37a775a8442f1d7a60b1d2', name: "actions" })), h("input", { key: '2c8a8a4c7a5ec3b633d78f3d2194d5457a3c1be3', 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: '793833955268b59bb86366b578558b0a25af3faf', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: 'd4141eed0257861c6640d0c91e4599278591619b', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: '22e632b0c0050bab853d481366ae970db13935cf', 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: 'f4ae0f81158f1d69ca0dbde29a2358c13f7dce20', class: "co-file-field__list", part: "list" }, items.map((item) => {
+            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: '9af47292af70f8da16062a0bbac21ea520a52a39', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: '68f3467892671d62648ccf2d1302cd579cd6601c', name: "file-arrow-up", size: 18 }), h("span", { key: 'a167aa0aef4f1e209660f251dd945ac41576b39f' }, this.uploadButtonText || s.uploadButton)), h("span", { key: 'b1bcfb1eabab417cd46920ccc43f624e52d1470c', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: '44a29cb6fcd9ea9a65de12794d1313c0ef9da7b9', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: '4d4f68f6684b976ec1610ebd45bc59ece67a13a9', class: "co-file-field__actions", part: "actions" }, h("slot", { key: '000fe510d61916cb016a9a2d9968426c0edabe62', name: "actions" })), h("input", { key: '16169cf42cc8072d63c36bb3a25f9c5d540e48c3', 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: '23dae3bd944ad6cbd7e0d10898832aa1367956a5', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: 'ca0c17ecc64a68594758c626d41bd14ad6a19633', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: '343ca190a8ebb4a2589b90d6b9718e91f7d23bf1', 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: '9b911d176a0ac02b6f76c084c8b7f33c2c8637aa', 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: {
@@ -375,10 +375,10 @@ export class CoFileField {
                     'co-file-field__action': true,
                     'co-file-field__action--copied': this.copiedKey === key,
                 }, type: "button", tabIndex: -1, title: this.copiedKey === key ? s.copied : s.copyUrl, "aria-label": s.copyUrl, onClick: () => this.handleCopy(item) }, h("co-icon", { name: this.copiedKey === key ? 'check' : 'copy', size: 18 }))), !this.disabled && !this.readonly && (h("button", { class: "co-file-field__action", type: "button", tabIndex: -1, title: s.removeFile, "aria-label": s.removeFile, onClick: () => this.coRemove.emit(key) }, h("co-icon", { name: "trash", size: 18 })))));
-        })))), helper && (h("div", { key: '3c08efc8106a55cb9b52cca4b85a460b03284fbb', class: {
+        })))), helper && (h("div", { key: 'c2edda6419a9f6e75f7c16fac61ce3271159d816', class: {
                 'co-file-field__helper': true,
                 'co-file-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '3e011f947147f1af67cd21222e26cd2ac3860c4a', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '788a4a68794a0474289798cb5c48f75403d06bac', class: "co-file-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '0772a3d9fdf8fc818b0738ce4c7f0297c6eb4984', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '6153f585fdd804fb49b09e1d106c6625e473b917', 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-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: 'dbb3fd6c1a09210ee166cbe08e10f0d96cbdfedf', class: {
+        return (h("span", { key: '174e628c4a7fdd118cd5573c0054677c7c006989', 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: '787435edb87ccc8cd435e187613566779a90722a', name: meta.icon, size: iconSize, weight: "fill" })));
+            } }, h("co-icon", { key: '815957f4dd756fec566b4bbc996083e80aed0ab5', 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: 'eebe2fd2d26c909c1523e10d2fa7dfb115cc8bd6', class: {
+        return (h("div", { key: 'c09b28c4e20a80ce87275beb8c8f38c4ec9a6ac3', class: {
                 'co-helper-text': true,
                 [`co-helper-text--${this.status}`]: true,
-            }, part: "helper-text" }, h("co-icon", { key: 'b70b0c859fb54e8ca45e5f236620930e1120bb2b', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: 'fa646c0828b21706fabe21b3d20b3c38536308d5', class: "co-helper-text__message" }, h("slot", { key: '9527e9abb17fff628bdc2d5ca729d201ac7915ef' }, this.message))));
+            }, part: "helper-text" }, h("co-icon", { key: '48bee19674872e9ed7b06a9f0706063111abc3ae', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: '9b1e0cd4c00ad73c915f826df299cbb05156ca02', class: "co-helper-text__message" }, h("slot", { key: '41c95d86b31bb19be88b619057aba484748f1dfc' }, 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: 'd4dcafabbc956f3b5e8099fa30092d0d535c5d06', "aria-hidden": "true", style: {
+        return (h(Host, { key: '81319f5bcb43f9f095f7ae6328002bcffe22bc42', "aria-hidden": "true", style: {
                 display: 'inline-flex',
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 flexShrink: '0',
-            } }, h("span", { key: 'cd9008987f65922b0c770e1f080dc0a0764d62dd', part: "svg", innerHTML: this.svgContent })));
+            } }, h("span", { key: '4875243b3b1c0d40d82abc65307e398e83363b61', 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

@@ -11,7 +11,10 @@
   outline: none;
   padding: 0;
   flex-shrink: 0;
-  transition: opacity 0.15s ease, background 0.15s ease;
+  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)));
@@ -123,6 +126,12 @@
 }
 .co-icon-button:hover:not(:disabled) { opacity: 0.88; }
 
+/* Feedback de presión: squish instantáneo; el release usa la transición base. */
+.co-icon-button:active:not(:disabled) {
+  transform: scale(0.97);
+  transition-duration: var(--co-motion-duration-instant);
+}
+
 /* ─── FALLBACK: no backdrop-filter → solid surfaces ──────────── */
 @supports not (background: color-mix(in srgb, red, transparent)) {
   .co-icon-button--filled { background: var(--co-semantic-surface-primary); }

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

@@ -41,7 +41,7 @@ export class CoIconButton {
                     : 'var(--co-border-radius-full)',
             }
             : undefined;
-        return (h("button", { key: '5349ec99f898a9cc19df7a53fc01b3acb37f31f6', class: {
+        return (h("button", { key: '430b2aa64f664a6bd7cb40da53f592606c4b5308', class: {
                 'co-icon-button': true,
                 [`co-icon-button--${this.variant}`]: true,
                 [`co-icon-button--${this.shape}`]: true,

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

@@ -90,7 +90,7 @@
   background: var(--co-semantic-surface-page);
   border: 1px solid var(--co-semantic-border-field);
   border-radius: var(--co-border-radius-xs);
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  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;
@@ -209,7 +209,7 @@
   background: transparent;
   cursor: pointer;
   color: var(--co-semantic-text-muted);
-  transition: color 0.15s ease;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
 .co-input__clear--hidden {
@@ -239,7 +239,7 @@
   line-height: 1;
   white-space: nowrap;
   flex-shrink: 0;
-  transition: opacity 0.15s ease;
+  transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
   box-sizing: border-box;
 }
 

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

@@ -60,7 +60,7 @@
   background: var(--co-semantic-surface-page);
   border: 1px solid var(--co-semantic-border-field);
   border-radius: var(--co-border-radius-xs);
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  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;
 }