@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/esm/sui-modal-sheet.entry.js

@@ -0,0 +1,709 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CHeoPpKZ.js';
+import { l as lockBodyScroll, u as unlockBodyScroll } from './scroll-lock-BuB1VRm0.js';
+
+const suiModalSheetCss = () => `@charset "UTF-8";.sc-sui-modal-sheet-h{display:contents}.sui-sheet__backdrop.sc-sui-modal-sheet{position:fixed;inset:0;z-index:1000;background-color:rgba(51, 51, 51, 0.24);opacity:0;will-change:opacity;transition-property:opacity;transition-duration:350ms;transition-timing-function:cubic-bezier(0.32, 0.72, 0, 1)}.sui-sheet__backdrop--dragging.sc-sui-modal-sheet{transition:none}.sui-sheet.sc-sui-modal-sheet{position:fixed;bottom:8px;left:8px;right:8px;z-index:1001;display:flex;flex-direction:column;box-sizing:border-box;height:max-content;pointer-events:none;border-radius:36px 36px 54px 54px;corner-shape:squircle}@supports (clip-path: shape(from 0 0, close)){.sui-sheet.sc-sui-modal-sheet{--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 !important;filter:none}}.sui-sheet.sc-sui-modal-sheet{box-shadow:none;overflow:hidden;contain:layout paint}html.platform-android.sc-sui-modal-sheet-h .sui-sheet.sc-sui-modal-sheet,html.platform-android .sc-sui-modal-sheet-h .sui-sheet.sc-sui-modal-sheet{border-radius:var(--sui-radius-20, 20px);--sq-t:25px;--sq-b:25px}.sui-sheet__panel.sc-sui-modal-sheet{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;box-sizing:border-box;pointer-events:auto;background:var(--sui-bg-white-0, #ffffff);border-radius:36px 36px 0 0;corner-shape:squircle}@supports (clip-path: shape(from 0 0, close)){.sui-sheet__panel.sc-sui-modal-sheet{--sq-t:45px;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 100%, hline to 0, close)}}.sui-sheet__panel.sc-sui-modal-sheet{overflow:hidden;overscroll-behavior:contain;translate:0 100%;will-change:transform, translate;transition-property:translate;transition-duration:350ms;transition-timing-function:cubic-bezier(0.32, 0.72, 0, 1)}.sui-sheet__panel--dragging.sc-sui-modal-sheet{transition:none}html.platform-android.sc-sui-modal-sheet-h .sui-sheet__panel.sc-sui-modal-sheet,html.platform-android .sc-sui-modal-sheet-h .sui-sheet__panel.sc-sui-modal-sheet{border-radius:var(--sui-radius-20, 20px) var(--sui-radius-20, 20px) 0 0;--sq-t:25px}.sui-sheet__handle.sc-sui-modal-sheet{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:12px 0 8px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.sui-sheet__handle.sc-sui-modal-sheet:active{cursor:grabbing}.sui-sheet__handle-pill.sc-sui-modal-sheet{width:36px;height:5px;border-radius:999px;background:var(--sui-bg-soft-200, #d4d4d8)}.sui-sheet__body.sc-sui-modal-sheet{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:none;padding:0 20px 20px}.sui-sheet__body--scrollable.sc-sui-modal-sheet{touch-action:pan-y;overscroll-behavior-y:contain}.sui-sheet__body--full.sc-sui-modal-sheet{padding:0}@media (max-width: 767px){.sui-sheet__body.sc-sui-modal-sheet{scrollbar-width:none}.sui-sheet__body.sc-sui-modal-sheet::-webkit-scrollbar{display:none}}`;
+
+const SuiModalSheet = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.openChange = createEvent(this, "openChange");
+        this.closed = createEvent(this, "closed");
+        this.breakpointChange = createEvent(this, "breakpointChange");
+        // ── Inputs ────────────────────────────────────────────────────────────────
+        /** Abierto/cerrado. Two-way: mutable + reflect + @Event `openChange`. */
+        this.open = false;
+        /**
+         * Snap points del 0 al 1. 0 = cerrado, 1 = pleno. Debe incluir 0 para que el
+         * gesture pueda dismissar. Si NO incluye 0, el sheet no se cierra por swipe
+         * (igual que Ionic) — solo se cierra programaticamente o por backdrop.
+         *
+         * GOTCHA Stencil: array prop -> pasar como PROPERTY (`.breakpoints = [...]`).
+         */
+        this.breakpoints = [0, 1];
+        /** Breakpoint donde arranca al abrir. Debe estar en `breakpoints`. */
+        this.initialBreakpoint = 1;
+        /**
+         * A partir de que breakpoint el backdrop empieza a aparecer (0-1).
+         * `0` (default) = backdrop fade lineal con el sheet desde el inicio.
+         * `0.5` = backdrop invisible hasta que sheet > 50%, despues fade lineal.
+         * `1` = backdrop nunca aparece (mapa interactivo siempre).
+         */
+        this.backdropBreakpoint = 0;
+        /** Pill visible arriba del sheet como indicador de drag. */
+        this.showHandle = true;
+        /**
+         * Cierra al hacer click en backdrop. Solo aplica si el backdrop esta
+         * capturando pointer events (current > backdropBreakpoint).
+         */
+        this.closeOnBackdrop = true;
+        /** Cierra al presionar Escape (web). */
+        this.closeOnEscape = true;
+        /** Quita el padding del body para contenido full-bleed. */
+        this.fullBody = false;
+        // ── State ─────────────────────────────────────────────────────────────────
+        /** Breakpoint actual (0-1). Cambia al snap, no durante el drag. */
+        this.currentBreakpoint = 0;
+        /** Progress EN REPOSO (0-1): el breakpoint al que esta o hacia el que va.
+         *  Durante el drag NO cambia (el movimiento vive en el DOM). */
+        this.restProgress = 0;
+        /** True mientras el usuario esta arrastrando (cambia al empezar/terminar). */
+        this.dragging = false;
+        // ── Geometria / drag (imperativo, no reactivo) ───────────────────────────
+        this.sheetHeight = 0;
+        /** Alto del viewport (px) = 1 unidad de progress. */
+        this.viewportHeight = 0;
+        this.dragStartY = 0;
+        this.dragStartProgress = 0;
+        this.pointerId = null;
+        this.lastMoveTime = 0;
+        this.lastMoveY = 0;
+        this.velocityY = 0;
+        /** Ultimo progress pedido por el dedo; lo consume el rAF. */
+        this.pendingProgress = null;
+        this.frameId = null;
+        /** Drag iniciado en body (scroll-then-drag): se arma en pointerdown y arranca
+         *  solo si pointermove supera el threshold. No roba el tap a botones. */
+        this.bodyDragArmed = false;
+        /** Donde nacio el gesto: de ahi se buscan las listas con scroll propio. */
+        this.bodyDragTarget = null;
+        this.touchTarget = null;
+        // ── Lifecycle ─────────────────────────────────────────────────────────────
+        this.wasOpen = false;
+        /** Lo que tenía el foco al abrir: se le devuelve al cerrar (como sui-modal). */
+        this.previousFocus = null;
+        this.closeTimer = null;
+        // ── Supresor de scroll nativo (handoff scroll->drag en iOS WKWebView) ──────
+        // Con el body en pan-y, WebKit dispara pointercancel apenas arranca el scroll
+        // nativo y el drag nunca recibe el gesto. touchmove NO-pasivo que previene
+        // solo cuando el gesto es del sheet (drag activo, o al max + todo lo que
+        // scrollea bajo el dedo en top 0 + dedo hacia abajo).
+        this.touchStartY = 0;
+        this.onPointerDown = (event) => {
+            var _a;
+            if (!event.isPrimary)
+                return;
+            if (!this.measure())
+                return;
+            this.beginDrag(event);
+            /* setPointerCapture: los moves siguen llegando aunque el dedo salga del asa. */
+            try {
+                (_a = this.handleEl) === null || _a === void 0 ? void 0 : _a.setPointerCapture(event.pointerId);
+            }
+            catch (_b) {
+                /* noop */
+            }
+            event.preventDefault();
+        };
+        this.onPointerMove = (event) => {
+            var _a;
+            if (this.pointerId !== event.pointerId || !this.dragging)
+                return;
+            const deltaY = event.clientY - this.dragStartY;
+            /* 1:1 con el dedo: 1 unidad de progress = alto del viewport. */
+            const next = this.dragStartProgress - deltaY / this.viewportHeight;
+            /* Min = primer breakpoint: si no incluye 0, el gesto no cierra. */
+            const minBp = (_a = this.breakpoints[0]) !== null && _a !== void 0 ? _a : 0;
+            this.scheduleFrame(Math.max(minBp, Math.min(1, next)));
+            const now = performance.now();
+            const dt = now - this.lastMoveTime;
+            if (dt > 0)
+                this.velocityY = (event.clientY - this.lastMoveY) / dt; // px/ms, + = bajando
+            this.lastMoveY = event.clientY;
+            this.lastMoveTime = now;
+        };
+        this.onPointerUp = (event) => {
+            var _a, _b, _c;
+            if (this.pointerId !== event.pointerId)
+                return;
+            /* Armado pero sin drag = fue un tap: dejar que el click siga. */
+            const wasDragging = this.dragging;
+            this.pointerId = null;
+            this.bodyDragArmed = false;
+            try {
+                (_a = this.handleEl) === null || _a === void 0 ? void 0 : _a.releasePointerCapture(event.pointerId);
+            }
+            catch (_d) {
+                /* noop */
+            }
+            try {
+                (_b = this.bodyEl) === null || _b === void 0 ? void 0 : _b.releasePointerCapture(event.pointerId);
+            }
+            catch (_e) {
+                /* noop */
+            }
+            if (!wasDragging)
+                return;
+            const released = (_c = this.pendingProgress) !== null && _c !== void 0 ? _c : this.progressFromDom();
+            this.cancelFrame();
+            /* Velocity boost: predice ~80ms y snapea al breakpoint mas cercano EN PX
+               (con contenido corto varios breakpoints comparten y = 0). */
+            const yReleased = this.yFor(released);
+            const yProjected = Math.max(0, Math.min(this.sheetHeight, yReleased + this.velocityY * SuiModalSheet.VELOCITY_LOOKAHEAD_MS));
+            const snapBp = this.closestBreakpointByY(yProjected);
+            this.dragging = false;
+            this.snapTo(snapBp, true, released, Math.abs(this.velocityY));
+        };
+        this.onPointerCancel = (event) => {
+            var _a;
+            if (this.pointerId !== event.pointerId)
+                return;
+            const wasDragging = this.dragging;
+            this.pointerId = null;
+            this.bodyDragArmed = false;
+            const released = wasDragging ? ((_a = this.pendingProgress) !== null && _a !== void 0 ? _a : this.progressFromDom()) : this.currentBreakpoint;
+            this.cancelFrame();
+            this.dragging = false;
+            this.snapTo(this.currentBreakpoint, true, released);
+        };
+        // ── Body drag (scroll-then-drag canon iOS) ───────────────────────────────
+        this.onBodyPointerDown = (event) => {
+            if (!event.isPrimary)
+                return;
+            const target = event.target;
+            if (this.shouldIgnoreBodyDrag(target))
+                return;
+            if (!this.measure())
+                return;
+            /* Solo se arma; el drag real arranca en move si supera el threshold. */
+            this.bodyDragArmed = true;
+            this.bodyDragTarget = target;
+            this.pointerId = event.pointerId;
+            this.dragStartY = event.clientY;
+            this.lastMoveY = event.clientY;
+            this.lastMoveTime = performance.now();
+            this.velocityY = 0;
+        };
+        this.onBodyPointerMove = (event) => {
+            if (this.pointerId !== event.pointerId)
+                return;
+            if (this.dragging) {
+                this.onPointerMove(event);
+                return;
+            }
+            if (!this.bodyDragArmed)
+                return;
+            const deltaY = event.clientY - this.dragStartY;
+            if (Math.abs(deltaY) < SuiModalSheet.BODY_DRAG_THRESHOLD_PX)
+                return;
+            const now = performance.now();
+            const dt = now - this.lastMoveTime;
+            if (dt > 0)
+                this.velocityY = (event.clientY - this.lastMoveY) / dt;
+            this.lastMoveY = event.clientY;
+            this.lastMoveTime = now;
+            /* Con contenido scrolleado el scroll nativo SIEMPRE manda: el sheet solo
+               toma el gesto con todo en top 0 y el dedo hacia abajo. */
+            const body = this.bodyEl;
+            if (this.atMaxBreakpoint && body) {
+                const scrollers = this.scrollersDe(this.bodyDragTarget);
+                if (scrollers.length > 0) {
+                    if (scrollers.some((s) => s.scrollTop > 0))
+                        return;
+                    if (deltaY <= 0)
+                        return;
+                }
+            }
+            this.bodyDragArmed = false;
+            /* Arranca desde la posicion actual del dedo (touch slop, como UIKit). */
+            this.beginDrag(event);
+            try {
+                body === null || body === void 0 ? void 0 : body.setPointerCapture(event.pointerId);
+            }
+            catch (_a) {
+                /* noop */
+            }
+            event.preventDefault();
+        };
+        this.onBackdropClick = () => {
+            if (this.closeOnBackdrop && this.backdropInteractive)
+                this.snapTo(0, true);
+        };
+    }
+    componentWillLoad() {
+        if (this.open) {
+            this.wasOpen = true;
+            this.onOpen();
+        }
+    }
+    disconnectedCallback() {
+        this.removeEscapeHandler();
+        this.detachTouchSuppressor();
+        this.stopObservingSize();
+        this.cancelPendingClose();
+        this.cancelFrame();
+        this.unlockBodyScroll();
+        if (this.initialTimer)
+            clearTimeout(this.initialTimer);
+    }
+    onOpenWatch(isOpen) {
+        if (isOpen && !this.wasOpen) {
+            this.onOpen();
+        }
+        else if (!isOpen && this.wasOpen) {
+            this.onClose();
+        }
+        this.wasOpen = isOpen;
+    }
+    // ── Public API (methods) ────────────────────────────────────────────────────
+    /**
+     * Mueve el sheet a un breakpoint especifico programaticamente.
+     * Si `breakpoint` no esta en el array de breakpoints, no hace nada.
+     */
+    async setCurrentBreakpoint(breakpoint, animated = true) {
+        if (!this.breakpoints.includes(breakpoint)) {
+            console.warn(`[sui-modal-sheet] Breakpoint ${breakpoint} no esta en el array`);
+            return;
+        }
+        this.snapTo(breakpoint, animated);
+    }
+    /** Cierra el sheet (equivale a setear `open = false`). */
+    async close() {
+        this.setOpen(false);
+    }
+    setOpen(value) {
+        if (this.open === value)
+            return;
+        this.open = value;
+        this.openChange.emit(value);
+    }
+    // ── Handlers de open/close ────────────────────────────────────────────────
+    onOpen() {
+        this.previousFocus = document.activeElement;
+        this.lockBodyScroll();
+        this.attachEscapeHandler();
+        /* Snap al initial breakpoint en el siguiente tick (ya renderizado y medible).
+           El panel nace en `translate: 0 100%` y la lectura de offsetHeight de
+           `measure()` fuerza el recalculo de estilo: la entrada se ve deslizando. */
+        this.initialTimer = setTimeout(() => {
+            this.snapTo(this.initialBreakpoint, true);
+            this.attachTouchSuppressor();
+            this.observeSize();
+        }, 0);
+    }
+    onClose() {
+        var _a, _b;
+        if (this.initialTimer)
+            clearTimeout(this.initialTimer);
+        this.removeEscapeHandler();
+        this.detachTouchSuppressor();
+        this.stopObservingSize();
+        this.cancelPendingClose();
+        this.cancelFrame();
+        this.unlockBodyScroll();
+        this.pointerId = null;
+        this.bodyDragArmed = false;
+        this.dragging = false;
+        (_b = (_a = this.previousFocus) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+        this.previousFocus = null;
+        this.restProgress = 0;
+        this.currentBreakpoint = 0;
+        this.closed.emit();
+    }
+    // ── Derivados ─────────────────────────────────────────────────────────────
+    /** True si el backdrop debe capturar pointer events (rest > backdropBreakpoint). */
+    get backdropInteractive() {
+        return this.restProgress > this.backdropBreakpoint;
+    }
+    get maxBreakpoint() {
+        const bps = this.breakpoints;
+        return bps && bps.length ? Math.max(...bps) : 1;
+    }
+    /** Techo ESTATICO de altura: con `height: max-content` el sheet mide su
+     *  contenido y esto lo acota. No cambia por drag ni por snap. */
+    get maxHeightCss() {
+        return `min(${this.maxBreakpoint * 100}dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 16px))`;
+    }
+    /** Al breakpoint maximo el body scrollea (touch-action pan-y); antes actua
+     *  como handle gigante (touch-action none). */
+    get atMaxBreakpoint() {
+        if (!this.breakpoints || this.breakpoints.length === 0)
+            return false;
+        return this.currentBreakpoint >= this.maxBreakpoint;
+    }
+    attachTouchSuppressor() {
+        const body = this.bodyEl;
+        if (!body || this.touchMoveHandler)
+            return;
+        this.touchStartHandler = (e) => {
+            var _a, _b;
+            this.touchStartY = (_b = (_a = e.touches[0]) === null || _a === void 0 ? void 0 : _a.clientY) !== null && _b !== void 0 ? _b : 0;
+            this.touchTarget = e.target;
+        };
+        this.touchMoveHandler = (e) => {
+            var _a, _b;
+            const dy = ((_b = (_a = e.touches[0]) === null || _a === void 0 ? void 0 : _a.clientY) !== null && _b !== void 0 ? _b : 0) - this.touchStartY;
+            if (this.dragging) {
+                if (e.cancelable)
+                    e.preventDefault();
+                return;
+            }
+            if (this.atMaxBreakpoint && dy > 0 && e.cancelable) {
+                if (!this.scrollersDe(this.touchTarget).some((s) => s.scrollTop > 0)) {
+                    e.preventDefault();
+                }
+            }
+        };
+        body.addEventListener('touchstart', this.touchStartHandler, { passive: true });
+        body.addEventListener('touchmove', this.touchMoveHandler, { passive: false });
+    }
+    detachTouchSuppressor() {
+        const body = this.bodyEl;
+        if (body) {
+            if (this.touchStartHandler)
+                body.removeEventListener('touchstart', this.touchStartHandler);
+            if (this.touchMoveHandler)
+                body.removeEventListener('touchmove', this.touchMoveHandler);
+        }
+        this.touchStartHandler = undefined;
+        this.touchMoveHandler = undefined;
+    }
+    // ── Medicion ──────────────────────────────────────────────────────────────
+    /** Mide H y vh. false si aun no hay layout (sin render o jsdom). Unica
+     *  lectura de layout del gesto: al abrir, al pointerdown y al resize. */
+    measure() {
+        var _a;
+        const container = this.containerEl;
+        const win = (_a = this.el.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
+        if (!container || !win)
+            return false;
+        this.sheetHeight = container.offsetHeight;
+        this.viewportHeight = win.innerHeight || this.el.ownerDocument.documentElement.clientHeight;
+        return this.sheetHeight > 0 && this.viewportHeight > 0;
+    }
+    /** Desplazamiento vertical (px) para un progress: max(0, H - p*vh). */
+    yFor(progress) {
+        if (progress <= 0)
+            return this.sheetHeight;
+        return Math.max(0, this.sheetHeight - progress * this.viewportHeight);
+    }
+    translateFor(progress) {
+        if (progress <= 0)
+            return SuiModalSheet.TRANSLATE_CLOSED;
+        return `0 ${this.yFor(progress)}px`;
+    }
+    /** Progress que el sheet muestra de verdad para un breakpoint (con contenido
+     *  corto varios breakpoints valen y = 0). */
+    effectiveProgress(breakpoint) {
+        if (this.viewportHeight === 0)
+            return breakpoint;
+        const p = (this.sheetHeight - this.yFor(breakpoint)) / this.viewportHeight;
+        return Math.max(0, Math.min(1, p));
+    }
+    /** Progress real leyendo el translate computado del panel (agarrarlo a mitad
+     *  de una transicion sin salto). Fallback: el efectivo del actual. */
+    progressFromDom() {
+        var _a, _b;
+        const fallback = this.effectiveProgress(this.currentBreakpoint);
+        const panel = this.panelEl;
+        const win = (_a = this.el.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
+        if (!panel || !win || this.viewportHeight === 0)
+            return fallback;
+        const raw = win.getComputedStyle(panel).translate;
+        const parts = raw ? raw.trim().split(/\s+/) : [];
+        const yPart = (_b = parts[1]) !== null && _b !== void 0 ? _b : parts[0];
+        if (!yPart || !yPart.endsWith('px'))
+            return fallback;
+        const y = parseFloat(yPart);
+        if (!Number.isFinite(y))
+            return fallback;
+        return Math.max(0, Math.min(1, (this.sheetHeight - y) / this.viewportHeight));
+    }
+    // ── Escrituras al DOM (sin @State) ────────────────────────────────────────
+    writeTranslate(progress) {
+        var _a;
+        (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.style.setProperty('translate', this.translateFor(progress));
+    }
+    writeBackdropOpacity(progress) {
+        var _a;
+        (_a = this.backdropEl) === null || _a === void 0 ? void 0 : _a.style.setProperty('opacity', String(this.computeBackdropOpacity(progress)));
+    }
+    setTransitionDuration(ms) {
+        var _a, _b;
+        (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.style.setProperty('transition-duration', `${ms}ms`);
+        (_b = this.backdropEl) === null || _b === void 0 ? void 0 : _b.style.setProperty('transition-duration', `${ms}ms`);
+    }
+    setDraggingClasses(on) {
+        var _a, _b;
+        const op = on ? 'add' : 'remove';
+        (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.classList[op](SuiModalSheet.CLASS_PANEL_DRAGGING);
+        (_b = this.backdropEl) === null || _b === void 0 ? void 0 : _b.classList[op](SuiModalSheet.CLASS_BACKDROP_DRAGGING);
+    }
+    /** Coalesce: guarda el ultimo progress y escribe UNA vez por frame. */
+    scheduleFrame(progress) {
+        var _a;
+        this.pendingProgress = progress;
+        if (this.frameId !== null)
+            return;
+        const win = (_a = this.el.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
+        if (!win || typeof win.requestAnimationFrame !== 'function') {
+            this.flushFrame();
+            return;
+        }
+        this.frameId = win.requestAnimationFrame(() => {
+            this.frameId = null;
+            this.flushFrame();
+        });
+    }
+    flushFrame() {
+        if (this.pendingProgress === null)
+            return;
+        const p = this.pendingProgress;
+        this.pendingProgress = null;
+        this.writeTranslate(p);
+        this.writeBackdropOpacity(p);
+    }
+    cancelFrame() {
+        var _a, _b;
+        if (this.frameId !== null) {
+            (_b = (_a = this.el.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView) === null || _b === void 0 ? void 0 : _b.cancelAnimationFrame(this.frameId);
+            this.frameId = null;
+        }
+        this.pendingProgress = null;
+    }
+    // ── Tamano del contenido / viewport ───────────────────────────────────────
+    // H entra en la formula: si el contenido crece despues de abrir o el
+    // viewport cambia, se re-deriva la posicion en reposo sin transicion.
+    observeSize() {
+        var _a;
+        const container = this.containerEl;
+        const win = (_a = this.el.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
+        if (!container || !win)
+            return;
+        if (typeof ResizeObserver !== 'undefined' && !this.resizeObserver) {
+            this.resizeObserver = new ResizeObserver(() => this.onSizeChange());
+            this.resizeObserver.observe(container);
+        }
+        if (!this.windowResizeHandler) {
+            this.windowResizeHandler = () => this.onSizeChange();
+            win.addEventListener('resize', this.windowResizeHandler, { passive: true });
+        }
+    }
+    stopObservingSize() {
+        var _a, _b, _c;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver = undefined;
+        if (this.windowResizeHandler) {
+            (_c = (_b = this.el.ownerDocument) === null || _b === void 0 ? void 0 : _b.defaultView) === null || _c === void 0 ? void 0 : _c.removeEventListener('resize', this.windowResizeHandler);
+            this.windowResizeHandler = undefined;
+        }
+    }
+    onSizeChange() {
+        if (this.dragging || !this.open)
+            return;
+        const prevH = this.sheetHeight;
+        const prevVh = this.viewportHeight;
+        if (!this.measure())
+            return;
+        if (prevH === this.sheetHeight && prevVh === this.viewportHeight)
+            return;
+        const p = this.restProgress;
+        if (p <= 0)
+            return;
+        this.setTransitionDuration(0);
+        this.writeTranslate(p);
+        this.writeBackdropOpacity(p);
+    }
+    // ── Drag gesture ──────────────────────────────────────────────────────────
+    /** Arranque comun del drag: congela la transicion en curso, lee la posicion
+     *  real y marca `dragging`. */
+    beginDrag(event) {
+        this.cancelPendingClose();
+        this.cancelFrame();
+        this.pointerId = event.pointerId;
+        this.dragStartY = event.clientY;
+        this.dragStartProgress = this.progressFromDom();
+        this.lastMoveY = event.clientY;
+        this.lastMoveTime = performance.now();
+        this.velocityY = 0;
+        this.setDraggingClasses(true);
+        this.writeTranslate(this.dragStartProgress);
+        this.writeBackdropOpacity(this.dragStartProgress);
+        this.dragging = true;
+    }
+    /** Ignorar drag sobre controles de form o `[data-sui-no-sheet-drag]`. */
+    shouldIgnoreBodyDrag(target) {
+        var _a;
+        if (!target)
+            return false;
+        const tag = target.tagName;
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || tag === 'OPTION')
+            return true;
+        return !!((_a = target.closest) === null || _a === void 0 ? void 0 : _a.call(target, '[data-sui-no-sheet-drag]'));
+    }
+    /** Lo que scrollea bajo un gesto que nace en `target`: cada ancestro con
+     *  overflow-y auto/scroll y contenido de sobra (o ya scrolleado), del dedo
+     *  al body (sin incluirlo), mas el body si desborda. */
+    scrollersDe(target) {
+        var _a;
+        const body = this.bodyEl;
+        if (!body)
+            return [];
+        const out = [];
+        const win = (_a = this.el.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
+        let el = target instanceof HTMLElement && body.contains(target) ? target : null;
+        while (el && el !== body) {
+            if (el.scrollHeight > el.clientHeight || el.scrollTop > 0) {
+                const oy = win === null || win === void 0 ? void 0 : win.getComputedStyle(el).overflowY;
+                if (oy === 'auto' || oy === 'scroll')
+                    out.push(el);
+            }
+            el = el.parentElement;
+        }
+        if (body.scrollHeight > body.clientHeight || body.scrollTop > 0)
+            out.push(body);
+        return out;
+    }
+    // ── Snap ──────────────────────────────────────────────────────────────────
+    /** Duracion segun distancia restante y velocidad del dedo, en [180, 350] ms. */
+    snapDuration(distancePx, velocityPxMs) {
+        const speed = Math.max(velocityPxMs, 0.5);
+        const raw = distancePx / speed;
+        return Math.round(Math.max(SuiModalSheet.SNAP_MIN_MS, Math.min(SuiModalSheet.SNAP_MAX_MS, raw)));
+    }
+    snapTo(breakpoint, animated, fromProgress, velocityPxMs = 0) {
+        this.cancelPendingClose();
+        this.cancelFrame();
+        const measured = this.measure();
+        const from = fromProgress !== null && fromProgress !== void 0 ? fromProgress : this.restProgress;
+        const distance = measured ? Math.abs(this.yFor(breakpoint) - this.yFor(from)) : 0;
+        const duration = animated ? this.snapDuration(distance, velocityPxMs) : 0;
+        /* Mismo tick: sacar la clase que apaga la transicion, fijar la duracion y
+           escribir el destino. */
+        this.setDraggingClasses(false);
+        this.setTransitionDuration(duration);
+        this.writeTranslate(breakpoint);
+        this.writeBackdropOpacity(breakpoint);
+        this.restProgress = breakpoint;
+        if (breakpoint === 0) {
+            this.scheduleClose(duration);
+            return;
+        }
+        if (this.currentBreakpoint !== breakpoint) {
+            this.currentBreakpoint = breakpoint;
+            this.breakpointChange.emit(breakpoint);
+        }
+    }
+    /** Cierra al terminar la transicion del translate (fallback por timeout). */
+    scheduleClose(durationMs) {
+        const finish = () => {
+            this.cancelPendingClose();
+            this.currentBreakpoint = 0;
+            this.setOpen(false);
+        };
+        const panel = this.panelEl;
+        if (durationMs > 0 && panel) {
+            this.closeTransitionHandler = (e) => {
+                if (e.target === panel && e.propertyName === 'translate')
+                    finish();
+            };
+            panel.addEventListener('transitionend', this.closeTransitionHandler);
+        }
+        this.closeTimer = setTimeout(finish, durationMs > 0 ? durationMs + 80 : 0);
+    }
+    cancelPendingClose() {
+        var _a;
+        if (this.closeTimer !== null) {
+            clearTimeout(this.closeTimer);
+            this.closeTimer = null;
+        }
+        if (this.closeTransitionHandler) {
+            (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('transitionend', this.closeTransitionHandler);
+            this.closeTransitionHandler = undefined;
+        }
+    }
+    /** Breakpoint cuyo `yFor` queda mas cerca de `y`. En empate gana el actual
+     *  si esta entre ellos, si no el mayor. */
+    closestBreakpointByY(y) {
+        var _a;
+        const bps = this.breakpoints;
+        const current = this.currentBreakpoint;
+        let best = (_a = bps[0]) !== null && _a !== void 0 ? _a : 0;
+        let bestDist = Infinity;
+        for (const bp of bps) {
+            const d = Math.abs(this.yFor(bp) - y);
+            if (d < bestDist - 0.5) {
+                best = bp;
+                bestDist = d;
+            }
+            else if (Math.abs(d - bestDist) <= 0.5 && (bp === current || (best !== current && bp > best))) {
+                best = bp;
+            }
+        }
+        return best;
+    }
+    // ── Backdrop ──────────────────────────────────────────────────────────────
+    /** Lineal entre (backdropBreakpoint, 0) y (1, 1). Igual que Ionic. */
+    computeBackdropOpacity(progress) {
+        const bp = this.backdropBreakpoint;
+        if (bp >= 1)
+            return 0;
+        const slope = 1 / (1 - bp);
+        return Math.max(0, Math.min(1, slope * (progress - bp)));
+    }
+    // ── Body scroll lock (cooperativo con sui-modal) ──────────────────────────
+    lockBodyScroll() {
+        lockBodyScroll(this.el);
+    }
+    unlockBodyScroll() {
+        unlockBodyScroll(this.el);
+    }
+    // ── Escape key ────────────────────────────────────────────────────────────
+    attachEscapeHandler() {
+        if (this.escapeHandler)
+            return;
+        this.escapeHandler = (e) => {
+            if (e.key === 'Escape' && this.open && this.closeOnEscape)
+                this.snapTo(0, true);
+        };
+        document.addEventListener('keydown', this.escapeHandler);
+    }
+    removeEscapeHandler() {
+        if (this.escapeHandler) {
+            document.removeEventListener('keydown', this.escapeHandler);
+            this.escapeHandler = undefined;
+        }
+    }
+    // ── iOS WKWebView :active fix ─────────────────────────────────────────────
+    onTouchStart() {
+        /* no-op a proposito; la presencia del listener engage el touch pipeline iOS. */
+    }
+    onTouchEnd(event) {
+        var _a, _b;
+        const btn = (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, 'button');
+        if (btn)
+            btn.blur();
+    }
+    render() {
+        return (h(Host, { key: '7045910b00cbb1f757d173dc210e7d1bbaa435ad', "data-sui-sheet-open": this.open ? '' : undefined, "data-sui-sheet-dragging": this.dragging ? '' : undefined }, this.open && [
+            /* Backdrop. Su opacidad la escribe el componente directo en el DOM
+               (en reposo y por frame en el drag). pointer-events none cuando
+               rest <= backdropBreakpoint: el contenido de fondo sigue usable. */
+            h("div", { key: 'e4123a218d8f21a1a3dea6d50a72c4a06272c6e7', class: "sui-sheet__backdrop", style: { pointerEvents: this.backdropInteractive ? 'auto' : 'none' }, onClick: this.onBackdropClick, "aria-hidden": "true", ref: (el) => (this.backdropEl = el) }),
+            /* Marco fijo (recorta, no captura toques). */
+            h("div", { key: '5e0dea9344e60cb6fcba53d8356cc05106f48043', class: "sui-sheet", role: "dialog", "aria-modal": "true", style: { maxHeight: this.maxHeightCss, '--sheet-progress': String(this.restProgress) }, ref: (el) => (this.containerEl = el) }, h("div", { key: '541848a7e3528ddf70cb0a5448be695678076178', class: "sui-sheet__panel", ref: (el) => (this.panelEl = el) }, this.showHandle && (h("div", { key: '12d82d4e55b0cc7af89764d44821ae034df344b7', class: "sui-sheet__handle", onPointerDown: this.onPointerDown, onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onPointerCancel: this.onPointerCancel, ref: (el) => (this.handleEl = el) }, h("div", { key: 'a55610f692e1fac40852575f46985a2d6509bf1e', class: "sui-sheet__handle-pill" }))), h("div", { key: '82496f311e71088e1ee3d3f3b28fc181dd0569bc', class: {
+                    'sui-sheet__body': true,
+                    'sui-sheet__body--full': this.fullBody,
+                    'sui-sheet__body--scrollable': this.atMaxBreakpoint,
+                }, onPointerDown: this.onBodyPointerDown, onPointerMove: this.onBodyPointerMove, onPointerUp: this.onPointerUp, onPointerCancel: this.onPointerCancel, ref: (el) => (this.bodyEl = el) }, h("slot", { key: '57972eff6047acbe7a3cb1144d407ce20fc3d5ee' })))),
+        ]));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "onOpenWatch": 0
+            }]
+    }; }
+};
+/** 5px: mas sensible que el 8 de iOS ("como nativo"). */
+SuiModalSheet.BODY_DRAG_THRESHOLD_PX = 5;
+/** Lookahead de velocidad al soltar (ms), validado en device. */
+SuiModalSheet.VELOCITY_LOOKAHEAD_MS = 80;
+SuiModalSheet.SNAP_MIN_MS = 180;
+SuiModalSheet.SNAP_MAX_MS = 350;
+SuiModalSheet.CLASS_PANEL_DRAGGING = 'sui-sheet__panel--dragging';
+SuiModalSheet.CLASS_BACKDROP_DRAGGING = 'sui-sheet__backdrop--dragging';
+/** Cerrado = el panel baja todo su alto (100%, vale aunque H cambie). */
+SuiModalSheet.TRANSLATE_CLOSED = '0 100%';
+SuiModalSheet.style = suiModalSheetCss();
+
+export { SuiModalSheet as sui_modal_sheet };