# Floating sheet

> Secondary content on a surface that floats free of every window edge.

## Anatomy

A `dialog.floating-sheet` is ExpressiveCSS's inset dialog extension. Where a [bottom sheet](/bottom-sheet.html.md) docks to the bottom and a [side sheet](/side-sheet.html.md) 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`.