@ajuarezso/sui-design-system 0.18.4 → 0.18.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ajuarezso/sui-design-system",
-  "version": "0.18.4",
+  "version": "0.18.7",
   "description": "SUI Design System — librería de componentes Angular (SUI 2.0).",
   "license": "UNLICENSED",
   "publishConfig": {

package/types/ajuarezso-sui-design-system.d.ts

@@ -1759,7 +1759,7 @@ declare class SuiButton {
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly leftIcon: _angular_core.InputSignal<string | null>;
     readonly rightIcon: _angular_core.InputSignal<string | null>;
-    readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
+    readonly type: _angular_core.InputSignal<"reset" | "submit" | "button">;
     /** Intercept click/Enter/Space — cuando type=submit, busca el form padre y
         dispara requestSubmit(). Reset hace lo mismo con form.reset(). Disabled
         bloquea todo. */
@@ -2265,7 +2265,7 @@ declare class SuiLinkButton {
     readonly href: _angular_core.InputSignal<string | null>;
     readonly target: _angular_core.InputSignal<string | null>;
     readonly rel: _angular_core.InputSignal<string | null>;
-    readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
+    readonly type: _angular_core.InputSignal<"reset" | "submit" | "button">;
     readonly ariaLabel: _angular_core.InputSignal<string | null>;
     readonly clicked: _angular_core.OutputEmitterRef<MouseEvent>;
     readonly iconSize: _angular_core.Signal<number>;
@@ -3171,7 +3171,7 @@ declare class SuiCompactButton {
     readonly href: _angular_core.InputSignal<string | null>;
     readonly target: _angular_core.InputSignal<string | null>;
     readonly rel: _angular_core.InputSignal<string | null>;
-    readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
+    readonly type: _angular_core.InputSignal<"reset" | "submit" | "button">;
     readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly clicked: _angular_core.OutputEmitterRef<MouseEvent>;
     readonly iconSize: _angular_core.Signal<number>;
@@ -5259,7 +5259,7 @@ declare class SuiFancyButton {
     readonly href: _angular_core.InputSignal<string | null>;
     readonly target: _angular_core.InputSignal<string | null>;
     readonly rel: _angular_core.InputSignal<string | null>;
-    readonly htmlType: _angular_core.InputSignal<"button" | "submit" | "reset">;
+    readonly htmlType: _angular_core.InputSignal<"reset" | "submit" | "button">;
     readonly ariaLabel: _angular_core.InputSignal<string | null>;
     readonly clicked: _angular_core.OutputEmitterRef<MouseEvent>;
     readonly iconSize: _angular_core.Signal<number>;
@@ -5576,7 +5576,7 @@ declare class SuiFileUpload {
     protected readonly inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
     protected readonly dragging: _angular_core.WritableSignal<boolean>;
     protected readonly internalError: _angular_core.WritableSignal<string | null>;
-    protected readonly state: _angular_core.Signal<"default" | "error" | "disabled" | "dragover">;
+    protected readonly state: _angular_core.Signal<"dragover" | "error" | "default" | "disabled">;
     protected readonly resolvedTitle: _angular_core.Signal<string>;
     protected readonly resolvedSubtitle: _angular_core.Signal<string>;
     protected readonly resolvedErrorMessage: _angular_core.Signal<string | null>;
@@ -6226,7 +6226,7 @@ declare class SuiImageUpload {
      *  (matchea el escalado del contenedor 32→40 en SCSS). */
     protected readonly iconSize: _angular_core.Signal<20 | 16>;
     protected readonly hasSrc: _angular_core.Signal<boolean>;
-    protected readonly state: _angular_core.Signal<"filled" | "disabled" | "dragover" | "empty">;
+    protected readonly state: _angular_core.Signal<"dragover" | "filled" | "disabled" | "empty">;
     protected readonly resolvedTitle: _angular_core.Signal<string>;
     protected readonly resolvedSubtitle: _angular_core.Signal<string>;
     onHostClick(): void;
@@ -7042,6 +7042,32 @@ declare class SuiKeyIcon {
  * contenido desde scrollTop 0 (solo por handle). Aquí SÍ soportamos ese
  * handoff (patrón Apple Maps nativo) vía touchmove no-pasivo + takeover.
  *
+ * ── Modelo de movimiento (2026-09) ──────────────────────────────────────────
+ *
+ * Dos capas: `.sui-sheet` es un marco FIJO de alto constante
+ * H = min(contenido, maxBreakpoint·100dvh, viewport − safe-top − 16px), anclado
+ * abajo, que recorta (radius + squircle) y no captura toques; adentro,
+ * `.sui-sheet__panel` (fondo, asa y body) es lo único que se mueve, con la
+ * propiedad `translate` (compositor):
+ *
+ *     y(p) = max(0, H − p·vh)        visible(p) = min(H, p·vh)
+ *
+ * donde vh es el alto del viewport en px. Así al 25% se ven 25dvh del sheet, la
+ * parte que baja queda recortada por el marco (las esquinas inferiores
+ * redondeadas siguen a la vista, como antes) y el área libre del viewport sigue
+ * siendo del contenido de fondo. Misma semántica que la versión anterior, que
+ * animaba `max-height`, pero sin layout por frame: durante el drag no se toca
+ * ningún signal ni binding — el `translate` del panel y la opacidad del
+ * backdrop se escriben directo en el DOM dentro de un requestAnimationFrame
+ * coalescido (una escritura por frame, gana el último pointermove). Los signals
+ * `progress`, `currentBreakpoint` y `dragging` cambian al empezar/terminar el
+ * drag y al snap, no por movimiento.
+ *
+ * Se usa `translate` (propiedad individual) y NO `transform`, y sobre el panel
+ * y no sobre `.sui-sheet`: un consumer puede seguir escribiendo su propio
+ * `transform`/`left`/`width` sobre `.sui-sheet` (ej. centrarlo en desktop) sin
+ * pisar el movimiento.
+ *
  * Uso típico para tracking de pedido con mapa abajo:
  * ```html
  * <sui-modal-sheet
@@ -7057,6 +7083,7 @@ declare class SuiKeyIcon {
  */
 declare class SuiModalSheet implements OnDestroy {
     private readonly doc;
+    private readonly renderer;
     private readonly navbarVisibility;
     /** ID único por instancia para el counter centralizado del navbar. */
     private readonly _sheetId;
@@ -7083,53 +7110,90 @@ declare class SuiModalSheet implements OnDestroy {
     readonly fullBody: _angular_core.InputSignal<boolean>;
     readonly closed: _angular_core.OutputEmitterRef<void>;
     readonly breakpointChange: _angular_core.OutputEmitterRef<number>;
+    /** Marco fijo que recorta; se mide acá (alto H). */
     containerRef?: ElementRef<HTMLElement>;
+    /** Capa que se mueve (`translate`). */
+    panelRef?: ElementRef<HTMLElement>;
+    backdropRef?: ElementRef<HTMLElement>;
     handleRef?: ElementRef<HTMLElement>;
     bodyRef?: ElementRef<HTMLElement>;
     /** Breakpoint actual (0-1). Cambia al snap, no durante el drag. */
     readonly currentBreakpoint: _angular_core.WritableSignal<number>;
-    /** Progress en vivo durante el drag (0-1). Expuesto como readonly al
-        template (binding `--sheet-progress`) y al public para que el consumer
-        pueda leerlo si quiere reaccionar. */
-    protected readonly liveProgress: _angular_core.WritableSignal<number>;
+    /** Progress EN REPOSO (0-1): el breakpoint al que el sheet está o hacia el
+        que va. Durante el drag NO se actualiza (el movimiento vive en el DOM,
+        ver header): cambia al soltar y al snap. Expuesto al template como
+        `--sheet-progress` y al consumer como `progress`. */
+    protected readonly restProgress: _angular_core.WritableSignal<number>;
     readonly progress: _angular_core.Signal<number>;
-    /** True mientras el usuario está arrastrando. Desactiva CSS transition. */
+    /** True mientras el usuario está arrastrando. Se setea al arrancar y al
+        soltar; la clase CSS que apaga la transición se maneja imperativa en el
+        mismo tick que la escritura del `translate` (ver `beginDrag`/`snapTo`). */
     readonly dragging: _angular_core.WritableSignal<boolean>;
-    /** Opacity del backdrop calculada según el progress vivo. */
+    /** Opacity del backdrop para el progress en reposo. La opacidad viva del
+        drag se escribe directo en el DOM; este computed queda como API. */
     readonly backdropOpacity: _angular_core.Signal<number>;
     /** True si el backdrop debe capturar pointer events (current > backdropBreakpoint). */
     readonly backdropInteractive: _angular_core.Signal<boolean>;
-    /** CAP de altura del sheet — `min(progress·100dvh, viewport - safe-top - 16)`.
-        Se bindea como max-height con `height: max-content` en el scss: el sheet
-        NUNCA mide más que su contenido (sin espacio vacío al final cuando el
-        contenido termina antes del breakpoint), y el breakpoint actúa como techo.
-        Cuando progress=0.25 el sheet ocupa a lo sumo 25dvh y el resto del
-        viewport queda VACÍO → contenido detrás (mapa) interactivo. */
-    readonly heightCss: _angular_core.Signal<string>;
+    /** Breakpoint máximo del array (1 si está vacío). */
+    private readonly maxBreakpoint;
+    /** CAP ESTÁTICO de altura — `min(maxBp·100dvh, viewport − safe-top − 16)`.
+        Con `height: max-content` en el scss el sheet mide su contenido y este
+        techo lo acota. Depende solo de `breakpoints`: no cambia por drag ni por
+        snap, así que no fuerza layout durante el gesto. */
+    readonly maxHeightCss: _angular_core.Signal<string>;
     /** True cuando el sheet está al breakpoint máximo del array. En ese punto
         habilitamos scroll del body (touch-action: pan-y) — el user ya no puede
         expandir más, así que se prioriza ver el contenido sobre el drag. En el
         resto de breakpoints el body actúa como handle gigante (touch-action:
-        none) y solo el drag controla la altura del sheet. */
+        none) y solo el drag controla la posición del sheet. */
     readonly atMaxBreakpoint: _angular_core.Signal<boolean>;
+    /** Alto medido del sheet (px). Se mide al abrir, al empezar un drag y
+        cuando el contenido cambia de tamaño (ResizeObserver). */
+    private sheetHeight;
+    /** Alto del viewport (px) = 1 unidad de progress. */
+    private viewportHeight;
     private dragStartY;
     private dragStartProgress;
-    private wrapperHeight;
     private pointerId;
     /** Para calcular velocity al final */
     private lastMoveTime;
     private lastMoveY;
     private velocityY;
+    /** Último progress pedido por el dedo; lo consume el rAF. */
+    private pendingProgress;
+    private frameId;
     /** Flag para distinguir drag iniciado en body (scroll-then-drag) vs en handle.
         En body, el drag NO arranca con pointerdown — sólo si pointermove
         excede un threshold y la condición de scroll lo permite. Sirve para no
         robar tap/click a buttons internos. */
     private bodyDragArmed;
     /** Threshold de movimiento (px) para decidir que un pointermove en body es
-        drag (no tap). Patrón iOS estándar ~6-10px. */
+        drag (no tap). 5px = más sensible que el iOS canon de 8px: el dueño pidió
+        "como nativo" y el 8 sentía que tardaba en activar. Trade-off: 5px puede
+        activar drag con micro-movements al hacer tap, pero la heurística
+        shouldIgnoreBodyDrag protege inputs/select/option. */
     private static readonly BODY_DRAG_THRESHOLD_PX;
+    /** Lookahead de velocidad al soltar (ms): predice dónde estaría el dedo y
+        snapea ahí. Permite que un swipe rápido brinque breakpoints sin saltarse
+        los intermedios. 80ms validado en device: a 150 se saltaba el 0.7 entre
+        0.5 y 1; a 0 el sheet se sentía pesado. */
+    private static readonly VELOCITY_LOOKAHEAD_MS;
+    /** Duración del snap: se acota entre estos dos valores según distancia
+        restante / velocidad del dedo (ver `snapDuration`). */
+    private static readonly SNAP_MIN_MS;
+    private static readonly SNAP_MAX_MS;
+    private static readonly CLASS_PANEL_DRAGGING;
+    private static readonly CLASS_BACKDROP_DRAGGING;
+    /** Cerrado = el panel baja todo su alto y el marco lo recorta entero. Se usa
+        `100%` (y no el H medido) para que el cierre quede bien aunque el
+        contenido cambie de tamaño a mitad de camino. */
+    private static readonly TRANSLATE_CLOSED;
     private wasOpen;
     private escapeHandler?;
+    private closeTimer;
+    private closeTransitionHandler?;
+    private resizeObserver?;
+    private windowResizeHandler?;
     constructor();
     ngOnDestroy(): void;
     /** Mueve el sheet a un breakpoint específico programáticamente.
@@ -7143,6 +7207,40 @@ declare class SuiModalSheet implements OnDestroy {
     private touchMoveHandler?;
     private attachTouchSuppressor;
     private detachTouchSuppressor;
+    /** Mide alto del sheet y del viewport. Devuelve false si todavía no hay
+        layout (container sin render o entorno sin medidas, ej. jsdom). Es la
+        ÚNICA lectura de layout del gesto: se hace al abrir, al pointerdown y
+        cuando cambia el tamaño — nunca por pointermove. */
+    private measure;
+    /** Desplazamiento vertical (px) para un progress: `max(0, H − p·vh)`. */
+    private yFor;
+    /** Valor de `translate` para un progress. */
+    private translateFor;
+    /** Progress EFECTIVO de un breakpoint: el que corresponde al y que el sheet
+        muestra de verdad. Con contenido corto varios breakpoints valen y = 0 y
+        su progress efectivo es H/vh, no el nominal — es el punto de partida
+        correcto para que el dedo mueva 1:1 desde ahí. */
+    private effectiveProgress;
+    /** Progress real del sheet leyendo el `translate` computado del panel —
+        sirve para agarrarlo a mitad de una transición sin que salte al
+        breakpoint de destino. Si no se puede leer (jsdom, valor no numérico,
+        un calc() a mitad de la entrada) cae al progress efectivo del
+        `currentBreakpoint`. */
+    private progressFromDom;
+    private writeTranslate;
+    private writeBackdropOpacity;
+    private setTransitionDuration;
+    private setDraggingClasses;
+    /** Coalesce: guarda el último progress y escribe UNA vez por frame. */
+    private scheduleFrame;
+    private flushFrame;
+    private cancelFrame;
+    private observeSize;
+    private stopObservingSize;
+    private onSizeChange;
+    /** Arranque común del drag (handle o body ya armado): congela la transición
+        en curso, lee la posición real y marca `dragging`. */
+    private beginDrag;
     protected onPointerDown(event: PointerEvent): void;
     protected onPointerMove(event: PointerEvent): void;
     protected onPointerUp(event: PointerEvent): void;
@@ -7152,8 +7250,26 @@ declare class SuiModalSheet implements OnDestroy {
     /** Heurística: ignorar drag si el target es un input/textarea/select/button
         interactivo. El user está intentando interactuar, no arrastrar. */
     private shouldIgnoreBodyDrag;
+    /** Duración del snap en función de la distancia restante y la velocidad del
+        dedo (px/ms): un fling rápido cierra la distancia en poco tiempo; un
+        release lento o un snap programático usa la duración larga. Acotado a
+        [180, 350] ms. */
+    private snapDuration;
+    /**
+     * Lleva el sheet a `breakpoint`.
+     * @param fromProgress progress desde el que sale (default: el de reposo);
+     *        solo influye en la duración.
+     * @param velocityPxMs velocidad del dedo al soltar, para acortar el snap.
+     */
     private snapTo;
-    private findClosestBreakpoint;
+    private scheduleClose;
+    private cancelPendingClose;
+    /** Breakpoint cuyo desplazamiento (`yFor`) queda más cerca de `y`. Varios
+        breakpoints pueden compartir el mismo y (todos los que superan el alto
+        del contenido valen 0): en ese empate gana el actual si está entre
+        ellos, si no el mayor — así un toque-arrastre al máximo no cambia de
+        breakpoint ni apaga el scroll del body. */
+    private closestBreakpointByY;
     /** Fórmula linear entre (backdropBreakpoint, 0) y (1, 1). Igual que Ionic. */
     private computeBackdropOpacity;
     protected onBackdropClick(): void;
@@ -7795,7 +7911,7 @@ declare class SuiNotification {
     readonly dismissible: _angular_core.InputSignal<boolean>;
     readonly unread: _angular_core.InputSignal<boolean>;
     /** Item body type. 'basic' keeps the legacy/alert layout (no body slot). */
-    readonly type: _angular_core.InputSignal<"basic" | "file" | "button" | "message">;
+    readonly type: _angular_core.InputSignal<"message" | "button" | "basic" | "file">;
     /** When true, item paints the Figma hover bg + reveals the more-2-line button. */
     readonly showMore: _angular_core.InputSignal<boolean>;
     /** Forces the hover affordance visible (e.g. keyboard-focused row). */
@@ -9719,7 +9835,7 @@ declare class SuiSocialButton {
     readonly href: _angular_core.InputSignal<string | null>;
     readonly target: _angular_core.InputSignal<string | null>;
     readonly rel: _angular_core.InputSignal<string | null>;
-    readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
+    readonly type: _angular_core.InputSignal<"reset" | "submit" | "button">;
     readonly ariaLabel: _angular_core.InputSignal<string | null>;
     readonly clicked: _angular_core.OutputEmitterRef<MouseEvent>;
     /** Disabled efectivo: el input disabled O el estado loading. */