@prolibu-suite/cobalt-core 0.10.4 → 0.11.0

package/dist/esm/co-modal.entry.js

@@ -1,8 +1,104 @@
-import { r as registerInstance, c as createEvent, h } from './index-DH5lfRNj.js';
+import { r as registerInstance, c as createEvent, h } from './index-DJkaRtbb.js';
 import { a as afterEventFor } from './overlayAfterClose-Ch1jfwZ2.js';
 import { s as slotHasContent } from './slotContent-CBX_oabB.js';
 
-const coModalCss = () => `.co-sq-elevation{border-radius:var(--co-sq-r);corner-shape:squircle;box-shadow:var(--co-sq-shadow)}.co-sq-clip{overflow:hidden;border-radius:var(--co-sq-r);corner-shape:squircle}@supports not (corner-shape: squircle){.co-sq-elevation{box-shadow:none}.co-sq-elevation-fallback{filter:var(--co-sq-drop-shadow)}.co-sq-clip{border-radius:0;--co-sq-tl:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 0L95 0L92.5 0L90 0L87.5 0.01L85 0.01L82.5 0.02L80 0.04L77.5 0.06L75 0.1L72.5 0.14L70 0.2L67.5 0.28L65 0.38L62.5 0.5L60 0.65L57.5 0.83L55 1.04L52.5 1.3L50 1.6L47.5 1.96L45 2.37L42.5 2.85L40 3.41L37.5 4.05L35 4.8L32.5 5.65L30 6.63L27.5 7.77L25 9.07L22.5 10.58L20 12.34L17.5 14.41L15 16.85L12.5 19.79L10 23.42L7.5 28.06L5 34.37L2.5 44.29L0 100L100 100Z%27 fill=%27%23fff%27/></svg>");--co-sq-tr:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 0L5 0L7.5 0L10 0L12.5 0.01L15 0.01L17.5 0.02L20 0.04L22.5 0.06L25 0.1L27.5 0.14L30 0.2L32.5 0.28L35 0.38L37.5 0.5L40 0.65L42.5 0.83L45 1.04L47.5 1.3L50 1.6L52.5 1.96L55 2.37L57.5 2.85L60 3.41L62.5 4.05L65 4.8L67.5 5.65L70 6.63L72.5 7.77L75 9.07L77.5 10.58L80 12.34L82.5 14.41L85 16.85L87.5 19.79L90 23.42L92.5 28.06L95 34.37L97.5 44.29L100 100L0 100Z%27 fill=%27%23fff%27/></svg>");--co-sq-bl:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 55.71L5 65.63L7.5 71.94L10 76.58L12.5 80.21L15 83.15L17.5 85.59L20 87.66L22.5 89.42L25 90.93L27.5 92.23L30 93.37L32.5 94.35L35 95.2L37.5 95.95L40 96.59L42.5 97.15L45 97.63L47.5 98.04L50 98.4L52.5 98.7L55 98.96L57.5 99.17L60 99.35L62.5 99.5L65 99.62L67.5 99.72L70 99.8L72.5 99.86L75 99.9L77.5 99.94L80 99.96L82.5 99.98L85 99.99L87.5 99.99L90 100L92.5 100L95 100L97.5 100L100 100L100 0Z%27 fill=%27%23fff%27/></svg>");--co-sq-br:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 55.71L95 65.63L92.5 71.94L90 76.58L87.5 80.21L85 83.15L82.5 85.59L80 87.66L77.5 89.42L75 90.93L72.5 92.23L70 93.37L67.5 94.35L65 95.2L62.5 95.95L60 96.59L57.5 97.15L55 97.63L52.5 98.04L50 98.4L47.5 98.7L45 98.96L42.5 99.17L40 99.35L37.5 99.5L35 99.62L32.5 99.72L30 99.8L27.5 99.86L25 99.9L22.5 99.94L20 99.96L17.5 99.98L15 99.99L12.5 99.99L10 100L7.5 100L5 100L2.5 100L0 100L0 0Z%27 fill=%27%23fff%27/></svg>");-webkit-mask:var(--co-sq-tl) top left / var(--co-sq-r) var(--co-sq-r) no-repeat,       var(--co-sq-tr) top right / var(--co-sq-r) var(--co-sq-r) no-repeat,       var(--co-sq-bl) bottom left / var(--co-sq-r) var(--co-sq-r) no-repeat,       var(--co-sq-br) bottom right / var(--co-sq-r) var(--co-sq-r) no-repeat,       linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-sq-r) + 2px) no-repeat,       linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-sq-r) + 2px) 100% no-repeat;mask:var(--co-sq-tl) top left / var(--co-sq-r) var(--co-sq-r) no-repeat,       var(--co-sq-tr) top right / var(--co-sq-r) var(--co-sq-r) no-repeat,       var(--co-sq-bl) bottom left / var(--co-sq-r) var(--co-sq-r) no-repeat,       var(--co-sq-br) bottom right / var(--co-sq-r) var(--co-sq-r) no-repeat,       linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-sq-r) + 2px) no-repeat,       linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-sq-r) + 2px) 100% no-repeat}}:host{display:contents;--co-overlay-blur:8px;--co-overlay-bg:rgba(31, 28, 27, 0.35)}.co-modal__frame{display:flex;contain:layout;--co-sq-drop-shadow:drop-shadow(0 1px 2px rgba(31, 28, 27, 0.06)) drop-shadow(0 14px 34px rgba(31, 28, 27, 0.16))}.co-modal{display:flex;flex-direction:column;background:var(--co-semantic-surface-secondary);--co-modal-r:var(--co-border-radius-xl);--co-sq-r:var(--co-modal-r);--co-sq-shadow:0 1px 4px rgba(31, 28, 27, 0.06), 0 14px 68px rgba(31, 28, 27, 0.16);max-width:540px;width:90vw;max-height:80vh;font-family:var(--co-font-family-primary);transform:scale(0.96);opacity:0;transition:transform var(--co-motion-duration-fast) var(--co-motion-ease-in), opacity var(--co-motion-duration-fast) var(--co-motion-ease-in)}.co-modal--sm{max-width:400px}.co-modal--lg{max-width:680px}.co-modal--full{max-width:min(1400px, 95vw);width:95vw;height:92vh;max-height:92vh}.co-modal--full .co-modal__body{flex:1;min-height:0;padding:0;overflow:hidden}.co-modal--open{transform:scale(1);opacity:1;transition:transform var(--co-motion-duration-base) var(--co-motion-ease-out), opacity var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-modal__header{display:flex;align-items:flex-start;gap:var(--co-spacing-md);padding:var(--co-spacing-xl) var(--co-spacing-xl) var(--co-spacing-md)}.co-modal__header-text{display:flex;flex-direction:column;gap:var(--co-spacing-sm);flex:1}.co-modal__heading{margin:0;font-size:var(--co-font-size-20);font-weight:700;color:var(--co-semantic-text-default);line-height:1.3}.co-modal__description{margin:0;font-size:var(--co-font-size-14);color:var(--co-semantic-text-secondary);line-height:1.5}.co-modal__close{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs);margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-sm);flex-shrink:0;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-modal__close:hover{background:var(--co-semantic-surface-hover)}.co-modal__body{padding:var(--co-spacing-lg) var(--co-spacing-xl);overflow-y:auto;overscroll-behavior:contain;font-size:var(--co-font-size-14);color:var(--co-semantic-text-secondary);line-height:1.6;border-top:1px solid var(--co-semantic-border-default)}.co-modal__body:empty{display:none}.co-modal__footer{display:flex;justify-content:flex-end;gap:var(--co-spacing-md);padding:var(--co-spacing-lg) var(--co-spacing-xl) var(--co-spacing-xl);border-top:1px solid var(--co-semantic-border-default);--co-button-radius:var(--co-border-radius-xs)}.co-modal__footer--empty{display:none}.co-modal--no-dividers .co-modal__footer{border-top:none}.co-modal--no-header-divider .co-modal__body{border-top:none;padding-top:0}`;
+/**
+ * Núcleo puro de "arrastrar para mover un panel flotante" (Task D1).
+ *
+ * Solo aritmética: el desplazamiento acumulado del gesto y su acotado al
+ * viewport. Quien lo use aporta la cáscara (pointer events, escritura del
+ * estilo) — así el contrato se testea sin layout, que jsdom no calcula.
+ *
+ * El editor (Design Studio) tiene su propio gemelo de estas funciones en
+ * `lib/dragOffset.ts`: son dos paquetes sin dependencia entre sí y el núcleo
+ * son ~20 líneas; si alguna regla cambia, hay que cambiar las dos.
+ */
+/** Px del panel que SIEMPRE quedan dentro del viewport (un panel más chico no exige más de lo que mide). */
+const DRAG_MIN_VISIBLE = 48;
+/**
+ * Desplazamiento del gesto: lo ya acumulado (`base`) más lo que se movió el
+ * puntero desde que empezó. `base` existe porque el gesto siguiente arranca
+ * donde quedó el anterior.
+ */
+function dragOffsetOf(base, start, current) {
+    return { x: base.x + current.x - start.x, y: base.y + current.y - start.y };
+}
+/** Acota `value` a [min, max] con el 0 SIEMPRE dentro del rango — ver `clampDragOffset`. */
+function clampAxis(value, min, max) {
+    const lo = Math.min(min, 0);
+    const hi = Math.max(max, 0);
+    return Math.min(Math.max(value, lo), hi);
+}
+/**
+ * Acota el desplazamiento para que el panel no se pierda de pantalla:
+ *
+ * - Horizontal: siempre quedan `minVisible` px del panel dentro del viewport
+ *   (por cualquiera de los dos lados).
+ * - Vertical: el borde SUPERIOR nunca sube del borde del viewport (el header
+ *   —la zona de agarre— queda siempre alcanzable) y por abajo rige el mismo
+ *   `minVisible`.
+ *
+ * El rango incluye el 0 por construcción: un panel que ya nace fuera (más alto
+ * que el viewport) no debe SALTAR al agarrarlo; solo no se puede empeorar.
+ *
+ * `rect` es la caja del panel medida UNA vez, al empezar el gesto: medir en
+ * cada `pointermove` fuerza layout síncrono en cada frame.
+ */
+function clampDragOffset(offset, rect, viewport, minVisible = DRAG_MIN_VISIBLE) {
+    const visibleX = Math.min(minVisible, rect.width);
+    const visibleY = Math.min(minVisible, rect.height);
+    return {
+        x: clampAxis(offset.x, visibleX - rect.left - rect.width, viewport.width - visibleX - rect.left),
+        y: clampAxis(offset.y, -rect.top, viewport.height - visibleY - rect.top),
+    };
+}
+/**
+ * Controles que NO arrastran aunque vivan en la zona de agarre: el ✕, los
+ * botones/enlaces y los campos. Lista gemela de la del editor
+ * (`apps/web/src/lib/dragOffset.ts`): las dos se mantienen en sincronía.
+ */
+const INTERACTIVE_SELECTOR = [
+    'button',
+    'a[href]',
+    'input',
+    'select',
+    'textarea',
+    '[role="button"]',
+    '[role="checkbox"]',
+    '[role="radio"]',
+    '[role="switch"]',
+    '[role="combobox"]',
+    '[role="option"]',
+    '[role="menuitem"]',
+    '[role="slider"]',
+    '[role="tab"]',
+    '[role="separator"]',
+    '[data-no-drag]',
+].join(', ');
+/**
+ * `true` si el evento nació en un control interactivo DENTRO de la zona de
+ * agarre. Recorre el `composedPath` (no `closest`) porque el origen puede venir
+ * de otro shadow root — el `<svg>` dentro del ✕, un control del consumidor
+ * proyectado en un slot.
+ *
+ * `handle` acota el recorrido: se corta al llegar al asa. Sin ese tope, un
+ * flotante montado dentro de un `<button>` o de un `[role=…]` del consumidor
+ * dejaba de arrastrar entero y sin diagnóstico (el ancestro matcheaba).
+ */
+function isInteractiveDragTarget(event, handle) {
+    const path = typeof event.composedPath === 'function' ? event.composedPath() : [event.target];
+    for (const node of path) {
+        if (handle && node === handle)
+            return false;
+        if (node && typeof node.matches === 'function') {
+            if (node.matches(INTERACTIVE_SELECTOR))
+                return true;
+        }
+    }
+    return false;
+}
+
+const coModalCss = () => `.co-sq-elevation{border-radius:var(--co-sq-r);corner-shape:squircle;box-shadow:var(--co-sq-shadow)}.co-sq-clip{overflow:hidden;border-radius:var(--co-sq-r);corner-shape:squircle}@supports not (corner-shape: squircle){.co-sq-elevation{box-shadow:none}.co-sq-elevation-fallback{filter:var(--co-sq-drop-shadow)}.co-sq-clip{border-radius:0;--co-sq-tl:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 0L95 0L92.5 0L90 0L87.5 0.01L85 0.01L82.5 0.02L80 0.04L77.5 0.06L75 0.1L72.5 0.14L70 0.2L67.5 0.28L65 0.38L62.5 0.5L60 0.65L57.5 0.83L55 1.04L52.5 1.3L50 1.6L47.5 1.96L45 2.37L42.5 2.85L40 3.41L37.5 4.05L35 4.8L32.5 5.65L30 6.63L27.5 7.77L25 9.07L22.5 10.58L20 12.34L17.5 14.41L15 16.85L12.5 19.79L10 23.42L7.5 28.06L5 34.37L2.5 44.29L0 100L100 100Z%27 fill=%27%23fff%27/></svg>");--co-sq-tr:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 0L5 0L7.5 0L10 0L12.5 0.01L15 0.01L17.5 0.02L20 0.04L22.5 0.06L25 0.1L27.5 0.14L30 0.2L32.5 0.28L35 0.38L37.5 0.5L40 0.65L42.5 0.83L45 1.04L47.5 1.3L50 1.6L52.5 1.96L55 2.37L57.5 2.85L60 3.41L62.5 4.05L65 4.8L67.5 5.65L70 6.63L72.5 7.77L75 9.07L77.5 10.58L80 12.34L82.5 14.41L85 16.85L87.5 19.79L90 23.42L92.5 28.06L95 34.37L97.5 44.29L100 100L0 100Z%27 fill=%27%23fff%27/></svg>");--co-sq-bl:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 55.71L5 65.63L7.5 71.94L10 76.58L12.5 80.21L15 83.15L17.5 85.59L20 87.66L22.5 89.42L25 90.93L27.5 92.23L30 93.37L32.5 94.35L35 95.2L37.5 95.95L40 96.59L42.5 97.15L45 97.63L47.5 98.04L50 98.4L52.5 98.7L55 98.96L57.5 99.17L60 99.35L62.5 99.5L65 99.62L67.5 99.72L70 99.8L72.5 99.86L75 99.9L77.5 99.94L80 99.96L82.5 99.98L85 99.99L87.5 99.99L90 100L92.5 100L95 100L97.5 100L100 100L100 0Z%27 fill=%27%23fff%27/></svg>");--co-sq-br:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 55.71L95 65.63L92.5 71.94L90 76.58L87.5 80.21L85 83.15L82.5 85.59L80 87.66L77.5 89.42L75 90.93L72.5 92.23L70 93.37L67.5 94.35L65 95.2L62.5 95.95L60 96.59L57.5 97.15L55 97.63L52.5 98.04L50 98.4L47.5 98.7L45 98.96L42.5 99.17L40 99.35L37.5 99.5L35 99.62L32.5 99.72L30 99.8L27.5 99.86L25 99.9L22.5 99.94L20 99.96L17.5 99.98L15 99.99L12.5 99.99L10 100L7.5 100L5 100L2.5 100L0 100L0 0Z%27 fill=%27%23fff%27/></svg>");-webkit-mask:var(--co-sq-tl) top left / var(--co-sq-r) var(--co-sq-r) no-repeat,       var(--co-sq-tr) top right / var(--co-sq-r) var(--co-sq-r) no-repeat,       var(--co-sq-bl) bottom left / var(--co-sq-r) var(--co-sq-r) no-repeat,       var(--co-sq-br) bottom right / var(--co-sq-r) var(--co-sq-r) no-repeat,       linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-sq-r) + 2px) no-repeat,       linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-sq-r) + 2px) 100% no-repeat;mask:var(--co-sq-tl) top left / var(--co-sq-r) var(--co-sq-r) no-repeat,       var(--co-sq-tr) top right / var(--co-sq-r) var(--co-sq-r) no-repeat,       var(--co-sq-bl) bottom left / var(--co-sq-r) var(--co-sq-r) no-repeat,       var(--co-sq-br) bottom right / var(--co-sq-r) var(--co-sq-r) no-repeat,       linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-sq-r) + 2px) no-repeat,       linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-sq-r) + 2px) 100% no-repeat}}:host{display:contents;--co-overlay-blur:8px;--co-overlay-bg:rgba(31, 28, 27, 0.35)}.co-modal__frame{display:flex;contain:layout;--co-sq-drop-shadow:drop-shadow(0 1px 2px rgba(31, 28, 27, 0.06)) drop-shadow(0 14px 34px rgba(31, 28, 27, 0.16))}.co-modal{display:flex;flex-direction:column;background:var(--co-semantic-surface-secondary);--co-modal-r:var(--co-border-radius-xl);--co-sq-r:var(--co-modal-r);--co-sq-shadow:0 1px 4px rgba(31, 28, 27, 0.06), 0 14px 68px rgba(31, 28, 27, 0.16);max-width:540px;width:90vw;max-height:80vh;font-family:var(--co-font-family-primary);transform:scale(0.96);opacity:0;transition:transform var(--co-motion-duration-fast) var(--co-motion-ease-in), opacity var(--co-motion-duration-fast) var(--co-motion-ease-in)}.co-modal--sm{max-width:400px}.co-modal--lg{max-width:680px}.co-modal--full{max-width:min(1400px, 95vw);width:95vw;height:92vh;max-height:92vh}.co-modal--full .co-modal__body{flex:1;min-height:0;padding:0;overflow:hidden}.co-modal--open{transform:scale(1);opacity:1;transition:transform var(--co-motion-duration-base) var(--co-motion-ease-out), opacity var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-modal__header{display:flex;align-items:flex-start;gap:var(--co-spacing-md);padding:var(--co-spacing-xl) var(--co-spacing-xl) var(--co-spacing-md)}.co-modal__header-text{display:flex;flex-direction:column;gap:var(--co-spacing-sm);flex:1}.co-modal__heading{margin:0;font-size:var(--co-font-size-20);font-weight:700;color:var(--co-semantic-text-default);line-height:1.3}.co-modal__description{margin:0;font-size:var(--co-font-size-14);color:var(--co-semantic-text-secondary);line-height:1.5}.co-modal__close{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs);margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-sm);flex-shrink:0;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-modal__close:hover{background:var(--co-semantic-surface-hover)}.co-modal__body{padding:var(--co-spacing-lg) var(--co-spacing-xl);overflow-y:auto;overscroll-behavior:contain;font-size:var(--co-font-size-14);color:var(--co-semantic-text-secondary);line-height:1.6;border-top:1px solid var(--co-semantic-border-default)}.co-modal__body:empty{display:none}.co-modal__footer{display:flex;justify-content:flex-end;gap:var(--co-spacing-md);padding:var(--co-spacing-lg) var(--co-spacing-xl) var(--co-spacing-xl);border-top:1px solid var(--co-semantic-border-default);--co-button-radius:var(--co-border-radius-xs)}.co-modal__footer--empty{display:none}.co-modal--no-dividers .co-modal__footer{border-top:none}.co-modal--no-header-divider .co-modal__body{border-top:none;padding-top:0}.co-modal--xs{width:var(--co-modal-width, 369px);max-width:var(--co-modal-width, 369px)}.co-modal--panel{border-radius:var(--co-border-radius-sm);border:1px solid var(--co-semantic-border-subtle);box-shadow:var(--co-shadow-lg)}.co-modal--panel .co-modal__header{padding:16px 20px 16px 24px;align-items:center;border-bottom:1px solid var(--co-semantic-border-subtle)}.co-modal--panel .co-modal__heading{font-size:var(--co-font-size-20);font-weight:500;line-height:1.25;letter-spacing:var(--co-font-letter-spacing-body)}.co-modal--panel .co-modal__close{width:32px;height:32px;padding:0;border-radius:var(--co-border-radius-full);color:var(--co-semantic-text-default)}.co-modal--panel .co-modal__body{padding:24px;border-top:none}.co-modal--panel .co-modal__footer{padding:12px 24px;gap:12px;border-top:1px solid var(--co-semantic-border-subtle)}.co-modal__frame--standalone{position:fixed;inset:0;z-index:var(--co-modal-z-index, 1000);display:flex;align-items:center;justify-content:center;pointer-events:none}.co-modal__frame--standalone .co-modal--open{pointer-events:auto}.co-modal__frame--standalone .co-modal:not(.co-modal--open){visibility:hidden;transition:transform var(--co-motion-duration-fast) var(--co-motion-ease-in), opacity var(--co-motion-duration-fast) var(--co-motion-ease-in), visibility 0s linear var(--co-motion-duration-fast)}.co-modal--dialog{border-radius:var(--co-border-radius-lg)}.co-modal--dialog .co-modal__header{padding:var(--co-spacing-3xl) var(--co-spacing-3xl) 0;align-items:flex-start;gap:var(--co-spacing-lg)}.co-modal--dialog .co-modal__header-text{gap:var(--co-spacing-lg)}.co-modal--dialog .co-modal__heading{font-size:var(--co-font-size-22);font-weight:500;line-height:1.25;letter-spacing:var(--co-font-letter-spacing-body)}.co-modal--dialog .co-modal__description{font-size:var(--co-font-size-16);line-height:1.5;letter-spacing:var(--co-font-letter-spacing-body)}.co-modal--dialog .co-modal__close{width:32px;height:32px;padding:0;margin:-3px -6px 0 0;border-radius:var(--co-border-radius-full);color:var(--co-semantic-text-default)}.co-modal--dialog .co-modal__body{padding:var(--co-spacing-lg) var(--co-spacing-3xl) var(--co-spacing-3xl);border-top:none;font-size:var(--co-font-size-16);line-height:1.5;letter-spacing:var(--co-font-letter-spacing-body)}.co-modal--dialog.co-modal--full .co-modal__body{padding:0}.co-modal--dialog .co-modal__footer{padding:var(--co-spacing-lg) var(--co-spacing-2xl);gap:var(--co-spacing-md);border-top-color:var(--co-semantic-border-subtle);--co-button-radius:var(--co-border-radius-sm)}.co-modal--movable{translate:var(--co-modal-translate, none)}.co-modal__header--movable{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}.co-modal__header--movable .co-modal__close{cursor:pointer}.co-modal__header--dragging{cursor:grabbing}`;
 
 const CoModal = class {
     constructor(hostRef) {
@@ -29,7 +125,8 @@ const CoModal = class {
          */
         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
@@ -42,6 +139,59 @@ const CoModal = class {
         /** 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) => {
@@ -54,6 +204,12 @@ const CoModal = class {
         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();
         };
@@ -66,6 +222,84 @@ const CoModal = class {
             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)
@@ -73,19 +307,128 @@ const CoModal = class {
         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 watchers() { return {
+        "open": [{
+                "resetPositionOnOpen": 0
+            }]
+    }; }
 };
 CoModal.style = coModalCss();
 

package/dist/esm/co-navbar.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-DH5lfRNj.js';
+import { r as registerInstance, h } from './index-DJkaRtbb.js';
 
 const coNavbarCss = () => `:host{display:block}.co-navbar{display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--co-font-family-primary);box-sizing:border-box;background:var(--co-navbar-bg);color:var(--co-navbar-color)}.co-navbar--default{--co-navbar-bg:transparent}.co-navbar--filled{--co-navbar-bg:var(--co-semantic-surface-primary, #1f1c1b);--co-navbar-color:var(--co-semantic-on-primary, #fff)}.co-navbar--bordered{--co-navbar-bg:var(--co-semantic-surface-page, #fff);--co-navbar-color:inherit;border-bottom:1px solid var(--co-semantic-border-subtle, rgba(31,28,27,0.08))}.co-navbar--dark{--co-navbar-bg:var(--co-theme-navbar-bg, var(--co-color-base-negro, #1F1C1B));--co-navbar-color:var(--co-theme-on-navbar, #fff);--co-icon-button-bg:var(--co-theme-on-navbar-surface, var(--co-color-opacity-blanco-16, rgba(255,255,255,0.16)));--co-icon-button-color:var(--co-theme-on-navbar, #fff);--co-icon-button-border:transparent}.co-navbar--rounded{border-radius:var(--co-border-radius-sm, 12px);overflow:hidden}.co-navbar--sm{min-height:40px;padding:0 var(--co-navbar-padding-x, var(--co-spacing-md, 12px));gap:var(--co-spacing-sm2, 8px);font-size:var(--co-font-size-12, 12px)}.co-navbar--md{min-height:48px;padding:0 var(--co-navbar-padding-x, var(--co-spacing-lg, 16px));gap:var(--co-spacing-md, 12px);font-size:var(--co-font-size-14, 14px)}.co-navbar--lg{min-height:56px;padding:0     var(--co-navbar-padding-x-end, var(--co-spacing-2xl, 24px))     0     var(--co-navbar-padding-x-start, var(--co-spacing-md, 12px));gap:var(--co-spacing-sm2, 8px);font-size:var(--co-font-size-14, 14px)}::slotted([slot-spacer]),::slotted(.co-spacer){flex:1}`;
 
@@ -13,12 +13,12 @@ const CoNavbar = class {
         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' })));
     }
 };
 CoNavbar.style = coNavbarCss();

package/dist/esm/co-number-field.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.js';
-import { R as RequiredMark } from './requiredMark-BCJUuZvC.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DJkaRtbb.js';
+import { R as RequiredMark } from './requiredMark-D5C5NzOE.js';
 
 /**
  * Texto de montos para co-number-field `format="amount"`.
@@ -424,18 +424,18 @@ const CoNumberField = class {
         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)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/co-overlay.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DJkaRtbb.js';
 import { a as afterEventFor } from './overlayAfterClose-Ch1jfwZ2.js';
 
 /**
@@ -125,7 +125,9 @@ const CoOverlay = class {
         /** Whether THIS instance currently holds a scroll lock (prevents double-count). */
         this.hasLock = false;
         // Origen de la pulsación en curso (ver isBackdropDismiss): un drag que
-        // empieza dentro del contenido y suelta en el fondo NO es un cierre.
+        // empieza dentro del contenido y suelta en el fondo NO es un cierre —el
+        // navegador despacha ese `click` al ancestro común, el propio scrim—, ni
+        // uno que empieza en el fondo y suelta en el contenido (Tarea QA 94).
         this.pressDownTarget = null;
         this.pressUpTarget = null;
         this.handlePointerDown = (e) => {
@@ -137,9 +139,11 @@ const CoOverlay = class {
             var _a;
             this.pressUpTarget = (_a = e.composedPath()[0]) !== null && _a !== void 0 ? _a : null;
         };
+        // Sólo cierra una pulsación completa sobre el scrim mismo, no sobre el contenido.
         this.handleClick = (e) => {
             var _a;
-            const dismiss = isBackdropDismiss(this.pressDownTarget, this.pressUpTarget, (_a = e.composedPath()[0]) !== null && _a !== void 0 ? _a : null);
+            const clickTarget = (_a = e.composedPath()[0]) !== null && _a !== void 0 ? _a : null;
+            const dismiss = clickTarget === this.overlayEl && isBackdropDismiss(this.pressDownTarget, this.pressUpTarget, clickTarget);
             this.pressDownTarget = null;
             this.pressUpTarget = null;
             if (dismiss)
@@ -280,7 +284,7 @@ const CoOverlay = class {
         focusables[nextIndex].focus();
     }
     render() {
-        return (h("div", { key: '74051ac6a35eff0b9c873bafe2141b0a9486f83e', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", popover: "manual", tabindex: this.trapFocus ? -1 : undefined, ref: (el) => (this.overlayEl = el), onPointerDown: this.handlePointerDown, onPointerUp: this.handlePointerUp, onClick: this.handleClick, onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: '8ed7f244bfe88f3d38b9e1f6720b0a191529f6f1' })));
+        return (h("div", { key: '842f23e0829dcb9138f3fd35c86471035949517c', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", popover: "manual", tabindex: this.trapFocus ? -1 : undefined, ref: (el) => (this.overlayEl = el), onPointerDown: this.handlePointerDown, onPointerUp: this.handlePointerUp, onClick: this.handleClick, onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: '645b336ce50938672fc09a27a15ef314250beaf2' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/co-page-header.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-DH5lfRNj.js';
+import { r as registerInstance, h } from './index-DJkaRtbb.js';
 
 const coPageHeaderCss = () => `:host{display:block}.co-page-header{display:flex;align-items:center;justify-content:space-between;padding:var(--co-spacing-lg) var(--co-spacing-xl);font-family:var(--co-font-family-primary);border-bottom:1px solid var(--co-semantic-border-subtle);background:var(--co-semantic-surface-page);min-height:72px;box-sizing:border-box}.co-page-header__left{display:flex;align-items:center;gap:var(--co-spacing-md)}.co-page-header__icon{display:flex;color:var(--co-semantic-text-muted)}.co-page-header__title{font-size:var(--co-font-size-18);font-weight:600;color:var(--co-semantic-text-default)}.co-page-header__actions{display:flex;align-items:center;gap:var(--co-spacing-md)}.co-page-header__actions:empty{display:none}`;
 
@@ -7,7 +7,7 @@ const CoPageHeader = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: '0f064f7e659103d8f679f23242492a5e9a869a88', class: "co-page-header", part: "page-header" }, h("div", { key: '4ccd5682d2d6872a5fa771b2779a8f7e0ab8b6f7', class: "co-page-header__left" }, this.icon && (h("span", { key: '10bc9aa126f8b9932b1e4247d7c3c3c04d89c425', class: "co-page-header__icon" }, h("co-icon", { key: '42f2cda7ec8ee4e0e4a51069606492647d13f690', name: this.icon, size: 24 }))), h("span", { key: '368633ff1b213286d5f6bdf5716e3acb1cbe2f71', class: "co-page-header__title" }, h("slot", { key: 'c74f2dcde7cfc0c0384f6a10a9f069a9ff94f78d' }, this.heading))), h("div", { key: '6666c103a2e6e826837091658ce1e4e4b1704215', class: "co-page-header__actions" }, h("slot", { key: '7df47ea333491b960bc1faff7fd0b6431aba56e5', name: "actions" }))));
+        return (h("div", { key: 'e3a67a921d1a5c5ac8a91d1bbf76efc5d1dc6e54', class: "co-page-header", part: "page-header" }, h("div", { key: 'c1487cedf194477595bb176c381d5e839a70571e', class: "co-page-header__left" }, this.icon && (h("span", { key: 'd07f12f586c1e42fb85a06c8a7cc634778a939e5', class: "co-page-header__icon" }, h("co-icon", { key: '0224fac27acc073beccd0d59b39e3714732b3fcc', name: this.icon, size: 24 }))), h("span", { key: 'c19700b850224b46a175c4a5fb082a7898842c7e', class: "co-page-header__title" }, h("slot", { key: '3e7426edb3999085f9791ed7fb9fb74b82e4227e' }, this.heading))), h("div", { key: 'ca4dd0bd5c5d553eb6adb80cc3d2093ea9dd4d2b', class: "co-page-header__actions" }, h("slot", { key: '3f108386752ebd1a740ab97c5f7fc8535a55f853', name: "actions" }))));
     }
 };
 CoPageHeader.style = coPageHeaderCss();

package/dist/esm/co-phone-field.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.js';
-import { R as RequiredMark } from './requiredMark-BCJUuZvC.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DJkaRtbb.js';
+import { R as RequiredMark } from './requiredMark-D5C5NzOE.js';
 import { r as rankByMatch, h as highlightSegments } from './normalizeText-Ba_v-MzM.js';
 
 /**
@@ -359,7 +359,7 @@ const CoPhoneField = class {
     render() {
         const entry = this.selectedEntry;
         const statusClass = this.status !== 'default' ? `co-phone-field--${this.status}` : '';
-        return (h("div", { key: '007dbe9a20cd410cb818f512d9f698afba6e821f', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: 'a4c5c1b7e10de3098f7f50d74a3ca8703d41f465', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: 'bcd04f54711067258d1270814141b4b81324ee21', required: this.required }))), h("div", { key: 'a04a6996610ccd5007c54f5728a1158c951c50e9', class: "co-phone-field__container" }, h("button", { key: '317348de58e74afb6f545749c83670ed92eb61bb', type: "button", class: "co-phone-field__selector", disabled: this.disabled, onClick: () => this.handleToggleDropdown(), "aria-expanded": String(this.isOpen), "aria-haspopup": "listbox" }, entry ? (h("img", { class: "co-phone-field__flag", src: `https://flagcdn.com/w40/${entry.iso2.toLowerCase()}.png`, alt: entry.iso2 })) : (h("co-icon", { name: "phone", size: 16 })), h("span", { key: '122cd3a7b4f363554410c7a37df3331b91e4bc81', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: '3d3d8691ba489bbe093f99a6141323f2620fd6a8', class: "co-phone-field__chevron" }, h("co-icon", { key: 'adab28c8fb4f1d6838dd0e400494656d0bc50812', name: "caret-down", size: 14 }))), h("input", { key: '13214ef8043c4984fcab73e7971e836039d8b469', class: "co-phone-field__input", type: "tel", placeholder: this.placeholder, value: this.numberPart, disabled: this.disabled, onInput: (e) => this.handleNumberInput(e) })), this.isOpen && (h("div", { key: 'b993dff8a4ad5ef53b7f50849591310ec3df54f5', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: '95db7d412dbb49ebebda43e7dc13b9f763f2e3e1', class: "co-phone-field__search" }, h("input", { key: 'cd97d9422f0b2ee04de398a4ddd38500664d3828', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: 'f0a8c53ed8a8a2e212f6bb2da2883c3efa7eab1e', class: "co-phone-field__options" }, this.filteredCountries.map((d) => (h("button", { type: "button", key: d.iso2, class: `co-phone-field__option ${d.iso2 === this.selectedIso2 ? 'co-phone-field__option--selected' : ''}`, role: "option", "aria-selected": d.iso2 === this.selectedIso2 ? 'true' : 'false', onClick: () => this.handleCountrySelect(d) }, h("img", { class: "co-phone-field__option-flag", src: `https://flagcdn.com/w40/${d.iso2.toLowerCase()}.png`, alt: d.iso2 }), h("span", { class: "co-phone-field__option-name" }, this.renderName(d.name)), h("span", { class: "co-phone-field__option-code" }, d.dialCode))))))), this.helperText && (h("div", { key: 'c2b32d573c9c94720a403280a84547ad08c8a686', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: '9199cc2660052d07753d3a12b28a3ff60724c3ea', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '27462c9a1cefa4aa4cf43ab19924c1f59a399b68', class: "co-phone-field__helper-text" }, this.helperText)))));
+        return (h("div", { key: '46c764eaa95e5948b860341cd1a1a1468bc26920', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: '25b5a320625765b5ce9ebca165c165b6b7423a0a', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: 'b04b160b13504030159a51cb6bc8e2c258dab0a8', required: this.required }))), h("div", { key: '3bbe98a398007123d7ad405f16e0c5093829999e', class: "co-phone-field__container" }, h("button", { key: '58b43e162f7966cd11ac5c3b4ece75612769863b', type: "button", class: "co-phone-field__selector", disabled: this.disabled, onClick: () => this.handleToggleDropdown(), "aria-expanded": String(this.isOpen), "aria-haspopup": "listbox" }, entry ? (h("img", { class: "co-phone-field__flag", src: `https://flagcdn.com/w40/${entry.iso2.toLowerCase()}.png`, alt: entry.iso2 })) : (h("co-icon", { name: "phone", size: 16 })), h("span", { key: '78b26caa474d9f3df6f0f39bcb3c731761354786', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: 'd2753d9b70c19ce15b525e2bb6ed02d61aa15045', class: "co-phone-field__chevron" }, h("co-icon", { key: 'd94cffbcf3d0348c11a69cc3c7554dbe11d001b2', name: "caret-down", size: 14 }))), h("input", { key: 'ee111f5cb76785ebcbae917f9cd00d08e00d62c1', class: "co-phone-field__input", type: "tel", placeholder: this.placeholder, value: this.numberPart, disabled: this.disabled, onInput: (e) => this.handleNumberInput(e) })), this.isOpen && (h("div", { key: '9d86bccfa1643b1e6703b300a74587bed334cbc2', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: '8dfeb48d11dc7d70e3acc499ad1390805aa7889d', class: "co-phone-field__search" }, h("input", { key: '1e673f71acfea7a50915dfa7a0e9e5d67a6e76cf', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: 'e28014f19f7002049657884b4d5ff0caf81eb3d8', class: "co-phone-field__options" }, this.filteredCountries.map((d) => (h("button", { type: "button", key: d.iso2, class: `co-phone-field__option ${d.iso2 === this.selectedIso2 ? 'co-phone-field__option--selected' : ''}`, role: "option", "aria-selected": d.iso2 === this.selectedIso2 ? 'true' : 'false', onClick: () => this.handleCountrySelect(d) }, h("img", { class: "co-phone-field__option-flag", src: `https://flagcdn.com/w40/${d.iso2.toLowerCase()}.png`, alt: d.iso2 }), h("span", { class: "co-phone-field__option-name" }, this.renderName(d.name)), h("span", { class: "co-phone-field__option-code" }, d.dialCode))))))), this.helperText && (h("div", { key: '2033c1184dbb72d5705d9e0ba392d77bc9629f4c', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: 'b3204decf888ec35cc0bf3f044ea5a8037fa8a53', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '697323bd25dbd70a4dc9872d1678d80e6c7bdeff', class: "co-phone-field__helper-text" }, this.helperText)))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {