@prolibu-suite/cobalt-core 0.6.0 → 0.8.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: 'ac4fad8add6f42cd02cd516f32e0820f1bc7b1c6' }, h("div", { key: 'bd0f4d1adb5d21d329ec5b6dd06c08ef13e86cf4', class: "pop", popover: "manual", role: "dialog", "aria-modal": "false", "aria-label": this.popoverLabel, tabIndex: -1, ref: (el) => (this.panelEl = el) }, h("div", { key: '22599ea7ff5fdc39c38b0546ecc6869f6a6e0036', class: "pop__actions", part: "actions" }, h("slot", { key: 'fd9fd75cce78007b7407be5e7a0ef54f49ce2dcc', name: "actions" })), h("div", { key: '16b5af287977fbab204b69cc94e1591c5db963fb', class: "pop__head" }, this.dot && h("span", { key: '6bb8f39ef10c5a81ee461557e42837f43cd44c20', class: "pop__dot", style: this.color ? { background: this.color } : {} }), h("div", { key: '0dcd02e0da924f914015ada88388ddc1d9732447', class: "pop__body", part: "body" }, h("slot", { key: 'b00ade5c89b5a1e908e9cb463c6b461720609121' }))))));
+    }
+    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

@@ -23,10 +23,10 @@
 }
 
 /* ── Sizes ──────────────────────────────────────────────────── */
