feat(tabs): added hover and active styles

[soumyaraju]

Part of #15961

It adds the active and hover states to the line and contained scrollable icon buttons and also fixes the Background missing on left scroll button for line tabs.

Rest of the issues mentioned are handled in a different PR #16522

Changelog

New

Testing / Reviewing

[github-actions]

All contributors have signed the DCO.
_{Posted by the DCO Assistant Lite bot.}

[soumyaraju]

I have read the DCO document and I hereby sign the DCO.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	6e8c6e4
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/664cac3f9e4c5f0008268744
😎 Deploy Preview	https://deploy-preview-16523--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	6e8c6e4
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/664cac3fc7b1230008bf62cb
😎 Deploy Preview	https://deploy-preview-16523--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	a2ed999
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/667067a268186400095ca503
😎 Deploy Preview	https://deploy-preview-16523--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	a2ed999
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/667067a22591410008e9baf9
😎 Deploy Preview	https://deploy-preview-16523--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[soumyaraju]

recheck

[soumyaraju]

recheck

[tay1orjones]

Hover states look good. I see you added the active styling but for some reason the active styling is not applied when clicking down and holding the mouse down. You can see here I toggle the active styling on and it's correct, but when I click and hold to scroll it doesn't change from the hover styling:

CleanShot.2024-06-17.at.11.47.33.mp4

[tay1orjones]

The contained tabs have the same issue. There's something odd going on with the gradient. I'm not sure if it's related to your changes or not, but holding down the right arrow a second time after it's already scrolled all the way to the right makes it go backwards the other way.

CleanShot.2024-06-17.at.11.51.01.mp4

You might consider moving these changes into #16522 (review) or moving those changes into this PR so we can make sure it's fully correct with all these changes together.