[tabs] Expose tablist scroll overflow state
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
# Feature request
## Summary
Consumers of tablist don't currently have a way to know whether the list has overflowing content to either ends.
## Examples in other libraries
In `@wordpress/components` we are able to access `ariakit`'s internal state and calculate that information ourselves, and we use it to show a mask gradient

Related code: https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/tabs/tablist.tsx#L97-L100
## Motivation
Consumers should know whether the tablist has overflowing content in any direction, which could be useful to add visual indication to the user about the overflowing content — for example
- gradient masks to suggest there is more content to scroll
- scroll buttons that could be enabled / disabled
This information could be made available via CSS variables / data attributes on the tablist.
Although I'm not sure how it could be exposed in case it was needed for disabling buttons.
Potentially, we could expose one "variable" per side: inline start, inline end, block start, block end.
Contributor guide
Assessment
This issue has not been assessed yet.