feat(modal): add bottom sheet functionality (#23828)

resolves #21039

core/src/components/modal/utils.ts

@@ -0,0 +1,48 @@
+/**
+ * Use y = mx + b to
+ * figure out the backdrop value
+ * at a particular x coordinate. This
+ * is useful when the backdrop does
+ * not begin to fade in until after
+ * the 0 breakpoint.
+ */
+export const getBackdropValueForSheet = (x: number, maxBreakpoint: number, backdropBreakpoint: number) => {
+
+  /**
+   * We will use these points:
+   * (backdropBreakpoint, 0)
+   * (maxBreakpoint, 1)
+   * We know that at the beginning breakpoint,
+   * the backdrop will be hidden. We also
+   * know that at the maxBreakpoint, the backdrop
+   * must be fully visible.
+   * m = (y2 - y1) / (x2 - x1)
+   *
+   * This is simplified from:
+   * m = (1 - 0) / (maxBreakpoint - backdropBreakpoint)
+   */
+  const slope = 1 / (maxBreakpoint - backdropBreakpoint);
+
+  /**
+   * From here, compute b which is
+   * the backdrop opacity if the offset
+   * is 0. If the backdrop does not
+   * begin to fade in until after the
+   * 0 breakpoint, this b value will be
+   * negative. This is fine as we never pass
+   * b directly into the animation keyframes.
+   * b = y - mx
+   * Use a known point: (backdropBreakpoint, 0)
+   * This is simplified from:
+   * b = 0 - (backdropBreakpoint * slope)
+   */
+  const b = -(backdropBreakpoint * slope);
+
+  /**
+   * Finally, we can now determine the
+   * backdrop offset given an arbitrary
+   * gesture offset.
+   */
+
+  return (x * slope) + b;
+}