Repository navigation
feat(segmented-control): animated selection indicator like Tabs - #906
Merged
Merged
Conversation
Add SegmentedControlIndicator (@coss/segmented-control-indicator), which tracks the checked, current, or pressed item and slides a shared pill to it. Item state recipes now only set the active text color, and Tabs share the pill surface class. Radio group and navigation particles render the indicator, and navigation particles track the clicked link. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
|
Deployment failed for project coss-examples-calcom with the following error: View Documentation: https://vercel.com/docs/accounts/team-members-and-roles |
…ticles Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
Deployment failed for project coss-com-ui with the following error: View Documentation: https://vercel.com/docs/accounts/team-members-and-roles |
|
Deployment failed for project coss-com with the following error: View Documentation: https://vercel.com/docs/accounts/team-members-and-roles |
uixmat
enabled auto-merge (squash)
October 20, 2026 12:55
- Item recipe paints the active pill again; a visible indicator suppresses it, so selection survives SSR and compositions without the indicator - Measure the indicator with sub-pixel precision like Base UI Tabs.Indicator - Merge a consumer ref instead of overriding the internal one - Observe attributes on direct children only - Navigation particles no longer prevent default link navigation - Tabs indicator respects reduced motion Co-authored-by: Cursor <cursoragent@cursor.com>
pasqualevitiello
approved these changes
Oct 20, 2026
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Segmented controls now slide a pill between items, matching TabsList.
@coss/segmented-control-indicator: aSegmentedControlIndicatorclient component rendered as the last child of the segmented root. It tracks the direct child withdata-checked,aria-current="page", ordata-pressedand animates over 200 ms ease-in-out (none with reduced motion). It's hidden when nothing is active.segmented-controllib:statevariants now only set the active text colour; the pill surface is a sharedsegmentedControlIndicatorSurfaceClassName, also used by the Tabs indicator.Breaking for custom compositions: the item recipe no longer paints the active background, so they must render
<SegmentedControlIndicator />.Demo
Area.mp4
Testing
registry:validate-deps,registry:build,ui:sync, andtscpass.🤖 Generated with Claude Code