Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-bottom-sheet>
Material Design 3 bottom sheet — a full-width panel of supplementary
content anchored to the bottom edge, the same standard/modal split as
lit-material-side-sheet/lit-material-navigation-drawer: standard
renders as a plain, always-in-flow container (e.g. a persistent player
bar docked at the bottom of your layout); modal (the default — a
bottom sheet is far more commonly a temporary, dismissible surface than
a persistent one) wraps the same content in a native <dialog>, so the
scrim, Escape-to-close, and focus trap all come from the browser.
Properties
Property
Attribute
Type
Default
Description
variant
variant
BottomSheetVariant
"modal"
open
open
boolean
false
Whether a modal sheet is open. Ignored for standard.
disableBackdropClose
disable-backdrop-close
boolean
false
If set, clicking the backdrop does not close a modal sheet.
showDragHandle
show-drag-handle
boolean
true
Shows the decorative drag-handle bar at the top of the sheet.
Events
Event
Description
close
modal only: re-dispatched from the native close event.
cancel
modal only: re-dispatched from the native cancel event. Cancelable: calling preventDefault() stops the sheet from closing.
Slots
Slot
Description
default
The sheet's content.
header
Optional header content (a title, a close button…), below the drag handle.
CSS parts
Part
Description
dialog
The native <dialog> element. Only rendered for modal.
sheet
The visible panel (background, shape, padding).
drag-handle
The decorative handle bar, only rendered while showDragHandle is set.
header
The header slot's container.
content
The default slot's container.
<lit-material-side-sheet>
Material Design 3 side sheet — a vertical panel of supplementary content
(details, filters, a contextual editor…), structurally the same
standard/modal split as lit-material-navigation-drawer minus the
selection model: standard renders as a plain, always-in-flow container
you place in your own layout; modal wraps the same content in a native
<dialog> (the same foundation lit-material-dialog uses), so the
scrim, Escape-to-close, and focus trap all come from the browser.
position picks which edge a modal sheet slides in from — "end"
(the right, in LTR) by default, since a side sheet is typically evoked
alongside primary navigation anchored to "start", not on top of it.
Properties
Property
Attribute
Type
Default
Description
variant
variant
SideSheetVariant
"standard"
position
position
SideSheetPosition
"end"
open
open
boolean
false
Whether a modal sheet is open. Ignored for standard.
disableBackdropClose
disable-backdrop-close
boolean
false
If set, clicking the backdrop does not close a modal sheet.
Events
Event
Description
close
modal only: re-dispatched from the native close event.
cancel
modal only: re-dispatched from the native cancel event. Cancelable: calling preventDefault() stops the sheet from closing.
Slots
Slot
Description
default
The sheet's content.
header
Optional header content (a title, a close button…).
CSS parts
Part
Description
dialog
The native <dialog> element. Only rendered for modal.