Here is an example of using the Dialog in a plain html page:
<html>
<head>
<link href="https://developer.temenos.com/uux/base.css" rel="stylesheet" />
<script src="https://developer.temenos.com/uux/unified-ux-web.min.js"></script>
</head>
<body>
<uwc-button label="Open Modal" contained id="open-modal"></uwc-button>
<uwc-dialog id="dialog-uwc" heading="Date Picker">
<uwc-date-calendar></uwc-date-calendar>
<uwc-button label="Cancel" dialogAction="cancel" slot="secondaryAction"></uwc-button>
<uwc-button label="Set" dialogAction="set" slot="primaryAction"></uwc-button>
</uwc-dialog>
<script>
const dialog = document.getElementById("dialog-uwc");
document.getElementById("open-modal").addEventListener("click", () => {
dialog.show();
});
</script>
</body>
</html>
Inherits from Material Components Web - Dialog