Use `data-panel-target` plus `data-panel-open="small|medium|large"` on any button.
Open any sheet with plain buttons and named snap sizes.
The component now supports declarative triggers, semantic snap names, drag damping, body-scroll handoff, background scaling, and a cleaner Web Component API.
Current state: closedThe panel only steals a touch from scrolling content when that touch started at the top.
Small, medium, and large map to different snap fractions on mobile and desktop.
When you publish the component, put the script on your CDN and paste this into your site.
<script
type="module"
src="https://components-5l2.pages.dev/app-panel.js"
></script>
Replace the URL above with your real hosted file.
Step 1
Add the script tag to your page.
Step 2
Wrap your website content in an element with `data-panel-app`.
Step 3
Add an `<app-panel>` with an `id`, then connect buttons to it.
This is the easiest version for a normal website. Paste it into your page and change the words.
<script
type="module"
src="https://components-5l2.pages.dev/app-panel.js"
></script>
<div data-panel-app>
<main>
<button data-panel-target="help-panel" data-panel-open="medium">
Open panel
</button>
</main>
</div>
<app-panel
id="help-panel"
aria-label="Help panel"
snaps="small medium large"
default-snap="medium"
scale-background
>
<div style="display:grid; gap:16px;">
<h2 style="margin:0;">Hello from Panel</h2>
<p style="margin:0;">This panel opens at the medium size.</p>
<button data-panel-action="close">Close</button>
</div>
</app-panel>
These three buttons all open the same panel, but at different snap sizes.
<button data-panel-target="menu-panel" data-panel-open="small">Small</button>
<button data-panel-target="menu-panel" data-panel-open="medium">Medium</button>
<button data-panel-target="menu-panel" data-panel-open="large">Large</button>
<app-panel id="menu-panel" aria-label="Menu">
...
</app-panel>
Small is good for quick actions, menus, or short notices.
Medium is the best default for most websites.
Large is best when the panel contains lots of text, forms, or scrolling content.
Use this when you want the same button to open and close the panel.
<button
data-panel-target="settings-panel"
data-panel-action="toggle"
data-panel-open="medium"
>
Toggle settings
</button>
These controls change the current panel without extra JavaScript.
<button data-panel-action="snap" data-panel-open="small">Small</button>
<button data-panel-action="snap" data-panel-open="medium">Medium</button>
<button data-panel-action="snap" data-panel-open="large">Large</button>
<button data-panel-action="close">Close</button>
If you want the panel to already be visible on page load, add `open`.
<app-panel
id="welcome-panel"
aria-label="Welcome"
open
default-snap="large"
>
...
</app-panel>
You can change the look without editing the component file.
<app-panel
id="brand-panel"
style="
--app-panel-bg: rgba(22, 28, 45, 0.84);
--app-panel-border: rgba(255, 255, 255, 0.12);
--app-panel-handle: rgba(255, 255, 255, 0.28);
--app-panel-backdrop: rgba(4, 8, 15, 0.52);
color: white;
"
>
...
</app-panel>
You do not need JavaScript for normal use, but it is available if you want it.
<script type="module">
const panel = document.querySelector("#help-panel");
panel.openAt("large");
panel.snapTo("small");
panel.close();
panel.toggle();
</script>
You can listen for open, close, and snap changes.
<script type="module">
const panel = document.querySelector("#help-panel");
panel.addEventListener("panel-open", (event) => {
console.log("opened", event.detail.snap);
});
panel.addEventListener("panel-close", (event) => {
console.log("closed", event.detail.reason);
});
</script>
Inventory sync
Shift summaries
Staff exceptions
Revenue deltas