[PointerL]

🤔 What kind of change does this PR introduce?

• Bug fix
• Component interaction improvement
• Tests

🔗 Related Issue

Self-discovered bug. No matching issue or fix PR was found during the pre-submission search.

💡 Background and solution

Each td-message.show() call schedules a timeout without cancelling the previous one. When a newer message replaces an existing message, the old timeout can hide it before its own duration has elapsed.

Track the timeout per element, cancel it before scheduling a replacement, and remove the timer entry when it completes. Clear the timeout and hide the message on disconnect so that reconnecting the element does not retain a stale visible message.

The duration fallback, including the current duration: 0 behavior, theme inheritance and window.showTdMessage() API remain unchanged. Timers stay independent across elements.

Reproduction

window.showTdMessage({ content: 'A', duration: 3000 });
setTimeout(() => window.showTdMessage({ content: 'B', duration: 3000 }), 2000);

Before: A's timeout hides B at approximately 3 seconds, after B has been visible for only 1 second. After: B keeps its own full duration and closes at approximately 5 seconds.

The screenshots use a minimal page importing the real Web Component and calling the public global function. A lasts 1 second; B replaces it after 250 ms with a 10-second duration. The checkpoint at 1.5 seconds records actual component state and rendered classes.

Before	After

Validation

• The overlapping-message regression fails against the original implementation and passes after the fix.
• Added 6 tests covering duration fallback, custom duration, theme inheritance, overlapping messages, instance isolation, disconnect cleanup and reconnection.
• pnpm run test: 6 files, 16 tests passed, with coverage.
• pnpm run typecheck, pnpm run lint and pnpm run build passed in packages/site-components, including Less compilation.
• Prettier and git diff --check passed.
• Browser checks with real Hybrids elements confirmed the overlap fix and that a message hides on disconnect and can show again after reconnection.

📝 Changelog

• fix(site-components): Give replacement messages their full display duration and clear pending message timers on disconnect.

• This PR does not need a changelog entry.

☑️ Checklist before requesting a merge

• Documentation has been updated or is not required.
• A demo has been provided or is not required.
• TypeScript definitions have been updated or are not required.
• A changelog entry has been provided or is not required.