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	ab376ed
🔍 Latest deploy log	https://app.netlify.com/sites/moduswebcomponents/deploys/67448780c237d10008bc1412
😎 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: 51 (🟢 up 10 from production) Accessibility: 75 (no change from production) Best Practices: 92 (no change from production) SEO: 100 (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.

[vetrivel1]

• File: stencil-workspace/src/components/modus-tabs/modus-tabs.tsx (line 88-93) The new code adds automatic ID generation for tabs when no ID is provided, but the kebabCase function doesn't handle null or undefined inputs safely. If tab.label is null or undefined, the function will throw an error when calling .match() on it. Consider adding a null check before calling kebabCase.

• File: stencil-workspace/src/utils/utils.ts (line 20-25) The kebabCase implementation assumes the input string will match the regex pattern and return an array, but it doesn't handle edge cases where the match returns null (empty strings, strings with only special characters). The .join() call would throw an error in such cases.

• File: stencil-workspace/src/components/modus-tabs/modus-tabs.e2e.ts (line 65) The test case uses a mixed approach for tab IDs (one tab without ID, one with numeric ID 0), but doesn't verify that both tabs render correctly. Consider expanding test coverage to validate both tabs.

• File: stencil-workspace/src/utils/utils.spec.ts (line 23-27) The unit test for kebabCase only tests a single case with whitespace. Add more test cases for different inputs like camelCase, PascalCase, and edge cases like empty strings or strings with special characters.