Sheet

Slide-over panel on <dialog> from any edge via data-side — no portal, no wrapper library.

INSTALL

1pnpm dlx @sayagodev/mo add sheet

Or copy the files manually and import them:

1import "@sayagodev/mo/css/sheet.css";2import "@sayagodev/mo/js/base.js";3import "@sayagodev/mo/js/sheet.js";

Select side:

USAGE

1<button type="button" command="show-modal" commandfor="demo-sheet">2  Open Drawer3</button>4 5<dialog id="demo-sheet" class="sheet" data-side="right">6  <form method="dialog">7    <header>8      <h3>Navigation Menu</h3>9      <p>Browse application settings and account profiles.</p>10    </header>11    <div>…</div>12    <footer>13      <button type="submit" value="cancel">Close</button>14    </footer>15  </form>16</dialog>

API REFERENCE

PROPERTIESTYPEDEFAULTDESCRIPTION

class="sheet"on <dialog>—Sheet surface — pairs with data-side.

data-side"right" | "left" | "top" | "bottom""right"Direction from which the sheet enters the viewport.

command / commandfor"show-modal" + target id—Declarative open; Esc and backdrop clicks close natively.

closedby"any" | "closerequest"—Light-dismiss behavior (polyfilled where missing).

THEMING · PLAYGROUND

The component from the examples above wearing a completely different theme. Edit tokens and --mo-* hooks — autocomplete knows them — and the preview obeys in real time.

Global tokens

--border--muted--muted-foreground--radius

Component hooks

--mo-sheet-handle-height--mo-sheet-handle-width--mo-sheet-max-block-size--mo-sheet-max-width

Preview

Your CSS

Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.

Sheet

Sheet Component (right)

Deployment log