Detail Slider

<dsx-detail-slider> — Detail Slider

Fixed off-canvas panel that slides in from the left or right edge.

Live Preview

Import

import '@bnotk/dsx/components/detail-slider.js';

Usage

<button type="button" onclick="document.querySelector('dsx-detail-slider').open = true">Open panel</button>

<dsx-detail-slider position="right" width="32rem">
  <span slot="header">Customer details</span>
  <p>Body content</p>
  <div slot="footer">Footer actions</div>
</dsx-detail-slider>

Elements

<dsx-detail-slider>

Slide-in overlay panel with header, body, footer, and built-in backdrop/close affordances.

Properties

Property	Type	Default	Description
open	boolean	false	Moves the slider on screen and shows the backdrop when true.
position	’left’ | ‘right'	'right’	Controls which side the panel slides from.
width	string	’400px’	Applied to the --ds2-detail-slider-width CSS variable in updated().

Methods

Method	Description
close()	Sets open = false and emits dsx-close.

Events

Event	Detail	Description
dsx-close	—	Bubbles/composed when the close button or backdrop calls close().

Slots

Slot	Description
header	Header title content.
default	Main content area.
content	Additional content projected after the default slot in the content region.
footer	Footer area, always rendered at the bottom.

CSS Parts

Part	Description
header	Header wrapper containing the title slot and close button.
content	Scrollable main content region.
footer	Footer wrapper.

Notes

• The backdrop is rendered inside the shadow root and uses z-index: -1 relative to the fixed host.
• Both the backdrop click and the close button call the same close() method.

Behavior Notes

• The host itself is fixed and spans top-to-bottom, with translation controlled entirely by host attributes.
• A custom width string can be anything valid in CSS, for example 28rem or 50vw.

Styling Notes

• Panel surface uses white background, large shadow, and a transition driven by --ds2-transition-base.
• Header/footer add grey separators; the content region scrolls independently.