Tab: Adding id as an "optional" params

[roaldjap]

Description

I added a functionality where modusTabs.tabs does not need to require to provide an id per tab instance - as label would be enough to generate a id for this to ensure active state are clicking even id were not provided.

Coincidentally, This also resolves an issue that relates to: #2197

References #
#2197

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update

How Has This Been Tested?

To reproduce this - initially I created a tab instance like this:

    const modusTabs = document.querySelector('modus-tabs');
    modusTabs.tabs = [
        {
          active: true,
          label: 'Tab 1',
        },
        {
           id: 0,
           label: 'Tab 2',
        },
    ];

I noticed tabs were not changing its active state - even if active: true is set on first tab instance.

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules
• I have checked my code and corrected any misspellings

[netlify]

✅ Deploy Preview for moduswebcomponents ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	9e05b5d
🔍 Latest deploy log	https://app.netlify.com/sites/moduswebcomponents/deploys/66eb56bc498c8c00088ed925
😎 Deploy Preview	https://deploy-preview-2872--moduswebcomponents.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 23 (no change from production) Accessibility: 98 (no change from production) Best Practices: 92 (no change from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[prashanth-offcl]

@roaldjap Can we use the index instead of generating a new ID? It’s challenging to identify the selected tab since the ID is created within the component when I want to show different tab content. Also it would be great if you can update the interface and storybook documentation.