p-sheet is a temporary overlay to focus the user's attention on one or multiple tasks while the underlying page is
still visible but interactions with it are blocked. It should be used thoughtfully and sparingly.
overflow: hidden on the body when opened in order to prevent background scrolling.This doesn't work completely reliable under iOS but is the most stable solution.
Feel free to address this issue in an Open Source PR, if you can provide a better solution. Current implementation
<dialog /> element internally which ensures proper focus
handling including a focus trap. In addition, it's rendered on the #top-layer which ensures the element to be on
top of the page independent of where p-sheet is placed in the DOM hierarchy (z-index is not relevant anymore and
won't have any effect).p-sheet is its open property. When it's set to true the sheet will be visible. In
order to get notified when the sheet gets closed by clicking the x button, the backdrop or by pressing the Escape
key you need to register an event listener for the dismiss event which is emitted by p-sheet.<!doctype html>
<html lang="en" class="auto">
<head>
<title></title>
</head>
<body class="bg-base">
<p-button type="button" aria="{'aria-haspopup': 'dialog'}">
Open Sheet
</p-button>
<p-sheet aria="{'aria-label': 'Some Heading'}">
<p-heading slot="header" size="large" tag="h2">
Some Heading
</p-heading>
<p-text>
Some Content
</p-text>
</p-sheet>
<script>
const pButton = document.querySelector("p-button");
const pSheet = document.querySelector("p-sheet");
pButton.addEventListener('click', () => (pSheet.open = true));
pSheet.addEventListener('dismiss', () => (pSheet.open = false));
</script>
</body>
</html>