Skip to content

feat: added tab-pill-switcher - #89185

Merged
SAPTARSHI-coder merged 1 commit into
SAPTARSHI-coder:mainfrom
cyber-scribe:feat/tab-pill-switcher
Sep 1, 2026
Merged

feat: added tab-pill-switcher#89185
SAPTARSHI-coder merged 1 commit into
SAPTARSHI-coder:mainfrom
cyber-scribe:feat/tab-pill-switcher

Conversation

@cyber-scribe

Copy link
Copy Markdown

Summary

Adds the Tab Pill Switcher component. The component provides a bordered tab strip with a sliding active
background and an underline accent using only HTML and CSS.

What's Included

demo.html

  • Three interactive tabs.
  • CSS-only state switching.
  • Native radio controls.
  • Responsive content layout.
  • No JavaScript dependencies.

style.css

  • Sliding active pill.
  • Gradient accent underline.
  • Smooth transitions.
  • Active-state content animation.
  • Responsive mobile styling.
  • EaseMotion-style CSS custom properties.
  • Keyboard focus states.
  • prefers-reduced-motion support.

README.md

Includes:

  • Component overview.
  • Usage instructions.
  • Customization tokens.
  • Accessibility notes.
  • Browser requirements.

Accessibility

  • Uses native form controls for interaction.
  • Keyboard focus is visible.
  • Reduced-motion preferences are respected.
  • No JavaScript is required.

The demo keeps the implementation dependency-free. A production ARIA
tab system may require additional keyboard behavior such as arrow-key
navigation and programmatic tab selection.

Closes #86823

@github-actions github-actions Bot added animation Animation effects, hover interactions, motion ideas, transitions good first issue Good for newcomers GSSoC-26 Official GSSoC 2026 issue gssoc:approved Approved for GSSoC contributions help wanted Extra attention needed level:intermediate Requires moderate project understanding type:feature New functionality or enhancement contribution and removed help wanted Extra attention needed good first issue Good for newcomers animation Animation effects, hover interactions, motion ideas, transitions GSSoC-26 Official GSSoC 2026 issue gssoc:approved Approved for GSSoC contributions level:intermediate Requires moderate project understanding type:feature New functionality or enhancement labels Sep 1, 2026
@SAPTARSHI-coder

Copy link
Copy Markdown
Owner

✅ Submission Validation Passed!

Great job! All required files are present and valid.

📁 Folder: submissions/examples/tab-pill-switcher

Files found:

  • demo.html
  • style.css
  • README.md

🚀 Next Steps:

  • A maintainer will review your PR
  • Respond to any feedback if requested
  • Once approved, your contribution will be merged!

Thank you for contributing to EaseMotion CSS! 🎉

@SAPTARSHI-coder
SAPTARSHI-coder merged commit 51620ec into SAPTARSHI-coder:main Sep 1, 2026
14 checks passed
@github-actions

github-actions Bot commented Sep 1, 2026

Copy link
Copy Markdown
Contributor

🎉 Congratulations on your PR merge, @cyber-scribe! 🚀

Thank you so much for your valuable contribution to EaseMotion CSS! Your code is now merged into the main branch.

🎮 Join our Discord Server!
We have an official Discord server for EaseMotion CSS! Join us to connect with other developers, seek help, discuss design choices, and share your creations in the showcase channel: Join the EaseMotion CSS Discord 💜

Thank you again, and happy coding! 💻

@github-actions github-actions Bot added accepted Contribution approved for integration into EaseMotion CSS good-pr GSSoC-26 Official GSSoC 2026 issue gssoc:approved Approved for GSSoC contributions integrated Successfully merged and included in the framework level:intermediate Requires moderate project understanding type:feature New functionality or enhancement labels Sep 1, 2026
@github-actions

github-actions Bot commented Sep 1, 2026

Copy link
Copy Markdown
Contributor

🎉 PR Merged! Thanks @cyber-scribe! You have submitted 1/250 PRs today (resets in 10h). GSSoC labels assigned. Discord

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accepted Contribution approved for integration into EaseMotion CSS contribution good-pr gssoc:approved Approved for GSSoC contributions GSSoC-26 Official GSSoC 2026 issue integrated Successfully merged and included in the framework level:intermediate Requires moderate project understanding type:feature New functionality or enhancement

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: add tab-pill-switcher component

2 participants