@ajuarezso/sui-design-system 0.11.3 → 0.11.5

package/fesm2022/ajuarezso-sui-design-system.mjs

@@ -10578,7 +10578,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  *   - Cuando current ≤ backdropBreakpoint, el backdrop NO captura clicks → contenido
  *     debajo (ej. mapa) sigue interactivo
  *
- * Inspirado en ion-modal sheet de Ionic.
+ * Inspirado en ion-modal sheet de Ionic — con una diferencia deliberada
+ * (comparado contra @ionic/core 2026-07): Ionic evita la pelea scroll↔drag
+ * deshabilitando el scroll del content fuera del max breakpoint y devolviendo
+ * canStart=false sobre el content al máximo — su sheet NO colapsa jalando el
+ * contenido desde scrollTop 0 (solo por handle). Aquí SÍ soportamos ese
+ * handoff (patrón Apple Maps nativo) vía touchmove no-pasivo + takeover.
  *
  * Uso típico para tracking de pedido con mapa abajo:
  * ```html
@@ -10945,38 +10950,29 @@ class SuiModalSheet {
         }
         this.lastMoveY = event.clientY;
         this.lastMoveTime = now;
-        /* Patrón scroll-then-drag canon iOS / X / Apple Maps. Importante: NO
-           desarmamos `bodyDragArmed` cuando el body está scrolleando — re-evaluamos
-           la velocity en cada move para detectar fling tardío. Si el user empieza
-           scrolleando lento y luego "flicka" rápido abajo, igual debe colapsar. */
+        /* Patrón scroll-then-drag: con contenido scrolleado (scrollTop > 0) el
+           scroll nativo SIEMPRE manda — el sheet solo toma el gesto en top 0 con
+           el dedo hacia abajo. La rama vieja de "fling down desde mid-scroll"
+           (colapsar con swipe > 600px/s haciendo body.scrollTop = 0) se ELIMINÓ:
+           teletransportaba la lista del último item al primero en cuanto el
+           supresor iOS dejó fluir los eventos (bug real 2026-07-24). 600px/s es
+           velocidad de scroll normal, no intención de colapso. */
         const body = this.bodyRef?.nativeElement;
         if (this.atMaxBreakpoint() && body) {
             const hasOverflow = body.scrollHeight > body.clientHeight;
             if (hasOverflow) {
                 const scrollTop = body.scrollTop;
                 const draggingDown = deltaY > 0;
-                const FLING_DOWN_THRESHOLD = 0.6; // px/ms ≈ 600 px/s — swipe medio-rápido
-                const flingingDown = this.velocityY > FLING_DOWN_THRESHOLD;
-                if (scrollTop > 0 && !flingingDown) {
-                    /* Body scrolleando suave — dejamos al scroll nativo, mantenemos
-                       armed para re-evaluar fling en próximos moves. */
+                if (scrollTop > 0) {
+                    /* Contenido a medio scroll — scroll nativo, sin excepciones. */
                     return;
                 }
-                if (scrollTop === 0 && !draggingDown) {
-                    /* Top del body + drag arriba → no hay donde expandir, no
-                       desarmamos por si el user cambia dirección. */
+                if (!draggingDown) {
+                    /* Top del body + drag arriba → scrollea contenido; no desarmamos
+                       por si el user cambia dirección. */
                     return;
                 }
-                /* Casos: scrollTop=0 + down, o cualquier scroll + fling rápido →
-                   tomar control del sheet. Si fue fling desde scroll mid, resetear
-                   scrollTop para que el drag arranque limpio sin "salto". */
-                if (scrollTop > 0 && flingingDown) {
-                    body.scrollTop = 0;
-                    /* Reset dragStartY al posición actual del fling para que el drag
-                       del sheet no interprete los pixels ya scrolleados como delta. */
-                    this.dragStartY = event.clientY;
-                    this.dragStartProgress = this.currentBreakpoint();
-                }
+                /* scrollTop = 0 + dedo abajo → el sheet toma el gesto. */
             }
         }
         this.bodyDragArmed = false;
@@ -11070,13 +11066,13 @@ class SuiModalSheet {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiModalSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiModalSheet, isStandalone: true, selector: "sui-modal-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, breakpoints: { classPropertyName: "breakpoints", publicName: "breakpoints", isSignal: true, isRequired: false, transformFunction: null }, initialBreakpoint: { classPropertyName: "initialBreakpoint", publicName: "initialBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, backdropBreakpoint: { classPropertyName: "backdropBreakpoint", publicName: "backdropBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, showHandle: { classPropertyName: "showHandle", publicName: "showHandle", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, fullBody: { classPropertyName: "fullBody", publicName: "fullBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed", breakpointChange: "breakpointChange" }, host: { properties: { "attr.data-sui-sheet-open": "open() ? \"\" : null" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }, { propertyName: "handleRef", first: true, predicate: ["handle"], descendants: true }, { propertyName: "bodyRef", first: true, predicate: ["body"], descendants: true }], ngImport: i0, template: "@if (open()) {\n  <!-- Backdrop con opacity din\u00E1mica.\n       pointer-events: none cuando current \u2264 backdropBreakpoint para dejar\n       interactivo el contenido debajo (ej. mapa). -->\n  <div\n    class=\"sui-sheet__backdrop\"\n    [style.opacity]=\"backdropOpacity()\"\n    [style.pointer-events]=\"backdropInteractive() ? 'auto' : 'none'\"\n    (click)=\"onBackdropClick()\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <!-- Sheet container \u2014 anclado al bottom, altura din\u00E1mica.\n       Usar `height` en vez de transform para que el \u00E1rea \"no cubierta\" del\n       viewport (donde se ve el mapa) NO sea parte del DOM del sheet \u2014\n       contenido de fondo autom\u00E1ticamente interactivo, scroll del body\n       respeta la altura visible (no fantasma). -->\n  <div\n    #container\n    class=\"sui-sheet\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [class.sui-sheet--dragging]=\"dragging()\"\n    [style.max-height]=\"heightCss()\"\n    [style.--sheet-progress]=\"liveProgress()\"\n  >\n    @if (showHandle()) {\n      <!-- Drag handle (pill). Solo este elemento captura los pointer events\n           del drag \u2014 el resto del sheet permite scroll/clicks normales. -->\n      <div\n        #handle\n        class=\"sui-sheet__handle\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerCancel($event)\"\n      >\n        <div class=\"sui-sheet__handle-pill\"></div>\n      </div>\n    }\n\n    <!-- Body con scroll interno. Consumer proyecta su contenido aqu\u00ED.\n         Acepta drag con patr\u00F3n scroll-then-drag (iOS canon):\n         - Si el body est\u00E1 scrolleado (scrollTop > 0), el drag se ignora y\n           el touch hace scroll normal.\n         - Si est\u00E1 en top (scrollTop === 0) y el user arrastra hacia abajo,\n           se inicia drag del sheet.\n         - Si est\u00E1 en max breakpoint y user arrastra hacia abajo, se inicia\n           drag (incluso con scrollTop === 0 ya cubre eso).\n         - Drag hacia arriba siempre permite scroll del body (no roba el gesto). -->\n    <div\n      #body\n      class=\"sui-sheet__body\"\n      [class.sui-sheet__body--full]=\"fullBody()\"\n      [class.sui-sheet__body--scrollable]=\"atMaxBreakpoint()\"\n      (pointerdown)=\"onBodyPointerDown($event)\"\n      (pointermove)=\"onBodyPointerMove($event)\"\n      (pointerup)=\"onPointerUp($event)\"\n      (pointercancel)=\"onPointerCancel($event)\"\n    >\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-sheet__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;transition:opacity .35s cubic-bezier(.32,.72,0,1)}.sui-sheet--dragging~.sui-sheet__backdrop,:host([data-sui-sheet-open]) .sui-sheet--dragging+.sui-sheet__backdrop{transition:none}.sui-sheet{position:fixed;bottom:8px;left:8px;right:8px;z-index:1001;display:flex;flex-direction:column;box-sizing:border-box;height:max-content;background:var(--sui-bg-white-0, #ffffff);border-radius:36px 36px 54px 54px;corner-shape:squircle}@supports (clip-path: shape(from 0 0,close)){.sui-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:drop-shadow(0 -3px 8px rgba(14,18,27,.07))}}.sui-sheet{box-shadow:0 -8px 32px -12px #0e121b2e;overflow:hidden;overscroll-behavior:contain;will-change:max-height;transition:max-height .35s cubic-bezier(.32,.72,0,1)}.sui-sheet--dragging{transition:none}:host-context(html.platform-android) .sui-sheet{border-radius:var(--sui-radius-20, 20px);--sq-t: 25px;--sq-b: 25px}.sui-sheet__handle{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:active{cursor:grabbing}.sui-sheet__handle-pill{width:36px;height:5px;border-radius:999px;background:var(--sui-bg-soft-200, #d4d4d8)}.sui-sheet__body{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{touch-action:pan-y;overscroll-behavior-y:contain}.sui-sheet__body--full{padding:0}@media(max-width:767px){.sui-sheet__body{scrollbar-width:none}.sui-sheet__body::-webkit-scrollbar{display:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiModalSheet, isStandalone: true, selector: "sui-modal-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, breakpoints: { classPropertyName: "breakpoints", publicName: "breakpoints", isSignal: true, isRequired: false, transformFunction: null }, initialBreakpoint: { classPropertyName: "initialBreakpoint", publicName: "initialBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, backdropBreakpoint: { classPropertyName: "backdropBreakpoint", publicName: "backdropBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, showHandle: { classPropertyName: "showHandle", publicName: "showHandle", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, fullBody: { classPropertyName: "fullBody", publicName: "fullBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed", breakpointChange: "breakpointChange" }, host: { properties: { "attr.data-sui-sheet-open": "open() ? \"\" : null" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }, { propertyName: "handleRef", first: true, predicate: ["handle"], descendants: true }, { propertyName: "bodyRef", first: true, predicate: ["body"], descendants: true }], ngImport: i0, template: "@if (open()) {\n  <!-- Backdrop con opacity din\u00E1mica.\n       pointer-events: none cuando current \u2264 backdropBreakpoint para dejar\n       interactivo el contenido debajo (ej. mapa). -->\n  <div\n    class=\"sui-sheet__backdrop\"\n    [style.opacity]=\"backdropOpacity()\"\n    [style.pointer-events]=\"backdropInteractive() ? 'auto' : 'none'\"\n    (click)=\"onBackdropClick()\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <!-- Sheet container \u2014 anclado al bottom, altura din\u00E1mica.\n       Usar `height` en vez de transform para que el \u00E1rea \"no cubierta\" del\n       viewport (donde se ve el mapa) NO sea parte del DOM del sheet \u2014\n       contenido de fondo autom\u00E1ticamente interactivo, scroll del body\n       respeta la altura visible (no fantasma). -->\n  <div\n    #container\n    class=\"sui-sheet\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [class.sui-sheet--dragging]=\"dragging()\"\n    [style.max-height]=\"heightCss()\"\n    [style.--sheet-progress]=\"liveProgress()\"\n  >\n    @if (showHandle()) {\n      <!-- Drag handle (pill). Solo este elemento captura los pointer events\n           del drag \u2014 el resto del sheet permite scroll/clicks normales. -->\n      <div\n        #handle\n        class=\"sui-sheet__handle\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerCancel($event)\"\n      >\n        <div class=\"sui-sheet__handle-pill\"></div>\n      </div>\n    }\n\n    <!-- Body con scroll interno. Consumer proyecta su contenido aqu\u00ED.\n         Acepta drag con patr\u00F3n scroll-then-drag (iOS canon):\n         - Si el body est\u00E1 scrolleado (scrollTop > 0), el drag se ignora y\n           el touch hace scroll normal.\n         - Si est\u00E1 en top (scrollTop === 0) y el user arrastra hacia abajo,\n           se inicia drag del sheet.\n         - Si est\u00E1 en max breakpoint y user arrastra hacia abajo, se inicia\n           drag (incluso con scrollTop === 0 ya cubre eso).\n         - Drag hacia arriba siempre permite scroll del body (no roba el gesto). -->\n    <div\n      #body\n      class=\"sui-sheet__body\"\n      [class.sui-sheet__body--full]=\"fullBody()\"\n      [class.sui-sheet__body--scrollable]=\"atMaxBreakpoint()\"\n      (pointerdown)=\"onBodyPointerDown($event)\"\n      (pointermove)=\"onBodyPointerMove($event)\"\n      (pointerup)=\"onPointerUp($event)\"\n      (pointercancel)=\"onPointerCancel($event)\"\n    >\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-sheet__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;transition:opacity .35s cubic-bezier(.32,.72,0,1)}.sui-sheet--dragging~.sui-sheet__backdrop,:host([data-sui-sheet-open]) .sui-sheet--dragging+.sui-sheet__backdrop{transition:none}.sui-sheet{position:fixed;bottom:8px;left:8px;right:8px;z-index:1001;display:flex;flex-direction:column;box-sizing:border-box;height:max-content;background:var(--sui-bg-white-0, #ffffff);border-radius:36px 36px 54px 54px;corner-shape:squircle}@supports (clip-path: shape(from 0 0,close)){.sui-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{box-shadow:none;overflow:hidden;overscroll-behavior:contain;will-change:max-height;transition:max-height .35s cubic-bezier(.32,.72,0,1)}.sui-sheet--dragging{transition:none}:host-context(html.platform-android) .sui-sheet{border-radius:var(--sui-radius-20, 20px);--sq-t: 25px;--sq-b: 25px}.sui-sheet__handle{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:active{cursor:grabbing}.sui-sheet__handle-pill{width:36px;height:5px;border-radius:999px;background:var(--sui-bg-soft-200, #d4d4d8)}.sui-sheet__body{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{touch-action:pan-y;overscroll-behavior-y:contain}.sui-sheet__body--full{padding:0}@media(max-width:767px){.sui-sheet__body{scrollbar-width:none}.sui-sheet__body::-webkit-scrollbar{display:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiModalSheet, decorators: [{
             type: Component,
             args: [{ selector: 'sui-modal-sheet', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
                         '[attr.data-sui-sheet-open]': 'open() ? "" : null',
-                    }, template: "@if (open()) {\n  <!-- Backdrop con opacity din\u00E1mica.\n       pointer-events: none cuando current \u2264 backdropBreakpoint para dejar\n       interactivo el contenido debajo (ej. mapa). -->\n  <div\n    class=\"sui-sheet__backdrop\"\n    [style.opacity]=\"backdropOpacity()\"\n    [style.pointer-events]=\"backdropInteractive() ? 'auto' : 'none'\"\n    (click)=\"onBackdropClick()\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <!-- Sheet container \u2014 anclado al bottom, altura din\u00E1mica.\n       Usar `height` en vez de transform para que el \u00E1rea \"no cubierta\" del\n       viewport (donde se ve el mapa) NO sea parte del DOM del sheet \u2014\n       contenido de fondo autom\u00E1ticamente interactivo, scroll del body\n       respeta la altura visible (no fantasma). -->\n  <div\n    #container\n    class=\"sui-sheet\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [class.sui-sheet--dragging]=\"dragging()\"\n    [style.max-height]=\"heightCss()\"\n    [style.--sheet-progress]=\"liveProgress()\"\n  >\n    @if (showHandle()) {\n      <!-- Drag handle (pill). Solo este elemento captura los pointer events\n           del drag \u2014 el resto del sheet permite scroll/clicks normales. -->\n      <div\n        #handle\n        class=\"sui-sheet__handle\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerCancel($event)\"\n      >\n        <div class=\"sui-sheet__handle-pill\"></div>\n      </div>\n    }\n\n    <!-- Body con scroll interno. Consumer proyecta su contenido aqu\u00ED.\n         Acepta drag con patr\u00F3n scroll-then-drag (iOS canon):\n         - Si el body est\u00E1 scrolleado (scrollTop > 0), el drag se ignora y\n           el touch hace scroll normal.\n         - Si est\u00E1 en top (scrollTop === 0) y el user arrastra hacia abajo,\n           se inicia drag del sheet.\n         - Si est\u00E1 en max breakpoint y user arrastra hacia abajo, se inicia\n           drag (incluso con scrollTop === 0 ya cubre eso).\n         - Drag hacia arriba siempre permite scroll del body (no roba el gesto). -->\n    <div\n      #body\n      class=\"sui-sheet__body\"\n      [class.sui-sheet__body--full]=\"fullBody()\"\n      [class.sui-sheet__body--scrollable]=\"atMaxBreakpoint()\"\n      (pointerdown)=\"onBodyPointerDown($event)\"\n      (pointermove)=\"onBodyPointerMove($event)\"\n      (pointerup)=\"onPointerUp($event)\"\n      (pointercancel)=\"onPointerCancel($event)\"\n    >\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-sheet__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;transition:opacity .35s cubic-bezier(.32,.72,0,1)}.sui-sheet--dragging~.sui-sheet__backdrop,:host([data-sui-sheet-open]) .sui-sheet--dragging+.sui-sheet__backdrop{transition:none}.sui-sheet{position:fixed;bottom:8px;left:8px;right:8px;z-index:1001;display:flex;flex-direction:column;box-sizing:border-box;height:max-content;background:var(--sui-bg-white-0, #ffffff);border-radius:36px 36px 54px 54px;corner-shape:squircle}@supports (clip-path: shape(from 0 0,close)){.sui-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:drop-shadow(0 -3px 8px rgba(14,18,27,.07))}}.sui-sheet{box-shadow:0 -8px 32px -12px #0e121b2e;overflow:hidden;overscroll-behavior:contain;will-change:max-height;transition:max-height .35s cubic-bezier(.32,.72,0,1)}.sui-sheet--dragging{transition:none}:host-context(html.platform-android) .sui-sheet{border-radius:var(--sui-radius-20, 20px);--sq-t: 25px;--sq-b: 25px}.sui-sheet__handle{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:active{cursor:grabbing}.sui-sheet__handle-pill{width:36px;height:5px;border-radius:999px;background:var(--sui-bg-soft-200, #d4d4d8)}.sui-sheet__body{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{touch-action:pan-y;overscroll-behavior-y:contain}.sui-sheet__body--full{padding:0}@media(max-width:767px){.sui-sheet__body{scrollbar-width:none}.sui-sheet__body::-webkit-scrollbar{display:none}}\n"] }]
+                    }, template: "@if (open()) {\n  <!-- Backdrop con opacity din\u00E1mica.\n       pointer-events: none cuando current \u2264 backdropBreakpoint para dejar\n       interactivo el contenido debajo (ej. mapa). -->\n  <div\n    class=\"sui-sheet__backdrop\"\n    [style.opacity]=\"backdropOpacity()\"\n    [style.pointer-events]=\"backdropInteractive() ? 'auto' : 'none'\"\n    (click)=\"onBackdropClick()\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <!-- Sheet container \u2014 anclado al bottom, altura din\u00E1mica.\n       Usar `height` en vez de transform para que el \u00E1rea \"no cubierta\" del\n       viewport (donde se ve el mapa) NO sea parte del DOM del sheet \u2014\n       contenido de fondo autom\u00E1ticamente interactivo, scroll del body\n       respeta la altura visible (no fantasma). -->\n  <div\n    #container\n    class=\"sui-sheet\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [class.sui-sheet--dragging]=\"dragging()\"\n    [style.max-height]=\"heightCss()\"\n    [style.--sheet-progress]=\"liveProgress()\"\n  >\n    @if (showHandle()) {\n      <!-- Drag handle (pill). Solo este elemento captura los pointer events\n           del drag \u2014 el resto del sheet permite scroll/clicks normales. -->\n      <div\n        #handle\n        class=\"sui-sheet__handle\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerCancel($event)\"\n      >\n        <div class=\"sui-sheet__handle-pill\"></div>\n      </div>\n    }\n\n    <!-- Body con scroll interno. Consumer proyecta su contenido aqu\u00ED.\n         Acepta drag con patr\u00F3n scroll-then-drag (iOS canon):\n         - Si el body est\u00E1 scrolleado (scrollTop > 0), el drag se ignora y\n           el touch hace scroll normal.\n         - Si est\u00E1 en top (scrollTop === 0) y el user arrastra hacia abajo,\n           se inicia drag del sheet.\n         - Si est\u00E1 en max breakpoint y user arrastra hacia abajo, se inicia\n           drag (incluso con scrollTop === 0 ya cubre eso).\n         - Drag hacia arriba siempre permite scroll del body (no roba el gesto). -->\n    <div\n      #body\n      class=\"sui-sheet__body\"\n      [class.sui-sheet__body--full]=\"fullBody()\"\n      [class.sui-sheet__body--scrollable]=\"atMaxBreakpoint()\"\n      (pointerdown)=\"onBodyPointerDown($event)\"\n      (pointermove)=\"onBodyPointerMove($event)\"\n      (pointerup)=\"onPointerUp($event)\"\n      (pointercancel)=\"onPointerCancel($event)\"\n    >\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-sheet__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;transition:opacity .35s cubic-bezier(.32,.72,0,1)}.sui-sheet--dragging~.sui-sheet__backdrop,:host([data-sui-sheet-open]) .sui-sheet--dragging+.sui-sheet__backdrop{transition:none}.sui-sheet{position:fixed;bottom:8px;left:8px;right:8px;z-index:1001;display:flex;flex-direction:column;box-sizing:border-box;height:max-content;background:var(--sui-bg-white-0, #ffffff);border-radius:36px 36px 54px 54px;corner-shape:squircle}@supports (clip-path: shape(from 0 0,close)){.sui-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{box-shadow:none;overflow:hidden;overscroll-behavior:contain;will-change:max-height;transition:max-height .35s cubic-bezier(.32,.72,0,1)}.sui-sheet--dragging{transition:none}:host-context(html.platform-android) .sui-sheet{border-radius:var(--sui-radius-20, 20px);--sq-t: 25px;--sq-b: 25px}.sui-sheet__handle{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:active{cursor:grabbing}.sui-sheet__handle-pill{width:36px;height:5px;border-radius:999px;background:var(--sui-bg-soft-200, #d4d4d8)}.sui-sheet__body{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{touch-action:pan-y;overscroll-behavior-y:contain}.sui-sheet__body--full{padding:0}@media(max-width:767px){.sui-sheet__body{scrollbar-width:none}.sui-sheet__body::-webkit-scrollbar{display:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], breakpoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoints", required: false }] }], initialBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialBreakpoint", required: false }] }], backdropBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropBreakpoint", required: false }] }], showHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHandle", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], fullBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullBody", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], breakpointChange: [{ type: i0.Output, args: ["breakpointChange"] }], containerRef: [{
                 type: ViewChild,
                 args: ['container']