co-bottom-sheet

Sheet inferior móvil con física de gestos nativa: sigue el dedo 1:1 hacia abajo, un flick rápido (o soltar pasado ~45% de su altura) lo cierra, el overdrag hacia arriba hace rubber-band y el backdrop se acopla al arrastre. La altura se ajusta al contenido con tope max-height (default 85dvh).

El cuerpo scrollea internamente: arrastrar desde el contenido solo mueve el sheet cuando el scroll está arriba del todo; el handle y el header siempre arrastran. Con dismissible="false" el gesto resiste en ambas direcciones y el cierre queda solo en backdrop/Escape.

Demo

Contenido del sheet…

Ver código

<co-bottom-sheet heading="Configuración" open>
<div style="padding: 4px 20px 20px">Contenido del sheet…</div>
<div slot="footer" style="display:flex; gap:8px">
  <co-button variant="stroke" label="Cancelar" style="flex:1"></co-button>
  <co-button variant="primary" label="Guardar" style="flex:1"></co-button>
</div>
</co-bottom-sheet>

API

Props

Prop	Atributo	Tipo	Default	Descripción
`closeOnEscape`	`close-on-escape`	`boolean`	`true`	Close when pressing Escape
`closeOnOverlay`	`close-on-overlay`	`boolean`	`true`	Close when tapping the backdrop
`dismissible`	`dismissible`	`boolean`	`true`	Allow closing with the drag gesture. When false, drags rubber-band back.
`heading`	`heading`	`string`	`''`	Sheet title (used when the `header` slot is empty)
`maxHeight`	`max-height`	`string`	`'85dvh'`	Maximum sheet height (any CSS length; content shorter than this hugs)
`open`	`open`	`boolean`	`false`	Whether the sheet is visible
`showHandle`	`show-handle`	`boolean`	`true`	Show the grab handle

Eventos

Evento	Detail	Bubbles	Cancelable	Descripción
`coAfterClose`	`void`	—	✓	Slide-out animation finished.
`coAfterOpen`	`void`	—	✓	Slide-in animation finished.
`coClose`	`void`	—	✓	Requested to close (gesture, backdrop, Esc). Consumer should set `open=false`.
`coOpen`	`void`	—	✓	Transitioned to open=true.

Slots

Slot	Descripción
`(default)`	Sheet body (scrollable).
`footer`	Pinned action area below the body (outside the scroll), with safe-area padding.
`header`	Custom header content (overrides `heading`). Dragging it moves the sheet.

CSS Parts

Part	Descripción
`::part(backdrop)`
`::part(body)`
`::part(footer)`
`::part(handle)`
`::part(header)`
`::part(sheet)`

CSS Custom Properties

Este componente no expone CSS custom properties.