Correct and idiomatic ways to use the <mds-accordion-timer-item> component, ordered from most common to most specialized. Patterns assume a working knowledge of the shared component rules in agents/conventions.md.

Basic Timed Accordion

The canonical form. Always place <mds-accordion-timer-item> as a direct child of <mds-accordion-timer>. Provide a description for each item - it becomes the header label and the accessible name for the content region. Mark one item selected: without it the timer does not start.

<mds-accordion-timer>
  <mds-accordion-timer-item description="Introduzione al progetto" selected>
    <mds-text>Contenuto dell'introduzione al progetto.</mds-text>
  </mds-accordion-timer-item>
  <mds-accordion-timer-item description="Obiettivi principali">
    <mds-text>Elenco degli obiettivi principali del progetto.</mds-text>
  </mds-accordion-timer-item>
  <mds-accordion-timer-item description="Conclusioni">
    <mds-text>Riepilogo e prossimi passi.</mds-text>
  </mds-accordion-timer-item>
</mds-accordion-timer>

Setting the Initially Open Item

Mark one item selected to define which panel is open on load. The parent reads this state at componentDidLoad to anchor its timer on that item. Mark at most one item; the parent will enforce exclusive selection after load.

<mds-accordion-timer>
  <mds-accordion-timer-item description="Fase uno" selected>
    <mds-text>Descrizione della fase uno.</mds-text>
  </mds-accordion-timer-item>
  <mds-accordion-timer-item description="Fase due">
    <mds-text>Descrizione della fase due.</mds-text>
  </mds-accordion-timer-item>
</mds-accordion-timer>

Per-Item Duration Override

Set duration (in milliseconds) on a single item to give it a different display time than the global duration set on the parent. Omit duration on items that should use the parent’s default.

<mds-accordion-timer duration="5000">
  <mds-accordion-timer-item description="Panoramica rapida" duration="2000" selected>
    <mds-text>Questa sezione scorre piu velocemente delle altre.</mds-text>
  </mds-accordion-timer-item>
  <mds-accordion-timer-item description="Dettagli tecnici" duration="12000">
    <mds-text>Questa sezione richiede piu tempo per la lettura.</mds-text>
  </mds-accordion-timer-item>
  <mds-accordion-timer-item description="Contatti">
    <mds-text>Usa la durata globale di 5000 ms.</mds-text>
  </mds-accordion-timer-item>
</mds-accordion-timer>

Adjusting the Header Typography

Use typography to match the heading hierarchy of the surrounding page. Defaults to h5; choose a higher-level token only when the accordion sits inside a section that itself uses a smaller heading.

<mds-accordion-timer>
  <mds-accordion-timer-item description="Argomento principale" typography="h4">
    <mds-text>Contenuto dell'argomento principale.</mds-text>
  </mds-accordion-timer-item>
  <mds-accordion-timer-item description="Sotto-argomento" typography="h4">
    <mds-text>Approfondimento del sotto-argomento.</mds-text>
  </mds-accordion-timer-item>
</mds-accordion-timer>

Rich Slotted Content

The default slot accepts HTML elements and components, not only plain text. Use it to compose images, lists, or nested components inside the disclosure panel.

<mds-accordion-timer>
  <mds-accordion-timer-item description="Caratteristiche del prodotto">
    <mds-img src="/images/prodotto.jpg" alt="Foto del prodotto"></mds-img>
    <mds-text>
      Il prodotto include le seguenti funzionalita: gestione utenti, reportistica avanzata e
      integrazione con i sistemi esistenti.
    </mds-text>
  </mds-accordion-timer-item>
  <mds-accordion-timer-item description="Prezzi e licenze">
    <mds-text>Contatta il nostro team commerciale per un preventivo personalizzato.</mds-text>
    <mds-button label="Richiedi preventivo" variant="primary" tone="strong"></mds-button>
  </mds-accordion-timer-item>
</mds-accordion-timer>

Reacting to Item Changes

Listen for mdsAccordionTimerItemClickSelect to detect user-initiated selection (it fires only when a click opens the item). mdsAccordionTimerItemSelect on the item fires on every selection - click, code or timer - and mdsAccordionTimerChange on the parent reports the new index.

<mds-accordion-timer id="timer">
  <mds-accordion-timer-item description="Notizie in evidenza" id="item-0" selected>
    <mds-text>Prima notizia in evidenza della giornata.</mds-text>
  </mds-accordion-timer-item>
  <mds-accordion-timer-item description="Aggiornamenti recenti" id="item-1">
    <mds-text>Ultimi aggiornamenti disponibili.</mds-text>
  </mds-accordion-timer-item>
</mds-accordion-timer>

<script>
  document.getElementById('item-0').addEventListener('mdsAccordionTimerItemClickSelect', (e) => {
    console.log('selezione manuale', e.detail);
  });

  document.getElementById('timer').addEventListener('mdsAccordionTimerChange', (e) => {
    console.log('avanzamento automatico, indice:', e.detail.index);
  });
</script>

Styling Customization

Style the item only through its documented --mds-accordion-timer-item-* CSS custom properties. Use semantic color roles wrapped in rgb(var(--magma-<role>)) so dark mode and high-contrast modes keep working. Note that these custom properties are also inherited from the parent’s --mds-accordion-timer-* counterparts - setting them on the parent applies to all items at once.

/* Customise a single item by targeting its host */
.featured-section mds-accordion-timer-item {
  --mds-accordion-timer-item-color: rgb(var(--magma-accent-fg));
  --mds-accordion-timer-item-progress-bar-color: rgb(var(--magma-accent-fg));
  --mds-accordion-timer-item-progress-bar-background: rgb(var(--magma-wash-base));
  --mds-accordion-timer-item-progress-bar-thickness: 4px;
  --mds-accordion-timer-item-duration: 300ms;
}