## What kind of change does this PR introduce?
bug fix on tab component + a small refactor
## What is the current behavior?
the active tab in an underline list gets border-b-2 while its siblings
get nothing, so it's 2px taller and its label sits higher than the rest
causing a smol layout shift within docs
## What is the new behavior?
- adds one absolute positioned bar that slides between tabs so nothing
moves
- favors track under an underline as an inset shadow vs a border
| state | preview |
| -------|------|
| before | <video
src="https://github.com/user-attachments/assets/b73820a6-2994-46d1-aa98-452681f0fef2"
/> |
| after | <video
src="https://github.com/user-attachments/assets/054cd67d-a50c-4aef-9340-a1e1d515047b"
/> |
## Test
1. visit [api
reference](https://docs-git-antlio-ui-components-tabs-supabase.vercel.app/docs/reference/javascript/installing?platform=npm&queryGroups=platform)
2. visit a [guide
](https://docs-git-antlio-ui-components-tabs-supabase.vercel.app/docs/guides/database/prisma)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Added an animated tab indicator that follows the active tab and adapts
to layout changes.
- Added support for customizing tab indicator styling.
- Respects reduced-motion preferences by disabling indicator transitions
when appropriate.
- **Style**
- Streamlined tab borders, spacing, and underlined-tab styling.
- Improved tab panel spacing and standardized tab behavior in
documentation examples.
- Centralized easing behavior for smoother overlays, dropdowns, slides,
and panels.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
## What kind of change does this PR introduce?
visual parity fix and refresh + component extraction (stacked on #49942)
## What is the current behavior?
guide and reference sidebars each hand-roll their own collapsible
section visuals
## What is the new behavior?
- adds `NavSection` composition components (`NavSectionCaret`,
`NavSectionContent`, `NavSectionList`) shared by both navs via radix
`asChild`, so the rail, caret, and motion have a single source of truth
- fixes ui drift between both so navs get the same left rail beside
expanded children, the same caret and animation
- enhances link click area so space between rows is part of the click
target
| state | preview |
| -------|------|
| before | <img width="430" height="288" alt="image"
src="https://github.com/user-attachments/assets/0052d4b7-7793-43cf-8416-2a5445b95148"
/> |
| after | <img width="430" height="288" alt="image"
src="https://github.com/user-attachments/assets/42713ee3-e147-4e53-a58d-3f3de278264d"
/> |
## How to test?
1. run `pnpm dev:docs`
2. open [guide
page](http://localhost:3001/docs/guides/integrations/build-a-supabase-oauth-integration)
3. open [reference
page](http://localhost:3001/docs/reference/dart/introduction)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added animated expand/collapse behavior and rotating caret indicators
to documentation navigation sections.
* Added active-child indicators for clearer navigation context.
* **Improvements**
* Standardized spacing, borders, and animation styles across guide and
reference navigation.
* Improved collapsible animations to support varying content sizes more
reliably.
* Navigation items without links or child content, including disabled
nested items, are no longer displayed.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR migrates the JS config for Tailwind into a CSS config. As such,
all variables have been defined as CSS variables and they're using the
specialized Tailwind syntax for generating utility classes.
Beside the migration, these changes were also added:
- Added `tailwind.config.css` to few packages to make the Tailwind
Intellisense work.
- Migrated away from Radix style color classes to our defined classes,
the values will remain the same.
- Most of the CSS is generated by scripts, they'll be removed in next
PRs.
* Removed redundant `border-light` classes from several components since
it was undefined.
* Removed redundant `text-strong` classes from several components since
it was undefined.
How to test:
- Open all apps, compare the UI (mainly colors) to builds from #45417
and try to find a difference.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Harmonized color variable usages and updated UI color references
(affects palettes, charts, gradients, hero illustrations, and
scrollbars).
* Tweaked border, tab, and selection visuals across components.
* **New Features**
* Added a suite of theme animations and refined typography presets used
by site prose and docs.
* **Refactor**
* Overhauled Tailwind/theme configuration and color token generation for
more consistent theming.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
