@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,531 @@
+/* ===========================================================================
+ * SUI Modal - SUI Design System 2.0   (portado 1:1 del Angular homologado)
+ * Specs pulled from Figma 8p1k72aKKvzJV4XcvPS4VO
+ *
+ * Nodes verified:
+ *   466:4778   Modal Header [1.1]  - Basic/Small(56)/Medium(80), Error/Warning/Success/Info
+ *   472:566    Modal Footer [1.1]  - Basic (px=20, py=16, border-top, gap=12)
+ *   480:1372   Status Modals [1.1] - icon circle bg colours per variant
+ *   480:2474   Modal Overlay [1.1] - rgba(51,51,51,0.24)
+ *
+ * Container:  bg-white-0, border 1px stroke-soft-200, radius-20, shadow medium.
+ * Sizes (max-width): small 400 / medium 440 (default) / large 560 / xlarge 720.
+ * Header Medium 80: pl=20 pr=56 py=16 gap=16; title Label/Small, desc Paragraph/X-Small.
+ * Header Small 56 (sin desc): gap=12. Footer: px=20 py=16 border-top gap=12 justify-end.
+ * Body: p=20 flex-col gap=20.
+ * Overlay: rgba(51,51,51,0.24) + backdrop-filter blur(10px) por DEFAULT
+ *          (extra-feature "glass" del proyecto; opt-out con backdrop-blur=false).
+ * Animation: backdrop fade; container fade+scale 0.95 -> 1.
+ * ======================================================================== */
+/* -- Host ----------------------------------------------------------------- */
+:host {
+  display: contents;
+}
+
+/* -- Backdrop overlay ----------------------------------------------------- */
+.sui-modal__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background-color: rgba(51, 51, 51, 0.24); /* Figma overlay-gray */
+  /* Blur por DEFAULT - extra-feature "glass" del proyecto (fuera del DS Figma,
+     que define overlay plano). El bg rgba(51,51,51,0.24) se mantiene; el blur
+     va encima. Se quita con backdrop-blur=false -> clase --no-blur. */
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  animation: sui-modal-backdrop-in var(--sui-motion-duration-fast, 200ms) var(--sui-motion-ease-out, cubic-bezier(0, 0, 0.2, 1)) both;
+}
+.sui-modal__backdrop--no-blur {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+/* -- Dialog positioner ---------------------------------------------------- */
+.sui-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  box-sizing: border-box;
+  pointer-events: none; /* let backdrop receive its own pointer events */
+}
+
+/* -- Container ------------------------------------------------------------ */
+.sui-modal__container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  pointer-events: auto;
+  background: var(--sui-bg-white-0, #ffffff);
+  border: 1px solid var(--sui-stroke-soft-200, #ebebeb);
+  border-radius: var(--sui-radius-20, 20px);
+  box-shadow: var(--sui-regular-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, 0.1));
+  width: 100%;
+  margin-inline: auto; /* fallback explicito por si flex center falla en iOS WebView */
+  max-height: calc(100dvh - 32px);
+  overflow-y: auto;
+  animation: sui-modal-container-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  will-change: transform, opacity;
+}
+.sui-modal__container:focus {
+  outline: none;
+}
+.sui-modal__container {
+  /* Sizes */
+}
+.sui-modal__container[data-sui-size=small] {
+  max-width: 400px;
+}
+.sui-modal__container[data-sui-size=medium] {
+  max-width: 440px;
+}
+.sui-modal__container[data-sui-size=large] {
+  max-width: 560px;
+}
+.sui-modal__container[data-sui-size=xlarge] {
+  max-width: 720px;
+}
+
+/* -- Header --------------------------------------------------------------- */
+.sui-modal__header {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 16px;
+  /* pl=20, py=16, pr=56 (24 close + 16 right offset + 16 gap implicito) - reserva
+     espacio para el close button absolute y evita que title/subtitle toque la X. */
+  padding: 16px 56px 16px 20px;
+  border-bottom: 1px solid var(--sui-stroke-soft-200, #ebebeb);
+  background: var(--sui-bg-white-0, #ffffff);
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  /* Altura 80px (Figma "Medium 80") para modales con description. Sin description
+     -> "Small 56" via --compact. align-items:center centra el contenido. */
+  min-height: 80px;
+  height: auto;
+}
+.sui-modal__header.sui-modal__header--with-icon {
+  gap: 14px;
+}
+.sui-modal__header {
+  /* Small 56 (Figma "Modal Header / Small") - solo titulo, sin description. */
+}
+.sui-modal__header.sui-modal__header--compact {
+  min-height: 56px;
+  gap: 12px;
+}
+.sui-modal__header {
+  /* Cascade fix: --compact + --with-icon restaura los 14px del DS (sin esta
+     regla mas especifica, --compact ganaba al --with-icon por orden de cascada). */
+}
+.sui-modal__header.sui-modal__header--compact.sui-modal__header--with-icon {
+  gap: 14px;
+}
+.sui-modal__header {
+  /* Status vertical sin titulo -> header solo contiene el close button. */
+}
+.sui-modal__header.sui-modal__header--close-only {
+  min-height: 0;
+  padding: 0;
+  border-bottom: none;
+  background: transparent;
+}
+
+/* -- Icon circle ---------------------------------------------------------- */
+.sui-modal__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  align-self: flex-start;
+  padding: 10px;
+  border-radius: var(--sui-radius-full, 999px);
+  box-sizing: border-box;
+  /* Color per variant - matchea Figma state lighter bg + base icon color */
+}
+.sui-modal__icon[data-variant=error] {
+  background: var(--sui-state-error-lighter, #ffebec);
+  color: var(--sui-state-error-base, #fb3748);
+}
+.sui-modal__icon[data-variant=warning] {
+  background: var(--sui-state-warning-lighter, #fff3eb);
+  color: var(--sui-state-warning-base, #fa7319);
+}
+.sui-modal__icon[data-variant=success] {
+  background: var(--sui-state-success-lighter, #e3f7ec);
+  color: var(--sui-state-success-base, #1fc16b);
+}
+.sui-modal__icon[data-variant=info] {
+  background: var(--sui-state-information-lighter, #ebf1ff);
+  color: var(--sui-state-information-base, #335cff);
+}
+.sui-modal__icon {
+  /* Neutral: cuando el consumer pasa headerIcon custom (no semantic). */
+}
+.sui-modal__icon[data-variant=neutral] {
+  background: var(--sui-bg-weak-50, #f7f7f7);
+  color: var(--sui-text-sub-600, #5c5c5c);
+}
+
+/* Icono FLAT en header Small (Figma "Modal Header / Small"): sin circulo ni
+   padding, solo el icono coloreado a 24px alineado al centro vertical. */
+.sui-modal__header--compact .sui-modal__icon {
+  padding: 0;
+  background: transparent;
+  align-self: center;
+}
+
+/* -- Titles block --------------------------------------------------------- */
+.sui-modal__titles {
+  /* Block simple - evita el bug de nested flex en iOS WebView que estiraba el
+     titles al cross-axis del header. Con display:block, titles toma su content
+     height natural y align-items:center del header lo centra vertical. */
+  display: block;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.sui-modal__title {
+  margin: 0;
+  font-family: var(--sui-font-sans);
+  font-size: var(--sui-type-label-sm-size, 14px);
+  font-weight: var(--sui-type-label-sm-weight, 500);
+  line-height: var(--sui-type-label-sm-line, 20px);
+  letter-spacing: var(--sui-type-label-sm-spacing, -0.006em);
+  color: var(--sui-text-strong-950, #171717);
+  font-feature-settings: "ss11" 1, "calt" 0, "liga" 0;
+  word-break: break-word;
+}
+
+.sui-modal__description {
+  margin: 4px 0 0 0; /* gap 4px con el title */
+  font-family: var(--sui-font-sans);
+  font-size: var(--sui-type-paragraph-xs-size, 12px);
+  font-weight: var(--sui-type-paragraph-xs-weight, 400);
+  line-height: var(--sui-type-paragraph-xs-line, 16px);
+  letter-spacing: 0;
+  color: var(--sui-text-sub-600, #5c5c5c);
+  font-feature-settings: "ss11" 1, "calt" 0, "liga" 0;
+}
+
+.sui-modal__title + .sui-modal__description {
+  margin-top: 4px;
+}
+
+.sui-modal__description:first-child {
+  margin-top: 0;
+}
+
+/* -- Close button --------------------------------------------------------- */
+.sui-modal__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  padding: 2px;
+  border: none;
+  background: transparent;
+  border-radius: var(--sui-radius-6, 6px);
+  cursor: pointer;
+  color: var(--sui-icon-sub-600, #5c5c5c);
+  box-sizing: border-box;
+  transition: background-color var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out), color var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out);
+  /* Absolute top-right - matchea Figma. El header reserva pr=56 para no superponer. */
+  position: absolute;
+  top: 16px;
+  right: 16px;
+}
+.sui-modal__close:hover {
+  background: var(--sui-bg-weak-50, #f7f7f7);
+  color: var(--sui-text-strong-950, #171717);
+}
+.sui-modal__close {
+  /* No outline ni focus ring - iOS WebView dispara :focus-visible tras tap.
+     Usamos cambio de background como indicador de focus para keyboard users. */
+}
+.sui-modal__close:focus {
+  outline: none;
+}
+.sui-modal__close:focus-visible {
+  outline: none;
+  background: var(--sui-bg-weak-50, #f7f7f7);
+  color: var(--sui-text-strong-950, #171717);
+}
+
+/* -- Body ----------------------------------------------------------------- */
+.sui-modal__body {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 20px;
+  flex: 1 1 auto;
+  background: var(--sui-bg-white-0, #ffffff);
+  overflow-y: auto;
+  /* container max-height 100dvh-32px, menos ~168px de header+footer+padding. */
+  max-height: calc(100dvh - 200px);
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+  /* If body has no content (slot vacio y no status), colapsa. */
+}
+.sui-modal__body:empty {
+  display: none;
+}
+.sui-modal__body {
+  /* Variant full: sin padding ni gap (full-bleed: mapas, imagenes). */
+}
+.sui-modal__body--full {
+  padding: 0;
+  gap: 0;
+}
+
+/* X flotante en modo Status (Figma 480:1372 no tiene header): absolute sobre
+   el container (position:relative), top/right 16 como el header. */
+.sui-modal__close-floating {
+  z-index: 1;
+}
+
+/* -- Status block (Figma "Status Modals" 480:1372) ------------------------ */
+.sui-modal__status {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  /* Figma "Status Modals" Content: gap 16px entre el contenedor del icono y el texto. */
+  gap: 16px;
+  /* El icono del Status Modal NO es el circulo del header: Figma marca un
+     rectangulo redondeado radius-10 con padding 8px y bg lighter por variant. */
+}
+.sui-modal__status .sui-modal__icon {
+  align-self: center;
+  padding: 8px;
+  border-radius: var(--sui-radius-10, 10px);
+}
+
+/* Status HORIZONTAL (Figma 480:1366): tile + texto en FILA, alineados al
+   inicio y con texto a la izquierda (el vertical centra en columna). */
+.sui-modal__status--row {
+  flex-direction: row;
+  align-items: flex-start;
+  text-align: left;
+}
+.sui-modal__status--row .sui-modal__icon {
+  align-self: flex-start;
+}
+.sui-modal__status--row .sui-modal__status-text {
+  align-items: flex-start;
+}
+
+.sui-modal__status-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+}
+
+.sui-modal__status-title {
+  margin: 0;
+  font-family: var(--sui-font-sans);
+  /* Label/Medium - 16/500/24/-0.011em */
+  font-size: var(--sui-type-label-md-size, 16px);
+  font-weight: var(--sui-type-label-md-weight, 500);
+  line-height: var(--sui-type-label-md-line, 24px);
+  letter-spacing: var(--sui-type-label-md-spacing, -0.011em);
+  color: var(--sui-text-strong-950, #171717);
+  font-feature-settings: "ss11" 1, "calt" 0, "liga" 0;
+}
+
+.sui-modal__status-description {
+  margin: 0;
+  font-family: var(--sui-font-sans);
+  /* Paragraph/Small - 14/400/20/-0.006em */
+  font-size: var(--sui-type-paragraph-sm-size, 14px);
+  font-weight: var(--sui-type-paragraph-sm-weight, 400);
+  line-height: var(--sui-type-paragraph-sm-line, 20px);
+  letter-spacing: var(--sui-type-paragraph-sm-spacing, -0.006em);
+  color: var(--sui-text-sub-600, #5c5c5c);
+  font-feature-settings: "ss11" 1, "calt" 0, "liga" 0;
+}
+
+/* -- Footer --------------------------------------------------------------- */
+/* En Stencil scoped el footer se proyecta dentro del wrapper interno
+   `.sui-modal__footer` (no se usa ::ng-deep). El consumer mete sus buttons en
+   <... slot="footer"> y este wrapper los alinea. */
+.sui-modal__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 16px 20px;
+  box-sizing: border-box;
+  border-top: 1px solid var(--sui-stroke-soft-200, #ebebeb);
+  background: var(--sui-bg-white-0, #ffffff);
+  flex-shrink: 0;
+  position: relative;
+  transition: box-shadow var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out);
+}
+
+/* Scroll indicator - shadow arriba del footer cuando el body aun tiene scroll. */
+.sui-modal__container--scroll-active .sui-modal__footer {
+  box-shadow: 0 -4px 8px 0 rgba(14, 18, 27, 0.06);
+}
+
+/* -- Animations ----------------------------------------------------------- */
+@keyframes sui-modal-backdrop-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+/* Entrada: fade + scale puro 0.95 -> 1, per Figma DS (sin translateY no-spec). */
+@keyframes sui-modal-container-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+/* -- Responsive - mobile -------------------------------------------------- */
+@media (max-width: 768px) {
+  .sui-modal {
+    align-items: center;
+    justify-content: center;
+    padding: max(16px, env(safe-area-inset-top, 16px)) max(16px, env(safe-area-inset-right, 16px)) max(16px, env(safe-area-inset-bottom, 16px)) max(16px, env(safe-area-inset-left, 16px));
+    box-sizing: border-box;
+  }
+  .sui-modal__container {
+    width: 100%;
+    max-width: 100%;
+    /* 50% del viewport - evita modal gigante con forms largos; el body scrollea. */
+    max-height: calc(50dvh - 16px);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+  .sui-modal__body {
+    overflow-y: auto;
+    flex: 1 1 auto;
+    max-height: calc(50dvh - 100px);
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
+  }
+  .sui-modal__header,
+  .sui-modal__footer {
+    flex-shrink: 0;
+  }
+  /* -- Variant: fullscreen mobile -----------------------------------------
+     Look flotante (ref. sheet iOS 26): gutter de 8px a los lados/abajo/arriba
+     ademas del safe-area; el backdrop se ve por los bordes y el container
+     queda como card con radius en las 4 esquinas. Los calcs de altura restan
+     esos 16px (8 top + 8 bottom) ademas de los safe-areas.
+     Plataforma: la clase `platform-ios` / `platform-android` que el host pone
+     en <html>. */
+  .sui-modal:has(.sui-modal__container--fullscreen) {
+    align-items: stretch;
+    justify-content: stretch;
+    padding: calc(env(safe-area-inset-top, 0px) + 8px) 8px 8px;
+  }
+  /* Android: 100dvh INCLUYE la barra de navegacion -> padding-bottom extra. */
+  :host-context(html.platform-android) .sui-modal:has(.sui-modal__container--fullscreen) {
+    padding-bottom: calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 8px);
+  }
+  /* Footer sin divisor solo en fullscreen: la card flotante ya lo delimita. */
+  .sui-modal__container--fullscreen .sui-modal__footer {
+    border-top: none;
+  }
+  /* Teclado (iOS): el host setea `--sui-keyboard-h` al abrirse el teclado y el
+     calc lo resta para elevar el modal (WebKit no achica el dvh). En Android
+     NO se resta (ver override abajo): el dvh ya se achica solo y restarlo
+     seria doble descuento (franja gris sobre el teclado). */
+  .sui-modal__container--fullscreen,
+  .sui-modal__container--fullscreen[data-sui-size=small],
+  .sui-modal__container--fullscreen[data-sui-size=medium],
+  .sui-modal__container--fullscreen[data-sui-size=large],
+  .sui-modal__container--fullscreen[data-sui-size=xlarge] {
+    width: 100%;
+    max-width: 100%;
+    /* Sin el hairline: con contenido edge-to-edge (full-body) se lee como marco. */
+    border: none;
+    /* WKWebView: capa de compositing propia para que el clip del radius grande
+       no muestre una "punta" en las esquinas al scrollear el body. */
+    transform: translateZ(0);
+    height: calc(100dvh - env(safe-area-inset-top, 0px) - 16px - var(--sui-keyboard-h, 0px));
+    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 16px - var(--sui-keyboard-h, 0px));
+    /* iOS: top 36 (sheet nativo iOS 26) / bottom 54 = concentrico con la
+       esquina del display (62pt - 8 de inset). */
+    border-radius: 36px 36px 54px 54px;
+    /* Progressive enhancement Chromium: curvatura continua. */
+    corner-shape: squircle;
+    /* Squircle real cross-browser via clip-path shape() (Safari/iOS moderno):
+       cubicas con control points en el vertice, displacement ~1.25x del radius.
+       El clip se come el box-shadow -> drop-shadow. */
+  }
+  @supports (clip-path: shape(from 0 0, close)) {
+    .sui-modal__container--fullscreen,
+    .sui-modal__container--fullscreen[data-sui-size=small],
+    .sui-modal__container--fullscreen[data-sui-size=medium],
+    .sui-modal__container--fullscreen[data-sui-size=large],
+    .sui-modal__container--fullscreen[data-sui-size=xlarge] {
+      --sq-t: 45px;
+      --sq-b: 68px;
+      clip-path: shape(from 0 var(--sq-t), curve to var(--sq-t) 0 with 0 0/0 0, hline to calc(100% - var(--sq-t)), curve to 100% var(--sq-t) with 100% 0/100% 0, vline to calc(100% - var(--sq-b)), curve to calc(100% - var(--sq-b)) 100% with 100% 100%/100% 100%, hline to var(--sq-b), curve to 0 calc(100% - var(--sq-b)) with 0 100%/0 100%, close);
+      box-shadow: none;
+      filter: drop-shadow(0 16px 32px rgba(14, 18, 27, 0.1));
+    }
+  }
+  .sui-modal__container--fullscreen,
+  .sui-modal__container--fullscreen[data-sui-size=small],
+  .sui-modal__container--fullscreen[data-sui-size=medium],
+  .sui-modal__container--fullscreen[data-sui-size=large],
+  .sui-modal__container--fullscreen[data-sui-size=xlarge] {
+    transition: height 0.22s ease, max-height 0.22s ease;
+  }
+  /* Android: radius-20 de Figma (el 36/54 es geometria del display de iPhone),
+     squircle displacement 20 x 1.25, resta el safe-area-bottom y NO resta
+     --sui-keyboard-h. */
+  :host-context(html.platform-android) .sui-modal__container--fullscreen,
+  :host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=small],
+  :host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=medium],
+  :host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=large],
+  :host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=xlarge] {
+    border-radius: var(--sui-radius-20, 20px);
+    --sq-t: 25px;
+    --sq-b: 25px;
+    height: calc(100dvh - env(safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px);
+    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px);
+  }
+  /* Scrollbar oculto en mobile (look nativo; en desktop sigue visible por a11y). */
+  .sui-modal__body {
+    scrollbar-width: none;
+  }
+  .sui-modal__body::-webkit-scrollbar {
+    display: none;
+  }
+  .sui-modal__container--fullscreen .sui-modal__body {
+    max-height: none;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+  }
+}
+/* Area tactil de la X: piso 44 en el telefono. Se ve de 24; un ::before
+   invisible la lleva a 44 x 44 sin cambiar como se ve. */
+@media (max-width: 767px) {
+  .sui-modal__close::before {
+    content: "";
+    position: absolute;
+    inset: calc((100% - 44px) / 2);
+  }
+}