feat(tabs): DLT-3114 add vertical orientation variant

[Francis Rupert (francisrupert)]

🛠️ Type Of Change

• Feature

📖 Jira Ticket

DLT-3114

📖 Description

• Add orientation prop (horizontal (default) | vertical)
• Vertical keyboard navigation: Up/Down arrows
• Assign aria-orientation
• Restructure tabs.less with custom properties and idiomatic BEM nesting
• Fix pre-existing validate → validator typo on size prop
• Unify all arrow keypress handlers to keydown over keyup

📝 Checklist

For all PRs:

• I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
• I have reviewed my changes.
• I have added all relevant documentation.
• I have considered the performance impact of my change.

For all Vue changes:

• I have added / updated unit tests.
• I have validated components with a screen reader.
• I have validated components keyboard navigation.

For all CSS changes:

• I have used design tokens whenever possible.
• I have considered how this change will behave on different screen sizes.
• I have visually validated my change in light and dark mode.
• I have used gap or flexbox properties for layout instead of margin whenever possible.

Screen.Recording.2026-03-11.at.5.49.38.PM.mov

[github-actions]

Please add either the visual-test-ready or no-visual-test label to this PR depending on whether you want to run visual tests or not.
It is recommended to run visual tests if your PR changes any UI. ‼️

[github-actions]

✔️ Deploy previews ready!
😎 Dialtone documentation preview: https://dialtone.dialpad.com/deploy-previews/pr-1120/
😎 Dialtone-vue preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-1120/

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: a3857bd7d4

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "codex (@codex) review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "codex (@codex) address that feedback".