@breadstone/mosaik-elements-foundation 0.1.50 → 0.1.51

package/Controls/Components/Overlays/Sheet/SheetElement.js

@@ -8,17 +8,25 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-import { on } from '@breadstone/mosaik-elements';
+import { HTMLElementEventEmitter } from '@breadstone/mosaik-elements';
 import { CssLength } from '@breadstone/mosaik-themes';
 import { RendererServiceLocator } from '../../../../Dom/Renderer';
+import { clamp } from '../../../../Extensions/NumberExtensions';
+import { applyElasticity, resolveSnapLength, resolveSnaps, selectSnap, verticalPointerDelta } from '../../../../Utilities/SnapEngine';
 import { Slottable } from '../../../Behaviors/Slottable';
 import { Themeable } from '../../../Behaviors/Themeable';
-import { addFocusTrapController } from '../../../Controllers/FocusTrapController';
 import { addInheritanceProviderController } from '../../../Controllers/InheritanceProviderController';
+import { ModalController } from '../../../Controllers/ModalController';
 import { Attribute } from '../../../Decorators/AttributeDecorator';
 import { Component } from '../../../Decorators/ComponentDecorator';
+import { Watch } from '../../../Decorators/WatchDecorator';
+import { Emit } from '../../../../events/Decorators/EmitDecorator';
+import { SheetDragMode } from '../../../Types/SheetDragMode';
+import { SheetPosition } from '../../../Types/SheetPosition';
+import { SheetSnap } from '../../../Types/SheetSnap';
 import { BackdropElement } from '../../Primitives/Backdrop/BackdropElement';
 import { OverlayElement } from '../Abstracts/OverlayElement';
+import { ISheetElementProps } from './ISheetElementProps';
 import { SheetContentElement } from './SheetContentElement';
 import { sheetElementTemplate } from './SheetElementTemplate';
 import { SheetFooterElement } from './SheetFooterElement';
@@ -27,12 +35,16 @@ import { SHEET_INHERITANCE_CONTEXT } from './SheetInheritanceContext';
 import { sheetElementCosmopolitanStyle } from './Themes/SheetElement.Cosmopolitan';
 import { sheetElementJoyStyle } from './Themes/SheetElement.Joy';
 import { sheetElementMemphisStyle } from './Themes/SheetElement.Memphis';
