@rcarls/rc-bottom-sheet 0.4.2 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @rcarls/rc-bottom-sheet
 
+## 0.6.0
+
+### Patch Changes
+
+- ee7ba6c: Keep resize pinning, drag origins, and snapped bottom sheets correctly
+  positioned when a layout-containing ancestor establishes a non-viewport
+  containing block. Report animated snap changes only after the sheet settles so
+  consumers can defer discrete content and accessibility state changes until the
+  surface motion completes. Expose resize-start timing so content can be prepared
+  before an interactive expansion reveals it.
+- Updated dependencies [6683eb9]
+- Updated dependencies [ee7ba6c]
+- Updated dependencies [30eb232]
+- Updated dependencies [57370e4]
+  - @rcarls/rc-common@0.6.0
+  - @rcarls/rc-dialog@0.6.0
+
+## 0.5.0
+
+### Patch Changes
+
+- ba65db7: Fix an edge case left in the 0.4.2 resize-repin fix: the window-resize re-pin re-measured
+  via `getBoundingClientRect()` on the box that was still carrying its _previous_ inline pin,
+  so a fixed (non-`dvh`) snap point (for example a `132px` peek height, common for a
+  persistent summary sheet) computed the exact same, now-stale target, since neither the
+  requested height nor the stale box's edges had changed. Only `dvh`-based snap points were
+  actually re-deriving correctly. Now clears the previous `top`/`height` pin before
+  re-measuring on resize, so the dialog reverts to its CSS-driven (`inset-block-end`-anchored)
+  position first, the same as a sheet that has never been pinned. Added a regression test
+  covering this specific case (confirmed it fails without the fix).
+- Updated dependencies [4ae2ef0]
+- Updated dependencies [689340c]
+  - @rcarls/rc-common@0.5.0
+  - @rcarls/rc-dialog@0.5.0
+
 ## 0.4.2
 
 ### Patch Changes

package/README.md

@@ -61,12 +61,15 @@ then docks to that container's block-end edge instead of the viewport.
 List `snap-points` as CSS heights in ascending order. Slow drag releases
 settle at the nearest point; a swipe at `swipe-velocity` or faster settles at
 the first or last point. Settling animates unless the user prefers reduced
-motion.
+motion. `rc-bottom-sheet-resize-start` fires as an interactive resize begins,
+before the sheet geometry changes, so consumers can prepare content that the
+drag will reveal.
 
 Call `snapTo(index)` to move programmatically. The
-`rc-bottom-sheet-snap` event reports the selected `index`, effective target
-`height` after CSS size constraints, and whether the trigger was a drag or API
-call. Constrained targets remain docked to the same block-end edge.
+`rc-bottom-sheet-snap` event fires after the sheet has settled and reports the
+selected `index`, effective target `height` after CSS size constraints, and
+whether the trigger was a drag or API call. Interrupted animations do not emit
+a stale event. Constrained targets remain docked to the same block-end edge.
 
 Set `--rc-bottom-sheet-snap-duration` and
 `--rc-bottom-sheet-snap-easing` on the dialog to customize its settle motion.

package/dist/custom-elements.json

@@ -323,6 +323,24 @@
               ],
               "description": "Snaps to a declared target by zero-based index.\n\nFinite fractional indices are truncated and out-of-range indices clamp to\nthe nearest endpoint. Non-finite indices and calls without valid snap\npoints have no effect."
             },
+            {
+              "kind": "method",
+              "name": "_onResizeStart",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "detail",
+                  "type": {
+                    "text": "ResizeLifecycleDetail"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_onResizeEnd",
@@ -441,6 +459,12 @@
                   "type": {
                     "text": "'animated' | 'instant'"
                   }
+                },
+                {
+                  "name": "onSettled",
+                  "type": {
+                    "text": "() => void"
+                  }
                 }
               ]
             },
