Canonical layouts

List-detail canonical layout (COMPONENT_SPEC §16a; Compose ListDetailPaneScaffold): the list alone below 840px of the layout's own width (the detail after navigateTo('detail'), back with navigateBack()), list and detail from 840px, list, detail and extra from 1600px (m3.material.io; paneRule="compose": from 1200px, Compose's calculatePaneScaffoldDirective). Panes move on Compose's pane motion and focus follows the destination (m3e-elements' PaneScaffoldLayout, the code <m3e-list-detail-layout> runs). Elements with data-pane-navigate="detail" / "back" inside navigate on click. Other props go to the .m3e-layout root (the size container); give it a height.

Supporting-pane canonical layout (COMPONENT_SPEC §16a; Compose SupportingPaneScaffold): the main pane alone below 840px (the supporting pane reflows under it when the layout is at least 900px tall), main and supporting from 840px, all three from 1600px (paneRule="compose": from 1200px). Same behavior as ListDetailPaneScaffold.

Feed canonical layout (COMPONENT_SPEC §16a; m3.material.io Canonical examples › Feed — Compose has no feed scaffold): a grid of items, one column below 600px of its own width, from 600px as many columns as fit, with m3.material.io's 16 / 24dp margins. CSS only: renders div.m3e-layout > div.m3e-feed. Props go to the .m3e-feed grid.

rememberListDetailPaneScaffoldNavigator: the list first (Compose's default history); pass the result to <ListDetailPaneScaffold navigator>.

rememberSupportingPaneScaffoldNavigator: the main pane first.

DefaultThreePaneScaffoldNavigator (ThreePaneScaffoldNavigator.kt L359-490) without Compose's transition state: navigateTo / navigateBack change the history and the value at once; the caller animates (and Compose's directive change snaps, L349-354: so does setting scaffoldDirective here). Content keys compare with Object.is (Kotlin equals for data classes: use primitives or shared objects).

The current window size class (FOUNDATIONS §9; Compose currentWindowAdaptiveInfoV2() .windowSizeClass), re-rendering only when the width or height class changes. Follows the viewport, or target's content box, through m3e-elements' observeWindowSizeClass. Pass the result to isWidthAtLeastBreakpoint, paneScaffoldDirective or navigationSuiteType (@kyralabs/m3e-motion, also re-exported by @kyralabs/m3e-elements and the umbrella).

<m3e-list-detail-layout> (COMPONENT_SPEC §16a; Compose ListDetailPaneScaffold with rememberListDetailPaneScaffoldNavigator): children with slot="list", slot="detail" (also every child without a slot) and slot="extra" become the list, detail and extra panes. One pane below 840px of the layout's own width (the list until something navigates to the detail), list and detail from 840px, all three from 1600px (m3.material.io; pane-rule="compose": from 1200px, Compose's calculatePaneScaffoldDirective).

• Attributes: list-label, detail-label, extra-label (the panes' region names; default Compose's "Secondary pane" / "Primary pane" / "Tertiary pane"), pane-rule (recommended, the default, | compose), drag-handle (a pane expansion handle between two panes).
• Properties: navigator (m3e-motion ThreePaneScaffoldNavigator; created on first use), anchors (drag handle anchors), preferredWidths (px per role), read-only scaffoldValue, currentDestination.
• Methods: navigateTo(pane, contentKey?) (list | detail | extra or a role), navigateBack(behavior?), canNavigateBack(behavior?).
• Declarative: a click on an element with data-pane-navigate="detail" (and an optional data-content-key) navigates there; data-pane-navigate="back" navigates back and hides while there is nothing to go back to.
• Event: scaffold-value-change (detail: { value, destination }) after every navigation or size change.

<m3e-supporting-pane-layout> (COMPONENT_SPEC §16a; Compose SupportingPaneScaffold with rememberSupportingPaneScaffoldNavigator): children with slot="main" (also every child without a slot), slot="supporting" and slot="extra" become the main, supporting and extra panes. One pane below 840px of the layout's own width (the main pane; the supporting pane reflows under it when the layout is at least 900px tall), main and supporting from 840px, all three from 1600px (m3.material.io; pane-rule="compose": from 1200px, Compose's calculatePaneScaffoldDirective).

Attributes main-label, supporting-label, extra-label, pane-rule, drag-handle; the properties, methods (navigateTo('supporting'), …), declarative data-pane-navigate controls and the scaffold-value-change event are those of <m3e-list-detail-layout>.

Canonical layouts (COMPONENT_SPEC §16a, FOUNDATIONS §9): list-detail and supporting pane (Compose ListDetailPaneScaffold / SupportingPaneScaffold over ThreePaneScaffold), and the feed (m3.material.io; Compose has no feed scaffold).

Pane roles are Compose's ThreePaneScaffoldRole: list-detail = list (secondary), detail (primary), extra (tertiary), in that order from the start; supporting pane = main (primary), supporting (secondary), extra (tertiary). Put the panes in that DOM order (it is the visual and focus order; RTL mirrors it).

Sizing is the layout's own: .m3e-layout is an inline-size container and the queries below read its width, so a layout inside a navigation suite's content area (or any pane) adapts to the room it has, not to the window. Compose reads the window size class (calculatePaneScaffoldDirective); the breakpoints are the same, the pane counts by default m3.material.io's (Breakpoints; owner decision 2026-10-18, COMPONENT_SPEC §16a):

• below 840px (compact, medium): one pane, the destination (data-destination: primary,

• from 840px (expanded) and at large (1200px): two panes, the destination plus the

• from 1600px (extra-large): all three panes;
• --compose follows Compose's calculatePaneScaffoldDirective instead: all three panes from

Each pane starts at its preferred width (360dp, 412dp from large; a pane's own --m3e-comp-pane-scaffold-pane-preferred-width overrides it), the primary pane takes the rest, and every pane shrinks by the same ratio when they do not fit (ThreePaneScaffold's measure policy). Give the layout a height (it fills its parent); each pane scrolls on its own.

CSS alone shows the current destination only. m3e-elements' PaneScaffoldLayout (used by <m3e-list-detail-layout>, <m3e-supporting-pane-layout> and m3e-react) adds the destination history, reflow, navigation motion, focus and the drag handle. It sets [data-managed] and then writes, per pane, data-pane-value (expanded | reflowed | hidden), [data-grow] (the pane that takes the rest), [data-collapsed] (a split dragged to an edge) and --_m3e-pane-basis (a resting drag split), plus [data-reflow] on the scaffold (a pane reflowed under another: stacked, the lower one at most its preferred height or half). While panes move ([data-animating]) every shown pane is absolutely placed from

and an exiting pane keeps [data-exiting] until it is out; nothing reads layout meanwhile. The drag handle (__drag-handle, a separator around .m3e-vertical-drag-handle) is centred on

while [data-handle] is set (exactly two panes expanded).

Vertical drag handle (Compose VerticalDragHandle, material3 DragHandle.kt): the bar a pane scaffold's pane expansion handle draws (layout.css). The host gives it its touch target and states:

[data-pressed] on the host: pressed size / shape / color; [data-dragged]: dragged. Compose switches them without animation (graphicsLayer shape and layout size read the interaction state directly, DragHandle.kt L84-124), so this does too.

Tokens (DragHandleTokens.kt @ 19991f2c, generated drag-handle.css): 4 × 48dp, corner full, outline; pressed and dragged 12 × 52dp, corner medium, on-surface.