+// #endregion
+const INTERACTIVE_SELECTOR = 'button,a[href],input,select,textarea,summary,[role="button"],[contenteditable="true"]';
+const AXIS_LOCK_THRESHOLD = 6;
 /**
- * Sheet - A bottom-sheet overlay element that slides up from the bottom of the viewport.
+ * Sheet - A mobile-first, snap-based overlay entering from the top or bottom edge.
  *
  * @description
- * A gesture-driven bottom sheet that supports drag to open, close, and partial states.
- * Use the `height` attribute to control the initial expanded height.
+ * Supports pointer gestures, velocity-based snap selection, scroll handoff and optional modal behavior.
+ * Runtime state is exposed through `data-state`, `data-dragging`, `data-snap-index` and `data-max-snap`.
+ * The `root` part publishes `--sheet-progress` from `0` to `1` and `--sheet-resolved-height` in CSS pixels.
  *
  * @name Sheet
  * @element mosaik-sheet
@@ -43,13 +55,21 @@ import { sheetElementMemphisStyle } from './Themes/SheetElement.Memphis';
  * @slot header - The header slot for `SheetHeaderElement`.
  *
  * @csspart backdrop - The backdrop part.
- * @csspart heading - The heading part.
- * @csspart root - The root part.
- * @csspart thumb - The thumb part.
+ * @csspart body - The body part.
+ * @csspart content-slot - The slot that projects the scrollable sheet content.
+ * @csspart footer-slot - The slot that projects the sheet footer.
+ * @csspart handle - The visual drag handle.
+ * @csspart header-slot - The slot that projects the sheet header.
+ * @csspart heading - The sheet heading and gesture affordance.
+ * @csspart root - The movable sheet surface.
+ * @csspart snap-indicator - Container for snap indicators.
+ * @csspart snap-indicator-item - An individual snap indicator.
  *
  * @cssprop {String} --sheet-background-color - The background color CSS custom property.
  * @cssprop {String} --sheet-border-color - The border color CSS custom property.
+ * @cssprop {String} --sheet-border-radius - The border radius CSS custom property.
  * @cssprop {String} --sheet-border-width - The border width CSS custom property.
+ * @cssprop {String} --sheet-edge-offset - The edge offset CSS custom property.
  * @cssprop {String} --sheet-font-family - The font family CSS custom property.
  * @cssprop {String} --sheet-font-letter-spacing - The font letter spacing CSS custom property.
  * @cssprop {String} --sheet-font-line-height - The font line height CSS custom property.
@@ -59,6 +79,12 @@ import { sheetElementMemphisStyle } from './Themes/SheetElement.Memphis';
  * @cssprop {String} --sheet-font-weight - The font weight CSS custom property.
  * @cssprop {String} --sheet-foreground-color - The foreground color CSS custom property.
  * @cssprop {String} --sheet-gap - The gap CSS custom property.
+ * @cssprop {String} --sheet-handle-background-color - The handle background color CSS custom property.
+ * @cssprop {String} --sheet-handle-border-radius - The handle border radius CSS custom property.
+ * @cssprop {String} --sheet-handle-height - The handle height CSS custom property.
+ * @cssprop {String} --sheet-handle-margin - The handle margin CSS custom property.
+ * @cssprop {String} --sheet-handle-width - The handle width CSS custom property.
+ * @cssprop {String} --sheet-max-width - The max width CSS custom property.
  * @cssprop {String} --sheet-padding-bottom - The padding bottom CSS custom property.
  * @cssprop {String} --sheet-padding-left - The padding left CSS custom property.
  * @cssprop {String} --sheet-padding-right - The padding right CSS custom property.
@@ -69,74 +95,138 @@ import { sheetElementMemphisStyle } from './Themes/SheetElement.Memphis';
  * @cssprop {String} --sheet-shadow-offset-x - The shadow offset x CSS custom property.
  * @cssprop {String} --sheet-shadow-offset-y - The shadow offset y CSS custom property.
  * @cssprop {String} --sheet-shadow-spread - The shadow spread CSS custom property.
+ * @cssprop {String} --sheet-snap-indicator-active-background-color - The snap indicator active background color CSS custom property.
+ * @cssprop {String} --sheet-snap-indicator-background-color - The snap indicator background color CSS custom property.
+ * @cssprop {String} --sheet-snap-indicator-border-radius - The snap indicator border radius CSS custom property.
+ * @cssprop {String} --sheet-snap-indicator-gap - The snap indicator gap CSS custom property.
+ * @cssprop {String} --sheet-snap-indicator-size - The snap indicator size CSS custom property.
  * @cssprop {String} --sheet-transition-duration - The transition duration CSS custom property.
  * @cssprop {String} --sheet-transition-mode - The transition mode CSS custom property.
  * @cssprop {String} --sheet-transition-property - The transition property CSS custom property.
  * @cssprop {String} --sheet-translate - The translate CSS custom property.
  * @cssprop {String} --sheet-translate-y - The translate y CSS custom property.
+ * @cssprop {String} --sheet-z-index - The stacking order CSS custom property.
+ *
+ * @fires activeSnapChanged {ActiveSnapChangedEvent} - Fired after the active snap changes.
+ * @fires dragStart {DragStartEvent} - Fired when a vertical sheet gesture starts.
+ * @fires dragging {DraggingEvent} - Fired while the sheet is dragged.
+ * @fires dragEnd {DragEndEvent} - Fired when a sheet gesture ends.
  *
  * @dependency mosaik-backdrop - The Backdrop element.
  *
  * @example
- * Basic bottom sheet:
+ * Mobile checkout summary with three selectable snap extents:
  * ```html
- * <mosaik-sheet></mosaik-sheet>
+ * <mosaik-sheet snaps="25% 55% 90%" active-snap-index="1" is-modal>
+ *   <mosaik-sheet-header slot="header">Order summary</mosaik-sheet-header>
+ *   <mosaik-sheet-content slot="content">Checkout details</mosaik-sheet-content>
+ *   <mosaik-sheet-footer slot="footer">Checkout actions</mosaik-sheet-footer>
+ * </mosaik-sheet>
  * ```
  *
  * @example
- * Bottom sheet with custom height:
+ * Search filters that expand from the top and adapt to their content:
  * ```html
- * <mosaik-sheet height="50vh"></mosaik-sheet>
+ * <mosaik-sheet position="top" height="100dvh" snaps="content 90%" drag-mode="handle">
+ *   <mosaik-sheet-header slot="header">Filters</mosaik-sheet-header>
+ *   <mosaik-sheet-content slot="content">Filter controls</mosaik-sheet-content>
+ * </mosaik-sheet>
  * ```
  *
  * @public
  */
 let SheetElement = class SheetElement extends Themeable(Slottable(OverlayElement)) {
     // #region Fields
-    _bounceOffset;
+    _activeSnapChanged;
+    _dragStart;
+    _dragging;
+    _dragEnd;
+    _modalController;
+    _width;
     _height;
-    _dragOffset;
-    _positionY;
-    _isPartial;
-    _mouseDownSubscription;
-    _touchStartSubscription;
-    _mouseUpSubscription;
-    _touchEndSubscription;
-    _mouseMoveSubscription;
-    _touchMoveSubscription;
-    _clickSubscription;
+    _position;
+    _snaps;
+    _activeSnapIndex;
+    _activeSnapIndexExplicit;
+    _closeThreshold;
+    _elastic;
+    _inertia;
+    _dragMode;
+    _hasHandle;
+    _hasSnapIndicator;
+    _isModal;
+    _resolvedSnaps;
+    _visibleExtent;
+    _maxExtent;
+    _pointerId;
+    _startX;
+    _startY;
+    _lastY;
+    _startExtent;
+    _isDragging;
+    _axisRejected;
+    _samples;
+    _resizeObserver;
+    _observedRoot;
+    _visualViewportHandler;
+    _measureFrame;
     // #endregion
     // #region Ctor
     /**
+     * Constructs a new instance of the `SheetElement` class.
+     *
      * @public
      */
     constructor() {
         super();
-        this._height = '60vh';
-        this._dragOffset = 0;
-        this._bounceOffset = 35;
-        this._positionY = 0;
-        this._isPartial = false;
-        this._mouseDownSubscription = null;
-        this._touchStartSubscription = null;
-        this._mouseUpSubscription = null;
-        this._touchEndSubscription = null;
-        this._mouseMoveSubscription = null;
-        this._touchMoveSubscription = null;
-        this._clickSubscription = null;
-        addFocusTrapController(this);
+        this._activeSnapChanged = new HTMLElementEventEmitter(this, 'activeSnapChanged');
+        this._dragStart = new HTMLElementEventEmitter(this, 'dragStart');
+        this._dragging = new HTMLElementEventEmitter(this, 'dragging');
+        this._dragEnd = new HTMLElementEventEmitter(this, 'dragEnd');
+        this._modalController = new ModalController(this);
+        this._width = ISheetElementProps.DEFAULTS.width;
+        this._height = ISheetElementProps.DEFAULTS.height;
+        this._position = ISheetElementProps.DEFAULTS.position;
+        this._snaps = [...ISheetElementProps.DEFAULTS.snaps];
+        this._activeSnapIndex = ISheetElementProps.DEFAULTS.activeSnapIndex;
+        this._activeSnapIndexExplicit = false;
+        this._closeThreshold = ISheetElementProps.DEFAULTS.closeThreshold;
+        this._elastic = ISheetElementProps.DEFAULTS.elastic;
+        this._inertia = ISheetElementProps.DEFAULTS.inertia;
+        this._dragMode = ISheetElementProps.DEFAULTS.dragMode;
+        this._hasHandle = ISheetElementProps.DEFAULTS.hasHandle;
+        this._hasSnapIndicator = ISheetElementProps.DEFAULTS.hasSnapIndicator;
+        this._isModal = ISheetElementProps.DEFAULTS.isModal;
+        this._resolvedSnaps = [];
+        this._visibleExtent = 0;
+        this._maxExtent = 0;
+        this._pointerId = null;
+        this._startX = 0;
+        this._startY = 0;
+        this._lastY = 0;
+        this._startExtent = 0;
+        this._isDragging = false;
+        this._axisRejected = false;
+        this._samples = [];
+        this._resizeObserver = null;
+        this._observedRoot = null;
+        this._visualViewportHandler = null;
+        this._measureFrame = null;
+        this.handleViewportResize = this.handleViewportResize.bind(this);
+        this.handlePointerDown = this.handlePointerDown.bind(this);
+        this.handlePointerMove = this.handlePointerMove.bind(this);
+        this.handlePointerUp = this.handlePointerUp.bind(this);
+        this.handlePointerCancel = this.handlePointerCancel.bind(this);
+        this.onBackdrop = this.onBackdrop.bind(this);
         addInheritanceProviderController(this, {
             context: SHEET_INHERITANCE_CONTEXT,
-            values: () => ({
-                closeable: this.closeable
-            })
+            values: () => ({ closeable: this.closeable })
         });
     }
     // #endregion
     // #region Properties
     /**
-     * Returns the `is` property.
-     * The `is` property represents natural name of this element.
+     * Returns the natural name of this element.
      *
      * @public
      * @static
@@ -146,10 +236,29 @@ let SheetElement = class SheetElement extends Themeable(Slottable(OverlayElement
         return 'mosaik-sheet';
     }
     /**
-     * Gets or sets the `height` property.
+     * Gets or sets the width of the sheet surface.
+     * The width remains constrained by the viewport and the theme's maximum width.
+     *
+     * @public
+     * @attr
+     * @default '100%'
+     */
+    get width() {
+        return this._width;
+    }
+    set width(value) {
+        if (this._width !== value) {
+            this._width = value;
+            this.requestUpdate('width');
+        }
+    }
+    /**
+     * Gets or sets the maximum visible extent of the sheet.
+     * The `auto` value uses the measured content height.
      *
      * @public
      * @attr
+     * @default '60dvh'
      */
     get height() {
         return this._height;
@@ -160,181 +269,877 @@ let SheetElement = class SheetElement extends Themeable(Slottable(OverlayElement
             this.requestUpdate('height');
         }
     }
+    /**
+     * Gets or sets the viewport edge from which the sheet opens.
+     *
+     * @public
+     * @attr
+     * @default 'bottom'
+     */
+    get position() {
+        return this._position;
+    }
+    set position(value) {
+        if (this._position !== value) {
+            this._position = value;
+            this.requestUpdate('position');
+        }
+    }
+    /**
+     * Gets or sets the sheet's snap extents.
+     * Values are resolved, clamped to `height`, sorted and de-duplicated.
+     * The `content` value uses the measured content height.
+     * In plain HTML, provide a space-separated list such as `snaps="25% content 90dvh"`.
+     * Invalid values and the unsupported `auto` value throw a descriptive error.
+     *
+     * @public
+     * @attr
+     * @default []
+     */
+    get snaps() {
+        return this._snaps;
+    }
+    set snaps(value) {
+        const next = Array.isArray(value) ? value : [];
+        if (this._snaps !== next) {
+            this._snaps = next;
+            this.requestUpdate('snaps');
+        }
+    }
+    /**
+     * Gets or sets the active index in the resolved, ascending snap list.
+     * Invalid values are clamped to an available index.
+     *
+     * @public
+     * @attr
+     * @default 0
+     */
+    get activeSnapIndex() {
+        return this._activeSnapIndex;
+    }
+    set activeSnapIndex(value) {
+        this._activeSnapIndexExplicit = true;
+        const next = this.clampSnapIndex(value);
+        if (this._activeSnapIndex !== next) {
+            this._activeSnapIndex = next;
+            this.requestUpdate('activeSnapIndex');
+        }
+    }
+    /**
+     * Gets or sets the close threshold as a fraction of the maximum extent.
+     * Values are clamped to the range from `0` to `1`.
+     *
+     * @public
+     * @attr
+     * @default 0.25
+     */
+    get closeThreshold() {
+        return this._closeThreshold;
+    }
+    set closeThreshold(value) {
+        const next = clamp(Number.isFinite(value) ? value : ISheetElementProps.DEFAULTS.closeThreshold, 0, 1);
+        if (this._closeThreshold !== next) {
+            this._closeThreshold = next;
+            this.requestUpdate('closeThreshold');
+        }
+    }
+    /**
+     * Gets or sets whether dragging beyond the legal range uses elastic resistance.
+     *
+     * @public
+     * @attr
+     * @default true
+     */
+    get elastic() {
+        return this._elastic;
+    }
+    set elastic(value) {
+        this.setBooleanProperty('_elastic', 'elastic', value);
+    }
+    /**
+     * Gets or sets whether release velocity influences the landing snap.
+     *
+     * @public
+     * @attr
+     * @default true
+     */
+    get inertia() {
+        return this._inertia;
+    }
+    set inertia(value) {
+        this.setBooleanProperty('_inertia', 'inertia', value);
+    }
+    /**
+     * Gets or sets the area from which a sheet gesture may start.
+     * Interactive controls never start a sheet gesture.
+     *
+     * @public
+     * @attr
+     * @default 'sheet'
+     */
+    get dragMode() {
+        return this._dragMode;
+    }
+    set dragMode(value) {
+        if (this._dragMode !== value) {
+            this._dragMode = value;
+            this.requestUpdate('dragMode');
+        }
+    }
+    /**
+     * Gets or sets whether the built-in drag handle is rendered.
+     *
+     * @public
+     * @attr
+     * @default true
+     */
+    get hasHandle() {
+        return this._hasHandle;
+    }
+    set hasHandle(value) {
+        this.setBooleanProperty('_hasHandle', 'hasHandle', value);
+    }
+    /**
+     * Gets or sets whether indicators for the resolved snaps are rendered.
+     *
+     * @public
+     * @attr
+     * @default false
+     */
+    get hasSnapIndicator() {
+        return this._hasSnapIndicator;
+    }
+    set hasSnapIndicator(value) {
+        this.setBooleanProperty('_hasSnapIndicator', 'hasSnapIndicator', value);
+    }
+    /**
+     * Gets or sets whether the open sheet traps focus, restores focus and locks document scrolling.
+     *
+     * @public
+     * @attr
+     * @default false
+     */
+    get isModal() {
+        return this._isModal;
+    }
+    set isModal(value) {
+        if (this._isModal !== value) {
+            this._isModal = value;
+            this.requestUpdate('isModal');
+        }
+    }
+    /**
+     * Called after the active snap changes.
+     * Provides `IActiveSnapChangedEventDetail` as event detail.
+     *
+     * @public
+     * @readonly
+     * @eventProperty
+     */
+    get activeSnapChanged() {
+        return this._activeSnapChanged;
+    }
+    /**
+     * Called when a vertical sheet gesture starts.
+     * Provides `IDragStartEventDetail` as event detail.
+     *
+     * @public
+     * @readonly
+     * @eventProperty
+     */
+    get dragStart() {
+        return this._dragStart;
+    }
+    /**
+     * Called while the sheet is moved by a vertical pointer gesture.
+     * Provides `IDraggingEventDetail` as event detail.
+     *
+     * @public
+     * @readonly
+     * @eventProperty
+     */
+    get dragging() {
+        return this._dragging;
+    }
+    /**
+     * Called when a vertical sheet gesture ends.
+     * Provides `IDragEndEventDetail` as event detail.
+     *
+     * @public
+     * @readonly
+     * @eventProperty
+     */
+    get dragEnd() {
+        return this._dragEnd;
+    }
     // #endregion
     // #region Methods
     /**
-     * Opens the `SheetElement`.
+     * @inheritdoc
+     * @public
+     * @override
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.isOpen) {
+            this.activateInteractionResources();
+        }
+    }
+    /**
+     * @inheritdoc
+     * @public
+     * @override
+     */
+    disconnectedCallback() {
+        this.deactivateInteractionResources();
+        this._modalController.deactivate();
+        super.disconnectedCallback();
+    }
+    /**
+     * Opens the sheet at its active snap.
      *
      * @public
      * @override
+     * @returns A promise that resolves after the sheet has opened.
      */
     async open() {
-        return super.open().then(() => {
-            const root = this.getTemplatePart('root');
-            this.moveDragElement(window.innerHeight - root.clientHeight, 'open');
-            RendererServiceLocator.current.setAttribute(this, 'state', 'open');
-        });
+        await super.open();
+        await this.updateComplete;
+        this.activateInteractionResources();
+        this.measure();
+        this.moveToSnap(this.clampSnapIndex(this._activeSnapIndex), false);
+        this.setState('open');
+        if (this.isModal) {
+            this._modalController.activate();
+        }
     }
     /**
-     * Closes the `SheetElement`.
+     * Closes the sheet through the normal overlay lifecycle.
      *
      * @public
      * @override
+     * @returns A promise resolving to whether the sheet was closed.
      */
     async close() {
-        return super.close().then((x) => {
-            if (x) {
-                if (this.closeable) {
-                    this.moveDragElement(window.innerHeight + 50, 'close');
-                    RendererServiceLocator.current.setAttribute(this, 'state', 'close');
-                }
-            }
-            return x;
-        });
+        if (!this.isOpen) {
+            return false;
+        }
+        this._modalController.deactivate();
+        this.setTransition(true);
+        this.setVisibleExtent(0);
+        this.setState('closed');
+        await this.waitForMotion();
+        return super.close();
     }
     /**
-     * Sets the sheet to a partial (peek) state, showing only the heading area.
+     * Moves the open sheet to a configured snap.
+     * Invalid indices are clamped to the resolved snap range.
      *
      * @public
+     * @param index - The target index in the resolved, ascending snap list.
      */
-    partial() {
-        const heading = this.getTemplatePart('heading');
-        this.moveDragElement(window.innerHeight - heading.clientHeight - this._bounceOffset, 'partial');
-        RendererServiceLocator.current.setAttribute(this, 'state', 'partial');
+    snapTo(index) {
+        const next = this.clampSnapIndex(index);
+        const previous = this._activeSnapIndex;
+        this._activeSnapIndex = next;
+        this.requestUpdate('activeSnapIndex');
+        this.moveToSnap(next, true, previous);
     }
     /**
-     * Toggles between open and partial states.
+     * Handles a backdrop activation according to the sheet dismissal configuration.
      *
-     * @public
+     * @internal
+     * @hidden
      */
-    async toggle() {
-        if (this._isPartial) {
-            return this.open();
+    onBackdrop() {
+        if (this.clickOutsideToClose && this.requestClose('outside')) {
+            void this.close();
         }
-        this.partial();
-        return Promise.resolve();
     }
     /**
+     * Handles open-state changes without overriding the overlay's internal state hook.
+     *
      * @protected
-     * @override
      */
     onApplyTemplate() {
         super.onApplyTemplate();
-        const heading = this.getTemplatePart('heading');
-        this._clickSubscription = on(heading, 'click', () => void this.toggle());
-        this._mouseDownSubscription = on(heading, 'mousedown', (e) => this.dragMouseDown(e));
-        this._touchStartSubscription = on(heading, 'touchstart', (e) => this.dragMouseDown(e), { passive: true });
+        const root = this.getTemplatePart('root');
+        if (this._observedRoot && this._observedRoot !== root) {
+            this.detachPointerListeners(this._observedRoot);
+        }
+        this._observedRoot = root;
+        if (this.isOpen) {
+            this.activateInteractionResources();
+            this.queueMeasurement();
+        }
     }
     /**
-     * Handles the backdrop click event.
-     * Only closes the sheet if `clickOutsideToClose` is enabled.
+     * Keeps dialog semantics on the sheet surface instead of the custom-element host.
      *
-     * @public
-     * @template
+     * @protected
      */
-    onBackdrop() {
-        if (this.clickOutsideToClose && this.requestClose('outside')) {
-            void this.close();
+    onIsOpenPropertyChanged(_previous, next) {
+        if (next) {
+            this.activateInteractionResources();
+            this.queueMeasurement();
+            this.setState('open');
+            if (this.isModal) {
+                this._modalController.activate();
+            }
+        }
+        else {
+            this.deactivateInteractionResources();
+            this._modalController.deactivate();
+            this.setState('closed');
         }
     }
     /**
-     * @private
+     * @inheritdoc
+     * @protected
+     * @override
      */
-    dragMouseDown(e) {
-        const target = e.target;
-        this._mouseUpSubscription = on(window, 'mouseup', (x) => this.dragMouseUp(x));
-        this._mouseMoveSubscription = on(window, 'mousemove', (x) => this.dragMouseMove(x));
-        this._touchEndSubscription = on(window, 'touchend', (x) => this.dragMouseUp(x));
-        this._touchMoveSubscription = on(window, 'touchmove', (x) => this.dragMouseMove(x));
-        this._positionY = this.getYCoord(e);
-        this._dragOffset = this._positionY - target.getBoundingClientRect().top;
-        document.body.style.overscrollBehaviorY = 'none';
+    onSheetHasBackdropPropertyChanged(_previous, _next) {
+        // Dialog semantics live on the movable surface, not on the custom-element host.
+        RendererServiceLocator.current.removeAttribute(this, 'aria-modal');
     }
     /**
-     * @private
+     * Re-measures the sheet after its maximum height changes.
+     *
+     * @protected
      */
-    dragMouseUp(e) {
-        const root = this.getTemplatePart('root');
-        const heading = this.getTemplatePart('heading');
-        this._positionY = this.getYCoord(e);
-        if (this.closeable && this._positionY >= window.innerHeight - 25) {
-            // snap to close position.
-            this.moveDragElement(window.innerHeight + 50, 'close');
-            RendererServiceLocator.current.setAttribute(this, 'state', 'close');
-            this._isPartial = false;
-            return;
-        }
-        if (window.innerHeight - this._positionY > root.clientHeight / 2.5) {
-            // snap to open position.
-            this.moveDragElement(window.innerHeight - root.clientHeight, 'open');
-            RendererServiceLocator.current.setAttribute(this, 'state', 'open');
-            this._isPartial = false;
+    onHeightPropertyChanged(_previous, _next) {
+        this.queueMeasurement();
+    }
+    /**
+     * Re-measures the sheet after its opening edge changes.
+     *
+     * @protected
+     */
+    onPositionPropertyChanged(_previous, _next) {
+        this.queueMeasurement();
+    }
+    /**
+     * Synchronizes the default active snap and schedules snap resolution.
+     *
+     * @protected
+     */
+    onSnapsPropertyChanged(_previous, next) {
+        if (!this._activeSnapIndexExplicit) {
+            this._activeSnapIndex = Math.max(0, next.length - 1);
+            this.requestUpdate('activeSnapIndex');
         }
-        else {
-            // snap to initial position.
-            // only when the header is visible.
-            this.moveDragElement(window.innerHeight - heading.clientHeight - this._bounceOffset, 'partial');
-            RendererServiceLocator.current.setAttribute(this, 'state', 'partial');
-            this._isPartial = true;
+        this.queueMeasurement();
+    }
+    /**
+     * Moves an open sheet after its controlled snap index changes.
+     *
+     * @protected
+     */
+    onActiveSnapIndexPropertyChanged(previous, next) {
+        if (this.isOpen && !this._isDragging) {
+            this.moveToSnap(next, true, previous);
         }
     }
     /**
-     * @private
+     * Activates or deactivates modal behavior while the sheet is open.
+     *
+     * @protected
      */
-    dragMouseMove(e) {
-        const root = this.getTemplatePart('root');
-        this._positionY = this.getYCoord(e);
-        if (this._positionY <= (window.innerHeight - root.clientHeight + this._dragOffset)) {
-            return;
+    onIsModalPropertyChanged(_previous, next) {
+        if (this.isOpen) {
+            if (next) {
+                this._modalController.activate();
+            }
+            else {
+                this._modalController.deactivate();
+            }
         }
-        root.style.setProperty('transition', 'none');
-        root.style.setProperty('transform', `translateY(${this._positionY - this._dragOffset}px)`);
     }
     /**
-     * @private
+     * Synchronizes the optional snap indicator after its visibility changes.
+     *
+     * @protected
      */
-    moveDragElement(toPoint, state) {
-        const root = this.getTemplatePart('root');
-        const heading = this.getTemplatePart('heading');
-        this._mouseUpSubscription?.dispose();
-        this._touchEndSubscription?.dispose();
-        this._mouseMoveSubscription?.dispose();
-        this._touchMoveSubscription?.dispose();
-        if (!toPoint && this._positionY >= window.innerHeight - heading.clientHeight) {
-            root.style.setProperty('transform', `translateY(calc(100vh - ${heading.clientHeight}px))`);
+    onHasSnapIndicatorPropertyChanged(_previous, next) {
+        if (next) {
+            void this.updateComplete.then(() => this.renderSnapIndicators());
         }
-        else {
-            root.style.setProperty('transform', `translateY(${(toPoint || this._positionY) + this._bounceOffset}px)`);
+    }
+    activateInteractionResources() {
+        if (!this._visualViewportHandler) {
+            this._visualViewportHandler = this.handleViewportResize;
+            window.addEventListener('resize', this._visualViewportHandler, { passive: true });
+            window.visualViewport?.addEventListener('resize', this._visualViewportHandler, { passive: true });
         }
-        root.style.setProperty('transition', 'transform 500ms cubic-bezier(0.4, 0, 0, 1) 0s');
-        if (state === 'close') {
-            this._mouseDownSubscription?.dispose();
-            this._touchStartSubscription?.dispose();
-            this._clickSubscription?.dispose();
-            setTimeout(() => {
-                this._mouseDownSubscription?.dispose();
-                this._touchStartSubscription?.dispose();
-            }, 250);
+        if (this._observedRoot) {
+            this.attachPointerListeners(this._observedRoot);
+            this.observeRoot(this._observedRoot);
         }
     }
-    /**
-     * @private
-     */
-    getYCoord(e) {
-        if ('changedTouches' in e && e.changedTouches.length > 0) {
-            return e.changedTouches[0].clientY;
+    deactivateInteractionResources() {
+        this.cleanupPointer();
+        if (this._observedRoot) {
+            this.detachPointerListeners(this._observedRoot);
+        }
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = null;
+        if (this._measureFrame !== null) {
+            cancelAnimationFrame(this._measureFrame);
+            this._measureFrame = null;
+        }
+        if (this._visualViewportHandler) {
+            window.removeEventListener('resize', this._visualViewportHandler);
+            window.visualViewport?.removeEventListener('resize', this._visualViewportHandler);
+            this._visualViewportHandler = null;
+        }
+    }
+    attachPointerListeners(root) {
+        this.detachPointerListeners(root);
+        root.addEventListener('pointerdown', this.handlePointerDown);
+        root.addEventListener('pointermove', this.handlePointerMove);
+        root.addEventListener('pointerup', this.handlePointerUp);
+        root.addEventListener('pointercancel', this.handlePointerCancel);
+    }
+    detachPointerListeners(root) {
+        root.removeEventListener('pointerdown', this.handlePointerDown);
+        root.removeEventListener('pointermove', this.handlePointerMove);
+        root.removeEventListener('pointerup', this.handlePointerUp);
+        root.removeEventListener('pointercancel', this.handlePointerCancel);
+    }
+    handlePointerDown(event) {
+        if (!event.isPrimary || this._pointerId !== null || event.button > 0 || !this.isOpen) {
+            return;
+        }
+        const path = event.composedPath();
+        const target = path.find((entry) => entry instanceof Element);
+        if (!target || path.some((entry) => entry instanceof Element && entry.matches(INTERACTIVE_SELECTOR))) {
+            return;
+        }
+        if (this.dragMode === SheetDragMode.Handle && !path.some((entry) => entry instanceof Element && entry.matches('[part="handle"]'))) {
+            return;
+        }
+        this._pointerId = event.pointerId;
+        this._startX = event.clientX;
+        this._startY = event.clientY;
+        this._lastY = event.clientY;
+        this._startExtent = this._visibleExtent;
+        this._samples = [{ y: event.clientY, time: event.timeStamp }];
+        this._axisRejected = false;
+        this._isDragging = false;
+    }
+    handlePointerMove(event) {
+        if (event.pointerId !== this._pointerId || this._axisRejected) {
+            return;
+        }
+        const deltaX = event.clientX - this._startX;
+        const deltaY = event.clientY - this._startY;
+        if (!this._isDragging) {
+            if (Math.max(Math.abs(deltaX), Math.abs(deltaY)) < AXIS_LOCK_THRESHOLD) {
+                return;
+            }
+            if (Math.abs(deltaX) > Math.abs(deltaY)) {
+                this._axisRejected = true;
+                return;
+            }
+            if (this.consumeScrollableMovement(event)) {
+                this._startY = event.clientY;
+                this._lastY = event.clientY;
+                this._samples = [{ y: event.clientY, time: event.timeStamp }];
+                return;
+            }
+            this._isDragging = true;
+            this._observedRoot?.setPointerCapture(event.pointerId);
+            this.setTransition(false);
+            this.toggleAttribute('data-dragging', true);
+            this.setState('dragging');
+            this._dragStart.emit(this.createDragDetail(event, 0));
+        }
+        const extentDelta = verticalPointerDelta(this.position, this._startY, event.clientY);
+        const next = applyElasticity(this._startExtent + extentDelta, 0, this._maxExtent, this.elastic);
+        this.setVisibleExtent(next);
+        this._samples.push({ y: event.clientY, time: event.timeStamp });
+        this._samples = this._samples.filter((sample) => event.timeStamp - sample.time <= 120).slice(-6);
+        this._lastY = event.clientY;
+        this._dragging.emit(this.createDragDetail(event, this.getVelocity()));
+    }
+    handlePointerUp(event) {
+        if (event.pointerId !== this._pointerId) {
+            return;
+        }
+        if (!this._isDragging) {
+            this.cleanupPointer();
+            return;
+        }
+        const velocity = this.getVelocity();
+        const result = selectSnap(this._visibleExtent, velocity, this._resolvedSnaps, this._maxExtent, this.closeThreshold, this.inertia);
+        this._dragEnd.emit(this.createDragDetail(event, velocity));
+        this.cleanupPointer();
+        if (result.close && this.closeable && this.requestClose('gesture')) {
+            void this.close();
+            return;
+        }
+        this.moveToSnap(result.snapIndex < 0 ? 0 : result.snapIndex, true, this._activeSnapIndex);
+        this.setState('open');
+    }
+    handlePointerCancel(event) {
+        if (event.pointerId !== this._pointerId) {
+            return;
+        }
+        this.cleanupPointer();
+        this.moveToSnap(this._activeSnapIndex, true);
+        this.setState('open');
+    }
+    consumeScrollableMovement(event) {
+        if (this.dragMode === SheetDragMode.Handle || this._activeSnapIndex < this._resolvedSnaps.length - 1) {
+            return false;
+        }
+        const scrollable = this.findScrollable(event.composedPath());
+        if (!scrollable) {
+            return false;
+        }
+        const desiredScroll = this._lastY - event.clientY;
+        const maxScroll = scrollable.scrollHeight - scrollable.clientHeight;
+        const next = clamp(scrollable.scrollTop + desiredScroll, 0, maxScroll);
+        if (Math.abs(next - scrollable.scrollTop) < 0.5) {
+            return false;
+        }
+        scrollable.scrollTop = next;
+        return true;
+    }
+    findScrollable(path) {
+        return path.find((entry) => {
+            if (!(entry instanceof HTMLElement) || entry === this._observedRoot) {
+                return false;
+            }
+            const style = getComputedStyle(entry);
+            return /(auto|scroll)/.test(`${style.overflowY} ${style.overflow}`) && entry.scrollHeight > entry.clientHeight;
+        }) ?? null;
+    }
+    cleanupPointer() {
+        if (this._pointerId !== null && this._observedRoot?.hasPointerCapture(this._pointerId)) {
+            this._observedRoot.releasePointerCapture(this._pointerId);
+        }
+        this._pointerId = null;
+        this._isDragging = false;
+        this._axisRejected = false;
+        this._samples = [];
+        this.toggleAttribute('data-dragging', false);
+    }
+    getVelocity() {
+        if (this._samples.length < 2) {
+            return 0;
+        }
+        const first = this._samples[0];
+        const last = this._samples[this._samples.length - 1];
+        const elapsed = Math.max(1, last.time - first.time);
+        return verticalPointerDelta(this.position, first.y, last.y) / elapsed;
+    }
+    createDragDetail(event, velocity) {
+        return {
+            x: event.clientX,
+            y: event.clientY,
+            delta: verticalPointerDelta(this.position, this._startY, event.clientY),
+            position: this._visibleExtent,
+            velocity,
+            direction: this.position
+        };
+    }
+    measure() {
+        const root = this._observedRoot;
+        if (!root) {
+            return;
+        }
+        const viewportSize = window.visualViewport?.height ?? window.innerHeight;
+        const contentSize = root.scrollHeight;
+        this._maxExtent = this.height === 'auto'
+            ? Math.min(contentSize, viewportSize)
+            : clamp(resolveSnapLength(this.height, viewportSize, (value) => this.measureCssLength(value)), 0, viewportSize);
+        this._resolvedSnaps = resolveSnaps(this.snaps, SheetSnap.Content, viewportSize, contentSize, this._maxExtent, (value) => this.measureCssLength(value));
+        this._activeSnapIndex = this.clampSnapIndex(this._activeSnapIndex);
+        this.renderSnapIndicators();
+        if (this.isOpen && !this._isDragging) {
+            this.moveToSnap(this._activeSnapIndex, false);
+        }
+    }
+    measureCssLength(value) {
+        const probe = document.createElement('div');
+        probe.style.cssText = `position:fixed;visibility:hidden;pointer-events:none;height:${value};`;
+        document.body.appendChild(probe);
+        const result = probe.getBoundingClientRect().height;
+        probe.remove();
+        return result;
+    }
+    moveToSnap(index, animate, previousIndex = this._activeSnapIndex) {
+        if (this._resolvedSnaps.length === 0) {
+            return;
         }
-        if ('touches' in e && e.touches.length > 0) {
-            return e.touches[0].clientY;
+        const nextIndex = clamp(index, 0, this._resolvedSnaps.length - 1);
+        const snap = this._resolvedSnaps[nextIndex];
+        this.setTransition(animate);
+        this.setVisibleExtent(snap.value);
+        this._activeSnapIndex = nextIndex;
+        this.requestUpdate('activeSnapIndex');
+        this.setAttribute('data-snap-index', String(nextIndex));
+        this.toggleAttribute('data-max-snap', nextIndex === this._resolvedSnaps.length - 1);
+        this.updateSnapIndicatorState();
+        if (previousIndex !== nextIndex) {
+            this._activeSnapChanged.emit({
+                previousIndex,
+                currentIndex: nextIndex,
+                snap: snap.snap,
+                value: snap.value
+            });
         }
-        return e.clientY;
+    }
+    setVisibleExtent(value) {
+        this._visibleExtent = value;
+        const root = this._observedRoot;
+        if (!root) {
+            return;
+        }
+        const hidden = this._maxExtent - value;
+        const translate = this.position === SheetPosition.Bottom ? hidden : -hidden;
+        root.style.transform = `translate3d(0, ${translate}px, 0)`;
+        root.style.setProperty('--sheet-progress', String(this._maxExtent > 0 ? clamp(value / this._maxExtent, 0, 1) : 0));
+        root.style.setProperty('--sheet-resolved-height', `${this._maxExtent}px`);
+    }
+    setTransition(enabled) {
+        this._observedRoot?.toggleAttribute('data-animate', enabled);
+    }
+    setState(state) {
+        RendererServiceLocator.current.setAttribute(this, 'data-state', state);
+    }
+    clampSnapIndex(value) {
+        const length = this._resolvedSnaps.length || this._snaps.length || 1;
+        return clamp(Math.round(Number.isFinite(value) ? value : length - 1), 0, length - 1);
+    }
+    queueMeasurement() {
+        if (!this.isConnected) {
+            return;
+        }
+        if (this._measureFrame !== null) {
+            cancelAnimationFrame(this._measureFrame);
+        }
+        this._measureFrame = requestAnimationFrame(() => {
+            this._measureFrame = null;
+            this.measure();
+        });
+    }
+    handleViewportResize() {
+        this.measure();
+    }
+    observeRoot(root) {
+        this._resizeObserver?.disconnect();
+        if (typeof ResizeObserver !== 'undefined') {
+            this._resizeObserver = new ResizeObserver(() => this.measure());
+            this._resizeObserver.observe(root);
+        }
+    }
+    waitForMotion() {
+        const root = this._observedRoot;
+        if (!root || matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            return Promise.resolve();
+        }
+        const style = getComputedStyle(root);
+        const durations = style.transitionDuration.split(',').map((value) => this.parseMotionTime(value));
+        const delays = style.transitionDelay.split(',').map((value) => this.parseMotionTime(value));
+        const motionTime = durations.reduce((maximum, duration, index) => {
+            return Math.max(maximum, duration + delays[index % delays.length]);
+        }, 0);
+        if (motionTime === 0) {
+            return Promise.resolve();
+        }
+        return new Promise((resolve) => {
+            const timeout = window.setTimeout(resolve, Math.ceil(motionTime));
+            root.addEventListener('transitionend', () => {
+                clearTimeout(timeout);
+                resolve();
+            }, { once: true });
+        });
+    }
+    parseMotionTime(value) {
+        const time = Number.parseFloat(value);
+        return value.trim().endsWith('ms') ? time : time * 1000;
+    }
+    setBooleanProperty(field, property, value) {
+        if (this[field] !== value) {
+            this[field] = value;
+            this.requestUpdate(property);
+        }
+    }
+    renderSnapIndicators() {
+        const container = this.shadowRoot?.querySelector('[part="snap-indicator"]');
+        if (!container) {
+            return;
+        }
+        const indicators = this._resolvedSnaps.map((_snap, index) => {
+            const indicator = document.createElement('span');
+            indicator.setAttribute('part', 'snap-indicator-item');
+            indicator.setAttribute('data-active', String(index === this._activeSnapIndex));
+            return indicator;
+        });
+        container.replaceChildren(...indicators);
+    }
+    updateSnapIndicatorState() {
+        const indicators = this.shadowRoot?.querySelectorAll('[part="snap-indicator-item"]') ?? [];
+        indicators.forEach((indicator, index) => {
+            indicator.setAttribute('data-active', String(index === this._activeSnapIndex));
+        });
     }
 };
+__decorate([
+    Attribute({
+        type: String,
+        converter: {
+            toAttribute: (value) => typeof value === 'number' ? `${value}px` : value?.toString() ?? ''
+        }
+    }),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
+], SheetElement.prototype, "width", null);
 __decorate([
     Attribute({ type: CssLength }),
     __metadata("design:type", Object),
     __metadata("design:paramtypes", [Object])
 ], SheetElement.prototype, "height", null);
+__decorate([
+    Attribute({ type: SheetPosition }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], SheetElement.prototype, "position", null);
+__decorate([
+    Attribute({
+        type: Array,
+        converter: {
+            fromAttribute: (value) => {
+                if (!value?.trim()) {
+                    return [];
+                }
+                return value.trim().split(/\s+/).map((entry) => {
+                    if (entry === SheetSnap.Content) {
+                        return SheetSnap.Content;
+                    }
+                    const parsed = CssLength.tryParse(entry);
+                    if (parsed === undefined || parsed === 'auto') {
+                        throw new TypeError(`Invalid sheet snap "${entry}". Use a CSS length or "content".`);
+                    }
+                    return parsed;
+                });
+            },
+            toAttribute: (value) => value.map((entry) => typeof entry === 'number' ? `${entry}px` : entry).join(' ')
+        }
+    }),
+    __metadata("design:type", Array),
+    __metadata("design:paramtypes", [Array])
+], SheetElement.prototype, "snaps", null);
+__decorate([
+    Attribute({ type: Number }),
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [Number])
+], SheetElement.prototype, "activeSnapIndex", null);
+__decorate([
+    Attribute({ type: Number }),
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [Number])
+], SheetElement.prototype, "closeThreshold", null);
+__decorate([
+    Attribute({ type: Boolean, useDefault: true }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], SheetElement.prototype, "elastic", null);
+__decorate([
+    Attribute({ type: Boolean, useDefault: true }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], SheetElement.prototype, "inertia", null);
+__decorate([
+    Attribute({ type: SheetDragMode }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], SheetElement.prototype, "dragMode", null);
+__decorate([
+    Attribute({ type: Boolean, useDefault: true }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], SheetElement.prototype, "hasHandle", null);
+__decorate([
+    Attribute({ type: Boolean, useDefault: true }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], SheetElement.prototype, "hasSnapIndicator", null);
+__decorate([
+    Attribute({ type: Boolean, useDefault: true }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], SheetElement.prototype, "isModal", null);
+__decorate([
+    Emit(),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [])
+], SheetElement.prototype, "activeSnapChanged", null);
+__decorate([
+    Emit(),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [])
+], SheetElement.prototype, "dragStart", null);
+__decorate([
+    Emit(),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [])
+], SheetElement.prototype, "dragging", null);
+__decorate([
+    Emit(),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [])
+], SheetElement.prototype, "dragEnd", null);
+__decorate([
+    Watch('isOpen', { waitUntilFirstUpdate: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Boolean, Boolean]),
+    __metadata("design:returntype", void 0)
+], SheetElement.prototype, "onIsOpenPropertyChanged", null);
+__decorate([
+    Watch('hasBackdrop'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Boolean, Boolean]),
+    __metadata("design:returntype", void 0)
+], SheetElement.prototype, "onSheetHasBackdropPropertyChanged", null);
+__decorate([
+    Watch('height'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object, Object]),
+    __metadata("design:returntype", void 0)
+], SheetElement.prototype, "onHeightPropertyChanged", null);
+__decorate([
+    Watch('position'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String, String]),
+    __metadata("design:returntype", void 0)
+], SheetElement.prototype, "onPositionPropertyChanged", null);
+__decorate([
+    Watch('snaps'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Array, Array]),
+    __metadata("design:returntype", void 0)
+], SheetElement.prototype, "onSnapsPropertyChanged", null);
+__decorate([
+    Watch('activeSnapIndex'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Number, Number]),
+    __metadata("design:returntype", void 0)
+], SheetElement.prototype, "onActiveSnapIndexPropertyChanged", null);
+__decorate([
+    Watch('isModal'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Boolean, Boolean]),
+    __metadata("design:returntype", void 0)
+], SheetElement.prototype, "onIsModalPropertyChanged", null);
+__decorate([
+    Watch('hasSnapIndicator', { waitUntilFirstUpdate: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Boolean, Boolean]),
+    __metadata("design:returntype", void 0)
+], SheetElement.prototype, "onHasSnapIndicatorPropertyChanged", null);
 SheetElement = __decorate([
     Component({
         selector: 'mosaik-sheet',
@@ -344,12 +1149,7 @@ SheetElement = __decorate([
             memphis: sheetElementMemphisStyle,
             cosmopolitan: sheetElementCosmopolitanStyle
         },
-        imports: [
-            BackdropElement,
-            SheetHeaderElement,
-            SheetContentElement,
-            SheetFooterElement
-        ]
+        imports: [BackdropElement, SheetHeaderElement, SheetContentElement, SheetFooterElement]
     }),
     __metadata("design:paramtypes", [])
 ], SheetElement);