@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

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

@@ -1,16 +1,29 @@
 import { h } from "@stencil/core";
 import { afterEventFor } from "../co-overlay/overlayAfterClose";
 import { slotHasContent } from "../../utils/slotContent";
+import { clampDragOffset, dragOffsetOf, isInteractiveDragTarget, } from "../../utils/dragMove";
 /**
+ * Ventana modal con header (título, descripción, ✕), cuerpo y footer de
+ * acciones, sobre un scrim que bloquea la página (`co-overlay`). Es
+ * controlada: la ✕, el scrim y Escape solo emiten `coClose`; quien la usa pone
+ * `open` en `false`. Wrapper Vue: `CoModal` de `@prolibu-suite/cobalt-vue`.
+ *
  * @slot        - Modal body content
  * @slot header-leading - Control before the heading (e.g. a back arrow on a
  *                        second screen of the same modal)
  * @slot header-actions - Controls at the right end of the header (e.g. a settings
  *                        icon-button), before the close button
  * @slot footer - Footer with action buttons
- * @part modal | header | header-text | heading | description | body | footer -
- *       layout/typography hooks for a consumer that must match a specific spec
- *       (paddings, heading weight); colors stay on semantic tokens
+ *
+ * Los parts son ganchos de layout y tipografía (paddings, peso del título) para
+ * ajustar a una spec puntual; los colores siguen en tokens semánticos.
+ * @part modal - Panel del modal (superficie, radio y sombra).
+ * @part header - Header completo; con `movable` es la zona de arrastre.
+ * @part header-text - Contenedor del título y la descripción.
+ * @part heading - Título (`heading`).
+ * @part description - Descripción bajo el título.
+ * @part body - Cuerpo (slot por defecto).
+ * @part footer - Footer de acciones (slot `footer`).
  */
 export class CoModal {
     constructor() {
@@ -33,7 +46,8 @@ export class CoModal {
          */
         this.closeOnEscape = false;
         /**
-         * Modal width: sm (400px), md (540px), lg (680px),
+         * Modal width: xs (369px, vía `--co-modal-width` — 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 +60,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. `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` = 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. `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. `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, 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. 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 +125,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 +143,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 +228,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 +482,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 paneles anclados como\n\"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 +537,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. `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` = 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. `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. `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, as\u00ED que,\nigual 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. 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 +674,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.css

@@ -1,3 +1,10 @@
+/**
+ * @prop --co-navbar-padding-x: Padding horizontal en las tallas `sm` y `md`.
+ * @prop --co-navbar-padding-x-start: Padding izquierdo en la talla `lg` (default 12px).
+ * @prop --co-navbar-padding-x-end: Padding derecho en la talla `lg` (default 24px).
+ * @prop --co-navbar-bg: Fondo de la barra; cada `variant` lo asigna en el elemento interno, así que se sobrescribe vía `co-navbar::part(navbar)`.
+ * @prop --co-navbar-color: Color de texto de la barra; igual que el fondo, vía `::part(navbar)`.
+ */
 :host {
   display: block;
 }

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

@@ -2,7 +2,9 @@ import { h } from "@stencil/core";
 /**
  * Horizontal toolbar container. Place any content inside the default slot.
  * Works like Quasar's q-toolbar — a styled flex row.
+ * Wrapper Vue: `CoNavbar` de `@prolibu-suite/cobalt-vue`.
  * @slot - Content (buttons, titles, icons, etc.)
+ * @part navbar - La barra.
  */
 export class CoNavbar {
     constructor() {
@@ -14,12 +16,12 @@ export class CoNavbar {
         this.rounded = false;
     }
     render() {
-        return (h("div", { key: '9899b395fdf793bf9b7e47509b81eb559aac0b56', class: {
+        return (h("div", { key: '68c78b33434a32372eef9763b0c11c9a185f6ef8', 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: 'a9d05ff60065f85dc24e941478a18fa40466143f' })));
     }
     static get is() { return "co-navbar"; }
     static get encapsulation() { return "shadow"; }