-.co-fab--xl { width: 64px; height: 64px; font-size: var(--co-font-size-16); } /* Figma FAB */
-.co-fab--l  { width: 56px; height: 56px; font-size: var(--co-font-size-16); }
-.co-fab--m  { width: 48px; height: 48px; font-size: var(--co-font-size-14); }
-.co-fab--s  { width: 40px; height: 40px; font-size: var(--co-font-size-14); }
+.co-fab--xl { --co-fab-size: 64px; width: 64px; height: 64px; font-size: var(--co-font-size-16); } /* Figma FAB */
+.co-fab--l  { --co-fab-size: 56px; width: 56px; height: 56px; font-size: var(--co-font-size-16); }
+.co-fab--m  { --co-fab-size: 48px; width: 48px; height: 48px; font-size: var(--co-font-size-14); }
+.co-fab--s  { --co-fab-size: 40px; width: 40px; height: 40px; font-size: var(--co-font-size-14); }
 
 .co-fab--extended {
   width: auto;
@@ -38,15 +38,75 @@
 .co-fab--extended.co-fab--m  { padding: 0 var(--co-spacing-lg); }
 .co-fab--extended.co-fab--s  { padding: 0 var(--co-spacing-md); }
 
+/* ── Hover-expand ("liquid" morph) ──────────────────────────── */
+/* Círculo en reposo → pill con rebote en hover/focus-visible. El ancho
+   expandido debe ser EXPLÍCITO (width:auto no anima; max-width/0fr clampean
+   y matan el overshoot): el componente mide el label y setea --co-fab-label-w
+   en pointerenter/focusin. El padding horizontal = (size − icon)/2 deja el
+   icono centrado en reposo con justify-content:flex-start, así no salta al
+   expandir. border-radius-full ya hace pill a cualquier ancho. */
+.co-fab--hover-expand {
+  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;
+}
+
+.co-fab--hover-expand.co-fab--xl { padding: 0 20px; }
+.co-fab--hover-expand.co-fab--l  { padding: 0 16px; }
+.co-fab--hover-expand.co-fab--m  { padding: 0 14px; }
+.co-fab--hover-expand.co-fab--s  { padding: 0 11px; }
+
+.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;
+}
+
+.co-fab--hover-expand co-icon {
+  flex-shrink: 0;
+  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.co-fab--hover-expand:hover:not(:disabled) co-icon,
+.co-fab--hover-expand:focus-visible co-icon {
+  /* 90° acompaña el estiramiento y el + sigue siendo un + (45° = ✕ de cerrar). */
+  transform: rotate(90deg);
+}
+
+/* El label vive siempre en el flow (flex-shrink:0 + nowrap del .co-fab) y el
+   overflow:hidden lo clipea en reposo — así offsetWidth mide el ancho real y
+   el texto se REVELA sin reflow por frame durante la animación. */
+.co-fab--hover-expand .co-fab__label {
+  flex-shrink: 0;
+  opacity: 0;
+  transform: translateX(-6px);
+  transition: opacity 0.12s ease, transform 0.12s ease;
+}
+
+.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;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .co-fab--hover-expand,
+  .co-fab--hover-expand co-icon,
+  .co-fab--hover-expand .co-fab__label {
+    transition: none;
+  }
+}
+
 /* ── Variants ───────────────────────────────────────────────── */
 .co-fab--primary {
-  /* Figma FAB: Negro 80% + Blur_1 — vidrio oscuro. El backdrop-filter vive en
-     .co-fab (tiene border-radius propio) para que el esmerilado quede clipeado
-     a las esquinas redondeadas. */
-  background: var(--co-fab-bg, var(--co-color-opacity-negro-80, rgba(31, 28, 27, 0.8)));
+  /* Negro sólido (pedido design 2026-07-22 — antes Negro 80% + blur, se veía
+     gris sobre fondos claros). --co-fab-bg sigue disponible como override. */
+  background: var(--co-fab-bg, var(--co-color-base-negro, #1f1c1b));
   color: var(--co-semantic-on-primary);
-  -webkit-backdrop-filter: blur(40px);
-  backdrop-filter: blur(40px);
 }
 
 .co-fab--primary:hover:not(:disabled) {

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

@@ -7,22 +7,36 @@ export class CoFab {
         this.disabled = false;
         /** Fixed position on screen */
         this.position = 'none';
+        /** With `label`: icon-only circle at rest that stretches into the extended
+         *  pill on hover/focus-visible (springy "liquid" morph). */
+        this.expandOnHover = false;
         this.handleClick = () => {
             if (!this.disabled)
                 this.coClick.emit();
         };
+        /* width:auto no anima — el CSS necesita el ancho expandido explícito. Se mide
+           el label (nowrap + flex-shrink:0 → offsetWidth = ancho completo aunque esté
+           clipeado) en cada entrada de hover/foco: barato y siempre fresco aunque la
+           fuente web cargue después del primer render. */
+        this.handleExpandMeasure = () => {
+            if (!this.expandOnHover || !this.labelEl)
+                return;
+            this.el.style.setProperty('--co-fab-label-w', `${this.labelEl.offsetWidth}px`);
+        };
     }
     render() {
         const iconSize = this.size === 'xl' ? 24 : this.size === 'l' ? 24 : this.size === 's' ? 18 : 20;
-        const isExtended = !!this.label;
-        return (h("button", { key: '508484d86d0d65218b8e5039ce81b6a1860347db', class: {
+        const hasLabel = !!this.label;
+        const hoverExpand = hasLabel && this.expandOnHover;
+        return (h("button", { key: 'ffedc2aea8b7b813b8e646872f4a0814589f80ab', class: {
                 'co-fab': true,
                 [`co-fab--${this.variant}`]: true,
                 [`co-fab--${this.size}`]: true,
-                'co-fab--extended': isExtended,
+                'co-fab--extended': hasLabel && !this.expandOnHover,
+                '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, "aria-label": this.ariaLabelText || this.label || this.icon }, h("co-icon", { key: '47e47f74b93a1cdbe706d6e0a577f4396a68507c', name: this.icon, size: iconSize }), this.label && h("span", { key: 'a4fd981b11c467261eba9de0731b37e01aae0ed2', class: "co-fab__label" }, 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: '34242af8b8de622400507b106e566b8214f53534', name: this.icon, size: iconSize }), this.label && (h("span", { key: '56cd6e22505608ebf909a1c0356ecba5c0bae418', class: "co-fab__label", ref: (el) => (this.labelEl = el) }, this.label))));
     }
     static get is() { return "co-fab"; }
     static get encapsulation() { return "shadow"; }
@@ -175,6 +189,26 @@ export class CoFab {
                 "reflect": false,
                 "attribute": "position",
                 "defaultValue": "'none'"
+            },
+            "expandOnHover": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "With `label`: icon-only circle at rest that stretches into the extended\npill on hover/focus-visible (springy \"liquid\" morph)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expand-on-hover",
+                "defaultValue": "false"
             }
         };
     }
@@ -196,4 +230,5 @@ export class CoFab {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -61,7 +61,7 @@
   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-default);
+  border: 1px dashed var(--co-semantic-border-field);
   border-radius: var(--co-border-radius-sm);
   cursor: pointer;
   text-align: center;
@@ -286,7 +286,7 @@
   inset: 0;
   width: 40%;
   border-radius: var(--co-border-radius-full);
-  background: var(--co-semantic-border-focus);
+  background: var(--co-semantic-status-info);
   transition: width 0.2s ease;
 }
 

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: '31d820478276fee18bf2df79dd277ef1cbcf2ac2', class: {
+        return (h("div", { key: 'd69adf5472c920d9fda750d390c8d66495c7d912', 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: 'b7df2e7f427fb6306191c07aebd41b2a2c7303c6', class: "co-file-field__labels" }, h("label", { key: 'd3dcd5886777a09fea5d4082f4a941a24056184e', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '6cf4505b762c9335798de30362e1eac8bc6e123c', required: this.required })))), showDropzone && (h("div", { key: 'af761f6f87b10397bc3e5ebf3ee4c43c0c815449', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: '3e084a96b7fbd714fa07aeeea09146c3782af2b0', class: "co-file-field__labels" }, h("label", { key: '6618041eec9358983794238014f49ae8ad724d79', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '16aa21951eedafb190180ee40c1cba13230ef128', required: this.required })))), showDropzone && (h("div", { key: '33bfe60be00c270fe9861f0250ffe6e4ddcf820b', 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: '72ab595ccd9a7f275cd214fcb17c15972057557a', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: '686287ddfba61763e98e8753f078f8bc1ac98460', name: "file-arrow-up", size: 18 }), h("span", { key: '8faab79ab89c6a2fc83069ae7bcafb4b21feb416' }, this.uploadButtonText || s.uploadButton)), h("span", { key: '761ab4b4e58490fe8e0024e6881a8d73fef5e7fd', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: 'c6a88193c0aacefa6bd1534600ad56d3577b2228', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: 'ecd504e94b4ab9a1784868a357399e766b2dd68c', class: "co-file-field__actions", part: "actions" }, h("slot", { key: '4e6572288387694e7e43cfa7fd58b4fb1952be2c', name: "actions" })), h("input", { key: '708ef841bab08935f125e6aa4338f67502b8689f', 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: 'f7423a91e47af3fbc4eb8257569df98da889bebf', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: 'da179d8d456ac934ee0d88679cb9866f3d9af3a9', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: '73ffb49c6090eb21c471f9cfe145df23b8fb8592', 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: 'ecbc35245db8e66eca656423657a0223e33a156e', class: "co-file-field__list", part: "list" }, items.map((item) => {
+            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: '219538469e33b0e5e2a1e26e1591d2b578b548ef', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: '5021d06fe31100f7b4c6028a868b707aeb3df0c8', name: "file-arrow-up", size: 18 }), h("span", { key: 'ba785ab9e8cd6173f367ebf0a4320a37fa4b0832' }, this.uploadButtonText || s.uploadButton)), h("span", { key: '1fae290aace7b669b27cd53529ea30c36e009805', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: '999ac1eda129973f4b8710bd252337786e4eb99c', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: 'd2ce4783e5eba96fdf59e998f37411ef0f418458', class: "co-file-field__actions", part: "actions" }, h("slot", { key: '55e22bcaff045708471a2837d1c0345d53a0a748', name: "actions" })), h("input", { key: '773880ce9b881512d03eac3be0465942c6376843', 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: '57164ac1e53062957a99ef182394ae9da7636c3e', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: '91894d7e208c62e0aa9407812bbaf7ad491ca275', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: 'c7f74b97051085770677b6433adb7b54fcf4405d', 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: '4c55ead3dcdff97d502c2f41af86d372712ba478', 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: 'e171dcd572d9b82734433eaa20f44c85c2c24735', class: {
+        })))), helper && (h("div", { key: 'ba03c24a5c7e6e0c774b68af85f60ec2fc4a2f0e', class: {
                 'co-file-field__helper': true,
                 'co-file-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '3ba44c6324cd56a470dc4668a15b31c61b58b990', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '24c06c19e336ddb0f6a5266d9a9b84f7fbf3b80e', class: "co-file-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: 'ed936a52670f30b4626a1339ce7e6a246bdb65dd', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '295f5de6a6dda88246441816f636cce156aefbe8', 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: 'e894b848be911777d8a91388050c10a678bdaa1c', class: {
+        return (h("span", { key: '5eb049a7b3503d2bc82245403da53bdd7fab0ee5', 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: 'd7dd6f61ba7155b4e2c0f38cc59a93ea647217b1', name: meta.icon, size: iconSize, weight: "fill" })));
+            } }, h("co-icon", { key: 'ebb6d9ea5ffc35daefab825ad26519cb42ce2293', 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: 'edb5f0cdd150dcaa06230b90d3385d18684e2261', class: {
+        return (h("div", { key: 'e0e318d1f4c3a9f524d11d3a9ad648960d26bb7f', class: {
                 'co-helper-text': true,
                 [`co-helper-text--${this.status}`]: true,
-            }, part: "helper-text" }, h("co-icon", { key: '7f9cce7182cd39893e0f6abfab2d1a27c266ea17', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: '38757c70aca1891bfd43b505d57d7455b22512b3', class: "co-helper-text__message" }, h("slot", { key: '9382e95880c71e3da4eed22ed6c14589c4890252' }, this.message))));
+            }, part: "helper-text" }, h("co-icon", { key: 'a65678c3cf9a832ffde08f4f47e09974338745ff', name: this.STATUS_ICON[this.status], size: 14, weight: "fill", class: "co-helper-text__icon" }), h("span", { key: 'c3667f4f4b6e53748d5a90ab2fe12e3fcb9cdb2a', class: "co-helper-text__message" }, h("slot", { key: 'f854e37b266feee82a4b6281070d3ed84555f13c' }, 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: 'abc90edf4c13e2de7d28f88f99b694dd8aecbdc9', "aria-hidden": "true", style: {
+        return (h(Host, { key: '3d1fa57953812f68ff8a972f85aaf0d3f7b3ea9e', "aria-hidden": "true", style: {
                 display: 'inline-flex',
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 flexShrink: '0',
-            } }, h("span", { key: 'c0248eb38058439bbd5213df838ced7d7cc62bc0', part: "svg", innerHTML: this.svgContent })));
+            } }, h("span", { key: '07413295bbb15dcbacfaaca47e7a25d28744c71e', 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.js

@@ -41,7 +41,7 @@ export class CoIconButton {
                     : 'var(--co-border-radius-full)',
             }
             : undefined;
-        return (h("button", { key: 'bf9aad13fe7360a7135da123ba555b64ee90cadc', class: {
+        return (h("button", { key: '380bc110b581dba4f897ba8c8b733598c9e4f9ca', 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

@@ -88,7 +88,7 @@
   /* Figma Text Field: fondo sólido de página + borde Negro 25% (los campos
      tenues negro-8 + glass no leen como editables sobre el drawer blanco). */
   background: var(--co-semantic-surface-page);
-  border: 1px solid var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25));
+  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;
   min-height: 40px;
@@ -98,6 +98,18 @@
   min-width: 0;
 }
 
+/* ---- Variant: flat (no border/background — reads as content) ----
+   Border-width/radius are left untouched (only the color goes transparent),
+   so padding/box size never shift between default and flat. Placed here
+   (before the size variants and ahead of the States/Validation sections
+   below) so the equal-specificity (0,2,0) state selectors — focused/
+   disabled/error/success/warning/info — win their cascade tie by source
+   order and keep showing through on top of flat, same as they do today. */
+.co-input--flat .co-input__field {
+  background: transparent;
+  border-color: transparent;
+}
+
 /* ---- Size variants ---- */
 .co-input--s .co-input__field {
   min-height: 28px;