The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.

Props

openedopenedbooleanSpecifies if the component is opened

Overview

The <mds-details> web component is the disclosure widget of the Magma Design System: a collapsible block with a clickable header that shows or hides its content on demand. It is the styled, accessible equivalent of the native HTML <details>/<summary> pair, structured into dedicated title, icon, action and content regions.

Semantic Behavior

Open/closed state: The opened prop expands or collapses the content region with a transition.Header activation: Clicking the header or the leading icon toggles the open state, and the header is keyboard-activatable with Enter (Space does not toggle it).Change event: Each user toggle emits mdsDetailsChange carrying the new boolean open state; changing opened from code emits nothing.Icon slot presence: The leading icon area auto-hides when no icon slot is provided.Default slot vs. named slots: The default (unnamed) slot is the collapsible body. The title slot is the always-visible header label, icon is the optional leading glyph, and action is a footer region inside the expandable content meant for action controls.

Properties & Visual Configurations

This component intentionally exposes a single behavioral prop. Visual surface is driven through slots and the exposed CSS custom properties rather than through variant/tone props. opened sets the expanded state. Set it to pre-expand the block on first render, or change it to open / close the block from code. User toggles do not write it back (track mdsDetailsChange for the current state), so after a toggle opened can be stale and assigning the value it already holds does nothing.

Other behavioral props

The title slot is recommended to hold an mds-text; the icon slot an mds-icon; and the action slot an mds-button for the primary action tied to the disclosed content.