Floating sheet

A dialog.floating-sheet is ExpressiveCSS's inset dialog extension. Where a bottom sheet docks to the bottom and a side sheet to one side, a floating sheet is detached from every edge and floats above the content.

ExpressiveCSS uses md.comp.sheet.floating-style token names; these do not establish a dedicated upstream component specification. The container is surface-container-low with 28dp corners on all four sides and elevation 1. It is a <dialog>, so the ordinary dialog slots apply — a heading, body copy or a wrapping <div>, an optional <hr> with extra content, and a last-child <form method="dialog"> as the action row.

Two variants, same sheet:

• Standard — show(). No scrim; the page stays interactive while the sheet floats over it.
• Modal — showModal(). The scrim marks the page unavailable. Tap the scrim, press Escape, or use the action row to dismiss.

Show standard Show modal

Now playing

A standard floating sheet keeps the page interactive. Use it for content that should stay put while the main view is used.

Done

Filters

A modal floating sheet interrupts. The scrim marks the main view as unavailable until the sheet closes.

Apply Cancel

<dialog class="floating-sheet" aria-labelledby="floating-sheet-title">
  <h2 id="floating-sheet-title">Now playing</h2>
  <p>Secondary content, floating above the page.</p>
  <form method="dialog">
    <button type="submit" value="done">Done</button>
  </form>
</dialog>

There is no extra class for the modal variant — showModal() vs show() is the split, the same as the other two sheets.

Placement

The sheet sits 24dp in from every edge and centres in what is left, capped at 400dp wide. There are deliberately no edge modifiers: .bottom already selects a bottom sheet and .left / .right a side sheet, so a floating sheet borrowing those names would pick up two sheets' rules at once. Anchor it yourself when a corner is wanted.

<dialog class="floating-sheet" style="inset: auto 24px 24px auto; margin: 0" aria-label="Player">
  …
</dialog>

Placement is the only thing md.comp.sheet.floating says nothing about — it publishes three values, all of them container colour, shape and elevation. Override --md-comp-floating-sheet-inset or --md-comp-floating-sheet-container-max-width rather than restyling the surface.

Behavior

Dismissal is the sheet family's: Escape, the action row's form[method="dialog"], and — for the modal variant — a tap on the scrim. That last one is Dialogs.Init(), the same light-dismiss behavior every <dialog> gets; there is no floating-sheet module. A floating sheet is not draggable, so it takes no drag handle.

Name the sheet. A <dialog> takes no name from its heading, so point aria-labelledby at that heading or give it an aria-label.