@@ -510,12 +534,19 @@
             }
           ],
           "events": [
+            {
+              "name": "rc-bottom-sheet-resize-start",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fires when an interactive resize begins. `detail: { height, inputType }`"
+            },
             {
               "name": "rc-bottom-sheet-snap",
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fires when a drag release or `snapTo()` call selects a snap target. `detail: { index, height, trigger }`"
+              "description": "Fires after a drag release or `snapTo()` call settles at its snap target. `detail: { index, height, trigger }`"
             },
             {
               "description": "Inherited from `rc-dialog`; fired when the sheet opens.",

package/dist/{rc-bottom-sheet-CR2usG4R.js → rc-bottom-sheet-BZg5AVUG.js}

@@ -1,12 +1,12 @@
-import { property as h } from "lit/decorators.js";
-import { RCDialog as b } from "@rcarls/rc-dialog";
-import { findExtremeSnapIndex as g, findNearestSnapIndex as y } from "@rcarls/rc-common";
-var _ = Object.defineProperty, c = (o, t, e, n) => {
-  for (var i = void 0, s = o.length - 1, r; s >= 0; s--)
-    (r = o[s]) && (i = r(t, e, i) || i);
-  return i && _(t, e, i), i;
+import { property as l } from "lit/decorators.js";
+import { RCDialog as g } from "@rcarls/rc-dialog";
+import { findExtremeSnapIndex as y, findNearestSnapIndex as _ } from "@rcarls/rc-common";
+var v = Object.defineProperty, h = (o, t, e, i) => {
+  for (var n = void 0, s = o.length - 1, p; s >= 0; s--)
+    (p = o[s]) && (n = p(t, e, n) || n);
+  return n && v(t, e, n), n;
 };
-const v = 300, x = "cubic-bezier(0.4, 0, 0.2, 1)", S = `
+const f = 300, x = "cubic-bezier(0.4, 0, 0.2, 1)", S = `
 @layer rc-base {
   rc-bottom-sheet > dialog {
     position: var(--rc-bottom-sheet-position, fixed);
@@ -59,16 +59,19 @@ const v = 300, x = "cubic-bezier(0.4, 0, 0.2, 1)", S = `
     outline-offset: -0.25rem;
   }
 }
-`, f = 24;
-function z(o) {
-  const t = o.getBoundingClientRect();
-  return getComputedStyle(o).position === "static" && (o.style.position = "fixed"), o.style.translate = "none", o.style.insetBlockStart = "auto", o.style.marginBlock = "0", o.style.boxSizing = "border-box", o.style.top = `${t.top}px`, o.style.height = `${t.height}px`, t;
+`, z = 24;
+function w(o) {
+  const t = o.getBoundingClientRect(), e = getComputedStyle(o), i = o.offsetParent, n = Number.parseFloat(e.top), s = i ? t.top - i.getBoundingClientRect().top - i.clientTop + i.scrollTop : Number.isFinite(n) ? n : t.top;
+  return e.position === "static" && (o.style.position = "fixed"), o.style.translate = "none", o.style.insetBlockStart = "auto", o.style.marginBlock = "0", o.style.boxSizing = "border-box", o.style.top = `${s}px`, o.style.height = `${t.height}px`, t;
 }
 var a;
-const l = (a = class extends b {
+const c = (a = class extends g {
   constructor() {
     super(...arguments), this.lightDismiss = !0, this.resize = "vertical", this.resizeOrigin = "top", this.resizeHandle = "[data-rc-bottom-sheet-handle]", this.snapPoints = "", this.swipeDismiss = !0, this.swipeVelocity = 500, this._reducedMotion = typeof window < "u" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null, this._activeSnapAnimation = null, this._lastSnapIndex = null, this._onWindowResize = () => {
-      !this.open || this._lastSnapIndex === null || this._snapToIndex(this._lastSnapIndex, "instant", "api");
+      if (!this.open || this._lastSnapIndex === null)
+        return;
+      const t = this._$dialog;
+      t?.style.removeProperty("top"), t?.style.removeProperty("height"), t?.style.removeProperty("inset-block-start"), this._snapToIndex(this._lastSnapIndex, "instant", "api");
     };
   }
   static _ensureBaseStyles(t) {
@@ -101,14 +104,23 @@ const l = (a = class extends b {
   snapTo(t, e = "animated") {
     Number.isFinite(t) && this._snapToIndex(Math.trunc(t), e, "api");
   }
+  _onResizeStart(t) {
+    this.dispatchEvent(
+      new CustomEvent("rc-bottom-sheet-resize-start", {
+        bubbles: !0,
+        composed: !0,
+        detail: { height: t.height, inputType: t.inputType }
+      })
+    );
+  }
   _onResizeEnd(t) {
     if (t.inputType === "pointer" && this.swipeDismiss && this._shouldSwipeDismiss(t)) {
       this.requestClose();
       return;
     }
-    const e = this._resolvedSnapPoints(), n = t.edge.includes("n") ? -t.velocityY : t.velocityY, i = Math.abs(t.height - t.startHeight);
-    if (t.inputType === "pointer" && e.length > 0 && i >= f && Math.abs(n) >= this.swipeVelocity) {
-      const s = g(e, n > 0 ? 1 : -1);
+    const e = this._resolvedSnapPoints(), i = t.edge.includes("n") ? -t.velocityY : t.velocityY, n = Math.abs(t.height - t.startHeight);
+    if (t.inputType === "pointer" && e.length > 0 && n >= z && Math.abs(i) >= this.swipeVelocity) {
+      const s = y(e, i > 0 ? 1 : -1);
       this._snapToIndex(s, "animated", "drag");
       return;
     }
@@ -118,41 +130,45 @@ const l = (a = class extends b {
     return t.edge.includes("n") && t.startHeight - t.height >= a.swipeDismissThreshold;
   }
   _snapToNearestPoint(t = "api") {
-    const e = this._$dialog, n = this._resolvedSnapPoints();
-    if (!e || n.length === 0)
+    const e = this._$dialog, i = this._resolvedSnapPoints();
+    if (!e || i.length === 0)
       return;
-    const i = e.getBoundingClientRect().height, s = y(n, i);
+    const n = e.getBoundingClientRect().height, s = _(i, n);
     this._snapToIndex(s, "animated", t);
   }
-  _snapToIndex(t, e, n) {
-    const i = this._$dialog, s = this._resolvedSnapPoints();
-    if (!i || s.length === 0)
+  _snapToIndex(t, e, i) {
+    const n = this._$dialog, s = this._resolvedSnapPoints();
+    if (!n || s.length === 0)
       return;
-    const r = z(i), p = Math.max(0, Math.min(t, s.length - 1)), m = s[p];
-    this._lastSnapIndex = p, this._activeSnapAnimation?.cancel(), this._activeSnapAnimation = null, i.style.height = `${m}px`;
-    const d = i.getBoundingClientRect().height;
-    i.style.top = `${r.top}px`, i.style.height = `${r.height}px`;
-    const u = r.bottom - d;
-    this._applySnap(i, u, d, e), this.dispatchEvent(
-      new CustomEvent("rc-bottom-sheet-snap", {
-        bubbles: !0,
-        composed: !0,
-        detail: { index: p, height: d, trigger: n }
-      })
-    );
+    const p = w(n), d = n.style.top, r = Math.max(0, Math.min(t, s.length - 1)), m = s[r];
+    this._lastSnapIndex = r, this._activeSnapAnimation?.cancel(), this._activeSnapAnimation = null, n.style.height = `${m}px`;
+    const u = n.getBoundingClientRect().height;
+    n.style.top = d, n.style.height = `${p.height}px`;
+    const b = Number.parseFloat(d) + p.height - u;
+    this._applySnap(n, b, u, e, () => {
+      this.dispatchEvent(
+        new CustomEvent("rc-bottom-sheet-snap", {
+          bubbles: !0,
+          composed: !0,
+          detail: { index: r, height: u, trigger: i }
+        })
+      );
+    });
   }
-  _applySnap(t, e, n, i) {
-    const s = t.getBoundingClientRect();
-    if (this._activeSnapAnimation?.cancel(), this._activeSnapAnimation = null, i === "instant" || this._reducedMotion?.matches) {
-      t.style.top = `${e}px`, t.style.height = `${n}px`;
+  _applySnap(t, e, i, n, s) {
+    const p = t.getBoundingClientRect(), d = Number.parseFloat(t.style.top);
+    if (this._activeSnapAnimation?.cancel(), this._activeSnapAnimation = null, n === "instant" || this._reducedMotion?.matches) {
+      t.style.top = `${e}px`, t.style.height = `${i}px`, s();
       return;
     }
-    if (s.top === e && s.height === n)
+    if (d === e && p.height === i) {
+      s();
       return;
+    }
     const r = t.animate(
       [
-        { top: `${s.top}px`, height: `${s.height}px` },
-        { top: `${e}px`, height: `${n}px` }
+        { top: `${d}px`, height: `${p.height}px` },
+        { top: `${e}px`, height: `${i}px` }
       ],
       {
         duration: this._snapDuration(t),
@@ -160,14 +176,22 @@ const l = (a = class extends b {
         fill: "forwards"
       }
     );
-    this._activeSnapAnimation = r, r.finished.then(() => r.commitStyles()).catch(() => {
-    }).finally(() => {
-      r.cancel(), this._activeSnapAnimation === r && (this._activeSnapAnimation = null);
-    });
+    this._activeSnapAnimation = r, r.finished.then(
+      () => {
+        if (this._activeSnapAnimation !== r) {
+          r.cancel();
+          return;
+        }
+        t.style.top = `${e}px`, t.style.height = `${i}px`, r.cancel(), this._activeSnapAnimation = null, s();
+      },
+      () => {
+        r.cancel(), this._activeSnapAnimation === r && (this._activeSnapAnimation = null);
+      }
+    );
   }
   _snapDuration(t) {
-    const e = getComputedStyle(t).getPropertyValue("--rc-bottom-sheet-snap-duration").trim(), n = Number.parseFloat(e);
-    return Number.isFinite(n) ? n : v;
+    const e = getComputedStyle(t).getPropertyValue("--rc-bottom-sheet-snap-duration").trim(), i = Number.parseFloat(e);
+    return Number.isFinite(i) ? i : f;
   }
   _snapEasing(t) {
     return getComputedStyle(t).getPropertyValue("--rc-bottom-sheet-snap-easing").trim() || x;
@@ -183,42 +207,42 @@ const l = (a = class extends b {
       return window.innerHeight * (e / 100);
     if (t.endsWith("px") || String(e) === t)
       return e;
-    const n = document.createElement("div");
-    Object.assign(n.style, {
+    const i = document.createElement("div");
+    Object.assign(i.style, {
       position: "fixed",
       visibility: "hidden",
       pointerEvents: "none",
       blockSize: t,
       inlineSize: "0",
       inset: "0 auto auto 0"
-    }), document.body.append(n);
-    const i = n.getBoundingClientRect().height;
-    return n.remove(), i;
+    }), document.body.append(i);
+    const n = i.getBoundingClientRect().height;
+    return i.remove(), n;
   }
 }, a.swipeDismissThreshold = 96, a._styledRoots = /* @__PURE__ */ new Set(), a);
-c([
-  h({ type: Boolean, attribute: "light-dismiss" })
-], l.prototype, "lightDismiss");
-c([
-  h({ type: String, reflect: !0 })
-], l.prototype, "resize");
-c([
-  h({ type: String, attribute: "resize-origin" })
-], l.prototype, "resizeOrigin");
-c([
-  h({ type: String, attribute: "resize-handle" })
-], l.prototype, "resizeHandle");
-c([
-  h({ type: String, attribute: "snap-points" })
-], l.prototype, "snapPoints");
-c([
-  h({ type: Boolean, attribute: "swipe-dismiss" })
-], l.prototype, "swipeDismiss");
-c([
-  h({ type: Number, attribute: "swipe-velocity" })
-], l.prototype, "swipeVelocity");
-let I = l;
+h([
+  l({ type: Boolean, attribute: "light-dismiss" })
+], c.prototype, "lightDismiss");
+h([
+  l({ type: String, reflect: !0 })
+], c.prototype, "resize");
+h([
+  l({ type: String, attribute: "resize-origin" })
+], c.prototype, "resizeOrigin");
+h([
+  l({ type: String, attribute: "resize-handle" })
+], c.prototype, "resizeHandle");
+h([
+  l({ type: String, attribute: "snap-points" })
+], c.prototype, "snapPoints");
+h([
+  l({ type: Boolean, attribute: "swipe-dismiss" })
+], c.prototype, "swipeDismiss");
+h([
+  l({ type: Number, attribute: "swipe-velocity" })
+], c.prototype, "swipeVelocity");
+let C = c;
 export {
-  I as R
+  C as R
 };
-//# sourceMappingURL=rc-bottom-sheet-CR2usG4R.js.map
+//# sourceMappingURL=rc-bottom-sheet-BZg5AVUG.js.map

package/dist/rc-bottom-sheet-BZg5AVUG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-bottom-sheet-BZg5AVUG.js","sources":["../src/rc-bottom-sheet.ts"],"sourcesContent":["import { property } from 'lit/decorators.js';\n\nimport { RCDialog } from '@rcarls/rc-dialog';\nimport {\n  findExtremeSnapIndex,\n  findNearestSnapIndex,\n  type ResizeDirection,\n  type ResizeLifecycleDetail,\n  type ResizeOrigin,\n} from '@rcarls/rc-common';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-bottom-sheet': RCBottomSheet;\n  }\n\n  interface HTMLElementEventMap {\n    'rc-bottom-sheet-resize-start': CustomEvent<RCBottomSheetResizeStartDetail>;\n    'rc-bottom-sheet-snap': CustomEvent<RCBottomSheetSnapDetail>;\n  }\n}\n\n/** Detail shape for `rc-bottom-sheet-resize-start`. */\nexport interface RCBottomSheetResizeStartDetail {\n  /** Rendered sheet height when the resize gesture begins. */\n  height: number;\n\n  /** Input mechanism initiating the resize. */\n  inputType: 'pointer' | 'keyboard';\n}\n\n/** Detail shape for `rc-bottom-sheet-snap`. */\nexport interface RCBottomSheetSnapDetail {\n  /** Index into the resolved `snap-points` list selected as the target. */\n  index: number;\n\n  /** Effective target height in pixels, after CSS size constraints. */\n  height: number;\n\n  /** Whether the snap came from a drag release or a `snapTo()` call. */\n  trigger: 'drag' | 'api';\n}\n\nconst DEFAULT_SNAP_DURATION_MS = 300;\nconst DEFAULT_SNAP_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\nconst LIGHT_DOM_CSS = `\n@layer rc-base {\n  rc-bottom-sheet > dialog {\n    position: var(--rc-bottom-sheet-position, fixed);\n    inset-block-start: auto;\n    inset-block-end: var(--rc-bottom-sheet-inset-block-end, 0px);\n    inset-inline: var(--rc-bottom-sheet-inset-inline, 0px);\n    box-sizing: border-box;\n    inline-size: 100%;\n    max-inline-size: var(--rc-bottom-sheet-max-inline-size, 40rem);\n    max-block-size: var(--rc-bottom-sheet-max-block-size, 70dvh);\n    margin-block: 0;\n    margin-inline: auto;\n    overflow: auto;\n  }\n\n  rc-bottom-sheet > dialog [data-rc-bottom-sheet-handle] {\n    box-sizing: border-box;\n    cursor: ns-resize;\n    touch-action: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  rc-bottom-sheet > dialog > [data-rc-bottom-sheet-handle] {\n    position: relative;\n    display: block;\n    inline-size: var(--rc-bottom-sheet-handle-target-inline-size, 100%);\n    min-block-size: var(--rc-bottom-sheet-handle-target-block-size, 3rem);\n    margin: var(--rc-bottom-sheet-handle-target-margin, 0);\n    padding: 0;\n    border: 0;\n    border-radius: inherit;\n    background: transparent;\n    appearance: none;\n  }\n\n  rc-bottom-sheet > dialog > [data-rc-bottom-sheet-handle]::before {\n    content: '';\n    position: absolute;\n    inset-block-start: 50%;\n    inset-inline-start: 50%;\n    inline-size: var(--rc-bottom-sheet-handle-inline-size, 2rem);\n    block-size: var(--rc-bottom-sheet-handle-block-size, 0.25rem);\n    border-radius: var(--rc-bottom-sheet-handle-radius, 999px);\n    background: var(--rc-bottom-sheet-handle-color, GrayText);\n    translate: -50% -50%;\n  }\n\n  rc-bottom-sheet > dialog [data-rc-bottom-sheet-handle]:focus-visible {\n    outline: auto;\n    outline-offset: -0.25rem;\n  }\n}\n`;\n\n// Floor so a noisy near-zero-distance release can't misread as a decisive\n// fling; a real swipe travels at least this far even if it's very quick.\nconst MIN_SWIPE_DISTANCE = 24;\n\n/**\n * Pins only the block-axis (top/height) geometry as inline styles, leaving\n * the inline axis (left/width) to CSS. `@rcarls/rc-common`'s\n * `pinElementBox` pins all four edges — appropriate for its own drag-resize\n * gesture math, where the inline axis can genuinely change — but a bottom\n * sheet only ever resizes/repositions along the block axis; its own\n * `LIGHT_DOM_CSS` deliberately leaves the inline axis owned by\n * `inset-inline`/`inline-size` custom properties (e.g. so a host page can\n * confine a sheet to a layout pane narrower than the viewport). Pinning\n * `left`/`width` here would freeze whatever the *unconfined* box happened\n * to measure at pin time as an inline style, which — having higher\n * cascade priority than any stylesheet rule — permanently overrides that\n * confinement regardless of specificity or layers.\n */\nfunction pinBlockBox(target: HTMLElement): DOMRect {\n  const rect = target.getBoundingClientRect();\n  const styles = getComputedStyle(target);\n  // `getBoundingClientRect().top` is viewport-relative, while an authored\n  // `top` value is relative to the element's fixed/absolute containing block.\n  // They are only interchangeable when the viewport is that containing block.\n  // Derive the current *visual* top from the offset parent's box when one is\n  // available. `offsetTop` itself is insufficient here because it ignores an\n  // in-flight Web Animation; `getComputedStyle().top` can have the opposite\n  // problem for fixed positioning, reporting a viewport-relative used value.\n  const offsetParent = target.offsetParent as HTMLElement | null;\n  const computedTop = Number.parseFloat(styles.top);\n  const localTop = offsetParent\n    ? rect.top -\n      offsetParent.getBoundingClientRect().top -\n      offsetParent.clientTop +\n      offsetParent.scrollTop\n    : Number.isFinite(computedTop)\n      ? computedTop\n      : rect.top;\n\n  if (styles.position === 'static') {\n    target.style.position = 'fixed';\n  }\n\n  target.style.translate = 'none';\n  target.style.insetBlockStart = 'auto';\n  target.style.marginBlock = '0';\n  target.style.boxSizing = 'border-box';\n  target.style.top = `${localTop}px`;\n  target.style.height = `${rect.height}px`;\n\n  return rect;\n}\n\n/**\n * Modal bottom-sheet wrapper for a native `<dialog>`, built on `rc-dialog`.\n *\n * The direct child `<dialog>` remains the semantic dialog surface and owns\n * content, labels, and form behavior. `rc-bottom-sheet` supplies the same\n * open/close lifecycle, focus restoration, cancel/request-close events, and\n * light-dismiss affordance as `rc-dialog`. The component docks the sheet to\n * the viewport block-end by default, while themes provide its visual surface.\n *\n * Dragging the resize handle past a decisive velocity in either direction\n * (a \"swipe\" or \"fling,\" distinct from a slow deliberate drag) snaps\n * straight to the extreme `snap-points` entry in that direction — swipe up\n * to fully expand, swipe down to fully collapse — regardless of how close\n * the release position was to some other point. Below that velocity, the\n * sheet settles to whichever declared snap point is nearest the release\n * height. All settling, whether from a drag or from `snapTo()`, animates\n * over `--rc-bottom-sheet-snap-duration`, follows\n * `--rc-bottom-sheet-snap-easing`, and is skipped for\n * `prefers-reduced-motion: reduce`.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-bottom-sheet rc-bottom-sheet docs}\n * @see {@link https://m3.material.io/components/bottom-sheets/overview Material Design bottom sheets}\n *\n * @slot - Place a `<dialog>` element with the sheet content and optional\n *   `[data-rc-bottom-sheet-handle]` resize handle here.\n *\n * @fires rc-dialog-open - Inherited from `rc-dialog`; fired when the sheet opens.\n * @fires rc-dialog-toggle - Inherited from `rc-dialog`; fired when user/native interaction changes open state.\n * @fires rc-dialog-request-close - Inherited from `rc-dialog`; cancelable close request.\n * @fires rc-dialog-cancel - Inherited from `rc-dialog`; backward-compatible cancel alias.\n * @fires rc-dialog-close - Inherited from `rc-dialog`; fired after the sheet closes.\n * @fires rc-bottom-sheet-resize-start - Fires when an interactive resize begins.\n *   `detail: { height, inputType }`\n * @fires rc-bottom-sheet-snap - Fires after a drag release or `snapTo()` call\n *   settles at its snap target. `detail: { index, height, trigger }`\n *\n * @attr light-dismiss - When present, a click on the backdrop area calls `requestClose()`.\n *   Present by default; inherited from `rc-dialog`.\n * @attr resize - Enables edge resizing, mirroring the CSS `resize` property values.\n *   Defaults to `vertical`; inherited from `rc-dialog`.\n * @attr resize-origin - Origin for resize edge hit-testing or explicit handles. Defaults to\n *   `top`; inherited from `rc-dialog`.\n * @attr resize-handle - CSS selector, scoped to the inner `<dialog>`, for explicit resize\n *   handles. Defaults to `[data-rc-bottom-sheet-handle]`; inherited from `rc-dialog`.\n * @attr snap-points - Whitespace-separated CSS heights, in ascending order, addressable by\n *   `snapTo()` and settled to on drag release.\n * @attr swipe-dismiss - Whether a decisive downward swipe of at least 96 pixels requests close.\n * @attr swipe-velocity - Minimum release velocity, in pixels per second, that counts as a\n *   decisive swipe rather than a slow deliberate drag.\n *\n * @cssprop [--rc-bottom-sheet-bg=Canvas] - Sheet surface background.\n * @cssprop [--rc-bottom-sheet-color=CanvasText] - Sheet text color.\n * @cssprop [--rc-bottom-sheet-radius=1rem 1rem 0 0] - Sheet corner radius.\n * @cssprop [--rc-bottom-sheet-shadow=none] - Sheet elevation shadow.\n * @cssprop [--rc-bottom-sheet-position=fixed] - Positioning scheme. Use `absolute` with `show()` to dock a non-modal sheet to a positioned ancestor.\n * @cssprop [--rc-bottom-sheet-inset-block-end=0px] - Distance from the positioning container's block-end edge.\n * @cssprop [--rc-bottom-sheet-inset-inline=0px] - Inline-axis inset used with automatic margins.\n * @cssprop [--rc-bottom-sheet-max-inline-size=40rem] - Maximum sheet width.\n * @cssprop [--rc-bottom-sheet-max-block-size=70dvh] - Maximum sheet height.\n * @cssprop [--rc-bottom-sheet-padding=0 1rem 1rem] - Sheet padding.\n * @cssprop [--rc-bottom-sheet-scrim=var(--rc-dialog-scrim)] - Modal backdrop color.\n * @cssprop [--rc-bottom-sheet-handle-color=GrayText] - Resize handle color.\n * @cssprop [--rc-bottom-sheet-handle-inline-size=2rem] - Resize handle width.\n * @cssprop [--rc-bottom-sheet-handle-block-size=0.25rem] - Resize handle height.\n * @cssprop [--rc-bottom-sheet-handle-radius=999px] - Resize handle corner radius.\n * @cssprop [--rc-bottom-sheet-handle-target-inline-size=100%] - Pointer target width for a direct-child handle.\n * @cssprop [--rc-bottom-sheet-handle-target-block-size=3rem] - Pointer target height for a direct-child handle.\n * @cssprop [--rc-bottom-sheet-handle-target-margin=0] - Margin around a direct-child handle target.\n * @cssprop [--rc-bottom-sheet-snap-duration=300ms] - Duration of the settle animation\n *   after a drag release or `snapTo()` call.\n * @cssprop [--rc-bottom-sheet-snap-easing=cubic-bezier(0.4, 0, 0.2, 1)] - Easing\n *   for the settle animation after a drag release or `snapTo()` call.\n */\nexport class RCBottomSheet extends RCDialog {\n  private static readonly swipeDismissThreshold = 96;\n  private static readonly _styledRoots = new Set<Document | ShadowRoot>();\n\n  private static _ensureBaseStyles(root: Document | ShadowRoot): void {\n    if (RCBottomSheet._styledRoots.has(root)) {\n      return;\n    }\n\n    RCBottomSheet._styledRoots.add(root);\n\n    const $style = document.createElement('style');\n\n    $style.setAttribute('data-rc-light-dom-base', 'rc-bottom-sheet');\n    $style.textContent = LIGHT_DOM_CSS;\n\n    if (root instanceof Document) {\n      root.head.append($style);\n    } else {\n      root.append($style);\n    }\n  }\n\n  /**\n   * Bottom sheets light-dismiss by default.\n   *\n   * Set `light-dismiss=\"false\"` as a property from JavaScript when a sheet must\n   * be closed only by explicit actions.\n   */\n  @property({ type: Boolean, attribute: 'light-dismiss' })\n  override lightDismiss = true;\n\n  /** Bottom sheets resize vertically from the top edge by default. */\n  @property({ type: String, reflect: true })\n  override resize: ResizeDirection = 'vertical';\n\n  /** Top-origin resizing keeps the sheet docked to the viewport bottom. */\n  @property({ type: String, attribute: 'resize-origin' })\n  override resizeOrigin: ResizeOrigin = 'top';\n\n  /** Default optional handle selector. Falls back to top-edge resize when absent. */\n  @property({ type: String, attribute: 'resize-handle' })\n  override resizeHandle = '[data-rc-bottom-sheet-handle]';\n\n  /**\n   * Whitespace-separated CSS heights in ascending order.\n   *\n   * Each height becomes an addressable snap target. Slow releases choose the\n   * nearest target, while decisive swipes choose the first or last target.\n   */\n  @property({ type: String, attribute: 'snap-points' })\n  snapPoints = '';\n\n  /**\n   * Whether a downward pointer resize of at least 96 pixels requests close.\n   *\n   * When false, a decisive downward swipe settles at the first snap point.\n   */\n  @property({ type: Boolean, attribute: 'swipe-dismiss' })\n  swipeDismiss = true;\n\n  /**\n   * Minimum release velocity, in pixels per second, that counts as a decisive\n   * swipe rather than a slow deliberate drag. A swipe jumps straight to the\n   * extreme `snap-points` entry in its direction; below this, the release\n   * settles to the nearest point instead.\n   */\n  @property({ type: Number, attribute: 'swipe-velocity' })\n  swipeVelocity = 500;\n\n  private readonly _reducedMotion =\n    typeof window !== 'undefined' ? window.matchMedia('(prefers-reduced-motion: reduce)') : null;\n\n  private _activeSnapAnimation: Animation | null = null;\n\n  // Snap-point heights are resolved from the *current* viewport at the\n  // moment a snap is applied (dvh units, or a probe-element measurement for\n  // other CSS units) and then frozen as inline styles by pinBlockBox — nothing\n  // re-derives them afterward. A window resize/maximize/restore while a\n  // sheet is open (without the user dragging it) otherwise leaves it pinned\n  // to stale pre-resize geometry. Track the last-applied index so a resize\n  // can re-run the same snap against fresh geometry.\n  private _lastSnapIndex: number | null = null;\n  private readonly _onWindowResize = (): void => {\n    if (!this.open || this._lastSnapIndex === null) {\n      return;\n    }\n\n    // _snapToIndex re-measures via pinBlockBox's getBoundingClientRect(),\n    // but that reads back whatever is *currently rendered* — the stale\n    // pin from before this resize, still anchored to the old viewport.\n    // For a fixed-height snap point (no dvh in play) that stale box's\n    // bottom edge is unchanged, so re-deriving from it would compute the\n    // exact same (now wrong) target. Clear the previous pin first so the\n    // dialog reverts to its CSS-driven position (inset-block-end-anchored)\n    // before re-measuring, the same as an as-yet-never-snapped sheet.\n    const $dialog = this._$dialog;\n\n    $dialog?.style.removeProperty('top');\n    $dialog?.style.removeProperty('height');\n    $dialog?.style.removeProperty('inset-block-start');\n\n    this._snapToIndex(this._lastSnapIndex, 'instant', 'api');\n  };\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    RCBottomSheet._ensureBaseStyles(this.getRootNode() as Document | ShadowRoot);\n    window.addEventListener('resize', this._onWindowResize);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('resize', this._onWindowResize);\n  }\n\n  /**\n   * Snaps to a declared target by zero-based index.\n   *\n   * Finite fractional indices are truncated and out-of-range indices clamp to\n   * the nearest endpoint. Non-finite indices and calls without valid snap\n   * points have no effect.\n   *\n   * @param index - zero-based index into `snapPoints`\n   * @param behavior - whether to animate the movement\n   *\n   * @example\n   * const sheet = document.querySelector('rc-bottom-sheet');\n   * sheet.snapTo(1);\n   */\n  snapTo(index: number, behavior: 'animated' | 'instant' = 'animated'): void {\n    if (!Number.isFinite(index)) {\n      return;\n    }\n\n    this._snapToIndex(Math.trunc(index), behavior, 'api');\n  }\n\n  protected override _onResizeStart(detail: ResizeLifecycleDetail): void {\n    this.dispatchEvent(\n      new CustomEvent<RCBottomSheetResizeStartDetail>('rc-bottom-sheet-resize-start', {\n        bubbles: true,\n        composed: true,\n        detail: { height: detail.height, inputType: detail.inputType },\n      }),\n    );\n  }\n\n  protected override _onResizeEnd(detail: ResizeLifecycleDetail): void {\n    if (detail.inputType === 'pointer' && this.swipeDismiss && this._shouldSwipeDismiss(detail)) {\n      this.requestClose();\n\n      return;\n    }\n\n    const points = this._resolvedSnapPoints();\n    const velocity = detail.edge.includes('n') ? -detail.velocityY : detail.velocityY;\n    const distance = Math.abs(detail.height - detail.startHeight);\n\n    if (\n      detail.inputType === 'pointer' &&\n      points.length > 0 &&\n      distance >= MIN_SWIPE_DISTANCE &&\n      Math.abs(velocity) >= this.swipeVelocity\n    ) {\n      // Decisive fling: jump to the extreme point in the swipe direction,\n      // regardless of proximity to some other point. Height grows as the\n      // sheet is dragged upward, so a positive velocity is a swipe up.\n      const targetIndex = findExtremeSnapIndex(points, velocity > 0 ? 1 : -1);\n\n      this._snapToIndex(targetIndex, 'animated', 'drag');\n\n      return;\n    }\n\n    this._snapToNearestPoint('drag');\n  }\n\n  private _shouldSwipeDismiss(detail: ResizeLifecycleDetail): boolean {\n    return (\n      detail.edge.includes('n') &&\n      detail.startHeight - detail.height >= RCBottomSheet.swipeDismissThreshold\n    );\n  }\n\n  private _snapToNearestPoint(trigger: 'drag' | 'api' = 'api'): void {\n    const $dialog = this._$dialog;\n    const points = this._resolvedSnapPoints();\n\n    if (!$dialog || points.length === 0) {\n      return;\n    }\n\n    const height = $dialog.getBoundingClientRect().height;\n    const nearestIndex = findNearestSnapIndex(points, height);\n\n    this._snapToIndex(nearestIndex, 'animated', trigger);\n  }\n\n  private _snapToIndex(\n    index: number,\n    behavior: 'animated' | 'instant',\n    trigger: 'drag' | 'api',\n  ): void {\n    const $dialog = this._$dialog;\n    const points = this._resolvedSnapPoints();\n\n    if (!$dialog || points.length === 0) {\n      return;\n    }\n\n    // Pinning (border-box, explicit top/height) is normally established by\n    // the first drag gesture; snapTo() must do the same so a sheet that has\n    // never been dragged still measures and sets height consistently.\n    const rect = pinBlockBox($dialog);\n    const pinnedTop = $dialog.style.top;\n    const clampedIndex = Math.max(0, Math.min(index, points.length - 1));\n    const requestedHeight = points[clampedIndex];\n\n    this._lastSnapIndex = clampedIndex;\n\n    // An in-flight animation wins over inline geometry in the cascade. Pin\n    // its current visual box before cancelling so the constrained target can\n    // be measured without jumping back to the prior snap point.\n    this._activeSnapAnimation?.cancel();\n    this._activeSnapAnimation = null;\n\n    $dialog.style.height = `${requestedHeight}px`;\n\n    const targetHeight = $dialog.getBoundingClientRect().height;\n\n    // Restore the current visual box before applying or animating the target.\n    // CSS min/max block-size can make targetHeight differ from the authored\n    // snap point; anchoring from the effective height keeps the block-end edge\n    // fixed in either case.\n    $dialog.style.top = pinnedTop;\n    $dialog.style.height = `${rect.height}px`;\n\n    const currentTop = Number.parseFloat(pinnedTop);\n    const targetTop = currentTop + rect.height - targetHeight;\n\n    this._applySnap($dialog, targetTop, targetHeight, behavior, () => {\n      this.dispatchEvent(\n        new CustomEvent<RCBottomSheetSnapDetail>('rc-bottom-sheet-snap', {\n          bubbles: true,\n          composed: true,\n          detail: { index: clampedIndex, height: targetHeight, trigger },\n        }),\n      );\n    });\n  }\n\n  private _applySnap(\n    $dialog: HTMLDialogElement,\n    top: number,\n    height: number,\n    behavior: 'animated' | 'instant',\n    onSettled: () => void,\n  ): void {\n    // Measure before cancelling any in-flight animation. `_snapToIndex()`\n    // normally pins and cancels first, while this ordering also keeps direct\n    // calls robust if applying a snap is refactored later.\n    const fromRect = $dialog.getBoundingClientRect();\n    const fromTop = Number.parseFloat($dialog.style.top);\n\n    this._activeSnapAnimation?.cancel();\n    this._activeSnapAnimation = null;\n\n    if (behavior === 'instant' || this._reducedMotion?.matches) {\n      $dialog.style.top = `${top}px`;\n      $dialog.style.height = `${height}px`;\n\n      onSettled();\n\n      return;\n    }\n\n    if (fromTop === top && fromRect.height === height) {\n      onSettled();\n\n      return;\n    }\n\n    const animation = $dialog.animate(\n      [\n        { top: `${fromTop}px`, height: `${fromRect.height}px` },\n        { top: `${top}px`, height: `${height}px` },\n      ],\n      {\n        duration: this._snapDuration($dialog),\n        easing: this._snapEasing($dialog),\n        fill: 'forwards',\n      },\n    );\n\n    this._activeSnapAnimation = animation;\n\n    animation.finished.then(\n      () => {\n        // A newer gesture or snapTo() call owns the final geometry and event.\n        if (this._activeSnapAnimation !== animation) {\n          animation.cancel();\n\n          return;\n        }\n\n        // Persist the known target explicitly before removing the animation's\n        // forwards fill. Unlike commitStyles(), this remains safe if a test or\n        // consumer detaches the dialog as the finished promise resolves.\n        $dialog.style.top = `${top}px`;\n        $dialog.style.height = `${height}px`;\n        animation.cancel();\n        this._activeSnapAnimation = null;\n\n        onSettled();\n      },\n      () => {\n        // Interrupted by a newer gesture or snapTo() call, which owns applying\n        // its own final styles and reporting its settled snap point.\n        animation.cancel();\n\n        if (this._activeSnapAnimation === animation) {\n          this._activeSnapAnimation = null;\n        }\n      },\n    );\n  }\n\n  private _snapDuration($dialog: HTMLDialogElement): number {\n    const raw = getComputedStyle($dialog)\n      .getPropertyValue('--rc-bottom-sheet-snap-duration')\n      .trim();\n    const parsed = Number.parseFloat(raw);\n\n    return Number.isFinite(parsed) ? parsed : DEFAULT_SNAP_DURATION_MS;\n  }\n\n  private _snapEasing($dialog: HTMLDialogElement): string {\n    return (\n      getComputedStyle($dialog).getPropertyValue('--rc-bottom-sheet-snap-easing').trim() ||\n      DEFAULT_SNAP_EASING\n    );\n  }\n\n  private _resolvedSnapPoints(): number[] {\n    if (!this.snapPoints.trim()) {\n      return [];\n    }\n\n    return this.snapPoints\n      .trim()\n      .split(/\\s+/)\n      .map((point) => this._resolveSnapPoint(point))\n      .filter((point): point is number => Number.isFinite(point) && point > 0);\n  }\n\n  private _resolveSnapPoint(point: string): number {\n    const numeric = Number.parseFloat(point);\n\n    if (!Number.isFinite(numeric)) {\n      return Number.NaN;\n    }\n\n    if (point.endsWith('%')) {\n      return window.innerHeight * (numeric / 100);\n    }\n\n    if (point.endsWith('px') || String(numeric) === point) {\n      return numeric;\n    }\n\n    const probe = document.createElement('div');\n\n    Object.assign(probe.style, {\n      position: 'fixed',\n      visibility: 'hidden',\n      pointerEvents: 'none',\n      blockSize: point,\n      inlineSize: '0',\n      inset: '0 auto auto 0',\n    });\n\n    document.body.append(probe);\n\n    const height = probe.getBoundingClientRect().height;\n\n    probe.remove();\n\n    return height;\n  }\n}\n\nexport default RCBottomSheet;\n"],"names":["DEFAULT_SNAP_DURATION_MS","DEFAULT_SNAP_EASING","LIGHT_DOM_CSS","MIN_SWIPE_DISTANCE","pinBlockBox","target","rect","styles","offsetParent","computedTop","localTop","_RCBottomSheet","_a","RCDialog","$dialog","root","$style","index","behavior","detail","points","velocity","distance","targetIndex","findExtremeSnapIndex","trigger","height","nearestIndex","findNearestSnapIndex","pinnedTop","clampedIndex","requestedHeight","targetHeight","targetTop","top","onSettled","fromRect","fromTop","animation","raw","parsed","point","numeric","probe","__decorateClass","property","RCBottomSheet"],"mappings":"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"}

package/dist/rc-bottom-sheet-define.js

@@ -1,4 +1,4 @@
-import { R as t } from "./rc-bottom-sheet-CR2usG4R.js";
+import { R as t } from "./rc-bottom-sheet-BZg5AVUG.js";
 customElements.get("rc-bottom-sheet") || customElements.define("rc-bottom-sheet", t);
 export {
   t as RCBottomSheet

package/dist/rc-bottom-sheet.js

@@ -1,4 +1,4 @@
-import { R as e } from "./rc-bottom-sheet-CR2usG4R.js";
+import { R as e } from "./rc-bottom-sheet-BZg5AVUG.js";
 export {
   e as RCBottomSheet
 };

package/dist/types/packages/rc-bottom-sheet/src/rc-bottom-sheet.d.ts

@@ -5,9 +5,17 @@ declare global {
         'rc-bottom-sheet': RCBottomSheet;
     }
     interface HTMLElementEventMap {
+        'rc-bottom-sheet-resize-start': CustomEvent<RCBottomSheetResizeStartDetail>;
         'rc-bottom-sheet-snap': CustomEvent<RCBottomSheetSnapDetail>;
     }
 }
+/** Detail shape for `rc-bottom-sheet-resize-start`. */
+export interface RCBottomSheetResizeStartDetail {
+    /** Rendered sheet height when the resize gesture begins. */
+    height: number;
+    /** Input mechanism initiating the resize. */
+    inputType: 'pointer' | 'keyboard';
+}
 /** Detail shape for `rc-bottom-sheet-snap`. */
 export interface RCBottomSheetSnapDetail {
     /** Index into the resolved `snap-points` list selected as the target. */
@@ -48,8 +56,10 @@ export interface RCBottomSheetSnapDetail {
  * @fires rc-dialog-request-close - Inherited from `rc-dialog`; cancelable close request.
  * @fires rc-dialog-cancel - Inherited from `rc-dialog`; backward-compatible cancel alias.
  * @fires rc-dialog-close - Inherited from `rc-dialog`; fired after the sheet closes.
- * @fires rc-bottom-sheet-snap - Fires when a drag release or `snapTo()` call
- *   selects a snap target. `detail: { index, height, trigger }`
+ * @fires rc-bottom-sheet-resize-start - Fires when an interactive resize begins.
+ *   `detail: { height, inputType }`
+ * @fires rc-bottom-sheet-snap - Fires after a drag release or `snapTo()` call
+ *   settles at its snap target. `detail: { index, height, trigger }`
  *
  * @attr light-dismiss - When present, a click on the backdrop area calls `requestClose()`.
  *   Present by default; inherited from `rc-dialog`.
@@ -146,6 +156,7 @@ export declare class RCBottomSheet extends RCDialog {
      * sheet.snapTo(1);
      */
     snapTo(index: number, behavior?: 'animated' | 'instant'): void;
+    protected _onResizeStart(detail: ResizeLifecycleDetail): void;
     protected _onResizeEnd(detail: ResizeLifecycleDetail): void;
     private _shouldSwipeDismiss;
     private _snapToNearestPoint;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.4.2",
+  "version": "0.6.0",
   "description": "Modal bottom-sheet wrapper for a native <dialog>.",
   "repository": {
     "type": "git",
@@ -45,8 +45,8 @@
     "test:browser:firefox": "vitest --run --project=firefox"
   },
   "dependencies": {
-    "@rcarls/rc-common": "0.4.2",
-    "@rcarls/rc-dialog": "0.4.2"
+    "@rcarls/rc-common": "0.6.0",
+    "@rcarls/rc-dialog": "0.6.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.11.0",

package/dist/rc-bottom-sheet-CR2usG4R.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"rc-bottom-sheet-CR2usG4R.js","sources":["../src/rc-bottom-sheet.ts"],"sourcesContent":["import { property } from 'lit/decorators.js';\n\nimport { RCDialog } from '@rcarls/rc-dialog';\nimport {\n  findExtremeSnapIndex,\n  findNearestSnapIndex,\n  type ResizeDirection,\n  type ResizeLifecycleDetail,\n  type ResizeOrigin,\n} from '@rcarls/rc-common';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-bottom-sheet': RCBottomSheet;\n  }\n\n  interface HTMLElementEventMap {\n    'rc-bottom-sheet-snap': CustomEvent<RCBottomSheetSnapDetail>;\n  }\n}\n\n/** Detail shape for `rc-bottom-sheet-snap`. */\nexport interface RCBottomSheetSnapDetail {\n  /** Index into the resolved `snap-points` list selected as the target. */\n  index: number;\n\n  /** Effective target height in pixels, after CSS size constraints. */\n  height: number;\n\n  /** Whether the snap came from a drag release or a `snapTo()` call. */\n  trigger: 'drag' | 'api';\n}\n\nconst DEFAULT_SNAP_DURATION_MS = 300;\nconst DEFAULT_SNAP_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\nconst LIGHT_DOM_CSS = `\n@layer rc-base {\n  rc-bottom-sheet > dialog {\n    position: var(--rc-bottom-sheet-position, fixed);\n    inset-block-start: auto;\n    inset-block-end: var(--rc-bottom-sheet-inset-block-end, 0px);\n    inset-inline: var(--rc-bottom-sheet-inset-inline, 0px);\n    box-sizing: border-box;\n    inline-size: 100%;\n    max-inline-size: var(--rc-bottom-sheet-max-inline-size, 40rem);\n    max-block-size: var(--rc-bottom-sheet-max-block-size, 70dvh);\n    margin-block: 0;\n    margin-inline: auto;\n    overflow: auto;\n  }\n\n  rc-bottom-sheet > dialog [data-rc-bottom-sheet-handle] {\n    box-sizing: border-box;\n    cursor: ns-resize;\n    touch-action: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  rc-bottom-sheet > dialog > [data-rc-bottom-sheet-handle] {\n    position: relative;\n    display: block;\n    inline-size: var(--rc-bottom-sheet-handle-target-inline-size, 100%);\n    min-block-size: var(--rc-bottom-sheet-handle-target-block-size, 3rem);\n    margin: var(--rc-bottom-sheet-handle-target-margin, 0);\n    padding: 0;\n    border: 0;\n    border-radius: inherit;\n    background: transparent;\n    appearance: none;\n  }\n\n  rc-bottom-sheet > dialog > [data-rc-bottom-sheet-handle]::before {\n    content: '';\n    position: absolute;\n    inset-block-start: 50%;\n    inset-inline-start: 50%;\n    inline-size: var(--rc-bottom-sheet-handle-inline-size, 2rem);\n    block-size: var(--rc-bottom-sheet-handle-block-size, 0.25rem);\n    border-radius: var(--rc-bottom-sheet-handle-radius, 999px);\n    background: var(--rc-bottom-sheet-handle-color, GrayText);\n    translate: -50% -50%;\n  }\n\n  rc-bottom-sheet > dialog [data-rc-bottom-sheet-handle]:focus-visible {\n    outline: auto;\n    outline-offset: -0.25rem;\n  }\n}\n`;\n\n// Floor so a noisy near-zero-distance release can't misread as a decisive\n// fling; a real swipe travels at least this far even if it's very quick.\nconst MIN_SWIPE_DISTANCE = 24;\n\n/**\n * Pins only the block-axis (top/height) geometry as inline styles, leaving\n * the inline axis (left/width) to CSS. `@rcarls/rc-common`'s\n * `pinElementBox` pins all four edges — appropriate for its own drag-resize\n * gesture math, where the inline axis can genuinely change — but a bottom\n * sheet only ever resizes/repositions along the block axis; its own\n * `LIGHT_DOM_CSS` deliberately leaves the inline axis owned by\n * `inset-inline`/`inline-size` custom properties (e.g. so a host page can\n * confine a sheet to a layout pane narrower than the viewport). Pinning\n * `left`/`width` here would freeze whatever the *unconfined* box happened\n * to measure at pin time as an inline style, which — having higher\n * cascade priority than any stylesheet rule — permanently overrides that\n * confinement regardless of specificity or layers.\n */\nfunction pinBlockBox(target: HTMLElement): DOMRect {\n  const rect = target.getBoundingClientRect();\n\n  if (getComputedStyle(target).position === 'static') {\n    target.style.position = 'fixed';\n  }\n\n  target.style.translate = 'none';\n  target.style.insetBlockStart = 'auto';\n  target.style.marginBlock = '0';\n  target.style.boxSizing = 'border-box';\n  target.style.top = `${rect.top}px`;\n  target.style.height = `${rect.height}px`;\n\n  return rect;\n}\n\n/**\n * Modal bottom-sheet wrapper for a native `<dialog>`, built on `rc-dialog`.\n *\n * The direct child `<dialog>` remains the semantic dialog surface and owns\n * content, labels, and form behavior. `rc-bottom-sheet` supplies the same\n * open/close lifecycle, focus restoration, cancel/request-close events, and\n * light-dismiss affordance as `rc-dialog`. The component docks the sheet to\n * the viewport block-end by default, while themes provide its visual surface.\n *\n * Dragging the resize handle past a decisive velocity in either direction\n * (a \"swipe\" or \"fling,\" distinct from a slow deliberate drag) snaps\n * straight to the extreme `snap-points` entry in that direction — swipe up\n * to fully expand, swipe down to fully collapse — regardless of how close\n * the release position was to some other point. Below that velocity, the\n * sheet settles to whichever declared snap point is nearest the release\n * height. All settling, whether from a drag or from `snapTo()`, animates\n * over `--rc-bottom-sheet-snap-duration`, follows\n * `--rc-bottom-sheet-snap-easing`, and is skipped for\n * `prefers-reduced-motion: reduce`.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-bottom-sheet rc-bottom-sheet docs}\n * @see {@link https://m3.material.io/components/bottom-sheets/overview Material Design bottom sheets}\n *\n * @slot - Place a `<dialog>` element with the sheet content and optional\n *   `[data-rc-bottom-sheet-handle]` resize handle here.\n *\n * @fires rc-dialog-open - Inherited from `rc-dialog`; fired when the sheet opens.\n * @fires rc-dialog-toggle - Inherited from `rc-dialog`; fired when user/native interaction changes open state.\n * @fires rc-dialog-request-close - Inherited from `rc-dialog`; cancelable close request.\n * @fires rc-dialog-cancel - Inherited from `rc-dialog`; backward-compatible cancel alias.\n * @fires rc-dialog-close - Inherited from `rc-dialog`; fired after the sheet closes.\n * @fires rc-bottom-sheet-snap - Fires when a drag release or `snapTo()` call\n *   selects a snap target. `detail: { index, height, trigger }`\n *\n * @attr light-dismiss - When present, a click on the backdrop area calls `requestClose()`.\n *   Present by default; inherited from `rc-dialog`.\n * @attr resize - Enables edge resizing, mirroring the CSS `resize` property values.\n *   Defaults to `vertical`; inherited from `rc-dialog`.\n * @attr resize-origin - Origin for resize edge hit-testing or explicit handles. Defaults to\n *   `top`; inherited from `rc-dialog`.\n * @attr resize-handle - CSS selector, scoped to the inner `<dialog>`, for explicit resize\n *   handles. Defaults to `[data-rc-bottom-sheet-handle]`; inherited from `rc-dialog`.\n * @attr snap-points - Whitespace-separated CSS heights, in ascending order, addressable by\n *   `snapTo()` and settled to on drag release.\n * @attr swipe-dismiss - Whether a decisive downward swipe of at least 96 pixels requests close.\n * @attr swipe-velocity - Minimum release velocity, in pixels per second, that counts as a\n *   decisive swipe rather than a slow deliberate drag.\n *\n * @cssprop [--rc-bottom-sheet-bg=Canvas] - Sheet surface background.\n * @cssprop [--rc-bottom-sheet-color=CanvasText] - Sheet text color.\n * @cssprop [--rc-bottom-sheet-radius=1rem 1rem 0 0] - Sheet corner radius.\n * @cssprop [--rc-bottom-sheet-shadow=none] - Sheet elevation shadow.\n * @cssprop [--rc-bottom-sheet-position=fixed] - Positioning scheme. Use `absolute` with `show()` to dock a non-modal sheet to a positioned ancestor.\n * @cssprop [--rc-bottom-sheet-inset-block-end=0px] - Distance from the positioning container's block-end edge.\n * @cssprop [--rc-bottom-sheet-inset-inline=0px] - Inline-axis inset used with automatic margins.\n * @cssprop [--rc-bottom-sheet-max-inline-size=40rem] - Maximum sheet width.\n * @cssprop [--rc-bottom-sheet-max-block-size=70dvh] - Maximum sheet height.\n * @cssprop [--rc-bottom-sheet-padding=0 1rem 1rem] - Sheet padding.\n * @cssprop [--rc-bottom-sheet-scrim=var(--rc-dialog-scrim)] - Modal backdrop color.\n * @cssprop [--rc-bottom-sheet-handle-color=GrayText] - Resize handle color.\n * @cssprop [--rc-bottom-sheet-handle-inline-size=2rem] - Resize handle width.\n * @cssprop [--rc-bottom-sheet-handle-block-size=0.25rem] - Resize handle height.\n * @cssprop [--rc-bottom-sheet-handle-radius=999px] - Resize handle corner radius.\n * @cssprop [--rc-bottom-sheet-handle-target-inline-size=100%] - Pointer target width for a direct-child handle.\n * @cssprop [--rc-bottom-sheet-handle-target-block-size=3rem] - Pointer target height for a direct-child handle.\n * @cssprop [--rc-bottom-sheet-handle-target-margin=0] - Margin around a direct-child handle target.\n * @cssprop [--rc-bottom-sheet-snap-duration=300ms] - Duration of the settle animation\n *   after a drag release or `snapTo()` call.\n * @cssprop [--rc-bottom-sheet-snap-easing=cubic-bezier(0.4, 0, 0.2, 1)] - Easing\n *   for the settle animation after a drag release or `snapTo()` call.\n */\nexport class RCBottomSheet extends RCDialog {\n  private static readonly swipeDismissThreshold = 96;\n  private static readonly _styledRoots = new Set<Document | ShadowRoot>();\n\n  private static _ensureBaseStyles(root: Document | ShadowRoot): void {\n    if (RCBottomSheet._styledRoots.has(root)) {\n      return;\n    }\n\n    RCBottomSheet._styledRoots.add(root);\n\n    const $style = document.createElement('style');\n\n    $style.setAttribute('data-rc-light-dom-base', 'rc-bottom-sheet');\n    $style.textContent = LIGHT_DOM_CSS;\n\n    if (root instanceof Document) {\n      root.head.append($style);\n    } else {\n      root.append($style);\n    }\n  }\n\n  /**\n   * Bottom sheets light-dismiss by default.\n   *\n   * Set `light-dismiss=\"false\"` as a property from JavaScript when a sheet must\n   * be closed only by explicit actions.\n   */\n  @property({ type: Boolean, attribute: 'light-dismiss' })\n  override lightDismiss = true;\n\n  /** Bottom sheets resize vertically from the top edge by default. */\n  @property({ type: String, reflect: true })\n  override resize: ResizeDirection = 'vertical';\n\n  /** Top-origin resizing keeps the sheet docked to the viewport bottom. */\n  @property({ type: String, attribute: 'resize-origin' })\n  override resizeOrigin: ResizeOrigin = 'top';\n\n  /** Default optional handle selector. Falls back to top-edge resize when absent. */\n  @property({ type: String, attribute: 'resize-handle' })\n  override resizeHandle = '[data-rc-bottom-sheet-handle]';\n\n  /**\n   * Whitespace-separated CSS heights in ascending order.\n   *\n   * Each height becomes an addressable snap target. Slow releases choose the\n   * nearest target, while decisive swipes choose the first or last target.\n   */\n  @property({ type: String, attribute: 'snap-points' })\n  snapPoints = '';\n\n  /**\n   * Whether a downward pointer resize of at least 96 pixels requests close.\n   *\n   * When false, a decisive downward swipe settles at the first snap point.\n   */\n  @property({ type: Boolean, attribute: 'swipe-dismiss' })\n  swipeDismiss = true;\n\n  /**\n   * Minimum release velocity, in pixels per second, that counts as a decisive\n   * swipe rather than a slow deliberate drag. A swipe jumps straight to the\n   * extreme `snap-points` entry in its direction; below this, the release\n   * settles to the nearest point instead.\n   */\n  @property({ type: Number, attribute: 'swipe-velocity' })\n  swipeVelocity = 500;\n\n  private readonly _reducedMotion =\n    typeof window !== 'undefined' ? window.matchMedia('(prefers-reduced-motion: reduce)') : null;\n\n  private _activeSnapAnimation: Animation | null = null;\n\n  // Snap-point heights are resolved from the *current* viewport at the\n  // moment a snap is applied (dvh units, or a probe-element measurement for\n  // other CSS units) and then frozen as inline styles by pinBlockBox — nothing\n  // re-derives them afterward. A window resize/maximize/restore while a\n  // sheet is open (without the user dragging it) otherwise leaves it pinned\n  // to stale pre-resize geometry. Track the last-applied index so a resize\n  // can re-run the same snap against fresh geometry.\n  private _lastSnapIndex: number | null = null;\n  private readonly _onWindowResize = (): void => {\n    if (!this.open || this._lastSnapIndex === null) {\n      return;\n    }\n\n    this._snapToIndex(this._lastSnapIndex, 'instant', 'api');\n  };\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    RCBottomSheet._ensureBaseStyles(this.getRootNode() as Document | ShadowRoot);\n    window.addEventListener('resize', this._onWindowResize);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('resize', this._onWindowResize);\n  }\n\n  /**\n   * Snaps to a declared target by zero-based index.\n   *\n   * Finite fractional indices are truncated and out-of-range indices clamp to\n   * the nearest endpoint. Non-finite indices and calls without valid snap\n   * points have no effect.\n   *\n   * @param index - zero-based index into `snapPoints`\n   * @param behavior - whether to animate the movement\n   *\n   * @example\n   * const sheet = document.querySelector('rc-bottom-sheet');\n   * sheet.snapTo(1);\n   */\n  snapTo(index: number, behavior: 'animated' | 'instant' = 'animated'): void {\n    if (!Number.isFinite(index)) {\n      return;\n    }\n\n    this._snapToIndex(Math.trunc(index), behavior, 'api');\n  }\n\n  protected override _onResizeEnd(detail: ResizeLifecycleDetail): void {\n    if (detail.inputType === 'pointer' && this.swipeDismiss && this._shouldSwipeDismiss(detail)) {\n      this.requestClose();\n\n      return;\n    }\n\n    const points = this._resolvedSnapPoints();\n    const velocity = detail.edge.includes('n') ? -detail.velocityY : detail.velocityY;\n    const distance = Math.abs(detail.height - detail.startHeight);\n\n    if (\n      detail.inputType === 'pointer' &&\n      points.length > 0 &&\n      distance >= MIN_SWIPE_DISTANCE &&\n      Math.abs(velocity) >= this.swipeVelocity\n    ) {\n      // Decisive fling: jump to the extreme point in the swipe direction,\n      // regardless of proximity to some other point. Height grows as the\n      // sheet is dragged upward, so a positive velocity is a swipe up.\n      const targetIndex = findExtremeSnapIndex(points, velocity > 0 ? 1 : -1);\n\n      this._snapToIndex(targetIndex, 'animated', 'drag');\n\n      return;\n    }\n\n    this._snapToNearestPoint('drag');\n  }\n\n  private _shouldSwipeDismiss(detail: ResizeLifecycleDetail): boolean {\n    return (\n      detail.edge.includes('n') &&\n      detail.startHeight - detail.height >= RCBottomSheet.swipeDismissThreshold\n    );\n  }\n\n  private _snapToNearestPoint(trigger: 'drag' | 'api' = 'api'): void {\n    const $dialog = this._$dialog;\n    const points = this._resolvedSnapPoints();\n\n    if (!$dialog || points.length === 0) {\n      return;\n    }\n\n    const height = $dialog.getBoundingClientRect().height;\n    const nearestIndex = findNearestSnapIndex(points, height);\n\n    this._snapToIndex(nearestIndex, 'animated', trigger);\n  }\n\n  private _snapToIndex(\n    index: number,\n    behavior: 'animated' | 'instant',\n    trigger: 'drag' | 'api',\n  ): void {\n    const $dialog = this._$dialog;\n    const points = this._resolvedSnapPoints();\n\n    if (!$dialog || points.length === 0) {\n      return;\n    }\n\n    // Pinning (border-box, explicit top/height) is normally established by\n    // the first drag gesture; snapTo() must do the same so a sheet that has\n    // never been dragged still measures and sets height consistently.\n    const rect = pinBlockBox($dialog);\n    const clampedIndex = Math.max(0, Math.min(index, points.length - 1));\n    const requestedHeight = points[clampedIndex];\n\n    this._lastSnapIndex = clampedIndex;\n\n    // An in-flight animation wins over inline geometry in the cascade. Pin\n    // its current visual box before cancelling so the constrained target can\n    // be measured without jumping back to the prior snap point.\n    this._activeSnapAnimation?.cancel();\n    this._activeSnapAnimation = null;\n\n    $dialog.style.height = `${requestedHeight}px`;\n\n    const targetHeight = $dialog.getBoundingClientRect().height;\n\n    // Restore the current visual box before applying or animating the target.\n    // CSS min/max block-size can make targetHeight differ from the authored\n    // snap point; anchoring from the effective height keeps the block-end edge\n    // fixed in either case.\n    $dialog.style.top = `${rect.top}px`;\n    $dialog.style.height = `${rect.height}px`;\n\n    const targetTop = rect.bottom - targetHeight;\n\n    this._applySnap($dialog, targetTop, targetHeight, behavior);\n\n    this.dispatchEvent(\n      new CustomEvent<RCBottomSheetSnapDetail>('rc-bottom-sheet-snap', {\n        bubbles: true,\n        composed: true,\n        detail: { index: clampedIndex, height: targetHeight, trigger },\n      }),\n    );\n  }\n\n  private _applySnap(\n    $dialog: HTMLDialogElement,\n    top: number,\n    height: number,\n    behavior: 'animated' | 'instant',\n  ): void {\n    // Measure before cancelling any in-flight animation. `_snapToIndex()`\n    // normally pins and cancels first, while this ordering also keeps direct\n    // calls robust if applying a snap is refactored later.\n    const fromRect = $dialog.getBoundingClientRect();\n\n    this._activeSnapAnimation?.cancel();\n    this._activeSnapAnimation = null;\n\n    if (behavior === 'instant' || this._reducedMotion?.matches) {\n      $dialog.style.top = `${top}px`;\n      $dialog.style.height = `${height}px`;\n\n      return;\n    }\n\n    if (fromRect.top === top && fromRect.height === height) {\n      return;\n    }\n\n    const animation = $dialog.animate(\n      [\n        { top: `${fromRect.top}px`, height: `${fromRect.height}px` },\n        { top: `${top}px`, height: `${height}px` },\n      ],\n      {\n        duration: this._snapDuration($dialog),\n        easing: this._snapEasing($dialog),\n        fill: 'forwards',\n      },\n    );\n\n    this._activeSnapAnimation = animation;\n\n    animation.finished\n      .then(() => animation.commitStyles())\n      .catch(() => {\n        // Interrupted by a newer gesture or snapTo() call, which owns applying\n        // its own final styles.\n      })\n      .finally(() => {\n        animation.cancel();\n\n        if (this._activeSnapAnimation === animation) {\n          this._activeSnapAnimation = null;\n        }\n      });\n  }\n\n  private _snapDuration($dialog: HTMLDialogElement): number {\n    const raw = getComputedStyle($dialog)\n      .getPropertyValue('--rc-bottom-sheet-snap-duration')\n      .trim();\n    const parsed = Number.parseFloat(raw);\n\n    return Number.isFinite(parsed) ? parsed : DEFAULT_SNAP_DURATION_MS;\n  }\n\n  private _snapEasing($dialog: HTMLDialogElement): string {\n    return (\n      getComputedStyle($dialog).getPropertyValue('--rc-bottom-sheet-snap-easing').trim() ||\n      DEFAULT_SNAP_EASING\n    );\n  }\n\n  private _resolvedSnapPoints(): number[] {\n    if (!this.snapPoints.trim()) {\n      return [];\n    }\n\n    return this.snapPoints\n      .trim()\n      .split(/\\s+/)\n      .map((point) => this._resolveSnapPoint(point))\n      .filter((point): point is number => Number.isFinite(point) && point > 0);\n  }\n\n  private _resolveSnapPoint(point: string): number {\n    const numeric = Number.parseFloat(point);\n\n    if (!Number.isFinite(numeric)) {\n      return Number.NaN;\n    }\n\n    if (point.endsWith('%')) {\n      return window.innerHeight * (numeric / 100);\n    }\n\n    if (point.endsWith('px') || String(numeric) === point) {\n      return numeric;\n    }\n\n    const probe = document.createElement('div');\n\n    Object.assign(probe.style, {\n      position: 'fixed',\n      visibility: 'hidden',\n      pointerEvents: 'none',\n      blockSize: point,\n      inlineSize: '0',\n      inset: '0 auto auto 0',\n    });\n\n    document.body.append(probe);\n\n    const height = probe.getBoundingClientRect().height;\n\n    probe.remove();\n\n    return height;\n  }\n}\n\nexport default RCBottomSheet;\n"],"names":["DEFAULT_SNAP_DURATION_MS","DEFAULT_SNAP_EASING","LIGHT_DOM_CSS","MIN_SWIPE_DISTANCE","pinBlockBox","target","rect","_RCBottomSheet","_a","RCDialog","root","$style","index","behavior","detail","points","velocity","distance","targetIndex","findExtremeSnapIndex","trigger","$dialog","height","nearestIndex","findNearestSnapIndex","clampedIndex","requestedHeight","targetHeight","targetTop","top","fromRect","animation","raw","parsed","point","numeric","probe","__decorateClass","property","RCBottomSheet"],"mappings":"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"}