Details blade

The 36rem side panel of sections on an asset page.

mrn://postgresql/table/shop.public.orders 12 Mar 2026

<mm-details-blade heading="orders" full-view-href="/assets/postgresql/shop.public.orders" resizable collapsible storage-key="asset.blade">
  <mm-blade-section heading="Details">
    <mm-description-list>
      <mm-description term="MRN" mono>mrn://postgresql/table/shop.public.orders</mm-description>
      <mm-description term="Created">12 Mar 2026</mm-description>
    </mm-description-list>
  </mm-blade-section>
</mm-details-blade>

Guidance

The details blade is the 36rem (blade-w) side panel on an asset page: plain sections separated by hairlines on mm-chrome, with a hairline on its inline-start edge. It is never a stack of cards. The head carries the title, an optional "Full view" link and a close button. Identifiers such as MRNs wrap anywhere.

mode="static" (default) sits in the page grid as a labelled region. mode="overlay" slides over the content from the inline-end edge with shadow-float (220ms, instant when opened or closed from the keyboard, opacity only under reduced motion). It is a non-modal dialog: focus moves to the close button when it opens and returns to where it was when it closes, and Escape closes it.

With resizable, the inline-start edge is a handle: drag it, or focus it (a role="separator" with aria-valuenow, aria-valuemin and aria-valuemax) and use Left and Right to resize by 16px (flipped in right-to-left layouts) or Home and End for the minimum (320px) and maximum (half the viewport). The width is remembered in localStorage under storage-key. With collapsible, a button folds the blade to a 3rem rail, as the asset blade does.

Pattern for the handle: https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/

Properties

Property	Attribute	Type	Default	Description
heading	heading	string	''	The title, usually the asset name.
level	level	number	2	Outline level of the title.
mode	mode	'static' | 'overlay'	'static'	static (in the page grid, default) or overlay (slides over the content).
open	open	boolean	false	Overlay mode: whether the blade is showing.
fullViewHref	full-view-href	string	''	Href of the "Full view" link in the head.
fullViewLabel	full-view-label	string	''	Text of the full view link. Defaults to "Full view".
closable	closable	boolean	false	Shows a close button in static mode. Overlay mode always has one.
resizable	resizable	boolean	false	Adds the edge resize handle.
width	width	number | undefined		Width in pixels. Unset, the blade is blade-w (36rem).
storageKey	storage-key	string	''	localStorage key that remembers the width.
collapsible	collapsible	boolean	false	Adds a button that folds the blade to a 3rem rail.
collapsed	collapsed	boolean	false	Folded to the 3rem rail.
handleLabel	handle-label	string	''	Accessible name of the resize handle. Defaults to "Resize details".

Methods

Method	Description
show()	Opens the overlay blade.
hide()	Closes the overlay blade (without firing mm-close).

Events

Event	Detail	Description
mm-close	CustomEvent<Record<string, never>>	The close button or Escape asked to close. Cancelable; in overlay mode the blade closes itself unless cancelled.
mm-resize	CustomEvent<{ width: number }>	The blade was resized by pointer or keyboard, in pixels.
mm-collapse	CustomEvent<{ collapsed: boolean }>	The blade was folded to its rail or expanded.

Slots

Slot	Description
Default	mm-blade-section elements.
heading	The title, if it needs markup. Otherwise use heading.
actions	Extra head buttons, before the "Full view" link.
footer	Content pinned under the sections.

CSS parts

Part	Description
blade	The region or dialog.
head	The head row.
heading	The mm-heading.
full-view	The "Full view" link.
close	The close button.
collapse	The collapse toggle.
handle	The resize handle.
body	The scrolling sections wrapper.

Examples

Every state of mm-details-blade in Storybook, with keyboard and screen reader tests.