feat(tabs): create vertical tabs story

[sangeethababu9223]

Closes #19761

Adds vertical tabs support to Carbon Web Components, achieving parity with the React implementation.

Changelog

New

• cds-tabs-vertical - Wrapper component for vertical tab layout
• Responsive behavior with 673px breakpoint (matches Carbon's md breakpoint) - Same as React version
• Automatic height calculation based on tallest panel
• Optional custom-height property for manual height control
• Keyboard navigation with Up/Down arrow keys

Testing / Reviewing

In Web Components storybook, Vertical story should be there under Tabs component and the behaviour matches the react version.

Note:
In smaller screens Vertical tabs is expected to match the behaviour of Conatined Tabs. And I did notice a slightly different styling for overflow left and right buttons in WC compared to React. I could create a separate issue for that after doing further research as this a contined tabs specific issue.

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

• Reviewed every line of the diff
• Updated documentation and storybook examples
• Wrote passing tests that cover this change
• Addressed any impact on accessibility (a11y)
• Tested for cross-browser consistency
• Validated that this code is ready for review and status checks should pass

More details can be found in the pull request guide

[netlify]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	2e6fdf9
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/69e7adb1e3cc5400087de05a
😎 Deploy Preview	https://deploy-preview-21654--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	2e6fdf9
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/69e7adb1256501000806fafc
😎 Deploy Preview	https://deploy-preview-21654--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 95.01%. Comparing base (0df8173) to head (2e6fdf9).

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #21654   +/-   ##
=======================================
  Coverage   95.01%   95.01%           
=======================================
  Files         538      538           
  Lines       44982    44982           
  Branches     6459     6516   +57     
=======================================
+ Hits        42739    42740    +1     
+ Misses       2114     2113    -1     
  Partials      129      129           

Flag	Coverage Δ
main-packages	89.03% <ø> (ø)
web-components	97.86% <ø> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Kritvi-bhatia17]

Great work @sangeethababu9223! Just some comments around buttons specs and props:

1. Would we need the "contained" and "disabled" prop? It's not in the react storybook.

2. When switched to a small size, the vertical tabs becomes the container tab the size and the color of the tab button is incorrect, sharing the specs below. Is this the part that you mentioned in your PR description under Note to create a separate issue for it?

3. In react storybook, there is a prop called 'defaultSelectedIndex', which seems to be missing in WC storybook, is it intentional? (sharing the screenshot reference below)

4. The props names in react and WC storybook are different like "height" in react and "customHeight" in WC, is it intentional?

5. There is also a missing prop called 'selectedIndex' which is present in react and not in WC storybook, is that also intentional? I saw that you added a 'selectionMode' prop is that for this usecase?

[sangeethababu9223]

Great work @sangeethababu9223! Just some comments around buttons specs and props:

Hey @Kritvi-bhatia17,

Thank you for the detailed review! Let me address each point:

1. "contained" and "disabled" props
   You're right, these have been removed.

2. Small size styling issues
   Yes, this is the issue I mentioned in the PR description. Vertical tabs should match contained tabs styling at small sizes. We have a separate issue tracking this.

3. defaultSelectedIndex prop
   Web Components only has selectedIndex (not defaultSelectedIndex). This single prop handles both setting the initial tab and controlling which tab is selected.

4. height vs customHeight
   Using customHeight was intentional to avoid conflicts with the native HTML height attribute and to follow Web Components naming conventions.

5. selectedIndex prop
   Yes, this is needed and I've added it to the story.
   selectionMode is separate - it controls keyboard navigation behavior and was added to test manual and automatic selection options in Vertical tabs. This is the same as the activation prop in React.

Once all Tab stories are complete, we can do a full comparison and update controls to ensure parity between React and Web Components where appropriate. We can track that here: #20954

[Kritvi-bhatia17]

LGTM @sangeethababu9223, thanks for answering all queries in depth! 🚀