@prolibu-suite/cobalt-core 0.10.4 → 0.11.0

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { afterEventFor } from "../co-overlay/overlayAfterClose";
 import { slotHasContent } from "../../utils/slotContent";
+import { clampDragOffset, dragOffsetOf, isInteractiveDragTarget, } from "../../utils/dragMove";
 /**
  * @slot        - Modal body content
  * @slot header-leading - Control before the heading (e.g. a back arrow on a
@@ -33,7 +34,8 @@ export class CoModal {
          */
         this.closeOnEscape = false;
         /**
-         * Modal width: sm (400px), md (540px), lg (680px),
+         * Modal width: xs (369px, vía `--co-modal-width` — Task C12, paneles
+         * anclados como "Tipografía y color"), sm (400px), md (540px), lg (680px),
          * full (min(1400px, 95vw) × 92vh — media/document viewers).
          *
          * `full` also drops the body padding and lets the body grow, so a slotted
@@ -46,6 +48,59 @@ export class CoModal {
         /** Hairline between header and body. `false` lets the body run straight
          *  under the heading (Figma modals whose first row is a segmented control). */
         this.headerDivider = true;
+        /**
+         * Visual treatment (Task C12). `default` = superficie squircle actual
+         * (radio `--co-modal-r`, sombra que sigue la silueta). `panel` = superficie
+         * plana (radio 12, borde `--co-semantic-border-subtle`, `--co-shadow-lg`),
+         * SIN máscara squircle — look de panel anclado, no de diálogo centrado.
+         *
+         * `dialog` (Task M1) = la anatomía del componente "Modal" del design system
+         * (Figma Prolibu UI Suite, nodo `1179:37247`): superficie plana radio 16
+         * (`--co-border-radius-lg`) sin borde ni sombra propios, título 22/500 y
+         * cuerpo 16/1.5 `text-secondary` sin divisor entre ambos, padding 32
+         * (`--co-spacing-3xl`), footer 16/24 con hairline `border-subtle` y botones
+         * cuadrados de radio 12. Sin máscara squircle. El ✕ (si `closable`) es el
+         * redondo de 32 del modo `panel`.
+         */
+        this.appearance = 'default';
+        /**
+         * Control del scrim (Task C12). `none` = sin fondo oscuro y sin cierre por
+         * clic afuera — independiente de `closeOnOverlay` (que solo aplica cuando
+         * SÍ hay scrim). `co-overlay` es quien posee el único `<div>` de scrim del
+         * árbol, así que `none` implica no montar `<co-overlay>` (ver `inline`).
+         */
+        this.backdrop = 'default';
+        /**
+         * Renderiza en `position: fixed` con su propio `--co-modal-z-index` en vez
+         * de promoverse al TOP LAYER del browser (Task C12). `co-overlay` promueve
+         * su scrim al top layer vía Popover API (`showPopover()`); el top layer
+         * SIEMPRE pinta por encima de cualquier `z-index` normal, así que un
+         * portal propio del consumidor (selector de fuente/color del editor) con
+         * z-index alto quedaría igual TAPADO detrás del modal. `inline` evita eso.
+         *
+         * `co-overlay` es también quien posee la promoción a top layer — no hay
+         * forma de pedirle "no te promuevas" sin tocar ese componente (fuera de
+         * alcance de esta task), así que, igual que `backdrop="none"`, `inline`
+         * implica no montar `<co-overlay>`: el panel pasa a posicionarse y apilarse
+         * solo (`.co-modal__frame--standalone`, ver co-modal.css).
+         */
+        this.inline = false;
+        /**
+         * Opt-in: el modal se MUEVE arrastrando su header (Task D1). Default false →
+         * los consumidores actuales quedan byte-idénticos (ni DOM ni CSS cambian).
+         *
+         * Con `movable`, el `part="header"` entero es la zona de agarre (`cursor:
+         * grab`), salvo los controles que contenga (el ✕, y cualquier botón, enlace
+         * o campo: ver `isInteractiveDragTarget`). Soltar confirma la posición;
+         * `pointercancel` o perder el foco de la ventana la CANCELAN y dejan la
+         * anterior. La posición no se persiste: cerrar y reabrir devuelve el panel a
+         * su lugar por defecto.
+         *
+         * Se llama `movable` y no `draggable` a propósito: `draggable` es un atributo
+         * global de HTML (arrastre nativo HTML5) y una prop de React, y una prop del
+         * mismo nombre taparía `HTMLElement.draggable` con dos semánticas encimadas.
+         */
+        this.movable = false;
         /* `:empty` can't see across a <slot>, so slotted presence is tracked in JS */
         this.hasFooter = false;
         this.handleFooterSlotChange = (e) => {
@@ -58,6 +113,12 @@ export class CoModal {
         this.handleCloseClick = () => {
             this.coClose.emit();
         };
+        /** Freno del clic del panel: existe SOLO para que un clic adentro no llegue
+         *  al `<co-overlay>`, que cierra con cualquier clic sobre su div. Sin
+         *  overlay (`inline` / `backdrop="none"`) no hay nada que proteger, y el
+         *  freno se tragaba los `onClick` de React del contenido proyectado (React
+         *  delega en la raíz; el camino compuesto del evento cruza este div). Por
+         *  eso se monta condicionado a `usesOverlay` — ver `render()`. */
         this.stopPropagation = (e) => {
             e.stopPropagation();
         };
@@ -70,6 +131,84 @@ export class CoModal {
             else if (ev === 'after-close')
                 this.coAfterClose.emit();
         };
+        // ── Arrastre por el header (Task D1) ──────────────────────────────────
+        /** Gesto en curso: pinta el cursor `grabbing` (única razón para re-render). */
+        this.dragging = false;
+        /** Desplazamiento YA confirmado. El gesto siguiente arranca desde acá. */
+        this.committedOffset = { x: 0, y: 0 };
+        /** Desplazamiento en vivo (= el confirmado mientras no hay gesto). */
+        this.liveOffset = { x: 0, y: 0 };
+        this.handleDragDown = (e) => {
+            var _a;
+            // Solo el botón primario; un segundo puntero no roba el gesto en curso.
+            if (!this.movable || this.dragging || e.button !== 0)
+                return;
+            // El ✕ (y cualquier control que el header llegue a tener) no arrastra.
+            if (isInteractiveDragTarget(e, this.headerEl))
+                return;
+            const rect = (_a = this.modalEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            if (!rect)
+                return;
+            // Evita seleccionar el título al arrastrar. El foco NO se toca: el header
+            // no es un control, no entra al tab-order ni cambia el aria-labelledby.
+            e.preventDefault();
+            this.dragging = true;
+            this.dragPointerId = e.pointerId;
+            this.dragStart = { x: e.clientX, y: e.clientY };
+            // Caja SIN trasladar: `getBoundingClientRect` la devuelve con el
+            // desplazamiento ya aplicado, pero el offset que se acota es absoluto
+            // desde el origen sin trasladar (`committedOffset + delta`). Mezclarlos
+            // corría el rango permitido exactamente `committedOffset` px en cada
+            // gesto nuevo, y del segundo en adelante el panel se iba de pantalla.
+            this.dragRect = {
+                left: rect.left - this.committedOffset.x,
+                top: rect.top - this.committedOffset.y,
+                width: rect.width,
+                height: rect.height,
+            };
+            this.dragViewport = { width: window.innerWidth, height: window.innerHeight };
+            this.capturePointer(e);
+            // El listener del blur vive solo mientras dura el gesto: sin `movable` (o
+            // sin arrastre en curso) el componente no engancha nada en `window`.
+            window.addEventListener('blur', this.handleWindowBlur);
+        };
+        this.handleDragMove = (e) => {
+            if (!this.isActiveDragPointer(e))
+                return;
+            if (!this.dragStart || !this.dragRect || !this.dragViewport)
+                return;
+            const raw = dragOffsetOf(this.committedOffset, this.dragStart, { x: e.clientX, y: e.clientY });
+            this.writeOffset(clampDragOffset(raw, this.dragRect, this.dragViewport));
+        };
+        /** Soltar CONFIRMA la posición alcanzada. */
+        this.handleDragUp = (e) => {
+            if (!this.isActiveDragPointer(e))
+                return;
+            this.committedOffset = this.liveOffset;
+            this.releasePointer(e);
+            this.endDrag();
+        };
+        /** `pointercancel` CANCELA: el panel vuelve a la última posición confirmada. */
+        this.handleDragCancel = (e) => {
+            if (!this.isActiveDragPointer(e))
+                return;
+            this.releasePointer(e);
+            this.writeOffset(this.committedOffset);
+            this.endDrag();
+        };
+        /** Perder el foco de la ventana (alt-tab, un iframe que se lo lleva) cancela igual que `pointercancel`. */
+        this.handleWindowBlur = () => {
+            if (!this.dragging)
+                return;
+            this.writeOffset(this.committedOffset);
+            this.endDrag();
+        };
+    }
+    /** Verdadero cuando NO corresponde montar `<co-overlay>` — ver doc de
+     *  `backdrop` e `inline` arriba: ambas comparten el mismo mecanismo porque
+     *  co-overlay es la única superficie dueña del scrim Y del top layer. */
+    get usesOverlay() {
+        return this.backdrop !== 'none' && !this.inline;
     }
     handleKeydown(e) {
         if (!this.open || !this.closeOnEscape)
@@ -77,18 +216,122 @@ export class CoModal {
         if (e.key === 'Escape')
             this.coClose.emit();
     }
+    /**
+     * La posición no se persiste: cada APERTURA arranca desde la posición por
+     * defecto. El reset va al abrir y no al cerrar a propósito — reseteando al
+     * cerrar, el panel se teletransportaba al centro mientras corría su
+     * animación de salida (un consumidor que lo deja montado y solo apaga
+     * `open` lo veía saltar).
+     */
+    resetPositionOnOpen(open) {
+        this.endDrag();
+        if (!open)
+            return;
+        this.committedOffset = { x: 0, y: 0 };
+        this.writeOffset({ x: 0, y: 0 });
+    }
+    disconnectedCallback() {
+        // Desmontarse en pleno gesto no debe dejar el listener colgado.
+        window.removeEventListener('blur', this.handleWindowBlur);
+    }
+    endDrag() {
+        window.removeEventListener('blur', this.handleWindowBlur);
+        this.dragging = false;
+        this.dragPointerId = undefined;
+        this.dragStart = undefined;
+        this.dragRect = undefined;
+        this.dragViewport = undefined;
+    }
+    /** `==`: en jsdom los MouseEvent traen `pointerId` undefined y deben seguir pasando. */
+    isActiveDragPointer(e) {
+        // eslint-disable-next-line eqeqeq
+        return this.dragging && e.pointerId == this.dragPointerId;
+    }
+    /** `setPointerCapture` sigue el gesto fuera del header (y garantiza el `pointercancel`). */
+    capturePointer(e) {
+        const el = this.headerEl;
+        if (!el || typeof el.setPointerCapture !== 'function' || e.pointerId == null)
+            return;
+        try {
+            el.setPointerCapture(e.pointerId);
+        }
+        catch (_a) {
+            /* pointerId inactivo (evento sintético): sin captura, el gesto vive dentro del header */
+        }
+    }
+    releasePointer(e) {
+        const el = this.headerEl;
+        if (!el || typeof el.releasePointerCapture !== 'function' || e.pointerId == null)
+            return;
+        try {
+            el.releasePointerCapture(e.pointerId);
+        }
+        catch (_a) {
+            /* ya liberado */
+        }
+    }
+    /**
+     * Escribe el desplazamiento como custom property en el panel; la regla que la
+     * consume vive en `.co-modal--movable` (co-modal.css).
+     *
+     * Va por el DOM y no por el `style` del vdom a propósito: el `transform` del
+     * panel es la animación de apertura (`scale`), así que el desplazamiento usa
+     * la propiedad independiente `translate` — se compone con ese transform, no
+     * dispara layout, y al no declararla el vdom ningún re-render la pisa.
+     */
+    writeOffset(offset) {
+        this.liveOffset = offset;
+        const el = this.modalEl;
+        if (!el)
+            return;
+        if (offset.x === 0 && offset.y === 0)
+            el.style.removeProperty('--co-modal-translate');
+        else
+            el.style.setProperty('--co-modal-translate', `${offset.x}px ${offset.y}px`);
+    }
     render() {
-        return (h("co-overlay", { key: '9b796364a697af4d4a0ede50e5dd5516ccaa299f', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: 'bea863aedb405cdc492277add25e2c08ea7ef258', class: "co-modal__frame co-sq-elevation-fallback" }, h("div", { key: '05f9e86f7a813243913f60c6a042fb93ed65a463', class: {
+        // `panel` (Task C12) y `dialog` (Task M1) no usan la receta squircle:
+        // superficies planas con radio/borde/sombra propios declarados en
+        // co-modal.css. (Las dos comparaciones van literales: el guard
+        // squircle-surface-guard.test.ts las busca por texto.)
+        const squircle = this.appearance !== 'panel' && this.appearance !== 'dialog';
+        const flat = !squircle;
+        const closeIconSize = flat ? 18 : 20;
+        // Receta squircle: global/squircle-surface.css. El frame lleva el
+        // drop-shadow SOLO en el fallback (.co-sq-elevation-fallback); el panel
+        // lleva recorte + box-shadow (Chromium) y conserva la animación de
+        // open/close + onTransitionEnd sin cambios.
+        const frame = (h("div", { class: {
+                'co-modal__frame': true,
+                'co-sq-elevation-fallback': squircle,
+                // Ver doc de `backdrop`/`inline` en los @Prop: sin <co-overlay> el
+                // frame se posiciona y apila solo (position:fixed + z-index).
+                'co-modal__frame--standalone': !this.usesOverlay,
+            } }, h("div", { class: {
                 'co-modal': true,
-                'co-sq-clip': true,
-                'co-sq-elevation': true,
+                'co-sq-clip': squircle,
+                'co-sq-elevation': squircle,
                 'co-modal--open': this.open,
+                'co-modal--xs': this.size === 'xs',
                 'co-modal--sm': this.size === 'sm',
                 'co-modal--lg': this.size === 'lg',
                 'co-modal--full': this.size === 'full',
                 'co-modal--no-dividers': this.noDividers,
                 'co-modal--no-header-divider': !this.headerDivider,
-            }, part: "modal", ref: (el) => (this.modalEl = el), role: "dialog", "aria-modal": "true", "aria-labelledby": this.heading ? 'modal-heading' : undefined, onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '8ecd9f7f4413339e484710e2abef1c21fc7f25d0', class: "co-modal__header", part: "header" }, h("slot", { key: '09df61b3aac8a26e0eb85a6a6aa48f9a7f547dbf', name: "header-leading" }), h("div", { key: '8e9a55561a1b5615f77eb3eb96284ddc68eddbc3', class: "co-modal__header-text", part: "header-text" }, h("h2", { key: '65c083247543448d9f527592cd8614a4c713cf4c', class: "co-modal__heading", part: "heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: 'c871aa6549cf56265a02048ca18f736d92d1a482', class: "co-modal__description", part: "description" }, this.description))), h("slot", { key: '106a5be71c8c03736313c1084c61d3b836ebb495', name: "header-actions" }), this.closable && (h("button", { key: 'a0df67cd09e5f414c58f9f67f6a92c58b9f4773b', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'e766981fff30de0c79599756dde74c5981d5c9fd', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: '355e455c19cbc4a0783c0e0c2689265e6f599484', class: "co-modal__body", part: "body" }, h("slot", { key: 'fa6d3310464ff33de17618561182736bc6cef0e5' }))), h("div", { key: '43b89751fac3fd1b707a284d260e91dd7d7ea8a6', class: { 'co-modal__footer': true, 'co-modal__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { key: 'e9821b0712a6903c923f9bb50393e4b85545c211', name: "footer", onSlotchange: this.handleFooterSlotChange }))))));
+                'co-modal--panel': this.appearance === 'panel',
+                'co-modal--dialog': this.appearance === 'dialog',
+                'co-modal--movable': this.movable,
+            }, part: "modal", ref: (el) => (this.modalEl = el), role: "dialog", "aria-modal": "true", "aria-labelledby": this.heading ? 'modal-heading' : undefined,
+            // Sin <co-overlay> el clic sigue su curso (los onClick delegados del
+            // consumidor lo necesitan); con overlay, el freno de siempre.
+            onClick: this.usesOverlay ? this.stopPropagation : undefined, onTransitionEnd: this.handleTransitionEnd }, h("div", { class: {
+                'co-modal__header': true,
+                'co-modal__header--movable': this.movable,
+                'co-modal__header--dragging': this.dragging,
+            }, part: "header", ref: (el) => (this.headerEl = el), onPointerDown: this.movable ? this.handleDragDown : undefined, onPointerMove: this.movable ? this.handleDragMove : undefined, onPointerUp: this.movable ? this.handleDragUp : undefined, onPointerCancel: this.movable ? this.handleDragCancel : undefined }, h("slot", { name: "header-leading" }), h("div", { class: "co-modal__header-text", part: "header-text" }, h("h2", { class: "co-modal__heading", part: "heading", id: "modal-heading" }, this.heading), this.description && (h("p", { class: "co-modal__description", part: "description" }, this.description))), h("slot", { name: "header-actions" }), this.closable && (h("button", { class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { name: "x", size: closeIconSize })))), !this.noDividers && (h("div", { class: "co-modal__body", part: "body" }, h("slot", null))), h("div", { class: { 'co-modal__footer': true, 'co-modal__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { name: "footer", onSlotchange: this.handleFooterSlotChange })))));
+        if (!this.usesOverlay)
+            return frame;
+        return (h("co-overlay", { open: this.open, onCoClose: this.handleOverlayClick }, frame));
     }
     static get is() { return "co-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -227,15 +470,15 @@ export class CoModal {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'sm' | 'md' | 'lg' | 'full'",
-                    "resolved": "\"full\" | \"lg\" | \"md\" | \"sm\"",
+                    "original": "'xs' | 'sm' | 'md' | 'lg' | 'full'",
+                    "resolved": "\"full\" | \"lg\" | \"md\" | \"sm\" | \"xs\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Modal width: sm (400px), md (540px), lg (680px),\nfull (min(1400px, 95vw) \u00D7 92vh \u2014 media/document viewers).\n\n`full` also drops the body padding and lets the body grow, so a slotted\n<video>/<iframe> fills the panel edge-to-edge instead of sitting in a\ncontent-height box."
+                    "text": "Modal width: xs (369px, v\u00EDa `--co-modal-width` \u2014 Task C12, paneles\nanclados como \"Tipograf\u00EDa y color\"), sm (400px), md (540px), lg (680px),\nfull (min(1400px, 95vw) \u00D7 92vh \u2014 media/document viewers).\n\n`full` also drops the body padding and lets the body grow, so a slotted\n<video>/<iframe> fills the panel edge-to-edge instead of sitting in a\ncontent-height box."
                 },
                 "getter": false,
                 "setter": false,
@@ -282,12 +525,93 @@ export class CoModal {
                 "reflect": false,
                 "attribute": "header-divider",
                 "defaultValue": "true"
+            },
+            "appearance": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'panel' | 'dialog'",
+                    "resolved": "\"default\" | \"dialog\" | \"panel\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual treatment (Task C12). `default` = superficie squircle actual\n(radio `--co-modal-r`, sombra que sigue la silueta). `panel` = superficie\nplana (radio 12, borde `--co-semantic-border-subtle`, `--co-shadow-lg`),\nSIN m\u00E1scara squircle \u2014 look de panel anclado, no de di\u00E1logo centrado.\n\n`dialog` (Task M1) = la anatom\u00EDa del componente \"Modal\" del design system\n(Figma Prolibu UI Suite, nodo `1179:37247`): superficie plana radio 16\n(`--co-border-radius-lg`) sin borde ni sombra propios, t\u00EDtulo 22/500 y\ncuerpo 16/1.5 `text-secondary` sin divisor entre ambos, padding 32\n(`--co-spacing-3xl`), footer 16/24 con hairline `border-subtle` y botones\ncuadrados de radio 12. Sin m\u00E1scara squircle. El \u2715 (si `closable`) es el\nredondo de 32 del modo `panel`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "appearance",
+                "defaultValue": "'default'"
+            },
+            "backdrop": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'none'",
+                    "resolved": "\"default\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Control del scrim (Task C12). `none` = sin fondo oscuro y sin cierre por\nclic afuera \u2014 independiente de `closeOnOverlay` (que solo aplica cuando\nS\u00CD hay scrim). `co-overlay` es quien posee el \u00FAnico `<div>` de scrim del\n\u00E1rbol, as\u00ED que `none` implica no montar `<co-overlay>` (ver `inline`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "backdrop",
+                "defaultValue": "'default'"
+            },
+            "inline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renderiza en `position: fixed` con su propio `--co-modal-z-index` en vez\nde promoverse al TOP LAYER del browser (Task C12). `co-overlay` promueve\nsu scrim al top layer v\u00EDa Popover API (`showPopover()`); el top layer\nSIEMPRE pinta por encima de cualquier `z-index` normal, as\u00ED que un\nportal propio del consumidor (selector de fuente/color del editor) con\nz-index alto quedar\u00EDa igual TAPADO detr\u00E1s del modal. `inline` evita eso.\n\n`co-overlay` es tambi\u00E9n quien posee la promoci\u00F3n a top layer \u2014 no hay\nforma de pedirle \"no te promuevas\" sin tocar ese componente (fuera de\nalcance de esta task), as\u00ED que, igual que `backdrop=\"none\"`, `inline`\nimplica no montar `<co-overlay>`: el panel pasa a posicionarse y apilarse\nsolo (`.co-modal__frame--standalone`, ver co-modal.css)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "inline",
+                "defaultValue": "false"
+            },
+            "movable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Opt-in: el modal se MUEVE arrastrando su header (Task D1). Default false \u2192\nlos consumidores actuales quedan byte-id\u00E9nticos (ni DOM ni CSS cambian).\n\nCon `movable`, el `part=\"header\"` entero es la zona de agarre (`cursor:\ngrab`), salvo los controles que contenga (el \u2715, y cualquier bot\u00F3n, enlace\no campo: ver `isInteractiveDragTarget`). Soltar confirma la posici\u00F3n;\n`pointercancel` o perder el foco de la ventana la CANCELAN y dejan la\nanterior. La posici\u00F3n no se persiste: cerrar y reabrir devuelve el panel a\nsu lugar por defecto.\n\nSe llama `movable` y no `draggable` a prop\u00F3sito: `draggable` es un atributo\nglobal de HTML (arrastre nativo HTML5) y una prop de React, y una prop del\nmismo nombre tapar\u00EDa `HTMLElement.draggable` con dos sem\u00E1nticas encimadas."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "movable",
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "hasFooter": {}
+            "hasFooter": {},
+            "dragging": {}
         };
     }
     static get events() {
@@ -338,6 +662,12 @@ export class CoModal {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "resetPositionOnOpen"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "keydown",

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

@@ -14,12 +14,12 @@ export class CoNavbar {
         this.rounded = false;
     }
     render() {
-        return (h("div", { key: '9899b395fdf793bf9b7e47509b81eb559aac0b56', class: {
+        return (h("div", { key: 'd313d8d23b4b4f2d0250fedf8762bdda47464fe2', class: {
                 'co-navbar': true,
                 [`co-navbar--${this.variant}`]: true,
                 [`co-navbar--${this.size}`]: true,
                 'co-navbar--rounded': this.rounded,
-            }, part: "navbar", role: "toolbar" }, h("slot", { key: 'c863bcf8dc9eddab771922a81e11c1966bfe8d2e' })));
+            }, part: "navbar", role: "toolbar" }, h("slot", { key: '737e1bfc2c3254fed53e590cba18932dc1d04f5d' })));
     }
     static get is() { return "co-navbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -323,18 +323,18 @@ export class CoNumberField {
         return this.scaled && !this.isEmpty ? '%' : null;
     }
     render() {
-        return (h("div", { key: 'de7f3ae049ac5afcdf7d8a711c566b947fa7e151', class: {
+        return (h("div", { key: 'cfe8c799eba592d7eab1bf8fc7dfc3a143123206', class: {
                 'co-number-field': true,
                 'co-number-field--disabled': this.disabled,
                 'co-number-field--focused': this.focused,
                 [`co-number-field--${this.size}`]: true,
                 [`co-number-field--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: '3a6c96b2987f0502334a23048f8693745589e965', class: "co-number-field__labels" }, this.label && h("label", { key: '7e0c9c08e93f10f6e18143d038ea8810a0f156b8', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: '88b110f3d59908c27d182533100220ff8a65bb66', required: this.required })), this.secondaryLabel && h("span", { key: '5dd9219f995fc59ce557c8ba2b5dfea2d7cb56ef', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: 'e2079dd9e28daf904057106167cd368de906daba', class: "co-number-field__row", part: "row" }, !this.hideControls && (h("button", { key: '7ff22639f594e7a008f02962ed7782b84654b78e', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: '61aafdc7c083ea39b9b65b87d267df63b91cb8d4', name: "minus", size: 16 }))), h("input", { key: 'e088482da6c9fe1e02abe5bcae2611f157be83ed', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal",
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: 'b15f9ddc1de6c026d92ee4776dc9209359d9a33b', class: "co-number-field__labels" }, this.label && h("label", { key: '449cb18609fa0aafe53cfd8eea7f2ea30e1b822c', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: '87e3da885243de08bce2e63c6d94eaf0b5ec374c', required: this.required })), this.secondaryLabel && h("span", { key: 'eccc1dba84e28783d2c15f442ec7713e24b0a4e2', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: '6afdf37dd4e52fe7ec168bea6cb84a15f7f67414', class: "co-number-field__row", part: "row" }, !this.hideControls && (h("button", { key: 'b858fc8ae0c6cfcf4e4ee7c30e11d967a0aa2e0e', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: '37e7b6b9ddeb72ed33f9131ee010149e64cdf509', name: "minus", size: 16 }))), h("input", { key: 'a9656744984f93fe8955fb46afd28735a31b439a', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal",
             // Mismo guard `focused` que el @Watch: mientras el usuario edita, su
             // texto manda. Sin esto, el re-render que dispara emitValue repinta
             // el input desde el NÚMERO y se come el texto en construcción
             // ("34,640.00" pegado quedaba "34,640"; un "12." perdería el punto).
-            value: this.focused && this.inputEl ? this.inputEl.value : this.displayValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }), this.affixText && (h("span", { key: '2a7bc2f465844ccb9db7017c1b3782625e784c05', class: "co-number-field__affix", "aria-hidden": "true" }, this.affixText)), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: '06e40ddc080297db49823f17eeeaba313f68fafd', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'f69d2f6bf5cb4cd6731d55f873fd03d21eb0f42e', name: "x-circle", size: 16, weight: "fill" }))), h("slot", { key: 'd16df6468bf0f514ce183e36d555b5e8f97ff969', name: "suffix" }), !this.hideControls && (h("button", { key: '523f5cbda86bbe3b69d08aedc9eb678d6b218cb7', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: '7f546fa2885ebecc3f16129bdc815a1cea57f53f', name: "plus", size: 16 })))), this.helperText && (h("div", { key: 'e807bbe38823ee148e227baaac1feafd85f93c49', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'e8bc48908cb9e53952e0bffeb898d0a4b0d2fef3', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: 'c00dc9f3bd966988f6a2546a360ede337de383e4', class: "co-number-field__helper-text" }, this.helperText)))));
+            value: this.focused && this.inputEl ? this.inputEl.value : this.displayValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }), this.affixText && (h("span", { key: 'a2a7a46bc8e2ad04a4577d0ab32444deab4f4948', class: "co-number-field__affix", "aria-hidden": "true" }, this.affixText)), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: '4123b22bb2412768a68daaedf02585209f605998', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '103adae6937baaa8b9ce6abb8c5b4a262b18a237', name: "x-circle", size: 16, weight: "fill" }))), h("slot", { key: 'e55d3dc0bbe1fc1cb4a46356c6851f508d04e73b', name: "suffix" }), !this.hideControls && (h("button", { key: '37c01ae815d19c01dfb977175cea070486964670', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: '02d8b9b44d3a3193d8036e7ce46be922bc1304e3', name: "plus", size: 16 })))), this.helperText && (h("div", { key: '2f72a4dcdfb96e186534c7ada315dad9dbd8b874', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'a7ad565fedf3799847b884f187ec8c9992ce4c0a', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: '122017cba05350b34dfbf2f9f6f7d14c41550904', class: "co-number-field__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-number-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-option-list/co-option-list.css

@@ -698,22 +698,30 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 
 /* ── Search ──────────────────────────────────────────────── */
 /* Caja 32px: icono lupa centrado en un box de 24px (16px + 4px por lado),
- * gap 6px al texto — offsets exactos del Figma (icono en x=8, texto en x=34). */
+ * gap 6px al texto — offsets exactos del Figma (icono en x=8, texto en x=34).
+ * Overridables por host (paletas con el buscador en la fila de cabecera, sin
+ * caja, o campo relleno suave): `--co-option-list-search-height` (32px),
+ * `-search-margin` (12px 12px 0), `-search-padding` (0 8px 0 4px),
+ * `-search-border` (1px solid border-subtle), `-search-border-focus`
+ * (border-focus), `-search-bg` (transparent), `-search-bg-focus` (= bg),
+ * `-search-radius` (radius-xs) y `-search-caret` (auto). Defaults = Figma. */
 .co-option-list__search {
   display: flex;
   align-items: center;
   gap: var(--co-spacing-sm, 6px);
-  height: 32px;
+  height: var(--co-option-list-search-height, 32px);
   box-sizing: border-box;
-  margin: var(--co-spacing-md, 12px) var(--co-spacing-md, 12px) 0;
-  padding: 0 var(--co-spacing-sm2, 8px) 0 var(--co-spacing-xs, 4px);
-  border: 1px solid var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));
-  border-radius: var(--co-border-radius-xs, 8px);
+  margin: var(--co-option-list-search-margin, var(--co-spacing-md, 12px) var(--co-spacing-md, 12px) 0);
+  padding: var(--co-option-list-search-padding, 0 var(--co-spacing-sm2, 8px) 0 var(--co-spacing-xs, 4px));
+  border: var(--co-option-list-search-border, 1px solid var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08)));
+  border-radius: var(--co-option-list-search-radius, var(--co-border-radius-xs, 8px));
+  background: var(--co-option-list-search-bg, transparent);
   color: var(--co-semantic-text-muted, #888888);
 }
 
 .co-option-list__search:focus-within {
-  border-color: var(--co-semantic-border-focus, rgba(31, 28, 27, 0.25));
+  border-color: var(--co-option-list-search-border-focus, var(--co-semantic-border-focus, rgba(31, 28, 27, 0.25)));
+  background: var(--co-option-list-search-bg-focus, var(--co-option-list-search-bg, transparent));
 }
 
 .co-option-list__search co-icon {
@@ -738,6 +746,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
   line-height: 1;
   color: var(--co-semantic-text-default, #1f1c1b);
+  caret-color: var(--co-option-list-search-caret, auto);
 }
 
 .co-option-list__search-input::placeholder {
@@ -752,13 +761,16 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   max-height: var(--co-option-list-max-height, 280px);
   overflow-y: auto;
   overflow-x: hidden;
-  padding: var(--co-spacing-md, 12px);
+  /* Overridable: `--co-option-list-options-padding` (default 12px) — paletas con cabecera propia que acercan la
+     primera sección al filtro de arriba. */
+  padding: var(--co-option-list-options-padding, var(--co-spacing-md, 12px));
 }
 
 .co-option-list__inner {
   display: flex;
   flex-direction: column;
-  gap: var(--co-spacing-xxs, 2px);
+  /* Overridable: `--co-option-list-gap` (default 2px) — paletas con filas-tarjeta separadas. */
+  gap: var(--co-option-list-gap, var(--co-spacing-xxs, 2px));
   min-width: 0;
 }
 
@@ -781,14 +793,22 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 .co-option-list__option {
   display: flex;
   align-items: center;
-  gap: var(--co-spacing-sm2, 8px);
+  /* Overridable: `--co-option-list-item-gap` (default 8px) — gap entre el leading (tile/icono/avatar) y el texto;
+     paletas con tile tintado lo acercan (Attio: ~5px del tile al rótulo). */
+  gap: var(--co-option-list-item-gap, var(--co-spacing-sm2, 8px));
   min-width: 0;
   min-height: var(--co-option-list-item-min-height, 32px);
   box-sizing: border-box;
   padding: var(--co-option-list-item-padding-y, var(--co-spacing-xs, 4px)) var(--co-spacing-sm2, 8px) var(--co-option-list-item-padding-y, var(--co-spacing-xs, 4px)) var(--co-spacing-xs, 4px);
-  border-radius: var(--co-border-radius-xs, 8px);
+  /* Overridables (paletas con filas-tarjeta, Attio): `--co-option-list-item-radius` (default 8px) y
+     `--co-option-list-item-font-size` (default 14px). */
+  border-radius: var(--co-option-list-item-radius, var(--co-border-radius-xs, 8px));
+  /* Reposo overridable (paletas con filas-tarjeta, Attio): `--co-option-list-item-bg` (default transparent) y
+     `--co-option-list-item-ring` (default none). La activa/seleccionada los pisa. */
+  background: var(--co-option-list-item-bg, transparent);
+  box-shadow: var(--co-option-list-item-ring, none);
   cursor: pointer;
-  font-size: var(--co-font-size-14, 14px);
+  font-size: var(--co-option-list-item-font-size, var(--co-font-size-14, 14px));
   letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
   color: var(--co-semantic-text-default, #1f1c1b);
   transition:
@@ -804,7 +824,8 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 }
 
 .co-option-list__option--active {
-  background: var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04));
+  background: var(--co-option-list-active-bg, var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04)));
+  box-shadow: var(--co-option-list-active-ring, none);
 }
 
 /* Seleccionado = mismo gris-100 del Figma; el affordance (X/check) distingue. */
@@ -828,6 +849,24 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   margin: 0 var(--co-spacing-xs, 4px);
 }
 
+/* Tile tintado (item.iconTint): 22px, mismo lenguaje que los tiles de categoría de los hosts.
+ * Overridables (paletas con tiles más presentes, Attio): `--co-option-list-icon-tile-size` (22px),
+ * `--co-option-list-icon-tile-radius` (4px), `--co-option-list-icon-tile-mix` (% del tinte en el fondo, 12%) y
+ * `--co-option-list-icon-tile-ring-mix` (% del tinte en el hairline interior, 0% = sin hairline). */
+.co-option-list__icon-tile {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--co-option-list-icon-tile-size, 22px);
+  height: var(--co-option-list-icon-tile-size, 22px);
+  margin: 0 var(--co-spacing-xxs, 2px);
+  border-radius: var(--co-option-list-icon-tile-radius, var(--co-border-radius-xxs, 4px));
+  background: color-mix(in srgb, var(--co-option-list-icon-tint) var(--co-option-list-icon-tile-mix, 12%), transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--co-option-list-icon-tint) var(--co-option-list-icon-tile-ring-mix, 0%), transparent);
+  color: var(--co-option-list-icon-tint);
+}
+
 .co-option-list__dot {
   flex-shrink: 0;
   width: 10px;
@@ -852,7 +891,8 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 }
 
 .co-option-list__label {
-  font-weight: 400;
+  /* Overridable: `--co-option-list-label-weight` (default 400) — paletas de título solo con rótulo medium. */
+  font-weight: var(--co-option-list-label-weight, 400);
   line-height: 1;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -984,14 +1024,17 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 /* ── Group headers ───────────────────────────────────────── */
 /* Figma: Geist Mono 10px uppercase, tracking 0.8px, color default. */
 .co-option-list__group {
-  padding: var(--co-spacing-sm2, 8px) var(--co-spacing-xs, 4px) var(--co-spacing-xs, 4px);
-  font-family: var(--co-font-family-mono, 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace);
-  font-size: var(--co-font-size-10, 10px);
-  font-weight: 400;
-  text-transform: uppercase;
-  letter-spacing: var(--co-font-letter-spacing-overline, 0.08em);
+  /* Overridables: `--co-option-list-group-padding-top` / `-bottom` (paletas con secciones aireadas: 16/6). */
+  padding: var(--co-option-list-group-padding-top, var(--co-spacing-sm2, 8px)) var(--co-spacing-xs, 4px) var(--co-option-list-group-padding-bottom, var(--co-spacing-xs, 4px));
+  /* Overridables de tipografía (paletas con rótulos en sentence case): `--co-option-list-group-font-family`,
+     `-font-size`, `-font-weight`, `-text-transform`, `-letter-spacing`, `-color`. Default = Figma. */
+  font-family: var(--co-option-list-group-font-family, var(--co-font-family-mono, 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace));
+  font-size: var(--co-option-list-group-font-size, var(--co-font-size-10, 10px));
+  font-weight: var(--co-option-list-group-font-weight, 400);
+  text-transform: var(--co-option-list-group-text-transform, uppercase);
+  letter-spacing: var(--co-option-list-group-letter-spacing, var(--co-font-letter-spacing-overline, 0.08em));
   line-height: 1.1;
-  color: var(--co-semantic-text-default, #1f1c1b);
+  color: var(--co-option-list-group-color, var(--co-semantic-text-default, #1f1c1b));
 }
 
 /* ── Clear row ───────────────────────────────────────────── */