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

pausedpausedbooleanWhen paused is defined, the timer stops run

durationnumberSets the duration of the single accordion item

Overview

The <mds-accordion-timer> web component is the orchestrating parent of an auto-advancing accordion in the Magma Design System. It groups one or more <mds-accordion-timer-item> children, runs a timed progress cycle over them, and automatically opens the next item when the current one elapses - a behaviour with no native HTML primitive.

Semantic Behavior

Compound parent: Drives selection across its slotted <mds-accordion-timer-item> children; it is meaningless without item children.Initial selection: The child carrying selected (the last one, if several do) becomes the active item and starts the timer on load; if none is selected, the timer stays idle until an item is activated.Auto-advance cycle: When the active item elapses, the next item opens, wrapping back to the first after the last - producing a continuous loop.Per-item duration override: Each item uses its own duration when set, otherwise falling back to the parent duration.Pause on hover: Hovering the active item pauses the countdown and resumes on mouse-leave; this is suppressed while paused is set.Manual selection: Clicking an item selects it and holds its countdown at the start until the pointer leaves the item, while programmatic selection restarts the timer from the beginning of that item. Both clear paused.Emitted event: mdsAccordionTimerChange with the new item index whenever the active item changes; after a click or an auto-advance it fires twice with the same index.

Properties & Visual Configurations

This component exposes only timing controls; it has no variant / tone / size ladder of its own.

Other behavioral props

duration is the fallback cycle length in milliseconds applied to every item that does not declare its own duration; it is the global pacing knob for the whole accordion.paused freezes the countdown at its current remaining time when set and resumes it when cleared. While paused, hover-driven pause/resume is disabled; selecting an item, by click or from code, clears it.