feat(tabs): provide the ability to render a tabpanel outside the tabset

[spliffone]

Describe in detail what your merge request does and why. Add relevant
screenshots and reference related issues via Closes #XY or Related to #XY.

---

• I confirm that this MR follows the contribution guidelines.

[gemini-code-assist]

Code Review

This pull request introduces the SiTabContentComponent to allow rendering tab content outside the SiTabsetComponent. It also updates the SiTabsetComponent to handle external content and adds corresponding tests. The changes enhance the flexibility of the tabs component. Feedback includes suggestions for improving the efficiency of signal computations, ensuring robustness in ARIA attribute handling, and adding a default case to a switch statement for better error handling.

[gemini-code-assist]

The effect that pushes ARIA attributes to the external content component relies on active.tabId. If active is undefined, accessing active.tabId will result in an error. Add a check to ensure active is defined before accessing its properties.

Also, consider using takeUntilDestroyed to automatically unsubscribe from the effect when the component is destroyed to prevent memory leaks.

    effect(() => {
      const contentRef = this.content();
      const active = this.activeTab();
      if (contentRef && active) { // Add check for active
        contentRef.panelId.set( `content-${active.tabId}` );
        contentRef.labelledBy.set(`tab-${active.tabId}`);
      } else {
        contentRef?.panelId.set(undefined);
        contentRef?.labelledBy.set(undefined);
      }
    });

[gemini-code-assist]

The activeIndex computed signal calculates the index of the active tab. If no tab is active, it returns -1. This is good. However, if the tabPanels signal changes (e.g., a tab is added or removed), this computation might trigger unnecessarily, even if the active tab hasn't changed. Consider memoizing the tabPanels signal or using a more efficient way to track the active index to avoid redundant computations.

Consider using computed(() => this.tabPanels().findIndex(tab => tab.active())) for efficiency.

[gemini-code-assist]

Consider adding a default case to the switch statement to handle unexpected activeIndex values. This can help prevent unexpected behavior if the activeIndex signal ever holds a value outside the expected range.