kt-side-panel
A drawer sliding in from the right, for viewing or editing one record without losing the list behind it.
Preview
Focus is trapped, Escape closes, the page behind is inert.
A drawer sliding in from the right, for viewing or editing one record without losing the list behind it.
Built on <dialog>
showModal() is doing real work here. It puts the panel in the top layer,
above every stacking context — which no z-index can guarantee — traps focus
inside it, makes the rest of the page inert, and handles Escape.
The fixed-position div this replaces did none of that: tabbing walked straight out of the panel into the page behind it.
Guarding unsaved changes
kt-close is cancelable. Cancel it and the panel stays open — including when
Escape was what triggered it.
no-backdrop-close removes backdrop dismissal. Escape still works: a modal you
cannot escape from is a trap, and cancelling kt-close is the right way to
guard it.
Width
size sets it: small (308px, the default) for a record or a form,
medium (480px), large (720px) for more than a form — a comparison, a
configuration. On a phone it is never wider than the screen.
API
| Property | Attribute | Type | Default |
|---|---|---|---|
open | open | boolean | false |
eyebrow | eyebrow | string | 'Details' |
heading | heading | string | '' |
size | size | 'small' | 'medium' | 'large' | 'small' |
noBackdropClose | no-backdrop-close | boolean | false |
| Method | Description |
|---|---|
requestClose() | Fires kt-close, closes unless cancelled |
| Event | Description |
|---|---|
kt-close | Dismissal requested. Cancelable. |
| Slot | Description |
|---|---|
| default | Panel body |
footer | Pinned below the body |