Common incorrect uses of <mds-accordion-timer>. Each entry pairs the wrong form with the right one and a one-line reason. System-wide rules (boolean-as-string, shadow piercing, Tailwind color utilities, raw native event listening) live in agents/anti-patterns.md - they apply here too but are not repeated.

Do Not Use mds-accordion-timer-item Outside mds-accordion-timer

<mds-accordion-timer-item> is a compound child that only works when discovered by the parent at load time; the parent assigns uuid values, drives the selection, and feeds progress. Outside its parent the item has no timer, no auto-advance, and no sibling coordination.

<!-- INCORRECT -->
<mds-accordion-timer-item selected description="Elemento isolato">
  <mds-text>Questo elemento non avra' mai un timer.</mds-text>
</mds-accordion-timer-item>

<!-- CORRECT -->
<mds-accordion-timer>
  <mds-accordion-timer-item selected description="Elemento corretto">
    <mds-text>Il timer funziona correttamente all'interno del genitore.</mds-text>
  </mds-accordion-timer-item>
</mds-accordion-timer>

Do Not Mix Child Types Inside mds-accordion-timer

The parent discovers children via querySelectorAll('mds-accordion-timer-item') and indexes them by position. A mixed-in <mds-accordion-item> or other component is left out of the rotation and toggles on its own; agents/conventions.md forbids mixing child types in compound components.

<!-- INCORRECT -->
<mds-accordion-timer>
  <mds-accordion-timer-item selected description="Timed item">
    <mds-text>Pannello a timer.</mds-text>
  </mds-accordion-timer-item>
  <mds-accordion-item label="Static item">
    <mds-text>Pannello statico non supportato qui.</mds-text>
  </mds-accordion-item>
</mds-accordion-timer>

<!-- CORRECT -->
<mds-accordion-timer>
  <mds-accordion-timer-item selected description="Primo pannello">
    <mds-text>Pannello a timer.</mds-text>
  </mds-accordion-timer-item>
  <mds-accordion-timer-item description="Secondo pannello">
    <mds-text>Altro pannello a timer.</mds-text>
  </mds-accordion-timer-item>
</mds-accordion-timer>

Do Not Set paused=“false” to Resume the Timer

paused is a boolean prop, and a false boolean is an absent attribute (agents/anti-patterns.md). Stencil reads the string "false" as false here, but the attribute stays on the element, so anything that checks [paused] still sees the timer as paused. Remove the attribute entirely (or set the property to undefined or false) to resume.

<!-- INCORRECT -->
<mds-accordion-timer paused="false">
  <mds-accordion-timer-item selected description="Primo pannello">
    <mds-text>L'attributo paused resta sull'elemento.</mds-text>
  </mds-accordion-timer-item>
</mds-accordion-timer>

<!-- CORRECT -->
<mds-accordion-timer>
  <mds-accordion-timer-item selected description="Primo pannello">
    <mds-text>Il timer e' in esecuzione.</mds-text>
  </mds-accordion-timer-item>
</mds-accordion-timer>

// CORRECT (from code)
accordion.paused = undefined; // or false: the property takes a real boolean

Do Not Set uuid or progress Manually

uuid (item position index) and progress (0-1 fill value) are owned and continuously rewritten by the parent at runtime. Setting them from outside produces race conditions between your values and the parent’s interval writes, leading to erratic progress bars and broken rotation.

<!-- INCORRECT -->
<mds-accordion-timer>
  <mds-accordion-timer-item uuid="0" progress="50" selected description="Progresso manuale">
    <mds-text>La barra di progresso verra' sovrascritta dal genitore.</mds-text>
  </mds-accordion-timer-item>
</mds-accordion-timer>

<!-- CORRECT -->
<mds-accordion-timer>
  <mds-accordion-timer-item selected description="Progresso gestito">
    <mds-text>Il genitore gestisce uuid e progress automaticamente.</mds-text>
  </mds-accordion-timer-item>
</mds-accordion-timer>

Do Not Pierce the Shadow DOM to Restyle the Progress Bar

The progress bar and the label are exposed on each item only as the documented progress and label parts. Use the documented --mds-accordion-timer-* CSS custom properties on the host (or a parent selector) to change their appearance. Targeting internal class names or undocumented parts couples your code to the implementation and will break on minor releases.

/* INCORRECT */
mds-accordion-timer >>> .progress-bar {
  background: red;
}
mds-accordion-timer-item::part(unknown-part) {
  height: 4px;
}

/* CORRECT */
mds-accordion-timer {
  --mds-accordion-timer-progress-bar-color: rgb(var(--magma-accent-fg));
  --mds-accordion-timer-progress-bar-thickness: 3px;
}

Do Not Listen for Native change Events Instead of mdsAccordionTimerChange

The component emits mdsAccordionTimerChange when the active item changes; it emits no native change event. Listen to the documented mds* event name.

// INCORRECT
accordion.addEventListener('change', (e) => { /* never fires */ });

// CORRECT
accordion.addEventListener('mdsAccordionTimerChange', (e) => {
  console.log('Indice attivo:', e.detail.index);
});