@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

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

@@ -83,6 +83,12 @@
 }
 
 
+/**
+ * @prop --co-modal-width: Ancho fijo del modal con `size="xs"` (default 369px).
+ * @prop --co-modal-z-index: z-index del modal con `inline` o `backdrop="none"` (sin top layer; default 1000).
+ * @prop --co-modal-r: Radio del panel squircle de `appearance="default"`. Se asigna en el panel, así que se sobrescribe vía `co-modal::part(modal) { --co-modal-r: … }`.
+ */
+
 :host {
   display: contents;
   /* Frosted-glass backdrop for modals — stronger blur than the overlay default
@@ -235,8 +241,219 @@
   border-top: none;
 }
 
-/* header-divider="false": the body runs straight under the heading. */
+/* header-divider="false": the body runs straight under the heading.
+   Va ANTES de los modos panel/dialog (misma especificidad 0,2,0): esos modos
+   conservan la anatomía de su cuerpo (padding propio, sin divisor) aunque
+   además llegue header-divider="false". */
 .co-modal--no-header-divider .co-modal__body {
   border-top: none;
   padding-top: 0;
 }
+
+/* ─── size="xs" (Task C12) ──────────────────────────────────── */
+/* Panel angosto de ancho fijo (369px) — a diferencia de sm/lg (solo
+   max-width sobre el `width: 90vw` base) acá el ancho es fijo, expuesto vía
+   variable para que un consumidor lo pueda ajustar sin nueva prop. */
+.co-modal--xs {
+  width: var(--co-modal-width, 369px);
+  max-width: var(--co-modal-width, 369px);
+}
+
+/* ─── appearance="panel" (Task C12) ─────────────────────────── */
+/* Superficie plana con borde + sombra completa, SIN squircle: el tsx omite
+   .co-sq-clip/.co-sq-elevation en .co-modal--panel y .co-sq-elevation-fallback
+   en el frame para esta variante, así que radio/box-shadow van declarados acá
+   enteros (no hay partial squircle-surface.css involucrado). */
+.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);
+}
+
+/* ─── backdrop="none" / inline (Task C12) ───────────────────── */
+/* Sin <co-overlay> el frame deja de ser centrado por su flex del padre — se
+   posiciona y apila SOLO: mismo fixed+inset+centrado que co-overlay.css,
+   pero sin promoción a top layer (ver doc de `inline` en el @Prop). El
+   z-index es una variable propia (no pisa el 1000 de co-overlay) para que un
+   consumidor pueda ubicar sus propios portales por encima o por debajo a
+   gusto. `pointer-events: none` en el wrapper deja pasar los clics al resto
+   de la página (no hay backdrop que los intercepte); el panel recupera
+   `auto` SOLO mientras está abierto — `pointer-events` hereda, así que
+   cerrado (sin --open) el wrapper en none ya alcanza. */
+.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;
+}
+
+/* Cerrado, el frame standalone sigue MONTADO (no hay co-overlay que lo
+   saque del flujo): solo con `opacity: 0` el panel seguía en el tab-order y
+   legible para AT (fix I-1). `visibility: hidden` lo saca de ambos, pero el
+   flip va DIFERIDO al final del fade-out de salida (delay = la misma
+   --co-motion-duration-fast de la transición base de .co-modal) para no
+   cortar la animación de cierre ni el `transitionend` de `transform` del que
+   sale `coAfterClose` (mismo patrón que co-accordion / co-action-bar). Al
+   abrir, la transición vigente es la de `.co-modal--open` (sin visibility),
+   así que el panel es visible desde el frame 1. Reduced-motion lo cubre el
+   zeroing global de --co-motion-duration-*. Solo aplica bajo el frame
+   standalone: el modal default (dentro de co-overlay) no cambia. */
+.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);
+}
+
+/* ─── appearance="dialog" (Task M1) ─────────────────────────── */
+/* La anatomía del componente "Modal" del design system (Figma Prolibu UI
+   Suite `1179:37247`), medida del Figma: contenedor 540 (= `md`) radio 16
+   `radius-lg`, fondo blanco, SIN borde ni sombra propios (el nodo no lleva
+   efecto: sobre el scrim alcanza); contenido con padding 32 `space-3xl` y gap
+   16 `space-lg` entre título (Subheading/S1: 22/500, lh 1.25, ls −3 %) y
+   cuerpo (Body/B2: 16/400, lh 1.5, ls −3 %, gris-600) sin divisor entre
+   ambos; footer con padding 16/24 (`space-lg`/`space-2xl`), gap 12
+   `space-md`, hairline superior `negro-8 %` = `--co-semantic-border-subtle`
+   y botones a la derecha (cuadrados radio 12: `co-button shape="square"
+   size="m"`). Igual que `panel`, el tsx omite las clases squircle para esta
+   variante, así que el radio va declarado acá entero (no hay partial
+   squircle-surface.css involucrado). Aditivo: `default` y `panel` no cambian. */
+.co-modal--dialog {
+  border-radius: var(--co-border-radius-lg);
+}
+
+/* Header = solo el título (y el ✕ si `closable`): el padding inferior lo
+   pone el cuerpo (gap 16 del Figma). `flex-start`, no `center`: con
+   `description` el texto es una columna y el ✕ tiene que quedar arriba. */
+.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);
+}
+
+/* ✕ redondo de 32 (el mismo del modo `panel`), subido 3 px para centrarlo
+   ópticamente en la línea de 27,5 del título y corrido 6 px hacia el borde
+   para que el glifo (18 px, 7 de aire en la caja) quede al ras del padding. */
+.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);
+}
+
+/* Cuerpo: 16 arriba (gap título→cuerpo), 32 a los lados y abajo; sin el
+   divisor del default. Tipografía Body/B2 del DS (el consumidor la hereda). */
+.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);
+}
+
+/* `size="full"` (viewers edge-to-edge) conserva su cuerpo sin padding: la
+   regla de arriba tiene la misma especificidad que `.co-modal--full
+   .co-modal__body` y va después, así que se re-afirma explícitamente. */
+.co-modal--dialog.co-modal--full .co-modal__body {
+  padding: 0;
+}
+
+/* Footer 16/24, gap 12, hairline subtle. Solo el COLOR del borde: así
+   `no-dividers` (`border-top: none`, misma especificidad, declarado antes)
+   sigue quitándolo. Los botones cuadrados del Figma (radio 12) los pone el
+   consumidor con `shape="square"`; la variable cubre a los `rounded`. */
+.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);
+}
+
+/* ─── movable (Task D1) ─────────────────────────────────────── */
+/* Opt-in: sin `movable` no se emite ninguna de estas clases, así que el CSS
+   por defecto queda idéntico. El desplazamiento lo escribe el gesto como
+   custom property y se aplica con `translate` — una propiedad INDEPENDIENTE
+   del `transform` que anima la apertura (scale), así que no la pisa ni
+   dispara layout. `none` es el valor inicial: sin arrastrar, el panel queda
+   exactamente donde lo dejan co-overlay o el consumidor. */
+.co-modal--movable {
+  translate: var(--co-modal-translate, none);
+}
+
+/* El header entero es la zona de agarre (no hay ícono de agarre).
+   `touch-action: none` para que el gesto táctil mueva en vez de scrollear, y
+   sin selección de texto para que arrastrar el título no lo pinte. */
+.co-modal__header--movable {
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Los controles del header conservan su cursor: el ✕ no arrastra (el gesto lo
+   ignora, ver isInteractiveDragTarget) y no debe parecer que sí. */
+.co-modal__header--movable .co-modal__close {
+  cursor: pointer;
+}
+
+/* Declarada DESPUÉS de --movable y con la misma especificidad: gana por orden
+   mientras dura el gesto. */
+.co-modal__header--dragging {
+  cursor: grabbing;
+}