feat(Tabs): expose --reka-tabs-indicator-thickness CSS variable

[kricsleo]

🔗 Linked issue

resolves #2465

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

📸 Screenshots (if appropriate)

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

Summary by CodeRabbit

• New Features

  • Introduced dynamic tabs indicator thickness that automatically adjusts based on the active tab size.
  • Added new CSS variable --reka-tabs-indicator-thickness to customize the indicator thickness.

• Documentation

  • Documented the new tabs indicator thickness CSS variable.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 62cfa041-9df9-4e21-aae1-53c072dd0b94

📥 Commits

Reviewing files that changed from the base of the PR and between 06d2f71 and 634ec42.

📒 Files selected for processing (2)

• docs/content/docs/components/tabs.md
• packages/core/src/Tabs/TabsIndicator.vue

---

📝 Walkthrough

Walkthrough

The pull request adds a new CSS variable --reka-tabs-indicator-thickness to the TabsIndicator component. This exposes the cross-axis dimension (height in horizontal layout, width in vertical layout) as a CSS custom property, alongside the existing size variable.

Changes

Cohort / File(s)	Summary
Documentation docs/content/docs/components/tabs.md	Added CSS variable documentation entry for --reka-tabs-indicator-thickness describing it as "The thickness of the indicator."
TabsIndicator Implementation packages/core/src/Tabs/TabsIndicator.vue	Added thickness property to IndicatorStyle interface; dynamically sets thickness to activeTab.offsetHeight (horizontal) or activeTab.offsetWidth (vertical); injects value as --reka-tabs-indicator-thickness CSS variable.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 A thickness we now expose,
The cross-dimension of the tabs it shows!
Height becomes width, width becomes height,
Indicators dancing left and right.
With CSS variables burning bright! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: exposing the --reka-tabs-indicator-thickness CSS variable for the Tabs component, which is the primary objective of this PR.
Linked Issues check	✅ Passed	The PR fully implements the feature requested in #2465 by exposing the cross-axis dimension (thickness) as --reka-tabs-indicator-thickness CSS variable for TabsIndicator.
Out of Scope Changes check	✅ Passed	All changes are directly related to exposing the --reka-tabs-indicator-thickness CSS variable as specified in issue #2465; no unrelated modifications were introduced.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

You can customize the tone of the review comments and chat replies.

Configure the tone_instructions setting to customize the tone of the review comments and chat replies. For example, you can set the tone to Act like a strict teacher, Act like a pirate and more.

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/reka-ui@2523

commit: 634ec42